Fix localhost check, cleanup front end and favicon

html/controller/index.html

@@ -63,10 +63,11 @@
   </div>
   </div>
 </body>
+<script src="../js/common.js"></script>
 <script>
   window.onload = function() {
   var host = window.location.hostname;
-  var isLocalHost = (host === "localhost" || host === "127.0.0.1" || host === "192.168.0.112");
+  var isLocalHost = is_localhost(host);
   var anchors = document.getElementsByTagName("a");
   if (isLocalHost) {
     for (var i = 0; i < anchors.length; i++) {

html/display/detection/delay-doppler/index.html

@@ -25,5 +25,6 @@
   xVariable = "delay";
   yVariable = "doppler";
 </script>
+<script src="../../../js/common.js"></script>
 <script src="../../../js/plot_detection.js"></script>
 </html>

html/display/detection/delay/index.html

@@ -25,5 +25,6 @@
   xVariable = "timestamp";
   yVariable = "delay";
 </script>
+<script src="../../../js/common.js"></script>
 <script src="../../../js/plot_detection.js"></script>
 </html>

html/display/detection/doppler/index.html

@@ -25,5 +25,6 @@
   xVariable = "timestamp";
   yVariable = "doppler";
 </script>
+<script src="../../../js/common.js"></script>
 <script src="../../../js/plot_detection.js"></script>
 </html>

html/display/map/index.html

@@ -22,5 +22,6 @@
 <script>
   var urlMap = '/api/map';
 </script>
+<script src="../../js/common.js"></script>
 <script src="../../js/plot_map.js"></script>
 </html>

html/display/maxhold/index.html

@@ -22,5 +22,6 @@
 <script>
   var urlMap = '/stash/map';
 </script>
+<script src="../../js/common.js"></script>
 <script src="../../js/plot_map.js"></script>
 </html>

html/display/spectrum/index.html

@@ -21,6 +21,7 @@
 </body>
 <script>
 </script>
+<script src="../../js/common.js"></script>
 <script src="../../js/plot_spectrum.js"></script>
 
 </html>

html/display/timing/index.html

@@ -23,5 +23,6 @@
   xTitle = "Timestamp";
   yTitle = "Time (ms)";
 </script>
+<script src="../../js/common.js"></script>
 <script src="../../js/plot_timing.js"></script>
 </html>

html/favicon.ico

@@ -0,0 +1 @@
+./favicon/favicon-32x32.png

html/index.html

@@ -4,6 +4,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta charset="UTF-8">
   <title>blah2</title>
+  <link rel="icon" type="image/x-icon" href="/favicon/favicon-16x16.png" sizes="16x16">
+  <link rel="icon" type="image/x-icon" href="/favicon/favicon-32x32.png" sizes="32x32">
+  <link rel="icon" type="image/x-icon" href="/favicon/favicon-128x128.png" sizes="128x128">
+  <link rel="icon" type="image/x-icon" href="/favicon/favicon-196x196.png" sizes="196x196">
   <!-- load lib js -->
   <script src="./lib/bootstrap-5.2.3.min.js"></script>
   <script src="./lib/plotly-2.20.0.min.js"></script>
@@ -41,6 +45,7 @@
 <script>
   var urlMap = '/api/map';
 </script>
+<script src="js/common.js"></script>
 <script src="js/plot_map.js"></script>
 <script src="control.js"></script>
 </html>

html/js/common.js

@@ -0,0 +1,18 @@
+function is_localhost(ip) {
+  
+  if (ip === 'localhost') {
+    return true;
+  }
+  
+  const localRanges = ['127.0.0.1', '192.168.0.0/16', '10.0.0.0/8', '172.16.0.0/12'];
+
+  const ipToInt = ip => ip.split('.').reduce((acc, octet) => (acc << 8) + +octet, 0) >>> 0;
+
+  return localRanges.some(range => {
+    const [rangeStart, rangeSize = 32] = range.split('/');
+    const start = ipToInt(rangeStart);
+    const end = (start | (1 << (32 - +rangeSize))) >>> 0;
+    return ipToInt(ip) >= start && ipToInt(ip) <= end;
+  });
+
+}

html/js/plot_detection.js

@@ -1,7 +1,7 @@
-var timestamp = -1;
+var timestamp;
 var nRows = 3;
 var host = window.location.hostname;
-var isLocalHost = (host === "localhost" || host === "127.0.0.1" || host === "192.168.0.112");
+var isLocalHost = is_localhost(host);
 var range_x = [];
 var range_y = [];
 
@@ -18,8 +18,6 @@ if (isLocalHost) {
 } else {
   urlDetection = '//' + host + '/stash/detection';
 }
-urlTimestamp = urlTimestamp + '?timestamp=' + Date.now();
-urlDetection = urlDetection + '?timestamp=' + Date.now();
 
 // setup plotly
 var layout = {

html/js/plot_map.js

@@ -1,7 +1,7 @@
 var timestamp = -1;
 var nRows = 3;
 var host = window.location.hostname;
-var isLocalHost = (host === "localhost" || host === "127.0.0.1" || host === "192.168.0.112");
+var isLocalHost = is_localhost(host);
 var range_x = [];
 var range_y = [];
 
@@ -36,20 +36,17 @@ if (isLocalHost) {
 } else {
   urlConfig = '//' + host + '/api/config';
 }
-urlTimestamp = urlTimestamp + '?timestamp=' + Date.now();
-urlDetection = urlDetection + '?timestamp=' + Date.now();
-urlMap = urlMap + '?timestamp=' + Date.now();
 
 // get truth flag
 var isTruth = false;
-var configData = $.getJSON(urlConfig, function () { })
+$.getJSON(urlConfig, function () { })
 .done(function (data_config) {
   if (data_config.truth.adsb.enabled === true) {
     isTruth = true;
-    var adsbLinkData = $.getJSON(urlAdsbLink, function () { })
+    $.getJSON(urlAdsbLink, function () { })
     .done(function (data) {
       urlAdsb = data.url;
-      if (window.location.protocol === 'https:') {
+      if (!is_localhost(new URL(urlAdsb).hostname)) {
         urlAdsb = urlAdsb.replace(/^http:/, 'https:');
       }
     })
@@ -120,21 +117,21 @@ Plotly.newPlot('data', data, layout, config);
 var intervalId = window.setInterval(function () {
 
   // check if timestamp is updated
-  var timestampData = $.get(urlTimestamp, function () { })
+  $.get(urlTimestamp, function () { })
 
     .done(function (data) {
       if (timestamp != data) {
         timestamp = data;
 
         // get detection data (no detection lag)
-        var detectionData = $.getJSON(urlDetection, function () { })
+        $.getJSON(urlDetection, function () { })
           .done(function (data_detection) {
             detection = data_detection;
           });
 
         // get ADS-B data if enabled in config
         if (isTruth) {
-          var adsbData = $.getJSON(urlAdsb, function () { })
+          $.getJSON(urlAdsb, function () { })
             .done(function (data_adsb) {
               adsb['delay'] = [];
               adsb['doppler'] = [];
@@ -150,7 +147,7 @@ var intervalId = window.setInterval(function () {
         }
 
         // get new map data
-        var apiData = $.getJSON(urlMap, function () { })
+        $.getJSON(urlMap, function () { })
           .done(function (data) {
 
             // case draw new plot

html/js/plot_spectrum.js

@@ -1,7 +1,7 @@
 var timestamp = -1;
 var nRows = 3;
 var host = window.location.hostname;
-var isLocalHost = (host === "localhost" || host === "127.0.0.1" || host === "192.168.0.112");
+var isLocalHost = is_localhost(host);
 var range_x = [];
 var range_y = [];
 
@@ -18,8 +18,6 @@ if (isLocalHost) {
 } else {
   urlMap = '//' + host + '/stash/iqdata';
 }
-urlTimestamp = urlTimestamp + '?timestamp=' + Date.now();
-urlMap = urlMap + '?timestamp=' + Date.now();
 
 // setup plotly
 var layout = {
@@ -82,14 +80,14 @@ Plotly.newPlot('data', data, layout, config);
 var intervalId = window.setInterval(function () {
 
   // check if timestamp is updated
-  var timestampData = $.get(urlTimestamp, function () { })
+  $.get(urlTimestamp, function () { })
 
     .done(function (data) {
       if (timestamp != data) {
         timestamp = data;
 
         // get new map data
-        var apiData = $.getJSON(urlMap, function () { })
+        $.getJSON(urlMap, function () { })
           .done(function (data) {
 
             // case draw new plot

html/js/plot_timing.js

@@ -1,7 +1,7 @@
 var timestamp = -1;
 var nRows = 3;
 var host = window.location.hostname;
-var isLocalHost = (host === "localhost" || host === "127.0.0.1" || host === "192.168.0.112");
+var isLocalHost = is_localhost(host);
 
 // setup API
 var urlTimestamp;
@@ -16,8 +16,6 @@ if (isLocalHost) {
 } else {
   urlTiming = '//' + host + '/stash/timing';
 }
-urlTimestamp = urlTimestamp + '?timestamp=' + Date.now();
-urlTiming = urlTiming + '?timestamp=' + Date.now();
 
 // setup plotly
 var layout = {
@@ -89,14 +87,14 @@ Plotly.newPlot('data', data, layout, config);
 var intervalId = window.setInterval(function () {
 
   // check if timestamp is updated
-  var timestampData = $.get(urlTimestamp, function () { })
+  $.get(urlTimestamp, function () { })
 
     .done(function (data) {
       if (timestamp != data) {
         timestamp = data;
 
         // get new data
-        var apiData = $.getJSON(urlTiming, function () { })
+        $.getJSON(urlTiming, function () { })
           .done(function (data) {
 
             // case draw new plot