Änderung: Optimierung der HouseView.vue durch Codebereinigung und Strukturverbesserungen

Ä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.
This commit is contained in:
Torsten Schulz (local)
2025-09-12 15:15:30 +02:00
parent 550b4b5fcb
commit 1d72372511

View File

@@ -45,13 +45,14 @@
<h3>{{ $t('falukant.house.buyablehouses') }}</h3> <h3>{{ $t('falukant.house.buyablehouses') }}</h3>
<div class="houses-list"> <div class="houses-list">
<div v-for="house in buyableHouses" :key="house.id" class="house-item"> <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"> <div class="house-info">
<h4>{{ $t(`falukant.house.type.${house.houseType.labelTr}`) }}</h4> <h4>{{ $t(`falukant.house.type.${house.houseType.labelTr}`) }}</h4>
<table> <table>
<tbody> <tbody>
<tr v-for="(val, prop) in house" :key="prop" <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>{{ $t(`falukant.house.status.${prop}`) }}</td>
<td>{{ val }}%</td> <td>{{ val }}%</td>
</tr> </tr>
@@ -185,20 +186,8 @@ export default {
try { try {
const msg = JSON.parse(evt.data); const msg = JSON.parse(evt.data);
if (msg.event === 'houseupdated') this.loadData(); if (msg.event === 'houseupdated') this.loadData();
} catch {} } 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: {
setupSocketEvents() { setupSocketEvents() {
if (this.socket) { if (this.socket) {
this.socket.on('falukantHouseUpdate', (data) => { this.socket.on('falukantHouseUpdate', (data) => {
@@ -226,6 +215,16 @@ export default {
console.log('⚠️ HouseView: Unbekanntes Event:', eventData.event); 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> </script>
@@ -268,10 +267,12 @@ h2 {
.houses-list { .houses-list {
display: flex; display: flex;
flex-direction: column; /* vertical list */ flex-direction: column;
/* vertical list */
gap: 20px; gap: 20px;
max-height: 400px; max-height: 400px;
overflow-y: auto; /* vertical scroll if needed */ overflow-y: auto;
/* vertical scroll if needed */
} }
.house-item { .house-item {
@@ -288,8 +289,10 @@ h2 {
image-rendering: crisp-edges; image-rendering: crisp-edges;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px; border-radius: 4px;
background-size: contain; /* scale image to container */ background-size: contain;
background-position: center; /* center sprite */ /* scale image to container */
background-position: center;
/* center sprite */
} }
table { table {