Componentized all collapsibles

resources/js/app.js

@@ -304,27 +304,68 @@ Alpine.data('MainApp', () => ({
 import ContextMenu from './context-menu.js';
 Alpine.data('context_menu', ContextMenu);
 
+import RichEditor from './rich-editor.js';
+Alpine.data('rich_editor', RichEditor);
+
+import MoonTooltip from './moon-tooltip.js';
+Alpine.data('moon_tooltip', MoonTooltip);
+
+import WeatherTooltip from './weather-tooltip.js';
+Alpine.data("weather_tooltip", WeatherTooltip);
+
 import StatisticsCollapsible from './calendar/statistics_collapsible.js';
 Alpine.data('statistics_collapsible', StatisticsCollapsible);
 
 import CurrentDateCollapsible from './calendar/current_date_collapsible.js';
 Alpine.data('current_date_collapsible', CurrentDateCollapsible);
 
+import ClockCollapsible from './calendar/clock_collapsible.js';
+Alpine.data('clock_collapsible', ClockCollapsible);
+
+import RealTimeAdvancementCollapsible from './calendar/real_time_advancement_collapsible.js';
+Alpine.data('real_time_advancement_collapsible', RealTimeAdvancementCollapsible);
+
 import WeekdaysCollapsible from './calendar/weekdays_collapsible.js';
 Alpine.data('weekdays_collapsible', WeekdaysCollapsible);
 
 import MonthsCollapsible from './calendar/months_collapsible.js';
 Alpine.data('months_collapsible', MonthsCollapsible);
 
+import LeapDaysCollapsible from './calendar/leap_days_collapsible.js';
+Alpine.data('leap_days_collapsible', LeapDaysCollapsible);
 
-import RichEditor from './rich-editor.js';
-Alpine.data('rich_editor', RichEditor);
+import ErasCollapsible from './calendar/eras_collapsible.js';
+Alpine.data('eras_collapsible', ErasCollapsible);
 
-import MoonTooltip from './moon-tooltip.js';
-Alpine.data('moon_tooltip', MoonTooltip);
+import MoonsCollapsible from './calendar/moons_collapsible.js';
+Alpine.data('moons_collapsible', MoonsCollapsible);
 
-import WeatherTooltip from './weather-tooltip.js';
-Alpine.data("weather_tooltip", WeatherTooltip);
+import SeasonsCollapsible from './calendar/seasons_collapsible.js';
+Alpine.data('seasons_collapsible', SeasonsCollapsible);
+
+import WeatherCollapsible from './calendar/weather_collapsible.js';
+Alpine.data('weather_collapsible', WeatherCollapsible);
+
+import LocationsCollapsible from './calendar/locations_collapsible.js';
+Alpine.data('locations_collapsible', LocationsCollapsible);
+
+import CyclesCollapsible from './calendar/cycles_collapsible.js';
+Alpine.data('cycles_collapsible', CyclesCollapsible);
+
+import EventCategoriesCollapsible from './calendar/event_categories_collapsible.js';
+Alpine.data('event_categories_collapsible', EventCategoriesCollapsible);
+
+import EventsCollapsible from './calendar/events_collapsible.js';
+Alpine.data('events_collapsible', EventsCollapsible);
+
+import SettingsCollapsible from './calendar/settings_collapsible.js';
+Alpine.data('settings_collapsible', SettingsCollapsible);
+
+import UserManagementCollapsible from './calendar/user_management_collapsible.js';
+Alpine.data('user_management_collapsible', UserManagementCollapsible);
+
+import CalendarLinkingCollapsible from './calendar/calendar_linking_collapsible.js';
+Alpine.data('calendar_linking_collapsible', CalendarLinkingCollapsible);
 
 Alpine.start();
 

resources/js/calendar/calendar_linking_collapsible.js

@@ -0,0 +1,7 @@
+export default () => ({
+    reordering: false,
+
+    load: function(static_data) {
+        //
+    }
+})

resources/js/calendar/clock_collapsible.js

@@ -0,0 +1,7 @@
+export default () => ({
+    reordering: false,
+
+    load: function(static_data) {
+        //
+    }
+})

resources/js/calendar/cycles_collapsible.js

@@ -0,0 +1,7 @@
+export default () => ({
+    reordering: false,
+
+    load: function(static_data) {
+        //
+    }
+})

resources/js/calendar/eras_collapsible.js

@@ -0,0 +1,7 @@
+export default () => ({
+    reordering: false,
+
+    load: function(static_data) {
+        //
+    }
+})

resources/js/calendar/event_categories_collapsible.js

@@ -0,0 +1,7 @@
+export default () => ({
+    reordering: false,
+
+    load: function(static_data) {
+        //
+    }
+})

resources/js/calendar/events_collapsible.js

@@ -0,0 +1,7 @@
+export default () => ({
+    reordering: false,
+
+    load: function(static_data) {
+        //
+    }
+})

resources/js/calendar/leap_days_collapsible.js

@@ -0,0 +1,7 @@
+export default () => ({
+    reordering: false,
+
+    load: function(static_data) {
+        //
+    }
+})

resources/js/calendar/locations_collapsible.js

@@ -0,0 +1,7 @@
+export default () => ({
+    reordering: false,
+
+    load: function(static_data) {
+        //
+    }
+})

resources/js/calendar/moons_collapsible.js

@@ -0,0 +1,7 @@
+export default () => ({
+    reordering: false,
+
+    load: function(static_data) {
+        //
+    }
+})

resources/js/calendar/real_time_advancement_collapsible.js

@@ -0,0 +1,7 @@
+export default () => ({
+    reordering: false,
+
+    load: function(static_data) {
+        //
+    }
+})

resources/js/calendar/seasons_collapsible.js

@@ -0,0 +1,7 @@
+export default () => ({
+    reordering: false,
+
+    load: function(static_data) {
+        //
+    }
+})

resources/js/calendar/settings_collapsible.js

@@ -0,0 +1,7 @@
+export default () => ({
+    reordering: false,
+
+    load: function(static_data) {
+        //
+    }
+})

resources/js/calendar/user_management_collapsible.js

@@ -0,0 +1,7 @@
+export default () => ({
+    reordering: false,
+
+    load: function(static_data) {
+        //
+    }
+})

resources/js/calendar/weather_collapsible.js

@@ -0,0 +1,7 @@
+export default () => ({
+    reordering: false,
+
+    load: function(static_data) {
+        //
+    }
+})

resources/views/components/calendar-linking-collapsible.blade.php

@@ -0,0 +1,48 @@
+@props(['calendar' => null])
+
+<div class='row no-gutters'>
+	<p class="m-0">Calendar linking allows you to connect two calendar's dates, making one follow
+		the other!</p>
+	<p><small>This is a complex feature, we recommend you check out the article on <a
+				href='{{ helplink('calendar_linking') }}' target="_blank"><i
+					class="fa fa-question-circle"></i> Calendar Linking</a>.</small></p>
+</div>
+
+@if(Auth::user()->can('link', $calendar))
+
+	<div id='calendar_link_hide'>
+
+		@if($calendar->parent != null)
+			<div class='row no-gutters my-1 center-text hidden calendar_link_explanation'>
+				<p class='m-0'>This calendar is a child of
+					<a href='/calendars/{{ $calendar->parent->hash }}/edit'
+						 target="_blank">{{ $calendar->parent->name }}</a>.
+					Before linking any calendars to this one, you must unlink this
+					calendar from its parent.</p>
+			</div>
+		@else
+
+			<div class='input-group my-1'>
+				<select class='form-control' id='calendar_link_select'></select>
+				<div class="input-group-append">
+					<button type='button' class='btn btn-sm btn-secondary full'
+									id='refresh_calendar_list_select'>Refresh
+					</button>
+				</div>
+			</div>
+
+			<div class='sortable' id='calendar_link_list'></div>
+			<div class='sortable mt-1' id='calendar_new_link_list'></div>
+		@endif
+	</div>
+
+@else
+
+	<div class='row no-gutters my-1'>
+		<p>Link calendars together, and make this calendar's date drive the date of other
+			calendars!</p>
+		<p class='m-0'><a href="{{ route('subscription.pricing') }}" target="_blank">Subscribe
+				now</a> to unlock this feature!</p>
+	</div>
+
+@endif

resources/views/components/clock-collapsible.blade.php

@@ -0,0 +1,130 @@
+@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 static_input" id='enable_clock'
+							 data='clock' fc-index='enabled'>
+				<span class="custom-control-indicator"></span>
+			</label>
+		@endif
+	</div>
+	<div class='render_clock col-3 bold-text'>Render:</div>
+	<div class='render_clock col-3 text-right'>
+		<label class="custom-control custom-checkbox center-text">
+			<input type="checkbox" class="custom-control-input static_input" id='render_clock'
+						 refresh='clock' data='clock' fc-index='render'>
+			<span class="custom-control-indicator"></span>
+		</label>
+	</div>
+</div>
+
+<div class='clock_inputs'>
+
+	<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'
+									onclick='adjustInput(this, "#clock_hours", -1);'><i class="fa fa-minus"></i>
+					</button>
+				</div>
+				<input class='form-control form-control-sm static_input' min='1' id='clock_hours'
+							 data='clock' fc-index='hours' type='number'>
+				<div class='input-group-append'>
+					<button type='button' class='btn btn-sm btn-success'
+									onclick='adjustInput(this, "#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'
+									onclick='adjustInput(this, "#clock_minutes", -1);'><i
+							class="fa fa-minus"></i></button>
+				</div>
+				<input class='form-control form-control-sm static_input' min='1' id='clock_minutes'
+							 data='clock' fc-index='minutes' type='number'>
+				<div class='input-group-append'>
+					<button type='button' class='btn btn-sm btn-success'
+									onclick='adjustInput(this, "#clock_minutes", +1);'><i class="fa fa-plus"></i>
+					</button>
+				</div>
+			@endif
+		</div>
+
+	</div>
+
+	<div class='row mt-2 do_render_clock'>
+		<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 do_render_clock'>
+
+		<div class='col-6 input-group'>
+			<div class='input-group-prepend'>
+				<button type='button' class='btn btn-sm btn-danger'
+								onclick='adjustInput(this, "#clock_offset", -1);'><i class="fa fa-minus"></i>
+				</button>
+			</div>
+
+			<input class='form-control form-control-sm static_input' id='clock_offset' refresh='clock'
+						 data='clock' fc-index='offset' type='number'>
+
+			<div class='input-group-append'>
+				<button type='button' class='btn btn-sm btn-success'
+								onclick='adjustInput(this, "#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'
+								onclick='adjustInput(this, "#clock_crowding", -1);'><i class="fa fa-minus"></i>
+				</button>
+			</div>
+
+			<input class='form-control form-control-sm static_input' min='0' id='clock_crowding'
+						 refresh='clock' data='clock' fc-index='crowding' type='number'>
+
+			<div class='input-group-append'>
+				<button type='button' class='btn btn-sm btn-success'
+								onclick='adjustInput(this, "#clock_crowding", +1);'><i class="fa fa-plus"></i>
+				</button>
+			</div>
+		</div>
+
+	</div>
+
+
+</div>
+
+@if(request()->is('calendars/*/edit') && $calendar->isLinked())
+	<p class="mb-0 mt-3"><a onclick="linked_popup();" href='#'>Why can't I edit the clock?</a></p>
+@endif