Add card footer with last updated time as string

src/App.vue

@@ -18,8 +18,8 @@
         justify-content-center
       "
     >
-      <div class="col" v-for="({ name, status }, slug) in printers" :key="slug">
-        <PrinterCard :slug="slug as string" :name="name" :status="status">
+      <div class="col" v-for="(printer, slug) in printers" :key="slug">
+        <PrinterCard :slug="slug as string" v-bind="printer" :now="now">
         </PrinterCard>
       </div>
     </div>
@@ -36,11 +36,15 @@ import PrinterCard from './PrinterCard.vue';
 const printers: Ref<{
   [key: string]: {
     name?: string;
+    lastUpdate: Date;
     status: octoprint.CurrentOrHistoryPayload | null;
   };
 }> = ref({});
 const hasPrinters = computed(() => Object.keys(printers.value).length > 0);
 
+let now: Ref<Date> = ref(new Date());
+setInterval(() => (now.value = new Date()), 1000);
+
 let websocket!: WebSocket;
 
 function connectWebsocket() {
@@ -53,9 +57,10 @@ function connectWebsocket() {
     console.log(event);
 
     if (!(event.printer in printers.value)) {
-      printers.value[event.printer] = { status: null };
+      printers.value[event.printer] = { status: null, lastUpdate: new Date() };
     }
     printers.value[event.printer].name = event.name;
+    printers.value[event.printer].lastUpdate = new Date();
 
     if ('init' in event) {
       printers.value[event.printer].status = null;

src/PrinterCard.vue

@@ -2,7 +2,7 @@
   <div class="card">
     <h3 class="card-header">{{ name || 'Unknown' }}</h3>
     <img class="card-img webcam" :src="'/webcam/' + slug" />
-    <div v-if="status">
+    <div class="card-body" v-if="status">
       <div>{{ status.state.text }}</div>
       <div>Job File Name: {{ status.job.file.name || 'None' }}</div>
       <div v-if="status.progress.completion">
@@ -18,21 +18,40 @@
       </div>
       <div>User: {{ status.job.user || '-' }}</div>
     </div>
+    <div class="card-footer">Last updated {{ lastUpdateString }}</div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import prettyMilliseconds from 'pretty-ms';
 
 import * as octoprint from '../types/octoprint';
 
-defineProps<{
+const props = defineProps<{
   slug: string;
   name?: string;
+  lastUpdate: Date;
+  now: Date;
   status: octoprint.CurrentOrHistoryPayload | null;
 }>();
 
 function formatDuration(seconds: number): string {
   return prettyMilliseconds(seconds * 1000);
 }
+
+const lastUpdateString = computed(() => {
+  if (props.status !== null) {
+    const elapsed = props.now.getTime() - props.lastUpdate.getTime();
+    if (elapsed < 10_000) {
+      return 'seconds ago';
+    } else if (elapsed < 60_000) {
+      return 'less than a minute ago';
+    } else {
+      return (
+        prettyMilliseconds(elapsed, { compact: true, verbose: true }) + ' ago'
+      );
+    }
+  }
+});
 </script>