Feature/alec 238 metrics events

ui/.eslintrc-auto-import.json

@@ -1,66 +1,97 @@
 {
   "globals": {
-    "acceptHMRUpdate": true,
+    "EffectScope": true,
     "asyncComputed": true,
     "autoResetRef": true,
+    "computed": true,
     "computedAsync": true,
     "computedEager": true,
     "computedInject": true,
     "computedWithControl": true,
     "controlledComputed": true,
     "controlledRef": true,
+    "createApp": true,
     "createEventHook": true,
     "createGlobalState": true,
     "createInjectionState": true,
-    "createPinia": true,
     "createReactiveFn": true,
     "createSharedComposable": true,
     "createUnrefFn": true,
+    "customRef": true,
     "debouncedRef": true,
     "debouncedWatch": true,
-    "defineStore": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
     "eagerComputed": true,
+    "effectScope": true,
     "extendRef": true,
-    "getActivePinia": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
     "ignorableWatch": true,
+    "inject": true,
     "isDefined": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
     "makeDestructurable": true,
-    "mapActions": true,
-    "mapGetters": true,
-    "mapState": true,
-    "mapStores": true,
-    "mapWritableState": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
     "onClickOutside": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
     "onKeyStroke": true,
     "onLongPress": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
     "onStartTyping": true,
+    "onUnmounted": true,
+    "onUpdated": true,
     "pausableWatch": true,
+    "provide": true,
     "reactify": true,
     "reactifyObject": true,
+    "reactive": true,
     "reactiveComputed": true,
     "reactiveOmit": true,
     "reactivePick": true,
+    "readonly": true,
+    "ref": true,
     "refAutoReset": true,
     "refDebounced": true,
     "refDefault": true,
     "refThrottled": true,
     "refWithControl": true,
+    "resolveComponent": true,
     "resolveRef": true,
     "resolveUnref": true,
-    "setActivePinia": true,
-    "setMapStoreSuffix": true,
-    "storeToRefs": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
     "syncRef": true,
     "syncRefs": true,
     "templateRef": true,
     "throttledRef": true,
     "throttledWatch": true,
+    "toRaw": true,
     "toReactive": true,
+    "toRef": true,
+    "toRefs": true,
+    "triggerRef": true,
     "tryOnBeforeMount": true,
     "tryOnBeforeUnmount": true,
     "tryOnMounted": true,
     "tryOnScopeDispose": true,
     "tryOnUnmounted": true,
+    "unref": true,
     "unrefElement": true,
     "until": true,
     "useActiveElement": true,
@@ -74,6 +105,7 @@
     "useArraySome": true,
     "useAsyncQueue": true,
     "useAsyncState": true,
+    "useAttrs": true,
     "useBase64": true,
     "useBattery": true,
     "useBluetooth": true,
@@ -85,7 +117,9 @@
     "useColorMode": true,
     "useConfirmDialog": true,
     "useCounter": true,
+    "useCssModule": true,
     "useCssVar": true,
+    "useCssVars": true,
     "useCurrentElement": true,
     "useCycleList": true,
     "useDark": true,
@@ -165,6 +199,7 @@
     "useScrollLock": true,
     "useSessionStorage": true,
     "useShare": true,
+    "useSlots": true,
     "useSpeechRecognition": true,
     "useSpeechSynthesis": true,
     "useStepper": true,
@@ -204,12 +239,16 @@
     "useWindowFocus": true,
     "useWindowScroll": true,
     "useWindowSize": true,
+    "watch": true,
     "watchArray": true,
     "watchAtMost": true,
     "watchDebounced": true,
+    "watchEffect": true,
     "watchIgnorable": true,
     "watchOnce": true,
     "watchPausable": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true,
     "watchThrottled": true,
     "watchTriggerable": true,
     "watchWithFilter": true,

ui/auto-imports.d.ts

@@ -1,67 +1,98 @@
 // Generated by 'unplugin-auto-import'
 export {}
 declare global {
-  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
+  const EffectScope: typeof import('vue')['EffectScope']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
+  const computed: typeof import('vue')['computed']
   const computedAsync: typeof import('@vueuse/core')['computedAsync']
   const computedEager: typeof import('@vueuse/core')['computedEager']
   const computedInject: typeof import('@vueuse/core')['computedInject']
   const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
   const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
   const controlledRef: typeof import('@vueuse/core')['controlledRef']
+  const createApp: typeof import('vue')['createApp']
   const createEventHook: typeof import('@vueuse/core')['createEventHook']
   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
-  const createPinia: typeof import('pinia')['createPinia']
   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
+  const customRef: typeof import('vue')['customRef']
   const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
-  const defineStore: typeof import('pinia')['defineStore']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
+  const effectScope: typeof import('vue')['effectScope']
   const extendRef: typeof import('@vueuse/core')['extendRef']
-  const getActivePinia: typeof import('pinia')['getActivePinia']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
+  const inject: typeof import('vue')['inject']
   const isDefined: typeof import('@vueuse/core')['isDefined']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
-  const mapActions: typeof import('pinia')['mapActions']
-  const mapGetters: typeof import('pinia')['mapGetters']
-  const mapState: typeof import('pinia')['mapState']
-  const mapStores: typeof import('pinia')['mapStores']
-  const mapWritableState: typeof import('pinia')['mapWritableState']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
   const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
   const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
   const onLongPress: typeof import('@vueuse/core')['onLongPress']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
   const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
+  const provide: typeof import('vue')['provide']
   const reactify: typeof import('@vueuse/core')['reactify']
   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
+  const reactive: typeof import('vue')['reactive']
   const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
   const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
   const reactivePick: typeof import('@vueuse/core')['reactivePick']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
   const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
   const refDebounced: typeof import('@vueuse/core')['refDebounced']
   const refDefault: typeof import('@vueuse/core')['refDefault']
   const refThrottled: typeof import('@vueuse/core')['refThrottled']
   const refWithControl: typeof import('@vueuse/core')['refWithControl']
+  const resolveComponent: typeof import('vue')['resolveComponent']
   const resolveRef: typeof import('@vueuse/core')['resolveRef']
   const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
-  const setActivePinia: typeof import('pinia')['setActivePinia']
-  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
-  const storeToRefs: typeof import('pinia')['storeToRefs']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
   const syncRef: typeof import('@vueuse/core')['syncRef']
   const syncRefs: typeof import('@vueuse/core')['syncRefs']
   const templateRef: typeof import('@vueuse/core')['templateRef']
   const throttledRef: typeof import('@vueuse/core')['throttledRef']
   const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
+  const toRaw: typeof import('vue')['toRaw']
   const toReactive: typeof import('@vueuse/core')['toReactive']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const triggerRef: typeof import('vue')['triggerRef']
   const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
   const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
   const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
   const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
   const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
+  const unref: typeof import('vue')['unref']
   const unrefElement: typeof import('@vueuse/core')['unrefElement']
   const until: typeof import('@vueuse/core')['until']
   const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
@@ -75,6 +106,7 @@ declare global {
   const useArraySome: typeof import('@vueuse/core')['useArraySome']
   const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
   const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
+  const useAttrs: typeof import('vue')['useAttrs']
   const useBase64: typeof import('@vueuse/core')['useBase64']
   const useBattery: typeof import('@vueuse/core')['useBattery']
   const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
@@ -86,7 +118,9 @@ declare global {
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
   const useCounter: typeof import('@vueuse/core')['useCounter']
+  const useCssModule: typeof import('vue')['useCssModule']
   const useCssVar: typeof import('@vueuse/core')['useCssVar']
+  const useCssVars: typeof import('vue')['useCssVars']
   const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
   const useCycleList: typeof import('@vueuse/core')['useCycleList']
   const useDark: typeof import('@vueuse/core')['useDark']
@@ -166,6 +200,7 @@ declare global {
   const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
   const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
   const useShare: typeof import('@vueuse/core')['useShare']
+  const useSlots: typeof import('vue')['useSlots']
   const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
   const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
   const useStepper: typeof import('@vueuse/core')['useStepper']
@@ -205,12 +240,16 @@ declare global {
   const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
   const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
   const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
+  const watch: typeof import('vue')['watch']
   const watchArray: typeof import('@vueuse/core')['watchArray']
   const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
   const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
+  const watchEffect: typeof import('vue')['watchEffect']
   const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
   const watchOnce: typeof import('@vueuse/core')['watchOnce']
   const watchPausable: typeof import('@vueuse/core')['watchPausable']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
   const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
   const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
   const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']

ui/src/components/AlarmFilters.vue

@@ -64,10 +64,13 @@ const alarmSelected = (id: number) => {
 }
 
 const handleClearAction = async () => {
-	await sendClearAlarms(state.selectedAlarms)
-	situationStore.getSituation(props.situationId)
-	state.selectedAlarms = []
-	selectAll.value = false
+	if (state.selectedAlarms.length) {
+		await sendClearAlarms(state.selectedAlarms)
+		situationStore.selectedSituation = props.situationId
+		situationStore.getSituation(props.situationId)
+		state.selectedAlarms = []
+		selectAll.value = false
+	}
 }
 </script>
 
@@ -89,7 +92,10 @@ const handleClearAction = async () => {
 					ALL
 				</FeatherChip>
 				<FeatherChip
-					:class="{ clicked: selectedFilters.includes(severity) }"
+					:class="[
+						{ clicked: selectedFilters.includes(severity) },
+						`${severity?.toLowerCase()}-bg`
+					]"
 					v-for="severity in alarmFilters"
 					:key="severity"
 					@click="handleAlarmFilters(severity)"
@@ -162,10 +168,9 @@ const handleClearAction = async () => {
 	padding: 5px;
 	padding-bottom: 10px;
 }
-
 .clicked {
 	border: 2px solid $dark-blue !important;
-	background-color: rgb(212, 212, 212) !important;
+	background-color: #e6e6e6 !important;
 }
 .alarm-list {
 	display: flex;

ui/src/components/EventsList.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { TEvent } from '@/types/TSituation'
+import { formatDate } from '@/helpers/utils'
+
+const props = defineProps<{
+	events: TEvent[]
+}>()
+</script>
+
+<template>
+	<strong>Events:</strong>
+	<div class="event-description" v-for="event in props.events" :key="event.id">
+		<div
+			class="mark"
+			:class="[`${event.severity.toLowerCase()}-bg dark`]"
+		></div>
+		<div>{{ formatDate(event.createTime) }} - {{ event.source }}</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/variables.scss';
+
+.event-description {
+	margin-left: 30px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.mark {
+	width: 14px;
+	height: 3px;
+	margin-right: 8px;
+}
+</style>