Refactor feedback handling across components: Replace alert and confirm calls with centralized feedback functions for improved user experience. Update various components to utilize showError, showSuccess, and confirmAction for consistent messaging and confirmation dialogs. Enhance UI responsiveness and maintainability by streamlining feedback logic.
This commit is contained in:
Torsten Schulz (local)
@@ -4,40 +4,33 @@
|
||||
<h2>{{ $t('falukant.house.title') }}</h2>
|
||||
<div class="existing-house">
|
||||
<div :style="houseType ? houseStyle(houseType.position, 341) : {}" class="house"></div>
|
||||
<div class="status-panel">
|
||||
<div class="status-panel surface-card">
|
||||
<h3>{{ $t('falukant.house.statusreport') }}</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ $t('falukant.house.element') }}</th>
|
||||
<th>{{ $t('falukant.house.state') }}</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(value, key) in status" :key="key">
|
||||
<td>{{ $t(`falukant.house.status.${key}`) }}</td>
|
||||
<td>{{ conditionLabel(value) }}</td>
|
||||
<td>
|
||||
<button v-if="value < 100" @click="renovate(key)">
|
||||
{{ $t('falukant.house.renovate') }} ({{ getRenovationCost(key, value) }})
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ $t('falukant.house.worth') }}</td>
|
||||
<td>{{ getWorth() }} {{ currency }}</td>
|
||||
<td>
|
||||
<button @click="renovateAll" :disabled="allRenovated">
|
||||
{{ $t('falukant.house.renovateAll') }} ({{ getAllRenovationCost() }})
|
||||
</button>
|
||||
<button @click="sellHouse">
|
||||
{{ $t('falukant.house.sell') }}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="status-cards">
|
||||
<article v-for="(value, key) in status" :key="key" class="status-card">
|
||||
<div>
|
||||
<span class="status-card__label">{{ $t(`falukant.house.status.${key}`) }}</span>
|
||||
<strong>{{ conditionLabel(value) }}</strong>
|
||||
</div>
|
||||
<button v-if="value < 100" @click="renovate(key)">
|
||||
{{ $t('falukant.house.renovate') }} ({{ getRenovationCost(key, value) }})
|
||||
</button>
|
||||
</article>
|
||||
<article class="status-card status-card--summary">
|
||||
<div>
|
||||
<span class="status-card__label">{{ $t('falukant.house.worth') }}</span>
|
||||
<strong>{{ getWorth() }} {{ currency }}</strong>
|
||||
</div>
|
||||
<div class="status-card__actions">
|
||||
<button @click="renovateAll" :disabled="allRenovated">
|
||||
{{ $t('falukant.house.renovateAll') }} ({{ getAllRenovationCost() }})
|
||||
</button>
|
||||
<button class="button-secondary" @click="sellHouse">
|
||||
{{ $t('falukant.house.sell') }}
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -49,16 +42,15 @@
|
||||
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)">
|
||||
<td>{{ $t(`falukant.house.status.${prop}`) }}</td>
|
||||
<td>{{ conditionLabel(val) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div>
|
||||
<div class="buyable-house-stats">
|
||||
<div v-for="(val, prop) in house" :key="prop"
|
||||
v-if="['roofCondition', 'wallCondition', 'floorCondition', 'windowCondition'].includes(prop)"
|
||||
class="buyable-house-stat">
|
||||
<span>{{ $t(`falukant.house.status.${prop}`) }}</span>
|
||||
<strong>{{ conditionLabel(val) }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buyable-house-price">
|
||||
{{ $t('falukant.house.price') }}: {{ buyCost(house) }}
|
||||
</div>
|
||||
<button @click="buyHouse(house.id)">
|
||||
@@ -263,6 +255,7 @@ h2 {
|
||||
|
||||
.status-panel {
|
||||
flex: 1;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.buyable-houses {
|
||||
@@ -284,8 +277,12 @@ h2 {
|
||||
.house-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
padding: 18px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
background: rgba(255, 255, 255, 0.68);
|
||||
}
|
||||
|
||||
.house-preview {
|
||||
@@ -301,20 +298,73 @@ h2 {
|
||||
/* center sprite */
|
||||
}
|
||||
|
||||
table {
|
||||
.house-info {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
table th,
|
||||
table td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
.status-cards,
|
||||
.buyable-house-stats {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.status-card,
|
||||
.buyable-house-stat {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
background: rgba(255, 255, 255, 0.68);
|
||||
}
|
||||
|
||||
.status-card__label,
|
||||
.buyable-house-stat span {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.status-card--summary {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.status-card__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.buyable-house-price {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 6px 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.existing-house {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.house {
|
||||
width: min(341px, 100%);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.status-card,
|
||||
.buyable-house-stat {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user