mirror of https://github.com/lumapu/ahoy.git
lumapu
2 years ago
10 changed files with 163 additions and 138 deletions
@ -1,135 +1,113 @@ |
|||||
<!doctype html> |
<!doctype html> |
||||
<html> |
<html> |
||||
|
<head> |
||||
|
<title>{#NAV_HISTORY}</title> |
||||
|
{#HTML_HEADER} |
||||
|
<meta name="apple-mobile-web-app-capable" content="yes"> |
||||
|
<meta name="format-detection" content="telephone=no"> |
||||
|
|
||||
<head> |
</head> |
||||
<title>History</title> |
|
||||
{#HTML_HEADER} |
|
||||
<meta name="apple-mobile-web-app-capable" content="yes"> |
|
||||
<meta name="format-detection" content="telephone=no"> |
|
||||
|
|
||||
</head> |
<body> |
||||
|
{#HTML_NAV} |
||||
<body> |
<div id="wrapper"> |
||||
{#HTML_NAV} |
<div id="content"> |
||||
<div id="wrapper"> |
<h3>{#TOTAL_POWER}</h3> |
||||
<div id="content"> |
<div> |
||||
<h3>Total Power history</h3> |
<div class="chartDiv" id="pwrChart"> </div> |
||||
<div class="chartDivContainer"> |
<p> |
||||
<div class="chartDiv" id="phHistoryChart"> </div> |
{#MAX_DAY}: <span id="pwrMaxDay"></span> W. {#LAST_VALUE}: <span id="pwrLast"></span> W.<br /> |
||||
<p class="center" style="margin:0px;border:0px;"> |
{#MAXIMUM}: <span id="pwrMax"></span> W. {#UPDATED} <span id="pwrRefresh"></span> {#SECONDS} |
||||
Maximum day: <span id="phMaximumDay"></span> W. Last value: <span id="phActual"></span> W.<br /> |
</p> |
||||
Maximum graphics: <span id="phMaximum"></span> W. Updated every <span id="phRefresh"></span> seconds </p> |
</div> |
||||
</div> |
<h3>{#TOTAL_YIELD_PER_DAY}</h3> |
||||
<h3>Yield per day history</h3> |
<div> |
||||
<div class="chartDivContainer"> |
<div class="chartDiv" id="ydChart"> </div> |
||||
<div class="chartDiv" id="ydHistoryChart"> </div> |
<p> |
||||
<p class="center" style="margin:0px;border:0px;"> |
{#MAXIMUM}: <span id="ydMax"></span> Wh<br /> |
||||
Maximum value: <span id="ydMaximum"></span> Wh<br /> |
{#UPDATED} <span id="ydRefresh"></span> {#SECONDS} |
||||
Updated every <span id="ydRefresh"></span> seconds </p> |
</p> |
||||
|
</div> |
||||
|
</div> |
||||
</div> |
</div> |
||||
|
{#HTML_FOOTER} |
||||
|
|
||||
<h4 style="margin-bottom:0px;">Insert data into Yield per day history</h4> |
<script type="text/javascript"> |
||||
<fieldset style="padding: 1px;"> |
const svgns = "http://www.w3.org/2000/svg"; |
||||
<legend class="des" style="margin-top: 0px;">Insert data (*.json) i.e. from a saved "/api/yieldDayHistory" call </legend> |
var pwrExeOnce = true; |
||||
<form id="form" method="POST" action="/api/insertYieldDayHistory" enctype="multipart/form-data" accept-charset="utf-8"> |
var ydExeOnce = true; |
||||
<input type="button" class="btn my-4" style="padding: 3px;margin: 3px;" value="Insert" onclick="submit()"> |
// make a simple rectangle |
||||
<input type="file" name="insert" style="width: 80%;"> |
var mRefresh = 60; |
||||
</form> |
var mLastValue = 0; |
||||
</fieldset> |
const mChartHeight = 250; |
||||
<p></p> |
|
||||
</div> |
|
||||
</div> |
|
||||
{#HTML_FOOTER} |
|
||||
|
|
||||
<script type="text/javascript"> |
function parseHistory(obj, namePrefix, execOnce) { |
||||
const svgns = "http://www.w3.org/2000/svg"; |
mRefresh = obj.refresh |
||||
var phExeOnce = true; |
var data = Object.assign({}, obj.value) |
||||
var ydExeOnce = true; |
var numDataPts = data.length |
||||
// make a simple rectangle |
|
||||
var mRefresh = 60; |
|
||||
var phDatapoints = 512; |
|
||||
var mMaximum = 0; |
|
||||
var mLastValue = 0; |
|
||||
var mDataValues = []; |
|
||||
const mChartHight = 250; |
|
||||
|
|
||||
function parseHistory(obj, namePrefix, execOnce) { |
if (true == execOnce) { |
||||
mRefresh = obj["refresh"]; |
let s = svg(null, (numDataPts + 2) * 2, mChartHeight, "chart"); |
||||
phDatapoints = obj["datapoints"]; |
s.setAttribute("role", "img"); |
||||
mDataValues = Object.assign({}, obj["value"]); |
let g = document.createElementNS(svgns, "g"); |
||||
mMaximum = obj["maximum"]; |
s.appendChild(g); |
||||
// generate svg |
for (var i = 0; i < numDataPts; i++) { |
||||
if (true == execOnce) { |
val = data[i]; |
||||
let svg = document.createElementNS(svgns, "svg"); |
let rect = document.createElementNS(svgns, "rect"); |
||||
svg.setAttribute("class", "chart"); |
rect.setAttribute("id", namePrefix+"Rect" + i); |
||||
svg.setAttribute("width", String((phDatapoints+2) * 2)); |
rect.setAttribute("x", String(i * 2) + ""); |
||||
svg.setAttribute("height", String(mChartHight) + ""); |
rect.setAttribute("width", String(2) + ""); |
||||
svg.setAttribute("aria-labelledby", "title desc"); |
g.appendChild(rect); |
||||
svg.setAttribute("role", "img"); |
} |
||||
t = ml("title"); |
document.getElementById(namePrefix+"Chart").appendChild(s); |
||||
t.innerHTML = "History of day"; |
|
||||
svg.appendChild(t); |
|
||||
let g = document.createElementNS(svgns, "g"); |
|
||||
svg.appendChild(g); |
|
||||
for (var i = 0; i < phDatapoints; i++) { |
|
||||
val = mDataValues[i]; |
|
||||
let rect = document.createElementNS(svgns, "rect"); |
|
||||
rect.setAttribute("id", namePrefix+"Rect" + i); |
|
||||
rect.setAttribute("x", String(i * 2) + ""); |
|
||||
rect.setAttribute("width", String(2) + ""); |
|
||||
g.appendChild(rect); |
|
||||
} |
} |
||||
document.getElementById(namePrefix+"HistoryChart").appendChild(svg); |
|
||||
} |
// normalize data to chart |
||||
// normalize data to chart |
let divider = obj.max / mChartHeight; |
||||
let divider = mMaximum / mChartHight; |
if (divider == 0) |
||||
if (divider == 0) |
divider = 1; |
||||
divider = 1; |
for (var i = 0; i < numDataPts; i++) { |
||||
for (var i = 0; i < phDatapoints; i++) { |
val = data[i]; |
||||
val = mDataValues[i]; |
if (val > 0) |
||||
if (val>0) |
mLastValue = val |
||||
mLastValue = val |
val = val / divider |
||||
val = val / divider |
rect = document.getElementById(namePrefix+"Rect" + i); |
||||
rect = document.getElementById(namePrefix+"Rect" + i); |
rect.setAttribute("height", val); |
||||
rect.setAttribute("height", val); |
rect.setAttribute("y", mChartHeight - val); |
||||
rect.setAttribute("y", mChartHight - val); |
} |
||||
} |
document.getElementById(namePrefix + "Max").innerHTML = obj.max; |
||||
document.getElementById(namePrefix + "Maximum").innerHTML = mMaximum; |
if (mRefresh < 5) |
||||
if (mRefresh < 5) |
mRefresh = 5; |
||||
mRefresh = 5; |
document.getElementById(namePrefix + "Refresh").innerHTML = mRefresh; |
||||
document.getElementById(namePrefix + "Refresh").innerHTML = mRefresh; |
|
||||
} |
|
||||
function parsePowerHistory(obj){ |
|
||||
if (null != obj) { |
|
||||
parseNav(obj["generic"]); |
|
||||
parseHistory(obj,"ph", phExeOnce) |
|
||||
let maximumDay = obj["maximumDay"]; |
|
||||
document.getElementById("phActual").innerHTML = mLastValue; |
|
||||
document.getElementById("phMaximumDay").innerHTML = maximumDay; |
|
||||
} |
|
||||
if (true == phExeOnce) { |
|
||||
phExeOnce = false; |
|
||||
window.setInterval("getAjax('/api/powerHistory', parsePowerHistory)", mRefresh * 1000); |
|
||||
// one after the other |
|
||||
setTimeout(() => { |
|
||||
getAjax("/api/yieldDayHistory", parseYieldDayHistory); |
|
||||
} , 20); |
|
||||
} |
|
||||
} |
|
||||
function parseYieldDayHistory(obj) { |
|
||||
if (null != obj) { |
|
||||
parseNav(obj["generic"]); |
|
||||
parseHistory(obj, "yd", ydExeOnce) |
|
||||
} |
|
||||
if (true == ydExeOnce) { |
|
||||
ydExeOnce = false; |
|
||||
window.setInterval("getAjax('/api/yieldDayHistory', parseYieldDayHistory)", mRefresh * 500); |
|
||||
} |
} |
||||
} |
|
||||
|
|
||||
getAjax("/api/powerHistory", parsePowerHistory); |
function parsePowerHistory(obj){ |
||||
</script> |
if (null != obj) { |
||||
|
parseHistory(obj,"pwr", pwrExeOnce) |
||||
|
document.getElementById("pwrLast").innerHTML = mLastValue |
||||
|
document.getElementById("pwrMaxDay").innerHTML = obj.maxDay |
||||
|
} |
||||
|
if (pwrExeOnce) { |
||||
|
pwrExeOnce = false; |
||||
|
window.setInterval("getAjax('/api/powerHistory', parsePowerHistory)", mRefresh * 1000); |
||||
|
|
||||
</body> |
setTimeout(() => { |
||||
|
getAjax("/api/yieldDayHistory", parseYieldDayHistory); |
||||
|
} , 20); |
||||
|
} |
||||
|
} |
||||
|
function parseYieldDayHistory(obj) { |
||||
|
if (null != obj) { |
||||
|
parseNav(obj.generic); |
||||
|
parseHistory(obj, "yd", ydExeOnce) |
||||
|
} |
||||
|
if (ydExeOnce) { |
||||
|
ydExeOnce = false; |
||||
|
window.setInterval("getAjax('/api/yieldDayHistory', parseYieldDayHistory)", mRefresh * 500); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
getAjax("/api/powerHistory", parsePowerHistory); |
||||
|
</script> |
||||
|
</body> |
||||
</html> |
</html> |
||||
Loading…
Reference in new issue