0byt3m1n1
Path:
/
home
/
mgatv524
/
cms.mgaplay.com.br
/
views
/
[
Home
]
File: xibo-audience-connector-form-javascript.twig
{# /** * Copyright (C) 2022 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/>. */ #} {% import "forms.twig" as forms %} <script type="text/javascript"> {% autoescape "js" %} window.audienceDaysOfWeek = { 1: "{{ "Monday"|trans }}", 2: "{{ "Tuesday"|trans }}", 3: "{{ "Wednesday"|trans }}", 4: "{{ "Thursday"|trans }}", 5: "{{ "Friday"|trans }}", 6: "{{ "Saturday"|trans }}", 7: "{{ "Sunday"|trans }}", }; {% endautoescape %} window.audienceFormOpen = function($audienceConnector) { // Make a datatable var dialog = $audienceConnector.closest('.modal'); var $table = $('#audience-dma'); var audienceDmaTable; audienceDmaTable = $table.DataTable({ language: dataTablesLanguage, dom: dataTablesTemplate, serverSide: false, stateSave: false, responsive: true, filter: true, searchDelay: 3000, order: [[ 0, 'asc']], ajax: { url: $table.data('proxyUrl').replace(':method', 'dmaSearch'), data: function (d) { $.extend(d, $table.closest('.XiboGrid').find('.FilterDiv form').serializeObject()); } }, columns: [ { data: 'name', responsivePriority: 1 }, { data: 'costPerPlay', responsivePriority: 1 }, { data: 'impressionsPerPlay', responsivePriority: 1 }, { data: 'impressionSource', responsivePriority: 10 }, { data: 'startDate', responsivePriority: 2, render: function(data, type) { if (type !== 'display' && type !== 'export' || data == null) { return data; } return moment(data, systemDateFormat).format(jsDateOnlyFormat); }, }, { data: 'endDate', responsivePriority: 2, render: function(data, type) { if (type !== 'display' && type !== 'export' || data == null) { return data; } return moment(data, systemDateFormat).format(jsDateOnlyFormat); }, }, { data: 'daysOfWeek', responsivePriority: 2, render: function(data) { let daysOfWeek = []; $.each(data, function(index, el) { daysOfWeek.push(audienceDaysOfWeek[el]); }); return daysOfWeek.join(', '); }, }, { data: 'startTime', responsivePriority: 2 }, { data: 'endTime', responsivePriority: 2 }, { data: 'geoFence', responsivePriority: 3, render: function(data) { let icon; if (data && data.length > 0) icon = "fa-check"; else icon = "fa-times"; return '<span class="fa ' + icon + '"></span>'; }, }, { data: 'priority', responsivePriority: 2 }, { data: function(data) { if (data.displays) { return data.displays.length; } else { return 0; } }, responsivePriority: 1, }, { data: function(data, type, set, meta) { if (type !== 'display') { return ''; } return '<a class="btn btn-sm" href="#" onclick="openDmaForm(' + meta.row + ')"><span class="fa fa-pencil" title="{% trans %}Edit{% endtrans %}"></span></a>' + '<a class="btn btn-sm" href="#" onclick="deleteDmaForm(' + meta.row + ')"><span class="fa fa-trash" title="{% trans %}Delete{% endtrans %}"></span></a>'; }, responsivePriority: 1, } ], }); table.on('draw', dataTableDraw); table.on('processing.dt', dataTableProcessing); // Add button new $.fn.dataTable.Buttons(audienceDmaTable, { buttons: [ { text: '{{ "Add DMA"|trans }}', action: function (e, dt, node, config) { openDmaForm(); }, }, ] }); audienceDmaTable.buttons().container().css('margin-bottom', '10px').appendTo('#audience-dma_wrapper .dataTables_folder'); setTimeout(function() { audienceDmaTable.columns.adjust() }, 500); // Add an add button. var dmaTemplate = Handlebars.compile($('#xibo-audience-connector-dma-form').html()); window.openDmaForm = function(id = null) { let title; let method; let dma; if (id !== null) { dma = audienceDmaTable.rows(id).data()[0]; title = '{{ "Edit DMA"|trans }}'; method = 'dmaEdit'; } else { title = '{{ "Add DMA"|trans }}'; method = 'dmaAdd'; } bootbox.hideAll(); const $dialog = bootbox.dialog({ message: dmaTemplate({ connectorId: $table.data('connectorId'), method: method, dma: dma, impressionSources: $table.data('impressionSources'), }), title: title, animate: false, size: 'large', buttons: { back: { label: '{{ "Back"|trans }}', className: 'btn-white', callback: function() { // Open up the connector config form. bootbox.hideAll(); $('[data-connector-class-name-last="XiboAudienceReportingConnector"]').find('.btn-primary').click(); } }, save: { label: '{{ "Save"|trans }}', className: 'btn-success', callback: function() { // Submit the form in the usual way, and then open up the connector config form. const $form = $dialog.find('form'); const button = $dialog.find('.btn-success'); button.addClass('disabled').append('<span class="saving fa fa-cog fa-spin p-1"></span>'); XiboFormSubmit($form, null, function(xhr) { if (xhr.success === false) { button.removeClass('disabled').find('.saving').remove(); } else { bootbox.hideAll(); $('[data-connector-class-name-last="XiboAudienceReportingConnector"]').find('.btn-primary').click(); } }); return false; } }, }, onShown: function(e) { const $form = $(e.target).find('form'); // Before we initialise we work out if we need to set the initial key/value on the displayGroupId // select list. const $displayGroupId = $form.find('select[name=displayGroupId]'); if (dma && dma.displayGroupId) { $displayGroupId.attr('data-initial-key', 'displayGroupId'); $displayGroupId.attr('data-initial-value', dma.displayGroupId); } // Initialise general fields. XiboInitialise('#' + $form.attr('id')); const $daysOfWeek = $form.find('select[name="daysOfWeek[]"]'); if (dma && dma.daysOfWeek) { $.each(dma.daysOfWeek, function(index, element) { $daysOfWeek.find('option[value=' + element + ']') .attr('selected', 'selected'); }); } $daysOfWeek.select2({width: '100%'}).val(); // Map // --- const getDataProperty = function($element, property, defaultValue = null) { const value = $element.data(property); if (value) { return value; } else { return defaultValue; } }; const $containerSelector = $form.find('#audience-dma-map'); const $geoFenceField = $form.find('input[name="geoFence"]'); if (dma && dma.geoFence) { $geoFenceField.val(JSON.stringify(dma.geoFence)); } let map = null; $(e.target).find('a[data-toggle="tab"]').on('shown.bs.tab', function (event) { if ($(event.target).attr('href') === '#tab-geo' && map === null) { map = L.map('audience-dma-map').setView( [ getDataProperty($containerSelector, 'mapLat', '51'), getDataProperty($containerSelector, 'mapLong', '0.4'), ], getDataProperty($containerSelector, 'mapZoom', 13), ); L.tileLayer(getDataProperty($containerSelector, 'mapTileServer'), { attribution: getDataProperty( $containerSelector, 'mapAttribution', '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>', ), subdomains: ['a', 'b', 'c'], }).addTo(map); // Add a layer for drawn items const drawnItems = new L.FeatureGroup(); map.addLayer(drawnItems); // Add draw control (toolbar) const drawControl = new L.Control.Draw({ position: 'topright', draw: { polyline: false, circle: false, marker: false, circlemarker: false, }, edit: { featureGroup: drawnItems, }, }); map.addControl(drawControl); // add search Control - allows searching by country/city and automatically // moves map to that location const searchControl = new L.Control.Search({ url: 'https://nominatim.openstreetmap.org/search?format=json&q={s}', jsonpParam: 'json_callback', propertyName: 'display_name', propertyLoc: ['lat', 'lon'], marker: L.circleMarker([0, 0], {radius: 30}), autoCollapse: true, autoType: false, minLength: 2, hideMarkerOnCollapse: true, firstTipSubmit: true, }); map.addControl(searchControl); // Draw events map.on('draw:created', function(e) { drawnItems.addLayer(e.layer); $geoFenceField.val(JSON.stringify(drawnItems.toGeoJSON())); }); map.on('draw:edited', function(e) { $geoFenceField.val(JSON.stringify(drawnItems.toGeoJSON())); }); map.on('draw:deleted', function(e) { e.layers.eachLayer(function(layer) { drawnItems.removeLayer(layer); }); $geoFenceField.val(JSON.stringify(drawnItems.toGeoJSON())); }); // Load existing geoJSON if (dma && dma.geoFence) { L.geoJSON(dma.geoFence, { onEachFeature: function(feature, layer) { drawnItems.addLayer(layer); map.fitBounds(drawnItems.getBounds()); }, }); } } }); } }); } window.deleteDmaForm = function(id) { const dma = audienceDmaTable.rows(id).data()[0]; bootbox.hideAll(); bootbox.confirm({ message: '{{ "Are you sure you want to delete this DMA?"|trans }}', buttons: { confirm: { label: '{{ "Yes"|trans }}', className: 'btn-success', }, cancel: { label: '{{ "No"|trans }}', className: 'btn-danger', }, }, callback: function (result) { if (result) { $.ajax({ method: 'POST', url: $table.data('proxyUrl').replace(':method', 'dmaDelete') + '?_id=' + dma._id, success: function(xhr) { if (xhr && !xhr.success) { toastr.error(xhr.message); } else { SystemMessage('{{ "DMA deleted"|trans }}', true); } }, error: function(xhr, textStatus, errorThrown) { toastr.error(xhr.message); }, complete: function() { $('[data-connector-class-name-last="XiboAudienceReportingConnector"]').find('.btn-primary').click(); } }); } else { $('[data-connector-class-name-last="XiboAudienceReportingConnector"]').find('.btn-primary').click(); } } }); } }; </script> <script type="text/x-handlebars-template" id="xibo-audience-connector-dma-form"> <div class="row"> <div class="col-md-12"> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"><a class="nav-link active" href="#tab-general" role="tab" data-toggle="tab"><span>{% trans "General" %}</span></a></li> <li class="nav-item"><a class="nav-link" href="#tab-dates" role="tab" data-toggle="tab"><span>{% trans "Date/Time" %}</span></a></li> <li class="nav-item"><a class="nav-link" href="#tab-geo" role="tab" data-toggle="tab"><span>{% trans "Geofence" %}</span></a></li> </ul> <form id="{{ random() }}" class="form-horizontal" action="{{ url_for("connector.edit.form.proxy", {id: "{{connectorId}}", method: "{{method}}"}) }}" method="POST"> <input type="hidden" name="_id" value="{% verbatim %}{{ dma._id }}{% endverbatim %}"> <div class="tab-content"> <div class="tab-pane active" id="tab-general"> {% set title %}{% trans "Name" %}{% endset %} {% set helpText %}{% trans "The Name of this DMA - (1 - 50 characters)" %}{% endset %} {{ forms.input("name", title, "{{dma.name}}", helpText) }} {% set title %}{% trans "Priority" %}{% endset %} {% set helpText %}{% trans "Set a priority for this DMA. Higher priorities take precedence." %}{% endset %} {{ forms.number("priority", title, "{{dma.priority}}", helpText) }} {% set title %}{% trans "Display Group" %}{% endset %} {% set helpText %}{% trans "Which displays would you like this DMA to apply to?" %}{% 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("displayGroup.search") }, { name: "data-search-term", value: "displayGroup" }, { name: "data-search-term-tags", value: "tags" }, { name: "data-id-property", value: "displayGroupId" }, { name: "data-text-property", value: "displayGroup" }, ] %} {{ forms.dropdown("displayGroupId", "single", title, null, null, "displayGroupId", "displayGroup", helpText, "pagedSelect", "", "d", "", attributes) }} {% set title %}{% trans "Cost per Play" %}{% endset %} {% set helpText %}{% trans "The cost per play" %}{% endset %} {{ forms.input("costPerPlay", title, "{{dma.costPerPlay}}", helpText) }} <div class="form-group row"> <label class="col-sm-2 control-label" for="field-impression-source"> {{ "Impression Source"|trans }} </label> <div class="col-sm-10"> <select class="form-control" name="impressionSource" id="field-impression-source">{% verbatim %} {{#each impressionSources}} <option name="{{value}}"{{#eq value dma.impressionSource }} selected{{/eq}}>{{name}}</option> {{/each}} {% endverbatim %}</select> <small class="form-text text-muted">{{ "What is the source of this impression figure?"|trans }}</small> </div> </div> {% set title %}{% trans "Impressions per play" %}{% endset %} {% set helpText %}{% trans "The impressions per play" %}{% endset %} {{ forms.number("impressionsPerPlay", title, "{{dma.impressionsPerPlay}}", helpText) }} </div> <div class="tab-pane" id="tab-dates"> {% set title %}{% trans "Start Date" %}{% endset %} {% set helpText %}{% trans "Select the start date for this DMA" %}{% endset %} {{ forms.date("startDate", title, "{{dma.startDate}}", helpText, "starttime-control", "", "") }} {% set title %}{% trans "End Date" %}{% endset %} {% set helpText %}{% trans "Select the end date for this DMA" %}{% endset %} {{ forms.date("endDate", title, "{{dma.endDate}}", helpText, "endtime-control", "", "") }} {% set title %}{% trans "Days of the week" %}{% endset %} {% set helpText %}{% trans "Which days of the week should the DMA be active?" %}{% endset %} {% set options = [ { id: 1, name: "Monday"|trans }, { id: 2, name: "Tuesday"|trans }, { id: 3, name: "Wednesday"|trans }, { id: 4, name: "Thursday"|trans }, { id: 5, name: "Friday"|trans }, { id: 6, name: "Saturday"|trans }, { id: 7, name: "Sunday"|trans }, ] %} {{ forms.dropdown("daysOfWeek[]", "dropdownmulti", title, null, options, "id", "name", helpText) }} {% set title %}{% trans "Start Time" %}{% endset %} {% set helpText %}{% trans "Select the start time for this DMA" %}{% endset %} {{ forms.time("startTime", title, "{{dma.startTime}}", helpText, "starttime-control", "", "") }} {% set title %}{% trans "End Time" %}{% endset %} {% set helpText %}{% trans "Select the end time for this DMA" %}{% endset %} {{ forms.time("endTime", title, "{{dma.endTime}}", helpText, "endtime-control", "", "") }} </div> <div class="tab-pane" id="tab-geo"> {{ forms.hidden("geoFence", "{{dma.geoFence}}") }} {{ forms.message("Draw areas on the map where you want this DMA to be active."|trans) }} <div id="audience-dma-map" data-map-tile-server="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" data-map-lat="{{ settings.DEFAULT_LAT }}" data-map-long="{{ settings.DEFAULT_LONG }}" data-map-zoom="13" style="height: 500px; width: 100%"></div> </div> </div> </form> </div> </div> </script>