Skip to content

Commit 73e1908

Browse files
HaxxerHaxxer
committed
Fixed deleting moons
1 parent 2837765 commit 73e1908

File tree

3 files changed

+144
-117
lines changed

3 files changed

+144
-117
lines changed

‎resources/js/calendar/moons_collapsible.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { avg_month_length, get_moon_granularity } from "./calendar_functions.js"
33

44
class MoonsCollapsible extends CollapsibleComponent {
55

6+
deleting = -1;
7+
68
moons = [];
79
months = [];
810
leap_days = [];
@@ -39,6 +41,12 @@ class MoonsCollapsible extends CollapsibleComponent {
3941
this.name = "";
4042
this.cycle = null;
4143
this.shift = null;
44+
this.deleting = -1;
45+
}
46+
47+
removeMoon(index){
48+
this.moons.splice(index, 1);
49+
this.deleting = -1;
4250
}
4351

4452
customPhaseChanged(moon) {

‎resources/sass/calendar/inputs.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -334,6 +334,7 @@ input[type="number"]:not(.spinner) {
334334
line-height: 46px;
335335
}
336336

337+
.remove-container>.btn,
337338
.remove-container>.btn_remove,
338339
.remove-container>.btn_cancel,
339340
.remove-container>.btn_accept {

‎resources/views/components/moons-collapsible.blade.php‎

Lines changed: 135 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,133 +1,151 @@
11
@props(['calendar' => null])
22

33
<div class='row bold-text'>
4-
<div class="col">
5-
New moon:
6-
</div>
4+
<div class="col">
5+
New moon:
6+
</div>
77
</div>
88

99
<div class='add_inputs moon'>
10-
<div class='row no-gutters'>
11-
<input type='text'
12-
class='form-control name protip mb-1'
13-
data-pt-position="top"
14-
data-pt-title="The moon's name."
15-
id='moon_name_input'
16-
placeholder='Moon name' x-model="name">
17-
<div class='input-group'>
10+
<div class='row no-gutters'>
11+
<input type='text'
12+
class='form-control name protip mb-1'
13+
data-pt-position="top"
14+
data-pt-title="The moon's name."
15+
id='moon_name_input'
16+
placeholder='Moon name' x-model="name">
17+
<div class='input-group'>
1818

19-
<input type='number'
20-
class='form-control cycle protip'
21-
data-pt-position="top"
22-
data-pt-title='How many days it takes for this moon go from Full Moon to the next Full Moon.'
23-
min='1'
24-
id='moon_cycle_input'
25-
placeholder='Cycle' x-model="cycle">
19+
<input type='number'
20+
class='form-control cycle protip'
21+
data-pt-position="top"
22+
data-pt-title='How many days it takes for this moon go from Full Moon to the next Full Moon.'
23+
min='1'
24+
id='moon_cycle_input'
25+
placeholder='Cycle' x-model="cycle">
2626

27-
<input type='number'
28-
class='form-control shift protip'
29-
data-pt-position="top"
30-
data-pt-title='This is how many days the cycle is offset by.'
31-
id='moon_shift_input'
32-
placeholder='Shift' x-model="shift">
27+
<input type='number'
28+
class='form-control shift protip'
29+
data-pt-position="top"
30+
data-pt-title='This is how many days the cycle is offset by.'
31+
id='moon_shift_input'
32+
placeholder='Shift' x-model="shift">
3333

34-
<div class='input-group-append'>
35-
<button type='button' class='btn btn-primary add' @click="addMoon">
36-
<i class="fa fa-plus"></i>
37-
</button>
38-
</div>
39-
</div>
40-
</div>
34+
<div class='input-group-append'>
35+
<button type='button' class='btn btn-primary add' @click="addMoon">
36+
<i class="fa fa-plus"></i>
37+
</button>
38+
</div>
39+
</div>
40+
</div>
4141
</div>
4242

43-
<div>
44-
<template x-for="(moon, index) in moons">
45-
<div class='sortable-container list-group-item moon_inputs expanded'>
46-
<div class='main-container'>
47-
<div class='name-container'>
48-
<input type='text' class='form-control name-input small-input' x-model.lazy="moon.name"/>
49-
</div>
50-
<div class="remove-spacer"></div>
51-
</div>
52-
<div class='remove-container'>
53-
<div class='remove-container-text'>Are you sure you want to remove this?</div>
54-
<div class='btn_remove btn btn-danger fa fa-trash'></div>
55-
<div class='btn_cancel btn btn-danger fa fa-xmark'></div>
56-
<div class='btn_accept btn btn-success fa fa-check'></div>
57-
</div>
58-
<div class='collapse-container container mb-2'>
59-
<div class='row no-gutters my-1'>
60-
<div class='form-check col-12 py-2 border rounded'>
61-
<input type='checkbox' :id="`${index}_custom_phase_moon`" class='form-check-input'
62-
:checked="moon.custom_phase" @change="customPhaseChanged(moon)"/>
63-
<label :for="`${index}_custom_phase_moon`" class='form-check-label ml-1'>
64-
Custom phase count
65-
</label>
66-
</div>
67-
</div>
68-
<div x-show="!moon.custom_phase">
69-
<div class='row no-gutters my-1'>
70-
<div class='col-7'>Cycle:</div>
71-
<div class='col-5'>Shift:</div>
72-
</div>
73-
<div class='row no-gutters mb-1'>
74-
<div class='col-7 pr-1'>
75-
<input type='number' min='1' step="any" class='form-control protip' data-pt-position="top" data-pt-title='How many days it takes for this moon go from Full Moon to the next Full Moon.' x-model="moon.cycle"/>
43+
<div class="list-group">
44+
<template x-for="(moon, index) in moons">
45+
<div class="list-group-item p-2 first-of-type:rounded-t">
46+
<div class='flex items-center w-full gap-x-2' x-show="deleting !== index">
47+
<input type='text' class='form-control' x-model.lazy="moon.name"/>
48+
<button class="btn btn-danger w-10" @click="deleting = index">
49+
<i class="fa fa-trash text-lg"></i>
50+
</button>
7651
</div>
77-
<div class='col-5 pl-1'>
78-
<input type='number' step="any" class='form-control protip' data-pt-position="top" data-pt-title='This is how many days the cycle is offset by.' x-model='moon.shift'/>
52+
53+
<div x-show="deleting === index" class="flex items-center w-full gap-x-2.5" x-cloak>
54+
<button class="btn btn-success w-10 !px-0 text-center" @click="removeMoon(index)">
55+
<i class="fa fa-check text-lg"></i>
56+
</button>
57+
58+
<div class="flex-grow">Are you sure?</div>
59+
60+
<button class="btn btn-danger w-10 !px-0 text-center" @click="deleting = -1">
61+
<i class="fa fa-times text-lg"></i>
62+
</button>
7963
</div>
80-
</div>
81-
<div class='row no-gutters mb-1'>
82-
<select class='form-control protip' data-pt-position="top" data-pt-title='This determines the way this moon calculates its phases, as in which way it rounds the phase value to the closest sprite.' x-model='moon.cycle_rounding'>
83-
<option value='floor'>Floor (0.7 becomes 0.0)</option>
84-
<option value='round'>Round (< 0.49 becomes 0.0, 0.5 > becomes 1.0)</option>
85-
<option value='ceil'>Ceiling (0.3 becomes 1.0)</option>
86-
</select>
87-
</div>
88-
</div>
89-
<div class='row no-gutters' x-show="moon.custom_phase">
90-
<div class='col'>
91-
<div class='my-1'>Custom phase:</div>
92-
<div class='input-group my-1'>
93-
<div class='input-group-prepend'>
94-
<button type='button' class='btn btn-sm btn-danger' @click="shiftCustomCycle(moon, -1)"><</button>
95-
</div>
96-
<input type='text' class='form-control form-control-sm' :value='moon.custom_cycle' @change="customCycleChanged(moon, $event)"/>
97-
<div class='input-group-append'>
98-
<button type='button' class='btn btn-sm btn-success' @click="shiftCustomCycle(moon, 1)">></button>
99-
</div>
64+
65+
<div x-show="deleting !== index">
66+
<div class='row no-gutters my-1'>
67+
<div class='form-check col-12 py-2 border rounded'>
68+
<input type='checkbox' :id="`${index}_custom_phase_moon`" class='form-check-input'
69+
:checked="moon.custom_phase" @change="customPhaseChanged(moon)"/>
70+
<label :for="`${index}_custom_phase_moon`" class='form-check-label ml-1'>
71+
Custom phase count
72+
</label>
73+
</div>
74+
</div>
75+
<div x-show="!moon.custom_phase">
76+
<div class='row no-gutters my-1'>
77+
<div class='col-7'>Cycle:</div>
78+
<div class='col-5'>Shift:</div>
79+
</div>
80+
<div class='row no-gutters mb-1'>
81+
<div class='col-7 pr-1'>
82+
<input type='number' min='1' step="any" class='form-control protip' data-pt-position="top"
83+
data-pt-title='How many days it takes for this moon go from Full Moon to the next Full Moon.'
84+
x-model="moon.cycle"/>
85+
</div>
86+
<div class='col-5 pl-1'>
87+
<input type='number' step="any" class='form-control protip' data-pt-position="top"
88+
data-pt-title='This is how many days the cycle is offset by.' x-model='moon.shift'/>
89+
</div>
90+
</div>
91+
<div class='row no-gutters mb-1'>
92+
<select class='form-control protip' data-pt-position="top"
93+
data-pt-title='This determines the way this moon calculates its phases, as in which way it rounds the phase value to the closest sprite.'
94+
x-model='moon.cycle_rounding'>
95+
<option value='floor'>Floor (0.7 becomes 0.0)</option>
96+
<option value='round'>Round (< 0.49 becomes 0.0, 0.5 > becomes 1.0)</option>
97+
<option value='ceil'>Ceiling (0.3 becomes 1.0)</option>
98+
</select>
99+
</div>
100+
</div>
101+
<div class='row no-gutters' x-show="moon.custom_phase">
102+
<div class='col'>
103+
<div class='my-1'>Custom phase:</div>
104+
<div class='input-group my-1'>
105+
<div class='input-group-prepend'>
106+
<button type='button' class='btn btn-sm btn-danger' @click="shiftCustomCycle(moon, -1)">
107+
<
108+
</button>
109+
</div>
110+
<input type='text' class='form-control form-control-sm' :value='moon.custom_cycle'
111+
@change="customCycleChanged(moon, $event)"/>
112+
<div class='input-group-append'>
113+
<button type='button' class='btn btn-sm btn-success' @click="shiftCustomCycle(moon, 1)">
114+
>
115+
</button>
116+
</div>
117+
</div>
118+
<div class='italics-text small-text my-1' :class="{ 'invalid': !!getCustomCycleErrorMsg(moon) }"
119+
:error_msg="getCustomCycleErrorMsg(moon)" x-text="getCustomCycleMessage(moon)"></div>
120+
</div>
121+
</div>
122+
<div class='row no-gutters my-2'>
123+
<div class='col'>
124+
<div class='separator'></div>
125+
</div>
126+
</div>
127+
<div class='row no-gutters mt-1'>
128+
<div class='col-6'>Moon color:</div>
129+
<div class='col-6'>Shadow color:</div>
130+
</div>
131+
<div class='row no-gutters mb-1'>
132+
<div class='col-6 pr-1'>
133+
<input type='color' x-model.lazy='moon.color'/>
134+
</div>
135+
<div class='col-6 pl-1'>
136+
<input type='color' x-model.lazy='moon.shadow_color'/>
137+
</div>
138+
</div>
139+
<div class='row no-gutters my-1'>
140+
<div class='form-check col-12 py-2 border rounded'>
141+
<input type='checkbox' :id='`${index}_hidden_moon`' class='form-check-input'
142+
x-model='moon.hidden'/>
143+
<label :for='`${index}_hidden_moon`' class='form-check-label ml-1'>
144+
Hide from guest viewers
145+
</label>
146+
</div>
147+
</div>
100148
</div>
101-
<div class='italics-text small-text my-1' :class="{ 'invalid': !!getCustomCycleErrorMsg(moon) }"
102-
:error_msg="getCustomCycleErrorMsg(moon)" x-text="getCustomCycleMessage(moon)"></div>
103-
</div>
104-
</div>
105-
<div class='row no-gutters my-2'>
106-
<div class='col'>
107-
<div class='separator'></div>
108-
</div>
109149
</div>
110-
<div class='row no-gutters mt-1'>
111-
<div class='col-6'>Moon color:</div>
112-
<div class='col-6'>Shadow color:</div>
113-
</div>
114-
<div class='row no-gutters mb-1'>
115-
<div class='col-6 pr-1'>
116-
<input type='color' x-model.lazy='moon.color'/>
117-
</div>
118-
<div class='col-6 pl-1'>
119-
<input type='color' x-model.lazy='moon.shadow_color'/>
120-
</div>
121-
</div>
122-
<div class='row no-gutters my-1'>
123-
<div class='form-check col-12 py-2 border rounded'>
124-
<input type='checkbox' :id='`${index}_hidden_moon`' class='form-check-input' x-model='moon.hidden'/>
125-
<label :for='`${index}_hidden_moon`' class='form-check-label ml-1'>
126-
Hide from guest viewers
127-
</label>
128-
</div>
129-
</div>
130-
</div>
131-
</div>
132-
</template>
150+
</template>
133151
</div>

0 commit comments

Comments
 (0)