Weather, settings, and nicer collapsible behavior

resources/js/calendar/calendar_edit_page.js

@@ -180,13 +180,11 @@ export default (calendar_structure) => ({
     },
 
     rerenderRequested($event) {
-        // TODO: Figure out an actual solution that lets us overwrite this
-        window.static_data = {
-            ...window.static_data,
-            ...$event.detail.calendar,
-        };
+        for(const [key, value] of Object.entries($event.detail.calendar)) {
+            window.static_data = _.set(window.static_data, key, _.cloneDeep(value));
+        }
 
-        console.log(window.static_data, $event.detail.calendar);
+        console.log(window.static_data);
 
         do_error_check("calendar", $event.detail.rerender);
     }

resources/js/calendar/collapsible_component.js

@@ -1,22 +1,45 @@
 export default class CollapsibleComponent {
     initialized = false;
+    processWatchers = false;
     loads = {};
     watchers = {};
+    setters = {};
+    calendar_settings = {};
 
     load(static_data) {
         if (!static_data) {
             return
         }
 
+        this.calendar_settings = static_data.settings;
+
+        // We want to disable the watchers during loading stages so that we don't get recursive calendar rerender calls
+        this.processWatchers = false;
         for (let [localKey, globalKey] of Object.entries(this.loads)) {
             this[localKey] = _.get(static_data, globalKey);
         }
-
-        this.calendar_settings = static_data.settings;
+        this.processWatchers = true;
 
         if (!this.initialized) {
+            const collapsibleWatchers = {};
+
             for (let localKey of Object.keys(this.watchers)) {
-                this.$watch(localKey, this.watchers[localKey].bind(this));
+                collapsibleWatchers[localKey] ??= [];
+                collapsibleWatchers[localKey].push(this.watchers[localKey].bind(this));
+            }
+
+            for (let [localKey, globalKey] of Object.entries(this.setters)) {
+                collapsibleWatchers[localKey] ??= [];
+                collapsibleWatchers[localKey].push(() => {
+                    this.rerender(globalKey, this[localKey]);
+                });
+            }
+
+            for(const [localKey, methods] of Object.entries(collapsibleWatchers)){
+                this.$watch(localKey, (...args) => {
+                    if(!this.processWatchers) return;
+                    methods.forEach((method) => method(...args));
+                });
             }
 
             this.initialized = true;
@@ -25,8 +48,8 @@ export default class CollapsibleComponent {
         this.loaded(static_data);
     }
 
-    rerender(changed) {
-        this.$dispatch('calendar-rerender-requested', { calendar: changed });
+    rerender(key, value) {
+        this.$dispatch('calendar-rerender-requested', { calendar: { [key]: value } });
     }
 
     loaded(static_data) {

resources/js/calendar/settings_collapsible.js

@@ -1,7 +1,17 @@
-export default () => ({
-    reordering: false,
+import CollapsibleComponent from "./collapsible_component.js";
 
-    load: function(static_data) {
-        //
-    }
-})
+class SettingsCollapsible extends CollapsibleComponent {
+
+    settings = {}
+
+    loads = {
+        "settings": "settings"
+    };
+
+    setters = {
+        "settings": "settings"
+    };
+
+}
+
+export default () => new SettingsCollapsible();

resources/js/calendar/weather_collapsible.js

@@ -1,7 +1,17 @@
-export default () => ({
-    reordering: false,
+import CollapsibleComponent from "./collapsible_component.js";
 
-    load: function(static_data) {
-        //
-    }
-})
+class WeatherCollapsible extends CollapsibleComponent {
+
+    weather = {};
+
+    loads = {
+        "weather": "seasons.global_settings"
+    };
+
+    setters = {
+        "weather": "seasons.global_settings"
+    };
+
+}
+
+export default () => new WeatherCollapsible();

resources/js/calendar/weekdays_collapsible.js

@@ -17,10 +17,14 @@ class WeekdaysCollapsible extends CollapsibleComponent {
         'weekdays': 'year_data.global_week',
         'first_day': 'year_data.first_day',
         'leap_days': 'year_data.leap_days',
+        'overflow_weekdays': 'year_data.overflow',
     };
     watchers = {
-        'weekdays': this.weekdaysChanged,
-        'overflow_weekdays': this.weekdaysChanged,
+        'weekdays': this.weekdaysChanged
+    };
+    setters = {
+        "overflow_weekdays": "year_data.overflow",
+        "weekdays": "year_data.global_week"
     };
 
     loaded(static_data) {
@@ -30,13 +34,6 @@ class WeekdaysCollapsible extends CollapsibleComponent {
     }
 
     weekdaysChanged() {
-        this.rerender({
-            year_data: {
-                overflow: this.overflow_weekdays,
-                global_week: this.weekdays,
-            },
-        });
-
         this.new_weekday_name = '';
         this.deleting = -1;
 

resources/views/components/weather-collapsible.blade.php

@@ -11,8 +11,7 @@
 		<div class='col-8'>Enable weather:</div>
 		<div class='col-4 text-right'>
 			<label class="custom-control custom-checkbox">
-				<input type="checkbox" class="custom-control-input static_input" id='enable_weather'
-							 refresh='false' data='seasons.global_settings' fc-index='enable_weather'>
+				<input type="checkbox" class="custom-control-input" x-model='weather.enable_weather'>
 				<span class="custom-control-indicator"></span>
 			</label>
 		</div>
@@ -28,8 +27,8 @@
 		<div class='row my-2'>
 			<div class='col'>
 				Weather offset (days):
-				<input class='form-control static_input' type='number' refresh='false'
-							 data='seasons.global_settings' fc-index='weather_offset'/>
+				<input class='form-control' :value='weather.weather_offset' type='number'
+               @change='weather.weather_offset = Math.floor(Number($event.target.value))'/>
 			</div>
 		</div>
 
@@ -39,15 +38,13 @@
 		</div>
 
 		<div class='row no-gutters my-1 input-group'>
-			<select class='custom-select form-control type static_input' id='temp_sys'
-							refresh='false' data='seasons.global_settings' fc-index='temp_sys'>
+			<select class='custom-select form-control' x-model='weather.temp_sys'>
 				<option selected value='metric'>Metric</option>
 				<option value='imperial'>Imperial</option>
 				<option value='both_m'>Both (inputs metric)</option>
 				<option value='both_i'>Both (inputs imperial)</option>
 			</select>
-			<select class='custom-select form-control type static_input' refresh='false'
-							data='seasons.global_settings' fc-index='wind_sys'>
+			<select class='custom-select form-control type' x-model='weather.wind_sys'>
 				<option selected value='metric'>Metric</option>
 				<option value='imperial'>Imperial</option>
 				<option value='both'>Both</option>
@@ -59,8 +56,7 @@
 			<div class='col-8'>Cinematic temperature description:</div>
 			<div class='col-4 text-right'>
 				<label class="custom-control custom-checkbox">
-					<input type="checkbox" class="custom-control-input static_input" refresh='false'
-								 data='seasons.global_settings' fc-index='cinematic'>
+					<input type="checkbox" class="custom-control-input" x-model='weather.cinematic'/>
 					<span class="custom-control-indicator"></span>
 				</label>
 			</div>
@@ -71,8 +67,7 @@
 			<div class='col-auto'>Weather generation seed:</div>
 		</div>
 		<div class='row no-gutters input-group'>
-			<input type='number' id='seasons_seed' class='form-control static_input'
-						 refresh='false' data='seasons.global_settings' fc-index='seed'/>
+			<input type='number' id='seasons_seed' class='form-control' x-model='weather.seed'/>
 			<div class="input-group-append">
 				<div class='btn btn-primary' id='reseed_seasons'><i class="fa fa-redo"></i></div>
 			</div>