341 lines
22 KiB
Twig
341 lines
22 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 %}
|
||
|
|
<div class="widget-action-menu pull-right">
|
||
|
|
{% if currentUser.featureEnabled("schedule.add") %}
|
||
|
|
<button class="btn btn-success XiboFormButton btns" title="{% trans "Add a new Scheduled event" %}"
|
||
|
|
href="{{ url_for("schedule.add.form") }}"><span class="fa fa-plus"></span> {% trans "Add Event" %}
|
||
|
|
</button>
|
||
|
|
{% endif %}
|
||
|
|
<button class="btn btn-primary" id="refreshGrid" title="{% trans "Refresh the Table" %}" href="#"><i class="fa fa-refresh" aria-hidden="true"></i></button>
|
||
|
|
</div>
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block pageContent %}
|
||
|
|
<div class="widget">
|
||
|
|
<div class="widget-title">{% trans "Schedule" %}</div>
|
||
|
|
<div class="widget-body">
|
||
|
|
<div class="XiboGrid" id="{{ random() }}" data-grid-name="scheduleGridView">
|
||
|
|
<div class="XiboFilter card mb-3 bg-light">
|
||
|
|
<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" style="min-width: 200px">
|
||
|
|
<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" style="min-width: 200px">
|
||
|
|
<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 class="XiboSchedule card">
|
||
|
|
<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" 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 = "{{ url_for("layout.preview", {id: ':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 %}
|