151 lines
4.1 KiB
HTML
151 lines
4.1 KiB
HTML
{{define "admin_panel"}}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
{{template "meta_tags" "Administrator panel"}}
|
|
{{template "user_style" .}}
|
|
</head>
|
|
<body>
|
|
{{$isAdmin := .PixelAPI.UserIsAdmin}}
|
|
{{template "page_top" .}}
|
|
<div class="page_content">
|
|
{{if $isAdmin.IsAdmin}}
|
|
<h3>Bandwidth and views</h3>
|
|
<div class="highlight_dark">
|
|
<button onclick="days = 7; interval = 60; setData();">Week</button>
|
|
<button onclick="days = 14; interval = 60; setData();">Two Weeks</button>
|
|
<button onclick="days = 21; interval = 60; setData();">Three Weeks</button>
|
|
<button onclick="days = 30; interval = 1440; setData();">Month</button>
|
|
<button onclick="days = 60; interval = 1440; setData();">Two Months</button>
|
|
<button onclick="days = 91; interval = 1440; setData();">Quarter</button>
|
|
<button onclick="days = 182; interval = 1440; setData();">Half-year</button>
|
|
<button onclick="days = 365; interval = 1440; setData();">Year</button>
|
|
</div>
|
|
<div id="chart_container" class="chart-container" style="position: relative; width: 100%; height: auto;">
|
|
<canvas id="bandwidth_chart"></canvas>
|
|
</div>
|
|
|
|
<script src="/res/script/Chart.min.js"></script>
|
|
<script>
|
|
var apiEndpoint = '{{.APIEndpoint}}';
|
|
|
|
{{template `util.js`}}
|
|
|
|
Chart.defaults.global.defaultFontColor = "#b3b3b3";
|
|
Chart.defaults.global.defaultFontSize = 15;
|
|
Chart.defaults.global.defaultFontFamily = "Ubuntu";
|
|
Chart.defaults.global.aspectRatio = 2.5;
|
|
Chart.defaults.global.elements.point.radius = 0;
|
|
Chart.defaults.global.tooltips.mode = "index";
|
|
Chart.defaults.global.tooltips.axis = "x";
|
|
Chart.defaults.global.tooltips.intersect = false;
|
|
|
|
var days = 7;
|
|
var interval = 60;
|
|
var graph = new Chart(
|
|
document.getElementById('bandwidth_chart'),
|
|
{
|
|
type: 'line',
|
|
data: {
|
|
datasets: [
|
|
{
|
|
label: "Bandwidth",
|
|
backgroundColor: "rgba(64, 255, 64, .05)",
|
|
borderColor: "rgba(128, 255, 128, 1)",
|
|
borderWidth: 1.5,
|
|
lineTension: 0.1,
|
|
fill: true,
|
|
yAxisID: "y_bandwidth"
|
|
}, {
|
|
label: "Views",
|
|
backgroundColor: "rgba(64, 64, 255, .1)",
|
|
borderColor: "rgba(128, 128, 255, 1)",
|
|
borderWidth: 1.5,
|
|
lineTension: 0.1,
|
|
fill: true,
|
|
yAxisID: "y_views"
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
scales: {
|
|
yAxes: [
|
|
{
|
|
type: "linear",
|
|
display: true,
|
|
position: "left",
|
|
id: "y_bandwidth",
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: "Bandwidth"
|
|
},
|
|
ticks: {
|
|
callback: function(value, index, values) {
|
|
return formatDataVolume(value, 3);
|
|
}
|
|
},
|
|
gridLines: {
|
|
color: "rgba(100, 255, 100, .1)"
|
|
}
|
|
}, {
|
|
type: "linear",
|
|
display: true,
|
|
position: "right",
|
|
id: "y_views",
|
|
scaleLabel: {
|
|
display: true,
|
|
labelString: "Views"
|
|
},
|
|
gridLines: {
|
|
color: "rgba(128, 128, 255, .2)"
|
|
}
|
|
}
|
|
],
|
|
xAxes: [
|
|
{
|
|
ticks: {
|
|
maxRotation: 20
|
|
},
|
|
gridLines: {
|
|
display: false
|
|
}
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
);
|
|
|
|
function setData(){
|
|
fetch(apiEndpoint+"/admin/files/timeseries?days="+days+"&interval="+interval).then(resp => {
|
|
if (!resp.ok) { return Promise.reject("Error: "+resp.status);}
|
|
return resp.json();
|
|
}).then(resp => {
|
|
if (resp.success) {
|
|
window.graph.data.labels = resp.labels;
|
|
window.graph.data.datasets[0].data = resp.downloads;
|
|
window.graph.data.datasets[1].data = resp.views;
|
|
window.graph.update();
|
|
}
|
|
}).catch(e => {
|
|
alert("Error requesting time series: "+e);
|
|
})
|
|
}
|
|
|
|
setData();
|
|
</script>
|
|
|
|
<hr/>
|
|
<div class="limit_width">
|
|
<a href="/admin/globals">Update global settings</a>
|
|
</div>
|
|
{{else}}
|
|
<h1 style="text-align: center;">;)</h1>
|
|
{{end}}
|
|
</div>
|
|
{{template "page_bottom" .}}
|
|
</div>
|
|
</body>
|
|
</html>
|
|
{{end}}
|