Skip to content

Commit

Permalink
Most of the way to a functional real-time advancement collapsible
Browse files Browse the repository at this point in the history
  • Loading branch information
@V13Axel
V13Axel committed Dec 20, 2024
1 parent 18325c1 commit 3419ae4
Show file tree
Hide file tree
Showing 5 changed files with 289 additions and 284 deletions.
9 changes: 8 additions & 1 deletion resources/js/calendar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
export default class Calendar {

update(incomingChanges) {
// TODO: Evaluate whether this should be here or not
let structuralKeys = [
"static_data.year_data",
];
Expand Down Expand Up @@ -43,6 +42,10 @@ export default class Calendar {
})
}

set advancement(value) {
window.advancement = value;
}

get static_data() {
return window.static_data;
}
Expand All @@ -62,4 +65,8 @@ export default class Calendar {
get id() {
return window.calendar_id;
}

get advancement() {
return window.advancement;
}
}
4 changes: 4 additions & 0 deletions resources/js/calendar/collapsible_component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,4 +110,8 @@ export default class CollapsibleComponent {
hasError(path) {
return this.errors.some(error => error.path === path);
}

debug() {
console.log(JSON.parse(JSON.stringify(this)));
}
}
36 changes: 31 additions & 5 deletions resources/js/calendar/real_time_advancement_collapsible.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,33 @@
export default () => ({
reordering: false,
import CollapsibleComponent from "./collapsible_component";

load: function(static_data) {
//
class RealTimeAdvancementCollapsible extends CollapsibleComponent {
collapsible_name = "Real-Time Advancement";
_clock_enabled = false;

inboundProperties = {
"advancement": "advancement",
"clock_enabled": "static_data.clock.enabled"
};

outboundProperties = {
"advancement": "advancement",
};

changeHandlers = {
"advancement": this.debug
};

set clock_enabled(value) {
this._clock_enabled = value;

if (this.advancement.advancement_rate_unit !== 'days') {
this.advancement.advancement_rate_unit = 'days';
}
};

get clock_enabled() {
return this._clock_enabled;
}
})
}

export default () => new RealTimeAdvancementCollapsible();
222 changes: 109 additions & 113 deletions resources/views/components/clock-collapsible.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,122 +1,118 @@
@props(['calendar' => null])

<div class='row'>
<div class='col-3 bold-text'>Enable:</div>
<div class='col-3 text-right'>
@if(request()->is('calendars/*/edit') && $calendar->isLinked())
{{ Arr::get($calendar->static_data, 'clock.enabled') ? "Yes" : "No" }}
@else
<label class="custom-control custom-checkbox center-text">
<input type="checkbox" class="custom-control-input" x-model="clock.enabled"/>
<span class="custom-control-indicator"></span>
</label>
@endif
</div>
<div class='render_clock col-3 bold-text' x-show="clock.enabled">Render:</div>
<div class='render_clock col-3 text-right' x-show="clock.enabled">
<label class="custom-control custom-checkbox center-text">
<input type="checkbox" class="custom-control-input" x-model="clock.render"/>
<span class="custom-control-indicator"></span>
</label>
</div>
<div class='col-3 bold-text'>Enable:</div>
<div class='col-3 text-right'>
@if(request()->is('calendars/*/edit') && $calendar->isLinked())
{{ Arr::get($calendar->static_data, 'clock.enabled') ? "Yes" : "No" }}
@else
<label class="custom-control custom-checkbox center-text">
<input type="checkbox" class="custom-control-input" x-model="clock.enabled"/>
<span class="custom-control-indicator"></span>
</label>
@endif
</div>
<div class='render_clock col-3 bold-text' x-show="clock.enabled">Render:</div>
<div class='render_clock col-3 text-right' x-show="clock.enabled">
<label class="custom-control custom-checkbox center-text">
<input type="checkbox" class="custom-control-input" x-model="clock.render"/>
<span class="custom-control-indicator"></span>
</label>
</div>
</div>

<div class='clock_inputs' x-show="clock.enabled">

<div class='row mt-2'>
<div class='col-6 bold-text'>
Hours:
</div>
<div class='col-6 pl-0 bold-text'>
Minutes:
</div>
</div>

<div class='row mb-2'>
<div class='col-6 input-group'>
@if(request()->is('calendars/*/edit') && $calendar->isLinked())
{{ Arr::get($calendar->static_data, 'clock.hours') }}
@else
<div class='input-group-prepend'>
<button type='button' class='btn btn-sm btn-danger' @click="clock.hours = Math.max(0, clock.hours - 1)">
<i class="fa fa-minus"></i>
</button>
</div>
<input class='form-control form-control-sm' min='1' :value="clock.hours" @change="clock.hours = Math.max(1, Number($event.target.value))"/>
<div class='input-group-append'>
<button type='button' class='btn btn-sm btn-success' @click="clock.hours += 1">
<i class="fa fa-plus"></i>
</button>
</div>
@endif
</div>

<div class='col-6 input-group pl-0'>
@if(request()->is('calendars/*/edit') && $calendar->isLinked())
{{ Arr::get($calendar->static_data, 'clock.minutes') }}
@else
<div class='input-group-prepend'>
<button type='button' class='btn btn-sm btn-danger' @click="clock.minutes = Math.max(1, clock.minutes - 1)">
<i class="fa fa-minus"></i>
</button>
</div>
<input class='form-control form-control-sm' type='number' :value="clock.minutes" @change="clock.minutes = Math.max(1, Number($event.target.value))"/>
<div class='input-group-append'>
<button type='button' class='btn btn-sm btn-success' @click="clock.minutes += 1">
<i class="fa fa-plus"></i>
</button>
</div>
@endif
</div>

</div>

<div class='row mt-2' x-show="clock.render">
<div class='col-6 bold-text'>
Offset hours:
</div>
<div class='col-6 pl-0 bold-text'>
Crowding:
</div>
</div>

<div class='row mb-1' x-show="clock.render">

<div class='col-6 input-group'>
<div class='input-group-prepend'>
<button type='button' class='btn btn-sm btn-danger' @click="clock.offset -= 1">
<i class="fa fa-minus"></i>
</button>
</div>

<input class='form-control form-control-sm' type='number' :value="clock.offset" @change="clock.offset = Number($event.target.value)">

<div class='input-group-append'>
<button type='button' class='btn btn-sm btn-success' @click="clock.offset += 1">
<i class="fa fa-plus"></i>
</button>
</div>
</div>

<div class='col-6 pl-0 input-group'>
<div class='input-group-prepend'>
<button type='button' class='btn btn-sm btn-danger' @click="clock.crowding = Math.max(0, clock.crowding - 1)">
<i class="fa fa-minus"></i>
</button>
</div>

<input class='form-control form-control-sm' type='number' :value="clock.crowding" @change="clock.crowding = Math.max(0, Number($event.target.value))">

<div class='input-group-append'>
<button type='button' class='btn btn-sm btn-success' @click="clock.crowding += 1">
<i class="fa fa-plus"></i>
</button>
</div>
</div>

</div>


<div class='row mt-2'>
<div class='col-6 bold-text'>
Hours:
</div>
<div class='col-6 pl-0 bold-text'>
Minutes:
</div>
</div>

<div class='row mb-2'>
<div class='col-6 input-group'>
@if(request()->is('calendars/*/edit') && $calendar->isLinked())
{{ Arr::get($calendar->static_data, 'clock.hours') }}
@else
<div class='input-group-prepend'>
<button type='button' class='btn btn-sm btn-danger' @click="clock.hours = Math.max(0, clock.hours - 1)">
<i class="fa fa-minus"></i>
</button>
</div>
<input class='form-control form-control-sm' min='1' :value="clock.hours" @change="clock.hours = Math.max(1, Number($event.target.value))"/>
<div class='input-group-append'>
<button type='button' class='btn btn-sm btn-success' @click="clock.hours += 1">
<i class="fa fa-plus"></i>
</button>
</div>
@endif
</div>

<div class='col-6 input-group pl-0'>
@if(request()->is('calendars/*/edit') && $calendar->isLinked())
{{ Arr::get($calendar->static_data, 'clock.minutes') }}
@else
<div class='input-group-prepend'>
<button type='button' class='btn btn-sm btn-danger' @click="clock.minutes = Math.max(1, clock.minutes - 1)">
<i class="fa fa-minus"></i>
</button>
</div>
<input class='form-control form-control-sm' type='number' :value="clock.minutes" @change="clock.minutes = Math.max(1, Number($event.target.value))"/>
<div class='input-group-append'>
<button type='button' class='btn btn-sm btn-success' @click="clock.minutes += 1">
<i class="fa fa-plus"></i>
</button>
</div>
@endif
</div>

</div>

<div class='row mt-2' x-show="clock.render">
<div class='col-6 bold-text'>
Offset hours:
</div>
<div class='col-6 pl-0 bold-text'>
Crowding:
</div>
</div>

<div class='row mb-1' x-show="clock.render">

<div class='col-6 input-group'>
<div class='input-group-prepend'>
<button type='button' class='btn btn-sm btn-danger' @click="clock.offset -= 1">
<i class="fa fa-minus"></i>
</button>
</div>

<input class='form-control form-control-sm' type='number' :value="clock.offset" @change="clock.offset = Number($event.target.value)">

<div class='input-group-append'>
<button type='button' class='btn btn-sm btn-success' @click="clock.offset += 1">
<i class="fa fa-plus"></i>
</button>
</div>
</div>

<div class='col-6 pl-0 input-group'>
<div class='input-group-prepend'>
<button type='button' class='btn btn-sm btn-danger' @click="clock.crowding = Math.max(0, clock.crowding - 1)">
<i class="fa fa-minus"></i>
</button>
</div>

<input class='form-control form-control-sm' type='number' :value="clock.crowding" @change="clock.crowding = Math.max(0, Number($event.target.value))">

<div class='input-group-append'>
<button type='button' class='btn btn-sm btn-success' @click="clock.crowding += 1">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
</div>
</div>

@if(request()->is('calendars/*/edit') && $calendar->isLinked())
Expand Down
Loading

0 comments on commit 3419ae4

Please sign in to comment.