[web] Streamline stores

web-src/src/App.vue

@@ -28,7 +28,6 @@ import ModalDialogUpdate from '@/components/ModalDialogUpdate.vue'
 import NavbarBottom from '@/components/NavbarBottom.vue'
 import NavbarTop from '@/components/NavbarTop.vue'
 import ReconnectingWebSocket from 'reconnectingwebsocket'
-import configuration from '@/api/configuration'
 import { useConfigurationStore } from '@/stores/configuration'
 import { useLibraryStore } from '@/stores/library'
 import { useNotificationsStore } from '@/stores/notifications'
@@ -92,7 +91,7 @@ export default {
       volume: [this.playerStore.initialise, this.outputsStore.initialise]
     }
     this.connect()
-    this.$router.beforeEach((to, from, next) => {
+    this.$router.beforeEach(async (to, from, next) => {
       this.updateClipping()
       if (!(to.path === from.path && to.hash)) {
         if (to.meta.progress) {
@@ -111,23 +110,20 @@ export default {
     this.scheduledHandlers.clear()
   },
   methods: {
-    connect() {
-      configuration
-        .list()
-        .then((data) => {
-          this.configurationStore.$state = data
-          this.uiStore.hideSingles = data.hide_singles
-          document.title = data.library_name
-          this.openWebsocket()
-          this.$Progress.finish()
-        })
-        .catch(() => {
-          this.notificationsStore.add({
-            text: this.$t('server.connection-failed'),
-            topic: 'connection',
-            type: 'danger'
-          })
+    async connect() {
+      try {
+        await this.configurationStore.initialise()
+        this.uiStore.hideSingles = this.configurationStore.hide_singles
+        document.title = this.configurationStore.library_name
+        this.openWebsocket()
+        this.$Progress.finish()
+      } catch (e) {
+        this.notificationsStore.add({
+          text: this.$t('server.connection-failed'),
+          topic: 'connection',
+          type: 'danger'
         })
+      }
     },
     createWebsocket() {
       const protocol = window.location.protocol.replace('http', 'ws')

web-src/src/api/configuration.js

@@ -1,7 +1,7 @@
 import api from '@/api'
 
 export default {
-  list() {
+  state() {
     return api.get('./api/config')
   }
 }

web-src/src/pages/PageFiles.vue

@@ -33,7 +33,6 @@ import ListPlaylists from '@/components/ListPlaylists.vue'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogPlayable from '@/components/ModalDialogPlayable.vue'
 import PaneTitle from '@/components/PaneTitle.vue'
-import configuration from '@/api/configuration'
 import library from '@/api/library'
 import queue from '@/api/queue'
 import { useConfigurationStore } from '@/stores/configuration'
@@ -104,8 +103,8 @@ export default {
           this.tracks = new GroupedList(data.tracks)
         }
       } else {
-        const config = await configuration.list()
-        this.directories = config.directories.map((path) =>
+        await this.configurationStore.initialise()
+        this.directories = this.configurationStore.directories.map((path) =>
           this.transform(path)
         )
         this.playlists = new GroupedList()

web-src/src/stores/configuration.js

@@ -1,11 +1,20 @@
+import configuration from '@/api/configuration'
 import { defineStore } from 'pinia'
 
 export const useConfigurationStore = defineStore('ConfigurationStore', {
+  actions: {
+    async initialise() {
+      this.$state = await configuration.state()
+    }
+  },
   state: () => ({
     allow_modifying_stored_playlists: false,
     buildoptions: [],
     default_playlist_directory: '',
+    directories: [],
+    hide_singles: false,
     library_name: '',
+    radio_playlists: false,
     version: '',
     websocket_port: 0
   })

web-src/src/stores/notifications.js

@@ -33,7 +33,7 @@ export const useNotificationsStore = defineStore('NotificationsStore', {
     }
   },
   getters: {
-    isEmpty: (state) => state.list.length <= 0
+    isEmpty: (state) => state.list.length === 0
   },
   state: () => ({ list: [] })
 })