From 59e0643902027dfee21fe84cd900c1f63fdf2439 Mon Sep 17 00:00:00 2001
From: Jared Burce <jaredr@gmail.com>
Date: Wed, 28 Oct 2020 21:41:29 -0700
Subject: [PATCH] Format status box

---
 static/main.html | 55 ++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 44 insertions(+), 11 deletions(-)
diff --git a/static/main.html b/static/main.html
index b61617c..85111fb 100644
--- a/static/main.html
+++ b/static/main.html
@@ -4,25 +4,50 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>Fáfnir Doorbell</title>
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
+    <style>
+      body {
+          background-color: black;
+          color: white;
+      }
+
+      #status_box {
+          margin: auto;
+          width: 30%;
+          border-style: ridge;
+          border-color: yellow;
+          border-width: 5px;
+          padding: 15px;
+      }
+
+      .status {
+          font-family: monospace;
+          font-size: 250%;
+          font-variant: small-caps;
+      }
+
+      .connected {
+        color: green;
+      }
+
+      .disconnected {
+        color: red;
+      }
+    </style>
   </head>
   <body>
-    <section id="status">
+    <section id="status_box">
       Status:
       <span id="status_line"></span>
-    </section>
-    <section id="log">
-      <h1>Incoming Events</h1>
+      <br><br>
+      Last Ring: <span id="last_ring" class="status"></span>
     </section>
 
     <audio id="chime" src="indoor.mp3"></audio>
     <template id="connected">
-      <span class="connected">Connected</span>
+      <span class="status connected">Connected</span>
     </template>
     <template id="disconnected">
-      <span class="disconnected">Disconnected</span>
-    </template>
-    <template id="ring">
-      <p>Ring!
+      <span class="status disconnected">Disconnected</span>
     </template>
     <script>
       "use strict";
@@ -66,8 +91,16 @@
             if (chime.paused) {
               chime.play();
             }
-            const template = get_template('ring');
-            $('#log').append(template);
+
+            let now = new Date();
+            let hours = now.getHours();
+            let hours12 = (hours + 11) % 12 + 1;
+            let mins = now.getMinutes();
+            mins = (mins < 10) ? '0' + mins : mins;
+            let secs = now.getSeconds();
+            secs = (secs < 10) ? '0' + secs : secs;
+            let demidiemity = (hours / 12)|0 ? 'PM' : 'AM';
+            $('#last_ring').text(`${hours12}:${mins}:${secs} ${demidiemity}`);
           });
         };
 
