Changes in status tab in the web interface

code/html/custom.css

@@ -130,3 +130,22 @@ input[name=upgrade] {
     margin-top: -50px;
     margin-left: -200px;
 }
+
+div.state {
+    border-top: 1px solid #eee;
+    margin-top: 20px;
+    padding-top: 30px;
+}
+
+.state div {
+    font-size: 80%;
+}
+
+.state span {
+    font-size: 80%;
+    font-weight: bold;
+}
+
+.right {
+    text-align: right;
+}

code/html/custom.js

@@ -449,6 +449,13 @@ function processData(data) {
             return;
         }
 
+        // Look for SPANs
+        var element = $("span[name=" + key + "]");
+        if (element.length > 0) {
+            element.html(data[key]);
+            return;
+        }
+
         // Look for SELECTs
         var element = $("select[name=" + key + "]");
         if (element.length > 0) {

code/html/index.html

@@ -143,44 +143,12 @@
                         <form class="pure-form pure-form-aligned">
                             <fieldset>
 
-                                <div class="pure-g">
-                                    <label class="pure-u-1 pure-u-sm-1-4" for="manufacturer">Manufacturer</label>
-                                    <input class="pure-u-1 pure-u-sm-3-4" type="text" name="manufacturer" readonly />
-                                </div>
-
-                                <div class="pure-g">
-                                    <label class="pure-u-1 pure-u-sm-1-4" for="device">Device</label>
-                                    <input class="pure-u-1 pure-u-sm-3-4" type="text" name="device" readonly />
-                                </div>
-
-                                <div class="pure-g">
-                                    <label class="pure-u-1 pure-u-sm-1-4" for="chipid">Chip ID</label>
-                                    <input class="pure-u-1 pure-u-sm-3-4" type="text" name="chipid" readonly />
-                                </div>
-
-                                <div class="pure-g">
-                                    <label class="pure-u-1 pure-u-sm-1-4" for="mac">MAC</label>
-                                    <input class="pure-u-1 pure-u-sm-3-4" type="text" name="mac" readonly />
-                                </div>
-
-                                <div class="pure-g">
-                                    <label class="pure-u-1 pure-u-sm-1-4" for="network">Network</label>
-                                    <input class="pure-u-1 pure-u-sm-3-4" type="text" name="network" readonly />
-                                </div>
-
-                                <div class="pure-g">
-                                    <label class="pure-u-1 pure-u-sm-1-4" for="deviceip">IP</label>
-                                    <input class="pure-u-1 pure-u-sm-3-4" type="text" name="deviceip" readonly />
-                                </div>
-
-                                <div class="pure-g">
-                                    <label class="pure-u-1 pure-u-sm-1-4" for="mqtt">MQTT Status</label>
-                                    <input class="pure-u-1 pure-u-sm-3-4" type="text" name="mqttStatus" readonly />
+                                <div id="relays">
                                 </div>
 
-                                <div class="pure-g">
-                                    <label class="pure-u-1 pure-u-sm-1-4" for="ntp">NTP Status</label>
-                                    <input class="pure-u-1 pure-u-sm-3-4" type="text" name="ntpStatus" readonly />
+                                <div class="pure-g module module-color">
+                                    <label class="pure-u-1 pure-u-sm-1-4">Color</label>
+                                    <input class="pure-u-1 pure-u-sm-1-4" data-wcp-layout="block" name="color" readonly />
                                 </div>
 
                                 <div class="pure-g module module-analog">
@@ -233,12 +201,39 @@
                                     <input class="pure-u-1 pure-u-sm-3-4" type="text" name="powPowerFactor" readonly />
                                 </div>
 
-                                <div id="relays">
-                                </div>
+                                <div class="pure-u-1 state">
+
+                                    <div class="pure-u-1 pure-u-sm-11-24">Manufacturer</div>
+                                    <div class="pure-u-1 pure-u-sm-11-24"><span class="right" name="manufacturer"></span></div>
+
+                                    <div class="pure-u-1 pure-u-sm-11-24">Device</div>
+                                    <div class="pure-u-1 pure-u-sm-11-24"><span class="right" name="device"></span></div>
+
+                                    <div class="pure-u-1 pure-u-sm-11-24">Chip ID</div>
+                                    <div class="pure-u-1 pure-u-sm-11-24"><span class="right" name="chipid"></span></div>
+
+                                    <div class="pure-u-1 pure-u-sm-11-24">MAC</div>
+                                    <div class="pure-u-1 pure-u-sm-11-24"><span class="right" name="mac"></span></div>
+
+                                    <div class="pure-u-1 pure-u-sm-11-24">Network</div>
+                                    <div class="pure-u-1 pure-u-sm-11-24"><span class="right" name="network"></span></div>
+
+                                    <div class="pure-u-1 pure-u-sm-11-24">IP</div>
+                                    <div class="pure-u-1 pure-u-sm-11-24"><span class="right" name="deviceip"></span></div>
+
+                                    <div class="pure-u-1 pure-u-sm-11-24">ESPurna Version</div>
+                                    <div class="pure-u-1 pure-u-sm-11-24"><span class="right" name="version"></span></div>
+
+                                    <div class="pure-u-1 pure-u-sm-11-24">ESPurna Build</div>
+                                    <div class="pure-u-1 pure-u-sm-11-24"><span class="right" name="buildDate"></span> <span class="right" name="buildTime"></span></div>
+
+                                    <div class="pure-u-1 pure-u-sm-11-24">MQTT Status</div>
+                                    <div class="pure-u-1 pure-u-sm-11-24"><span class="right" name="mqttStatus"></span></div>
+
+                                    <div class="pure-u-1 pure-u-sm-11-24">NTP Status</div>
+                                    <div class="pure-u-1 pure-u-sm-11-24"><span class="right" name="ntpStatus"></span></div>
+
 
-                                <div class="pure-g module module-color">
-                                    <label class="pure-u-1 pure-u-sm-1-4">Color</label>
-                                    <input class="pure-u-1 pure-u-sm-1-4" data-wcp-layout="block" name="color" readonly />
                                 </div>
 
                             </fieldset>
@@ -318,7 +313,7 @@
                                 </div>
 
                                 <div class="pure-g module module-fauxmo">
-                                    <label class="pure-u-1 pure-u-sm-1-4" for="fauxmoEnabled">Alexa integration</label>
+                                    <div class="pure-u-1 pure-u-sm-1-4"><labelfor="fauxmoEnabled">Alexa integration</label></div>
                                     <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="fauxmoEnabled" tabindex="6" /></div>
                                 </div>
 
@@ -649,8 +644,8 @@
 
         <div id="relayTemplate" class="template">
             <div class="pure-g">
-                <label class="pure-u-1 pure-u-sm-1-4">Switch<span class="relay_id"></span> Status</label>
-                <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" class="relayStatus" data="0" /></div>
+                <div class="pure-u-1 pure-u-sm-1-4"><label>Switch<span class="relay_id"></span> Status</label></div>
+                <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" class="relayStatus pure-u-1 pure-u-sm-1-4" data="0" /></div
             </div>
         </div>