marco.locatelli@steamware.net
503 lines
21 KiB
HTML
503 lines
21 KiB
HTML
{% extends "layout.html" %}
|
|
|
|
{% block content %}
|
|
<main>
|
|
<script type="text/javascript">
|
|
|
|
$("#Div0").hide();
|
|
var intTime=510;
|
|
var intTimeSlow=1900;
|
|
|
|
// fix visualizzazioni
|
|
fixTables();
|
|
dataRefresh();
|
|
|
|
timeoutFast = setInterval(dataRefresh, intTime);
|
|
timeoutSlow = setInterval(fixTables, intTimeSlow);
|
|
|
|
function fixFloat(actVal, numDisplay)
|
|
{
|
|
return parseFloat(actVal).toFixed(numDisplay)
|
|
}
|
|
|
|
function dataRefresh() {
|
|
// scarico i dati aggioranti
|
|
$.ajax({url: "/api/v1/channels/all", success: function(result){
|
|
|
|
numDisplay = parseInt(result.DecimalsDisplay)
|
|
var divWidth = document.getElementById("divChA").offsetWidth
|
|
|
|
// compilo i dati scaricati
|
|
$("#SelChannelA").html(result.ChA);
|
|
$("#OutputA").html(fixFloat(result.Outs[result.ChA],numDisplay));
|
|
|
|
setGaugeA(divWidth,result.Outs[result.ChA],result.Outmin[result.ChA],result.Outmax[result.ChA]);
|
|
|
|
$("#SelChannelB").html(result.ChB);
|
|
$("#OutputB").html(fixFloat(result.Outs[result.ChB],numDisplay));
|
|
|
|
setGaugeB(divWidth,result.Outs[result.ChB],result.Outmin[result.ChB],result.Outmax[result.ChB]);
|
|
|
|
$("#LoggerTime").html(result.timeLog);
|
|
$("#ServerTime").html(result.timeSrv);
|
|
$("#LastSessionName").html(result.LastSessionName);
|
|
$("#CurrentFolder").html(result.CurrentWorkFolder);
|
|
$("#ResultValue").html(fixFloat(result.ResultValue,numDisplay));
|
|
$("#RealValue").html(fixFloat(result.RealValue,numDisplay));
|
|
$("#Crono").html(result.Crono);
|
|
|
|
if(result.GateOpen == "0")
|
|
{
|
|
$("#WarnCanc").hide();
|
|
}
|
|
else if(result.GateOpen == "1")
|
|
{
|
|
$("#WarnCanc").show();
|
|
}
|
|
|
|
// Se ho una current folder assegnata, la mostro e mostro contenuto. Altrimenti mostro elenco cartelle.
|
|
if(result.CurrentWorkFolder == "")
|
|
{
|
|
$("#Div7").hide();
|
|
$("#Div8").hide();
|
|
$("#Div9").show();
|
|
$("#Div10").hide();
|
|
$("#Div11").hide();
|
|
}
|
|
else
|
|
{
|
|
$("#Div7").show();
|
|
$("#Div8").show();
|
|
$("#Div9").hide();
|
|
$("#Div10").show();
|
|
$("#Div11").show();
|
|
}
|
|
// Se LOG:STATUS è 0, mostro solo Start Log. se è 1, mostro solo Stop Log
|
|
if(result.Status == "0")
|
|
{
|
|
$("#btnStart").show();
|
|
$("#btnStop").hide();
|
|
$("#EwmaVeto").hide();
|
|
}
|
|
|
|
else if(result.Status == "1")
|
|
{
|
|
$("#btnStart").hide();
|
|
$("#btnStop").show();
|
|
// mostro se ci sia veto EWMA...
|
|
if (result.EwmaEnab) {
|
|
$("#EwmaVeto").hide();
|
|
}
|
|
else
|
|
{
|
|
$("#EwmaVeto").show();
|
|
}
|
|
}
|
|
|
|
// se real date status non è stato inserito, mostro div0 che lo chiede
|
|
if(result.RealDateStatus == "0")
|
|
{
|
|
$("#Div0").show();
|
|
}
|
|
|
|
$("#ExeWarning").hide();
|
|
if(result.DisplayAlert == "1")
|
|
{
|
|
$("#ExeWarning").show();
|
|
}
|
|
|
|
// controllo i due warning del denominatore
|
|
$("#DenomWarning01").hide();
|
|
$("#DenomWarning02").hide();
|
|
if (result.DisplayDenomAlert == "1") {
|
|
$("#DenomWarning01").show();
|
|
$("#DenomWarning02").show();
|
|
}
|
|
|
|
|
|
//scarico unità di misura dei canali mostrati
|
|
$("#UniMisuA").html(result.UniMeasure[result.ChA]);
|
|
$("#UniMisuB").html(result.UniMeasure[result.ChB]);
|
|
$("#CalcMeasure1").html(result.CalcUMeasure);
|
|
$("#CalcMeasure2").html(result.CalcUMeasure);
|
|
$("#SmoothFact").html(result.SmoothFact);
|
|
$("#LogFreq").html(result.LogFreq);
|
|
$("#RecPeriod").html(result.SmoothFact*result.LogFreq);
|
|
}});
|
|
// A ogni giro di data refresh fix di tabella cartelle e tabella file
|
|
};
|
|
|
|
function fixTables(){
|
|
fixFileTable();
|
|
fixFolderTable();
|
|
// A ogni giro di data refresh fix di tabella cartelle e tabella file
|
|
}
|
|
|
|
function setGaugeA(divWidth,chValA,outMinA,outMaxA){
|
|
// Create knob elements
|
|
const knob0 = pureknob.createKnob(divWidth, divWidth);
|
|
// Set properties knob0
|
|
knob0.setProperty('angleStart', -0.85 * Math.PI);
|
|
knob0.setProperty('angleEnd', 0.85 * Math.PI);
|
|
knob0.setProperty('colorFG', '#07adec');
|
|
knob0.setProperty('trackWidth', 0.25);
|
|
knob0.setProperty('valMin', parseInt(outMinA)*1000);
|
|
knob0.setProperty('valMax', parseInt(outMaxA)*1000);
|
|
knob0.setProperty('readonly', 'true');
|
|
// nascondo numero
|
|
knob0.setProperty('textScale', '0');
|
|
knob0.resize();
|
|
// Set initial value0
|
|
knob0.setValue(chValA*1000);
|
|
// Create element node0
|
|
const node0 = knob0.node();
|
|
// Add it to the DOM.
|
|
$("#divChA").html(node0);
|
|
}
|
|
|
|
function setGaugeB(divWidth,chValB,outMinB,outMaxB){
|
|
// Create knob elements
|
|
const knob1 = pureknob.createKnob(divWidth, divWidth);
|
|
// Set properties knob1
|
|
knob1.setProperty('angleStart', -0.85 * Math.PI);
|
|
knob1.setProperty('angleEnd', 0.85 * Math.PI);
|
|
knob1.setProperty('colorFG', '#07adec');
|
|
knob1.setProperty('trackWidth', 0.25);
|
|
knob1.setProperty('valMin', parseInt(outMinB)*1000);
|
|
knob1.setProperty('valMax', parseInt(outMaxB)*1000);
|
|
knob1.setProperty('readonly', 'true');
|
|
// nascondo numero
|
|
knob1.setProperty('textScale', '0');
|
|
// Set valore
|
|
knob1.setValue(chValB*1000);
|
|
// Create element node1
|
|
const node1 = knob1.node();
|
|
// Add it to the DOM.
|
|
$("#divChB").html(node1);
|
|
}
|
|
|
|
// Funzione startLog: chiamata /api/v1/log/start per avviare log e dare nome corretto
|
|
function startLog(){
|
|
$.ajax({
|
|
type: 'PUT'
|
|
,url: "/api/v1/log/start"
|
|
,data: ""
|
|
})
|
|
// fix table
|
|
dataRefresh();
|
|
};
|
|
|
|
// Funzione stopLog: fa chiamata per settare a 0 il LOG:STATUS
|
|
function stopLog(){
|
|
$.ajax({
|
|
type: 'PUT'
|
|
,url: "/api/v1/log/stop"
|
|
,data: ""
|
|
})
|
|
// fix table
|
|
dataRefresh();
|
|
};
|
|
|
|
function goBack(){
|
|
$.ajax({
|
|
type: 'PUT'
|
|
,url: "/api/v1/data/navigate"
|
|
,data: ""
|
|
})
|
|
// fix table
|
|
dataRefresh();
|
|
};
|
|
|
|
//funzione exportData: chiamata per copiare e incollare il contenuto della cartella /data
|
|
function exportData(){
|
|
$.ajax({
|
|
type: 'PUT'
|
|
,url: "/api/v1/data/export"
|
|
,data: ""
|
|
})
|
|
confirm("Cartella attuale copiata su USB drive.")
|
|
// fix table
|
|
dataRefresh();
|
|
};
|
|
|
|
//funzione deleteData: chiamata per eliminare il contenuto della cartella /data
|
|
function deleteData(){
|
|
var R = confirm("Confermi di voler eliminare la cartella attuale e il suo contenuto?");
|
|
if (R == true){
|
|
$.ajax({
|
|
type: 'PUT'
|
|
,url: "/api/v1/data/delete"
|
|
,data: ""
|
|
})
|
|
dataRefresh();
|
|
}
|
|
else{
|
|
dataRefresh();
|
|
}
|
|
};
|
|
|
|
function fixFolderTable(){
|
|
// scarico i dati aggioranti
|
|
$.ajax({url: "/api/v1/folders/list", success: function(result){
|
|
folderTable = result.folderTable;
|
|
// fix file
|
|
UpdateFolderTable(folderTable);
|
|
}});
|
|
}
|
|
|
|
function UpdateFolderTable(folderTable) {
|
|
// EXTRACT VALUE FOR HTML HEADER.
|
|
var col = [];
|
|
for (var i = 0; i < folderTable.length; i++) {
|
|
for (var key in folderTable[i]) {
|
|
if (col.indexOf(key) === -1) {
|
|
col.push(key);
|
|
}
|
|
}
|
|
}
|
|
// CREATE DYNAMIC TABLE.
|
|
var tableF = document.createElement("table");
|
|
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
|
|
// TABLE ROW.
|
|
var tr = tableF.insertRow(-1);
|
|
// TABLE HEADER.
|
|
for (var i = 0; i < col.length; i++) {
|
|
var th = document.createElement("th");
|
|
th.innerHTML = col[i];
|
|
tr.appendChild(th);
|
|
}
|
|
// ADD JSON DATA TO THE TABLE AS ROWS.
|
|
for (var i = 0; i < folderTable.length; i++) {
|
|
tr = tableF.insertRow(-1);
|
|
for (var j = 0; j < col.length; j++) {
|
|
var tabCell = tr.insertCell(-1);
|
|
tabCell.innerHTML = folderTable[i][col[j]];
|
|
}
|
|
}
|
|
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
|
|
var divContainer = document.getElementById("showFolders");
|
|
divContainer.innerHTML = "";
|
|
divContainer.appendChild(tableF);
|
|
}
|
|
|
|
function fixFileTable(){
|
|
// scarico i dati aggioranti
|
|
$.ajax({url: "/api/v1/files/list", success: function(result){
|
|
fileTable = result.fileTable;
|
|
// fix file
|
|
UpdateFileTable(fileTable);
|
|
}});
|
|
}
|
|
|
|
function UpdateFileTable(fileTable) {
|
|
// EXTRACT VALUE FOR HTML HEADER.
|
|
var col = [];
|
|
for (var i = 0; i < fileTable.length; i++) {
|
|
for (var key in fileTable[i]) {
|
|
if (col.indexOf(key) === -1) {
|
|
col.push(key);
|
|
}
|
|
}
|
|
}
|
|
// CREATE DYNAMIC TABLE.
|
|
var table = document.createElement("table");
|
|
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
|
|
// TABLE ROW.
|
|
var tr = table.insertRow(-1);
|
|
// TABLE HEADER.
|
|
for (var i = 0; i < col.length; i++) {
|
|
var th = document.createElement("th");
|
|
th.innerHTML = col[i];
|
|
tr.appendChild(th);
|
|
}
|
|
// ADD JSON DATA TO THE TABLE AS ROWS.
|
|
for (var i = 0; i < fileTable.length; i++) {
|
|
tr = table.insertRow(-1);
|
|
for (var j = 0; j < col.length; j++) {
|
|
var tabCell = tr.insertCell(-1);
|
|
tabCell.innerHTML = fileTable[i][col[j]];
|
|
}
|
|
}
|
|
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
|
|
var divContainer = document.getElementById("showData");
|
|
divContainer.innerHTML = "";
|
|
divContainer.appendChild(table);
|
|
}
|
|
|
|
</script>
|
|
<div class="row my-2">
|
|
<div class="col-12 alert alert-danger text-center" name="WarnCanc" id="WarnCanc">
|
|
<h3>CANCELLO APERTO</h3>
|
|
</div>
|
|
</div>
|
|
<div class="row my-2">
|
|
<div class="col-12 col-xl-6">
|
|
<div class="row mb-2">
|
|
<div class="col-6 pr-0">
|
|
<div class="card text-center mr-1">
|
|
<div class="card-header">
|
|
<strong>Canale A: <span id="SelChannelA"></span></strong>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="divChA"></div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<span class="h4" id="OutputA"></span>
|
|
<span class="h4" id="UniMisuA"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 pl-0">
|
|
<div class="card text-center ml-1">
|
|
<div class="card-header">
|
|
<strong>Canale B: <span id="SelChannelB"></span></strong>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="divChB"></div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<span class="h4" id="OutputB"></span>
|
|
<span class="h4" id="UniMisuB"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card text-center">
|
|
<div class="card-header text-center">
|
|
<div class="row">
|
|
<div class="col-3">
|
|
<span class="badge badge-warning" id="DenomWarning01">
|
|
<img src="../static/img/exclamation-triangle-fill.svg" height="10" widht="10"></img>
|
|
</span>
|
|
</div>
|
|
<div class="col-6">
|
|
<strong>Risultante B/(A-B)</strong>
|
|
</div>
|
|
<div class="col-3">
|
|
<span class="badge badge-warning" id="DenomWarning02">
|
|
<img src="../static/img/exclamation-triangle-fill.svg" height="10" widht="10"></img>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-6">
|
|
Media Grezza:
|
|
</div>
|
|
<div class="col-6">
|
|
Media Corretta:
|
|
</div>
|
|
<div class="col-6">
|
|
<span class="h5" id="RealValue"></span>
|
|
<span class="h5" id="CalcMeasure1"></span>
|
|
</div>
|
|
<div class="col-6">
|
|
<span class="h5" id="ResultValue"></span>
|
|
<span class="h5" id="CalcMeasure2"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-xl-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-3 text-center">
|
|
Smooth Factor:
|
|
</div>
|
|
<div class="col-3 text-center">
|
|
Sample Period:
|
|
</div>
|
|
<div class="col-3 text-center">
|
|
Record Period:
|
|
</div>
|
|
<div class="col-3 text-center">
|
|
System Load:
|
|
</div>
|
|
<div class="col-3 text-center">
|
|
<span class="h5" id="SmoothFact"></span>
|
|
</div>
|
|
<div class="col-3 text-center">
|
|
<span class="h5" id="LogFreq"></span> ms
|
|
</div>
|
|
<div class="col-3 text-center">
|
|
<span class="h5" id="RecPeriod"></span> ms
|
|
</div>
|
|
<div class="col-3 text-center">
|
|
<span class="badge badge-warning" id="ExeWarning">
|
|
<img src="../static/img/exclamation-triangle-fill.svg" height="16" widht="16"></img>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-xl-6">
|
|
<div class="card my-2">
|
|
<div id="Div7" class="card-header">
|
|
<div class="row">
|
|
<div class="col-5">
|
|
<button id="btnStart" type="button" class="btn btn-success btn-block" style="font-size: 110%" onclick="startLog()">
|
|
<img src="../static/img/play-fill.svg" height="24" width="24"> Inizia Scrittura</button>
|
|
<span class="badge badge-success" id="EwmaVeto">
|
|
<img src="../static/img/exclamation-triangle-fill.svg" height="20" widht="20"></img>
|
|
</span>
|
|
</div>
|
|
<div class="col-2 badge badge-dark text-light text-center">
|
|
<em><span class="h5" id="Crono"></span></em>
|
|
</div>
|
|
<div class="col-5">
|
|
<button id="btnStop" type="button" class="btn btn-danger btn-block" style="font-size: 110%" onclick="stopLog()">
|
|
<img src="../static/img/stop-fill.svg" height="24" width="24"> Ferma Scrittura</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-header">
|
|
<div class="row" id="Div8"> <!--Div8 ovvero cartella attuale e sessione attuale-->
|
|
<div class="col-6"><strong>Cartella attuale: </strong> <h5><span id="CurrentFolder"></span></h5></div>
|
|
<div class="col-6"><strong>Sessione attuale: </strong> <h5><span id="LastSessionName"></span></h5></div>
|
|
</div>
|
|
<div id="Div9"> <!--Div9 ovvero selezione cartella-->
|
|
<p id="showFolders"></p>
|
|
<form method="POST" action="/api/v1/setup/workingtree">
|
|
<div class="input-group mb-2">
|
|
<span class="input-group-text col-5">Seleziona o Crea Cartella: </span>
|
|
<input type="text" class="form-control col-5" id="NewFolder" name="NewFolder"></input>
|
|
<button type="submit" class="btn btn-success col-2"><img src="../static/img/folder-plus.svg" height="24" width="24"></button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div id="Div10"> <!--Div10 ovvero 3 pulsanti logger-->
|
|
<div class="row mt-2">
|
|
<div class="col-4">
|
|
<button type="button" style="font-size: 90%" class="btn btn-info btn-block" onclick="goBack()">
|
|
<img src="../static/img/arrow-90deg-up.svg" height="24" width="24"> Indietro</button>
|
|
</div>
|
|
<div class="col-4">
|
|
<button type="button" style="font-size: 90%" class="btn btn-primary btn-block" onclick="exportData()">
|
|
<img src="../static/img/download.svg" height="24" width="24"> Salva su USB</button>
|
|
</div>
|
|
<div class="col-4">
|
|
<button type="button" style="font-size: 90%" class="btn btn-warning btn-block" onclick="deleteData()">
|
|
<img src="../static/img/folder-x.svg" height="24" width="24"> Elimina dati</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body" id="Div11"> <!--Div11 ovvero elenco files-->
|
|
<p class="text-center" id="showData"></p>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
{% endblock %}
|