Update plotstore to use pinia persistence

src/components/charts/PlotConfigurator.vue

@@ -310,7 +310,7 @@ async function loadPlotConfigFromStrategy() {
 }
 
 function savePlotConfig() {
-  plotStore.saveCustomPlotConfig({ [plotConfigNameLoc.value]: plotConfig.value });
+  plotStore.saveCustomPlotConfig(plotConfigNameLoc.value, plotConfig.value);
 }
 
 onMounted(() => {

src/shared/storage.ts

@@ -1,5 +1,5 @@
 import { PlotConfig, EMPTY_PLOTCONFIG, PlotConfigStorage } from '@/types';
-
+// TODO: Outdated, this module can be removed
 const PLOT_CONFIG = 'ft_custom_plot_config';
 const PLOT_CONFIG_NAME = 'ft_selected_plot_config';
 

src/stores/plotConfig.ts

@@ -1,43 +1,58 @@
-import {
+import { EMPTY_PLOTCONFIG, PlotConfig, PlotConfigStorage } from '@/types';
-  getAllPlotConfigNames,
-  getCustomPlotConfig,
-  getPlotConfigName,
-  storeCustomPlotConfig,
-  storePlotConfigName,
-} from '@/shared/storage';
-import { PlotConfigStorage, EMPTY_PLOTCONFIG, PlotConfig } from '@/types';
 import { defineStore } from 'pinia';
 
+const FT_PLOT_CONFIG_KEY = 'ftPlotConfig';
+
+function migratePlotConfigs() {
+  // Legacy config names
+  const PLOT_CONFIG = 'ft_custom_plot_config';
+  const PLOT_CONFIG_NAME = 'ft_selected_plot_config';
+
+  const allConfigs = JSON.parse(localStorage.getItem(PLOT_CONFIG) || '{}');
+  if (Object.keys(allConfigs).length > 0) {
+    console.log('migrating plot configs');
+    const res = {
+      customPlotConfigs: allConfigs,
+      plotConfigName: localStorage.getItem(PLOT_CONFIG_NAME) || 'default',
+    };
+    localStorage.setItem(FT_PLOT_CONFIG_KEY, JSON.stringify(res));
+    // TODO: Remove old settings to avoid constant migration
+    // localStorage.removeItem(PLOT_CONFIG);
+    // localStorage.removeItem(PLOT_CONFIG_NAME);
+  }
+}
+// migratePlotConfigs();
+
 export const usePlotConfigStore = defineStore('plotConfig', {
   state: () => {
     return {
-      customPlotConfig: {} as PlotConfigStorage,
+      customPlotConfigs: {} as PlotConfigStorage,
-      plotConfigName: getPlotConfigName(),
+      plotConfigName: 'default',
-      availablePlotConfigNames: getAllPlotConfigNames(),
-      plotConfig: { ...EMPTY_PLOTCONFIG },
     };
   },
   getters: {
+    availablePlotConfigNames: (state) => Object.keys(state.customPlotConfigs),
+    plotConfig: (state) => state.customPlotConfigs[state.plotConfigName] || { ...EMPTY_PLOTCONFIG },
     // plotConfig: (state) => state.customPlotConfig[state.plotConfigName] || { ...EMPTY_PLOTCONFIG },
   },
   actions: {
-    saveCustomPlotConfig(plotConfig: PlotConfigStorage) {
+    saveCustomPlotConfig(name: string, plotConfig: PlotConfig) {
-      this.customPlotConfig = plotConfig;
+      this.customPlotConfigs[name] = plotConfig;
-      storeCustomPlotConfig(plotConfig);
-      this.availablePlotConfigNames = getAllPlotConfigNames();
     },
     setPlotConfigName(plotConfigName: string) {
       this.plotConfigName = plotConfigName;
-      storePlotConfigName(plotConfigName);
     },
     plotConfigChanged(plotConfigName = '') {
       console.log('plotConfigChanged');
       this.setPlotConfigName(plotConfigName ? plotConfigName : this.plotConfigName);
-      this.plotConfig = getCustomPlotConfig(this.plotConfigName);
     },
     setPlotConfig(plotConfig: PlotConfig) {
       console.log('emit...');
-      this.plotConfig = { ...plotConfig };
+      // this.plotConfig = { ...plotConfig };
     },
   },
+  persist: {
+    key: FT_PLOT_CONFIG_KEY,
+    paths: ['plotConfigName', 'customPlotConfigs'],
+  },
 });