From 3419ae4d4a970c1a4d6b4c0bdbbf4e7c630096fc Mon Sep 17 00:00:00 2001 From: V13Axel Date: Thu, 19 Dec 2024 23:51:13 -0500 Subject: [PATCH] Most of the way to a functional real-time advancement collapsible --- resources/js/calendar.js | 9 +- .../js/calendar/collapsible_component.js | 4 + .../real_time_advancement_collapsible.js | 36 ++- .../components/clock-collapsible.blade.php | 222 +++++++------ ...eal-time-advancement-collapsible.blade.php | 302 ++++++++---------- 5 files changed, 289 insertions(+), 284 deletions(-) diff --git a/resources/js/calendar.js b/resources/js/calendar.js index ba3162e4..5bb8739b 100644 --- a/resources/js/calendar.js +++ b/resources/js/calendar.js @@ -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", ]; @@ -43,6 +42,10 @@ export default class Calendar { }) } + set advancement(value) { + window.advancement = value; + } + get static_data() { return window.static_data; } @@ -62,4 +65,8 @@ export default class Calendar { get id() { return window.calendar_id; } + + get advancement() { + return window.advancement; + } } diff --git a/resources/js/calendar/collapsible_component.js b/resources/js/calendar/collapsible_component.js index 2af52a8c..75116d11 100644 --- a/resources/js/calendar/collapsible_component.js +++ b/resources/js/calendar/collapsible_component.js @@ -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))); + } } diff --git a/resources/js/calendar/real_time_advancement_collapsible.js b/resources/js/calendar/real_time_advancement_collapsible.js index 47d658f8..0a4db6f6 100644 --- a/resources/js/calendar/real_time_advancement_collapsible.js +++ b/resources/js/calendar/real_time_advancement_collapsible.js @@ -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(); diff --git a/resources/views/components/clock-collapsible.blade.php b/resources/views/components/clock-collapsible.blade.php index 3452a8bd..5d06f822 100644 --- a/resources/views/components/clock-collapsible.blade.php +++ b/resources/views/components/clock-collapsible.blade.php @@ -1,122 +1,118 @@ @props(['calendar' => null])
-
Enable:
-
- @if(request()->is('calendars/*/edit') && $calendar->isLinked()) - {{ Arr::get($calendar->static_data, 'clock.enabled') ? "Yes" : "No" }} - @else - - @endif -
-
Render:
-
- -
+
Enable:
+
+ @if(request()->is('calendars/*/edit') && $calendar->isLinked()) + {{ Arr::get($calendar->static_data, 'clock.enabled') ? "Yes" : "No" }} + @else + + @endif +
+
Render:
+
+ +
- -
-
- Hours: -
-
- Minutes: -
-
- -
-
- @if(request()->is('calendars/*/edit') && $calendar->isLinked()) - {{ Arr::get($calendar->static_data, 'clock.hours') }} - @else -
- -
- -
- -
- @endif -
- -
- @if(request()->is('calendars/*/edit') && $calendar->isLinked()) - {{ Arr::get($calendar->static_data, 'clock.minutes') }} - @else -
- -
- -
- -
- @endif -
- -
- -
-
- Offset hours: -
-
- Crowding: -
-
- -
- -
-
- -
- - - -
- -
-
- -
-
- -
- - - -
- -
-
- -
- - +
+
+ Hours: +
+
+ Minutes: +
+
+ +
+
+ @if(request()->is('calendars/*/edit') && $calendar->isLinked()) + {{ Arr::get($calendar->static_data, 'clock.hours') }} + @else +
+ +
+ +
+ +
+ @endif +
+ +
+ @if(request()->is('calendars/*/edit') && $calendar->isLinked()) + {{ Arr::get($calendar->static_data, 'clock.minutes') }} + @else +
+ +
+ +
+ +
+ @endif +
+ +
+ +
+
+ Offset hours: +
+
+ Crowding: +
+
+ +
+ +
+
+ +
+ + + +
+ +
+
+ +
+
+ +
+ + + +
+ +
+
+
@if(request()->is('calendars/*/edit') && $calendar->isLinked()) diff --git a/resources/views/components/real-time-advancement-collapsible.blade.php b/resources/views/components/real-time-advancement-collapsible.blade.php index 977722a1..f97c6816 100644 --- a/resources/views/components/real-time-advancement-collapsible.blade.php +++ b/resources/views/components/real-time-advancement-collapsible.blade.php @@ -2,174 +2,146 @@ @if(isset($calendar) && $calendar->isPremium()) @if(request()->is('calendars/*/edit') && $calendar->parent()->exists()) -

Why can't I edit the real time - advancement?

+

Why can't I edit the real time advancement?

@else -
advancement_real_rate ?? 1 }}, - advancement_real_rate_unit: '{{ $calendar->advancement_real_rate_unit ?? "hours" }}', - advancement_rate: {{ $calendar->advancement_rate ?? 1 }}, - advancement_rate_unit: '{{ $calendar->advancement_rate_unit ?? ($calendar->clock_enabled ? "hours" : "days") }}', - advancement_webhook_url: '{{ $calendar->advancement_webhook_url }}', - advancement_webhook_format: '{{ $calendar->advancement_webhook_format }}', - advancement_timezone: Intl.DateTimeFormat().resolvedOptions().timeZone, - }, - toggle_clock($event){ - this.clock_enabled = $event.detail.enabled; - if(this.data.advancement_rate_unit !== 'days'){ - this.data.advancement_rate_unit = 'days'; - } - }, - clock_enabled: {{ $calendar->clock_enabled ? "true" : "false" }}, - toJSON(){ - return JSON.parse(JSON.stringify(this.data)); - } - }" - > - -
-
Enable real-time advancement:
-
- @if(request()->is('calendars/*/edit') && $calendar->isChild()) - - @else - - @endif -
-
- -
- -
-
-
- -
- For every -
- -
-
- - - -
-
- -
- Advance this calendar by -
- -
-
- - - -
-
- -
- - The clock is not enabled, so minutes and hours are not available for real - time advancement. - -
- -
-
-
- -
-
- Notification webhooks -
-
- -
-
- - - - @feature('discord') - - Setup a Discord webhook - - @endfeature -
-
- - @feature('discord') -
-
- -
-
- This calendar has configured through the Discord integration. - You can manage via your - profile. -
-
- @endfeature - -
- -
+
+ +
+
Enable real-time advancement:
+ +
+ @if(request()->is('calendars/*/edit') && $calendar->isChild()) + + @else + + @endif +
+
+ +
+
+
+
+ +
+ For every +
+ +
+
+ + + +
+
+ +
+ Advance this calendar by +
+ +
+
+ + + +
+
+ +
+ + The clock is not enabled, so minutes and hours are not available for real + time advancement. + +
+ +
+
+
+ +
+
+ Notification webhooks +
+
+ +
+
+ + + + @feature('discord') + + Setup a Discord webhook + + @endfeature +
+
+ + @feature('discord') +
+
+ +
+
+ This calendar has configured through the Discord integration. + You can manage via your + profile. +
+
+ @endfeature + +
+ +
@endif @else -
-

Make your calendar advance its time automatically, with settings to control how fast or - slow it should advance!

-

Subscribe - now to unlock this feature!

-
+
+

Make your calendar advance its time automatically, with settings to control how fast or + slow it should advance!

+

Subscribe + now to unlock this feature!

+
@endif