From 1d72372511295bf10e4d4e6498083bf70fd550b3 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Fri, 12 Sep 2025 15:15:30 +0200
Subject: [PATCH] =?UTF-8?q?=C3=84nderung:=20Optimierung=20der=20HouseView.?=
 =?UTF-8?q?vue=20durch=20Codebereinigung=20und=20Strukturverbesserungen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Änderungen:
- Anpassungen der Formatierung und Einrückungen für bessere Lesbarkeit.
- Überarbeitung der Bedingungen in der Template-Logik zur Vereinheitlichung.
- Rückführung der Socket-Event-Setup-Logik in die Lebenszyklusmethoden `mounted` und `beforeUnmount`.

Diese Anpassungen verbessern die Wartbarkeit des Codes und die Benutzeroberfläche der Hausansicht.
---
 frontend/src/views/falukant/HouseView.vue | 43 ++++++++++++-----------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/frontend/src/views/falukant/HouseView.vue b/frontend/src/views/falukant/HouseView.vue
index 986c6cd..ba8548c 100644
--- a/frontend/src/views/falukant/HouseView.vue
+++ b/frontend/src/views/falukant/HouseView.vue
@@ -45,13 +45,14 @@
             <h3>{{ $t('falukant.house.buyablehouses') }}</h3>
             <div class="houses-list">
                 <div v-for="house in buyableHouses" :key="house.id" class="house-item">
-                    <div :style="house.houseType ? houseStyle(house.houseType.position, 114) : {}" class="house-preview"></div>
+                    <div :style="house.houseType ? houseStyle(house.houseType.position, 114) : {}"
+                        class="house-preview"></div>
                     <div class="house-info">
                         <h4>{{ $t(`falukant.house.type.${house.houseType.labelTr}`) }}</h4>
                         <table>
                             <tbody>
                                 <tr v-for="(val, prop) in house" :key="prop"
-                                    v-if="['roofCondition','wallCondition','floorCondition','windowCondition'].includes(prop)">
+                                    v-if="['roofCondition', 'wallCondition', 'floorCondition', 'windowCondition'].includes(prop)">
                                     <td>{{ $t(`falukant.house.status.${prop}`) }}</td>
                                     <td>{{ val }}%</td>
                                 </tr>
@@ -185,20 +186,8 @@ export default {
             try {
                 const msg = JSON.parse(evt.data);
                 if (msg.event === 'houseupdated') this.loadData();
-            } catch {}
-        }
-    },
-    async mounted() {
-        await this.loadData();
-        this.setupSocketEvents();
-    },
-    beforeUnmount() {
-        if (this.socket) {
-            this.socket.off('falukantHouseUpdate', this.loadData);
-            this.socket.off('falukantUpdateStatus', this.loadData);
-        }
-    },
-    methods: {
+            } catch { }
+        },
         setupSocketEvents() {
             if (this.socket) {
                 this.socket.on('falukantHouseUpdate', (data) => {
@@ -226,6 +215,16 @@ export default {
                     console.log('⚠️ HouseView: Unbekanntes Event:', eventData.event);
             }
         }
+    },
+    async mounted() {
+        await this.loadData();
+        this.setupSocketEvents();
+    },
+    beforeUnmount() {
+        if (this.socket) {
+            this.socket.off('falukantHouseUpdate', this.loadData);
+            this.socket.off('falukantUpdateStatus', this.loadData);
+        }
     }
 };
 </script>
@@ -268,10 +267,12 @@ h2 {
 
 .houses-list {
     display: flex;
-    flex-direction: column; /* vertical list */
+    flex-direction: column;
+    /* vertical list */
     gap: 20px;
     max-height: 400px;
-    overflow-y: auto; /* vertical scroll if needed */
+    overflow-y: auto;
+    /* vertical scroll if needed */
 }
 
 .house-item {
@@ -288,8 +289,10 @@ h2 {
     image-rendering: crisp-edges;
     border: 1px solid #ccc;
     border-radius: 4px;
-    background-size: contain; /* scale image to container */
-    background-position: center; /* center sprite */
+    background-size: contain;
+    /* scale image to container */
+    background-position: center;
+    /* center sprite */
 }
 
 table {