From db1efc0c3fb8dfa3fed0334f5cecc2d7467854b7 Mon Sep 17 00:00:00 2001
From: Jed Fox <git@jedfox.com>
Date: Thu, 6 Apr 2023 10:56:15 -0400
Subject: [PATCH 1/2] Gray out label for up/down/maintenance labels when they
 are zero

---
 src/pages/DashboardHome.vue | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/pages/DashboardHome.vue b/src/pages/DashboardHome.vue
index 2745d91b..19f330c1 100644
--- a/src/pages/DashboardHome.vue
+++ b/src/pages/DashboardHome.vue
@@ -9,15 +9,40 @@
                 <div class="row">
                     <div class="col">
                         <h3>{{ $t("Up") }}</h3>
-                        <span class="num">{{ $root.stats.up }}</span>
+                        <span
+                            :class="[
+                                'num',
+                                $root.stats.up === 0 && 'text-secondary',
+                            ]"
+                        >
+                            {{ $root.stats.up }}
+                        </span>
                     </div>
                     <div class="col">
                         <h3>{{ $t("Down") }}</h3>
-                        <span class="num text-danger">{{ $root.stats.down }}</span>
+                        <span
+                            :class="[
+                                'num',
+                                $root.stats.down > 0
+                                    ? 'text-danger'
+                                    : 'text-secondary',
+                            ]"
+                        >
+                            {{ $root.stats.down }}
+                        </span>
                     </div>
                     <div class="col">
                         <h3>{{ $t("Maintenance") }}</h3>
-                        <span class="num text-maintenance">{{ $root.stats.maintenance }}</span>
+                        <span
+                            :class="[
+                                'num',
+                                $root.stats.maintenance > 0
+                                    ? 'text-maintenance'
+                                    : 'text-secondary',
+                            ]"
+                        >
+                            {{ $root.stats.maintenance }}
+                        </span>
                     </div>
                     <div class="col">
                         <h3>{{ $t("Unknown") }}</h3>

From d6ebcfd8811e6ed96434dc12c7e4211abf55710c Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Thu, 15 Feb 2024 13:08:26 +0100
Subject: [PATCH 2/2] Simplified how the classes are asigned

---
 src/pages/DashboardHome.vue | 22 ++++++----------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/src/pages/DashboardHome.vue b/src/pages/DashboardHome.vue
index 3610bf21..78bee91f 100644
--- a/src/pages/DashboardHome.vue
+++ b/src/pages/DashboardHome.vue
@@ -10,10 +10,8 @@
                     <div class="col">
                         <h3>{{ $t("Up") }}</h3>
                         <span
-                            :class="[
-                                'num',
-                                $root.stats.up === 0 && 'text-secondary',
-                            ]"
+                            class="num"
+                            :class="$root.stats.up === 0 && 'text-secondary'"
                         >
                             {{ $root.stats.up }}
                         </span>
@@ -21,12 +19,8 @@
                     <div class="col">
                         <h3>{{ $t("Down") }}</h3>
                         <span
-                            :class="[
-                                'num',
-                                $root.stats.down > 0
-                                    ? 'text-danger'
-                                    : 'text-secondary',
-                            ]"
+                            class="num"
+                            :class="$root.stats.down > 0 ? 'text-danger' : 'text-secondary'"
                         >
                             {{ $root.stats.down }}
                         </span>
@@ -34,12 +28,8 @@
                     <div class="col">
                         <h3>{{ $t("Maintenance") }}</h3>
                         <span
-                            :class="[
-                                'num',
-                                $root.stats.maintenance > 0
-                                    ? 'text-maintenance'
-                                    : 'text-secondary',
-                            ]"
+                            class="num"
+                            :class="$root.stats.maintenance > 0 ? 'text-maintenance' : 'text-secondary'"
                         >
                             {{ $root.stats.maintenance }}
                         </span>