From f52e5077bfd89aa2732c72bc3b761e69dff6e83b Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Tue, 6 Jun 2023 15:18:50 +0200
Subject: [PATCH 01/20] First version of UserSettingsView

---
 src/components/CogMenu.vue     | 46 +++++++++++++++++-----------------
 src/router/index.ts            |  7 ++++++
 src/views/UserSettingsView.vue | 37 +++++++++++++++++++++++++++
 3 files changed, 67 insertions(+), 23 deletions(-)
 create mode 100644 src/views/UserSettingsView.vue

diff --git a/src/components/CogMenu.vue b/src/components/CogMenu.vue
index 0e3080514..9c1708b15 100644
--- a/src/components/CogMenu.vue
+++ b/src/components/CogMenu.vue
@@ -6,20 +6,17 @@
       </v-btn>
     </template>
     <v-list>
+      <v-list-item :to="{ name: 'UserSettingsView'}">Settings</v-list-item>
       <v-subheader>Theme</v-subheader>
       <v-list-item>
         <v-list-item-action>
-          <v-list-item-action>
-            <ThemeSelector v-model="theme" @input="onThemeChange"/>
-          </v-list-item-action>
+          <ThemeSelector v-model="theme" @input="onThemeChange" />
         </v-list-item-action>
       </v-list-item>
       <v-subheader>Language</v-subheader>
       <v-list-item>
         <v-list-item-action>
-          <v-list-item-action>
-            <locale-control/>
-          </v-list-item-action>
+          <locale-control />
         </v-list-item-action>
       </v-list-item>
       <v-list-item>
@@ -32,26 +29,29 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator'
-import ThemeMixin from '@/mixins/ThemeMixin'
-import ThemeSelector from '@/components/ThemeSelector.vue'
-import LocaleControl from './LocaleControl.vue'
-import packageConfig from '../../package.json'
+  import {
+    Component,
+    Mixins
+  } from 'vue-property-decorator'
+  import ThemeMixin from '@/mixins/ThemeMixin'
+  import ThemeSelector from '@/components/ThemeSelector.vue'
+  import LocaleControl from './LocaleControl.vue'
+  import packageConfig from '../../package.json'
 
-@Component({
-  components: {
-    ThemeSelector,
-    LocaleControl
+  @Component({
+    components: {
+      ThemeSelector,
+      LocaleControl
+    }
+  })
+  export default class CogMenu extends Mixins(ThemeMixin) {
+    packageVersion = packageConfig.version
   }
-})
-export default class CogMenu extends Mixins(ThemeMixin) {
-  packageVersion = packageConfig.version
-}
 </script>
 
 <style scoped>
-.menu {
-  position: relative;
-  z-index: 10000;
-}
+  .menu {
+    position: relative;
+    z-index: 10000;
+  }
 </style>
diff --git a/src/router/index.ts b/src/router/index.ts
index 711828eef..95008ca75 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import VueRouter, { RouteConfig } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import UserSettingsView from '../views/UserSettingsView.vue'
 import SchematicStatusDisplay from '../views/SchematicStatusDisplay.vue'
 import SpatialDisplay from '../views/SpatialDisplay.vue'
 import Silent from '../views/auth/Silent.vue'
@@ -33,6 +34,12 @@ const routesBase: Array<RouteConfig> = [
     meta: { authorize: [] },
     component: HomeView
   },
+  {
+    path: '/settings',
+    name: 'UserSettingsView',
+    meta: { authorize: [] },
+    component: UserSettingsView
+  },
   {
     path: '/login',
     name: 'Login',
diff --git a/src/views/UserSettingsView.vue b/src/views/UserSettingsView.vue
new file mode 100644
index 000000000..b6e115fd9
--- /dev/null
+++ b/src/views/UserSettingsView.vue
@@ -0,0 +1,37 @@
+<template>
+  <v-container>
+    <div v-for="g in groups" :key="g">
+      <h2>{{ g }}</h2>
+      <v-row v-for="(s, i) of settingsForGroup(g)" :key="i" dense>
+        <v-col cols="12" md="6">
+          <v-select v-if="s.type === 'oneOfMultiple'" :label="s.label" v-model="s.value" :items="s.items" outlined dense>
+          </v-select>
+        </v-col>
+      </v-row>
+    </div>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component
+export default class DataView extends Vue {
+  value = 'm/s'
+  settings = [
+    { type: 'oneOfMultiple' , label: 'Wind speed', value: 'm/s', items: ['m/s', 'km/h', 'Bft', 'kts'], group: 'Units'},
+    { type: 'oneOfMultiple',  label: 'Wind direction', value: 'degree', items: ['degree', 'cardinal'], group: 'Units'},
+    { type: 'oneOfMultiple',  label: 'Theme', value: 'auto', items: ['auto', 'light', 'dark'], group: 'Theme'},
+    { type: 'oneOfMultiple',  label: 'Language', value: 'en', items: ['en', 'nl'], group: 'Locale'},
+
+  ]
+  groups = ['Units', 'Theme', 'Locale']
+
+  settingsForGroup(id: string) {
+    return this.settings.filter((s) => s.group === id)
+  }
+}
+</script>
+
+<style scoped>
+</style>

From f6a7b29761802ceec0e567c8bcedc92e00208d44 Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Tue, 6 Jun 2023 15:46:33 +0200
Subject: [PATCH 02/20] Move settings to store

---
 src/store/index.ts                           |  4 ++-
 src/store/modules/user-settings/actions.ts   |  6 +++++
 src/store/modules/user-settings/getters.ts   | 10 ++++++++
 src/store/modules/user-settings/index.ts     | 27 ++++++++++++++++++++
 src/store/modules/user-settings/mutations.ts |  5 ++++
 src/store/modules/user-settings/types.ts     | 18 +++++++++++++
 src/views/UserSettingsView.vue               | 20 ++++++---------
 7 files changed, 77 insertions(+), 13 deletions(-)
 create mode 100644 src/store/modules/user-settings/actions.ts
 create mode 100644 src/store/modules/user-settings/getters.ts
 create mode 100644 src/store/modules/user-settings/index.ts
 create mode 100644 src/store/modules/user-settings/mutations.ts
 create mode 100644 src/store/modules/user-settings/types.ts

diff --git a/src/store/index.ts b/src/store/index.ts
index e4ad3fcba..f1a03a5ca 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -4,6 +4,7 @@ import { RootState } from './types'
 import Alerts from '@/store/modules/alerts'
 import { fewsconfig } from '@/store/modules/fews-config'
 import { systemTime } from '@/store/modules/system-time'
+import { userSettings } from '@/store/modules/user-settings'
 
 Vue.use(Vuex)
 
@@ -17,7 +18,8 @@ const store = new Vuex.Store<RootState>({
   modules: {
     alerts: Alerts,
     systemTime,
-    fewsconfig
+    fewsconfig,
+    userSettings
   }
 })
 
diff --git a/src/store/modules/user-settings/actions.ts b/src/store/modules/user-settings/actions.ts
new file mode 100644
index 000000000..8a3ebe1c1
--- /dev/null
+++ b/src/store/modules/user-settings/actions.ts
@@ -0,0 +1,6 @@
+import { ActionTree } from 'vuex'
+import { RootState } from '../../types'
+import { UserSettingsState } from './types'
+
+export const actions: ActionTree<UserSettingsState, RootState>= {
+}
diff --git a/src/store/modules/user-settings/getters.ts b/src/store/modules/user-settings/getters.ts
new file mode 100644
index 000000000..907ce4847
--- /dev/null
+++ b/src/store/modules/user-settings/getters.ts
@@ -0,0 +1,10 @@
+
+import { GetterTree } from 'vuex';
+import { UserSettingsState } from './types';
+import { RootState } from '../../types';
+
+export const getters: GetterTree<UserSettingsState, RootState> = {
+  settingsForGroup: (state, _getters, _rootState: RootState, rootGetters) => (id: string) => {
+    return state.settings.filter((s) => s.group === id)
+  },
+}
diff --git a/src/store/modules/user-settings/index.ts b/src/store/modules/user-settings/index.ts
new file mode 100644
index 000000000..a8164ee5b
--- /dev/null
+++ b/src/store/modules/user-settings/index.ts
@@ -0,0 +1,27 @@
+
+import { Module } from 'vuex';
+import { UserSettingsState } from './types'
+import { RootState } from '../../types';
+import { getters } from './getters';
+import { actions } from './actions';
+import { mutations } from './mutations';
+
+export const state: UserSettingsState = {
+  settings: [
+    { type: 'oneOfMultiple' , label: 'Wind speed', value: 'm/s', items: ['m/s', 'km/h', 'Bft', 'kts'], group: 'Units'},
+    { type: 'oneOfMultiple',  label: 'Wind direction', value: 'degree', items: ['degree', 'cardinal'], group: 'Units'},
+    { type: 'oneOfMultiple',  label: 'Theme', value: 'auto', items: ['auto', 'light', 'dark'], group: 'Theme'},
+    { type: 'oneOfMultiple',  label: 'Language', value: 'en', items: ['en', 'nl'], group: 'Locale'},
+  ],
+  groups: ['Units', 'Theme', 'Locale']
+};
+
+const namespaced: boolean = true;
+
+export const userSettings: Module<UserSettingsState, RootState> = {
+  namespaced,
+  state,
+  getters,
+  actions,
+  mutations
+}
diff --git a/src/store/modules/user-settings/mutations.ts b/src/store/modules/user-settings/mutations.ts
new file mode 100644
index 000000000..a6c46c4e6
--- /dev/null
+++ b/src/store/modules/user-settings/mutations.ts
@@ -0,0 +1,5 @@
+import { MutationTree } from 'vuex';
+import { UserSettingsState } from './types';
+
+export const mutations: MutationTree<UserSettingsState> = {
+}
diff --git a/src/store/modules/user-settings/types.ts b/src/store/modules/user-settings/types.ts
new file mode 100644
index 000000000..ba826360e
--- /dev/null
+++ b/src/store/modules/user-settings/types.ts
@@ -0,0 +1,18 @@
+export const UserSettingsType = {
+  oneOfMultiple: 'oneOfMultiple',
+} as const
+
+export type UserSettingsType = (typeof UserSettingsType)[keyof typeof UserSettingsType];
+
+export interface UserSettingsItem {
+  type: UserSettingsType;
+  label: string;
+  value: string;
+  items: string[];
+  group: string;
+}
+
+export interface UserSettingsState {
+  settings: UserSettingsItem[]
+  groups: string[]
+}
diff --git a/src/views/UserSettingsView.vue b/src/views/UserSettingsView.vue
index b6e115fd9..ed0896a57 100644
--- a/src/views/UserSettingsView.vue
+++ b/src/views/UserSettingsView.vue
@@ -14,22 +14,18 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
+import { namespace } from 'vuex-class'
+import { UserSettingsItem } from '@/store/modules/user-settings/types'
+
+const userSettingsModule = namespace('userSettings')
 
 @Component
 export default class DataView extends Vue {
-  value = 'm/s'
-  settings = [
-    { type: 'oneOfMultiple' , label: 'Wind speed', value: 'm/s', items: ['m/s', 'km/h', 'Bft', 'kts'], group: 'Units'},
-    { type: 'oneOfMultiple',  label: 'Wind direction', value: 'degree', items: ['degree', 'cardinal'], group: 'Units'},
-    { type: 'oneOfMultiple',  label: 'Theme', value: 'auto', items: ['auto', 'light', 'dark'], group: 'Theme'},
-    { type: 'oneOfMultiple',  label: 'Language', value: 'en', items: ['en', 'nl'], group: 'Locale'},
-
-  ]
-  groups = ['Units', 'Theme', 'Locale']
+  @userSettingsModule.State('groups')
+  groups!: string[]
 
-  settingsForGroup(id: string) {
-    return this.settings.filter((s) => s.group === id)
-  }
+  @userSettingsModule.Getter('settingsForGroup')
+  settingsForGroup!: (id: string) => UserSettingsItem[]
 }
 </script>
 

From 0243775c66019aa457f622445d97940e54741833 Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Wed, 7 Jun 2023 10:27:43 +0200
Subject: [PATCH 03/20] Add icon and favorite

---
 src/store/modules/user-settings/index.ts | 23 +++++++++++++++----
 src/store/modules/user-settings/types.ts |  8 ++++++-
 src/views/UserSettingsView.vue           | 29 +++++++++++++++++++++++-
 3 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/src/store/modules/user-settings/index.ts b/src/store/modules/user-settings/index.ts
index a8164ee5b..1d578c701 100644
--- a/src/store/modules/user-settings/index.ts
+++ b/src/store/modules/user-settings/index.ts
@@ -8,10 +8,25 @@ import { mutations } from './mutations';
 
 export const state: UserSettingsState = {
   settings: [
-    { type: 'oneOfMultiple' , label: 'Wind speed', value: 'm/s', items: ['m/s', 'km/h', 'Bft', 'kts'], group: 'Units'},
-    { type: 'oneOfMultiple',  label: 'Wind direction', value: 'degree', items: ['degree', 'cardinal'], group: 'Units'},
-    { type: 'oneOfMultiple',  label: 'Theme', value: 'auto', items: ['auto', 'light', 'dark'], group: 'Theme'},
-    { type: 'oneOfMultiple',  label: 'Language', value: 'en', items: ['en', 'nl'], group: 'Locale'},
+    { type: 'oneOfMultiple' , label: 'Wind speed', value: 'm/s', items: [
+      { value: 'm/s' },
+      { value: 'km/hl'},
+      { value: 'Bft' },
+      { value: 'kts' }
+    ], group: 'Units'},
+    { type: 'oneOfMultiple',  label: 'Wind direction', value: 'degree', items: [
+      { value: 'degree' },
+      { value: 'cardinal' }
+    ], group: 'Units'},
+    { type: 'oneOfMultiple',  label: 'Theme', value: 'auto', items: [
+      { value: 'auto', icon: 'mdi-theme-light-dark'},
+      { value: 'light', icon: 'mdi-weather-sunny'},
+      { value: 'dark' , icon: 'mdi-weather-night'}
+    ], group: 'Theme'},
+    { type: 'oneOfMultiple',  label: 'Language', value: 'en', items: [
+      { icon: 'fi-au', value: 'en-au' },
+      { icon: 'fi-nl', value: 'nl' }
+    ], group: 'Locale'},
   ],
   groups: ['Units', 'Theme', 'Locale']
 };
diff --git a/src/store/modules/user-settings/types.ts b/src/store/modules/user-settings/types.ts
index ba826360e..37599f82c 100644
--- a/src/store/modules/user-settings/types.ts
+++ b/src/store/modules/user-settings/types.ts
@@ -4,11 +4,17 @@ export const UserSettingsType = {
 
 export type UserSettingsType = (typeof UserSettingsType)[keyof typeof UserSettingsType];
 
+export interface UserSettingsWithIcon {
+  value: string;
+  icon?: string;
+}
+
 export interface UserSettingsItem {
   type: UserSettingsType;
   label: string;
   value: string;
-  items: string[];
+  items: string[] | UserSettingsWithIcon[];
+  favorite?: boolean;
   group: string;
 }
 
diff --git a/src/views/UserSettingsView.vue b/src/views/UserSettingsView.vue
index ed0896a57..b6f994a9c 100644
--- a/src/views/UserSettingsView.vue
+++ b/src/views/UserSettingsView.vue
@@ -1,10 +1,27 @@
 <template>
   <v-container>
+    <h1>Settings</h1>
     <div v-for="g in groups" :key="g">
       <h2>{{ g }}</h2>
       <v-row v-for="(s, i) of settingsForGroup(g)" :key="i" dense>
         <v-col cols="12" md="6">
-          <v-select v-if="s.type === 'oneOfMultiple'" :label="s.label" v-model="s.value" :items="s.items" outlined dense>
+          <v-select v-if="s.type === 'oneOfMultiple'" :label="s.label" v-model="s.value" :items="s.items"
+            :append-outer-icon="s.favorite ? 'mdi-star' : 'mdi-star-outline'"
+            outlined
+            dense
+            item-text="value"
+            @change="(e) => onValueChange(i, e)"
+            @click:append-outer="(e) => onFavoriteChange(i, e)"
+            >
+            <template v-slot:item="{ on, attrs, item}">
+              <v-list-item
+                v-bind="attrs"
+                v-on="on"
+              >
+                <v-icon v-if="item.icon" small class="mr-5">{{ item.icon }}</v-icon>
+                {{ item.value }}
+              </v-list-item>
+            </template>
           </v-select>
         </v-col>
       </v-row>
@@ -16,6 +33,7 @@
 import { Component, Vue } from 'vue-property-decorator'
 import { namespace } from 'vuex-class'
 import { UserSettingsItem } from '@/store/modules/user-settings/types'
+import "flag-icons/css/flag-icons.min.css";
 
 const userSettingsModule = namespace('userSettings')
 
@@ -26,6 +44,15 @@ export default class DataView extends Vue {
 
   @userSettingsModule.Getter('settingsForGroup')
   settingsForGroup!: (id: string) => UserSettingsItem[]
+
+  onValueChange(i: string, e: any) {
+    console.log(i, e)
+  }
+
+  onFavoriteChange(i: string, e: any) {
+    console.log(i, e)
+  }
+
 }
 </script>
 

From 1b35051c41528f37656a06c771119e2150e976c2 Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Wed, 7 Jun 2023 13:36:37 +0200
Subject: [PATCH 04/20] Implement favorites

---
 src/App.vue                                  | 33 +++++++
 src/components/CogMenu.vue                   | 91 ++++++++++++--------
 src/store/helpers.ts                         | 33 +++++++
 src/store/modules/user-settings/getters.ts   | 22 ++++-
 src/store/modules/user-settings/index.ts     | 25 +-----
 src/store/modules/user-settings/mutations.ts | 28 +++++-
 src/store/modules/user-settings/types.ts     |  6 +-
 src/views/UserSettingsView.vue               | 23 ++---
 8 files changed, 189 insertions(+), 72 deletions(-)
 create mode 100644 src/store/helpers.ts

diff --git a/src/App.vue b/src/App.vue
index 3bb9b671f..8154d47f7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,8 +11,10 @@ import Empty from '@/layouts/Empty.vue'
 import { namespace } from 'vuex-class'
 import { WebOcComponent } from '@/store/modules/fews-config/types'
 import { routesViews } from '@/router'
+import { UserSettingsItem } from '@/store/modules/user-settings/types'
 
 const fewsConfigModule = namespace('fewsconfig')
+const userSettingsModule = namespace('userSettings')
 
 @Component({
   components: {
@@ -25,8 +27,11 @@ export default class App extends Vue {
     webOcComponents!: { [key: string]: WebOcComponent }
   @fewsConfigModule.Action('setFewsConfig')
     setFewsConfig!: () => Promise<void>
+  @userSettingsModule.Mutation('add')
+    addUserSetting!: (item: UserSettingsItem) => void
 
   async created(): Promise<void> {
+    this.initUserSettings()
     if (this.$config.authenticationIsEnabled) {
       if (this.$route.path === "/auth/callback") {
         const user = await this.$auth.userManager.signinRedirectCallback()
@@ -41,6 +46,34 @@ export default class App extends Vue {
     this.setRoutes()
   }
 
+
+  initUserSettings () {
+    const settings: UserSettingsItem[] = [
+      { id: 'units.wind-speed', type: 'oneOfMultiple' , label: 'Wind speed', value: 'm/s', items: [
+        { value: 'm/s' },
+        { value: 'km/l'},
+        { value: 'Bft' },
+        { value: 'kts' }
+      ], group: 'Units'},
+      { id: 'units.wind-direction', type: 'oneOfMultiple',  label: 'Wind direction', value: 'degree', items: [
+        { value: 'degree' },
+        { value: 'cardinal' }
+      ], group: 'Units'},
+      { id: 'ui.theme',  type: 'oneOfMultiple',  label: 'Theme', value: 'auto', items: [
+        { value: 'auto', icon: 'mdi-theme-light-dark'},
+        { value: 'light', icon: 'mdi-weather-sunny'},
+        { value: 'dark' , icon: 'mdi-weather-night'}
+      ], group: 'UI'},
+      { id: 'locale.language', type: 'oneOfMultiple',  label: 'Language', value: 'en', items: [
+        { icon: 'fi-au', value: 'en-au' },
+        { icon: 'fi-nl', value: 'nl' }
+      ], group: 'Locale'},
+    ]
+    for (let s of settings) {
+      this.addUserSetting(s)
+    }
+  }
+
   setRoutes(): void {
     Object.values(this.webOcComponents).forEach(webOcComponent => {
       const route = routesViews.find((route) => route.name === webOcComponent.type)
diff --git a/src/components/CogMenu.vue b/src/components/CogMenu.vue
index 9c1708b15..3b5379be5 100644
--- a/src/components/CogMenu.vue
+++ b/src/components/CogMenu.vue
@@ -1,24 +1,35 @@
 <template>
-  <v-menu left bottom class="menu">
+  <v-menu left bottom
+    :close-on-content-click="false"
+    class="menu"
+  >
     <template v-slot:activator="{ on, attrs }">
       <v-btn icon v-bind="attrs" v-on="on">
         <v-icon>mdi-cog</v-icon>
       </v-btn>
     </template>
     <v-list>
-      <v-list-item :to="{ name: 'UserSettingsView'}">Settings</v-list-item>
-      <v-subheader>Theme</v-subheader>
-      <v-list-item>
-        <v-list-item-action>
-          <ThemeSelector v-model="theme" @input="onThemeChange" />
-        </v-list-item-action>
-      </v-list-item>
-      <v-subheader>Language</v-subheader>
-      <v-list-item>
-        <v-list-item-action>
-          <locale-control />
-        </v-list-item-action>
+      <v-subheader>Favorite settings</v-subheader>
+      <v-list-item v-for="(s, i) of listFavorite" :key="i">
+        <v-select v-if="s.type === 'oneOfMultiple'" :label="s.label" v-model="s.value" :items="s.items"
+          outlined
+          dense
+          item-text="value"
+          @change="onValueChange(s)"
+          >
+          <template v-slot:item="{ on, attrs, item}">
+            <v-list-item
+              v-bind="attrs"
+              v-on="on"
+            >
+              <v-icon v-if="item.icon" small class="mr-5">{{ item.icon }}</v-icon>
+              {{ item.value }}
+            </v-list-item>
+          </template>
+        </v-select>
       </v-list-item>
+      <v-divider />
+      <v-list-item :to="{ name: 'UserSettingsView'}">All Settings</v-list-item>
       <v-list-item>
         <v-list-item-content>
           <v-list-item-title>Version {{ packageVersion }}</v-list-item-title>
@@ -29,29 +40,41 @@
 </template>
 
 <script lang="ts">
-  import {
-    Component,
-    Mixins
-  } from 'vue-property-decorator'
-  import ThemeMixin from '@/mixins/ThemeMixin'
-  import ThemeSelector from '@/components/ThemeSelector.vue'
-  import LocaleControl from './LocaleControl.vue'
-  import packageConfig from '../../package.json'
-
-  @Component({
-    components: {
-      ThemeSelector,
-      LocaleControl
-    }
-  })
-  export default class CogMenu extends Mixins(ThemeMixin) {
-    packageVersion = packageConfig.version
+import {
+  Component,
+  Mixins
+} from 'vue-property-decorator'
+import ThemeMixin from '@/mixins/ThemeMixin'
+import packageConfig from '../../package.json'
+
+import { namespace } from 'vuex-class'
+import { UserSettingsItem } from '@/store/modules/user-settings/types'
+import "flag-icons/css/flag-icons.min.css"
+
+const userSettingsModule = namespace('userSettings')
+
+@Component
+export default class CogMenu extends Mixins(ThemeMixin) {
+  @userSettingsModule.Getter('listFavorite')
+  listFavorite!: UserSettingsItem[]
+
+  packageVersion = packageConfig.version
+  items: UserSettingsItem[] = []
+
+  created(): void {
+    console.log(this.listFavorite)
+    this.items = this.listFavorite
   }
+
+  onValueChange(item: UserSettingsItem) {
+    console.log(item)
+  }
+}
 </script>
 
 <style scoped>
-  .menu {
-    position: relative;
-    z-index: 10000;
-  }
+.menu {
+  position: relative;
+  z-index: 10000;
+}
 </style>
diff --git a/src/store/helpers.ts b/src/store/helpers.ts
new file mode 100644
index 000000000..d64f54150
--- /dev/null
+++ b/src/store/helpers.ts
@@ -0,0 +1,33 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export function normalizeRelations(data: any, fields: string[]) {
+  return {
+      ...data,
+      ...fields.reduce((prev: any, field: string) => ({
+        ...prev,
+        [field]: Array.isArray(data[field])
+          ? data[field].map((x: any) => { return x.id })
+          : data[field].id,
+      }), {}),
+    }
+}
+
+export function resolveRelations(data: any, fields: string[], rootGetters: any) {
+  if (fields.length > 0) {
+    const result = {
+      ...data,
+      ...fields.reduce((prev: any, field: string) => ({
+        ...prev,
+        [field]: Array.isArray(data[field]) ?
+          data[field].map((x: any) => {
+            const item = rootGetters[`${field}/find`](x)
+            return item
+          }) :
+          rootGetters[`${field}/find`](data[field]),
+      }), {}),
+    }
+    return result
+  } else {
+    return data
+  }
+}
diff --git a/src/store/modules/user-settings/getters.ts b/src/store/modules/user-settings/getters.ts
index 907ce4847..28c1b2b47 100644
--- a/src/store/modules/user-settings/getters.ts
+++ b/src/store/modules/user-settings/getters.ts
@@ -1,10 +1,26 @@
 
 import { GetterTree } from 'vuex';
-import { UserSettingsState } from './types';
+import { UserSettingsItem, UserSettingsState } from './types';
+import { resolveRelations } from '../../helpers';
 import { RootState } from '../../types';
 
 export const getters: GetterTree<UserSettingsState, RootState> = {
-  settingsForGroup: (state, _getters, _rootState: RootState, rootGetters) => (id: string) => {
-    return state.settings.filter((s) => s.group === id)
+  find: (state: UserSettingsState, _getters, _rootState: RootState, rootGetters) => (id: string) => {
+    return resolveRelations(state.byId[id], [], rootGetters)
+  },
+  list: (state: UserSettingsState, getters) => {
+    const result = state.allIds.map(id => getters.find(id))
+    return result
+  },
+  listFavorite: (state: UserSettingsState, getters) => {
+    const result = state.allIds.map(id => getters.find(id))
+    function isFavorite(item: UserSettingsItem): boolean {
+        return ( item.favorite === true )
+    }
+    return result.filter((item) => { return isFavorite(item) } )
+  },
+  listByGroup: (state, getters, _rootState: RootState, rootGetters) => (id: string) => {
+    const result = state.allIds.map(id => getters.find(id))
+    return result.filter((s) => s.group === id)
   },
 }
diff --git a/src/store/modules/user-settings/index.ts b/src/store/modules/user-settings/index.ts
index 1d578c701..37ddb6bb1 100644
--- a/src/store/modules/user-settings/index.ts
+++ b/src/store/modules/user-settings/index.ts
@@ -7,28 +7,9 @@ import { actions } from './actions';
 import { mutations } from './mutations';
 
 export const state: UserSettingsState = {
-  settings: [
-    { type: 'oneOfMultiple' , label: 'Wind speed', value: 'm/s', items: [
-      { value: 'm/s' },
-      { value: 'km/hl'},
-      { value: 'Bft' },
-      { value: 'kts' }
-    ], group: 'Units'},
-    { type: 'oneOfMultiple',  label: 'Wind direction', value: 'degree', items: [
-      { value: 'degree' },
-      { value: 'cardinal' }
-    ], group: 'Units'},
-    { type: 'oneOfMultiple',  label: 'Theme', value: 'auto', items: [
-      { value: 'auto', icon: 'mdi-theme-light-dark'},
-      { value: 'light', icon: 'mdi-weather-sunny'},
-      { value: 'dark' , icon: 'mdi-weather-night'}
-    ], group: 'Theme'},
-    { type: 'oneOfMultiple',  label: 'Language', value: 'en', items: [
-      { icon: 'fi-au', value: 'en-au' },
-      { icon: 'fi-nl', value: 'nl' }
-    ], group: 'Locale'},
-  ],
-  groups: ['Units', 'Theme', 'Locale']
+  byId: {},
+  allIds: [],
+  groups: ['Units', 'UI', 'Locale']
 };
 
 const namespaced: boolean = true;
diff --git a/src/store/modules/user-settings/mutations.ts b/src/store/modules/user-settings/mutations.ts
index a6c46c4e6..5b96da811 100644
--- a/src/store/modules/user-settings/mutations.ts
+++ b/src/store/modules/user-settings/mutations.ts
@@ -1,5 +1,31 @@
+import Vue from 'vue'
 import { MutationTree } from 'vuex';
-import { UserSettingsState } from './types';
+import { UserSettingsItem, UserSettingsState } from './types';
 
 export const mutations: MutationTree<UserSettingsState> = {
+  add(state, item: UserSettingsItem) {
+    Vue.set(state.byId, item.id, item);
+    const index = state.allIds.findIndex((id: string) => {return id === item.id})
+    if (index < 0) {
+      state.allIds.push(item.id)
+    } else {
+      Vue.set(state.allIds, index, item.id)
+    }
+},
+remove(state, item: UserSettingsItem) {
+  const index = state.allIds.indexOf(item.id);
+  if (index > -1) {
+    Vue.delete(state.byId, item.id);
+    state.allIds.splice(index, 1);
+  }
+},
+removeById(state, id: string) {
+  const index = state.allIds.indexOf(id);
+  if (index > -1) {
+    Vue.delete(state.byId, id);
+    state.allIds.splice(index, 1);
+  }
+},
+
+
 }
diff --git a/src/store/modules/user-settings/types.ts b/src/store/modules/user-settings/types.ts
index 37599f82c..23eeda898 100644
--- a/src/store/modules/user-settings/types.ts
+++ b/src/store/modules/user-settings/types.ts
@@ -10,6 +10,7 @@ export interface UserSettingsWithIcon {
 }
 
 export interface UserSettingsItem {
+  id: string;
   type: UserSettingsType;
   label: string;
   value: string;
@@ -19,6 +20,7 @@ export interface UserSettingsItem {
 }
 
 export interface UserSettingsState {
-  settings: UserSettingsItem[]
-  groups: string[]
+  byId: Record<string, UserSettingsItem>;
+  allIds: string[];
+  groups: string[];
 }
diff --git a/src/views/UserSettingsView.vue b/src/views/UserSettingsView.vue
index b6f994a9c..62ddff1b6 100644
--- a/src/views/UserSettingsView.vue
+++ b/src/views/UserSettingsView.vue
@@ -3,15 +3,15 @@
     <h1>Settings</h1>
     <div v-for="g in groups" :key="g">
       <h2>{{ g }}</h2>
-      <v-row v-for="(s, i) of settingsForGroup(g)" :key="i" dense>
+      <v-row v-for="(s, i) of listByGroup(g)" :key="i" dense>
         <v-col cols="12" md="6">
           <v-select v-if="s.type === 'oneOfMultiple'" :label="s.label" v-model="s.value" :items="s.items"
             :append-outer-icon="s.favorite ? 'mdi-star' : 'mdi-star-outline'"
             outlined
             dense
             item-text="value"
-            @change="(e) => onValueChange(i, e)"
-            @click:append-outer="(e) => onFavoriteChange(i, e)"
+            @change="onValueChange(s)"
+            @click:append-outer="onFavoriteChange(s)"
             >
             <template v-slot:item="{ on, attrs, item}">
               <v-list-item
@@ -41,16 +41,19 @@ const userSettingsModule = namespace('userSettings')
 export default class DataView extends Vue {
   @userSettingsModule.State('groups')
   groups!: string[]
+  @userSettingsModule.Getter('listByGroup')
+  listByGroup!: (id: string) => UserSettingsItem[]
+  @userSettingsModule.Mutation('add')
+    addUserSetting!: (item: UserSettingsItem) => void
 
-  @userSettingsModule.Getter('settingsForGroup')
-  settingsForGroup!: (id: string) => UserSettingsItem[]
-
-  onValueChange(i: string, e: any) {
-    console.log(i, e)
+  onValueChange(item: UserSettingsItem) {
+    console.log(item)
   }
 
-  onFavoriteChange(i: string, e: any) {
-    console.log(i, e)
+  onFavoriteChange(item: UserSettingsItem) {
+    item.favorite = !item.favorite
+    this.addUserSetting(item)
+    console.log(item)
   }
 
 }

From 7a8127edcc006e84c5d6b6c3a8befb14de6dbfc7 Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Wed, 7 Jun 2023 15:47:36 +0200
Subject: [PATCH 05/20] Make user settings persistent

---
 package-lock.json                            | 23 ++++++-
 package.json                                 |  3 +-
 src/App.vue                                  | 29 --------
 src/components/CogMenu.vue                   |  4 +-
 src/store/index.ts                           | 36 +++++++++-
 src/store/modules/user-settings/serialize.ts | 70 ++++++++++++++++++++
 src/store/modules/user-settings/types.ts     |  2 +-
 src/store/types.ts                           |  2 +
 src/views/UserSettingsView.vue               |  5 +-
 9 files changed, 136 insertions(+), 38 deletions(-)
 create mode 100644 src/store/modules/user-settings/serialize.ts

diff --git a/package-lock.json b/package-lock.json
index 90df2295a..32acc5dbd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,7 +36,8 @@
         "vuetify": "^2.6.15",
         "vuex": "^3.4.0",
         "vuex-class": "^0.3.2",
-        "vuex-module-decorators": "^1.2.0"
+        "vuex-module-decorators": "^1.2.0",
+        "vuex-persistedstate": "^4.1.0"
       },
       "devDependencies": {
         "@intlify/vue-i18n-loader": "^1.0.0",
@@ -7604,7 +7605,6 @@
     },
     "node_modules/deepmerge": {
       "version": "4.3.1",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -16360,6 +16360,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/shvl": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/shvl/-/shvl-2.0.3.tgz",
+      "integrity": "sha512-V7C6S9Hlol6SzOJPnQ7qzOVEWUQImt3BNmmzh40wObhla3XOYMe4gGiYzLrJd5TFa+cI2f9LKIRJTTKZSTbWgw==",
+      "deprecated": "older versions vulnerable to prototype pollution"
+    },
     "node_modules/side-channel": {
       "version": "1.0.4",
       "dev": true,
@@ -17986,6 +17992,19 @@
         "vuex": ">=3"
       }
     },
+    "node_modules/vuex-persistedstate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuex-persistedstate/-/vuex-persistedstate-4.1.0.tgz",
+      "integrity": "sha512-3SkEj4NqwM69ikJdFVw6gObeB0NHyspRYMYkR/EbhR0hbvAKyR5gksVhtAfY1UYuWUOCCA0QNGwv9pOwdj+XUQ==",
+      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
+      "dependencies": {
+        "deepmerge": "^4.2.2",
+        "shvl": "^2.0.3"
+      },
+      "peerDependencies": {
+        "vuex": "^3.0 || ^4.0.0-rc"
+      }
+    },
     "node_modules/w3c-hr-time": {
       "version": "1.0.2",
       "dev": true,
diff --git a/package.json b/package.json
index 1b6c32a8c..de4a5b98b 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,8 @@
     "vuetify": "^2.6.15",
     "vuex": "^3.4.0",
     "vuex-class": "^0.3.2",
-    "vuex-module-decorators": "^1.2.0"
+    "vuex-module-decorators": "^1.2.0",
+    "vuex-persistedstate": "^4.1.0"
   },
   "devDependencies": {
     "@intlify/vue-i18n-loader": "^1.0.0",
diff --git a/src/App.vue b/src/App.vue
index 8154d47f7..04b144a4f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -31,7 +31,6 @@ export default class App extends Vue {
     addUserSetting!: (item: UserSettingsItem) => void
 
   async created(): Promise<void> {
-    this.initUserSettings()
     if (this.$config.authenticationIsEnabled) {
       if (this.$route.path === "/auth/callback") {
         const user = await this.$auth.userManager.signinRedirectCallback()
@@ -46,34 +45,6 @@ export default class App extends Vue {
     this.setRoutes()
   }
 
-
-  initUserSettings () {
-    const settings: UserSettingsItem[] = [
-      { id: 'units.wind-speed', type: 'oneOfMultiple' , label: 'Wind speed', value: 'm/s', items: [
-        { value: 'm/s' },
-        { value: 'km/l'},
-        { value: 'Bft' },
-        { value: 'kts' }
-      ], group: 'Units'},
-      { id: 'units.wind-direction', type: 'oneOfMultiple',  label: 'Wind direction', value: 'degree', items: [
-        { value: 'degree' },
-        { value: 'cardinal' }
-      ], group: 'Units'},
-      { id: 'ui.theme',  type: 'oneOfMultiple',  label: 'Theme', value: 'auto', items: [
-        { value: 'auto', icon: 'mdi-theme-light-dark'},
-        { value: 'light', icon: 'mdi-weather-sunny'},
-        { value: 'dark' , icon: 'mdi-weather-night'}
-      ], group: 'UI'},
-      { id: 'locale.language', type: 'oneOfMultiple',  label: 'Language', value: 'en', items: [
-        { icon: 'fi-au', value: 'en-au' },
-        { icon: 'fi-nl', value: 'nl' }
-      ], group: 'Locale'},
-    ]
-    for (let s of settings) {
-      this.addUserSetting(s)
-    }
-  }
-
   setRoutes(): void {
     Object.values(this.webOcComponents).forEach(webOcComponent => {
       const route = routesViews.find((route) => route.name === webOcComponent.type)
diff --git a/src/components/CogMenu.vue b/src/components/CogMenu.vue
index 3b5379be5..85fbcfea1 100644
--- a/src/components/CogMenu.vue
+++ b/src/components/CogMenu.vue
@@ -57,6 +57,8 @@ const userSettingsModule = namespace('userSettings')
 export default class CogMenu extends Mixins(ThemeMixin) {
   @userSettingsModule.Getter('listFavorite')
   listFavorite!: UserSettingsItem[]
+  @userSettingsModule.Mutation('add')
+  addUserSetting!: (item: UserSettingsItem) => void
 
   packageVersion = packageConfig.version
   items: UserSettingsItem[] = []
@@ -67,7 +69,7 @@ export default class CogMenu extends Mixins(ThemeMixin) {
   }
 
   onValueChange(item: UserSettingsItem) {
-    console.log(item)
+    this.addUserSetting(item)
   }
 }
 </script>
diff --git a/src/store/index.ts b/src/store/index.ts
index f1a03a5ca..9cbbfb11e 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -5,6 +5,39 @@ import Alerts from '@/store/modules/alerts'
 import { fewsconfig } from '@/store/modules/fews-config'
 import { systemTime } from '@/store/modules/system-time'
 import { userSettings } from '@/store/modules/user-settings'
+import createPersistedState from "vuex-persistedstate"
+import {
+  serializeState as serializeUserSettingsState,
+  deserializeState as deserializeUserSettingsState,
+  rehydrateState as rehydrateUserSettingsState
+} from '@/store/modules/user-settings/serialize';
+
+// FIXME: Storage definition from "vuex-persistedstate" is incompatiable with Typescript
+interface Storage {
+  getItem: (key: string) => any;
+  setItem: (key: string, value: any) => void;
+  removeItem: (key: string) => void;
+}
+
+const vuexUserSettings = createPersistedState<RootState>({
+  key: 'delft-fews-webox:userSettings#1.0.0',
+  paths: ['userSettings'],
+  storage: window.localStorage,
+  setState: (key: string, state: RootState, storage: Storage) => {
+    if (state.userSettings) {
+      storage.setItem(key, JSON.stringify(serializeUserSettingsState(state.userSettings)))
+    }
+  },
+  getState: (key: string, storage: Storage) => {
+    const state = deserializeUserSettingsState(storage.getItem(key))
+    return state
+  },
+  rehydrated: (store) => {
+    if ( store.state.userSettings ) {
+      rehydrateUserSettingsState(store.state.userSettings)
+    }
+  }
+})
 
 Vue.use(Vuex)
 
@@ -20,7 +53,8 @@ const store = new Vuex.Store<RootState>({
     systemTime,
     fewsconfig,
     userSettings
-  }
+  },
+  plugins: [ vuexUserSettings ]
 })
 
 store.dispatch('systemTime/startClock')
diff --git a/src/store/modules/user-settings/serialize.ts b/src/store/modules/user-settings/serialize.ts
new file mode 100644
index 000000000..e9b3b3bc9
--- /dev/null
+++ b/src/store/modules/user-settings/serialize.ts
@@ -0,0 +1,70 @@
+import { RootState } from '../../types'
+import { UserSettingsItem, UserSettingsState } from './types'
+import { state as emptyState } from './index'
+
+export function serializeState(state: UserSettingsState): UserSettingsItem[] {
+    const serializedSettings: UserSettingsItem[] = []
+    for (const seriesId of state.allIds) {
+      serializedSettings.push(state.byId[seriesId])
+    }
+    return serializedSettings
+}
+
+export function deserializeState(json: string): Partial<RootState> {
+    const defaultSettings: UserSettingsItem[] = [
+      { id: 'units.wind-speed', type: 'oneOfMultiple', label: 'Wind speed', value: 'm/s', items: [
+        { value: 'm/s' },
+        { value: 'km/h'},
+        { value: 'Bft' },
+        { value: 'kts' }
+      ], group: 'Units'},
+      { id: 'units.wind-direction', type: 'oneOfMultiple', label: 'Wind direction', value: 'degree', items: [
+        { value: 'degree' },
+        { value: 'cardinal' }
+      ], group: 'Units'},
+      { id: 'ui.theme',  type: 'oneOfMultiple',  label: 'Theme', value: 'auto', items: [
+        { value: 'auto', icon: 'mdi-theme-light-dark'},
+        { value: 'light', icon: 'mdi-weather-sunny'},
+        { value: 'dark' , icon: 'mdi-weather-night'}
+      ], group: 'UI'},
+      { id: 'locale.language', type: 'oneOfMultiple', label: 'Language', value: 'en-au', items: [
+        { icon: 'fi-au', value: 'en-au' },
+        { icon: 'fi-nl', value: 'nl' }
+      ], group: 'Locale'},
+    ]
+    const defaultState = emptyState
+    defaultState.allIds = defaultSettings.map( item => item.id)
+    const byId: Record<string,UserSettingsItem>= {}
+    for ( const item of defaultSettings) {
+      byId[item.id] = item
+    }
+    defaultState.byId = byId
+    const state: Partial<RootState> = { userSettings: defaultState }
+    if ( json !== null ) {
+        const deserializedSettings = JSON.parse(json)
+        for (const settings of deserializedSettings) {
+            if (state.userSettings !== undefined) {
+              const id = settings.id
+              if (state.userSettings.allIds.includes(id)) {
+                console.log('defaultState', id, state.userSettings.byId[id])
+                const defaultValue = state.userSettings.byId[id].value
+                const items = state.userSettings.byId[id].items
+                const restoredValue = items.map(i => i.value).includes(settings.value) ? settings.value : defaultValue
+                settings.value =restoredValue
+                state.userSettings.byId[settings.id] = settings
+              } else {
+                console.warn('Old user setting', settings)
+              }
+            }
+        }
+    }
+    return state
+}
+
+export function rehydrateState(state: UserSettingsState): void {
+    for (const id of state.allIds) {
+        const settings = state.byId[id]
+        console.log(settings)
+        state.byId[id] = settings
+    }
+}
\ No newline at end of file
diff --git a/src/store/modules/user-settings/types.ts b/src/store/modules/user-settings/types.ts
index 23eeda898..aeb929147 100644
--- a/src/store/modules/user-settings/types.ts
+++ b/src/store/modules/user-settings/types.ts
@@ -14,7 +14,7 @@ export interface UserSettingsItem {
   type: UserSettingsType;
   label: string;
   value: string;
-  items: string[] | UserSettingsWithIcon[];
+  items: UserSettingsWithIcon[];
   favorite?: boolean;
   group: string;
 }
diff --git a/src/store/types.ts b/src/store/types.ts
index 65727b6e8..564870af0 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -1,7 +1,9 @@
 import { AlertState } from './modules/alerts/types';
 import { SystemTimeState } from './modules/system-time/types';
+import { UserSettingsState } from './modules/user-settings/types';
 
 export interface RootState {
   alerts?: AlertState
   systemTime?: SystemTimeState
+  userSettings?: UserSettingsState
 }
diff --git a/src/views/UserSettingsView.vue b/src/views/UserSettingsView.vue
index 62ddff1b6..afd550439 100644
--- a/src/views/UserSettingsView.vue
+++ b/src/views/UserSettingsView.vue
@@ -44,16 +44,15 @@ export default class DataView extends Vue {
   @userSettingsModule.Getter('listByGroup')
   listByGroup!: (id: string) => UserSettingsItem[]
   @userSettingsModule.Mutation('add')
-    addUserSetting!: (item: UserSettingsItem) => void
+  addUserSetting!: (item: UserSettingsItem) => void
 
   onValueChange(item: UserSettingsItem) {
-    console.log(item)
+    this.addUserSetting(item)
   }
 
   onFavoriteChange(item: UserSettingsItem) {
     item.favorite = !item.favorite
     this.addUserSetting(item)
-    console.log(item)
   }
 
 }

From bfba39e66d7a39e6deae1730d25e1c3791f0985a Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Wed, 7 Jun 2023 16:25:44 +0200
Subject: [PATCH 06/20] Act on theme or locale changes

---
 src/components/CogMenu.vue |  5 ++---
 src/layouts/Default.vue    | 21 +++++++++++++++++++--
 src/mixins/ThemeMixin.ts   |  5 +++--
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/components/CogMenu.vue b/src/components/CogMenu.vue
index 85fbcfea1..35f14fb41 100644
--- a/src/components/CogMenu.vue
+++ b/src/components/CogMenu.vue
@@ -42,9 +42,8 @@
 <script lang="ts">
 import {
   Component,
-  Mixins
+  Vue
 } from 'vue-property-decorator'
-import ThemeMixin from '@/mixins/ThemeMixin'
 import packageConfig from '../../package.json'
 
 import { namespace } from 'vuex-class'
@@ -54,7 +53,7 @@ import "flag-icons/css/flag-icons.min.css"
 const userSettingsModule = namespace('userSettings')
 
 @Component
-export default class CogMenu extends Mixins(ThemeMixin) {
+export default class CogMenu extends Vue {
   @userSettingsModule.Getter('listFavorite')
   listFavorite!: UserSettingsItem[]
   @userSettingsModule.Mutation('add')
diff --git a/src/layouts/Default.vue b/src/layouts/Default.vue
index 7c61749ca..40a24a0df 100644
--- a/src/layouts/Default.vue
+++ b/src/layouts/Default.vue
@@ -55,7 +55,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Mixins, Vue } from 'vue-property-decorator'
 import CogMenu from '@/components/CogMenu.vue'
 import TimeControl from '@/components/timecontrol/TimeControl.vue'
 import LoginComponent from '@/components/LoginComponent.vue'
@@ -63,6 +63,7 @@ import { namespace } from 'vuex-class'
 import { Alert } from '@/store/modules/alerts/types'
 import type { WebOcComponent } from '@/store/modules/fews-config/types'
 import { ComponentTypeEnum } from '@/store/modules/fews-config/types'
+import ThemeMixin from '@/mixins/ThemeMixin'
 
 const alertsModule = namespace('alerts')
 const fewsConfigModule = namespace('fewsconfig')
@@ -74,7 +75,7 @@ const fewsConfigModule = namespace('fewsconfig')
     TimeControl,
   }
 })
-export default class Default extends Vue {
+export default class Default extends Mixins(ThemeMixin) {
   @alertsModule.Getter('listActive')
     activeAlerts!: Alert[]
   @alertsModule.State('alerts')
@@ -84,6 +85,22 @@ export default class Default extends Vue {
   @fewsConfigModule.Action('loadConfig')
     loadConfig!: () => void
 
+  created() {
+    this.$store.subscribe((mutation, state) => {
+      if (mutation.type.startsWith('userSettings/add')) {
+        switch(mutation.payload.id) {
+          case 'ui.theme':
+            this.changeTheme(mutation.payload.value)
+            break
+          case 'locale.language':
+            this.$i18n.locale = mutation.payload.value
+            break
+          default:
+        }
+      }
+    })
+  }
+
   mounted(): void {
     this.loadConfig()
   }
diff --git a/src/mixins/ThemeMixin.ts b/src/mixins/ThemeMixin.ts
index b9f3c1ddb..334c080e8 100644
--- a/src/mixins/ThemeMixin.ts
+++ b/src/mixins/ThemeMixin.ts
@@ -11,10 +11,11 @@ export default class ThemeMixin extends Vue {
     // Then listen for changes for user theme preferences.
     this.mqDark.addEventListener('change', this.setThemeFromMediaQueryEvent)
     // Make sure the theme is set correctly upon creation of this component.
-    this.onThemeChange()
+    this.changeTheme(this.theme)
   }
 
-  onThemeChange(): void {
+  changeTheme(theme: ColourTheme): void {
+    this.theme = theme
     if (this.theme === ColourTheme.Auto) {
       this.setTheme(this.mqDark.matches)
     } else {

From 99761cb1ea316972c90afab2b64b923257561efc Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Wed, 7 Jun 2023 17:05:57 +0200
Subject: [PATCH 07/20] Fix key typo

---
 src/store/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/store/index.ts b/src/store/index.ts
index 9cbbfb11e..c4fb275d6 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -20,7 +20,7 @@ interface Storage {
 }
 
 const vuexUserSettings = createPersistedState<RootState>({
-  key: 'delft-fews-webox:userSettings#1.0.0',
+  key: 'delft-fews-weboc:userSettings#1.0.0',
   paths: ['userSettings'],
   storage: window.localStorage,
   setState: (key: string, state: RootState, storage: Storage) => {

From 200f6d52ef3be34db058dfe5b0ff8cb86a1f9656 Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Wed, 5 Jul 2023 15:25:51 +0200
Subject: [PATCH 08/20] diplayUnits, settings or its items can be disabled

---
 src/components/CogMenu.vue                   | 30 ++++++++++++--------
 src/store/modules/user-settings/serialize.ts | 20 +++++++------
 src/store/modules/user-settings/types.ts     |  9 ++++--
 src/views/UserSettingsView.vue               | 11 +++++--
 4 files changed, 44 insertions(+), 26 deletions(-)

diff --git a/src/components/CogMenu.vue b/src/components/CogMenu.vue
index 35f14fb41..951e1ee56 100644
--- a/src/components/CogMenu.vue
+++ b/src/components/CogMenu.vue
@@ -9,13 +9,22 @@
       </v-btn>
     </template>
     <v-list>
-      <v-subheader>Favorite settings</v-subheader>
-      <v-list-item v-for="(s, i) of listFavorite" :key="i">
-        <v-select v-if="s.type === 'oneOfMultiple'" :label="s.label" v-model="s.value" :items="s.items"
+      <v-list-item dense v-for="(s, i) of listFavorite" :key="i">
+        <v-list-item-content>
+        <template  v-if="s.type === 'oneOfMultiple'">
+        <v-list-item-title>{{ s.label }}</v-list-item-title>
+        <v-btn-toggle dense v-model="s.value" @change="onValueChange(s)"
+>
+          <v-btn v-for="item of s.items" :key="item.value" :value="item.value" :disabled="item.disabled">
+            <v-icon v-if="item.icon">{{ item.icon }}</v-icon>
+            <span v-else>{{ item.value }}</span>
+          </v-btn>
+        </v-btn-toggle>
+        </template>
+        <!-- <v-select v-if="s.type === 'oneOfMultiple'" :label="s.label" v-model="s.value" :items="s.items"
           outlined
           dense
           item-text="value"
-          @change="onValueChange(s)"
           >
           <template v-slot:item="{ on, attrs, item}">
             <v-list-item
@@ -26,15 +35,14 @@
               {{ item.value }}
             </v-list-item>
           </template>
-        </v-select>
+        </v-select> -->
+        <v-switch dense inset v-else-if="s.type === 'boolean'" v-model="s.value" :label="s.label" :disabled="s.disabled"
+          @change="onValueChange(s)">
+        </v-switch>
+        </v-list-item-content>
       </v-list-item>
       <v-divider />
       <v-list-item :to="{ name: 'UserSettingsView'}">All Settings</v-list-item>
-      <v-list-item>
-        <v-list-item-content>
-          <v-list-item-title>Version {{ packageVersion }}</v-list-item-title>
-        </v-list-item-content>
-      </v-list-item>
     </v-list>
   </v-menu>
 </template>
@@ -44,7 +52,6 @@ import {
   Component,
   Vue
 } from 'vue-property-decorator'
-import packageConfig from '../../package.json'
 
 import { namespace } from 'vuex-class'
 import { UserSettingsItem } from '@/store/modules/user-settings/types'
@@ -59,7 +66,6 @@ export default class CogMenu extends Vue {
   @userSettingsModule.Mutation('add')
   addUserSetting!: (item: UserSettingsItem) => void
 
-  packageVersion = packageConfig.version
   items: UserSettingsItem[] = []
 
   created(): void {
diff --git a/src/store/modules/user-settings/serialize.ts b/src/store/modules/user-settings/serialize.ts
index e9b3b3bc9..55b8151ed 100644
--- a/src/store/modules/user-settings/serialize.ts
+++ b/src/store/modules/user-settings/serialize.ts
@@ -12,16 +12,20 @@ export function serializeState(state: UserSettingsState): UserSettingsItem[] {
 
 export function deserializeState(json: string): Partial<RootState> {
     const defaultSettings: UserSettingsItem[] = [
-      { id: 'units.wind-speed', type: 'oneOfMultiple', label: 'Wind speed', value: 'm/s', items: [
-        { value: 'm/s' },
-        { value: 'km/h'},
-        { value: 'Bft' },
-        { value: 'kts' }
+      { id: 'units.displayUnits',  type: 'oneOfMultiple',  label: 'Display Units', value: 'display', items: [
+        { value: 'stored', icon: 'mdi-database'},
+        { value: 'display', icon: 'mdi-monitor'},
+        { value: 'custom' , icon: 'mdi-monitor-edit', disabled: true}
       ], group: 'Units'},
-      { id: 'units.wind-direction', type: 'oneOfMultiple', label: 'Wind direction', value: 'degree', items: [
-        { value: 'degree' },
-        { value: 'cardinal' }
+      { id: 'units.Discharge', type: 'oneOfMultiple', label: 'Discharge', value: 'ML/d', disabled: true, items: [
+        { value: 'm³/s' },
+        { value: 'ML/d'}
       ], group: 'Units'},
+      { id: 'units.Volume', type: 'oneOfMultiple', label: 'Volume', value: 'ML',  disabled: true, items: [
+        { value: 'm³' },
+        { value: 'ML' }
+      ], group: 'Units'},
+      { id: 'datum.water-level', type: 'boolean', label: 'Absolute vertical datum', value: true , group: 'Datum'},
       { id: 'ui.theme',  type: 'oneOfMultiple',  label: 'Theme', value: 'auto', items: [
         { value: 'auto', icon: 'mdi-theme-light-dark'},
         { value: 'light', icon: 'mdi-weather-sunny'},
diff --git a/src/store/modules/user-settings/types.ts b/src/store/modules/user-settings/types.ts
index aeb929147..59bc9b668 100644
--- a/src/store/modules/user-settings/types.ts
+++ b/src/store/modules/user-settings/types.ts
@@ -1,11 +1,13 @@
 export const UserSettingsType = {
   oneOfMultiple: 'oneOfMultiple',
+  boolean: 'boolean'
 } as const
 
 export type UserSettingsType = (typeof UserSettingsType)[keyof typeof UserSettingsType];
 
 export interface UserSettingsWithIcon {
-  value: string;
+  value: string | boolean;
+  disabled?: boolean;
   icon?: string;
 }
 
@@ -13,8 +15,9 @@ export interface UserSettingsItem {
   id: string;
   type: UserSettingsType;
   label: string;
-  value: string;
-  items: UserSettingsWithIcon[];
+  value: string | boolean;
+  disabled?: boolean;
+  items?: UserSettingsWithIcon[];
   favorite?: boolean;
   group: string;
 }
diff --git a/src/views/UserSettingsView.vue b/src/views/UserSettingsView.vue
index afd550439..e25e7a223 100644
--- a/src/views/UserSettingsView.vue
+++ b/src/views/UserSettingsView.vue
@@ -5,24 +5,29 @@
       <h2>{{ g }}</h2>
       <v-row v-for="(s, i) of listByGroup(g)" :key="i" dense>
         <v-col cols="12" md="6">
-          <v-select v-if="s.type === 'oneOfMultiple'" :label="s.label" v-model="s.value" :items="s.items"
-            :append-outer-icon="s.favorite ? 'mdi-star' : 'mdi-star-outline'"
+          <v-select v-if="s.type === 'oneOfMultiple'" :label="s.label" v-model="s.value" :items="s.items" :disabled="s.disabled"
             outlined
             dense
             item-text="value"
             @change="onValueChange(s)"
-            @click:append-outer="onFavoriteChange(s)"
             >
             <template v-slot:item="{ on, attrs, item}">
               <v-list-item
                 v-bind="attrs"
                 v-on="on"
+                :disabled="item?.disabled"
               >
                 <v-icon v-if="item.icon" small class="mr-5">{{ item.icon }}</v-icon>
                 {{ item.value }}
               </v-list-item>
             </template>
           </v-select>
+          <v-switch inset v-else-if="s.type === 'boolean'" :label="s.label" v-model="s.value" :disabled="s.disabled"
+            @change="onValueChange(s)">
+          </v-switch>
+        </v-col>
+        <v-col cols="1">
+          <v-icon v-if="!s.disabled" @click="onFavoriteChange(s)">{{s.favorite ? 'mdi-star' : 'mdi-star-outline'}}</v-icon>
         </v-col>
       </v-row>
     </div>

From 41fc8f9e439b2839dbe85926949cbd9266bd7e97 Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Wed, 5 Jul 2023 16:05:03 +0200
Subject: [PATCH 09/20] Update all unit settings on for useDisplayUnits change

---
 src/layouts/Default.vue                      |  7 +++
 src/store/modules/user-settings/actions.ts   | 18 ++++++++
 src/store/modules/user-settings/serialize.ts | 46 ++++++++++++--------
 3 files changed, 53 insertions(+), 18 deletions(-)

diff --git a/src/layouts/Default.vue b/src/layouts/Default.vue
index 40a24a0df..00b350ed9 100644
--- a/src/layouts/Default.vue
+++ b/src/layouts/Default.vue
@@ -67,6 +67,7 @@ import ThemeMixin from '@/mixins/ThemeMixin'
 
 const alertsModule = namespace('alerts')
 const fewsConfigModule = namespace('fewsconfig')
+const userSettingsModule = namespace('userSettings')
 
 @Component({
   components: {
@@ -84,6 +85,9 @@ export default class Default extends Mixins(ThemeMixin) {
     webOcComponents!: { [key: string]: WebOcComponent }
   @fewsConfigModule.Action('loadConfig')
     loadConfig!: () => void
+  @userSettingsModule.Action('changeUseDisplayUnits')
+    changeUseDisplayUnits!: (value: string) => void
+
 
   created() {
     this.$store.subscribe((mutation, state) => {
@@ -95,6 +99,9 @@ export default class Default extends Mixins(ThemeMixin) {
           case 'locale.language':
             this.$i18n.locale = mutation.payload.value
             break
+          case 'units.displayUnits':
+            this.changeUseDisplayUnits(mutation.payload.value)
+            break
           default:
         }
       }
diff --git a/src/store/modules/user-settings/actions.ts b/src/store/modules/user-settings/actions.ts
index 8a3ebe1c1..38bb8abba 100644
--- a/src/store/modules/user-settings/actions.ts
+++ b/src/store/modules/user-settings/actions.ts
@@ -2,5 +2,23 @@ import { ActionTree } from 'vuex'
 import { RootState } from '../../types'
 import { UserSettingsState } from './types'
 
+const parameterGroupKey = 'units.parameterGroup.'
+
 export const actions: ActionTree<UserSettingsState, RootState>= {
+  changeUseDisplayUnits: async (context, payload: string ) => {
+    const unitSettings = []
+    for ( const id of context.state.allIds) {
+      if (id.startsWith(parameterGroupKey)) {
+        unitSettings.push( context.state.byId[id])
+      }
+    }
+    if (payload !== 'custom') {
+      const i = payload === 'stored' ? 0 : 1
+      for (const s of unitSettings) {
+        const newValue = s.items ? s.items[i].value : ''
+        s.value = newValue
+        context.commit('add', s)
+      }
+    }
+  },
 }
diff --git a/src/store/modules/user-settings/serialize.ts b/src/store/modules/user-settings/serialize.ts
index 55b8151ed..2eacd2da0 100644
--- a/src/store/modules/user-settings/serialize.ts
+++ b/src/store/modules/user-settings/serialize.ts
@@ -2,10 +2,16 @@ import { RootState } from '../../types'
 import { UserSettingsItem, UserSettingsState } from './types'
 import { state as emptyState } from './index'
 
-export function serializeState(state: UserSettingsState): UserSettingsItem[] {
-    const serializedSettings: UserSettingsItem[] = []
+export function serializeState(state: UserSettingsState): Partial<UserSettingsItem>[] {
+    const serializedSettings: Partial<UserSettingsItem>[] = []
     for (const seriesId of state.allIds) {
-      serializedSettings.push(state.byId[seriesId])
+      const rawState = state.byId[seriesId]
+      const cleanState = {
+        id: rawState.id,
+        value: rawState.value,
+        favor: rawState.favorite
+      }
+      serializedSettings.push(cleanState)
     }
     return serializedSettings
 }
@@ -17,11 +23,11 @@ export function deserializeState(json: string): Partial<RootState> {
         { value: 'display', icon: 'mdi-monitor'},
         { value: 'custom' , icon: 'mdi-monitor-edit', disabled: true}
       ], group: 'Units'},
-      { id: 'units.Discharge', type: 'oneOfMultiple', label: 'Discharge', value: 'ML/d', disabled: true, items: [
+      { id: 'units.parameterGroup.Discharge', type: 'oneOfMultiple', label: 'Discharge', value: 'ML/d', disabled: true, items: [
         { value: 'm³/s' },
         { value: 'ML/d'}
       ], group: 'Units'},
-      { id: 'units.Volume', type: 'oneOfMultiple', label: 'Volume', value: 'ML',  disabled: true, items: [
+      { id: 'units.parameterGroup.Volume', type: 'oneOfMultiple', label: 'Volume', value: 'ML',  disabled: true, items: [
         { value: 'm³' },
         { value: 'ML' }
       ], group: 'Units'},
@@ -33,7 +39,7 @@ export function deserializeState(json: string): Partial<RootState> {
       ], group: 'UI'},
       { id: 'locale.language', type: 'oneOfMultiple', label: 'Language', value: 'en-au', items: [
         { icon: 'fi-au', value: 'en-au' },
-        { icon: 'fi-nl', value: 'nl' }
+        { icon: 'fi-nl', value: 'nl-nl' }
       ], group: 'Locale'},
     ]
     const defaultState = emptyState
@@ -51,11 +57,15 @@ export function deserializeState(json: string): Partial<RootState> {
               const id = settings.id
               if (state.userSettings.allIds.includes(id)) {
                 console.log('defaultState', id, state.userSettings.byId[id])
-                const defaultValue = state.userSettings.byId[id].value
-                const items = state.userSettings.byId[id].items
-                const restoredValue = items.map(i => i.value).includes(settings.value) ? settings.value : defaultValue
-                settings.value =restoredValue
-                state.userSettings.byId[settings.id] = settings
+                const s = state.userSettings.byId[id]
+                const defaultValue = s.value
+
+                if ( state.userSettings.byId[id].type === 'oneOfMultiple' ) {
+                  const items = state.userSettings.byId[id].items
+                  const restoredValue = items?.map(i => i.value).includes(settings.value) ? settings.value : defaultValue
+                  settings.value = restoredValue
+                }
+                state.userSettings.byId[settings.id] = {...settings, ...s}
               } else {
                 console.warn('Old user setting', settings)
               }
@@ -65,10 +75,10 @@ export function deserializeState(json: string): Partial<RootState> {
     return state
 }
 
-export function rehydrateState(state: UserSettingsState): void {
-    for (const id of state.allIds) {
-        const settings = state.byId[id]
-        console.log(settings)
-        state.byId[id] = settings
-    }
-}
\ No newline at end of file
+// export function rehydrateState(state: UserSettingsState): void {
+//     for (const id of state.allIds) {
+//         const settings = state.byId[id]
+//         console.log('rehydrateState', settings)
+//         state.byId[id] = settings
+//     }
+// }

From 8f9a446555a9cac5bff6a13b6b2dd2d22dcde593 Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Thu, 6 Jul 2023 09:45:59 +0200
Subject: [PATCH 10/20] Add convertDatum and useDisplayUnits to state

---
 src/store/modules/user-settings/getters.ts   |  6 ++++
 src/store/modules/user-settings/index.ts     |  4 ++-
 src/store/modules/user-settings/mutations.ts | 38 +++++++++++---------
 src/store/modules/user-settings/types.ts     |  2 ++
 4 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/store/modules/user-settings/getters.ts b/src/store/modules/user-settings/getters.ts
index 28c1b2b47..2fb9f123c 100644
--- a/src/store/modules/user-settings/getters.ts
+++ b/src/store/modules/user-settings/getters.ts
@@ -23,4 +23,10 @@ export const getters: GetterTree<UserSettingsState, RootState> = {
     const result = state.allIds.map(id => getters.find(id))
     return result.filter((s) => s.group === id)
   },
+  convertDatum: (state, getters, _rootState: RootState, rootGetters) => () => {
+    return state.byId['datum.water-level'].value
+  },
+  useDisplayUnits: (state, getters, _rootState: RootState, rootGetters) => () => {
+    return state.byId['datum'].value
+  },
 }
diff --git a/src/store/modules/user-settings/index.ts b/src/store/modules/user-settings/index.ts
index 37ddb6bb1..c9dc5fbb9 100644
--- a/src/store/modules/user-settings/index.ts
+++ b/src/store/modules/user-settings/index.ts
@@ -9,7 +9,9 @@ import { mutations } from './mutations';
 export const state: UserSettingsState = {
   byId: {},
   allIds: [],
-  groups: ['Units', 'UI', 'Locale']
+  groups: ['Units', 'Datum', 'UI', 'Locale'],
+  useDisplayUnits: false,
+  convertDatum: true
 };
 
 const namespaced: boolean = true;
diff --git a/src/store/modules/user-settings/mutations.ts b/src/store/modules/user-settings/mutations.ts
index 5b96da811..016470d48 100644
--- a/src/store/modules/user-settings/mutations.ts
+++ b/src/store/modules/user-settings/mutations.ts
@@ -11,21 +11,25 @@ export const mutations: MutationTree<UserSettingsState> = {
     } else {
       Vue.set(state.allIds, index, item.id)
     }
-},
-remove(state, item: UserSettingsItem) {
-  const index = state.allIds.indexOf(item.id);
-  if (index > -1) {
-    Vue.delete(state.byId, item.id);
-    state.allIds.splice(index, 1);
-  }
-},
-removeById(state, id: string) {
-  const index = state.allIds.indexOf(id);
-  if (index > -1) {
-    Vue.delete(state.byId, id);
-    state.allIds.splice(index, 1);
-  }
-},
-
-
+  },
+  remove(state, item: UserSettingsItem) {
+    const index = state.allIds.indexOf(item.id);
+    if (index > -1) {
+      Vue.delete(state.byId, item.id);
+      state.allIds.splice(index, 1);
+    }
+  },
+  removeById(state, id: string) {
+    const index = state.allIds.indexOf(id);
+    if (index > -1) {
+      Vue.delete(state.byId, id);
+      state.allIds.splice(index, 1);
+    }
+  },
+  setConvertDatum(state, value: boolean) {
+    state.convertDatum = value
+  },
+  setUseDisplayUnits(state, value: boolean) {
+    state.useDisplayUnits = value
+  },
 }
diff --git a/src/store/modules/user-settings/types.ts b/src/store/modules/user-settings/types.ts
index 59bc9b668..0f74aaa0a 100644
--- a/src/store/modules/user-settings/types.ts
+++ b/src/store/modules/user-settings/types.ts
@@ -26,4 +26,6 @@ export interface UserSettingsState {
   byId: Record<string, UserSettingsItem>;
   allIds: string[];
   groups: string[];
+  convertDatum: boolean;
+  useDisplayUnits: boolean;
 }

From 9582d8ec2dd921a2f2fe035cae5fb311ae4b9827 Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Thu, 6 Jul 2023 09:48:12 +0200
Subject: [PATCH 11/20] Clean up show favorite settings

---
 src/components/CogMenu.vue | 32 ++++++++++----------------------
 1 file changed, 10 insertions(+), 22 deletions(-)

diff --git a/src/components/CogMenu.vue b/src/components/CogMenu.vue
index 951e1ee56..30514afbc 100644
--- a/src/components/CogMenu.vue
+++ b/src/components/CogMenu.vue
@@ -11,38 +11,26 @@
     <v-list>
       <v-list-item dense v-for="(s, i) of listFavorite" :key="i">
         <v-list-item-content>
-        <template  v-if="s.type === 'oneOfMultiple'">
-        <v-list-item-title>{{ s.label }}</v-list-item-title>
-        <v-btn-toggle dense v-model="s.value" @change="onValueChange(s)"
->
+        <v-list-item-action-text>
+          {{ s.label }}
+        </v-list-item-action-text>
+        <v-list-item-action  v-if="s.type === 'oneOfMultiple'">
+        <v-btn-toggle dense v-model="s.value" @change="onValueChange(s)">
           <v-btn v-for="item of s.items" :key="item.value" :value="item.value" :disabled="item.disabled">
             <v-icon v-if="item.icon">{{ item.icon }}</v-icon>
             <span v-else>{{ item.value }}</span>
           </v-btn>
         </v-btn-toggle>
-        </template>
-        <!-- <v-select v-if="s.type === 'oneOfMultiple'" :label="s.label" v-model="s.value" :items="s.items"
-          outlined
-          dense
-          item-text="value"
-          >
-          <template v-slot:item="{ on, attrs, item}">
-            <v-list-item
-              v-bind="attrs"
-              v-on="on"
-            >
-              <v-icon v-if="item.icon" small class="mr-5">{{ item.icon }}</v-icon>
-              {{ item.value }}
-            </v-list-item>
-          </template>
-        </v-select> -->
-        <v-switch dense inset v-else-if="s.type === 'boolean'" v-model="s.value" :label="s.label" :disabled="s.disabled"
+        </v-list-item-action>
+        <v-list-item-action v-else-if="s.type === 'boolean'">
+        <v-switch dense inset  v-model="s.value" :disabled="s.disabled"
           @change="onValueChange(s)">
         </v-switch>
+        </v-list-item-action>
         </v-list-item-content>
       </v-list-item>
       <v-divider />
-      <v-list-item :to="{ name: 'UserSettingsView'}">All Settings</v-list-item>
+      <v-list-item :to="{ name: 'UserSettingsView'}">All Settings ...</v-list-item>
     </v-list>
   </v-menu>
 </template>

From 013f332f271b3f540c1e269d6c5964804f7a710b Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Thu, 6 Jul 2023 09:51:06 +0200
Subject: [PATCH 12/20] Fix property name

---
 src/store/modules/user-settings/serialize.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/store/modules/user-settings/serialize.ts b/src/store/modules/user-settings/serialize.ts
index 2eacd2da0..2186a709d 100644
--- a/src/store/modules/user-settings/serialize.ts
+++ b/src/store/modules/user-settings/serialize.ts
@@ -9,7 +9,7 @@ export function serializeState(state: UserSettingsState): Partial<UserSettingsIt
       const cleanState = {
         id: rawState.id,
         value: rawState.value,
-        favor: rawState.favorite
+        favorite: rawState.favorite
       }
       serializedSettings.push(cleanState)
     }

From f10f3a7675addb13b215e2cbf82a5fac86614a6f Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Thu, 6 Jul 2023 10:09:16 +0200
Subject: [PATCH 13/20] Commit setUseDisplayUnits to store

---
 src/store/modules/user-settings/actions.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/store/modules/user-settings/actions.ts b/src/store/modules/user-settings/actions.ts
index 38bb8abba..66b2ce657 100644
--- a/src/store/modules/user-settings/actions.ts
+++ b/src/store/modules/user-settings/actions.ts
@@ -12,6 +12,7 @@ export const actions: ActionTree<UserSettingsState, RootState>= {
         unitSettings.push( context.state.byId[id])
       }
     }
+    context.commit('setUseDisplayUnits', payload === 'display')
     if (payload !== 'custom') {
       const i = payload === 'stored' ? 0 : 1
       for (const s of unitSettings) {

From fcc1af67b202335bae1285fd5c25637c9dfa21ed Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Thu, 6 Jul 2023 10:35:05 +0200
Subject: [PATCH 14/20] Subscribe to convertDatum

---
 src/layouts/Default.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/layouts/Default.vue b/src/layouts/Default.vue
index 00b350ed9..09699028d 100644
--- a/src/layouts/Default.vue
+++ b/src/layouts/Default.vue
@@ -55,7 +55,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Vue } from 'vue-property-decorator'
+import { Component, Mixins } from 'vue-property-decorator'
 import CogMenu from '@/components/CogMenu.vue'
 import TimeControl from '@/components/timecontrol/TimeControl.vue'
 import LoginComponent from '@/components/LoginComponent.vue'
@@ -87,7 +87,8 @@ export default class Default extends Mixins(ThemeMixin) {
     loadConfig!: () => void
   @userSettingsModule.Action('changeUseDisplayUnits')
     changeUseDisplayUnits!: (value: string) => void
-
+  @userSettingsModule.Mutation('setConvertDatum')
+    setConvertDatum!: (value: boolean) => void
 
   created() {
     this.$store.subscribe((mutation, state) => {
@@ -102,6 +103,9 @@ export default class Default extends Mixins(ThemeMixin) {
           case 'units.displayUnits':
             this.changeUseDisplayUnits(mutation.payload.value)
             break
+          case 'datum.water-level':
+            this.setConvertDatum(mutation.payload.value)
+            break
           default:
         }
       }

From f7038e1cf640bb8dbffe8f2cf050bb74b43c2e3b Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Thu, 6 Jul 2023 10:40:57 +0200
Subject: [PATCH 15/20] Rename datum setting

---
 src/layouts/Default.vue                      | 2 +-
 src/store/modules/user-settings/getters.ts   | 2 +-
 src/store/modules/user-settings/serialize.ts | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/layouts/Default.vue b/src/layouts/Default.vue
index 09699028d..a4caef42b 100644
--- a/src/layouts/Default.vue
+++ b/src/layouts/Default.vue
@@ -103,7 +103,7 @@ export default class Default extends Mixins(ThemeMixin) {
           case 'units.displayUnits':
             this.changeUseDisplayUnits(mutation.payload.value)
             break
-          case 'datum.water-level':
+          case 'datum.verticalDatum':
             this.setConvertDatum(mutation.payload.value)
             break
           default:
diff --git a/src/store/modules/user-settings/getters.ts b/src/store/modules/user-settings/getters.ts
index 2fb9f123c..e20574b2a 100644
--- a/src/store/modules/user-settings/getters.ts
+++ b/src/store/modules/user-settings/getters.ts
@@ -24,7 +24,7 @@ export const getters: GetterTree<UserSettingsState, RootState> = {
     return result.filter((s) => s.group === id)
   },
   convertDatum: (state, getters, _rootState: RootState, rootGetters) => () => {
-    return state.byId['datum.water-level'].value
+    return state.byId['datum.verticalDatum'].value
   },
   useDisplayUnits: (state, getters, _rootState: RootState, rootGetters) => () => {
     return state.byId['datum'].value
diff --git a/src/store/modules/user-settings/serialize.ts b/src/store/modules/user-settings/serialize.ts
index 2186a709d..868ca804b 100644
--- a/src/store/modules/user-settings/serialize.ts
+++ b/src/store/modules/user-settings/serialize.ts
@@ -31,7 +31,7 @@ export function deserializeState(json: string): Partial<RootState> {
         { value: 'm³' },
         { value: 'ML' }
       ], group: 'Units'},
-      { id: 'datum.water-level', type: 'boolean', label: 'Absolute vertical datum', value: true , group: 'Datum'},
+      { id: 'datum.verticalDatum', type: 'boolean', label: 'Absolute vertical datum', value: true, group: 'Datum'},
       { id: 'ui.theme',  type: 'oneOfMultiple',  label: 'Theme', value: 'auto', items: [
         { value: 'auto', icon: 'mdi-theme-light-dark'},
         { value: 'light', icon: 'mdi-weather-sunny'},

From 12e3afa2c3d0895019cfcc630a96d9201e6803a5 Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Thu, 6 Jul 2023 10:50:10 +0200
Subject: [PATCH 16/20] Adjust time series requets for convertDatum and
 useDisplayUnits

---
 src/mixins/TimeSeriesMixin.ts   | 19 +++++++++++++++++--
 src/views/TimeSeriesDisplay.vue | 16 +++++++++++++++-
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/mixins/TimeSeriesMixin.ts b/src/mixins/TimeSeriesMixin.ts
index 80f534d7b..8fea17d1b 100644
--- a/src/mixins/TimeSeriesMixin.ts
+++ b/src/mixins/TimeSeriesMixin.ts
@@ -4,6 +4,15 @@ import {ActionRequest, PiWebserviceProvider} from '@deltares/fews-pi-requests'
 import PiRequestsMixin from "@/mixins/PiRequestsMixin"
 import { DateTime, Interval } from 'luxon'
 
+
+interface UpdateTimeSeriesOptions {
+  startTime: Date;
+  endTime: Date;
+  thinning: boolean;
+  convertDatum: boolean;
+  useDisplayUnits: boolean;
+}
+
 function timeZoneOffsetString (offset: number): string {
   const offsetInMinutes = offset * 60
   const minutes = offsetInMinutes % 60
@@ -32,8 +41,7 @@ export default class TimeSeriesMixin extends Mixins(PiRequestsMixin) {
   timeSeriesStore: Record<string, Series> = {}
   controller: AbortController = new AbortController
 
-  async updateTimeSeries(requests: ActionRequest[], options?: { startTime: Date, endTime: Date, thinning: boolean}
-  ): Promise<void> {
+  async updateTimeSeries(requests: ActionRequest[], options?: UpdateTimeSeriesOptions): Promise<void> {
 
     this.controller.abort()
     const baseUrl = this.$config.get('VUE_APP_FEWS_WEBSERVICES_URL')
@@ -64,6 +72,13 @@ export default class TimeSeriesMixin extends Mixins(PiRequestsMixin) {
         url.searchParams.set('endTime', endTime.toISO({ suppressMilliseconds: true }) ?? '')
         url.searchParams.set('thinning', `${timeStepPerPixel}`)
       }
+      if (options?.useDisplayUnits !== undefined) {
+        url.searchParams.set('useDisplayUnits', `${options?.useDisplayUnits}`)
+      }
+      if (options?.convertDatum) {
+        url.searchParams.set('convertDatum', `${options?.convertDatum}`)
+      }
+
       const resourceId = `${request.key}`
       const relativeUrl = request.request.split('?')[0] + url.search
       webServiceProvider.getTimeSeriesWithRelativeUrl(relativeUrl).then( piSeries =>
diff --git a/src/views/TimeSeriesDisplay.vue b/src/views/TimeSeriesDisplay.vue
index 61d0a24c7..52bca3f30 100644
--- a/src/views/TimeSeriesDisplay.vue
+++ b/src/views/TimeSeriesDisplay.vue
@@ -97,6 +97,7 @@ import { namespace } from 'vuex-class'
 import { timeSeriesDisplayToChartConfig } from '@/lib/ChartConfig/timeSeriesDisplayToChartConfig'
 
 const sytemTimeModule = namespace('systemTime')
+const userSettingsModule = namespace('userSettings')
 
 @Component({
   components: {
@@ -113,6 +114,10 @@ export default class TimeSeriesDisplay extends Mixins(TimeSeriesMixin, PiRequest
     startTime!: Date
   @sytemTimeModule.State('endTime')
     endTime!: Date
+  @userSettingsModule.State('useDisplayUnits')
+    useDisplayUnits!: boolean
+  @userSettingsModule.State('convertDatum')
+    convertDatum!: boolean
 
   static TIME_SERIES_DIALOG_PANEL: string = "time series dialog";
 
@@ -168,6 +173,7 @@ export default class TimeSeriesDisplay extends Mixins(TimeSeriesMixin, PiRequest
     if (node.url && node.mainPanel !== TimeSeriesDisplay.TIME_SERIES_DIALOG_PANEL) return 'mdi-share';
     return undefined;
   }
+
   async loadNodes(): Promise<void> {
     let nodes = await this.webServiceProvider.getTopologyNodes();
     this.urlTopologyNodeMap.clear();
@@ -210,6 +216,8 @@ export default class TimeSeriesDisplay extends Mixins(TimeSeriesMixin, PiRequest
     this.open = [items[0].id]
   }
 
+  @Watch('useDisplayUnits')
+  @Watch('convertDatum')
   @Watch('$store.state.systemTime.startTime')
   async onTimeChanged(): Promise<void> {
     await this.loadTimeSeries(this.selectedItem);
@@ -253,7 +261,13 @@ export default class TimeSeriesDisplay extends Mixins(TimeSeriesMixin, PiRequest
   }
 
   private async loadTimeSeries(index: number) {
-    this.updateTimeSeries(this.requests[index], {startTime: this.startTime, endTime: this.endTime, thinning: true})
+    this.updateTimeSeries(this.requests[index], {
+      startTime: this.startTime,
+      endTime: this.endTime,
+      thinning: true,
+      useDisplayUnits: this.useDisplayUnits,
+      convertDatum: this.convertDatum,
+    })
   }
 
 }

From 462133dd736bd1d349e73943ea57b5a5cb17ace5 Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Thu, 6 Jul 2023 10:50:42 +0200
Subject: [PATCH 17/20] Remove unused getters

---
 src/store/modules/user-settings/getters.ts | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/store/modules/user-settings/getters.ts b/src/store/modules/user-settings/getters.ts
index e20574b2a..1d4b2b749 100644
--- a/src/store/modules/user-settings/getters.ts
+++ b/src/store/modules/user-settings/getters.ts
@@ -22,11 +22,5 @@ export const getters: GetterTree<UserSettingsState, RootState> = {
   listByGroup: (state, getters, _rootState: RootState, rootGetters) => (id: string) => {
     const result = state.allIds.map(id => getters.find(id))
     return result.filter((s) => s.group === id)
-  },
-  convertDatum: (state, getters, _rootState: RootState, rootGetters) => () => {
-    return state.byId['datum.verticalDatum'].value
-  },
-  useDisplayUnits: (state, getters, _rootState: RootState, rootGetters) => () => {
-    return state.byId['datum'].value
-  },
+  }
 }

From 27f26486a080005873f718974efb3c27eb314777 Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Thu, 6 Jul 2023 10:59:22 +0200
Subject: [PATCH 18/20] Restore user settings from localStorage

---
 src/store/modules/user-settings/serialize.ts | 25 ++++++++++----------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/store/modules/user-settings/serialize.ts b/src/store/modules/user-settings/serialize.ts
index 868ca804b..cf4537bb7 100644
--- a/src/store/modules/user-settings/serialize.ts
+++ b/src/store/modules/user-settings/serialize.ts
@@ -27,7 +27,7 @@ export function deserializeState(json: string): Partial<RootState> {
         { value: 'm³/s' },
         { value: 'ML/d'}
       ], group: 'Units'},
-      { id: 'units.parameterGroup.Volume', type: 'oneOfMultiple', label: 'Volume', value: 'ML',  disabled: true, items: [
+      { id: 'units.parameterGroup.Volume', type: 'oneOfMultiple', label: 'Volume', value: 'ML', disabled: true, items: [
         { value: 'm³' },
         { value: 'ML' }
       ], group: 'Units'},
@@ -56,18 +56,18 @@ export function deserializeState(json: string): Partial<RootState> {
             if (state.userSettings !== undefined) {
               const id = settings.id
               if (state.userSettings.allIds.includes(id)) {
-                console.log('defaultState', id, state.userSettings.byId[id])
                 const s = state.userSettings.byId[id]
                 const defaultValue = s.value
-
+                s.favorite = settings.favorite
                 if ( state.userSettings.byId[id].type === 'oneOfMultiple' ) {
                   const items = state.userSettings.byId[id].items
                   const restoredValue = items?.map(i => i.value).includes(settings.value) ? settings.value : defaultValue
                   settings.value = restoredValue
                 }
-                state.userSettings.byId[settings.id] = {...settings, ...s}
+                const newSettings = {...settings, ...s}
+                state.userSettings.byId[settings.id] = newSettings
               } else {
-                console.warn('Old user setting', settings)
+                console.warn('Unkown user setting', settings)
               }
             }
         }
@@ -75,10 +75,11 @@ export function deserializeState(json: string): Partial<RootState> {
     return state
 }
 
-// export function rehydrateState(state: UserSettingsState): void {
-//     for (const id of state.allIds) {
-//         const settings = state.byId[id]
-//         console.log('rehydrateState', settings)
-//         state.byId[id] = settings
-//     }
-// }
+export function rehydrateState(state: UserSettingsState): void {
+    for (const id of state.allIds) {
+        const settings = state.byId[id]
+        state.byId[id] = settings
+    }
+    state.convertDatum = state.byId['datum.verticalDatum'].value as boolean
+    state.useDisplayUnits = state.byId['units.displayUnits'].value === 'display'
+}

From 0112a654be92e207412cf77d1d886c3bd3f8f87b Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Thu, 6 Jul 2023 11:12:29 +0200
Subject: [PATCH 19/20] Move default settings to assets

---
 src/assets/DefaultUserSettings.json          | 101 +++++++++++++++++++
 src/store/modules/user-settings/serialize.ts |  27 +----
 2 files changed, 103 insertions(+), 25 deletions(-)
 create mode 100644 src/assets/DefaultUserSettings.json

diff --git a/src/assets/DefaultUserSettings.json b/src/assets/DefaultUserSettings.json
new file mode 100644
index 000000000..1ca4fb774
--- /dev/null
+++ b/src/assets/DefaultUserSettings.json
@@ -0,0 +1,101 @@
+[
+  {
+    "id": "units.displayUnits",
+    "type": "oneOfMultiple",
+    "label": "Display Units",
+    "value": "display",
+    "items": [
+      {
+        "value": "stored",
+        "icon": "mdi-database"
+      },
+      {
+        "value": "display",
+        "icon": "mdi-monitor"
+      },
+      {
+        "value": "custom",
+        "icon": "mdi-monitor-edit",
+        "disabled": true
+      }
+    ],
+    "group": "Units"
+  },
+  {
+    "id": "units.parameterGroup.Discharge",
+    "type": "oneOfMultiple",
+    "label": "Discharge",
+    "value": "ML/d",
+    "disabled": true,
+    "items": [
+      {
+        "value": "m³/s"
+      },
+      {
+        "value": "ML/d"
+      }
+    ],
+    "group": "Units"
+  },
+  {
+    "id": "units.parameterGroup.Volume",
+    "type": "oneOfMultiple",
+    "label": "Volume",
+    "value": "ML",
+    "disabled": true,
+    "items": [
+      {
+        "value": "m³"
+      },
+      {
+        "value": "ML"
+      }
+    ],
+    "group": "Units"
+  },
+  {
+    "id": "datum.verticalDatum",
+    "type": "boolean",
+    "label": "Absolute vertical datum",
+    "value": true,
+    "group": "Datum"
+  },
+  {
+    "id": "ui.theme",
+    "type": "oneOfMultiple",
+    "label": "Theme",
+    "value": "auto",
+    "items": [
+      {
+        "value": "auto",
+        "icon": "mdi-theme-light-dark"
+      },
+      {
+        "value": "light",
+        "icon": "mdi-weather-sunny"
+      },
+      {
+        "value": "dark",
+        "icon": "mdi-weather-night"
+      }
+    ],
+    "group": "UI"
+  },
+  {
+    "id": "locale.language",
+    "type": "oneOfMultiple",
+    "label": "Language",
+    "value": "en-au",
+    "items": [
+      {
+        "icon": "fi-au",
+        "value": "en-au"
+      },
+      {
+        "icon": "fi-nl",
+        "value": "nl-nl"
+      }
+    ],
+    "group": "Locale"
+  }
+]
\ No newline at end of file
diff --git a/src/store/modules/user-settings/serialize.ts b/src/store/modules/user-settings/serialize.ts
index cf4537bb7..20ca852fe 100644
--- a/src/store/modules/user-settings/serialize.ts
+++ b/src/store/modules/user-settings/serialize.ts
@@ -1,6 +1,7 @@
 import { RootState } from '../../types'
 import { UserSettingsItem, UserSettingsState } from './types'
 import { state as emptyState } from './index'
+import DefaultUserSettings from '@/assets/DefaultUserSettings.json'
 
 export function serializeState(state: UserSettingsState): Partial<UserSettingsItem>[] {
     const serializedSettings: Partial<UserSettingsItem>[] = []
@@ -17,31 +18,7 @@ export function serializeState(state: UserSettingsState): Partial<UserSettingsIt
 }
 
 export function deserializeState(json: string): Partial<RootState> {
-    const defaultSettings: UserSettingsItem[] = [
-      { id: 'units.displayUnits',  type: 'oneOfMultiple',  label: 'Display Units', value: 'display', items: [
-        { value: 'stored', icon: 'mdi-database'},
-        { value: 'display', icon: 'mdi-monitor'},
-        { value: 'custom' , icon: 'mdi-monitor-edit', disabled: true}
-      ], group: 'Units'},
-      { id: 'units.parameterGroup.Discharge', type: 'oneOfMultiple', label: 'Discharge', value: 'ML/d', disabled: true, items: [
-        { value: 'm³/s' },
-        { value: 'ML/d'}
-      ], group: 'Units'},
-      { id: 'units.parameterGroup.Volume', type: 'oneOfMultiple', label: 'Volume', value: 'ML', disabled: true, items: [
-        { value: 'm³' },
-        { value: 'ML' }
-      ], group: 'Units'},
-      { id: 'datum.verticalDatum', type: 'boolean', label: 'Absolute vertical datum', value: true, group: 'Datum'},
-      { id: 'ui.theme',  type: 'oneOfMultiple',  label: 'Theme', value: 'auto', items: [
-        { value: 'auto', icon: 'mdi-theme-light-dark'},
-        { value: 'light', icon: 'mdi-weather-sunny'},
-        { value: 'dark' , icon: 'mdi-weather-night'}
-      ], group: 'UI'},
-      { id: 'locale.language', type: 'oneOfMultiple', label: 'Language', value: 'en-au', items: [
-        { icon: 'fi-au', value: 'en-au' },
-        { icon: 'fi-nl', value: 'nl-nl' }
-      ], group: 'Locale'},
-    ]
+    const defaultSettings = DefaultUserSettings as UserSettingsItem[]
     const defaultState = emptyState
     defaultState.allIds = defaultSettings.map( item => item.id)
     const byId: Record<string,UserSettingsItem>= {}

From fda745c0748dfc92e1ac4270bd6f45afb07c7d0c Mon Sep 17 00:00:00 2001
From: Werner Kramer <werner.kramer@vortech.nl>
Date: Thu, 6 Jul 2023 11:44:55 +0200
Subject: [PATCH 20/20] Add australian english

---
 src/locales/en.json | 3 ++-
 src/locales/nl.json | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index 6029612c3..2a0c07e70 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,6 +1,7 @@
 {
   "settings": {
     "nl": "Dutch",
-    "en": "English"
+    "en": "English",
+    "en-au": "Australian English"
   }
 }
diff --git a/src/locales/nl.json b/src/locales/nl.json
index 355077e05..29003c72b 100644
--- a/src/locales/nl.json
+++ b/src/locales/nl.json
@@ -1,6 +1,7 @@
 {
   "settings" : {
     "nl": "Nederlands",
-    "en": "Engels"
+    "en": "Engels",
+    "en-au": "Australisch-Engels"
   }
 }