From 6ceca2e10b14522caa612fa66a6c9868c32dd0ad Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Fri, 24 Nov 2023 00:31:33 -0300
Subject: [PATCH] Add page to allow selection of which variables to show in the
 overlay subtitles log

---
 src/components/ConfigurationMenu.vue |  6 ++++++
 src/libs/logging.ts                  |  8 +++++---
 src/views/ConfigurationLogsView.vue  | 29 ++++++++++++++++++++++++++++
 3 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 src/views/ConfigurationLogsView.vue

diff --git a/src/components/ConfigurationMenu.vue b/src/components/ConfigurationMenu.vue
index 64d529000..ab00c883e 100644
--- a/src/components/ConfigurationMenu.vue
+++ b/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',
diff --git a/src/libs/logging.ts b/src/libs/logging.ts
index 49f04f6a2..54f1c5673 100644
--- a/src/libs/logging.ts
+++ b/src/libs/logging.ts
@@ -69,6 +69,8 @@ export interface CockpitStandardLogPoint {
  */
 export type CockpitStandardLog = CockpitStandardLogPoint[]
 
+export const DATALOGGER_VARS_SHOW_KEY = 'cockpit-datalogger-overlay-variables'
+
 /**
  * Manager logging vehicle data and others
  */
@@ -76,7 +78,7 @@ 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)
diff --git a/src/views/ConfigurationLogsView.vue b/src/views/ConfigurationLogsView.vue
new file mode 100644
index 000000000..7ca85154b
--- /dev/null
+++ b/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>