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.
188 lines
9.3 KiB
Twig
188 lines
9.3 KiB
Twig
{#
|
|
/**
|
|
* Copyright (C) 2024 Xibo Signage Ltd
|
|
*
|
|
* Xibo - Digital Signage - https://xibosignage.com
|
|
*
|
|
* 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 %}{{ "Sync Groups"|trans }} | {% endblock %}
|
|
|
|
{% block actionMenu %}{% endblock %}
|
|
|
|
{% block pageContent %}
|
|
<div class="ots-displays-page">
|
|
<div class="page-header ots-page-header">
|
|
<h1>{% trans "Sync Groups" %}</h1>
|
|
<p class="text-muted">{% trans "Create and manage synchronized Display groups." %}</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="syncGroupGridView">
|
|
<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 Sync Groups" %}</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="Filter">
|
|
<form class="form-inline">
|
|
{% set title %}{% trans "ID" %}{% endset %}
|
|
{{ inline.input("syncGroupId", title) }}
|
|
|
|
{% set title %}{% trans "Name" %}{% endset %}
|
|
{{ inline.inputNameGrid('name', title) }}
|
|
|
|
{% set title %}{% trans "Lead Display ID" %}{% endset %}
|
|
{{ inline.input("leadDisplayId", title) }}
|
|
|
|
{{ inline.hidden("folderId") }}
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-with-folders-container ots-grid-with-folders">
|
|
<div class="grid-folder-tree-container p-3 content-card ots-folder-tree" id="grid-folder-filter">
|
|
<input id="jstree-search" class="form-control" type="text" placeholder="{% trans "Search" %}">
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input" id="folder-tree-clear-selection-button">
|
|
<label class="form-check-label" for="folder-tree-clear-selection-button" title="{% trans "Search in all folders" %}">{% trans "All Folders" %}</label>
|
|
</div>
|
|
<div class="folder-search-no-results d-none">
|
|
<p>{% trans 'No Folders matching the search term' %}</p>
|
|
</div>
|
|
<div id="container-folder-tree"></div>
|
|
</div>
|
|
<div id="datatable-container">
|
|
<div class="XiboData card py-3 content-card ots-table-card">
|
|
<div class="ots-table-toolbar">
|
|
<button type="button" id="folder-tree-select-folder-button" class="btn btn-sm btn-outline-secondary ots-toolbar-btn" title="{% trans "Open / Close Folder Search options" %}"><i class="fas fa-folder"></i></button>
|
|
<div id="breadcrumbs"></div>
|
|
{% if currentUser.featureEnabled("display.syncAdd") %}
|
|
<button class="btn btn-sm btn-success ots-toolbar-btn XiboFormButton" title="{% trans "Add a new Sync Group" %}" href="{{ url_for("syncgroup.form.add") }}"><i class="fa fa-plus-circle" 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>
|
|
<table id="syncgroups" class="table table-striped" data-content-type="syncGroup" data-content-id-name="syncGroupId" data-state-preference-name="syncGroupGrid" style="width: 100%;">
|
|
<thead>
|
|
<tr>
|
|
<th>{% trans "ID" %}</th>
|
|
<th>{% trans "Name" %}</th>
|
|
<th>{% trans "Created Date" %}</th>
|
|
<th>{% trans "Modified Date" %}</th>
|
|
<th>{% trans "Owner" %}</th>
|
|
<th>{% trans "Modified By" %}</th>
|
|
<th>{% trans "Publisher Port" %}</th>
|
|
<th>{% trans "Switch Delay" %}</th>
|
|
<th>{% trans "Video Pause Delay" %}</th>
|
|
<th>{% trans "Lead Display" %}</th>
|
|
<th class="rowMenu"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block javaScript %}
|
|
<script type="text/javascript" nonce="{{ cspNonce }}">
|
|
let syncGroupTable;
|
|
|
|
$(document).ready(function() {
|
|
syncGroupTable = $("#syncgroups").DataTable({
|
|
"language": dataTablesLanguage,
|
|
dom: dataTablesTemplate,
|
|
serverSide: true,
|
|
stateSave: true,
|
|
stateDuration: 0,
|
|
responsive: true,
|
|
stateLoadCallback: dataTableStateLoadCallback,
|
|
stateSaveCallback: dataTableStateSaveCallback,
|
|
"filter": false,
|
|
searchDelay: 3000,
|
|
"order": [[ 1, "asc"]],
|
|
ajax: {
|
|
"url": "{{ url_for("syncgroup.search") }}",
|
|
"data": function(d) {
|
|
$.extend(d, $("#syncgroups").closest(".XiboGrid").find(".FilterDiv form").serializeObject());
|
|
}
|
|
},
|
|
"columns": [
|
|
{ "data": "syncGroupId", responsivePriority: 2 },
|
|
{ "data": "name", responsivePriority: 1 },
|
|
{ "data": "createdDt", responsivePriority: 2 },
|
|
{ "data": "modifiedDt", responsivePriority: 2 },
|
|
{ "data": "owner", responsivePriority: 3 },
|
|
{ "data": "modifiedByName", responsivePriority: 4 },
|
|
{ "data": "syncPublisherPort", responsivePriority: 3 },
|
|
{ "data": "syncSwitchDelay", responsivePriority: 3 },
|
|
{ "data": "syncVideoPauseDelay", responsivePriority: 3 },
|
|
{ "data": "leadDisplay", responsivePriority: 3 },
|
|
{
|
|
"orderable": false,
|
|
responsivePriority: 1,
|
|
"data": dataTableButtonsColumn
|
|
}
|
|
]
|
|
});
|
|
|
|
syncGroupTable.on('draw', dataTableDraw);
|
|
syncGroupTable.on('processing.dt', dataTableProcessing);
|
|
dataTableAddButtons(syncGroupTable, $('#syncgroups_wrapper').find('.dataTables_buttons'));
|
|
|
|
$("#refreshGrid").click(function () {
|
|
syncGroupTable.ajax.reload();
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block javaScriptTemplates %}
|
|
{{ parent() }}
|
|
|
|
{% verbatim %}
|
|
<script type="text/x-handlebars-template" id="template-display-group-multi-delete-checkbox">
|
|
<div class="form-group row">
|
|
<div class="offset-sm-2 col-sm-10 mt-4">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="checkbox-confirmDelete" name="confirmDelete">
|
|
<label class="form-check-label" for="checkbox-confirmDelete">
|
|
{% endverbatim %}{{ "Are you sure you want to delete?"|trans }}{% verbatim %}
|
|
</label>
|
|
</div>
|
|
<small class="form-text text-muted">{% endverbatim %}{{ "Check to confirm deletion of the selected records."|trans }}{% verbatim %}</small>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
{% endverbatim %}
|
|
{% endblock %}
|