Ä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:
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user