updated offlinelist

src/components/OffLineList.vue

@@ -1,54 +0,0 @@
-<template>
-  <div class="offline-list shadow-box mb-4">
-    <h3>🚨 Offline Devices</h3>
-
-    <ul class="list-unstyled" v-if="offlineMonitors.length > 0">
-      <li
-        v-for="monitor in offlineMonitors"
-        :key="monitor.id"
-        class="flashing-red mb-2"
-      >
-        <router-link :to="`/dashboard/${monitor.id}`" class="text-danger">
-          {{ monitor.name }}
-        </router-link>
-      </li>
-    </ul>
-
-    <div v-else>
-      ✅ All devices online
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  computed: {
-    offlineMonitors() {
-      const monitors = Object.values(this.$root.monitorList || {});
-      const heartbeats = this.$root.lastHeartbeatList || {};
-
-      return monitors
-        .filter((monitor) => {
-          const status = heartbeats[monitor.id]?.status;
-          return status === 0;
-        })
-        .sort((a, b) => a.name.localeCompare(b.name));
-    },
-  },
-};
-</script>
-
-<style scoped>
-.flashing-red {
-  animation: flash 1.5s infinite;
-  font-weight: bold;
-}
-@keyframes flash {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-}
-</style>

src/components/OfflineList.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="offline-list shadow-box mb-4">
+        <h3>Offline Devices</h3>
+
+        <ul v-if="offlineMonitors.length > 0" class="list-unstyled">
+            <li
+                v-for="monitor in offlineMonitors"
+                :key="monitor.id"
+                class="flashing-red mb-2"
+            >
+                <router-link
+                    :to="`/dashboard/${monitor.id}`"
+                    class="text-danger"
+                >
+                    {{ monitor.name }}
+                </router-link>
+            </li>
+        </ul>
+
+        <div v-else>
+            ✅ All devices online
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "OfflineList",
+    computed: {
+        offlineMonitors() {
+            const monitors = Object.values(this.$root.monitorList || {});
+            const heartbeats = this.$root.lastHeartbeatList || {};
+            return monitors
+                .filter((m) => heartbeats[m.id]?.status === 0)
+                .sort((a, b) => a.name.localeCompare(b.name));
+        },
+    },
+};
+</script>
+
+<style scoped>
+.flashing-red {
+    animation: flash 1.5s infinite;
+    font-weight: bold;
+}
+
+@keyframes flash {
+    0%, 100% { opacity: 1; }
+    50%      { opacity: 0.4; }
+}
+</style>

src/pages/DashboardHome.vue

@@ -59,7 +59,7 @@
                         </tr>
                     </thead>
                     <tbody>
-                        <tr v-for="(beat, index) in displayedRecords" :key="index" :class="{ 'shadow-box': $root.windowWidth <= 550}">
+                        <tr v-for="(beat, index) in onlineHeartbeats" :key="index" :class="{ 'shadow-box': $root.windowWidth <= 550}">
                             <td class="name-column">
                                 <router-link :to="`/dashboard/${beat.monitorID}`">
                                     {{ $root.monitorList[beat.monitorID]?.name }}
@@ -108,8 +108,8 @@ export default {
     props: {
         calculatedHeight: {
             type: Number,
-            default: 0
-        }
+            default: 0,
+        },
     },
     data() {
         return {
@@ -124,6 +124,11 @@ export default {
             displayedRecords: [],
         };
     },
+    computed: {
+        onlineHeartbeats() {
+            return this.displayedRecords.filter((beat) => beat.status !== 0);
+        },
+    },
     watch: {
         perPage() {
             this.$nextTick(() => {