ui_migration refactor(store) use pinia stores in components

webapp/src/components/genericComponents/miniStreamDisplay.vue

@@ -16,6 +16,8 @@
 
 <script>
 import { useIntersectionObserver } from "@vueuse/core";
+import { useSettingsStore } from "@/stores/settings.js";
+import { mapState } from "pinia";
 
 // Export main app
 export default {
@@ -28,8 +30,9 @@ export default {
   },
 
   computed: {
-    streamImgUri: function () {
-      return `${this.$store.getters.baseUri}/camera/mjpeg_stream`;
+    ...mapState(useSettingsStore, ["baseUri"]),
+    streamImgUri() {
+      return `${this.baseUri}/camera/mjpeg_stream`;
     },
   },
 

webapp/src/components/genericComponents/progressBar.vue

@@ -5,6 +5,9 @@
 </template>
 
 <script>
+import { mapState } from "pinia";
+import { useSettingsStore } from "@/stores/settings";
+
 export default {
   name: "ProgressBar",
 
@@ -13,6 +16,7 @@ export default {
   emits: ["set-tab"],
 
   computed: {
+    ...mapState(useSettingsStore, ["ready"]),
     tooltipOptions: function () {
       var title = this.id.charAt(0).toUpperCase() + this.id.slice(1);
       return `pos: right; title: ${title}; delay: 500`;
@@ -21,7 +25,7 @@ export default {
     classObject: function () {
       return {
         "tabicon-active": this.currentTab == this.id,
-        "uk-disabled": this.requireConnection && !this.$store.getters.ready,
+        "uk-disabled": this.requireConnection && !this.ready,
       };
     },
   },

webapp/src/components/genericComponents/tabContent.vue

@@ -1,7 +1,6 @@
 <template>
   <div
-    v-if="!(requireConnection && !$store.getters.ready)"
-    :hidden="currentTab != tabID"
+    v-if="!(requireConnection && !ready) && currentTab === tabID"
     class="uk-width-expand uk-height-1-1"
   >
     <slot></slot>
@@ -9,6 +8,9 @@
 </template>
 
 <script>
+import { mapState } from "pinia";
+import { useSettingsStore } from "@/stores/settings";
+
 export default {
   name: "TabContent",
 
@@ -23,7 +25,9 @@ export default {
     },
     requireConnection: Boolean,
   },
-  computed: {},
+  computed: {
+    ...mapState(useSettingsStore, ["ready"]),
+  },
 
   methods: {},
 };

webapp/src/components/genericComponents/tabIcon.vue

@@ -14,6 +14,9 @@
 </template>
 
 <script>
+import { mapState } from "pinia";
+import { useSettingsStore } from "@/stores/settings.js";
+
 export default {
   name: "TabIcon",
 
@@ -52,6 +55,7 @@ export default {
   emits: ["set-tab"],
 
   computed: {
+    ...mapState(useSettingsStore, ["ready"]),
     computedTitle: function () {
       if (this.title !== undefined) {
         return this.title;
@@ -74,7 +78,7 @@ export default {
     classObject: function () {
       return {
         "tabicon-active": this.currentTab == this.tabID,
-        "uk-disabled": this.requireConnection && !this.$store.getters.ready,
+        "uk-disabled": this.requireConnection && !this.ready,
       };
     },
   },