Use SN

src/controllers/PrinterController.ts

@@ -62,13 +62,13 @@ class PrinterController {
   }
 
   static async show(req: Request, res: Response) {
-    const { id } = req.params
+    const { serialNumber } = req.params
     const { take = 32, days = 60 } = req.query
 
     const gte = new Date(Date.now() - 1000 * 60 * 60 * 24 * Number(days))
 
     const printer = await prisma.printer.findUnique({
-      where: { id: Number(id) },
+      where: { serialNumber: serialNumber },
       include: {
         status: {
           where: {

web/src/components/PrinterCard.vue

@@ -2,7 +2,7 @@
   <v-card
     variant="outlined"
     class="printer-card"
-    :to="{ name: 'Printer', params: { id: printer.id } }"
+    :to="{ name: 'Printer', params: { serialNumber: printer.serialNumber } }"
   >
     <v-row no-gutters wrap>
       <v-col cols="2" align-self="center">
@@ -18,7 +18,13 @@
       <v-col cols="4">
         <v-list density="compact">
           <v-list-item>
-            <v-list-item-title>{{ printer.serialNumber }}</v-list-item-title>
+            <v-list-item-title v-if="printer.friendlyName">
+              {{ printer.friendlyName }} ({{ printer.serialNumber }})
+            </v-list-item-title>
+
+            <v-list-item-title v-else>
+              {{ printer.serialNumber }}
+            </v-list-item-title>
             <v-list-item-subtitle>{{ printer.model }}</v-list-item-subtitle>
           </v-list-item>
           <v-list-item>
@@ -194,7 +200,7 @@ const printerAlert = computed(() => {
 
 <style scoped>
 .printer-card {
-  border-color: #555;
+  border-color: #7a7a7a;
 }
 
 .alert {

web/src/router/index.ts

@@ -28,7 +28,7 @@ const routes = [
           import(/* webpackChunkName: "home" */ '@/views/Home.vue')
       },
       {
-        path: ':id',
+        path: ':serialNumber',
         name: 'Printer',
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route