Updates Auto Sync component to composition API

aaronzi · Dec 18, 2024 · cd54cbe · cd54cbe
1 parent 0b741d7
commit cd54cbe
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 95 deletions.
diff --git a/aas-web-ui/src/components/AppNavigation/AutoSync.vue b/aas-web-ui/src/components/AppNavigation/AutoSync.vue
@@ -66,69 +66,35 @@
     </v-btn>
 </template>
 
-<script lang="ts">
-    import { defineComponent } from 'vue';
+<script lang="ts" setup>
+    import { computed, ref } from 'vue';
+    import StatusSwitch from '@/components/AppNavigation/Settings/StatusSwitch.vue';
     import { useNavigationStore } from '@/store/NavigationStore';
-    import StatusSwitch from './Settings/StatusSwitch.vue';
 
-    export default defineComponent({
-        name: 'AutoSync',
-        components: {
-            StatusSwitch,
-        },
-        props: ['submodelObject'],
+    const navigationStore = useNavigationStore();
 
-        setup() {
-            const navigationStore = useNavigationStore();
+    const autoSyncStatus = ref(navigationStore.getAutoSync ? navigationStore.getAutoSync.state : false);
+    const intervalTime = ref(1000);
 
-            return {
-                navigationStore, // NavigationStore Object
-            };
-        },
+    const isMobile = computed(() => navigationStore.getIsMobile);
 
-        data() {
-            return {
-                autoSyncStatus: false, // Status of the auto-sync (true = active, false = inactive)
-                intervalTime: 1000, // Interval time for the auto-sync
-            };
-        },
+    // Checks if the input is smaller than 100ms and sets it to 100ms if it is
+    function checkMin(e: boolean) {
+        if (intervalTime.value < 100 && !e) intervalTime.value = 100;
+        if (!e) updateAutoSync();
+    }
 
-        computed: {
-            // Get the auto-sync state from the store
-            autoSync() {
-                return this.navigationStore.getAutoSync ? this.navigationStore.getAutoSync.state : false;
-            },
+    // Updates the auto-sync (+ interval) in the store
+    function updateAutoSync() {
+        navigationStore.dispatchUpdateAutoSync({
+            state: autoSyncStatus.value,
+            interval: intervalTime.value,
+        });
+    }
 
-            // Check if the current Device is a Mobile Device
-            isMobile() {
-                return this.navigationStore.getIsMobile;
-            },
-        },
-
-        mounted() {
-            this.autoSyncStatus = this.autoSync;
-        },
-
-        methods: {
-            // Checks if the input is smaller than 100ms and sets it to 100ms if it is
-            checkMin(e: boolean) {
-                if (this.intervalTime < 100 && !e) this.intervalTime = 100;
-                if (!e) this.updateAutoSync();
-            },
-
-            // Updates the auto-sync (+ interval) in the store
-            updateAutoSync() {
-                this.navigationStore.dispatchUpdateAutoSync({
-                    state: this.autoSyncStatus,
-                    interval: this.intervalTime,
-                });
-            },
-
-            // Toggles the auto-sync
-            toggleAutoSync() {
-                this.autoSyncStatus = !this.autoSyncStatus;
-                this.updateAutoSync();
-            },
-        },
-    });
+    // Toggles the auto-sync
+    function toggleAutoSync() {
+        autoSyncStatus.value = !autoSyncStatus.value;
+        updateAutoSync();
+    }
 </script>
diff --git a/aas-web-ui/src/components/AppNavigation/Settings/StatusSwitch.vue b/aas-web-ui/src/components/AppNavigation/Settings/StatusSwitch.vue
@@ -8,45 +8,16 @@
         @change="updateStatusCheck()"></v-switch>
 </template>
 
-<script lang="ts">
-    import { defineComponent } from 'vue';
+<script lang="ts" setup>
+    import { ref } from 'vue';
     import { useNavigationStore } from '@/store/NavigationStore';
 
-    export default defineComponent({
-        name: 'StatusSwitch',
+    const navigationStore = useNavigationStore();
 
-        setup() {
-            const navigationStore = useNavigationStore();
+    const statusCheckStatus = ref(navigationStore.getStatusCheck);
 
-            return {
-                navigationStore, // NavigationStore Object
-            };
-        },
-
-        data() {
-            return {
-                statusCheckStatus: false, // Status of the status-check (true = active, false = inactive)
-            };
-        },
-
-        computed: {
-            // get the status-check state from the store
-            statusCheck() {
-                return this.navigationStore.getStatusCheck;
-            },
-        },
-
-        mounted() {
-            this.statusCheckStatus = this.statusCheck;
-        },
-
-        methods: {
-            // Function to toggle the status-check
-            updateStatusCheck() {
-                this.navigationStore.dispatchUpdateStatusCheck(this.statusCheckStatus);
-                // save status-check preference in local storage
-                localStorage.setItem('statusCheck', this.statusCheckStatus.toString());
-            },
-        },
-    });
+    function updateStatusCheck() {
+        navigationStore.dispatchUpdateStatusCheck(statusCheckStatus.value);
+        localStorage.setItem('statusCheck', statusCheckStatus.value.toString()); // save status-check preference in local storage
+    }
 </script>