From bc2db2e36e6c0cce8278b0b3a85078ac85b71bc6 Mon Sep 17 00:00:00 2001
From: Jona Bastian <151291625+jabamo@users.noreply.github.com>
Date: Mon, 25 Aug 2025 05:01:29 +0200
Subject: [PATCH] fix: HeartbeatBar DOWN status showing green instead of red
 (#6081)

Co-authored-by: Frank Elsinga <frank@elsinga.de>
---
 src/components/HeartbeatBar.vue | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/HeartbeatBar.vue b/src/components/HeartbeatBar.vue
index ad133821e..49377e1bc 100644
--- a/src/components/HeartbeatBar.vue
+++ b/src/components/HeartbeatBar.vue
@@ -17,7 +17,7 @@
             >
                 <div
                     class="beat"
-                    :class="{ 'empty': (beat === 0 || beat === null || beat.status === null), 'down': (beat.status === DOWN), 'pending': (beat.status === PENDING), 'maintenance': (beat.status === MAINTENANCE) }"
+                    :class="getBeatClasses(beat)"
                     :style="beatStyle"
                 />
             </div>
@@ -259,9 +259,9 @@ export default {
             if (seconds < tolerance) {
                 return this.$t("now");
             } else if (seconds < 60 * 60) {
-                return this.$t("time ago", [ (seconds / 60).toFixed(0) + "m" ]);
+                return this.$t("time ago", [ (seconds / 60).toFixed(0) + "m" ] );
             } else {
-                return this.$t("time ago", [ (seconds / 60 / 60).toFixed(0) + "h" ]);
+                return this.$t("time ago", [ (seconds / 60 / 60).toFixed(0) + "h" ] );
             }
         }
     },
@@ -357,6 +357,25 @@ export default {
             return `${this.$root.datetime(beat.time)}${beat.msg ? ` - ${beat.msg}` : ""}`;
         },
 
+        /**
+         * Get CSS classes for a beat element based on its status
+         * @param {object} beat - Beat object containing status information
+         * @returns {object} Object with CSS class names as keys and boolean values
+         */
+        getBeatClasses(beat) {
+            if (beat === 0 || beat === null || beat?.status === null) {
+                return { empty: true };
+            }
+
+            const status = Number(beat.status);
+
+            return {
+                down: status === DOWN,
+                pending: status === PENDING,
+                maintenance: status === MAINTENANCE
+            };
+        },
+
         /**
          * Get the aria-label for accessibility
          * @param {object} beat Beat to get aria-label from