Files
OTSSignsTheme/custom/otssignange/views/transition-page.twig
Matt Batchelder 29b56bef4f Refactor dashboard card classes to use 'content-card' instead of 'dashboard-card'
- 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.
2026-02-11 09:17:45 -05:00

99 lines
4.0 KiB
Twig

{#
/*
* OTS Signs Theme - Transition Page
* Based on Xibo CMS transition-page.twig with OTS styling
*/
#}
{% extends "authed.twig" %}
{% import "inline.twig" as inline %}
{% block title %}{{ "Transitions"|trans }} | {% endblock %}
{% block actionMenu %}{% endblock %}
{% block pageContent %}
<div class="ots-displays-page">
<div class="page-header ots-page-header">
<h1>{% trans "Transitions" %}</h1>
<p class="text-muted">{% trans "Manage display transitions." %}</p>
</div>
<div class="widget content-card ots-displays-card">
<div class="widget-body ots-displays-body">
<div class="XiboGrid" id="{{ random() }}">
<div class="XiboFilter card mb-3 bg-light content-card ots-filter-card" style="display:none;">
<div class="FilterDiv card-body" id="Filter">
<form class="form-inline">
</form>
</div>
</div>
<div class="XiboData card pt-3 content-card ots-table-card">
<div class="ots-table-toolbar">
<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="transitions" class="table table-striped">
<thead>
<tr>
<th>{% trans "Name" %}</th>
<th>{% trans "Has Duration" %}</th>
<th>{% trans "Has Direction" %}</th>
<th>{% trans "Enabled for In" %}</th>
<th>{% trans "Enabled for Out" %}</th>
<th class="rowMenu"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block javaScript %}
<script type="text/javascript" nonce="{{ cspNonce }}">
var table = $("#transitions").DataTable({
"language": dataTablesLanguage,
dom: dataTablesTemplate,
serverSide: true,
stateSave: true,
stateDuration: 0,
responsive: true,
stateLoadCallback: dataTableStateLoadCallback,
stateSaveCallback: dataTableStateSaveCallback,
filter: false,
searchDelay: 3000,
"order": [[ 0, "asc"]],
ajax: {
"url": "{{ url_for("transition.search") }}",
"data": function(d) {
$.extend(d, $("#transitions").closest(".XiboGrid").find(".FilterDiv form").serializeObject());
}
},
"columns": [
{ "data": "transition", responsivePriority: 2 },
{ "data": "hasDuration", "render": dataTableTickCrossColumn, responsivePriority: 3 },
{ "data": "hasDirection", "render": dataTableTickCrossColumn, responsivePriority: 3 },
{ "data": "availableAsIn", "render": dataTableTickCrossColumn, responsivePriority: 3 },
{ "data": "availableAsOut", "render": dataTableTickCrossColumn, responsivePriority: 3 },
{
"orderable": false,
responsivePriority: 1,
"data": dataTableButtonsColumn
}
]
});
table.on('draw', dataTableDraw);
table.on('processing.dt', dataTableProcessing);
dataTableAddButtons(table, $('#transitions_wrapper').find('.dataTables_buttons'));
$("#refreshGrid").click(function () {
table.ajax.reload();
});
</script>
{% endblock %}