Define a slug in the config, rather than using the name as one

server/server.ts

@@ -13,7 +13,11 @@ import * as octoprint from '../types/octoprint';
 
 const PORT = process.env.PORT || 1234;
 
-type configuration = { printers: { address: string; apikey: string }[] };
+type configuration = {
+  printers: {
+    [key: string]: { address: string; apikey: string }
+  }
+};
 
 // Load config
 const config: configuration = yaml.load(
@@ -48,7 +52,7 @@ app.ws('/ws', function (ws, req) {
 
 app.get('/webcam/:printer', (req, res) => {
   let printer: PrinterStatus | undefined = printerStatuses.find(
-    (p) => p.name === req.params.printer
+    (p) => p.slug === req.params.printer
   );
   if (printer?.webcamURL) {
     req.url = ''; // truncate the url for passing to the proxy
@@ -59,6 +63,7 @@ app.get('/webcam/:printer', (req, res) => {
 app.listen(PORT);
 
 class PrinterStatus {
+  slug: string;
   address: string;
   apikey: string;
 
@@ -68,7 +73,8 @@ class PrinterStatus {
   websocket?: WebSocket;
   lastStatus?: messages.ExtendedMessage;
 
-  constructor(address: string, apikey: string) {
+  constructor(slug: string, address: string, apikey: string) {
+    this.slug = slug;
     this.address = address;
     this.apikey = apikey;
 
@@ -106,7 +112,8 @@ class PrinterStatus {
 
         let ext_event: messages.ExtendedMessage = {
           ...event,
-          printer: this.name!,
+          printer: this.slug,
+          name: this.name,
         };
         broadcastPayload(ext_event);
 
@@ -115,7 +122,7 @@ class PrinterStatus {
         }
       })
       .on('close', () => {
-        console.log('Lost connection to ' + this.name + ' reconnecting...');
+        console.log('Lost connection to ' + this.slug + ' reconnecting...');
         setTimeout(() => this.connect_websocket(authToken), 5000);
       });
   }
@@ -145,15 +152,15 @@ class PrinterStatus {
     if (this.lastStatus) {
       payload = this.lastStatus;
     } else {
-      payload = { init: null, printer: this.name! };
+      payload = { init: null, printer: this.slug, name: this.name };
     }
     ws.send(JSON.stringify(payload));
   }
 }
 
 function initPrinters() {
-  printerStatuses = config.printers.map(
-    (printer) => new PrinterStatus(printer.address, printer.apikey)
+  printerStatuses = Object.entries(config.printers).map(
+    ([slug, printer]) => new PrinterStatus(slug, printer.address, printer.apikey)
   );
 }
 

src/App.vue

@@ -5,9 +5,10 @@
     </div>
     <PrinterCard
       v-else
-      v-for="(status, name) in printers"
-      :key="name"
-      :name="name as string"
+      v-for="({ name, status }, slug) in printers"
+      :key="slug"
+      :slug="slug as string"
+      :name="name"
       :status="status"
     >
     </PrinterCard>
@@ -22,7 +23,10 @@ import * as octoprint from '../types/octoprint';
 import PrinterCard from './PrinterCard.vue';
 
 const printers: Ref<{
-  [key: string]: octoprint.CurrentOrHistoryPayload | null;
+  [key: string]: {
+    name?: string;
+    status: octoprint.CurrentOrHistoryPayload | null;
+  };
 }> = ref({});
 const hasPrinters = computed(() => Object.keys(printers.value).length > 0);
 
@@ -37,12 +41,17 @@ function connectWebsocket() {
     const event: messages.ExtendedMessage = JSON.parse(ev.data as string);
     console.log(event);
 
+    if (!(event.printer in printers.value)) {
+      printers.value[event.printer] = { status: null };
+    }
+    printers.value[event.printer].name = event.name;
+
     if ('init' in event) {
-      printers.value[event.printer] = null;
-    } else if ('current' in event) {
-      printers.value[event.printer] = event.current!;
-    } else if ('history' in event) {
-      printers.value[event.printer] = event.history!;
+      printers.value[event.printer].status = null;
+    } else if ('current' in event && event.current) {
+      printers.value[event.printer].status = event.current;
+    } else if ('history' in event && event.history) {
+      printers.value[event.printer].status = event.history;
     } else if ('remote_ws_status' in event) {
     }
   });

src/PrinterCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="card">
     <div class="card-header">{{ name || 'Unknown' }}</div>
-    <img class="webcam" :src="'/webcam/' + name" />
+    <img class="webcam" :src="'/webcam/' + slug" />
     <div v-if="status">
       <div>{{ status.state.text }}</div>
       <div>Job File Name: {{ status.job.file.name || 'None' }}</div>
@@ -27,7 +27,8 @@ import prettyMilliseconds from 'pretty-ms';
 import * as octoprint from '../types/octoprint';
 
 defineProps<{
-  name: string;
+  slug: string;
+  name?: string;
   status: octoprint.CurrentOrHistoryPayload | null;
 }>();
 

types/messages.d.ts

@@ -2,4 +2,5 @@ import { Message } from './octoprint';
 
 export type ExtendedMessage = (Message | { init?: null }) & {
   printer: string;
+  name?: string;
 };