Subversion Repositories ALCASAR

Compare Revisions

Ignore whitespace Rev 2808 → Rev 2809

/web/acc/manager/vnstat/templates/module_footer.tpl
0,0 → 1,12
<footer class="footer">
<div class="container">
<span class="text-muted">Generated by 'vnstat-dashboard'
</span>
</div>
</footer>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
{include file="module_graph_js.tpl"}
</body>
</html>
/web/acc/manager/vnstat/templates/module_footer.tpl.orig
0,0 → 1,16
<footer class="footer">
<div class="container">
<span class="text-muted">Copyright (C) {$year} Alexander Marston -
<a href="https://github.com/alexandermarston/vnstat-dashboard">vnstat-dashboard</a>
</span>
</div>
</footer>
 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
{include file="module_graph_js.tpl"}
 
</body>
 
</html>
/web/acc/manager/vnstat/templates/module_graph.tpl
0,0 → 1,27
<div class="container">
<ul class="nav nav-tabs" id="graphTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="hourly-graph-tab" data-toggle="tab" href="#hourly-graph" role="tab" aria-controls="hourly-graph" aria-selected="true">Hourly Graph</a>
</li>
<li class="nav-item">
<a class="nav-link" id="daily-graph-tab" data-toggle="tab" href="#daily-graph" role="tab" aria-controls="daily-graph" aria-selected="false">Daily Graph</a>
</li>
<li class="nav-item">
<a class="nav-link" id="monthly-graph-tab" data-toggle="tab" href="#monthly-graph" role="tab" aria-controls="monthly-graph" aria-selected="false">Monthly Graph</a>
</li>
</ul>
 
<div class="tab-content">
<div class="tab-pane fade show active" id="hourly-graph" role="tabpanel" aria-labelledby="hourly-graph-tab">
<div id="hourlyNetworkTrafficGraph" style="height: 300px;"></div>
</div>
 
<div class="tab-pane fade" id="daily-graph" role="tabpanel" aria-labelledby="daily-graph-tab">
<div id="dailyNetworkTrafficGraph" style="height: 300px;"></div>
</div>
 
<div class="tab-pane fade" id="monthly-graph" role="tabpanel" aria-labelledby="monthly-graph-tab">
<div id="monthlyNetworkTrafficGraph" style="height: 300px;"></div>
</div>
</div>
</div>
/web/acc/manager/vnstat/templates/module_graph_js.tpl
0,0 → 1,154
<script type="text/javascript">
google.charts.load('current', { packages: [ 'bar' ] });
google.charts.load("current", { packages: [ 'corechart' ] });
google.charts.setOnLoadCallback(drawHourlyChart);
google.charts.setOnLoadCallback(drawDailyChart);
google.charts.setOnLoadCallback(drawMonthlyChart);
 
function drawHourlyChart()
{
var data = new google.visualization.DataTable();
 
data.addColumn('date', 'Hour');
data.addColumn('number', 'Traffic In');
data.addColumn('number', 'Traffic Out');
data.addColumn('number', 'Total Traffic');
 
data.addRows([
{foreach from=$hourlyGraphData key=key item=value}
[new {$value.label}, {$value.rx}, {$value.tx}, {$value.total}],
{/foreach}
]);
 
let options = {
title: 'Hourly Network Traffic',
orientation: 'horizontal',
legend: { position: 'right' },
explorer: {
axis: 'horizontal',
maxZoomIn: 4.0,
maxZoomOut: 3.0
},
vAxis: {
title: 'Data',
format: '##.## {$hourlyLargestPrefix}'
},
hAxis: {
title: 'Hour',
format: 'HH:mm',
direction: -1,
ticks: [
{foreach from=$hourlyGraphData key=key item=value}
new {$value.label},
{/foreach}
]
}
};
var formatDate = new google.visualization.DateFormat({ pattern: 'dd/MM/yyyy HH:mm' });
formatDate.format(data, 0);
var formatNumber = new google.visualization.NumberFormat({ pattern: '##.## {$hourlyLargestPrefix}' });
formatNumber.format(data, 1);
formatNumber.format(data, 2);
formatNumber.format(data, 3);
 
let chart = new google.visualization.BarChart(document.getElementById('hourlyNetworkTrafficGraph'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
 
function drawDailyChart()
{
var data = new google.visualization.DataTable();
 
data.addColumn('date', 'Day');
data.addColumn('number', 'Traffic In');
data.addColumn('number', 'Traffic Out');
data.addColumn('number', 'Total Traffic');
 
data.addRows([
{foreach from=$dailyGraphData key=key item=value}
[new {$value.label}, {$value.rx}, {$value.tx}, {$value.total}],
{/foreach}
]);
let options = {
title: 'Daily Network Traffic',
orientation: 'horizontal',
legend: { position: 'right' },
explorer: {
axis: 'horizontal',
maxZoomIn: 4.0,
maxZoomOut: 3.0
},
vAxis: {
title: 'Data',
format: '##.## {$dailyLargestPrefix}'
},
hAxis: {
title: 'Day',
format: 'dd/MM/YYYY',
direction: -1
}
};
var formatDate = new google.visualization.DateFormat({ pattern: 'dd/MM/yyyy' });
formatDate.format(data, 0);
var formatNumber = new google.visualization.NumberFormat({ pattern: '##.## {$dailyLargestPrefix}' });
formatNumber.format(data, 1);
formatNumber.format(data, 2);
formatNumber.format(data, 3);
 
let chart = new google.visualization.BarChart(document.getElementById('dailyNetworkTrafficGraph'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
 
function drawMonthlyChart()
{
var data = new google.visualization.DataTable();
 
data.addColumn('date', 'Month');
data.addColumn('number', 'Traffic In');
data.addColumn('number', 'Traffic Out');
data.addColumn('number', 'Total Traffic');
 
data.addRows([
{foreach from=$monthlyGraphData key=key item=value}
[new {$value.label}, {$value.rx}, {$value.tx}, {$value.total}],
{/foreach}
]);
 
let options = {
title: 'Monthly Network Traffic',
orientation: 'horizontal',
legend: { position: 'right' },
explorer: {
axis: 'horizontal',
maxZoomIn: 4.0,
maxZoomOut: 3.0
},
vAxis: {
title: 'Data',
format: '##.## {$monthlyLargestPrefix}'
},
hAxis: {
title: 'Month',
format: 'MMMM YYYY',
direction: -1
}
};
var formatDate = new google.visualization.DateFormat({ pattern: 'MMMM YYYY' });
formatDate.format(data, 0);
var formatNumber = new google.visualization.NumberFormat({ pattern: '##.## {$monthlyLargestPrefix}' });
formatNumber.format(data, 1);
formatNumber.format(data, 2);
formatNumber.format(data, 3);
 
let chart = new google.visualization.BarChart(document.getElementById('monthlyNetworkTrafficGraph'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
/web/acc/manager/vnstat/templates/module_header.tpl
0,0 → 1,12
<!DOCTYPE html>
<html lang="en">
<head>
<title>Network Traffic</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
/web/acc/manager/vnstat/templates/module_header.tpl.orig
0,0 → 1,33
<!DOCTYPE html>
<html lang="en">
<head>
<title>Network Traffic</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
<!-- Custom CSS -->
<link rel="stylesheet" href="./assets/css/style.css">
 
</head>
 
<body>
<nav class="navbar sticky-top navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Network Traffic ({$current_interface})</a>
 
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Interface Selection
</button>
 
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
{foreach from=$interface_list item=value}
<a class="dropdown-item" href="?i={$value}">{$value}</a>
{/foreach}
</div>
</div>
</div>
</nav>
/web/acc/manager/vnstat/templates/module_table.tpl
0,0 → 1,110
<div class="container">
<ul class="nav nav-tabs" id="tableTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="hourly-table-tab" data-toggle="tab" href="#hourly-table" role="tab" aria-controls="hourly-table" aria-selected="true">Hourly</a>
</li>
<li class="nav-item">
<a class="nav-link" id="daily-table-tab" data-toggle="tab" href="#daily-table" role="tab" aria-controls="daily-table" aria-selected="false">Daily</a>
</li>
<li class="nav-item">
<a class="nav-link" id="monthly-table-tab" data-toggle="tab" href="#monthly-table" role="tab" aria-controls="monthly-table" aria-selected="false">Monthly</a>
</li>
<li class="nav-item">
<a class="nav-link" id="top10-table-tab" data-toggle="tab" href="#top10-table" role="tab" aria-controls="top10-table" aria-selected="false">Top 10</a>
</li>
</ul>
 
<div class="tab-content" id="tableTabContent">
<div class="tab-pane fade show active" id="hourly-table" role="tabpanel" aria-labelledby="hourly-table-tab">
<table class="table table-bordered">
<thead>
<tr>
<th>Hour</th>
<th>Received</th>
<th>Sent</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{foreach from=$hourlyTableData key=key item=value}
<tr>
<td>{$value.label}</td>
<td>{$value.rx}</td>
<td>{$value.tx}</td>
<td>{$value.total}</td>
</tr>
{/foreach}
</tbody>
</table>
</div>
 
<div class="tab-pane fade" id="daily-table" role="tabpanel" aria-labelledby="daily-table-tab">
<table class="table table-bordered">
<thead>
<tr>
<th>Day</th>
<th>Received</th>
<th>Sent</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{foreach from=$dailyTableData key=key item=value}
<tr>
<td>{$value.label}</td>
<td>{$value.rx}</td>
<td>{$value.tx}</td>
<td>{$value.total}</td>
</tr>
{/foreach}
</tbody>
</table>
</div>
 
<div class="tab-pane fade" id="monthly-table" role="tabpanel" aria-labelledby="monthly-table-tab">
<table class="table table-bordered">
<thead>
<tr>
<th>Month</th>
<th>Received</th>
<th>Sent</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{foreach from=$monthlyTableData key=key item=value}
<tr>
<td>{$value.label}</td>
<td>{$value.rx}</td>
<td>{$value.tx}</td>
<td>{$value.total}</td>
</tr>
{/foreach}
</tbody>
</table>
</div>
 
<div class="tab-pane fade" id="top10-table" role="tabpanel" aria-labelledby="top10-table-tab">
<table class="table table-bordered">
<thead>
<tr>
<th>Day</th>
<th>Received</th>
<th>Sent</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{foreach from=$top10TableData key=key item=value}
<tr>
<td>{$value.label}</td>
<td>{$value.rx}</td>
<td>{$value.tx}</td>
<td>{$value.total}</td>
</tr>
{/foreach}
</tbody>
</table>
</div>
</div>
</div>
/web/acc/manager/vnstat/templates/site_index.tpl
0,0 → 1,7
{include file="module_header.tpl"}
 
{include file="module_graph.tpl"}
 
{include file="module_table.tpl"}
 
{include file="module_footer.tpl"}