0byt3m1n1
Path:
/
home
/
mgatv524
/
vendashop.mgaplay.com.br
/
views
/
[
Home
]
File: displaygroup-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 %}{{ "Display Groups"|trans }} | {% endblock %} {% block actionMenu %} {% if currentUser.featureEnabled("displaygroup.add") %} <div class="widget-action-menu pull-right"> <button class="btn btn-success XiboFormButton" title="{% trans "Add a new Display Group" %}" href="{{ url_for("displayGroup.add.form") }}"> <i class="fa fa-desktop" aria-hidden="true"></i> {% trans "Add Display Group" %}</button> <button class="btn btn-primary" id="refreshGrid" title="{% trans "Refresh the Table" %}" href="#"><i class="fa fa-refresh" aria-hidden="true"></i> {% trans "Refresh" %}</button> </div> {% endif %} {% endblock %} {% block pageContent %} <div class="widget"> <div class="widget-title">{% trans "Display Groups" %}</div> <div class="widget-body"> <div class="XiboGrid" id="{{ random() }}" data-grid-name="displayGroupGridView"> <div class="XiboFilter card mb-3 bg-light"> <div class="FilterDiv card-body" id="Filter"> <form class="form-inline"> {% set title %}{% trans "ID" %}{% endset %} {{ inline.input("displayGroupId", title) }} {% set title %}{% trans "Name" %}{% endset %} {{ inline.inputNameGrid('displayGroup', title) }} {% set title %}{% trans "Display" %}{% endset %} {% set attributes = [ { name: "data-width", value: "200px" }, { name: "data-allow-clear", value: "true" }, { name: "data-placeholder--id", value: null }, { name: "data-placeholder--value", value: "" }, { name: "data-search-url", value: url_for("display.search") }, { name: "data-search-term", value: "display" }, { name: "data-search-term-tags", value: "tags" }, { name: "data-id-property", value: "displayId" }, { name: "data-text-property", value: "display" } ] %} {% set helpText %}{% trans "Return Display Groups that directly contain the selected Display." %}{% endset %} {{ inline.dropdown("displayId", "single", title, "", null, "displayId", "display", helpText, "pagedSelect", "", "", "", attributes) }} {% set title %}{% trans "Nested Display" %}{% endset %} {% set helpText %}{% trans "Return Display Groups that contain the selected Display somewhere in the nested Display Group relationship tree." %}{% endset %} {{ inline.dropdown("nestedDisplayId", "single", title, "", null, "displayId", "display", helpText, "pagedSelect", "", "", "", attributes) }} {% set title %}{% trans "Dynamic Criteria" %}{% endset %} {{ inline.input("dynamicCriteria", title) }} {% if currentUser.featureEnabled("tag.tagging") %} {% set title %}{% trans "Tags" %}{% endset %} {% set exactTagTitle %}{% trans "Exact match?" %}{% endset %} {% set logicalOperatorTitle %}{% trans "When filtering by multiple Tags, which logical operator should be used?" %}{% endset %} {% set helpText %}{% trans "A comma separated list of tags to filter by. Enter a Tag value preceded with | to filter by Tag values. Enter --no-tag to see items without tags." %}{% endset %} {{ inline.inputWithTags("tags", title, null, helpText, null, null, null, "exactTags", exactTagTitle, logicalOperatorTitle) }} {% endif %} {{ inline.hidden("folderId") }} </form> </div> </div> <div class="row"> <div class="col-sm-2 p-3 bg-light" id="grid-folder-filter"> <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 id="container-folder-tree"></div> </div> <div class="folder-controller d-none"> <button type="button" id="folder-tree-select-folder-button" class="btn btn-outline-secondary" title="{% trans "Open / Close Folder Search options" %}"><i class="fas fa-folder fa-1x"></i></button> <div id="breadcrumbs" class="mt-2 pl-2"></div> </div> <div id="datatable-container" class="card col-sm-10 pt-4 px-2"> <div class="XiboData"> <table id="displaygroups" class="table table-striped" data-content-type="displayGroup" data-content-id-name="displayGroupId" data-state-preference-name="displayGroupGrid" style="width: 100%;"> <thead> <tr> <th>{% trans "ID" %}</th> <th>{% trans "Name" %}</th> <th>{% trans "Description" %}</th> <th>{% trans "Is Dynamic?" %}</th> <th>{% trans "Criteria" %}</th> {% if currentUser.featureEnabled("tag.tagging") %} <th>{% trans "Criteria Tags" %}</th> <th>{% trans "Tags" %}</th> {% endif %} <th>{% trans "Sharing" %}</th> <th>{% trans "Reference 1" %}</th> <th>{% trans "Reference 2" %}</th> <th>{% trans "Reference 3" %}</th> <th>{% trans "Reference 4" %}</th> <th>{% trans "Reference 5" %}</th> <th>{% trans "Created Date" %}</th> <th>{% trans "Modified Date" %}</th> <th class="rowMenu"></th> </tr> </thead> <tbody> </tbody> </table> </div> </div> </div> </div> </div> </div> {% endblock %} {% block javaScript %} <script type="text/javascript"> var displayGroupTable; var displayTable; var criteria; var criteriaTag; var useRegexForName; var exactTags; var logicalOperator; var logicalOperatorName; $(document).ready(function() { {% if not currentUser.featureEnabled("folder.view") %} disableFolders(); {% endif %} displayGroupTable = $("#displaygroups").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("displayGroup.search") }}", "data": function(d) { $.extend(d, $("#displaygroups").closest(".XiboGrid").find(".FilterDiv form").serializeObject()); } }, "columns": [ { "data": "displayGroupId", responsivePriority: 2}, { "data": "displayGroup", "render": dataTableSpacingPreformatted, responsivePriority: 2 }, { "data": "description", responsivePriority: 3 }, { "data": "isDynamic", "render": dataTableTickCrossColumn, responsivePriority: 3 }, { "data": "dynamicCriteria", responsivePriority: 4 }, {% if currentUser.featureEnabled("tag.tagging") %} { "data": "dynamicCriteriaTags", responsivePriority: 4}, { "name": "tags", "sortable": false, responsivePriority: 3, "data": dataTableCreateTags }, {% endif %} { "data": "groupsWithPermissions", visible: false, responsivePriority: 10, "render": dataTableCreatePermissions }, { "data": "ref1", "visible": false, responsivePriority: 5}, { "data": "ref2", "visible": false, responsivePriority: 5}, { "data": "ref3", "visible": false, responsivePriority: 5}, { "data": "ref4", "visible": false, responsivePriority: 5}, { "data": "ref5", "visible": false, responsivePriority: 5}, { "data": "createdDt", "visible": false, responsivePriority: 5 }, { "data": "modifiedDt", "visible": false, responsivePriority: 5 }, { "orderable": false, responsivePriority: 1, "data": dataTableButtonsColumn } ] }); $("#refreshGrid").click(function () { displayGroupTable.ajax.reload(); }); displayGroupTable.on('draw', dataTableDraw); displayGroupTable.on('draw', { form: $("#displaygroups").closest(".XiboGrid").find(".FilterDiv form") }, dataTableCreateTagEvents); displayGroupTable.on('processing.dt', dataTableProcessing); dataTableAddButtons(displayGroupTable, $('#displaygroups_wrapper').find('.dataTables_buttons')); }); function setDeleteMultiSelectFormOpen(dialog) { $(dialog).find('.save-button').prop('disabled', false); var template = Handlebars.compile($('#template-display-group-multi-delete-checkbox').html()); var $input = $(template()); $input.find('input').on('change', function() { $(dialog).find('.save-button').prop('disabled', !$(this).is(':checked')); }); $(dialog).find('.modal-body').append($input); } function displayGroupAddFormNext() { // Get form var $form = $("#displayGroupAddForm"); // Set apply and apply reset data $form.data("apply", true); $form.data("applyCallback", 'applyResetCallback'); // Submit form $form.submit(); } function applyResetCallback(form) { // Reset form fields $(form).find('#displayGroup').val(""); } function displayGroupFormOpen(dialog) { displayTable = null; $(dialog).find("input[name=dynamicCriteria]").on("keyup", _.debounce(function() { displayGroupQueryDynamicMembers(dialog); }, 500)); $(dialog).find("input[name=dynamicCriteriaTags], input[name=exactTags], select[name=logicalOperator], select[name=logicalOperatorName]").change(function() { displayGroupQueryDynamicMembers(dialog); }); var $form = $('#displayGroupAddForm'); // First time in there displayGroupQueryDynamicMembers(dialog); } function displayGroupQueryDynamicMembers(dialog) { if ($(dialog).find("input[name=isDynamic]")[0].checked) { criteria = $(dialog).find("input[name=dynamicCriteria]").val(); criteriaTag = $(dialog).find("input[name=dynamicCriteriaTags]").val(); useRegexForName = $(dialog).find("input[name=useRegexForName]").val(); exactTags = $(dialog).find("input[name=exactTags]").is(':checked'); logicalOperator = $(dialog).find("select[name=logicalOperator]").val(); logicalOperatorName = $(dialog).find("select[name=logicalOperatorName]").val(); if (criteria === "" && criteriaTag === "") { if (displayTable != null) { displayTable.destroy(); displayTable = null; $("#displayGroupDisplays tbody").empty(); } return; } if (displayTable != null) { displayTable.ajax.reload(); } else { displayTable = $("#displayGroupDisplays").DataTable({ "language": dataTablesLanguage, serverSide: true, stateSave: true, stateDuration: 0, filter: false, searchDelay: 3000, "order": [[1, "asc"]], ajax: { "url": "{{ url_for("display.search") }}", "data": function (d) { $.extend( d, { display: criteria, tags: criteriaTag, useRegexForName: useRegexForName, exactTags: exactTags, logicalOperator: logicalOperator, logicalOperatorName: logicalOperatorName } ); } }, "columns": [ {"data": "displayId"}, {"data": "display"}, {"data": dataTableCreateTags}, { "data": "mediaInventoryStatus", "render": function (data, type, row) { if (type != "display") return data; var icon = ""; if (data == 1) icon = "fa-check"; else if (data == 0) icon = "fa-times"; else icon = "fa-cloud-download"; return "<span class='fa " + icon + "'></span>"; } }, {"data": "licensed", "render": dataTableTickCrossColumn} ] }); displayTable.on('processing.dt', dataTableProcessing); displayTable.on('draw', { form: $(".displayGroupForm") }, dataTableCreateTagEvents); } } } function displayGroupMembersFormOpen(dialog) { var control = $(dialog).find(".controlDiv"); // This contains the changes made since the form open if (control.data().members == undefined) control.data().members = { displays: {}, displayGroups: {} }; var table = $("#displaysMembersTable").DataTable({ "language": dataTablesLanguage, serverSide: true, stateSave: true, stateDuration: 0, filter: false, responsive: true, searchDelay: 3000, "order": [[1, "asc"]], ajax: { "url": "{{ url_for("display.search") }}", "data": function(dataDisplay) { $.extend(dataDisplay, $(dialog).find("#displayForm").serializeObject()); return dataDisplay; } }, "columns": [ { "data": "displayId", responsivePriority: 2}, { "data": "display", responsivePriority: 2 }, { "data": "mediaInventoryStatus", responsivePriority: 2, "render": function (data, type, row) { if (type != "display") return data; var icon = ""; if (data == 1) icon = "fa-check"; else if (data == 0) icon = "fa-times"; else icon = "fa-cloud-download"; return "<span class='fa " + icon + "'></span>"; } }, { "data": "loggedIn", "render": dataTableTickCrossColumn, responsivePriority: 3}, { "name": "clientSort", responsivePriority: 3, "data": function (data) { return data.clientType + ' ' + data.clientVersion + '-' + data.clientCode; }, "visible": false }, { "name": "member", responsivePriority: 2, "data": function (data, type, row) { if (type != "display") return data; var checked = ''; // Check if the element is already been checked/unchecked if( typeof control.data().members != "undefined" && control.data().members.displays[data.displayId] != undefined){ checked = (control.data().members.displays[data.displayId]) ? 'checked' : ''; } else { // If its not been altered, check for the original state if( dialog.data().extra ){ dialog.data().extra.displaysAssigned.forEach(function(extraElement) { if( extraElement.displayId == data.displayId ){ checked = 'checked'; } }); } } var checkBox = '<input type="checkbox" class="checkbox" data-member-id=' + data.displayId + ' data-member-type="display" ' + checked + '>'; // Create checkbox return checkBox; } }, ] }); table.on('draw', dataTableDraw); table.on('processing.dt', dataTableProcessing); var tableGroup = $("#displaysGroupsMembersTable").DataTable({ "language": dataTablesLanguage, serverSide: true, stateSave: true, stateDuration: 0, filter: false, responsive: true, searchDelay: 3000, "order": [[1, "asc"]], ajax: { "url": "{{ url_for("displayGroup.search") }}", "data": function(dataGroup) { $.extend(dataGroup, $("#displaysGroupsMembersTable").closest(".XiboGrid").find(".FilterDiv form").serializeObject()); return dataGroup; } }, "columns": [ { "data": "displayGroupId", responsivePriority: 2}, { "data": "displayGroup", responsivePriority: 2}, { "name": "member", responsivePriority: 2, "data": function (data, type, row) { if (type != "display") return data; var checked = ''; // Check if the element is already been checked/unchecked if( typeof control.data().members != "undefined" && control.data().members.displayGroups[data.displayGroupId] != undefined){ checked = (control.data().members.displayGroups[data.displayGroupId]) ? 'checked' : ''; } else { // If its not been altered, check for the original state if( dialog.data().extra ){ dialog.data().extra.displayGroupsAssigned.forEach(function(extraElement) { if( extraElement.displayGroupId == data.displayGroupId ){ checked = 'checked'; } }); } } var checkBox = '<input type="checkbox" class="checkbox" data-member-id=' + data.displayGroupId + ' data-member-type="displayGroup" ' + checked + '>'; // Create checkbox return checkBox; } }, ] }); tableGroup.on('draw', dataTableDraw); tableGroup.on('processing.dt', dataTableProcessing); // Bind to the checkboxes change event control.on("change", ".checkbox", function() { // Update our global members data with this var memberId = $(this).data().memberId; var memberType = $(this).data().memberType; var value = $(this).is(":checked"); if (memberType == "display") control.data().members.displays[memberId] = (value) ? 1 : 0; else if (memberType == "displayGroup") control.data().members.displayGroups[memberId] = (value) ? 1 : 0; }); } function displayGroupMembersFormSubmit(id) { var form = $("#" + id); var members = form.data().members; // There may not have been any changes if (members == undefined) { // No changes XiboDialogClose(); return; } // Create a new queue. window.queue = $.jqmq({ // Next item will be processed only when queue.next() is called in callback. delay: -1, // Process queue items one-at-a-time. batch: 1, // For each queue item, execute this function, making an AJAX request. Only // continue processing the queue once the AJAX request's callback executes. callback: function( data ) { // Make an AJAX call $.ajax({ type: "POST", url: data.url, cache: false, dataType: "json", data: $.param(data.data), success: function(response, textStatus, error) { if (response.success) { // Success - what do we do now? if (response.message != '') SystemMessage(response.message, true); // Process the next item queue.next(); } else { // Why did we fail? if (response.login) { // We were logged out LoginBox(response.message); } else { // Likely just an error that we want to report on form.find(".saving").remove(); SystemMessageInline(response.message, form.closest(".modal")); } } }, error: function(responseText) { SystemMessage(responseText, false); } }); }, // When the queue completes naturally, execute this function. complete: function() { // Remove the save button form.find(".saving").parent().remove(); // Refresh the grids // (this is a global refresh) XiboRefreshAllGrids(); // Close the dialog XiboDialogClose(); } }); var addedToQueue = false; // Build an array of id's to assign and an array to unassign var assign = []; var unassign = []; $.each(members.displays, function(name, value) { if (value == 1) assign.push(name); else unassign.push(name); }); if (assign.length > 0 || unassign.length > 0) { var data = { data: {}, url: form.data().url }; data.data[form.data().param] = assign; data.data[form.data().paramUnassign] = unassign; // Queue queue.add(data); addedToQueue = true; } // Build an array of id's to assign and an array to unassign var assignGroup = []; var unassignGroup = []; $.each(members.displayGroups, function(name, value) { if (value == 1) assignGroup.push(name); else unassignGroup.push(name); }); if (assignGroup.length > 0 || unassignGroup.length > 0) { var dataGroup = { data: {}, url: form.data().groupsUrl }; dataGroup.data[form.data().groupsParam] = assignGroup; dataGroup.data[form.data().groupsParamUnassign] = unassignGroup; // Queue queue.add(dataGroup); addedToQueue = true; } if (!addedToQueue) { XiboDialogClose(); } else { // Start the queue queue.start(); } } </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 %}