183 lines
13 KiB
Handlebars
183 lines
13 KiB
Handlebars
<div class="page-header">
|
|
<div>
|
|
<h2>{{#if isEdit}}Edit announcement{{#if announcement.short_label}} - {{announcement.short_label}}{{/if}}{{else}}Add announcement{{/if}}</h2>
|
|
<p>{{#if isEdit}}Update the message, screen groups, color, or expiry behavior.{{else}}Give the announcement a short description, then define the full message and target screen groups.{{/if}}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="announcement-form" method="post" action="{{formAction}}" {{{formAttrs}}}>
|
|
<div class="row g-4 mb-4">
|
|
<div class="col-12 col-xl-7">
|
|
<div class="card card-outline card-primary admin-form-card h-100 mb-0">
|
|
<div class="card-header bg-body-tertiary">
|
|
<h3 class="card-title">Content</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="announcement-short-label" class="form-label">Short Description</label>
|
|
<input id="announcement-short-label" name="short_label" class="form-control" value="{{announcement.short_label}}" maxlength="128" data-limit-text-length placeholder="{{#if isEdit}}Power warning{{else}}Announcement Short Name{{/if}}" />
|
|
<div class="form-text">A short name for admin lists and page titles.</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="announcement-message" class="form-label">Message</label>
|
|
<textarea id="announcement-message" name="message" class="form-control" rows="6" required placeholder="{{#if isEdit}}{{else}}Maintenance starts in 10 minutes.{{/if}}">{{announcement.message}}</textarea>
|
|
</div>
|
|
<div class="row g-3 mb-0">
|
|
<div class="col-12 col-lg-6">
|
|
<label id="announcement-type-label" class="form-label">Type</label>
|
|
<div class="announcement-type-picker" data-announcement-type-picker-shell>
|
|
<input id="announcement-type" name="announcement_type" type="hidden" value="{{announcement.announcement_type}}" data-announcement-type-value />
|
|
<button type="button" class="announcement-type-picker__toggle" data-announcement-type-picker-toggle aria-expanded="false" aria-controls="announcement-type-picker-menu" title="Select a type">
|
|
<span class="announcement-type-picker__toggle-icon" data-announcement-type-picker-icon aria-hidden="true"></span>
|
|
<span class="announcement-type-picker__toggle-content">
|
|
<span class="announcement-type-picker__toggle-label" data-announcement-type-picker-label>Select a type</span>
|
|
<span class="announcement-type-picker__toggle-hint">Click to choose</span>
|
|
</span>
|
|
<i class="bi bi-chevron-down announcement-type-picker__caret" aria-hidden="true"></i>
|
|
</button>
|
|
<div id="announcement-type-picker-menu" class="announcement-type-picker__menu" data-announcement-type-picker hidden>
|
|
<div class="announcement-type-picker__grid" role="radiogroup" aria-labelledby="announcement-type-label">
|
|
{{#each announcementTypes}}
|
|
<button type="button" class="announcement-type-picker__option {{#if (eq ../announcement.announcement_type value)}}is-selected{{/if}}" data-announcement-type-option data-type-key="{{value}}" data-type-label="{{label}}" data-type-icon="{{icon}}" aria-pressed="{{#if (eq ../announcement.announcement_type value)}}true{{else}}false{{/if}}" title="{{label}}">
|
|
<span class="announcement-type-picker__option-icon" aria-hidden="true">
|
|
<i class="bi bi-{{icon}}"></i>
|
|
</span>
|
|
<span class="announcement-type-picker__label">{{label}}</span>
|
|
</button>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-lg-6">
|
|
<div class="form-label">Icon</div>
|
|
<div class="announcement-icon-picker" data-icon-picker data-announcement-icon-picker-shell>
|
|
<select id="announcement-icon" name="icon_key" class="d-none" tabindex="-1" aria-hidden="true">
|
|
{{#each announcementIconCatalog}}
|
|
<option value="{{value}}" {{#if (eq ../announcement.icon_key value)}}selected{{/if}}>{{label}}</option>
|
|
{{/each}}
|
|
</select>
|
|
<button type="button" class="announcement-icon-picker__toggle" data-icon-picker-toggle data-announcement-icon-picker-toggle aria-expanded="false" aria-controls="announcement-icon-picker-menu" title="Select an icon">
|
|
<span class="announcement-icon-picker__toggle-icon" data-icon-picker-preview data-announcement-icon-picker-icon aria-hidden="true"></span>
|
|
<span class="announcement-icon-picker__toggle-content">
|
|
<span class="announcement-icon-picker__toggle-label" data-icon-picker-label data-announcement-icon-picker-label>Select an icon</span>
|
|
<span class="announcement-icon-picker__toggle-hint">Click to choose</span>
|
|
</span>
|
|
<i class="bi bi-chevron-down announcement-icon-picker__caret" aria-hidden="true"></i>
|
|
</button>
|
|
<div id="announcement-icon-picker-menu" class="announcement-icon-picker__menu" data-icon-picker-menu data-announcement-icon-picker hidden>
|
|
<div class="announcement-icon-picker__header">
|
|
<span>Choose an icon</span>
|
|
<button type="button" class="btn btn-sm btn-link text-decoration-none p-0" data-icon-picker-close data-announcement-icon-picker-close>Close</button>
|
|
</div>
|
|
<div class="input-group input-group-sm announcement-icon-picker__search">
|
|
<span class="input-group-text" aria-hidden="true"><i class="bi bi-search"></i></span>
|
|
<input type="search" class="form-control" placeholder="Search all Bootstrap icons" aria-label="Search all Bootstrap icons" data-icon-picker-search data-announcement-icon-search />
|
|
</div>
|
|
<div class="announcement-icon-picker__section-header">
|
|
<span data-announcement-icon-grid-title>Suggested icons</span>
|
|
<span class="announcement-icon-picker__section-count" data-announcement-icon-search-count></span>
|
|
</div>
|
|
<div class="announcement-icon-picker__grid" data-icon-picker-grid data-announcement-icon-grid>
|
|
{{#each announcementIcons}}
|
|
<button type="button" class="announcement-icon-picker__option" data-icon-picker-option data-announcement-icon-option data-icon-key="{{value}}" data-icon-label="{{label}}" data-icon-search-terms="{{value}} {{label}}" aria-pressed="false" title="{{label}}">
|
|
<i class="bi bi-{{value}}" aria-hidden="true"></i>
|
|
<span class="visually-hidden">{{label}}</span>
|
|
</button>
|
|
{{/each}}
|
|
</div>
|
|
<div class="announcement-icon-picker__search-empty" data-icon-picker-empty data-announcement-icon-search-empty hidden>No matching icons.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<label id="announcement-color-label" class="form-label">Color</label>
|
|
<div class="announcement-color-picker" data-announcement-color-picker-shell>
|
|
<input id="announcement-color" name="color_key" type="hidden" value="{{announcement.color_key}}" data-announcement-color-value />
|
|
<div class="announcement-color-picker__grid" role="radiogroup" aria-labelledby="announcement-color-label">
|
|
{{#each announcementColors}}
|
|
<button type="button" class="announcement-color-picker__option {{#if (eq ../announcement.color_key value)}}is-selected{{/if}}" data-announcement-color-option data-color-key="{{value}}" data-color-label="{{label}}" aria-pressed="{{#if (eq ../announcement.color_key value)}}true{{else}}false{{/if}}" title="{{label}}">
|
|
<span class="announcement-color-picker__swatch {{#if (eq value 'light')}}text-bg-light text-dark{{else}}text-bg-{{value}}{{/if}}" aria-hidden="true">
|
|
<i class="bi bi-check-lg announcement-color-picker__check" aria-hidden="true"></i>
|
|
</span>
|
|
<span class="announcement-color-picker__label">{{label}}</span>
|
|
</button>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-xl-5">
|
|
<div class="card card-outline card-primary admin-form-card mb-3">
|
|
<div class="card-footer d-flex flex-wrap align-items-center">
|
|
{{#if isEdit}}
|
|
<button type="submit" class="btn {{actionClassName}}" form="{{actionFormId}}" {{#if actionDisabled}}disabled title="{{actionDisabledTitle}}"{{/if}}><i class="bi {{actionIcon}} me-1" aria-hidden="true"></i>{{actionLabel}}</button>
|
|
{{/if}}
|
|
<div class="ms-auto d-flex flex-wrap align-items-center gap-2">
|
|
{{{saveActionButtons formId="announcement-form" saveUrl=formAction cancelUrl=cancelUrl deleteUrl=deleteUrl deleteConfirmMessage=deleteConfirmMessage deleteDisabled=deleteDisabled deleteTitle=deleteTitle showDelete=showDeleteAction showSaveAndClose=showSaveSecondaryActions showSaveAndNew=showSaveSecondaryActions}}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card card-outline card-secondary admin-form-card mb-4">
|
|
<div class="card-header bg-body-tertiary">
|
|
<h3 class="card-title">Screen Groups</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3 mb-0">
|
|
<div class="col-12 col-md-4 col-xl-12">
|
|
<label for="announcement-duration-mode" class="form-label">Display mode</label>
|
|
<select id="announcement-duration-mode" name="duration_mode" class="form-select">
|
|
<option value="duration" {{#if (eq announcement.durationMode 'duration')}}selected{{/if}}>For a duration</option>
|
|
<option value="until_disabled" {{#if (eq announcement.durationMode 'until_disabled')}}selected{{/if}}>Until disabled</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-12" data-announcement-duration-value-fields {{#unless (eq announcement.durationMode 'duration')}}hidden{{/unless}}>
|
|
<div class="row g-3">
|
|
<div class="col-12 col-md-4 col-xl-6">
|
|
<label for="announcement-duration-value" class="form-label">Duration value</label>
|
|
<input id="announcement-duration-value" name="duration_value" type="number" min="1" class="form-control" value="{{announcement.durationValue}}" />
|
|
</div>
|
|
<div class="col-12 col-md-4 col-xl-6">
|
|
<label for="announcement-duration-unit" class="form-label">Unit</label>
|
|
<select id="announcement-duration-unit" name="duration_unit" class="form-select">
|
|
<option value="seconds" {{#if (eq announcement.durationUnit 'seconds')}}selected{{/if}}>Seconds</option>
|
|
<option value="minutes" {{#if (eq announcement.durationUnit 'minutes')}}selected{{/if}}>Minutes</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-4 col-xl-12">
|
|
<label class="form-label" id="announcement-screens-label">Target screen groups</label>
|
|
<div class="announcement-screen-actions">
|
|
<button type="button" class="btn btn-sm btn-outline-primary announcement-screen-action" data-announcement-screen-select-all>Select all</button>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary announcement-screen-action" data-announcement-screen-select-none>Select none</button>
|
|
</div>
|
|
<div class="announcement-screen-picker" role="group" aria-labelledby="announcement-screens-label">
|
|
{{#each announcementScreens}}
|
|
<div class="announcement-screen-option">
|
|
<input class="btn-check" type="checkbox" id="announcement-screen-{{id}}" name="screen_ids[]" value="{{id}}" autocomplete="off" {{#if isSelected}}checked{{/if}} />
|
|
<label class="announcement-screen-chip" for="announcement-screen-{{id}}" title="{{name}}">
|
|
<span class="announcement-screen-chip__text">{{name}}</span>
|
|
<span class="announcement-screen-chip__check" aria-hidden="true">
|
|
<i class="bi bi-check-lg announcement-screen-chip__check-icon"></i>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/assets/js/icon-picker.js?v={{appVersion}}"></script>
|
|
<script type="module" src="/assets/js/announcements/announcement-form.js?v={{appVersion}}"></script>
|
|
</form>
|
|
|
|
{{#if isEdit}}
|
|
<form id="announcement-action-form" method="post" action="{{announcement.actionPath}}" class="d-none" data-confirm-message="{{announcement.actionConfirmMessage}}" data-async-command></form>
|
|
{{/if}} |