From f858ece3b6329f0f281b44f4b37d77a090d844a0 Mon Sep 17 00:00:00 2001
From: Douglas Barone <douglasvbarone@gmail.com>
Date: Fri, 30 Jun 2023 08:29:28 -0400
Subject: [PATCH] Added alert icon

---
 web/src/components/PrinterCard.vue | 28 +++++++++++++++++++++++++++-
 web/src/views/Home.vue             |  1 +
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/web/src/components/PrinterCard.vue b/web/src/components/PrinterCard.vue
index 0e4f884..9f99ec1 100644
--- a/web/src/components/PrinterCard.vue
+++ b/web/src/components/PrinterCard.vue
@@ -2,6 +2,13 @@
   <v-card variant="outlined" class="printer-card">
     <div class="d-flex align-center">
       <div class="flex-shrink-1 fill-height" style="width: 128px">
+        <v-icon
+          v-if="printerAlert"
+          class="ma-1 alert"
+          color="warning"
+          icon="mdi-alert"
+          size="large"
+        />
         <printer-img class="pa-2" :model="printer.model" />
       </div>
       <div>
@@ -161,14 +168,33 @@
 </template>
 <script lang="ts" setup>
 import PrinterImg from '@/components/PrinterImg.vue'
+import { computed } from 'vue'
 
-defineProps<{
+const props = defineProps<{
   printer: any
 }>()
+
+const printerAlert = computed(() => {
+  return (
+    props.printer.status[0].tonerBlackLevel < 10 ||
+    (props.printer.cyanTonerModel &&
+      props.printer.status[0].tonerCyanLevel < 10) ||
+    (props.printer.magentaTonerModel &&
+      props.printer.status[0].tonerMagentaLevel < 10) ||
+    (props.printer.yellowTonerModel &&
+      props.printer.status[0].tonerYellowLevel < 10)
+  )
+})
 </script>
 
 <style scoped>
 .printer-card {
   border-color: #efefef;
 }
+
+.alert {
+  position: absolute;
+  top: 0;
+  z-index: 99;
+}
 </style>
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 702ee80..102fe18 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -4,6 +4,7 @@
       <v-col
         cols="12"
         lg="6"
+        xxl="4"
         v-for="printer in appStore.filteredPrinters"
         :key="printer.id"
       >