芝麻web文件管理V1.00

编辑当前文件:/home/mgatv524/public_html/mctv/views/schedule-page.twig

{#
/**
 * Copyright (C) 2020 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 %}

{% block title %}{{ "Schedule"|trans }} | {% endblock %}

{% block pageContent %}
    <div class="row">
        <div class="xibo-calendar-controls-container align-content-start col-sm-6 col-xl-5 pr-0 form-inline">
            <div class="xibo-calendar-controls">
                <div class="form-check">
                    <input class="form-check-input" title="Show All" type="checkbox" id="showAll" name="showAll" data-search-url="{{ url_for("displayGroup.search") }}"
                        {% if displayGroupsShowAll == -1 %}
                            checked
                        {% endif %}
                    >
                    <label class="form-check-label" for="showAll">{% trans "Show All" %}</label>
                </div>
            </div>
            <div class="xibo-calendar-controls dropdown ">
                <select id="DisplayList" class="form-control" name="displayGroupIds[]"
                        data-placeholder="{% trans "Displays" %}"
                        data-search-url="{{ url_for("displayGroup.search") }}"
                        data-trans-groups="{% trans "Groups" %}"
                        data-trans-display="{% trans "Display" %}"
                        data-allow-clear="true"
                        data-width="100%"
                        data-placeholder="{% trans "Select Displays" %}" multiple>
                    {% for option in displayGroups %}
                        {% set itemOptionId = attribute(option, "displayGroupId") %}
                        {% set itemOptionValue = attribute(option, "displayGroup") %}
                        <option value="{{ itemOptionId }}" selected >{{ itemOptionValue }}</option>
                    {% endfor %}
                </select>
            </div>

<div class="xibo-calendar-controls dropdown">
                {# Campaign / Layout list. We want to build two arrays for us to use. #}
                {% set title %}{% trans "Layout / Campaign" %}{% endset %}
                {% set helpText %}{% trans "Please select a Layout or Campaign for this Event to show" %}{% endset %}

<select name="campaignId" id="campaignId" class="d-none 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>
        </div>
        <div class="xibo-calendar-controls-container align-content-start justify-content-end col-sm-6 col-xl-7 pl-0 form-inline text-right">
            {% if currentUser.featureEnabled("schedule.add") %}
                <div class="xibo-calendar-controls">
                    <button class="btn btn-success XiboFormButton" href="{{ url_for("schedule.add.form") }}">
                        {% trans "Add Event" %}
                    </button>
                </div>
            {% endif %}
            <div class="btn-group xibo-calendar-controls">
                <button type="button" class="btn btn-primary" data-calendar-nav="prev"><span class="fa fa-backward"></span> {% trans "Prev" %}</button>
                <button type="button" class="btn btn-white" data-calendar-nav="today">{% trans "Today" %}</button>
                <button type="button" class="btn btn-primary" data-calendar-nav="next">{% trans "Next" %} <span class="fa fa-forward"></span></button>
            </div>
            <div class="xibo-calendar-controls">
                <div class="inputgroup date" id="dateInput">
                    <span class="btn btn-outline-dark date-open-button" role="button">
                        <i class="fa fa-calendar"></i>
                    </span>
                    <input type="text" class="form-control" id="dateInputLink" data-input />
                </div>
            </div>
            <div class="btn-group xibo-calendar-controls">
                <button type="button" class="btn btn-outline-info" data-calendar-view="year">{% trans "Year" %}</button>
                <button type="button" class="btn btn-outline-info active" data-calendar-view="month">{% trans "Month" %}</button>
                <button type="button" class="btn btn-outline-info" data-calendar-view="week">{% trans "Week" %}</button>
                <button type="button" class="btn btn-outline-info" data-calendar-view="day">{% trans "Day" %}</button>
                {% if currentUser.featureEnabled("schedule.agenda") %}
                    <button type="button" class="btn btn-outline-info" data-calendar-view="agenda">{% trans "Agenda" %}</button>
                {% endif %}
            </div>
        </div>
        <div class="text-center col-xl-12">
            <h1 class="page-header"></h1>
            <div class="calendar-loading">
                <span id="calendar-progress" class="fa fa-spin fa-cog"></span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 cal-event-agenda-filter" style="display:none;">
            
            <div class="cal-event-time-bar">
                <div class="btn slider-step-btn time-picker-step-btn" data-step="-1">
                    <span class="fa fa-step-backward"></span>
                </div>
                <input id="timePicker" data-slider-id='timePickerSlider' type="text" data-slider-min="0" data-slider-max="1439" data-slider-step="1" data-slider-value="0" data-slider-handle="square" />
                <div class="btn slider-step-btn time-picker-step-btn" data-step="1">
                    <span class="fa fa-step-forward"></span>
                </div>
            </div>

<form class="form-inline cal-event-location">
                <button id="toggleMap" type="button" class="btn btn-primary pull-right" title="{% trans "Map" %}"><i class="fa fa-map"></i></button>
                <button id="getLocation" type="button" class="btn btn-white pull-right" title="{% trans "Get browser location!" %}"><i class="fa fa-map-marker"></i></button>
                <button id="clearLocation" type="button" class="btn btn-white pull-right" title="{% trans "Clear coordinates!" %}"><i class="fa fa-times"></i></button>
                <div class="form-group pull-right">
                    <input type="email" class="form-control" id="geoLongitude" placeholder="Longitude">
                </div>
                <div class="form-group pull-right">
                    <input type="text" class="form-control" id="geoLatitude" placeholder="Latitude">
                </div>
            </form>

<div class="cal-event-location-map" data-default-lat="{{ defaultLat }}" data-default-long="{{ defaultLong }}">
                <div id="geoFilterAgendaMap" style="height: 400px; width: 100%" class="d-none"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div id="CalendarContainer" data-event-source="{{ url_for("schedule.calendar.data") }}" data-agenda-link="{{ url_for("schedule.events", {id: ':id'}) }}" data-calendar-type="{{ settings.CALENDAR_TYPE }}" class="col-sm-12">
            <div 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>
                </ul>
            </div>
        </div>
    </div>
{% endblock %}

{% block javaScriptTemplates %}
    {{ parent() }}
    
    {% verbatim %}
        <script type="text/x-handlebars-template" id="calendar-template-day">
            <div id="cal-day-box">
                <div class="row-fluid clearfix cal-row-head">
                    <div class="span1 col-1 cal-cell"><%= cal.locale.time %></div>
                    <div class="span11 col-11 cal-cell"><%= cal.locale.events %></div>
                </div>
                <% if(all_day.length) {%>
                <div class="row-fluid clearfix cal-day-hour">
                    <div class="span1 col-1"><b><%= cal.locale.all_day %></b></div>
                    <div class="span11 col-11">
                        <% _.each(all_day, function(event){ %>
                        <%
                        var eventTitle = (event.event.isAlways == 1) ? event.title : "[" + moment(event.scheduleEvent.fromDt, systemDateFormat).format(jsDateFormat) + " - " + moment(event.scheduleEvent.toDt, systemDateFormat).format(jsDateFormat) + "] " + event.title;
                        %>
                        <div class="day-highlight dh-<%= event['class'] %>">
                            <a href="<%= event.url ? event.url : 'javascript:void(0)' %>" data-event-id="<%= event.id %>"
                               data-event-start="<%= event.start %>" data-event-end="<%= event.end %>"
                               class="event-item">
                                <%= eventTitle %></a>
                        </div>
                        <% }); %>
                    </div>
                </div>
                <% }; %>
                <% if(before_time.length) {%>
                <div class="row-fluid clearfix cal-day-hour">
                    <div class="span1 col-3"><b><%= cal.locale.before_time %></b></div>
                    <div class="span5 col-5">
                        <% _.each(before_time, function(event){ %>
                        <div class="day-highlight dh-<%= event['class'] %>">
                            <span class="cal-hours pull-right"><%= event.end_hour %></span>
                            <a href="<%= event.url ? event.url : 'javascript:void(0)' %>" data-event-id="<%= event.id %>"
                               data-event-start="<%= event.start %>" data-event-end="<%= event.end %>"
                               class="event-item">
                                <%= event.title %></a>
                        </div>
                        <% }); %>
                    </div>
                </div>
                <% }; %>
                <div id="cal-day-panel" class="clearfix">
                    <div id="cal-day-panel-hour">
                        <% for(i = 0; i < hours; i++){ %>
                        <div class="cal-day-hour">
                            <% for(l = 0; l < cal._hour_min(i); l++){ %>
                            <div class="row-fluid cal-day-hour-part">
                                <div class="span1 col-1"><b><%= cal._hour(i, l) %></b></div>
                                <div class="span11 col-11"></div>
                            </div>
                            <% }; %>
                        </div>
                        <% }; %>
                    </div>

<% _.each(by_hour, function(event){ %>
                    <div class="pull-left day-event <% if (event.lines < 1) { %>day-event-small<% } %> day-highlight dh-<%= event['class'] %>" style="margin-top: <%= (event.top * 30) %>px; height: <%= (event.lines * 30) %>px"
                    <% if (event.lines < 2) { %>data-toggle="popover" data-html="true" data-content="<a href='<%= event.url ? event.url : "javascript:void(0)" %>'><%= event.title %></a>" title="<%= event.start_hour %> - <%= event.end_hour %>"<% } %>
                    >
                    <span class="cal-hours"><%= event.start_hour %> - <%= event.end_hour %></span>
                    <a href="<%= event.url ? event.url : 'javascript:void(0)' %>" data-event-id="<%= event.id %>"
                       data-event-start="<%= event.start %>" data-event-end="<%= event.end %>"
                       data-event-class="<%= event['class'] %>" class="event-item">
                        <%= event.title %></a>
                    </div>
                    <% }); %>
                </div>
            <% if(after_time.length) {%>
            <div class="row-fluid clearfix cal-day-hour">
                <div class="span1 col-3"><b><%= cal.locale.after_time %></b></div>
                <div class="span11 col-9">
                    <% _.each(after_time, function(event){ %>
                    <div class="day-highlight dh-<%= event['class'] %>">
                        <span class="cal-hours"><%= event.start_hour %></span>
                        <a href="<%= event.url ? event.url : 'javascript:void(0)' %>" data-event-id="<%= event.id %>"
                           data-event-start="<%= event.start %>" data-event-end="<%= event.end %>"
                           data-event-class="<%= event['class'] %>" class="event-item">
                            <%= event.title %></a>
                    </div>
                    <% }); %>
                </div>
            </div>
            <% }; %>
            </div>
        </script>

if (event.event.isAlways != 1) {
                    if (event.event.eventTypeId == 2) {
                    title = "[" + moment(event.scheduleEvent.fromDt, systemDateFormat).format(jsTimeFormat) + "] " + event.title;
                    } else if (event.sameDay) {
                    title = "[" + moment(event.scheduleEvent.fromDt, systemDateFormat).format(jsTimeFormat) + " - " + moment(event.scheduleEvent.toDt, systemDateFormat).format(jsTimeFormat) + "] " + event.title;
                    } else {
                    title = "[" + moment(event.scheduleEvent.fromDt, systemDateFormat).format(jsDateFormat) + " - " + moment(event.scheduleEvent.toDt, systemDateFormat).format(jsDateFormat) + "] " + event.title;
                    }
                    }

if (event.event.displayOrder > 0)
                    title = title + " (" + event.event.displayOrder + ")";

if (event.event.displayGroups.length <= 1) {
                    eventClass = "event-info";
                    }
                    else {
                    eventClass = "event-success";
                    }

if (event.event.isAlways == 1) {
                    eventIcon = "fa-retweet";
                    }

if (event.event.recurrenceType != null && event.event.recurrenceType != "") {
                    eventClass = "event-special";
                    eventIcon = "fa-repeat";
                    }

if (event.event.isPriority >= 1) {
                        eventClass = "event-important";
                        eventIcon = "fa-bullseye";
                        eventPriority = event.event.isPriority;
                    }

if (event.event.eventTypeId == 2) {
                        eventIcon = "fa-wrench";
                    }

if (event.event.eventTypeId == 4) {
                        eventIcon = "fa-hand-paper";
                    }

if (event.event.isGeoAware === 1) {
                        eventIcon = "fa-map-marker";
                    }

if (!event.editable) {
                    event.url = null;
                    eventIcon = "fa-lock";
                    eventClass = "event-inverse";
                    }
                    %>
                    <li>
                        <span class="pull-left event <%= event['class'] %>"></span> 
                        <a href="<%= event.url ? event.url : 'javascript:void(0)' %>" data-event-id="<%= event.id %>"
                           data-event-start="<%= event.start %>" data-event-end="<%= event.end %>"
                           data-event-class="<%= eventClass %>" class="event-item">
                            <span class="fa <%= eventIcon %>"><span class="event-priority"><%= eventPriority %></span></span> <%= title %></a>
                    </li>
                    <% }) %>
                </ul>
            </div>
        </script>

<% if (events.length > 0) { %>
                    <span class="cal-month-day-number-events label label-info" data-toggle="tooltip" title="{% endverbatim %}{% trans "Number of events" %}{% verbatim %}"><%= events.length %></span>
                <% } %>

<% if (events.length > 0) { %>
                <div class="events-list" data-cal-start="<%= start %>" data-cal-end="<%= end %>">
                    <% _.each(events, function(event) { %>
                    <%
                    var title = event.title;
                    var eventIcon = "fa-desktop";
                    var eventClass = "event-warning";
                    var eventPriority = "";

if (event.event.displayOrder > 0)
                    title = title + " (" + event.event.displayOrder + ")";

if (event.event.isAlways == 1) {
                    eventIcon = "fa-retweet";
                    }

if (event.event.recurrenceType != null && event.event.recurrenceType != "") {
                    eventClass = "event-special";
                    eventIcon = "fa-repeat";
                    }

if (event.event.eventTypeId == 2) {
                        eventIcon = "fa-wrench";
                    }

if (event.event.eventTypeId == 4) {
                        eventIcon = "fa-hand-paper";
                    }

if (event.event.isGeoAware === 1) {
                        eventIcon = "fa-map-marker";
                    }

if (!event.editable) {
                    event.url = null;
                    eventIcon = "fa-lock";
                    eventClass = "event-inverse";
                    }
                    %>
                    <a href="<%= event.url ? event.url : 'javascript:void(0)' %>" data-event-id="<%= event.id %>"
                       data-event-start="<%= event.start %>" data-event-end="<%= event.end %>"
                       data-event-class="<%= eventClass %>"
                       class="pull-left event <%= eventClass %>" data-toggle="tooltip"
                       title="<%= event.title %>"><span class="fa <%= eventIcon %>"><span class="event-priority"><%= eventPriority %></span></span></a>
                    <% }); %>
                </div>
                <% } %>
            </div>
        </script>

if (event.event.isAlways != 1) {
            if (event.event.eventTypeId == 2) {
            title = "[" + moment(event.scheduleEvent.fromDt, systemDateFormat).format(jsTimeFormat) + "] " + event.title;
            } else if (event.sameDay) {
            title = "[" + moment(event.scheduleEvent.fromDt, systemDateFormat).format(jsTimeFormat) + " - " + moment(event.scheduleEvent.toDt, systemDateFormat).format(jsTimeFormat) + "] " + event.title;
            } else {
            title = "[" + moment(event.scheduleEvent.fromDt, systemDateFormat).format(jsDateFormat) + " - " + moment(event.scheduleEvent.toDt, systemDateFormat).format(jsDateFormat) + "] " + event.title;
            }
            }

if (event.event.displayOrder > 0)
            title = title + " (" + event.event.displayOrder + ")";

if (event.event.displayGroups.length <= 1) {
            eventClass = "event-info";
            }
            else {
            eventClass = "event-success";
            }

if (event.event.isAlways == 1) {
            eventIcon = "fa-retweet";
            }

if (event.event.recurrenceType != null && event.event.recurrenceType != "") {
            eventClass = "event-special";
            eventIcon = "fa-repeat";
            }

if (event.event.isPriority >= 1) {
                eventClass = "event-important";
                eventIcon = "fa-bullseye";
                eventPriority = event.event.isPriority;
            }

if (event.event.eventTypeId == 4) {
                eventIcon = "fa-hand-paper";
            }

if (event.event.isGeoAware === 1) {
                eventIcon = "fa-map-marker";
            }

if (!event.editable) {
            event.url = null;
            eventIcon = "fa-wrench";
            eventClass = "event-inverse";
            }
            %>
            <div class="cal-row-fluid">
                <div class="cal-cell<%= event.days%> cal-offset<%= event.start_day %> day-highlight dh-<%= event['class'] %>">
                    <a href="<%= event.url ? event.url : 'javascript:void(0)' %>" data-event-id="<%= event.id %>"
                       data-event-start="<%= event.start %>" data-event-end="<%= event.end %>"
                       data-event-class="<%= eventClass %>"
                       class="cal-event-week event<%= event.id %>"><span class="fa <%= eventIcon %>"><span class="event-priority"><%= eventPriority %></span></span> <%= title %></a>
                </div>
            </div>
            <% }); %>
        </script>

<div class="col-sm-2">
                    <label for="reminder_value[]">
                        <input class="form-control" name="reminder_value[]" type="number" value="{{ value }}" />
                    </label>
                </div>
                <div class="col-sm-2">
                    <label for="reminder_type[]">
                        <select class="form-control" name="reminder_type[]">
                            <option value="1" {{#eq type 1}}selected{{/eq}}>{% endverbatim %}{% trans "Minute" %}{% verbatim %}</option>
                            <option value="2" {{#eq type 2}}selected{{/eq}}>{% endverbatim %}{% trans "Hour" %}{% verbatim %}</option>
                            <option value="3" {{#eq type 3}}selected{{/eq}}>{% endverbatim %}{% trans "Day" %}{% verbatim %}</option>
                            <option value="4" {{#eq type 4}}selected{{/eq}}>{% endverbatim %}{% trans "Week" %}{% verbatim %}</option>
                            <option value="5" {{#eq type 5}}selected{{/eq}}>{% endverbatim %}{% trans "Month" %}{% verbatim %}</option>
                        </select>
                    </label>
                </div>
                <div class="col-sm-3">
                    <label for="reminder_option[]">
                        <select class="form-control" name="reminder_option[]">
                            <option value="1" {{#eq option 1}}selected{{/eq}}>{% endverbatim %}{% trans "Before schedule starts" %}{% verbatim %}</option>
                            <option value="2" {{#eq option 2}}selected{{/eq}}>{% endverbatim %}{% trans "After schedule starts" %}{% verbatim %}</option>
                            <option value="3" {{#eq option 3}}selected{{/eq}}>{% endverbatim %}{% trans "Before schedule ends" %}{% verbatim %}</option>
                            <option value="4" {{#eq option 4}}selected{{/eq}}>{% endverbatim %}{% trans "After schedule ends" %}{% verbatim %}</option>
                        </select>
                    </label>
                </div>
                <div class="col-sm-3">
                    <label for="reminder_isEmail[]">
                        <input type="checkbox" name="reminder_isEmail[]" {{#eq isEmail 1}}checked{{/eq}}/>
                        {% endverbatim %}{% trans "Notify by email?" %}{% verbatim %}
                        <input type="hidden" name="reminder_isEmailHidden[]" />
                    </label>
                </div>
                <div class="col-sm-2">
                    <button class="btn btn-white"><i class="fa {{ buttonGlyph }}"></i></button>
                </div>
            </div>
        </script>

{% endverbatim %}
{% endblock %}

{% block javaScript %}
    <script type="text/javascript">
		// We are using this variable in xibo-calendar.js
        var scheduleRecurrenceDeleteUrl = "{{ url_for("schedule.recurrence.delete.form", {id:':id'}) }}";

var layoutPreviewUrl = "{{ url_for("layout.preview", {id: ':id'}) }}";

// Equals helper for the templates below
        Handlebars.registerHelper('eq', function(v1, v2, opts) {
            if (v1 === v2) {
                return opts.fn(this);
            } else {
                return opts.inverse(this);
            }
        });

// Init campaign select2
        $(function() {
            // Select lists
            var dialog = 'body';

var $campaignSelect = $('.xibo-calendar-controls #campaignId');
            $campaignSelect.select2({
                dropdownParent: $(dialog),
                ajax: {
                    url: $campaignSelect.data("searchUrl"),
                    dataType: "json",
                    placeholder: 'This is my placeholder',
                    allowClear: true,
                    data: function(params) {

var query = {
                            isLayoutSpecific: -1,
                            retired: 0,
                            totalDuration: 0,
                            name: params.term,
                            start: 0,
                            length: 10,
                            columns: [
                                {
                                    "data": "isLayoutSpecific"
                                },
                                {
                                    "data": "campaign"
                                }
                            ],
                            order: [
                                {
                                    "column": 0,
                                    "dir": "asc"
                                },
                                {
                                    "column": 1,
                                    "dir": "asc"
                                }
                            ]
                        };

// Set the start parameter based on the page number
                        if (params.page != null) {
                            query.start = (params.page - 1) * 10;
                        }

return query;
                    },
                    processResults: function(data, params) {

var results = [];
                        var campaigns = [];
                        var layouts = [];

$.each(data.data, function(index, element) {
                            if (element.isLayoutSpecific === 1) {
                                layouts.push({
                                    "id": element.campaignId,
                                    "text": element.campaign
                                });
                            } else {
                                campaigns.push({
                                    "id": element.campaignId,
                                    "text": element.campaign
                                });
                            }
                        });

if (campaigns.length > 0) {
                            results.push({
                                "text": $campaignSelect.data('transCampaigns'),
                                "children": campaigns
                            })
                        }

if (layouts.length > 0) {
                            results.push({
                                "text": $campaignSelect.data('transLayouts'),
                                "children": layouts
                            })
                        }

var page = params.page || 1;
                        page = (page > 1) ? page - 1 : page;

return {
                            results: results,
                            pagination: {
                                more: (page * 10 < data.recordsTotal)
                            }
                        }
                    }
                }
            })
            .on('change', function(e) {
                // Refresh the calendar view
                setTimeout(calendar.view(), 1000);
            });

setTimeout(function() {
                    opts.set('disabled', false);
                }, 100);
            })
            .on('change', function(e) {
                // Refresh the calendar view
                setTimeout(calendar.view(), 1000);
            });

// Set up our show all selector control
            $('#showAll', dialog).on('change', function() {
                setTimeout(calendar.view(), 1000);
            });
        });
    </script>
{% endblock %}