Add page to allow selection of which variables to show in the overlay…

… subtitles log

src/components/ConfigurationMenu.vue

@@ -41,6 +41,7 @@ import ConfigurationAlertsView from '../views/ConfigurationAlertsView.vue'
 import ConfigurationDevelopmentView from '../views/ConfigurationDevelopmentView.vue'
 import ConfigurationGeneralView from '../views/ConfigurationGeneralView.vue'
 import ConfigurationJoystickView from '../views/ConfigurationJoystickView.vue'
+import ConfigurationLogsView from '../views/ConfigurationLogsView.vue'
 
 const store = useMainVehicleStore()
 
@@ -58,6 +59,11 @@ const menus = [
     title: 'Joystick',
     component: ConfigurationJoystickView,
   },
+  {
+    icon: 'mdi-script',
+    title: 'Logs',
+    component: ConfigurationLogsView,
+  },
   {
     icon: 'mdi-bell-ring',
     title: 'Alerts',

src/libs/logging.ts

@@ -69,14 +69,16 @@ export interface CockpitStandardLogPoint {
  */
 export type CockpitStandardLog = CockpitStandardLogPoint[]
 
+export const DATALOGGER_VARS_SHOW_KEY = 'cockpit-datalogger-overlay-variables'
+
 /**
  * Manager logging vehicle data and others
  */
 class DataLogger {
   currentLoggerInterval: ReturnType<typeof setInterval> | undefined = undefined
   currentCockpitLog: CockpitStandardLog = []
   variablesBeingUsed: DatalogVariable[] = []
-  selectedVariablesToShow = useStorage<DatalogVariable[]>('cockpit-datalogger-overlay-variables', [])
+  selectedVariablesToShow: DatalogVariable[] = JSON.parse(localStorage.getItem(DATALOGGER_VARS_SHOW_KEY) ?? '[]')
 
   /**
    * Start an intervaled logging
@@ -196,10 +198,10 @@ Style: Default,Arial,48,&H00FFFFFF,&H000000FF,&H00000000,&H00000000,0,0,0,0,100,
 Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text`
 
     // Try to show, in order, variables the user has decided to show, or variables being used in the application, or all variables.
-    const hasUserSelected = !this.selectedVariablesToShow.value.isEmpty()
+    const hasUserSelected = !this.selectedVariablesToShow.isEmpty()
     const areThereVariablesBeingUsed = !this.variablesBeingUsed.isEmpty()
     const allAvailableVariables = Object.values(DatalogVariable)
-    const variablesToShow = hasUserSelected ? this.selectedVariablesToShow.value : areThereVariablesBeingUsed ? this.variablesBeingUsed : allAvailableVariables
+    const variablesToShow = hasUserSelected ? this.selectedVariablesToShow : areThereVariablesBeingUsed ? this.variablesBeingUsed : allAvailableVariables
 
     log.forEach((logPoint) => {
       const data = Object.entries(logPoint.data)

src/views/ConfigurationLogsView.vue

@@ -0,0 +1,29 @@
+<template>
+  <BaseConfigurationView>
+    <template #title>Logs configuration</template>
+    <template #content>
+      <h1 class="text-lg font-bold text-slate-600">Variables to be show in the overlay subtitles log:</h1>
+      <div class="flex w-[60%] flex-wrap">
+        <v-checkbox
+          v-for="variable in DatalogVariable"
+          :key="variable"
+          v-model="selectedVariablesToShow"
+          :label="variable"
+          :value="variable"
+        ></v-checkbox>
+      </div>
+    </template>
+  </BaseConfigurationView>
+</template>
+
+<script setup lang="ts">
+import { useStorage } from '@vueuse/core'
+import { watch } from 'vue'
+
+import { datalogger, DATALOGGER_VARS_SHOW_KEY, DatalogVariable } from '@/libs/logging'
+
+import BaseConfigurationView from './BaseConfigurationView.vue'
+
+const selectedVariablesToShow = useStorage<DatalogVariable[]>(DATALOGGER_VARS_SHOW_KEY, [])
+watch(selectedVariablesToShow, () => (datalogger.selectedVariablesToShow = selectedVariablesToShow.value))
+</script>