120 lines
5.6 KiB
Handlebars
120 lines
5.6 KiB
Handlebars
<div class="page-header">
|
|
<div>
|
|
<h2>Edit playlist</h2>
|
|
<p>Adjust the playlist details, slide order, and scheduling.</p>
|
|
</div>
|
|
<a class="button-link" href="/admin/playlists">Back to playlists</a>
|
|
</div>
|
|
|
|
<form id="playlist-edit-form" method="post" action="/admin/playlists/{{playlist.id}}" data-async-save data-async-save-reload>
|
|
<div class="card playlist-name-card">
|
|
<div class="row playlist-edit-header">
|
|
<label class="playlist-name-field">Name
|
|
<input name="name" value="{{playlist.name}}" required />
|
|
</label>
|
|
<div class="row playlist-edit-actions">
|
|
<div class="playlist-fade-field switch-field">
|
|
<span class="switch-label">Fade:</span>
|
|
<label class="switch-control">
|
|
<input type="checkbox" name="fade_between_slides" value="1" {{#if playlistFadeBetweenSlides}}checked{{/if}} />
|
|
<span class="switch-ui" aria-hidden="true"></span>
|
|
</label>
|
|
</div>
|
|
<button type="submit" form="playlist-edit-form">Save changes</button>
|
|
<button type="submit" class="danger" form="delete-playlist-form">Delete playlist</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>Playlist items</h3>
|
|
<table class="table-cards">
|
|
<thead><tr><th>Order</th><th>Slide</th><th>Duration</th><th>Schedule</th><th>Actions</th></tr></thead>
|
|
<tbody id="playlist-items-body">
|
|
{{#if playlistSlides.length}}
|
|
{{#each playlistSlides}}
|
|
<tr data-playlist-slide-row data-row-key="existing-{{id}}" data-slide-id="{{slide_id}}" data-canvas-signature="{{canvasSignature}}">
|
|
<td class="playlist-order-cell" data-label="Order">{{displayOrder}}</td>
|
|
<td data-label="Slide">
|
|
{{title}}
|
|
<input type="hidden" name="slide_id[]" value="{{slide_id}}" />
|
|
</td>
|
|
<td data-label="Duration">
|
|
<input name="duration_seconds[]" type="number" min="1" value="{{duration_seconds}}" required />
|
|
</td>
|
|
<td data-label="Schedule">
|
|
<div class="playlist-schedule-summary">{{scheduleSummary}}</div>
|
|
<input type="hidden" name="schedule_mode[]" value="{{schedule_mode}}" />
|
|
<input type="hidden" name="schedule_start_datetime[]" value="{{schedule_start_datetime}}" />
|
|
<input type="hidden" name="schedule_end_datetime[]" value="{{schedule_end_datetime}}" />
|
|
<input type="hidden" name="schedule_start_time[]" value="{{schedule_start_time}}" />
|
|
<input type="hidden" name="schedule_end_time[]" value="{{schedule_end_time}}" />
|
|
<input type="hidden" name="schedule_days_json[]" value="{{schedule_days_json}}" />
|
|
</td>
|
|
<td data-label="Actions">
|
|
<div class="actions playlist-item-actions">
|
|
<button type="button" class="secondary" data-playlist-move="up" {{#if isFirst}}disabled{{/if}}>Up</button>
|
|
<button type="button" class="secondary" data-playlist-move="down" {{#if isLast}}disabled{{/if}}>Down</button>
|
|
<button type="button" class="schedule-config-button" data-schedule-config="/admin/playlists/{{../playlist.id}}/slides/{{id}}/config" data-schedule-config-row="existing-{{id}}">Schedule</button>
|
|
<button type="button" class="danger" data-playlist-remove-row>Remove</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{{/each}}
|
|
{{else}}
|
|
<tr class="playlist-empty-row"><td colspan="5" class="empty">No slides assigned yet.</td></tr>
|
|
{{/if}}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="card" id="playlist-add-section">
|
|
<h3>Add slide to playlist</h3>
|
|
{{#if hasSlides}}
|
|
{{#if hasSelectableSlides}}
|
|
<form id="playlist-add-slide-form">
|
|
<div class="row">
|
|
<label style="flex: 2;">Slide
|
|
<select id="playlist-add-slide-select" required>
|
|
{{#each selectableSlides}}
|
|
<option value="{{id}}" data-canvas-signature="{{canvasSignature}}" {{#if isAssigned}}disabled{{/if}}>{{title}}</option>
|
|
{{/each}}
|
|
</select>
|
|
</label>
|
|
<label style="width: 160px;">Visible for (seconds)
|
|
<input id="playlist-add-duration" type="number" min="1" value="10" required />
|
|
</label>
|
|
</div>
|
|
<button type="button" id="playlist-add-slide-button">Add slide</button>
|
|
</form>
|
|
<div id="playlist-add-slide-empty" class="empty" style="display: none;">No slides are currently available for this playlist.</div>
|
|
{{else}}
|
|
<div class="empty">
|
|
{{#if playlistCanvasMismatch}}
|
|
This playlist contains slides with different canvas sizes. Remove the mismatched items before adding more.
|
|
{{else if playlistCanvasSignature}}
|
|
No slides match this playlist canvas size.
|
|
{{else}}
|
|
No slides are currently available for this playlist.
|
|
{{/if}}
|
|
</div>
|
|
{{/if}}
|
|
{{else}}
|
|
<div class="empty">Create slides first.</div>
|
|
{{/if}}
|
|
</div>
|
|
|
|
<form id="delete-playlist-form" method="post" action="/admin/playlists/{{playlist.id}}/delete" data-confirm-message="Delete this playlist?"></form>
|
|
|
|
<dialog id="slide-schedule-dialog" class="slide-schedule-dialog">
|
|
<div class="slide-schedule-dialog-head">
|
|
<div>
|
|
<strong>Slide schedule</strong>
|
|
<div class="muted">Configure availability for this playlist item.</div>
|
|
</div>
|
|
<button type="button" class="secondary" id="slide-schedule-close">Close</button>
|
|
</div>
|
|
<iframe id="slide-schedule-frame" title="Slide schedule configuration"></iframe>
|
|
</dialog>
|