From 2ff4ae5a38f225becb0cd4830d5d7f51df708be3 Mon Sep 17 00:00:00 2001
From: Max <ikj1234i@yahoo.com>
Date: Thu, 1 Mar 2018 20:10:19 -0500
Subject: [PATCH] css updates many thx triptolemus

---
 .../www/www-static/index.html                 | 126 ++++++---
 op25/gr-op25_repeater/www/www-static/main.css | 258 +++++++++++++++++-
 op25/gr-op25_repeater/www/www-static/main.js  |  85 ++++--
 3 files changed, 409 insertions(+), 60 deletions(-)
diff --git a/op25/gr-op25_repeater/www/www-static/index.html b/op25/gr-op25_repeater/www/www-static/index.html
index 506e52c..75603db 100644
--- a/op25/gr-op25_repeater/www/www-static/index.html
+++ b/op25/gr-op25_repeater/www/www-static/index.html
@@ -1,44 +1,106 @@
+<!DOCTYPE html>
 <html>
+
 <head>
-<title>OP25</title>
-<link rel="stylesheet" type="text/css" href="main.css">
-<script src="main.js"></script>
-<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
-<meta http-equiv="Content-Language" content="en" />
+
+	<title>OP25</title>
+	<link rel="stylesheet" type="text/css" href="main.css">
+	<script src="main.js"></script>
+	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 </head>
+
 <body onload="javascript:do_onload();">
-<input type="button" name="status" value="STATUS" onclick="javascript:f_select(&quot;status&quot;);" href=""></input>
-&nbsp;&nbsp;|&nbsp;&nbsp;
-<input type="button" name="plot" value="PLOT" onclick="javascript:f_select(&quot;plot&quot;);"></input>
-<br><hr>
-<div id="div_status" style="display: none;">
-<div id="div_s1">
-Waiting for data
-</div>
-<div id="div_s2" style="display: none;">
-</div>
-<div id="div_s3" style="display: none;">
+
 <form method="post" action="#" id="form_scan">
-<input type="button" name="skip" value="SKIP" onclick="javascript:f_scan_button(&quot;skip&quot;);"></input>
-<input type="button" name="hold" value="HOLD" onclick="javascript:f_scan_button(&quot;hold&quot;);"></input>
-<input type="button" name="lockout" value="LOCKOUT" onclick="javascript:f_scan_button(&quot;lockout&quot;);"></input>
+
+<!-- nav bar -->
+
+<div class="nav-bar">
+<ul class="nav-ul">
+<li id="li1" class="nav-li"><input id="b1" class="nav-button" type="button" name="B1" value="Home" method="post" action="" onclick="javascript:f_select(&quot;status&quot;);"></li>
+<li id="li2" class="nav-li"><input id="b2" class="nav-button" type="button" name="B2" value="Plot" method="post" action="" onclick="javascript:f_select(&quot;plot&quot;);"></li>
+<li id="li3" class="nav-li"><input id="b3" class="nav-button" type="button" name="B3" value="About" method="post" action="" onclick="javascript:f_select(&quot;about&quot;);"></li>
+<li id="li4"><span class="copyr"> &copy; 2017, 2018 Max H. Parke KA1RBI</span></li>
+</ul> 
+</div>
+<br>
+<!-- control buttons -->
+
+<div id="controls" class="flex-container">
+
+	<div>
+	<input type="button" class="scan-button" name="skip" value="SKIP" onclick="javascript:f_scan_button(&quot;skip&quot;);">
+	</div>
+
+	<div>
+	<input type="button" class="scan-button" name="hold" value="HOLD" onclick="javascript:f_scan_button(&quot;hold&quot;);">
+	</div>
+
+	<div>
+	<input type="button" class="scan-button" name="lockout" value="LOCKOUT" onclick="javascript:f_scan_button(&quot;lockout&quot;);">
+	</div>
+
+</div>
+
+<!-- copyright div-->
+
+<div id="div_about" style="display:none;">
+	<div class="copyright-text">
+	This program comes with ABSOLUTELY NO WARRANTY.<br>
+	OP25 is free software, and you are welcome to redistribute it<br>
+	under certain conditions.  For further details refer to the "License"
+        link (below).<p>
+	<table border=0>
+	<tr><td>License:</td><td><a href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">https://www.gnu.org/licenses/gpl-3.0.en.html</a></td></tr>
+	<tr><td>Mailing list:</td><td><a href="https://groups.yahoo.com/neo/groups/op25-dev" target="_blank2">https://groups.yahoo.com/neo/groups/op25-dev</a></td></tr>
+	<tr><td>Download:</td><td><tt>git clone https://git.osmocom.org/op25</tt></td></tr>
+	<tr><td>Web site:</td><td><a href="http://op25.osmocom.org" target="_blank3">http://op25.osmocom.org</a></td></tr>
+	</table>
+	</div>
+	<br>
+</div>
+
 </form>
+
+
+<div id="div_status" style="display: none;">
+
+
+
+	<div id="div_s2" class="s2" style="display: none;">
+		<!-- frequency, system, tg display -->
+	</div>
+
+
+	<br>
+
+
+
+	<div id="div_s1" class="s1">
+	<!-- system freq and adjacent sites -->
+
+		Waiting for data...
+	</div>
+	<br><br><br>
+
+	<!-- div_s3 -->
+
+	<div id="div_s3" class="s3" style="display: none;">
+
+		<!-- old location of SKIP HOLD LOCKOUT controls -->
+
+	</div>
+
+
 </div>
-</div>
+
 <div id="div_plot" style="display: none;">
-<img src="1x1.png" id="img0" style="display:none;"><br>
-<img src="1x1.png" id="img1" style="display:none;"><br>
-<img src="1x1.png" id="img2" style="display:none;"><br>
-<img src="1x1.png" id="img3" style="display:none;"><br>
+	<img src="1x1.png" id="img0" style="display:none;" alt="plot"><br>
+	<img src="1x1.png" id="img1" style="display:none;" alt="plot"><br>
+	<img src="1x1.png" id="img2" style="display:none;" alt="plot"><br>
+	<img src="1x1.png" id="img3" style="display:none;" alt="plot"><br>
 </div>
-<br><hr>
-&copy;Copyright 2017, 2018 Max H. Parke KA1RBI<p>
-<font size="-1">
-This program comes with ABSOLUTELY NO WARRANTY.<br>
-OP25 is free software, and you are welcome to redistribute it<br>
-under certain conditions.  For further details refer to this link:
-<a href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">LICENSE</a>
-</font>
+
 <br>
 </body>
 </html>
diff --git a/op25/gr-op25_repeater/www/www-static/main.css b/op25/gr-op25_repeater/www/www-static/main.css
index cad6b17..aee67a5 100644
--- a/op25/gr-op25_repeater/www/www-static/main.css
+++ b/op25/gr-op25_repeater/www/www-static/main.css
@@ -1,5 +1,253 @@
-body {background-color: yellow;}
-table { border-style: solid; background-color: #00c000; border-collapse: collapse}
-th {border-style: solid;}
-td {border-style: solid;}
-input#s_table_nac {text-align: right;}
+#div_status body {
+
+	background-color: LightGray;
+	font-family: Arial, Helvetica, sans-serif;
+
+}
+
+#div_status table { 
+
+	border-style: solid; 
+	background-color: #336699; 
+	border-collapse: collapse;
+	font-family: "Courier New", Courier, Monospace;
+
+}
+
+#div_status th {
+
+	border-style: solid;
+	padding: 3px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #000;
+	font-weight: bold;
+	background: #669999; /* For browsers that do not support gradients */
+	background: linear-gradient(#669999, #77AAAA);
+
+}
+
+#div_status td {
+
+	border-style: solid;
+	padding: 3px;
+
+}
+
+hr {
+	width:   730px;
+	float: left;
+        padding: 0px;
+}
+
+/* the buttons */
+
+.scan-button {
+	/* background-color: #669999; */
+	border-color: black;
+	color: white;
+	padding: 10px 10px;
+	text-decoration: none;
+	margin: 4px 2px;
+	cursor: pointer;
+	width: 100px;
+	font-size: 14px;
+	font-weight: bold;
+	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);
+	background: #669999; /* For browsers that do not support gradients */
+	background: linear-gradient(#669999, #82B0B0);
+}
+
+/* flex container for top buttons */
+
+/*
+the flex properties are more useful when a variable-width is applied, 
+but can be safely left in place even when using a fixed width
+*/
+
+.flex-container {
+  display: flex;
+  width: 730px;
+  justify-content: space-between;
+
+}
+
+.flex-container > div {
+  width: 100px;
+  margin: 0px;
+  text-align: center;
+  line-height: 75px;
+  font-size: 30px;
+}
+
+
+/* main info container for the two tables */
+
+div.info {
+
+	position: relative;
+	width: 730px;
+	height: auto;
+	border: 0px solid #000;
+}
+
+/* system frequencies container that holds the table */
+
+.top {
+
+	text-align: left;
+	border: 0px solid #000;
+
+}
+
+div.system {
+
+	position: absolute;
+	top: 10px;
+	left: 0;
+	width: 48%;
+	height: auto;
+	border: 0px solid #d00
+}
+
+/* adjacent sites container that holds the table */
+
+div.adjacent {
+
+	position: relative;
+	top: 10px;
+	width: 48%;
+	float: right;
+	height: auto;
+	border: 0px solid #00f;
+}
+
+/* labels, values, system and tg text */
+
+.copyr {
+
+	font-family: Arial, Helvetica, sans-serif;
+	font-size: 14px;
+        padding: 20px;
+	color: #484848;
+	float: right;
+}
+
+.label {
+
+	font-family: Arial, Helvetica, sans-serif;
+	color: #484848;
+}
+
+.value {
+
+	font-family: Arial, Helvetica, sans-serif;
+	color: #000000;
+	font-weight: bold;
+}
+
+.systgid {
+
+	font-family: Arial, Helvetica, sans-serif;
+	color: #000060;
+	font-weight: bold;
+	font-size: 24px;
+}
+
+/* the whole NAC string... NAC, freq tsbks, etc. */
+
+.nac {
+
+	font-family: Arial, Helvetica, sans-serif;
+	color: #000060;
+	font-weight: bold;
+	font-size: 20px;
+
+}
+
+/* .s1 .s2 .s3 DIVs for the sections. see index.html */
+
+.s1 {
+	/* empty */
+}
+
+.s2 {
+	border: 1px solid #999;
+	height: auto;
+	width: 720px;
+	padding: 5px;
+	background: LightGray; /* For browsers that do not support gradients */
+	background: linear-gradient(White, Silver);
+	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);
+}
+
+.s3 {
+	/* empty */
+}
+
+.copyright-text {
+
+	font-family: Arial, Helvetica, sans-serif;
+	color: #000060;
+	font-size: 10pt;
+}
+
+.nav-ul {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+	background-color: #bbb;
+	background: linear-gradient(#bbbbbb, #cccccc);
+}
+
+.nav-li {
+	float: left;
+	border-right: 1px solid #000;
+	background: linear-gradient(#bbbbbb, #cccccc);
+}
+
+.nav-li-active {
+	float: left;
+	background-color:   #c0c0c0;
+	color:     #0080c0;
+	border-right: 1px solid #000;
+}
+
+.nav-bar {
+	width: 730px;
+	padding: 0;
+	border: 1px solid #000;
+}
+
+.nav-button {
+	background-color:  #bbb;
+	background: linear-gradient(#bbbbbb, #cccccc);
+	color:     #000;
+	border:   0px;
+	padding:   20px;
+	display:   block;
+	font-size: 14px;
+	font-weight: bold;
+}
+
+
+.nav-button-active {
+	background-color:  #9cc;
+	background: linear-gradient(#8bb, #9cc);
+	color:     #000;
+	border:   0px;
+	padding:   20px;
+	display:   block;
+	font-size: 14px;
+	font-weight: bold;
+}
+
+.nav-button:hover {
+	background-color: #699;
+	background: linear-gradient(#588, #699);
+}
+
+.nav-button-active:hover {
+	background-color: #699;
+	background: linear-gradient(#588, #699);
+}
diff --git a/op25/gr-op25_repeater/www/www-static/main.js b/op25/gr-op25_repeater/www/www-static/main.js
index 353326e..2ad23cb 100644
--- a/op25/gr-op25_repeater/www/www-static/main.js
+++ b/op25/gr-op25_repeater/www/www-static/main.js
@@ -54,8 +54,22 @@ function f_command(ele, command) {
     }
 }
 
+function nav_update(command) {
+	var names = ["b1", "b2", "b3"];
+	var bmap = { "status": "b1", "plot": "b2", "about": "b3" };
+	var id = bmap[command];
+	for (var id1 in names) {
+		b = document.getElementById(names[id1]);
+		if (names[id1] == id) {
+			b.className = "nav-button-active";
+		} else {
+			b.className = "nav-button";
+		}
+	}
+}
+
 function f_select(command) {
-    var div_list = ["status", "plot"];
+    var div_list = ["status", "plot", "about"];
     for (var i=0; i<div_list.length; i++) {
         var ele = document.getElementById("div_" + div_list[i]);
         if (command == div_list[i])
@@ -63,6 +77,12 @@ function f_select(command) {
         else
             ele.style['display'] = "none";
     }
+    var ctl = document.getElementById("controls");
+    if (command == "status")
+        ctl.style['display'] = "";
+    else
+        ctl.style['display'] = "none";
+    nav_update(command);
 }
 
 var http_req = new XMLHttpRequest();
@@ -91,12 +111,14 @@ function rx_update(d) {
     error_val = d["error"];
 }
 
+// frequency, system, and talkgroup display
+
 function change_freq(d) {
-    var html = "Frequency: " + d['freq'] / 1000000.0;
-    html += " <font size=\"+2\"><b>(" + d['system'] + ")</b></font> ";
+    var html = "<span class=\"label\">Frequency: </span><span class=\"value\">" + d['freq'] / 1000000.0;
+    html += "</span> <span class=\"systgid\"> &nbsp;" + d['system'] + " </span> ";
     if (d['tgid'] != null) {
-        html += "Talkgroup ID " + d['tgid'];
-        html += " <font size=\"+2\"><b>(" + d['tag'] + ")</b></font>";
+        html += "<span class=\"label\">Talkgroup ID: </span><span class=\"value\"> " + d['tgid'];
+        html += "</span> <span class=\"systgid\"> &nbsp;" + d['tag'] + " </span>";
     }
     html += "<br>";
     var div_s2 = document.getElementById("div_s2");
@@ -110,15 +132,17 @@ function change_freq(d) {
     }
 }
 
+// adjacent sites table
+
 function adjacent_data(d) {
     if (Object.keys(d).length < 1) {
-        var html = "";
+        var html = "</div>";
         return html;
     }
-    var html = "<p>";
-    html += "<table border=1 borderwidth=0 cellpadding=0 cellspacing=0>";
+    var html = "<div class=\"adjacent\">";
+    html += "<table border=1 borderwidth=0 cellpadding=0 cellspacing=0 width=100%>";
     html += "<tr><th colspan=99 style=\"align: center\">Adjacent Sites</th></tr>";
-    html += "<tr><th>Frequency</th><th>RF Id</th><th>Site Id</th><th>Uplink</th></tr>";
+    html += "<tr><th>Frequency</th><th>RFSS</th><th>Site</th><th>Uplink</th></tr>";
     var ct = 0;
     for (var freq in d) {
         var color = "#d0d0d0";
@@ -127,10 +151,15 @@ function adjacent_data(d) {
         ct += 1;
         html += "<tr style=\"background-color: " + color + ";\"><td>" + freq / 1000000.0 + "</td><td>" + d[freq]["rfid"] + "</td><td>" + d[freq]["stid"] + "</td><td>" + (d[freq]["uplink"] / 1000000.0) + "</td></tr>";
     }
-    html += "</table>";
+    html += "</table></div></div><br><br>";
+
+// end adjacent sites table
+
     return html;
 }
 
+// additional system info: wacn, sysID, rfss, site id, secondary control channels, freq error
+
 function trunk_update(d) {
     var do_hex = {"syid":0, "sysid":0, "wacn": 0};
     var do_float = {"rxchan":0, "txchan":0};
@@ -138,32 +167,36 @@ function trunk_update(d) {
     for (var nac in d) {
         if (!is_digit(nac.charAt(0)))
             continue;
-        html += "<font size=\"+2\"><b>";
+        html += "<span class=\"nac\">";
         html += "NAC " + "0x" + parseInt(nac).toString(16) + " ";
         html += d[nac]['rxchan'] / 1000000.0;
         html += " / ";
         html += d[nac]['txchan'] / 1000000.0;
         html += " tsbks " + d[nac]['tsbks'];
-        html += "</b></font><br>";
-        html += "WACN " + "0x" + parseInt(d[nac]['wacn']).toString(16) + " ";
-        html += "System ID " + "0x" + parseInt(d[nac]['sysid']).toString(16) + " ";
-        html += "RF ID " + d[nac]['rfid'] + " ";
-        html += "Site ID " + d[nac]['stid'] + "<br>";
+        html += "</span><br>";
+
+        html += "<span class=\"label\">WACN: </span>" + "<span class=\"value\">0x" + parseInt(d[nac]['wacn']).toString(16) + " </span>";
+        html += "<span class=\"label\">System ID: </span>" + "<span class=\"value\">0x" + parseInt(d[nac]['sysid']).toString(16) + " </span>";
+        html += "<span class=\"label\">RFSS ID: </span><span class=\"value\">" + d[nac]['rfid'] + " </span>";
+        html += "<span class=\"label\">Site ID: </span><span class=\"value\">" + d[nac]['stid'] + "</span><br>";
         if (d[nac]["secondary"].length) {
-            html += "Secondary control channel(s): ";
+            html += "<span class=\"label\">Secondary control channel(s): </span><span class=\"value\"> ";
             for (i=0; i<d[nac]["secondary"].length; i++) {
                 html += d[nac]["secondary"][i] / 1000000.0;
                 html += " ";
             }
-            html += "<br>";
+            html += "</span><br>";
         }
         if (error_val != null) {
-            html += "Frequency error " + error_val + " Hz. (approx)";
+            html += "<span class=\"label\">Frequency error: </span><span class=\"value\">" + error_val + " Hz. (approx) </span>";
         }
-        html += "<p>";
-        html += "<table border=1 borderwidth=0 cellpadding=0 cellspacing=0>";
+
+// system frequencies table
+
+        html += "<p><div class=\"info\"><div class=\"system\">";
+        html += "<table border=1 borderwidth=0 cellpadding=0 cellspacing=0 width=100%>"; // was width=350
         html += "<tr><th colspan=99 style=\"align: center\">System Frequencies</th></tr>";
-        html += "<tr><th>Frequency</th><th>Last Seen</th><th colspan=2>Talkgoup ID(s)</th><th>Count</th></tr>";
+        html += "<tr><th>Frequency</th><th>Last Seen</th><th colspan=2>Talkgoup ID</th><th>Count</th></tr>";
         var ct = 0;
         for (var freq in d[nac]['frequency_data']) {
             tg2 = d[nac]['frequency_data'][freq]['tgids'][1];
@@ -175,13 +208,17 @@ function trunk_update(d) {
             ct += 1;
             html += "<tr style=\"background-color: " + color + ";\"><td>" + parseInt(freq) / 1000000.0 + "</td><td>" + d[nac]['frequency_data'][freq]['last_activity'] + "</td><td>" + d[nac]['frequency_data'][freq]['tgids'][0] + "</td><td>" + tg2 + "</td><td>" + d[nac]['frequency_data'][freq]['counter'] + "</td></tr>";
         }
-        html += "</table>";
+        html += "</table></div>";
+
+// end system freqencies table
+
         html += adjacent_data(d[nac]['adjacent_data']);
     }
     var div_s1 = document.getElementById("div_s1");
     div_s1.innerHTML = html;
 }
 
+
 function http_req_cb() {
     s = http_req.readyState;
     if (s != 4)
@@ -204,6 +241,8 @@ function do_onload() {
     var ele = document.getElementById("div_status");
     ele.style["display"] = "";
     setInterval(do_update, 1000);
+    b = document.getElementById("b1");
+    b.className = "nav-button-active";
 }
 
 function do_update() {

License:	https://www.gnu.org/licenses/gpl-3.0.en.html
Mailing list:	https://groups.yahoo.com/neo/groups/op25-dev
Download:	`git clone https://git.osmocom.org/op25`
Web site:	http://op25.osmocom.org
Adjacent Sites
Frequency	RF Id	Site Id	Uplink
Frequency	RFSS	Site	Uplink
" + freq / 1000000.0 + "	" + d[freq]["rfid"] + "	" + d[freq]["stid"] + "	" + (d[freq]["uplink"] / 1000000.0) + "
System Frequencies
Frequency	Last Seen	Talkgoup ID(s)		Count
Frequency	Last Seen	Talkgoup ID		Count
" + parseInt(freq) / 1000000.0 + "	" + d[nac]['frequency_data'][freq]['last_activity'] + "	" + d[nac]['frequency_data'][freq]['tgids'][0] + "	" + tg2 + "	" + d[nac]['frequency_data'][freq]['counter'] + "