<!DOCTYPE html>
<!-- Courtesy ruler for editing this file
12345678901234567890123456789012345678901234567890123456789012345678901234567890
-->
<html>
<head>
<title>AREDN Node - Signal Status</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
    background-image: url("static/chalk.jpg");
}
h2 {
    font: bold 24px arial, sans-serif;
}
h3 {
    font: bold 18px arial, sans-serif;
}
h4 {
    font: bold 16px arial, sans-serif;
}
.mainContainer {
    width: 750px;
    text-align: center;
    margin: auto;
    /*border: 1px solid black;*/
}
.datetime {
    font: bold 22px arial, sans-serif;
    padding: 0px;
}
.rowContainer {
    display: table;
    width: 100%;
}
.currentDataCell {
    width: 50%;
    padding: 10px;
    font: bold 20px arial, sans-serif;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.dataItems {
    padding: 2px;
    text-align: left;
    line-height: 130%;
    display: inline-block;
    vertical-align: middle;
}
.chartContainer {
    padding: 2px;
}
img.chart {
    width:100%;
}
.notes {
    font: 17px arial, sans-serif;
    text-align: left;
    padding: 10px;
}
span.chartSelector {
    margin: auto;
}
ul.selectorElement {
    list-style-type: none;
    margin: 10px;
    padding: 0;
    overflow: hidden;
    background-color: #bbb;
    text-align: center;
}
li.selectorElement {
    display: inline-block;
    font: bold 18px arial, sans-serif;
    color: black;
}
span.selectorElement:hover {
    background-color: #333;
    cursor: pointer;
    color: white;
}
span.selectorElement {
    display: inline-block;
    padding: 8px 12px;
}
#iframe_a {
    border:none;
    width:100%;
    height:450px;
}
</style>
</head>

<body onload="main()">

<div class="mainContainer">
<h2><a href="https://github.com/fractalxaos/ham/tree/master/arednsig" 
  style="text-decoration:none" target="_new">
AREDN<sup>&#174;</sup> Node Signal</a></h2>
<h3>Last Updated</h3>
<div class="datetime">
<span id="date"></span>
&nbsp;&nbsp;
<span id="time"></span>
</div>

<div class="rowContainer">
<div class="currentDataCell">
<div class="dataItems" style="text-align: center;">
Status: <span id="status"></span><br>
Charts update every: <span id="period"></span> minutes
</div>

</div>
</div>

<span class="chartSelectors">
<ul class="selectorElement">
<li class="selectorElement">Select charts:</li>
<li class="selectorElement"><span class="selectorElement"
 onclick="setChartPeriod(1)">24 hours</span></li>
<li class="selectorElement"><span class="selectorElement"
 onclick="setChartPeriod(2)">4 weeks</span></li>
<li class="selectorElement"><span class="selectorElement"
 onclick="setChartPeriod(3)">12 months</span></li>
<li class="selectorElement"><span class="selectorElement"
 onclick="setChartPeriod(0)">Custom…</span></li>
</ul>
</span>

<div class="rowContainer" id="customChartsContainer" style="display:none;">
<div class="currentDataCell">
<form id="fmDateSelector" action="arednsig.php" method="post"
 target="iframe_a">
<label for="beginDate">Begin Date: </label>
<input id="beginDate" name="beginDate" type="date" value="mm/dd/yyyy" />
<label for="endDate">End Date: </label>
<input id="endDate" name="endDate" type="date" value="mm/dd/yyyy" />
<br><br>
<input type="button" onclick="getCustomCharts()" value="Get Charts">
</form>
<span id="errorMsg"></span><br>
<iframe id="iframe_a" name="iframe_a"></iframe>
</div>
</div>

<br>

<div class="rowContainer" id="stockChartsContainer">
<div class="chartContainer">
<img class="chart" id="signalChart">
</div>
<div class="chartContainer">
<img class="chart" id="snrChart">
</div>
</div>

<div class="notes">
<b>NOTES:</b>
<ul>
<li>Aredn Node Signal software available at
<a href="https://github.com/fractalxaos/ham/tree/master/arednsig"
 target="_new">
<i>Github.com</i></a>.</li>
<li>Project sponsored by 
<a href="https://willamettevalleymesh.net" TARGET="_NEW">
<i>Willamette Valley Mesh Network</i></a>, Salem, Oregon.</li>
<li>For more information about the amateur radio emergency
 data network (AREDN) see official web site at
 <a href="http://www.arednmesh.org" target="_blank">
www.arednmesh.org</a>.</li>
</ul>
</div>
</div>
<br>

<script>

/* Global constants */

var nodeDataUrl = "dynamic/nodeOnline.js";

/* Global DOM objects */

// Chart elements
var signalChart = document.getElementById("signalChart");
var snrChart = document.getElementById("snrChart");

// Text elements
var dateElmt = document.getElementById("date");    
var timeElmt = document.getElementById("time"); 
var statusElmt = document.getElementById("status");
var periodElmt = document.getElementById("period");

// Document elements
var customChartsContainer = document.getElementById("customChartsContainer");
var stockChartsContainer = document.getElementById("stockChartsContainer");
var fmDateSelector = document.getElementById("fmDateSelector");
var errorMsg = document.getElementById("errorMsg");

/* Global objects */

var httpRequest = new XMLHttpRequest();

/* Global variables */

var chartPeriod = 1;
var chartRefreshRate = 0; // chart refresh rate in minutes

function main() {
    /* Register call back function to process http requests */
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            var dataArray = JSON.parse(httpRequest.responseText);
            displayData(dataArray[0]);
        } else if (httpRequest.readyState == 4 && httpRequest.status == 404) {
            displayOfflineStatus();
        }
    };
    httpRequest.ontimeout = function(e) {
        displayOfflineStatus();
    };

    initializeDateSelector();
    getNodeData();
    getNodeCharts();
}

function getNodeData() {
    httpRequest.open("GET", nodeDataUrl, true);
    httpRequest.timeout = 3000;
    httpRequest.send();
}

function setChartPeriod(n) {
    chartPeriod = n;
    if (n == 0) {
        customChartsContainer.style.display = "block";
        stockChartsContainer.style.display = "none";
    } else {
        customChartsContainer.style.display = "none";
        stockChartsContainer.style.display = "block";
    getNodeCharts();   
    }
}

function getNodeCharts() {
    var d = new Date;
    var pfx;

    switch(chartPeriod) {
        case 1:
            pfx = "24hr_";
            break;
        case 2:
            pfx = "4wk_";
            break;
       case 3:
            pfx = "12m_";
            break;
    }
    signalChart.src = "dynamic/" + pfx + "signal.png?ver=" + d.getTime();
    snrChart.src = "dynamic/" + pfx + "snr.png?ver=" + d.getTime();
}

function displayData(dataItem) {
    var timeStamp, date, time, hourminute;
    var localDateObj,localTimeZone;

    timeStamp = dataItem.date;
    date = timeStamp.split(" ")[0];
    time = timeStamp.split(" ")[1];
    hourminute = time.split(":")[0] + ":" + time.split(":")[1];
    localDate = new Date();
    localTimeZone = localDate.getTimezoneOffset() / 60;
    dateElmt.innerHTML = date;    
    timeElmt.innerHTML = hourminute +
                         "  <small>(GMT+" + localTimeZone + ")</small>";    
     
    statusElmt.innerHTML = "Online";
    statusElmt.style.color = "green";

    chartRefreshRate = dataItem.period;
    periodElmt.innerHTML = chartRefreshRate / 60;
    setInterval(getNodeData, 1000 * chartRefreshRate);
    setInterval(getNodeCharts, 1000 * chartRefreshRate);
}

function displayOfflineStatus() {
    var d = new Date();
    localTimeZone = d.getTimezoneOffset() / 60;
    dateElmt.innerHTML = (d.getMonth() + 1) + "/" + d.getDate() + "/" +
                          d.getFullYear();    
    timeElmt.innerHTML = d.getHours() + ":" + d.getMinutes() +
                         "  <small>(GMT+" + localTimeZone + ")</small>";
    periodElmt.innerHTML = "?";    
    statusElmt.innerHTML = "offline";    
    statusElmt.style.color = "red";
}

function initializeDateSelector() {
    var d = new Date();

    var dEnd = new Date(d.getFullYear(),
               d.getMonth(), d.getDate() - 0);

    var dBegin = new Date(d.getFullYear(),
               d.getMonth(), d.getDate() - 1);

    document.getElementById("beginDate").valueAsDate = dBegin;
    document.getElementById("endDate").valueAsDate = dEnd;
}

function getCustomCharts() {
    fmDateSelector.submit();
}
</script>

</body>
</html>