171 user settings

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",

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,6 +27,8 @@ 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> {
     if (this.$config.authenticationIsEnabled) {

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"
+  }
+]

src/components/CogMenu.vue

@@ -1,51 +1,69 @@
 <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-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>
+      <v-list-item dense v-for="(s, i) of listFavorite" :key="i">
+        <v-list-item-content>
+        <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>
         </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>
+        <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>
-      <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-divider />
+      <v-list-item :to="{ name: 'UserSettingsView'}">All Settings ...</v-list-item>
     </v-list>
   </v-menu>
 </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
+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')
+
+@Component
+export default class CogMenu extends Vue {
+  @userSettingsModule.Getter('listFavorite')
+  listFavorite!: UserSettingsItem[]
+  @userSettingsModule.Mutation('add')
+  addUserSetting!: (item: UserSettingsItem) => void
+
+  items: UserSettingsItem[] = []
+
+  created(): void {
+    console.log(this.listFavorite)
+    this.items = this.listFavorite
+  }
+
+  onValueChange(item: UserSettingsItem) {
+    this.addUserSetting(item)
   }
-})
-export default class CogMenu extends Mixins(ThemeMixin) {
-  packageVersion = packageConfig.version
 }
 </script>
 

src/layouts/Default.vue

@@ -55,17 +55,19 @@
 </template>
 
 <script lang="ts">
-import { Component, 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'
 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')
+const userSettingsModule = namespace('userSettings')
 
 @Component({
   components: {
@@ -74,7 +76,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')
@@ -83,6 +85,32 @@ export default class Default extends Vue {
     webOcComponents!: { [key: string]: WebOcComponent }
   @fewsConfigModule.Action('loadConfig')
     loadConfig!: () => void
+  @userSettingsModule.Action('changeUseDisplayUnits')
+    changeUseDisplayUnits!: (value: string) => void
+  @userSettingsModule.Mutation('setConvertDatum')
+    setConvertDatum!: (value: boolean) => 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
+          case 'units.displayUnits':
+            this.changeUseDisplayUnits(mutation.payload.value)
+            break
+          case 'datum.verticalDatum':
+            this.setConvertDatum(mutation.payload.value)
+            break
+          default:
+        }
+      }
+    })
+  }
 
   mounted(): void {
     this.loadConfig()

src/locales/en.json

@@ -1,6 +1,7 @@
 {
   "settings": {
     "nl": "Dutch",
-    "en": "English"
+    "en": "English",
+    "en-au": "Australian English"
   }
 }

src/locales/nl.json

@@ -1,6 +1,7 @@
 {
   "settings" : {
     "nl": "Nederlands",
-    "en": "Engels"
+    "en": "Engels",
+    "en-au": "Australisch-Engels"
   }
 }

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 {