Implement schedule WYSIWYG and UTC dates
This commit is contained in:
@@ -0,0 +1,111 @@
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h2>{{#if isEdit}}Edit schedule group{{else}}Add schedule group{{/if}}</h2>
|
||||
<p>Define a group of events with their start and end times.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-outline card-primary admin-form-card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Schedule group details</h3>
|
||||
</div>
|
||||
<form id="schedule-group-form" method="post" action="{{#if isEdit}}/data-sources/schedules/{{scheduleGroup.id}}{{else}}/data-sources/schedules{{/if}}" data-async-save data-async-save-close-url="/data-sources/schedules" data-async-save-new-url="/data-sources/schedules/new">
|
||||
<div class="card-body d-grid gap-4">
|
||||
<div class="row g-3">
|
||||
<div class="col-12 col-lg-4">
|
||||
<label for="schedule-group-name" class="form-label">Name</label>
|
||||
<input id="schedule-group-name" name="name" class="form-control" value="{{scheduleGroup.name}}" required />
|
||||
</div>
|
||||
<div class="col-12 col-lg-8">
|
||||
<label for="schedule-group-short-description" class="form-label">Short description</label>
|
||||
<input id="schedule-group-short-description" name="short_description" class="form-control" value="{{scheduleGroup.shortDescription}}" placeholder="Morning events" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="d-flex align-items-center justify-content-between gap-3 mb-2">
|
||||
<h4 class="schedule-section-heading mb-0">Entries</h4>
|
||||
<button type="button" class="btn btn-outline-secondary btn-sm" data-add-schedule-entry>Add entry</button>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered align-middle schedule-entries-table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 18rem;">Title</th>
|
||||
<th>Description</th>
|
||||
<th style="width: 12rem;">Start</th>
|
||||
<th style="width: 12rem;">End</th>
|
||||
<th style="width: 6rem;">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody data-schedule-entries-body>
|
||||
{{#each scheduleEntries}}
|
||||
<tr data-schedule-entry-row>
|
||||
<td>
|
||||
<input type="hidden" name="entry_id[]" value="{{id}}" />
|
||||
<input type="text" name="entry_title[]" class="form-control" value="{{title}}" required />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" name="entry_short_description[]" class="form-control" value="{{short_description}}" placeholder="Optional description" />
|
||||
</td>
|
||||
<td>
|
||||
<input type="datetime-local" name="entry_start_datetime[]" class="form-control" value="{{startValue}}" required />
|
||||
</td>
|
||||
<td>
|
||||
<input type="datetime-local" name="entry_end_datetime[]" class="form-control" value="{{endValue}}" />
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-outline-danger btn-sm" data-remove-schedule-entry>Remove</button>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p class="form-text mb-0">Add one or more rows. A schedule region can render upcoming or current entries from this group.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer d-flex justify-content-end">
|
||||
<div class="btn-group" role="group" aria-label="Schedule group actions">
|
||||
{{{saveActionButtons formId="schedule-group-form" saveLabel="Save" saveAndCloseLabel="Save and Close" saveAndNewLabel="Save and New" saveAndCloseValue="close" saveAndNewValue="new"}}}
|
||||
<a class="btn btn-warning" href="/data-sources/schedules" data-confirm-unsaved="You have unsaved changes. Leave this page?">Cancel</a>
|
||||
{{#if isEdit}}
|
||||
{{#if inUse}}
|
||||
<button type="submit" class="btn btn-outline-danger" form="delete-schedule-group-form" disabled>Delete</button>
|
||||
{{else}}
|
||||
<button type="submit" class="btn btn-danger" form="delete-schedule-group-form">Delete</button>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<button type="submit" class="btn btn-outline-danger" disabled>Delete</button>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<template id="schedule-entry-row-template">
|
||||
<tr data-schedule-entry-row>
|
||||
<td>
|
||||
<input type="hidden" name="entry_id[]" value="" />
|
||||
<input type="text" name="entry_title[]" class="form-control" value="" required />
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" name="entry_short_description[]" class="form-control" value="" placeholder="Optional description" />
|
||||
</td>
|
||||
<td>
|
||||
<input type="datetime-local" name="entry_start_datetime[]" class="form-control" value="" required />
|
||||
</td>
|
||||
<td>
|
||||
<input type="datetime-local" name="entry_end_datetime[]" class="form-control" value="" />
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-outline-danger btn-sm" data-remove-schedule-entry>Remove</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
{{#if isEdit}}
|
||||
<form id="delete-schedule-group-form" method="post" action="/data-sources/schedules/{{scheduleGroup.id}}/delete" data-confirm-message="Delete this schedule group?"></form>
|
||||
{{/if}}
|
||||
|
||||
<script type="module" src="/assets/js/data-sources/schedule-group-form.js?v={{assetVersion}}"></script>
|
||||
@@ -0,0 +1,75 @@
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h2>Schedules</h2>
|
||||
<p>Store grouped events with start and end times so a schedule region can show what is coming up next.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-outline card-primary" data-table-search-container data-table-pagination-card>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Saved groups</h3>
|
||||
<div class="card-tools d-flex flex-nowrap align-items-center gap-2">
|
||||
<div class="input-group input-group-sm flex-shrink-1" style="width: min(14rem, 100%);">
|
||||
<span class="input-group-text" aria-hidden="true"><i class="bi bi-search"></i></span>
|
||||
<input type="search" class="form-control" placeholder="Search schedules" aria-label="Search schedules" data-table-search />
|
||||
</div>
|
||||
{{#if (hasPermission currentUser 'schedules.create')}}
|
||||
<a class="btn btn-primary btn-sm" href="/data-sources/schedules/new">Add schedule group</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body table-responsive p-0">
|
||||
<table class="table table-striped w-100 mb-0" data-table-searchable>
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-table-sort-key="name">Name</th>
|
||||
<th data-table-sort-key="description">Description</th>
|
||||
<th data-table-sort-key="entries">Entries</th>
|
||||
<th data-table-sort-key="next_start">Next start</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#if scheduleGroups.length}}
|
||||
{{#each scheduleGroups}}
|
||||
<tr data-table-search-row>
|
||||
<td data-label="Name">{{name}}</td>
|
||||
<td data-label="Description" class="text-break">{{short_description}}</td>
|
||||
<td data-label="Entries">{{entry_count}}</td>
|
||||
<td data-label="Next start">
|
||||
{{#if nextStartValue}}
|
||||
<time data-local-datetime datetime="{{nextStartValue}}">{{nextStartLabel}}</time>
|
||||
{{else}}
|
||||
{{nextStartLabel}}
|
||||
{{/if}}
|
||||
</td>
|
||||
<td data-label="Actions">
|
||||
{{#if (anyPermission ../currentUser 'schedules.update' 'schedules.delete')}}
|
||||
<div class="actions">
|
||||
{{#if (hasPermission ../currentUser 'schedules.update')}}
|
||||
<a class="btn btn-sm btn-primary" href="/data-sources/schedules/{{id}}/edit">Edit</a>
|
||||
{{/if}}
|
||||
{{#if (hasPermission ../currentUser 'schedules.delete')}}
|
||||
<form class="inline-form" method="post" action="/data-sources/schedules/{{id}}/delete" data-confirm-message="Delete this schedule group?">
|
||||
{{#if inUse}}
|
||||
<button class="btn btn-sm btn-outline-danger" type="submit" disabled>Delete</button>
|
||||
{{else}}
|
||||
<button class="btn btn-sm btn-danger" type="submit">Delete</button>
|
||||
{{/if}}
|
||||
</form>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{else}}
|
||||
<span class="empty">-</span>
|
||||
{{/if}}
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
{{else}}
|
||||
<tr data-table-search-empty-default><td colspan="5" class="empty">No schedule groups yet.</td></tr>
|
||||
{{/if}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{> table-pagination pagination=pagination basePath="/data-sources/schedules" alwaysShow=true}}
|
||||
</div>
|
||||
Reference in New Issue
Block a user