Skip to content

Commit

Permalink
Fix month selection jumping back to option 0
Browse files Browse the repository at this point in the history
  • Loading branch information
@V13Axel
V13Axel committed Feb 14, 2025
1 parent 330d803 commit b70cb8d
Show file tree
Hide file tree
Showing 2 changed files with 86 additions and 54 deletions.
127 changes: 80 additions & 47 deletions resources/js/calendar/seasons_collapsible.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ class SeasonsCollapsible extends CollapsibleComponent {
show_location_season_warning = false;
presetSeasons = [];

expandedSeasons = [];

inboundProperties = {
"seasons": "static_data.seasons.data",
"settings": "static_data.seasons.global_settings",
Expand Down Expand Up @@ -59,7 +61,7 @@ class SeasonsCollapsible extends CollapsibleComponent {
this.seasons.splice(end, 0, elem);
}

loaded(){
loaded() {
this.handleSeasonsChanged();
}

Expand All @@ -69,6 +71,18 @@ class SeasonsCollapsible extends CollapsibleComponent {
this.sortSeasons();
}

isCollapsed(index) {
return !this.expandedSeasons.includes(index);
}

toggleCollapsed(index) {
if (this.expandedSeasons.includes(index)) {
this.expandedSeasons.splice(this.expandedSeasons.indexOf(index), 1);
} else {
this.expandedSeasons.push(index)
}
}

addSeason() {
let newSeason = {
"name": this.season_name || "New season",
Expand All @@ -90,7 +104,7 @@ class SeasonsCollapsible extends CollapsibleComponent {

let averageYearLength = this.$store.calendar.average_year_length;

if(this.settings.periodic_seasons){
if (this.settings.periodic_seasons) {
if (this.seasons.length === 0) {
newSeason.transition_length = averageYearLength;
} else {
Expand Down Expand Up @@ -121,7 +135,7 @@ class SeasonsCollapsible extends CollapsibleComponent {
this.season_name = "";
}

removeSeason(index){
removeSeason(index) {
this.seasons.splice(index, 1);
this.deleting = -1;
}
Expand All @@ -132,13 +146,13 @@ class SeasonsCollapsible extends CollapsibleComponent {
// so if we turn it on before they exist, we risk having Alpine try to access data that may not exist
let seasonColorEnabled = !this.settings.color_enabled;

if(!seasonColorEnabled){
if (!seasonColorEnabled) {
this.settings.color_enabled = false;
}

let colors = []
for (let index = 0; index < this.seasons.length; index++) {
if(!seasonColorEnabled){
if (!seasonColorEnabled) {
delete this.seasons[index].color;
continue;
}
Expand All @@ -157,12 +171,12 @@ class SeasonsCollapsible extends CollapsibleComponent {
this.seasons[index].color = _.cloneDeep(colors[index]);
}

if(seasonColorEnabled){
if (seasonColorEnabled) {
this.settings.color_enabled = true;
}
}

switchPeriodicSeason(){
switchPeriodicSeason() {
let eraEndsYear = this.eras.some(era => era.settings.ends_year);

if (eraEndsYear) {
Expand All @@ -180,22 +194,22 @@ class SeasonsCollapsible extends CollapsibleComponent {
: "Dated seasons start and end on specific dates, regardless of leaping months and days."

swal.fire({
title: "Are you sure?",
html: `<p>Are you sure you want to switch to ${type} seasons? ${explanation}</p><p>Your current seasons will be deleted so you can re-create them.</p>`,
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Okay',
icon: "warning",
})
title: "Are you sure?",
html: `<p>Are you sure you want to switch to ${type} seasons? ${explanation}</p><p>Your current seasons will be deleted so you can re-create them.</p>`,
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Okay',
icon: "warning",
})
.then((result) => {
if (result.dismiss) return;
this.seasons = [];
this.settings.periodic_seasons = !this.settings.periodic_seasons;
});
}

createSeasonEvents(){
createSeasonEvents() {
new Promise((resolve, reject) => {

let found = false;
Expand All @@ -207,15 +221,15 @@ class SeasonsCollapsible extends CollapsibleComponent {

if (found) {
swal.fire({
title: `Season events exist!`,
text: "You already have solstice and equinox events, are you sure you want to create another set?",
showCloseButton: false,
showCancelButton: true,
cancelButtonColor: '#3085d6',
confirmButtonColor: '#d33',
confirmButtonText: 'Yes',
icon: "warning"
})
title: `Season events exist!`,
text: "You already have solstice and equinox events, are you sure you want to create another set?",
showCloseButton: false,
showCancelButton: true,
cancelButtonColor: '#3085d6',
confirmButtonColor: '#d33',
confirmButtonText: 'Yes',
icon: "warning"
})
.then((result) => {
if (result.dismiss === "close" || result.dismiss === "cancel") {
reject();
Expand All @@ -240,19 +254,19 @@ class SeasonsCollapsible extends CollapsibleComponent {

let clockEnabled = this.clock.enabled;
swal.fire({
title: `Simple or Complex?`,
html: html,
showCloseButton: true,
showCancelButton: true,
confirmButtonColor: '#4D61B3',
cancelButtonColor: this.clock.enabled ? '#84B356' : '#999999',
confirmButtonText: 'Simple',
cancelButtonText: 'Complex',
icon: "question",
onOpen: function () {
$(swal.getCancelButton()).prop("disabled", !clockEnabled);
}
})
title: `Simple or Complex?`,
html: html,
showCloseButton: true,
showCancelButton: true,
confirmButtonColor: '#4D61B3',
cancelButtonColor: this.clock.enabled ? '#84B356' : '#999999',
confirmButtonText: 'Simple',
cancelButtonText: 'Complex',
icon: "question",
onOpen: function() {
$(swal.getCancelButton()).prop("disabled", !clockEnabled);
}
})
.then((result) => {
if (result.dismiss === "close") return;
let complex = result.dismiss === "cancel";
Expand All @@ -263,7 +277,7 @@ class SeasonsCollapsible extends CollapsibleComponent {
}

// TODO: This is duplicated from the locations collapsible, with minor changes - perhaps split out? Probably not.
interpolateSeasonTimes(season_index){
interpolateSeasonTimes(season_index) {
let prev_id = (season_index - 1) % this.seasons.length
if (prev_id < 0) prev_id += this.seasons.length

Expand Down Expand Up @@ -326,15 +340,15 @@ class SeasonsCollapsible extends CollapsibleComponent {
}
}

evaluateSeasonLengthText(){
evaluateSeasonLengthText() {
let validSeasons = this.seasons.length && this.settings.periodic_seasons;

if (this.dynamic_data.custom_location) {
let custom_location = this.locations[this.dynamic_data.location];
this.show_location_season_warning = !custom_location.season_based_time && validSeasons;
}

if(!validSeasons) return;
if (!validSeasons) return;

let total_seasons_length = this.seasons.reduce(season => season.transition_length + season.duration);
let average_year_length = this.$store.calendar.average_year_length;
Expand Down Expand Up @@ -373,26 +387,45 @@ class SeasonsCollapsible extends CollapsibleComponent {
return false;
}

sortSeasons(){
if(this.settings.periodic_seasons) return;
sortSeasons() {
if (this.settings.periodic_seasons) return;

console.log(JSON.parse(JSON.stringify(this.expandedSeasons)));

// [1, 3]
let oldExpandedSeasons = _.clone(this.expandedSeasons).reduce((acc, index) => ({
...acc,
[this.seasons[index].name + this.seasons[index].timespan + this.seasons[index].day]: index
}), {});

console.log(JSON.parse(JSON.stringify(this.seasons)));
this.seasons.sort((a, b) => {
return (a.timespan === b.timespan)
? a.day - b.day
: a.timespan - b.timespan;
});
// TODO: Figure out a way to persist the current expanded season even though order changed

console.log(JSON.parse(JSON.stringify(this.seasons)));

this.expandedSeasons = this.seasons.reduce((acc, value, index) => {
if (oldExpandedSeasons[this.seasons[index].name + this.seasons[index].timespan + this.seasons[index].day] >= 0) {
acc.push(index);
}

return acc;
}, [])
}

refreshSeasonPresetOrder(){
refreshSeasonPresetOrder() {
let detectedSeasons = this.determineAutomaticSeasonMapping();

if(!detectedSeasons){
if (!detectedSeasons) {
this.presetSeasons = [];
this.settings.preset_order = false;
return;
}

if(!this.settings.preset_order.length){
if (!this.settings.preset_order.length) {
this.settings.preset_order = detectedSeasons;
}

Expand Down
13 changes: 6 additions & 7 deletions resources/views/components/seasons-collapsible.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@

<div class='add_inputs seasons row no-gutters'>
<div class='input-group'>
<input type='text' class='form-control' placeholder='Season name' x-model="season_name">
<input type='text' class='form-control' placeholder='Season name' x-model="season_name" @keyup.enter="addSeason">
<div class="input-group-append">
<button type='button' class='btn btn-primary' @click="addSeason"><i class="fa fa-plus"></i></button>
</div>
Expand All @@ -53,14 +53,13 @@
<template x-for="(season, index) in seasons" x-ref="seasons-sortable-template">

<div class='sortable-container list-group-item collapsible p-2 first-of-type:rounded-t'
x-data="{ collapsed: true }"
:class="{'collapsed': collapsed}">
:class="{'collapsed': isCollapsed(index)}">

<div class='flex items-center w-full gap-x-2' x-show="deleting !== index">
<div class='handle fa fa-bars' x-show="settings.periodic_seasons"></div>
<div class='cursor-pointer text-xl fa'
:class="{ 'fa-caret-square-up': !collapsed, 'fa-caret-square-down': collapsed }"
@click="collapsed = !collapsed"></div>
:class="{ 'fa-caret-square-up': !isCollapsed(index), 'fa-caret-square-down': isCollapsed(index) }"
@click="toggleCollapsed(index)"></div>
<input type='text' class='name-input small-input form-control' x-model.lazy='season.name'/>
<button class="btn btn-danger w-10" @click="deleting = index">
<i class="fa fa-trash text-lg"></i>
Expand Down Expand Up @@ -113,8 +112,8 @@
<div class='col'>
<select type='number' class='form-control' x-model='season.timespan'>
{{-- TODO: Figure out why x-model doesn't work here, have to use :selected --}}
<template x-for="(month, month_index) in months">
<option :value="month_index" :selected="month_index === season.timespan" x-text="month.name"></option>
<template x-for="(month, month_index) in months" :key="month_index">
<option :value="month_index" x-text="month.name"></option>
</template>
</select>
</div>
Expand Down

0 comments on commit b70cb8d

Please sign in to comment.