Setup the linking timespan and day selects

fantasycalendar · Feb 24, 2025 · eaf4063 · eaf4063
1 parent 8b6c95f
commit eaf4063
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/resources/js/calendar.js b/resources/js/calendar.js
@@ -42,6 +42,15 @@ export default class Calendar {
         return get_timespans_in_year(this.static_data, convert_year(this.static_data, year), inclusive);
     }
 
+    get_timespans_in_year_as_select_options(year, inclusive = true) {
+        // TODO: Replace this with something a bit more holistic?
+        return get_timespans_in_year(this.static_data, convert_year(this.static_data, year), inclusive)
+            .map(({ result, reason }, index) => ({
+                name: this.static_data.year_data.timespans[index].name + (!result ? ` (${reason})` : ""),
+                disabled: !result
+            }));
+    }
+
     does_timespan_appear(year, timespan) {
         // TODO: Replace this with something a bit more holistic?
         return does_timespan_appear(this.static_data, convert_year(this.static_data, year), timespan);
@@ -51,6 +60,11 @@ export default class Calendar {
         return get_days_in_timespan(this.static_data, convert_year(this.static_data, year), timespan);
     }
 
+    get_days_in_timespan_in_year_as_select_options(year, timespan) {
+        return this.get_days_in_timespan_in_year(year, timespan)
+            .map((day, index) => `Day ${index + 1}` + (day.text ? ` - ${day.text}` : ""));
+    }
+
     does_day_appear(year, timespan, day) {
         // TODO: Replace this with something a bit more holistic?
         return does_day_appear(this.static_data, convert_year(this.static_data, year), timespan);

diff --git a/resources/views/components/calendar-linking-collapsible.blade.php b/resources/views/components/calendar-linking-collapsible.blade.php
@@ -74,13 +74,29 @@ class="fa fa-question-circle"></i> Calendar Linking</a>.</small></p>
 
                                         <div class='row my-2'>
                                             <div class='col'>
-                                                <select type='number' class='form-control' :disabled="locked" x-model="timespan"></select>
+                                                <select
+                                                    type='number'
+                                                    class='form-control'
+                                                    :disabled="locked"
+                                                    x-model.lazy.number="timespan"
+                                                >
+                                                    <template x-for="(month, index) in $store.calendar.get_timespans_in_year_as_select_options(year)">
+                                                        <option :value="index" x-text="month.name"
+                                                                :selected="index === timespan"
+                                                                :disabled="month.disabled"></option>
+                                                    </template>
+                                                </select>
                                             </div>
                                         </div>
 
                                         <div class='row my-2'>
                                             <div class='col'>
-                                                <select type='number' class='form-control' :disabled="locked" x-model="day"></select>
+                                                <select type='number' class='form-control' :disabled="locked" x-model.lazy.number="day">
+                                                    <template x-for="(timespan_day, index) in $store.calendar.get_days_in_timespan_in_year_as_select_options(year, timespan)">
+                                                        <option :value="index+1" x-text="timespan_day"
+                                                                :selected="index+1 === day"></option>
+                                                    </template>
+                                                </select>
                                             </div>
                                         </div>
                                     </div>