422 lines
18 KiB
Twig
422 lines
18 KiB
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/>.
|
|
*/
|
|
#}
|
|
{% extends "authed.twig" %}
|
|
{% import "inline.twig" as inline %}
|
|
{% set displayName = display.display %}
|
|
|
|
{% block title %}{% trans %}Manage {{ displayName }}{% endtrans %} | {% endblock %}
|
|
|
|
{% block pageContent %}
|
|
{% set displayLastAccessed = display.lastAccessed %}
|
|
{% if display.loggedIn == 1 %}
|
|
{% set title %}{% trans %}Display {{ displayName }} is currently logged-in, seen {{ timeAgo }}.{% endtrans %}{% endset %}
|
|
{% else %}
|
|
{% set title %}{% trans %}Display {{ displayName }} is not logged in at the moment and last accessed at <span class="unixDate">{{ displayLastAccessed }}</span>{% endtrans %}{% endset %}
|
|
{% endif %}
|
|
<h1 class="text-center">{{ title }}</h1>
|
|
{% if display.mediaInventoryStatus == 3 %}
|
|
<p class="text-center">{% trans "This Display hasn't connected since updates have been made in the CMS. The below information will be updated when it has." %}</p>
|
|
{% endif %}
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="widget">
|
|
<div class="widget-title">{% trans "File Status - Count of Files" %}</div>
|
|
<div class="widget-body">
|
|
<canvas id="downloadedCountPie" style="clear:both; margin-top:25px;" width="230"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="widget">
|
|
<div class="widget-title">{% trans "File Status - Size of Files" %}</div>
|
|
<div class="widget-body">
|
|
<canvas id="downloadedSizePie" style="clear:both; margin-top:25px;" width="230"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="widget">
|
|
{% if display.clientCode < 300 %}
|
|
<div class="widget-body medium">
|
|
<p class="alert alert-info">
|
|
{{ "This player is too old to show faults. Please upgrade it to v3 or later."|trans }}
|
|
</p>
|
|
</div>
|
|
{% else %}
|
|
<div class="widget-title">
|
|
<button id="refreshLog" class="btn btn-sm pull-right"><span class="fa fa-refresh"></span></button>
|
|
{% trans "Reported Player Faults" %}
|
|
</div>
|
|
<div class="widget-body medium no-padding">
|
|
<table id="playerFaults" class="table table-striped" data-url="{{ url_for("display.faults.search", {"displayId": display.displayId}) }}">
|
|
<thead>
|
|
<tr>
|
|
<th>{% trans "Code" %}</th>
|
|
<th>{% trans "Reason" %}</th>
|
|
<th>{% trans "Date" %}</th>
|
|
<th>{% trans "Expires" %}</th>
|
|
<th>{% trans "Schedule ID" %}</th>
|
|
<th>{% trans "Layout ID" %}</th>
|
|
<th>{% trans "Region ID" %}</th>
|
|
<th>{% trans "Widget ID" %}</th>
|
|
<th>{% trans "Media ID" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="widget">
|
|
<div class="widget-title">{% trans "Dependencies" %}</div>
|
|
<div class="widget-body medium no-padding">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>{% trans "Name" %}</th>
|
|
<th>{% trans "Type" %}</th>
|
|
<th>{% trans "Complete" %}</th>
|
|
<th>{% trans "Downloaded" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for item in inventory.dependencies %}
|
|
<tr>
|
|
<td>{{ item.path }}</td>
|
|
<td>{{ item.fileType }}</td>
|
|
<td>
|
|
<span class="fa {% if item.complete == 1 %}fa-check{% else %}fa-download{% endif %}"></span>
|
|
</td>
|
|
<td>{{ item.bytesRequested|byteFormat }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="widget">
|
|
<div class="widget-title">{% trans "Layouts" %}</div>
|
|
<div class="widget-body medium no-padding">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>{% trans "ID" %}</th>
|
|
<th>{% trans "Name" %}</th>
|
|
<th>{% trans "Size" %}</th>
|
|
<th>{% trans "Complete" %}</th>
|
|
<th>{% trans "Downloaded" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for item in inventory.layouts %}
|
|
<tr>
|
|
<td>{{ item.itemId }}</td>
|
|
<td>{{ item.layout }}</td>
|
|
<td>{{ item.size|byteFormat }}</td>
|
|
<td>
|
|
<span class="fa {% if item.complete == 1 %}fa-check{% else %}fa-download{% endif %}"></span>
|
|
</td>
|
|
<td>{{ item.bytesRequested|byteFormat }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="widget">
|
|
<div class="widget-title">
|
|
{% trans "Media" %}
|
|
</div>
|
|
<div class="widget-body medium no-padding">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>{% trans "ID" %}</th>
|
|
<th>{% trans "Name" %}</th>
|
|
<th>{% trans "Type" %}</th>
|
|
<th>{% trans "File Name" %}</th>
|
|
<th>{% trans "Size" %}</th>
|
|
<th>{% trans "Complete" %}</th>
|
|
<th>{% trans "Downloaded" %}</th>
|
|
<th>{% trans "Released" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for item in inventory.media %}
|
|
<tr>
|
|
<td>{{ item.itemId }}</td>
|
|
<td>{{ item.name }}</td>
|
|
<td>{{ item.type }}</td>
|
|
<td>{{ item.storedAs }}</td>
|
|
<td>{{ item.size|byteFormat }}</td>
|
|
<td title="{% if item.lastUsed == 0 %}{{ nonceNotUsed }}{% else %}{{ nonceUsed }}{% endif %}">
|
|
<span class="fa {% if item.complete == 1 %}fa-check{% else %}fa-download{% endif %}"></span>
|
|
</td>
|
|
<td>{{ item.bytesRequested|byteFormat }}</td>
|
|
<td>
|
|
<span class="fa {% if item.released == 1 %}fa-check{% elseif item.released == 0 %}fa-cogs{% elseif item.released == 2 %}fa-times{% endif %}"></span>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="widget">
|
|
<div class="widget-title">{% trans "Widgets" %}</div>
|
|
<div class="widget-body medium no-padding">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>{% trans "ID" %}</th>
|
|
<th>{% trans "Name" %}</th>
|
|
<th>{% trans "Complete" %}</th>
|
|
<th>{% trans "Downloaded" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for item in inventory.widgets %}
|
|
<tr>
|
|
<td>{{ item.itemId }}</td>
|
|
<td>{% if item.widgetName %}{{ item.widgetName }}{% else %}{{ item.widgetType }}{% endif %}</td>
|
|
<td title="{% if item.lastUsed == 0 %}{{ nonceNotUsed }}{% else %}{{ nonceUsed }}{% endif %}">
|
|
<span class="fa {% if item.complete == 1 %}fa-check{% else %}fa-download{% endif %}"></span>
|
|
</td>
|
|
<td>{{ item.bytesRequested|byteFormat }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="widget">
|
|
<div class="widget-title">{% trans "Widget Data" %}</div>
|
|
<div class="widget-body medium no-padding">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>{% trans "ID" %}</th>
|
|
<th>{% trans "Name" %}</th>
|
|
<th>{% trans "Downloaded" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for item in inventory.widgetData %}
|
|
<tr>
|
|
<td>{{ item.widgetId }}</td>
|
|
<td>{% if item.widgetName %}{{ item.widgetName }}{% else %}{{ item.widgetType }}{% endif %}</td>
|
|
<td>{{ item.bytesRequested|byteFormat }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% if currentUser.featureEnabled("displays.reporting") %}
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="widget">
|
|
<div class="widget-title">{% trans "Bandwidth" %}</div>
|
|
<div class="widget-body">
|
|
<div class="XiboGrid" id="{{ random() }}">
|
|
<div class="XiboFilter">
|
|
<div class="FilterDiv card-body" id="bandwidthFilter">
|
|
<form class="form-inline">
|
|
{{ inline.dateMonth("fromDt", "From Date", defaults.fromDate, "", "", "", "") }}
|
|
{{ inline.dateMonth("toDt", "To Date", defaults.toDate, "", "", "", "") }}
|
|
{{ inline.hidden("displayId", display.displayId) }}
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="XiboData">
|
|
<canvas id="bandwidthChart" style="clear:both; margin-top:25px;" height="330"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block javaScript %}
|
|
<script type="text/javascript" nonce="{{ cspNonce }}">
|
|
|
|
$(document).ready(function() {
|
|
const $playerFaults = $('#playerFaults');
|
|
if ($playerFaults.length < 0) {
|
|
return;
|
|
}
|
|
var table = $playerFaults.DataTable({
|
|
language: dataTablesLanguage,
|
|
dom: dataTablesTemplate,
|
|
serverSide: true, stateSave: true, stateDuration: 0,
|
|
stateLoadCallback: dataTableStateLoadCallback,
|
|
stateSaveCallback: dataTableStateSaveCallback,
|
|
filter: false,
|
|
responsive: true,
|
|
searchDelay: 3000,
|
|
order: [[2, "desc"]],
|
|
ajax: {
|
|
url: $playerFaults.data().url,
|
|
},
|
|
"columns": [
|
|
{"data": "code", responsivePriority: 1, className: 'all'},
|
|
{"data": "reason", responsivePriority: 1, className: 'all'},
|
|
{"data": "incidentDt", responsivePriority: 1, className: 'all'},
|
|
{"data": "expires", responsivePriority: 1, className: 'all'},
|
|
{"data": "scheduleId", responsivePriority: 99, className: 'none'},
|
|
{"data": "layoutId", responsivePriority: 99, className: 'none'},
|
|
{"data": "regionId", responsivePriority: 99, className: 'none'},
|
|
{"data": "widgetId", responsivePriority: 99, className: 'none'},
|
|
{"data": "mediaId", responsivePriority: 99, className: 'none'}
|
|
]
|
|
});
|
|
|
|
table.on('draw', dataTableDraw);
|
|
table.on('processing.dt', dataTableProcessing);
|
|
|
|
$("#refreshLog").click(function () {
|
|
table.ajax.reload();
|
|
});
|
|
});
|
|
|
|
var bandwidthChart = null;
|
|
|
|
function setBandwidthChart() {
|
|
$.ajax({
|
|
type: "get",
|
|
url: "{{ url_for("stats.bandwidth.data") }}",
|
|
cache: false,
|
|
dataType: "json",
|
|
data: $("#bandwidthFilter").find("form").serialize(),
|
|
success: function(response) {
|
|
if (bandwidthChart !== undefined && bandwidthChart !== null) {
|
|
bandwidthChart.destroy();
|
|
}
|
|
|
|
if (response.extra.data.length <= 0) {
|
|
return;
|
|
}
|
|
|
|
// Create our chart
|
|
bandwidthChart = new Chart($("#bandwidthChart"), {
|
|
type: "bar",
|
|
data: {
|
|
labels: response.extra.labels,
|
|
datasets: [{
|
|
label: "{% trans "Bandwidth" %}",
|
|
backgroundColor: "rgb(11, 98, 164)",
|
|
data: response.extra.data
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
yAxes: [{
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: response.extra.postUnits,
|
|
}
|
|
}]
|
|
},
|
|
legend: {
|
|
display: false
|
|
},
|
|
maintainAspectRatio: false,
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
|
|
{% if currentUser.featureEnabled("displays.reporting") %}
|
|
setBandwidthChart();
|
|
|
|
// Bind to form change
|
|
$("#bandwidthFilter input, #bandwidthFilter select").change(function() {
|
|
setBandwidthChart();
|
|
});
|
|
{% endif %}
|
|
|
|
// Find all Unix Dates and sort them out
|
|
$("span.unixDate").each(function() {
|
|
$(this).html(moment($(this).html(), "X").format(jsDateFormat));
|
|
});
|
|
|
|
// Find all ISO Dates and sort them out
|
|
$("span.isoDate").each(function() {
|
|
$(this).html(moment($(this).html()).format(jsDateFormat));
|
|
});
|
|
|
|
// Handle the Pie chart for download status
|
|
var downloadedCountPie = new Chart($("#downloadedCountPie"), {
|
|
type: 'pie',
|
|
data: {
|
|
datasets: [{
|
|
data: [{{ status.countComplete }}, {{ status.countRemaining }}],
|
|
backgroundColor: ["#00CC00", "#FF0000"]
|
|
}],
|
|
labels: [
|
|
"{% trans "Downloaded" %}", "{% trans "Pending" %}"
|
|
]
|
|
}
|
|
});
|
|
|
|
var downloadedSizePie = new Chart($("#downloadedSizePie"), {
|
|
type: 'pie',
|
|
data: {
|
|
datasets: [{
|
|
data: [{{ status.sizeComplete }}, {{ status.sizeRemaining }}],
|
|
backgroundColor: ["#00CC00", "#FF0000"]
|
|
}],
|
|
labels: [
|
|
"{% trans "Downloaded" %}" + " {{ status.units }}", "{% trans "Pending" %}" + " {{ status.units }}"
|
|
]
|
|
},
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|