Base

Author: featherbear

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "compression": "^1.7.1",
+    "dayjs": "^1.11.5",
     "express": "^4.18.1",
     "sass": "^1.55.0",
     "sirv": "^1.0.0",

src/components/Clock.ts

@@ -0,0 +1,10 @@
+import { readable } from 'svelte/store'
+import dayjs from 'dayjs'
+
+function update() {
+  return dayjs()
+}
+export default readable(update(), set => {
+  let interval = setInterval(() => set(update()), 1000)
+  return () => clearInterval(interval)
+})

src/components/payload/Row.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type Payload from "./types/Payload";
+  export let data: Payload;
+
+  import dayjs from 'dayjs'
+</script>
+
+<tr>
+    <td>
+        {dayjs(data.timestamp).format("DD/MM/YY hh:mm:ss a")}
+    </td>
+    <td>
+        {data.code}
+    </td>
+    <td>
+        <pre>{JSON.stringify(data.data, null, 4)}</pre>
+    </td>
+</tr>

src/components/payload/types/Payload.ts

@@ -0,0 +1,5 @@
+export default interface Payload<T = any> {
+    code: string
+    data: T,
+    timestamp: number
+}

src/routes/index.svelte

@@ -3,6 +3,8 @@
   import { onMount } from "svelte";
 
   import type { Socket } from "socket.io-client";
+  import Row from "../components/payload/Row.svelte";
+  import type Payload from "../components/payload/types/Payload";
   let client: Socket;
 
   let messages = [];
@@ -14,9 +16,15 @@
     );
 
     console.log("Ready");
-    client.on("p", function (data: { code: string; data: any }) {
+    client.on("p", function (data: Payload) {
       updateType(data.code);
-      messages = [data, ...messages];
+      messages = [
+        {
+          ...data,
+          data: JSON.parse(data.data),
+        },
+        ...messages,
+      ];
     });
   });
 
@@ -56,9 +64,7 @@
 </div>
 
 {#each messages.filter(({ code }) => activeTypes.includes(code)) as data}
-  <pre>
-    {JSON.stringify(data, null, 2)}
-  </pre>
+  <Row {data} />
 {/each}
 
 <style lang="scss">

src/server.ts

@@ -6,6 +6,7 @@ import * as sapper from '@sapper/server';
 import { Server as HTTPServer } from 'http'
 import { Server as SocketIOServer } from 'socket.io'
 import { Client as SLAPI } from 'presonus-studiolive-api'
+import type Payload from './components/payload/types/Payload';
 
 const { PORT, NODE_ENV } = process.env;
 const dev = NODE_ENV === 'development';
@@ -25,7 +26,8 @@ app
 let client = new SLAPI("192.168.0.19")
 
 client.on('data', (data) => {
-    io.emit('p', data)
+    let payload: Payload = { code: data.code, data: JSON.stringify(data), timestamp: new Date().getTime() }
+    io.emit('p', payload)
 })
 
 server.listen(Number(PORT), '0.0.0.0', () => {

yarn.lock

@@ -968,6 +968,11 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
+"@rgossiaux/svelte-headlessui@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@rgossiaux/svelte-headlessui/-/svelte-headlessui-1.0.2.tgz#9493251a40cd56d8bdc8f0f64623d886bb872b1e"
+  integrity sha512-sauopYTSivhzXe1kAvgawkhyYJcQlK8Li3p0d2OtcCIVprOzdbard5lbqWB4xHDv83zAobt2mR08oizO2poHLQ==
+
 "@rollup/plugin-babel@^5.0.0":
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@@ -1493,6 +1498,11 @@ cors@~2.8.5:
     object-assign "^4"
     vary "^1"
 
+dayjs@^1.11.5:
+  version "1.11.5"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.5.tgz#00e8cc627f231f9499c19b38af49f56dc0ac5e93"
+  integrity sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA==
+
 [email protected]:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"