feat: change rendering to better structure

drogue-iot · Apr 1, 2022 · 538ba59 · 538ba59
1 parent 31a9329
commit 538ba59
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 35 deletions.
diff --git a/doppelgaenger-websocket/main.py b/doppelgaenger-websocket/main.py
@@ -1,6 +1,8 @@
 import json
 import os
 import signal
+import sys
+
 import tornado.websocket
 import tornado.httpserver
 import tornado.ioloop
@@ -78,30 +80,7 @@ def get(self):
 
 def sig_handler(sig, frame):
     logger.warning('Caught signal: %s', sig)
-    tornado.ioloop.IOLoop.instance().add_callback(shutdown)
-
-
-MAX_WAIT_SECONDS_BEFORE_SHUTDOWN = 3
-
-
-def shutdown():
-    logger.info('Stopping http server')
-    server.stop()
-
-    logger.info('Will shutdown in %s seconds ...', MAX_WAIT_SECONDS_BEFORE_SHUTDOWN)
-    io_loop = tornado.ioloop.IOLoop.instance()
-
-    deadline = time.time() + MAX_WAIT_SECONDS_BEFORE_SHUTDOWN
-
-    def stop_loop():
-        now = time.time()
-        if now < deadline and (io_loop._callbacks or io_loop._timeouts):
-            io_loop.add_timeout(now + 1, stop_loop)
-        else:
-            io_loop.stop()
-            logging.info('Shutdown')
-
-    stop_loop()
+    os._exit(0)
 
 
 def main():
@@ -114,6 +93,7 @@ def main():
     collection = client[database][application]
 
     global app
+    global loop
 
     app = tornado.web.Application(
         [
@@ -149,7 +129,7 @@ def main():
         if change_stream is not None:
             change_stream.close()
 
-    logger.wan("Exiting...")
+    logger.warning("Exiting...")
 
 
 if __name__ == "__main__":

diff --git a/doppelgaenger-websocket/templates/index.html b/doppelgaenger-websocket/templates/index.html
@@ -28,6 +28,10 @@
         #last-message-container {
             display: none;
         }
+
+        .feature-title {
+            font-weight: bold;
+        }
     </style>
 </head>
 
@@ -70,7 +74,7 @@ <h1>{{ title }}</h1>
 
 <script>
     const showLastMessage = false;
-    // const socketOverride = "wss://dashboard-burrboard.apps.wonderful.iot-playground.org/socket";
+    const socketOverride = "wss://dashboard-ctron-octoprint.apps.wonderful.iot-playground.org/socket";
 
     if(showLastMessage) {
         $("#last-message-container").show();

diff --git a/doppelgaenger-websocket/templates/index.js b/doppelgaenger-websocket/templates/index.js
@@ -19,9 +19,7 @@ function updateDevice(update) {
 <div class="col">
     <div class="card">
         <div class="card-header"></div>
-        <div class="card-body">
-            <p class="card-text"></p>
-        </div>
+        <div class="device-content"></div>
     </div>
 </div>
 `)
@@ -54,16 +52,57 @@ function updateDevice(update) {
 
     }
 
-    const content = $(`<dl></dl>`);
-    for (const feature of Object.keys(state.features).sort()) {
-        const properties = state.features[feature].properties;
-        content.append($(`<dt>${feature}</dt><dd><code>${JSON.stringify(properties, null, 2)}</code></dd>`));
-    }
+    const content = render(state);
 
     // update
-    card.find(".card-text").empty().append(content);
+    card.find(".device-content").empty().append(content);
     card.addClass("updated");
     setTimeout(() => {
         card.removeClass("updated");
     }, 200);
+}
+
+function render(state) {
+    const content = $(`<ul class="list-group list-group-flush"></ul>`);
+    for (const feature of Object.keys(state.features).sort()) {
+        const properties = state.features[feature].properties;
+        content.append(renderFeature(feature, properties))
+    }
+    return content;
+}
+
+function renderFeature(feature, properties) {
+    let timestamp = properties["timestamp"];
+    if (typeof timestamp === "number") {
+        let date = new Date(timestamp);
+        timestamp = date.toISOString();
+    }
+
+    if (typeof timestamp === "string") {
+        delete properties.timestamp;
+        timestamp = ` <span class="badge bg-light text-dark">${timestamp}</span>`;
+    } else {
+        timestamp = ""
+    }
+
+    let content = $(`<div class="row"></div>`);
+    content.append($(`<div class="col feature-title">${feature}${timestamp}</div>`));
+
+    for (const property of Object.keys(properties).sort()) {
+        let value = properties[property];
+
+        const row = $(`<div class="row"></div>`);
+        row.append($(`<div class="col-3 property-title">${property}</div>`));
+
+        const t = typeof value;
+        if (t !== "string" && t !== "boolean" && t !== "number" ) {
+            value = $(`<code><pre>${JSON.stringify(value, null, 2)}</pre></code>`);
+        }
+        row.append($(`<div class="col-9"></div>`).append(value));
+
+        content = content.add(row);
+        //content.append($(`<dt>${property}</dt><dd><code><pre>${JSON.stringify(value, null, 2)}</pre></code></dd>`))
+    }
+
+    return $(`<li class="list-group-item"></li>`).append(content);
 }