[TASK] Init

static/app.css

@@ -0,0 +1,88 @@
+/*https://www.color-hex.com/color-palette/23357*/
+body {
+  margin: 0;
+  background-color: #555;
+}
+#app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+.heartbeats {
+  display: flex;
+  flex: 10px 0 0;
+}
+.heartbeat {
+  /*background-color: #4f5d75;*/
+  background-color: #2d3142;
+  height: 10px;
+  flex: 50% 0 0;
+  /*outline: 1px solid #4f5d75;*/
+  outline: 1px solid #2d3142;
+  z-index: 10;
+}
+.heartbeat.active {
+  background-color: #bfc0c0;
+  outline: 1px solid #bfc0c0;
+}
+.statusblocks {
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1;
+}
+.statusblock {
+  flex: 25% 0 0;
+  background-color: #BE452F;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  font-size: 15vw;
+  outline: 1px solid rgba(181, 165, 150, 0.40);
+  font-weight: bold;
+}
+.statusblock.closed {
+  background-color: #1B4D3E;
+}
+.statusblock div {
+
+}
+.statusrows {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(8, 1fr);
+  grid-column-gap: 0px;
+  grid-row-gap: 0px; 
+  position: absolute;
+  top: 10px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.statusrow {
+  /*display: flex;*/
+  background-color: #BE452F;
+  color: #fff;
+  font-weight: bold;
+  position: relative;
+}
+.statusrow.closed {
+  background-color: #1B4D3E;
+}
+.statusrow > div {
+  /*flex: 33%;*/
+  border-bottom: 1px solid #555;
+  text-align: center;
+  padding: 10px 20px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.statusrow > div > div {
+}

static/index.js

@@ -0,0 +1,60 @@
+const { createApp } = Vue
+createApp({
+  data() {
+    return {
+      message: 'Hello Vue!',
+      //state: 'undefined',
+      heartbeat: false,
+      states: {},
+    }
+  },
+  methods: {
+    heartbeatActive: function (index) {
+      if (index == this.heartbeat) {
+        return 'active';
+      }
+      return '';
+    },
+    statusblockClosed: function (index) {
+      if (this.states[index].closed == true) {
+        return 'closed';
+      }
+      return '';
+    },
+    update: function () {
+      axios.post('/status', {
+        heartbeat: this.heartbeat,
+      })
+      .then((response) => {
+        // handle success
+        //this.state = response.data.state;
+        this.heartbeat = response.data.heartbeat;
+        let states = response.data.states
+        //for (var key in states) {
+        //  if (!states[key]['date']) {
+        //    continue;
+        //  }
+        //  let date = new Date(states[key]['date']);
+        //  states[key]['date'] = date;
+        //}
+        this.states = states;
+
+        console.debug(response.data.states);
+        //console.log(response.data);
+      })
+      .catch(function (error) {
+        // handle error
+        console.log(error);
+      })
+      .finally(function () {
+        // always executed
+      });
+    },
+  },
+  mounted: function() {
+    this.update();
+    setInterval(() => {
+      this.update();
+    }, 2000);
+  }
+}).mount('#app')