Falukant production, family and administration enhancements

frontend/src/components/falukant/StatusBar.vue

@@ -5,11 +5,16 @@
                 <span class="status-icon">{{ item.icon }}: {{ item.value }}</span>
             </div>
         </template>
+        <span v-if="statusItems.length > 0">
+            <template v-for="(menuItem, key) in menu.falukant.children" :key="menuItem.id" >
+                <img :src="'/images/icons/falukant/' + key + '.jpg'" class="menu-icon" @click="openPage(menuItem)" :title="$t(`navigation.m-falukant.${key}`)" />
+            </template>
+        </span>
     </div>
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 import apiClient from "@/utils/axios.js";
 
 export default {
@@ -25,18 +30,25 @@ export default {
         };
     },
     computed: {
-        ...mapState(["socket"]),
+        ...mapState(["socket", "daemonSocket"]),
+        ...mapGetters(['menu']),
     },
     async mounted() {
         await this.fetchStatus();
         if (this.socket) {
             this.socket.on("falukantUpdateStatus", this.fetchStatus);
         }
+        if (this.daemonSocket) {
+            this.daemonSocket.addEventListener("message", this.handleDaemonSocketMessage);
+        }
     },
     beforeUnmount() {
         if (this.socket) {
             this.socket.off("falukantUpdateStatus", this.fetchStatus);
         }
+        if (this.daemonSocket) {
+            this.daemonSocket.removeEventListener("message", this.handleDaemonSocketMessage);
+        }
     },
     methods: {
         async fetchStatus() {
@@ -66,6 +78,24 @@ export default {
                 console.error("Error fetching status:", error);
             }
         },
+        async handleDaemonSocketMessage(event) {
+            try {
+                const data = JSON.parse(event.data);
+                if (data.event === "falukantUpdateStatus") {
+                    this.fetchStatus();
+                }
+            } catch (error) {
+                console.error("Error parsing daemonSocket message:", error);
+            }
+        },
+        openPage(url, hasSubmenu = false) {
+            if (hasSubmenu) {
+                return;
+            }
+            if (url) {
+                this.$router.push(url);
+            }
+        },
     },
 };
 </script>
@@ -92,4 +122,11 @@ export default {
 .status-icon {
     font-size: 14px;
 }
+
+.menu-icon {
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+    padding: 4px 2px 0 0;
+}
 </style>