Added files website
Signed-off-by: dehaandirk
This commit is contained in:
dehaandirk
commit
38efb5b94a
45 changed files with 39665 additions and 0 deletions
137
scripts/chart.js
Normal file
137
scripts/chart.js
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
var destroy = [];
|
||||
|
||||
function loadChart() {
|
||||
var charts = document.getElementsByTagName('chart');
|
||||
for (var i = 0; i < charts.length; i++) {
|
||||
var chart = charts[i];
|
||||
destroy.push(getGraph(chart, chart.getAttribute('label'), chart.getAttribute('unit'), chart.getAttribute('attr'), Number(chart.getAttribute('min')), Number(chart.getAttribute('max')), chart.getAttribute('meter-source')));
|
||||
}
|
||||
}
|
||||
|
||||
function destroyChart() {
|
||||
for (var i = 0; i < destroy.length; i++) {
|
||||
if (destroy[i] == null) continue;
|
||||
destroy[i]();
|
||||
}
|
||||
destroy = [];
|
||||
}
|
||||
|
||||
function getGraph(ctx, title, unit, attribute, min, max, meterSource) {
|
||||
if (attribute == undefined) return null;
|
||||
var hours= Number(document.getElementById("hours").value);
|
||||
var meter= document.getElementById(meterSource).value;
|
||||
if (meter == 0) return;
|
||||
|
||||
var labels = [];
|
||||
var p = [null, [], [], []];
|
||||
var n = [];
|
||||
|
||||
var chart = Highcharts.chart(ctx, {
|
||||
colors: ['#C55', '#5C5', '#55C', '#555'],
|
||||
chart: {
|
||||
zoomType: 'x',
|
||||
animation: false,
|
||||
},
|
||||
title: {
|
||||
text: title
|
||||
},
|
||||
xAxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
yAxis: {
|
||||
softMin: min,
|
||||
softMax: max,
|
||||
title: {
|
||||
text: unit
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
enabled: true
|
||||
},
|
||||
tooltip: {
|
||||
shared: true
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
marker: {
|
||||
radius: 0
|
||||
},
|
||||
lineWidth: 2,
|
||||
states: {
|
||||
hover: {
|
||||
lineWidth:2
|
||||
}
|
||||
},
|
||||
animation: false
|
||||
}
|
||||
}
|
||||
});
|
||||
var init = false;
|
||||
var start = new Date(Date.now()-1000*60*60*hours)
|
||||
var timeout;
|
||||
var updateGraphData = function() {
|
||||
fetch('https://5groningen02.housing.rug.nl/api/pq/'+meter+'/'+attribute+'/'+start.toISOString())
|
||||
.then(function (response) {
|
||||
if (response.status != 200) return new Promise((resolve) => { resolve([]); });
|
||||
return response.json()
|
||||
})
|
||||
.then(function (data) {
|
||||
if (data == null) {
|
||||
if (hours <= 24) timeout = setTimeout(updateGraphData, 1000);
|
||||
return
|
||||
}
|
||||
|
||||
if (!init) {
|
||||
init = true
|
||||
|
||||
chart.addSeries({type: 'line', name: 'Phase 1', data: []});
|
||||
chart.addSeries({type: 'line', name: 'Phase 2', data: []});
|
||||
chart.addSeries({type: 'line', name: 'Phase 3', data: []});
|
||||
|
||||
if (data[0].null != null) chart.addSeries({type: 'line', name: 'Null', data: [], visible: false});
|
||||
}
|
||||
|
||||
data.reverse();
|
||||
data.forEach(function(item) {
|
||||
var t = formatTime(item.time);
|
||||
if ((p[1].length > 0) && (p[1][0][0] < t-(hours*60*60*1000))) {
|
||||
p[1].shift(); p[2].shift(); p[3].shift(); n.shift();
|
||||
}
|
||||
|
||||
p[1].push([t, item.phase_1]);
|
||||
p[2].push([t, item.phase_2]);
|
||||
p[3].push([t, item.phase_3]);
|
||||
|
||||
if (item.null != null) n.push([t, item.null]);
|
||||
|
||||
start = new Date(new Date(item.time).getTime()+1000);
|
||||
});
|
||||
chart.series[0].setData(p[1]);
|
||||
chart.series[1].setData(p[2]);
|
||||
chart.series[2].setData(p[3]);
|
||||
if (chart.series.length == 4) chart.series[3].setData(n);
|
||||
|
||||
chart.update({}, true);
|
||||
|
||||
if (hours <= 24) timeout = setTimeout(updateGraphData, 1000);
|
||||
})
|
||||
}
|
||||
|
||||
updateGraphData();
|
||||
|
||||
return function() {
|
||||
clearTimeout(timeout);
|
||||
chart.destroy();
|
||||
}
|
||||
}
|
||||
|
||||
function formatTime(t) {
|
||||
var d = new Date(t)
|
||||
return d-0+2*60*60*1000
|
||||
}
|
||||
|
||||
Number.prototype.pad = function(size) {
|
||||
var s = String(this);
|
||||
while (s.length < (size || 2)) {s = "0" + s;}
|
||||
return s;
|
||||
}
|
||||
38086
scripts/highcharts-custom.src.js
Normal file
38086
scripts/highcharts-custom.src.js
Normal file
File diff suppressed because it is too large
Load diff
97
scripts/loadgraphs.js
Normal file
97
scripts/loadgraphs.js
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
function double() {
|
||||
if (document.getElementById("meter1") == undefined) return null;
|
||||
var element2 = document.getElementById("left");
|
||||
var element = document.getElementById("right");
|
||||
|
||||
if (document.getElementById("meter2").value == "0") {
|
||||
element.style.display = "none";
|
||||
element2.className = "box_full";
|
||||
destroyChart(); loadChart();
|
||||
}
|
||||
else {
|
||||
element.style.display = "block";
|
||||
element2.className = "box";
|
||||
destroyChart(); loadChart();
|
||||
}
|
||||
}
|
||||
|
||||
function loadMeters() {
|
||||
if (document.getElementById("meter1") == undefined) return null;
|
||||
var text = "";
|
||||
|
||||
fetch('https://5groningen02.housing.rug.nl/api/pq/meters')
|
||||
.then(function (response) {
|
||||
if (response.status != 200) return new Promise((resolve) => { resolve([]); });
|
||||
return response.json()
|
||||
})
|
||||
.then(function (data) {
|
||||
if (data == null) return;
|
||||
var name = "";
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (data[i]["name"] == ""){name= 'new';} else {name = data[i]["name"];}
|
||||
text = text + '<option value="' + data[i]["id"] + '">' + name + '</option>';
|
||||
}
|
||||
if (document.getElementById("meter1") != undefined){
|
||||
document.getElementById("meter1").innerHTML = text;
|
||||
}
|
||||
if (document.getElementById("meter2")!= undefined){
|
||||
document.getElementById("meter2").innerHTML = '<option value="0" selected>Geen</option>' + text;
|
||||
}
|
||||
if (document.getElementById("meter1") && document.getElementById("meter2") != undefined){
|
||||
double();
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function loadPowerQualityOptions() {
|
||||
if (document.getElementById("buttons") == undefined) return null;
|
||||
var text = "";
|
||||
|
||||
fetch('https://5groningen02.housing.rug.nl/api/pq/list')
|
||||
.then(function (response) {
|
||||
if (response.status != 200) return new Promise((resolve) => { resolve([]); });
|
||||
return response.json()
|
||||
})
|
||||
.then(function (data) {
|
||||
if (data == null) return;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
text = text + '<label><input onclick="Hidediv()" type="checkbox" name="'+ data[i] + '" value="'+ data[i] + '"><b>'+ data[i] + '</B></label>'
|
||||
}
|
||||
if (document.getElementById("buttons") != undefined){
|
||||
document.getElementById("buttons").innerHTML = text;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var mapping = {
|
||||
'ugem': {label:'Voltage (Gemiddelde)', unit: 'Volt', min:'220', max:'240'},
|
||||
'igem': {label:'Ampère (Gemiddelde)', unit: 'Ampère', min:'', max:''},
|
||||
'imax': {label:'Ampère (max-piek)', unit: 'Ampère', min:'', max:''},
|
||||
'pmax': {label:'Werkelijkvermogen (max-piek)', unit: 'Watt', min:'', max:''},
|
||||
'smax': {label:'Schijnbaarvermogen (max-piek)', unit: 'VoltAmpère', min:'', max:''},
|
||||
'cgem': {label:'Cos-Phi (Gemiddelde)', unit: 'Cos-Phi', min:'', max:''},
|
||||
'ep': {label:'EP', unit: 'EP', min:'', max:''},
|
||||
};
|
||||
|
||||
function Hidediv() {
|
||||
if (document.getElementById("buttons") == undefined) return null;
|
||||
var div_left = "";
|
||||
var div_right = "";
|
||||
|
||||
document.querySelectorAll("#buttons label input").forEach(function (i) {
|
||||
if (i.checked == true){
|
||||
var opts = mapping[i.name] || {};
|
||||
div_left = div_left + '<div class="box_full"><chart meter-source="meter1" attr="'+ i.name +'" label="'+ (opts.label || i.name) +'" unit="'+ (opts.unit || i.name) +'" min="'+ (opts.min) +'" max="'+ (opts.max) +'"></chart></div>'
|
||||
div_right = div_right + '<div class="box_full"><chart meter-source="meter2" attr="'+ i.name +'" label="'+ (opts.label || i.name) +'" unit="'+ (opts.unit || i.name) +'" min="'+ (opts.min) +'" max="'+ (opts.max) +'"></chart></div>'
|
||||
}
|
||||
})
|
||||
|
||||
if (document.getElementById("left") != undefined){
|
||||
document.getElementById("left").innerHTML = div_left;
|
||||
destroyChart(); loadChart();
|
||||
}
|
||||
if (document.getElementById("right") != undefined){
|
||||
document.getElementById("right").innerHTML = div_right;
|
||||
destroyChart(); loadChart();
|
||||
}
|
||||
}
|
||||
38
scripts/meters.js
Normal file
38
scripts/meters.js
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
var destroyMeters = [];
|
||||
|
||||
function loadMeters() {
|
||||
var meters = document.getElementsByTagName('meter');
|
||||
for (var i = 0; i < meters.length; i++) {
|
||||
var meter = meters[i];
|
||||
destroy.push(getMeters(meter, Number.parseInt(meter.getAttribute('phase'))-1, meter.getAttribute('type')));
|
||||
}
|
||||
}
|
||||
|
||||
function destroyMeters() {
|
||||
for (var i = 0; i < destroyMeters.length; i++) {
|
||||
if (destroyMeters[i] == null) continue;
|
||||
destroyMeters[i]();
|
||||
}
|
||||
destroyMeters = [];
|
||||
}
|
||||
|
||||
function getMeters(ctx, phase, type) {
|
||||
var updateMeters = function() {
|
||||
fetch('https://5groningen02.housing.rug.nl/api/pq/meters')
|
||||
.then(function (response) {
|
||||
if (response.status != 200) return new Promise((resolve) => { resolve([]); });
|
||||
return response.json()
|
||||
})
|
||||
.then(function (data) {
|
||||
if (data == null) return;
|
||||
|
||||
var value = data
|
||||
|
||||
ctx.className = value;
|
||||
var text = value.toFixed(1);
|
||||
ctx.innerText = text;
|
||||
})
|
||||
}
|
||||
|
||||
return function()
|
||||
}
|
||||
56
scripts/smiley.js
Normal file
56
scripts/smiley.js
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
var destroy = [];
|
||||
|
||||
function loadSmiley() {
|
||||
var smileys = document.getElementsByTagName('smiley');
|
||||
for (var i = 0; i < smileys.length; i++) {
|
||||
var smiley = smileys[i];
|
||||
destroy.push(getSmiley(smiley, Number.parseInt(smiley.getAttribute('phase'))-1, smiley.getAttribute('type')));
|
||||
}
|
||||
}
|
||||
|
||||
function destroySmiley() {
|
||||
for (var i = 0; i < destroy.length; i++) {
|
||||
if (destroy[i] == null) continue;
|
||||
destroy[i]();
|
||||
}
|
||||
destroy = [];
|
||||
}
|
||||
|
||||
function getSmiley(ctx, phase, type) {
|
||||
if (type == undefined) return null;
|
||||
var meter=document.getElementById("meter1").value;
|
||||
|
||||
var updateSmiley = function() {
|
||||
fetch('https://5groningen02.housing.rug.nl/api/trading/'+meter+'/scores')
|
||||
.then(function (response) {
|
||||
if (response.status != 200) return new Promise((resolve) => { resolve([]); });
|
||||
return response.json()
|
||||
})
|
||||
.then(function (data) {
|
||||
if (data == null) return;
|
||||
|
||||
var value = data[phase][type]
|
||||
var c = 'neutral'
|
||||
if (value >= 1) {
|
||||
c = 'positive'
|
||||
}
|
||||
else if (value <= -1) {
|
||||
c = 'negative'
|
||||
}
|
||||
|
||||
ctx.className = c;
|
||||
var text = value.toFixed(1);
|
||||
if (text == "-0.0") text = "0.0";
|
||||
ctx.innerText = text;
|
||||
})
|
||||
}
|
||||
|
||||
updateSmiley();
|
||||
var interval = setInterval(function() {
|
||||
updateSmiley();
|
||||
}, 5000)
|
||||
|
||||
return function() {
|
||||
clearInterval(interval);
|
||||
}
|
||||
}
|
||||
131
scripts/topnav.js
Normal file
131
scripts/topnav.js
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
/* menu dropdown (mobile) */
|
||||
function myFunction() {
|
||||
var x = document.getElementById("Topnav");
|
||||
if (x.className === "topnav") {
|
||||
x.className += " responsive";
|
||||
} else {
|
||||
x.className = "topnav";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Topnav */
|
||||
function changeLinks() {
|
||||
var links = document.getElementById('Topnav').getElementsByTagName('a');
|
||||
|
||||
for (var i = 0; i < links.length; i++) {
|
||||
if (links[i].className == 'icon') continue;
|
||||
links[i].addEventListener('click', load, false);
|
||||
}
|
||||
};
|
||||
|
||||
function load(e) {
|
||||
if (e.which != 1) return;
|
||||
var target = e.target;
|
||||
while (target.nodeName != 'A') {
|
||||
target = target.parentNode;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
url = target.href
|
||||
|
||||
var siblings = target.parentNode.childNodes
|
||||
for (i = 0; i < siblings.length; i++) {
|
||||
if (siblings[i].className != '' && siblings[i].className != 'active') continue;
|
||||
|
||||
siblings[i].className="";
|
||||
if (siblings[i].href == url) {
|
||||
siblings[i].className="active";
|
||||
}
|
||||
}
|
||||
|
||||
fetch(url, {credentials: 'same-origin'}).then(function(response) {
|
||||
return response.text()})
|
||||
.then(function(text){
|
||||
document.getElementById("content").innerHTML=text;
|
||||
changeLinks_headernav();
|
||||
document.getElementById('home_header').click();
|
||||
});
|
||||
}
|
||||
|
||||
/* Headernav */
|
||||
function changeLinks_headernav() {
|
||||
var links = document.getElementById('headernav').getElementsByTagName('a');
|
||||
|
||||
for (var i = 0; i < links.length; i++) {
|
||||
links[i].addEventListener('click', load_headernav, false);
|
||||
}
|
||||
};
|
||||
|
||||
function load_headernav(e) {
|
||||
if (e.which != 1) return;
|
||||
var target = e.target;
|
||||
while (target.nodeName != 'A') {
|
||||
target = target.parentNode;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
url = target.href
|
||||
|
||||
var siblings = target.parentNode.childNodes
|
||||
for (i = 0; i < siblings.length; i++) {
|
||||
if (siblings[i].className != '' && siblings[i].className != 'active') continue;
|
||||
|
||||
siblings[i].className="";
|
||||
if (siblings[i].href == url) {
|
||||
siblings[i].className="active";
|
||||
}
|
||||
}
|
||||
|
||||
destroyChart()
|
||||
fetch(url, {credentials: 'same-origin'}).then(function(response) {
|
||||
return response.text()})
|
||||
.then(function(text){
|
||||
document.getElementById("page").innerHTML=text;
|
||||
if (target.innerText == "API"){change_api();}
|
||||
loadMeters()
|
||||
loadPowerQualityOptions()
|
||||
loadSmiley()
|
||||
history.pushState(null, null,"#" + document.querySelector('.topnav .active').innerText + "/" + target.innerText);
|
||||
});
|
||||
}
|
||||
|
||||
function change_api() {
|
||||
var links = document.getElementById('api').getElementsByTagName('a');
|
||||
|
||||
for (var i = 0; i < links.length; i++) {
|
||||
links[i].addEventListener('click', load_api, false);
|
||||
}
|
||||
};
|
||||
|
||||
function load_api(e) {
|
||||
if (e.which != 1) return;
|
||||
var target = e.target;
|
||||
while (target.nodeName != 'A') {
|
||||
target = target.parentNode;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
url = target.href
|
||||
|
||||
fetch(url).then(function(response) {
|
||||
return response.text()})
|
||||
.then(function(text){
|
||||
document.getElementById("content_api").innerHTML='<h2>'+ url +'</h2><iframe src="'+ url +'"></iframe>';
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/* History */
|
||||
window.onpopstate = function () {
|
||||
var list = window.location.hash.substr(1).split('/');
|
||||
|
||||
document.querySelectorAll('.topnav a').forEach(function(e) {
|
||||
if (e.innerText == list[0]) e.click();
|
||||
});
|
||||
|
||||
document.querySelectorAll('.headernav a').forEach(function(e) {
|
||||
if (e.innerText == list[1]) e.click();
|
||||
});
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue