chore: options in local storage

src/App.vue

@@ -19,23 +19,42 @@ import { defineComponent } from 'vue';
 import packageInfo from '../package.json';
 import { useApiStore } from './stores/apiStore';
 import Navbar from './components/Navbar.vue';
+import { useMainStore } from './stores/mainStore';
 
 export default defineComponent({
   components: { Navbar },
 
   data: () => ({
     version: packageInfo.version,
-    apiStore: useApiStore()
+    apiStore: useApiStore(),
+    mainStore: useMainStore()
   }),
 
-  async mounted() {
-    this.apiStore.fetchSceneriesData();
+  methods: {
+    loadLocalSettings() {
+      const settingsStorage = window.localStorage.getItem('settings');
 
+      if (settingsStorage != null) {
+        const settingsObj = JSON.parse(settingsStorage) as Record<string, any>;
+
+        Object.keys(settingsObj).forEach((key) => {
+          (this.mainStore.filters as any)[key] = settingsObj[key];
+        });
+      }
+    }
+  },
+
+  created() {
+    this.apiStore.fetchSceneriesData();
     this.apiStore.fetchActiveData();
 
+    this.loadLocalSettings();
+  },
+
+  mounted() {
     setInterval(() => {
       this.apiStore.fetchActiveData();
-    }, 30000);
+    }, 20000);
   }
 });
 </script>

src/components/Dropdown.vue

@@ -9,7 +9,15 @@
         <h3>Opcje</h3>
         <hr />
 
-        <div style="margin: 0.5em 0">
+        <div
+          style="
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 0.5em;
+            margin: 0.5em 0;
+          "
+        >
           <label>
             <input type="checkbox" v-model="store.filters.nonPassenger" />
             Relacje niepasażerskie
@@ -19,9 +27,14 @@
             <input type="checkbox" v-model="store.filters.terminating" />
             Relacje kończące bieg
           </label>
+
+          <label>
+            <input type="checkbox" v-model="store.filters.soundsEnabled" />
+            Dźwięki
+          </label>
         </div>
 
-        <div v-if="isPragotronOpen">
+        <div v-if="isPragotronOpen" style="margin: 0.5em 0">
           <label for="checkpoint">
             Posterunek:
             <select id="checkpoint" v-model="store.selectedCheckpointName">
@@ -51,6 +64,15 @@ export default defineComponent({
     isPragotronOpen() {
       return this.$route.path == '/board';
     }
+  },
+
+  watch: {
+    'store.filters': {
+      deep: true,
+      handler(filters: typeof this.store.filters) {
+        window.localStorage.setItem('settings', JSON.stringify(filters));
+      }
+    }
   }
 });
 </script>
@@ -65,7 +87,6 @@ h3 {
   margin: 0;
 }
 
-
 .dropdown-bg {
   position: fixed;
   top: 0;

src/stores/mainStore.ts

@@ -25,7 +25,9 @@ export const useMainStore = defineStore('main', {
       optionsOpen: false,
       filters: {
         nonPassenger: true,
-        terminating: true
+        terminating: true,
+        timetableMode: 'departures' as 'departures' | 'arrivals',
+        soundsEnabled: false
       },
       selectedStationName: '',
       selectedCheckpointName: ''

src/views/PragotronView.vue

@@ -220,7 +220,10 @@ export default defineComponent({
     },
 
     animatingStatus(val: typeof this.animatingStatus) {
-      if (val == 'running') (this.$refs['audio'] as HTMLAudioElement).play();
+      if (val == 'running' && this.mainStore.filters.soundsEnabled)
+        (this.$refs['audio'] as HTMLAudioElement).play().catch((err) => {
+          console.error('Dźwięk nie mógł zostać odtworzony:', err);
+        });
       else {
         (this.$refs['audio'] as HTMLAudioElement).currentTime = 0;
         (this.$refs['audio'] as HTMLAudioElement).pause();