Alerter: handle case of no alerts

bluerobotics · Oct 24, 2023 · e30c1c4 · e30c1c4
1 parent 545779c
commit e30c1c4
Showing 1 changed file with 6 additions and 6 deletions.
diff --git a/src/components/widgets/Alerter.vue b/src/components/widgets/Alerter.vue
@@ -4,9 +4,9 @@
       ref="currentAlertBar"
       class="flex items-center justify-between p-1 overflow-hidden rounded cursor-pointer select-none whitespace-nowrap bg-slate-800/75"
     >
-      <p class="mx-1 overflow-hidden text-xl font-medium text-gray-100">{{ currentAlert.message }}</p>
+      <p class="mx-1 overflow-hidden text-xl font-medium text-gray-100">{{ currentAlert?.message }}</p>
       <div class="flex flex-col justify-center mx-1 font-mono text-xs font-semibold leading-3 text-right text-gray-100">
-        <p>{{ formattedDate(currentAlert.time_created || new Date()) }}</p>
+        <p>{{ formattedDate(currentAlert?.time_created || new Date()) }}</p>
         <p>{{ currentAlert.level.toUpperCase() }}</p>
       </div>
     </div>
@@ -16,12 +16,12 @@
       :class="{ 'opacity-0 invisible': !isShowingExpandedAlerts }"
     >
       <div v-for="(alert, i) in sortedAlertsReversed" :key="alert.time_created.toISOString()">
-        <div v-tooltip.right="alert.message" class="flex items-center justify-between whitespace-nowrap">
-          <p class="mx-1 overflow-hidden text-lg font-medium leading-none text-ellipsis">{{ alert.message }}</p>
+        <div v-tooltip.right="alert?.message" class="flex items-center justify-between whitespace-nowrap">
+          <p class="mx-1 overflow-hidden text-lg font-medium leading-none text-ellipsis">{{ alert?.message }}</p>
           <div
             class="flex flex-col justify-center mx-1 font-mono text-xs font-semibold leading-3 text-right text-gray-100"
           >
-            <p>{{ formattedDate(alert.time_created || new Date()) }}</p>
+            <p>{{ formattedDate(alert?.time_created || new Date()) }}</p>
             <p>{{ alert.level.toUpperCase() }}</p>
           </div>
         </div>
@@ -47,7 +47,7 @@ const alertPersistencyInterval = 10 // in seconds
 
 const formattedDate = (datetime: Date): string => format(datetime, 'HH:mm:ss')
 
-const currentAlert = ref(alertStore.alerts[0])
+const currentAlert = ref(alertStore.alerts?.[0] ?? undefined)
 
 // eslint-disable-next-line no-undef
 let currentAlertInterval: NodeJS.Timer | undefined = undefined