From 3b8e0573f28326e7ea51fb5c53e93950a90cd4ab Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Fri, 30 Jan 2026 08:18:50 +0100
Subject: [PATCH] Enhance DashboardWidget functionality: Integrate Vuex state
 management for socket connections, enabling real-time updates for Falukant
 widgets. Refactor computed properties and methods to handle socket events and
 improve data fetching logic. Update localization for age representation and
 adjust styles for better UI presentation.

---
 frontend/src/components/DashboardWidget.vue | 59 +++++++++++++++++++--
 frontend/src/i18n/locales/de/falukant.json  |  1 +
 frontend/src/i18n/locales/en/falukant.json  | 12 +++++
 3 files changed, 67 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/DashboardWidget.vue b/frontend/src/components/DashboardWidget.vue
index 76754b4..b167934 100644
--- a/frontend/src/components/DashboardWidget.vue
+++ b/frontend/src/components/DashboardWidget.vue
@@ -56,6 +56,7 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import apiClient from '@/utils/axios.js';
 
 export default {
@@ -75,10 +76,15 @@ export default {
       data: null,
       loading: false,
       error: null,
-      isDragging: false
+      isDragging: false,
+      _daemonMessageHandler: null
     };
   },
   computed: {
+    ...mapState(['socket', 'daemonSocket']),
+    isFalukantWidget() {
+      return this.endpoint && String(this.endpoint).includes('falukant');
+    },
     newsDataResults() {
       const d = this.data;
       if (d && typeof d === 'object' && Array.isArray(d.results)) return d.results;
@@ -119,7 +125,7 @@ export default {
       const days = this.falukantData?.age;
       if (days == null) return '—';
       const years = Math.floor(Number(days) / 365);
-      return `${years} ${this.$t('admin.createNPC.years')}`;
+      return `${years} ${this.$t('falukant.overview.metadata.years')}`;
     },
     dataList() {
       if (!Array.isArray(this.data) || this.data.length === 0) return [];
@@ -142,12 +148,54 @@ export default {
   watch: {
     endpoint: { handler: 'fetchData', immediate: false },
     requestCounter: { handler: 'fetchData', immediate: false },
-    pauseFetch: { handler(now) { if (!now) this.fetchData(); } }
+    pauseFetch: { handler(now) { if (!now) this.fetchData(); } },
+    socket(newVal, oldVal) {
+      if (!this.isFalukantWidget) return;
+      if (oldVal) this.teardownSocketListeners();
+      if (newVal) this.setupSocketListeners();
+    },
+    daemonSocket(newVal, oldVal) {
+      if (!this.isFalukantWidget) return;
+      if (oldVal) this.teardownSocketListeners();
+      if (newVal) this.setupSocketListeners();
+    }
   },
   mounted() {
     if (!this.pauseFetch && this.endpoint) this.fetchData();
+    if (this.isFalukantWidget) this.setupSocketListeners();
+  },
+  beforeUnmount() {
+    if (this.isFalukantWidget) this.teardownSocketListeners();
   },
   methods: {
+    setupSocketListeners() {
+      this.teardownSocketListeners();
+      const daemonEvents = ['falukantUpdateStatus', 'stock_change', 'familychanged'];
+      if (this.daemonSocket) {
+        this._daemonMessageHandler = (event) => {
+          if (event.data === 'ping') return;
+          try {
+            const data = JSON.parse(event.data);
+            if (daemonEvents.includes(data.event)) this.fetchData();
+          } catch (_) {}
+        };
+        this.daemonSocket.addEventListener('message', this._daemonMessageHandler);
+      }
+      if (this.socket) {
+        this.socket.on('falukantUpdateStatus', () => this.fetchData());
+        this.socket.on('falukantBranchUpdate', () => this.fetchData());
+      }
+    },
+    teardownSocketListeners() {
+      if (this.daemonSocket && this._daemonMessageHandler) {
+        this.daemonSocket.removeEventListener('message', this._daemonMessageHandler);
+        this._daemonMessageHandler = null;
+      }
+      if (this.socket) {
+        this.socket.off('falukantUpdateStatus');
+        this.socket.off('falukantBranchUpdate');
+      }
+    },
     async fetchData() {
       if (!this.endpoint || this.pauseFetch) return;
       this.loading = true;
@@ -202,6 +250,7 @@ export default {
 <style scoped>
 .dashboard-widget {
   min-height: 200px;
+  max-height: 420px;
   display: flex;
   flex-direction: column;
   background: var(--dashboard-widget-bg, #fff);
@@ -249,9 +298,9 @@ export default {
 
 .dashboard-widget__frame {
   flex: 1;
-  min-height: 160px;
+  min-height: 0;
   padding: 12px;
-  overflow: auto;
+  overflow-y: auto;
 }
 
 .dashboard-widget__state {
diff --git a/frontend/src/i18n/locales/de/falukant.json b/frontend/src/i18n/locales/de/falukant.json
index 7262285..0a442b9 100644
--- a/frontend/src/i18n/locales/de/falukant.json
+++ b/frontend/src/i18n/locales/de/falukant.json
@@ -119,6 +119,7 @@
                 "name": "Name",
                 "money": "Vermögen",
                 "age": "Alter",
+                "years": "Jahre",
                 "mainbranch": "Heimatstadt",
                 "nobleTitle": "Stand"
             },
diff --git a/frontend/src/i18n/locales/en/falukant.json b/frontend/src/i18n/locales/en/falukant.json
index 1b3c98d..03e4ab2 100644
--- a/frontend/src/i18n/locales/en/falukant.json
+++ b/frontend/src/i18n/locales/en/falukant.json
@@ -93,6 +93,18 @@
             "children": "Children",
             "children_unbaptised": "Unbaptised children"
         },
+        "overview": {
+            "title": "Falukant - Overview",
+            "metadata": {
+                "title": "Personal",
+                "name": "Name",
+                "money": "Wealth",
+                "age": "Age",
+                "years": "Years",
+                "mainbranch": "Home city",
+                "nobleTitle": "Title"
+            }
+        },
         "health": {
             "amazing": "Amazing",
             "good": "Good",