29b56bef4f
- Updated various views to replace 'dashboard-card' with 'content-card' for consistency in styling. - Modified filter and table card classes across multiple pages including applications, campaigns, commands, datasets, dayparts, displays, display groups, display profiles, fonts, layouts, libraries, menu boards, modules, player software, playlists, resolutions, schedules, settings, sync groups, tags, tasks, templates, transitions, users, and user groups.
353 lines
23 KiB
Twig
353 lines
23 KiB
Twig
{#
|
|
/**
|
|
* Copyright (C) 2023 Xibo Signage Ltd
|
|
*
|
|
* Xibo - Digital Signage - http://www.xibo.org.uk
|
|
*
|
|
* This file is part of Xibo.
|
|
*
|
|
* Xibo is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as published by
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
* any later version.
|
|
*
|
|
* Xibo is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* along with Xibo. If not, see <http://www.gnu.org/licenses/>.
|
|
*/
|
|
#}
|
|
{% extends "authed.twig" %}
|
|
{% import "inline.twig" as inline %}
|
|
{% import "forms.twig" as forms %}
|
|
|
|
{% block title %}{{ "Schedule"|trans }} | {% endblock %}
|
|
|
|
{% block actionMenu %}{% endblock %}
|
|
|
|
{% block pageContent %}
|
|
<div class="ots-displays-page">
|
|
<div class="page-header ots-page-header">
|
|
<h1>{% trans "Schedule" %}</h1>
|
|
<p class="text-muted">{% trans "Schedule content to your displays." %}</p>
|
|
</div>
|
|
|
|
<div class="widget content-card ots-displays-card">
|
|
<div class="widget-body ots-displays-body">
|
|
<div class="XiboGrid" id="{{ random() }}" data-grid-name="scheduleGridView">
|
|
<div class="XiboFilter card mb-3 bg-light content-card ots-filter-card">
|
|
<div class="ots-filter-header">
|
|
<h3 class="ots-filter-title">{% trans "Filter Schedule" %}</h3>
|
|
<button type="button" class="ots-filter-toggle" id="ots-filter-collapse-btn" title="{% trans 'Toggle filter panel' %}">
|
|
<i class="fa fa-chevron-down"></i>
|
|
</button>
|
|
</div>
|
|
<div class="ots-filter-content collapsed" id="ots-filter-content">
|
|
<div class="FilterDiv card-body" id="schedule-filter">
|
|
<ul class="nav nav-tabs" role="tablist">
|
|
<li class="nav-item"><a class="nav-link active" href="#general-filter" role="tab" data-toggle="tab" aria-selected="true"><span>{% trans "General" %}</span></a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#advanced-filter" role="tab" data-toggle="tab" aria-selected="false"><span>{% trans "Advanced" %}</span></a></li>
|
|
</ul>
|
|
<form class="form-inline">
|
|
<div class="tab-content">
|
|
<div class="tab-pane active" id="general-filter" role="tabpanel">
|
|
{% set title %}{% trans "Range" %}{% endset %}
|
|
{% set range %}{% trans "Custom" %}{% endset %}
|
|
{% set day %}{% trans "Day" %}{% endset %}
|
|
{% set week %}{% trans "Week" %}{% endset %}
|
|
{% set month %}{% trans "Month" %}{% endset %}
|
|
{% set year %}{% trans "Year" %}{% endset %}
|
|
{% set options = [
|
|
{ name: "custom", range: range },
|
|
{ name: "day", range: day },
|
|
{ name: "week", range: week },
|
|
{ name: "month", range: month },
|
|
{ name: "year", range: year },
|
|
] %}
|
|
{{ inline.dropdown("range", "single", title, "month", options, "name", "range", "", "date-range-input") }}
|
|
|
|
{% set title %}{% trans 'From Date' %}{% endset %}
|
|
{{ inline.dateTime("fromDt", title, "", "", "custom-date-range d-none", "", "") }}
|
|
|
|
{% set title %}{% trans 'To Date' %}{% endset %}
|
|
{{ inline.dateTime("toDt", title, "", "", "custom-date-range d-none", "", "") }}
|
|
|
|
{% set title %}{% trans "Date Controls" %}{% endset %}
|
|
<div class="form-group mr-1 mb-1 controls-date-range">
|
|
<div class="control-label mr-1" title=""
|
|
accesskey="">{{ title }}</div>
|
|
<div class="controls-date-inputs">
|
|
<div class="inputgroup date" id="dateInput">
|
|
<span class="btn btn-outline-primary date-open-button" role="button">
|
|
<i class="fa fa-calendar"></i>
|
|
</span>
|
|
<input type="text" class="form-control" id="dateInputLink" data-input style="display:none;"/>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-secondary" data-calendar-nav="prev"><span class="fa fa-caret-left"></span> {% trans "Prev" %}</button>
|
|
<button type="button" class="btn btn-outline-secondary" data-calendar-nav="today">{% trans "Today" %}</button>
|
|
<button type="button" class="btn btn-secondary" data-calendar-nav="next">{% trans "Next" %} <span class="fa fa-caret-right"></span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% set title %}{% trans "Name" %}{% endset %}
|
|
{{ inline.inputNameGrid('name', title) }}
|
|
|
|
{% set title %}{% trans 'Event Type' %}{% endset %}
|
|
{{ inline.dropdown("eventTypeId", "single", title, "", [{eventTypeId: null, eventTypeName: "All"}]|merge(eventTypes), "eventTypeId", "eventTypeName") }}
|
|
|
|
{% set title %}{% trans "Layout / Campaign" %}{% endset %}
|
|
{% set helpText %}{% trans "Please select a Layout or Campaign for this Event to show" %}{% endset %}
|
|
|
|
<div class="form-group mr-1 mb-1">
|
|
<label class="control-label mr-1" for="campaignId" title=""
|
|
accesskey="">{{ title }}</label>
|
|
<select name="campaignId" id="campaignIdFilter" class="form-control"
|
|
data-search-url="{{ url_for("campaign.search") }}"
|
|
data-trans-campaigns="{% trans "Campaigns" %}"
|
|
data-trans-layouts="{% trans "Layouts" %}"
|
|
data-allow-clear="true"
|
|
data-width="100%"
|
|
title="{% trans "Layout / Campaign" %}"
|
|
data-placeholder="{% trans "Layout / Campaign" %}"
|
|
data-dropdownAutoWidth
|
|
>
|
|
</select>
|
|
</div>
|
|
|
|
{% set title %}{% trans "Displays" %}{% endset %}
|
|
<div class="form-group mr-1 mb-1 pagedSelect">
|
|
<label class="control-label mr-1" for="DisplayList" title=""
|
|
accesskey="">{{ title }}</label>
|
|
<select id="DisplayList" class="form-control" name="displaySpecificGroupIds[]"
|
|
data-width="100%"
|
|
data-placeholder="{% trans "Displays" %}"
|
|
data-search-url="{{ url_for("display.search") }}"
|
|
data-search-term="display"
|
|
data-id-property="displayGroupId"
|
|
data-text-property="display"
|
|
data-additional-property="displayGroupId"
|
|
data-allow-clear="true"
|
|
data-initial-key="displayGroupIds[]"
|
|
multiple>
|
|
</select>
|
|
</div>
|
|
|
|
{% set title %}{% trans "Display Groups" %}{% endset %}
|
|
<div class="form-group mr-2 mb-1 pagedSelect">
|
|
<label class="control-label mr-1" for="DisplayGroupList" title=""
|
|
accesskey="">{{ title }}</label>
|
|
<select id="DisplayGroupList" class="form-control" name="displayGroupIds[]"
|
|
data-width="100%"
|
|
data-placeholder="{% trans "Display Groups" %}"
|
|
data-search-url="{{ url_for("displayGroup.search") }}"
|
|
data-search-term="displayGroup"
|
|
data-id-property="displayGroupId"
|
|
data-text-property="displayGroup"
|
|
data-allow-clear="true"
|
|
data-initial-key="displayGroupIds[]"
|
|
multiple>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane" id="advanced-filter" role="tabpanel">
|
|
{% set label %}{% trans "Direct Schedule?" %}{% endset %}
|
|
{% set title %}{% trans "Show only events scheduled directly on selected Displays/Groups" %}{% endset %}
|
|
<div class="form-group ml-2 mr-3 mb-1">
|
|
<div class="form-check">
|
|
<input title="{{ title }}" class="form-check-input" type="checkbox" id="directSchedule" name="directSchedule">
|
|
<label class="form-check-label" title="{{ title }}" for="directSchedule" accesskey="">{{ label }}</label>
|
|
</div>
|
|
</div>
|
|
|
|
{% set title %}{% trans "Only show schedules which appear on all filtered displays/groups?" %}{% endset %}
|
|
{% set label %}{% trans "Shared Schedule?" %}{% endset %}
|
|
<div class="form-group ml-2 mr-3 mb-1">
|
|
<div class="form-check">
|
|
<input title="{{ title }}" class="form-check-input" type="checkbox" id="sharedSchedule" name="sharedSchedule">
|
|
<label class="form-check-label" title="{{ title }}" for="sharedSchedule" accesskey="">{{ label }}</label>
|
|
</div>
|
|
</div>
|
|
|
|
{% set title %}{% trans 'Geo Aware?' %}{% endset %}
|
|
{% set options = [
|
|
{ id: null, name: "Both"|trans },
|
|
{ id: 0, name: "No"|trans },
|
|
{ id: 1, name: "Yes"|trans }
|
|
] %}
|
|
{{ inline.dropdown("geoAware", "single", title, "both", options, "id", "name") }}
|
|
|
|
{% set title %}{% trans 'Recurring?' %}{% endset %}
|
|
{% set options = [
|
|
{ id: null, name: "Both" },
|
|
{ id: 0, name: "No"|trans },
|
|
{ id: 1, name: "Yes"|trans }
|
|
] %}
|
|
{{ inline.dropdown("recurring", "single", title, "both", options, "id", "name") }}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="XiboSchedule card content-card ots-table-card">
|
|
<div class="ots-table-toolbar">
|
|
{% if currentUser.featureEnabled("schedule.add") %}
|
|
<button class="btn btn-sm btn-success ots-toolbar-btn XiboFormButton" title="{% trans "Add a new Scheduled event" %}" href="{{ url_for("schedule.add.form") }}"><i class="fa fa-plus" aria-hidden="true"></i></button>
|
|
{% endif %}
|
|
<button class="btn btn-sm btn-primary ots-toolbar-btn" id="refreshGrid" title="{% trans "Refresh the Table" %}" href="#"><i class="fa fa-refresh" aria-hidden="true"></i></button>
|
|
</div>
|
|
<div class="card-header">
|
|
<ul class="nav nav-tabs card-header-tabs">
|
|
<li class="nav-item">
|
|
<a class="schedule-nav grid-nav nav-link active" id="grid-tab" href="#grid-view"
|
|
data-schedule-view="grid"
|
|
role="tab"
|
|
data-toggle="tab"><span>{% trans "Grid" %}</span></a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="schedule-nav calendar-nav nav-link" id="calendar-tab" href="#calendar-view"
|
|
data-schedule-view="calendar"
|
|
data-calendar-view="month"
|
|
role="tab"
|
|
data-toggle="tab"><span>{% trans "Calendar" %}</span></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="xibo-calendar-header-container col-xl-12 d-inline-flex justify-content-between">
|
|
<div class="xibo-calendar-header text-center d-inline-flex">
|
|
<h1 class="page-header"></h1>
|
|
</div>
|
|
|
|
<div class="calendar-loading">
|
|
<span id="calendar-progress-table" class="fa fa-spin fa-cog"></span>
|
|
<span id="calendar-progress" class="fa fa-spin fa-cog"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-content">
|
|
<div class="tab-pane active" id="grid-view">
|
|
<div class="XiboData pt-3">
|
|
<table id="schedule-grid" class="table table-striped w-100"
|
|
data-state-preference-name="scheduleGrid">
|
|
<thead>
|
|
<tr>
|
|
<th>{% trans 'ID' %}</th>
|
|
<th></th>
|
|
<th>{% trans 'Event Type' %}</th>
|
|
<th>{% trans 'Name' %}</th>
|
|
<th>{% trans 'Start' %}</th>
|
|
<th>{% trans 'End' %}</th>
|
|
<th>{% trans 'Event' %}</th>
|
|
<th>{% trans 'Campaign ID' %}</th>
|
|
<th>{% trans 'Display Groups' %}</th>
|
|
<th>{% trans 'SoV' %}</th>
|
|
<th>{% trans 'Max Plays per Hour' %}</th>
|
|
<th>{% trans 'Geo Aware?' %}</th>
|
|
<th>{% trans 'Recurring?' %}</th>
|
|
<th>{% trans 'Recurrence Description' %}</th>
|
|
<th>{% trans 'Recurrence Type' %}</th>
|
|
<th>{% trans 'Recurrence Interval' %}</th>
|
|
<th>{% trans 'Recurrence Repeats On' %}</th>
|
|
<th>{% trans 'Recurrence End' %}</th>
|
|
<th>{% trans 'Priority?' %}</th>
|
|
<th>{% trans 'Criteria?' %}</th>
|
|
<th>{% trans 'Created On' %}</th>
|
|
<th>{% trans 'Updated On' %}</th>
|
|
<th>{% trans 'Modified By' %}</th>
|
|
<th class="rowMenu"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="calendar-view">
|
|
<div class="row">
|
|
<div id="CalendarContainer"
|
|
data-agenda-link="{{ url_for("schedule.events", {id: ':id'}) }}"
|
|
data-calendar-type="{{ settings.CALENDAR_TYPE }}" class="col-sm-12"
|
|
data-default-lat="{{ defaultLat }}"
|
|
data-default-long="{{ defaultLong }}">
|
|
<div class="calendar-view" id="Calendar"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="cal-legend">
|
|
<ul>
|
|
<li class="event-always"><span
|
|
class="fa fa-retweet"></span> {% trans "Always showing" %}</li>
|
|
<li class="event-info"><span
|
|
class="fa fa-desktop"></span> {% trans "Single Display" %}</li>
|
|
<li class="event-success"><span
|
|
class="fa fa-desktop"></span> {% trans "Multi Display" %}</li>
|
|
<li class="event-important"><span
|
|
class="fa fa-bullseye"></span> {% trans "Priority" %}</li>
|
|
<li class="event-special"><span
|
|
class="fa fa-repeat"></span> {% trans "Recurring" %}</li>
|
|
<li class="event-inverse"><span
|
|
class="fa fa-lock"></span> {% trans "View Only" %}</li>
|
|
<li class="event-command"><span
|
|
class="fa fa-wrench"></span> {% trans "Command" %}</li>
|
|
<li class="event-interrupt"><span
|
|
class="fa fa-hand-paper"></span> {% trans "Interrupt" %}</li>
|
|
<li class="event-geo-location"><span
|
|
class="fa fa-map-marker"></span> {% trans "Geo Location" %}</li>
|
|
<li class="event-action"><span
|
|
class="fa fa-paper-plane "></span> {% trans "Interactive Action" %}
|
|
</li>
|
|
<li class="event-sync"><span
|
|
class="fa fa-refresh"></span> {% trans "Synchronised" %}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block javaScript %}
|
|
{# Initialise JS variables #}
|
|
<script type="text/javascript" nonce="{{ cspNonce }}">
|
|
{# JS variables #}
|
|
var scheduleRecurrenceDeleteUrl = "{{ url_for("schedule.recurrence.delete.form", {id:':id'}) }}";
|
|
var layoutPreviewUrl = "{{ theme.rootUri() }}preview/layout/preview/:id";
|
|
var scheduleSearchUrl = "{{ url_for("schedule.search") }}";
|
|
var userAgendaViewEnabled = "{{ currentUser.featureEnabled('schedule.agenda') }}";
|
|
|
|
{# Custom translations #}
|
|
var schedulePageTrans = {
|
|
always: "{% trans "Always" %}",
|
|
adjustTimesofTimer: "{% trans "Adjust the times of this timer. To add or remove a day, use the Display Profile." %}",
|
|
daysOfTheWeek: {
|
|
monday: "{% trans "Monday" %}",
|
|
tuesday: "{% trans "Tuesday" %}",
|
|
wednesday: "{% trans "Wednesday" %}",
|
|
thursday: "{% trans "Thursday" %}",
|
|
friday: "{% trans "Friday" %}",
|
|
saturday: "{% trans "Saturday" %}",
|
|
sunday: "{% trans "Sunday" %}",
|
|
},
|
|
};
|
|
</script>
|
|
|
|
{# Add page source code bundle ( JS ) #}
|
|
<script src="{{ theme.rootUri() }}dist/leaflet.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
|
|
<script src="{{ theme.rootUri() }}dist/pages/schedule-page.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
|
|
{% endblock %}
|