Add Falukant region and transport management features
- Implemented new endpoints in AdminController for managing Falukant regions, including fetching, updating, and deleting region distances. - Enhanced the FalukantService with methods for retrieving region distances and handling upsert operations. - Updated the router to expose new routes for region management and transport creation. - Introduced a transport management interface in the frontend, allowing users to create and manage transports between branches. - Added localization for new transport-related terms and improved the vehicle management interface to include transport options. - Enhanced the database initialization logic to support new region and transport models.
This commit is contained in:
Torsten Schulz (local)
631
frontend/src/views/admin/falukant/MapRegionsView.vue
Normal file
631
frontend/src/views/admin/falukant/MapRegionsView.vue
Normal file
@@ -0,0 +1,631 @@
|
||||
<template>
|
||||
<div class="contenthidden">
|
||||
<div class="contentscroll falukant-map-admin">
|
||||
<div class="admin-header">
|
||||
<h1>{{ $t('admin.falukant.map.title') }}</h1>
|
||||
<p>{{ $t('admin.falukant.map.description') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="map-layout">
|
||||
<div
|
||||
class="map-container"
|
||||
@mousedown="onMouseDown"
|
||||
@mousemove="onMouseMove"
|
||||
@mouseup="onMouseUp"
|
||||
@mouseleave="onMouseUp"
|
||||
>
|
||||
<img
|
||||
ref="mapImage"
|
||||
src="/images/falukant/map.png"
|
||||
class="map"
|
||||
@load="onMapLoaded"
|
||||
@dragstart.prevent
|
||||
/>
|
||||
|
||||
<!-- vorhandene Regionen-Rechtecke -->
|
||||
<template v-for="region in regions" :key="region.id">
|
||||
<div
|
||||
v-if="region.map"
|
||||
class="region-rect"
|
||||
:class="regionClasses(region)"
|
||||
:style="rectStyle(region.map)"
|
||||
@click.stop="selectRegion(region)"
|
||||
:title="region.name"
|
||||
></div>
|
||||
</template>
|
||||
|
||||
<!-- aktuell gezeichneter Bereich -->
|
||||
<div
|
||||
v-if="drawingRect"
|
||||
class="region-rect drawing"
|
||||
:style="rectStyle(drawingRect)"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
<h2>{{ $t('admin.falukant.map.regionList') }}</h2>
|
||||
<ul class="region-list">
|
||||
<li
|
||||
v-for="region in regions"
|
||||
:key="region.id"
|
||||
:class="regionListClasses(region)"
|
||||
@click="selectRegion(region)"
|
||||
>
|
||||
{{ region.name }}
|
||||
<span v-if="region.map" class="coords">
|
||||
({{ region.map.x }},{{ region.map.y }} {{ region.map.w }}×{{ region.map.h }})
|
||||
</span>
|
||||
<span v-else class="coords missing">
|
||||
{{ $t('admin.falukant.map.noCoords') }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<SimpleTabs v-model="activeTab" :tabs="tabs" />
|
||||
|
||||
<div v-if="activeTab === 'regions'">
|
||||
<div v-if="selectedRegion" class="details">
|
||||
<h3>{{ selectedRegion.name }}</h3>
|
||||
<p v-if="selectedRegion.map">
|
||||
{{ $t('admin.falukant.map.currentRect') }}:
|
||||
{{ selectedRegion.map.x }},{{ selectedRegion.map.y }}
|
||||
{{ selectedRegion.map.w }}×{{ selectedRegion.map.h }}
|
||||
</p>
|
||||
<p v-else>
|
||||
{{ $t('admin.falukant.map.noCoords') }}
|
||||
</p>
|
||||
<p class="hint">
|
||||
{{ $t('admin.falukant.map.hintDraw') }}
|
||||
</p>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
:disabled="!selectedRegionDirty"
|
||||
@click="saveSelectedRegion"
|
||||
>
|
||||
{{ $t('common.save') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
:disabled="!dirtyRegionIds.length"
|
||||
@click="saveAllRegions"
|
||||
>
|
||||
{{ $t('admin.falukant.map.saveAll') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="activeTab === 'distances'" class="connections">
|
||||
<h3>{{ $t('admin.falukant.map.connectionsTitle') }}</h3>
|
||||
<div class="connection-form">
|
||||
<table class="connection-form-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="label-cell">
|
||||
{{ $t('admin.falukant.map.source') }}
|
||||
</td>
|
||||
<td class="field-cell">
|
||||
<div class="field-row">
|
||||
<select v-model.number="newConnection.sourceRegionId">
|
||||
<option :value="null" disabled>{{ $t('admin.falukant.map.selectSource') }}</option>
|
||||
<option v-for="r in regions" :key="`src-${r.id}`" :value="r.id">
|
||||
{{ r.name }}
|
||||
</option>
|
||||
</select>
|
||||
<button
|
||||
type="button"
|
||||
class="btn mini icon"
|
||||
@click="pickMode = 'source'"
|
||||
:title="$t('admin.falukant.map.pickOnMap')"
|
||||
>
|
||||
⊕
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label-cell">
|
||||
{{ $t('admin.falukant.map.target') }}
|
||||
</td>
|
||||
<td class="field-cell">
|
||||
<div class="field-row">
|
||||
<select v-model.number="newConnection.targetRegionId">
|
||||
<option :value="null" disabled>{{ $t('admin.falukant.map.selectTarget') }}</option>
|
||||
<option v-for="r in regions" :key="`tgt-${r.id}`" :value="r.id">
|
||||
{{ r.name }}
|
||||
</option>
|
||||
</select>
|
||||
<button
|
||||
type="button"
|
||||
class="btn mini icon"
|
||||
@click="pickMode = 'target'"
|
||||
:title="$t('admin.falukant.map.pickOnMap')"
|
||||
>
|
||||
⊕
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label-cell">
|
||||
{{ $t('admin.falukant.map.mode') }}
|
||||
</td>
|
||||
<td class="field-cell">
|
||||
<select v-model="newConnection.transportMode">
|
||||
<option value="land">{{ $t('admin.falukant.map.modeLand') }}</option>
|
||||
<option value="water">{{ $t('admin.falukant.map.modeWater') }}</option>
|
||||
<option value="air">{{ $t('admin.falukant.map.modeAir') }}</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="label-cell">
|
||||
{{ $t('admin.falukant.map.distance') }}
|
||||
</td>
|
||||
<td class="field-cell">
|
||||
<input
|
||||
type="number"
|
||||
min="0.1"
|
||||
step="0.1"
|
||||
v-model.number="newConnection.distance"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" class="connection-actions-cell">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
:disabled="!newConnection.sourceRegionId || !newConnection.targetRegionId || !newConnection.distance"
|
||||
@click="saveConnection"
|
||||
>
|
||||
{{ $t('admin.falukant.map.saveConnection') }}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<table v-if="connections && connections.length" class="connections-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ $t('admin.falukant.map.source') }}</th>
|
||||
<th>{{ $t('admin.falukant.map.target') }}</th>
|
||||
<th>{{ $t('admin.falukant.map.mode') }}</th>
|
||||
<th>{{ $t('admin.falukant.map.distance') }}</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="c in connections" :key="c.id">
|
||||
<td>{{ regionName(c.sourceRegionId) }}</td>
|
||||
<td>{{ regionName(c.targetRegionId) }}</td>
|
||||
<td>{{ c.transportMode }}</td>
|
||||
<td>{{ c.distance }}</td>
|
||||
<td>
|
||||
<button class="btn btn-secondary" @click="deleteConnection(c.id)">
|
||||
{{ $t('common.delete') }}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import apiClient from '@/utils/axios.js';
|
||||
import SimpleTabs from '@/components/SimpleTabs.vue';
|
||||
|
||||
export default {
|
||||
name: 'AdminFalukantMapRegionsView',
|
||||
components: { SimpleTabs },
|
||||
data() {
|
||||
return {
|
||||
regions: [],
|
||||
selectedRegion: null,
|
||||
selectedRegionDirty: false,
|
||||
dirtyRegionIds: [],
|
||||
drawingRect: null,
|
||||
startX: null,
|
||||
startY: null,
|
||||
currentX: 0,
|
||||
currentY: 0,
|
||||
connections: [],
|
||||
newConnection: {
|
||||
sourceRegionId: null,
|
||||
targetRegionId: null,
|
||||
transportMode: 'land',
|
||||
distance: 1,
|
||||
},
|
||||
activeTab: 'regions',
|
||||
tabs: [
|
||||
{ value: 'regions', label: 'admin.falukant.map.tabs.regions' },
|
||||
{ value: 'distances', label: 'admin.falukant.map.tabs.distances' },
|
||||
],
|
||||
pickMode: null,
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
await this.loadRegions();
|
||||
await this.loadConnections();
|
||||
},
|
||||
methods: {
|
||||
onMapLoaded() {
|
||||
const bounds = this.$refs.mapImage.getBoundingClientRect();
|
||||
this.mapWidth = bounds.width;
|
||||
this.mapHeight = bounds.height;
|
||||
},
|
||||
async loadRegions() {
|
||||
try {
|
||||
const { data } = await apiClient.get('/api/admin/falukant/regions');
|
||||
// Sicherstellen, dass map-Objekte existieren oder null sind
|
||||
this.regions = (data || []).map(r => ({
|
||||
...r,
|
||||
map: r.map || null,
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error('Error loading Falukant regions:', error);
|
||||
}
|
||||
},
|
||||
async loadConnections() {
|
||||
try {
|
||||
const { data } = await apiClient.get('/api/admin/falukant/region-distances');
|
||||
this.connections = data || [];
|
||||
} catch (error) {
|
||||
console.error('Error loading region distances:', error);
|
||||
this.connections = [];
|
||||
}
|
||||
},
|
||||
rectStyle(rect) {
|
||||
if (!rect || !this.mapWidth || !this.mapHeight) return {};
|
||||
|
||||
// Unterstützt alte absolute Koordinaten (Pixel) und neue relative (0–1)
|
||||
const toPxX = (v) => (v >= 0 && v <= 1 ? v * this.mapWidth : v);
|
||||
const toPxY = (v) => (v >= 0 && v <= 1 ? v * this.mapHeight : v);
|
||||
|
||||
const x = toPxX(rect.x);
|
||||
const y = toPxY(rect.y);
|
||||
const w = toPxX(rect.w);
|
||||
const h = toPxY(rect.h);
|
||||
|
||||
return {
|
||||
top: `${y}px`,
|
||||
left: `${x}px`,
|
||||
width: `${w}px`,
|
||||
height: `${h}px`,
|
||||
};
|
||||
},
|
||||
regionClasses(region) {
|
||||
return {
|
||||
selected: this.selectedRegion && this.selectedRegion.id === region.id,
|
||||
dirty: this.dirtyRegionIds.includes(region.id),
|
||||
source: this.newConnection.sourceRegionId === region.id,
|
||||
target: this.newConnection.targetRegionId === region.id,
|
||||
};
|
||||
},
|
||||
regionListClasses(region) {
|
||||
return {
|
||||
selected: this.selectedRegion && this.selectedRegion.id === region.id,
|
||||
dirty: this.dirtyRegionIds.includes(region.id),
|
||||
source: this.newConnection.sourceRegionId === region.id,
|
||||
target: this.newConnection.targetRegionId === region.id,
|
||||
};
|
||||
},
|
||||
selectRegion(region) {
|
||||
// Wenn wir im "auf Karte wählen"-Modus sind, setze Quelle/Ziel für die Verbindung
|
||||
if (this.pickMode === 'source') {
|
||||
this.newConnection.sourceRegionId = region.id;
|
||||
this.pickMode = null;
|
||||
} else if (this.pickMode === 'target') {
|
||||
this.newConnection.targetRegionId = region.id;
|
||||
this.pickMode = null;
|
||||
}
|
||||
|
||||
this.selectedRegion = region;
|
||||
this.selectedRegionDirty = this.dirtyRegionIds.includes(region.id);
|
||||
this.drawingRect = null;
|
||||
},
|
||||
onMouseDown(event) {
|
||||
// Zeichnen von Rechtecken nur im "Positionen"-Tab
|
||||
if (this.activeTab !== 'regions') return;
|
||||
if (!this.selectedRegion) return;
|
||||
const bounds = this.$refs.mapImage.getBoundingClientRect();
|
||||
this.startX = event.clientX - bounds.left;
|
||||
this.startY = event.clientY - bounds.top;
|
||||
this.currentX = this.startX;
|
||||
this.currentY = this.startY;
|
||||
this.updateDrawingRect();
|
||||
event.preventDefault();
|
||||
},
|
||||
onMouseMove(event) {
|
||||
// Zeichnen nur im "Positionen"-Tab
|
||||
if (this.activeTab !== 'regions') return;
|
||||
if (this.startX === null || this.startY === null) return;
|
||||
const bounds = this.$refs.mapImage.getBoundingClientRect();
|
||||
this.currentX = event.clientX - bounds.left;
|
||||
this.currentY = event.clientY - bounds.top;
|
||||
this.updateDrawingRect();
|
||||
},
|
||||
onMouseUp() {
|
||||
// Im Entfernungen-Tab niemals Koordinaten verändern
|
||||
if (this.activeTab !== 'regions') {
|
||||
this.startX = null;
|
||||
this.startY = null;
|
||||
this.drawingRect = null;
|
||||
return;
|
||||
}
|
||||
if (!this.selectedRegion || !this.drawingRect) {
|
||||
this.startX = null;
|
||||
this.startY = null;
|
||||
return;
|
||||
}
|
||||
// Nur übernehmen, wenn tatsächlich ein Rechteck "aufgezogen" wurde
|
||||
if (this.drawingRect.w < 3 || this.drawingRect.h < 3) {
|
||||
this.drawingRect = null;
|
||||
this.startX = null;
|
||||
this.startY = null;
|
||||
return;
|
||||
}
|
||||
// Übernehme gezeichnetes Rechteck in ausgewählte Region
|
||||
const bounds = this.$refs.mapImage.getBoundingClientRect();
|
||||
const updatedMap = {
|
||||
x: this.drawingRect.x / bounds.width,
|
||||
y: this.drawingRect.y / bounds.height,
|
||||
w: this.drawingRect.w / bounds.width,
|
||||
h: this.drawingRect.h / bounds.height,
|
||||
};
|
||||
this.selectedRegion.map = updatedMap;
|
||||
this.markRegionDirty(this.selectedRegion.id);
|
||||
this.startX = null;
|
||||
this.startY = null;
|
||||
this.drawingRect = null;
|
||||
},
|
||||
updateDrawingRect() {
|
||||
if (this.startX === null || this.startY === null) return;
|
||||
const x = Math.min(this.startX, this.currentX);
|
||||
const y = Math.min(this.startY, this.currentY);
|
||||
const w = Math.abs(this.currentX - this.startX);
|
||||
const h = Math.abs(this.currentY - this.startY);
|
||||
this.drawingRect = {
|
||||
x: Math.round(x),
|
||||
y: Math.round(y),
|
||||
w: Math.round(w),
|
||||
h: Math.round(h),
|
||||
};
|
||||
},
|
||||
markRegionDirty(id) {
|
||||
if (!this.dirtyRegionIds.includes(id)) {
|
||||
this.dirtyRegionIds.push(id);
|
||||
}
|
||||
if (this.selectedRegion && this.selectedRegion.id === id) {
|
||||
this.selectedRegionDirty = true;
|
||||
}
|
||||
},
|
||||
async saveRegion(region) {
|
||||
if (!region || !region.map) return;
|
||||
await apiClient.put(`/api/admin/falukant/regions/${region.id}/map`, {
|
||||
map: region.map,
|
||||
});
|
||||
// lokal als nicht mehr dirty markieren
|
||||
this.dirtyRegionIds = this.dirtyRegionIds.filter(id => id !== region.id);
|
||||
if (this.selectedRegion && this.selectedRegion.id === region.id) {
|
||||
this.selectedRegionDirty = false;
|
||||
}
|
||||
},
|
||||
async saveSelectedRegion() {
|
||||
if (!this.selectedRegion || !this.selectedRegion.map) return;
|
||||
try {
|
||||
await this.saveRegion(this.selectedRegion);
|
||||
// Liste aktualisieren, damit andere Einträge auch aktualisierte Daten sehen
|
||||
await this.loadRegions();
|
||||
const refreshed = this.regions.find(r => r.id === this.selectedRegion.id);
|
||||
if (refreshed) {
|
||||
this.selectedRegion = refreshed;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error saving region map:', error);
|
||||
}
|
||||
},
|
||||
async saveAllRegions() {
|
||||
if (!this.dirtyRegionIds.length) return;
|
||||
try {
|
||||
const dirtyIds = [...this.dirtyRegionIds];
|
||||
for (const id of dirtyIds) {
|
||||
const region = this.regions.find(r => r.id === id && r.map);
|
||||
if (!region) continue;
|
||||
await this.saveRegion(region);
|
||||
}
|
||||
await this.loadRegions();
|
||||
if (this.selectedRegion) {
|
||||
const refreshed = this.regions.find(r => r.id === this.selectedRegion.id);
|
||||
if (refreshed) {
|
||||
this.selectedRegion = refreshed;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error saving all region maps:', error);
|
||||
}
|
||||
},
|
||||
async saveConnection() {
|
||||
try {
|
||||
await apiClient.post('/api/admin/falukant/region-distances', {
|
||||
sourceRegionId: this.newConnection.sourceRegionId,
|
||||
targetRegionId: this.newConnection.targetRegionId,
|
||||
transportMode: this.newConnection.transportMode,
|
||||
distance: this.newConnection.distance,
|
||||
});
|
||||
await this.loadConnections();
|
||||
} catch (error) {
|
||||
console.error('Error saving region distance:', error);
|
||||
alert(this.$t('admin.falukant.map.errorSaveConnection'));
|
||||
}
|
||||
},
|
||||
async deleteConnection(id) {
|
||||
if (!confirm(this.$t('admin.falukant.map.confirmDeleteConnection'))) return;
|
||||
try {
|
||||
await apiClient.delete(`/api/admin/falukant/region-distances/${id}`);
|
||||
await this.loadConnections();
|
||||
} catch (error) {
|
||||
console.error('Error deleting region distance:', error);
|
||||
alert(this.$t('admin.falukant.map.errorDeleteConnection'));
|
||||
}
|
||||
},
|
||||
regionName(id) {
|
||||
const r = this.regions.find(x => x.id === id);
|
||||
return r ? r.name : `#${id}`;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.falukant-map-admin {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.map-layout {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.map {
|
||||
max-width: 800px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.region-rect {
|
||||
position: absolute;
|
||||
border: 2px solid rgba(0, 128, 255, 0.7);
|
||||
background-color: rgba(0, 128, 255, 0.2);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.region-rect.selected {
|
||||
border-color: rgba(255, 128, 0, 0.9);
|
||||
background-color: rgba(255, 128, 0, 0.25);
|
||||
}
|
||||
|
||||
.region-rect.drawing {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
min-width: 260px;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.region-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 1rem 0;
|
||||
max-height: 400px;
|
||||
overflow: auto;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.region-list li {
|
||||
padding: 4px 8px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.region-list li:nth-child(odd) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.region-list li.selected {
|
||||
background-color: #e0f0ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.region-rect.source,
|
||||
.region-rect.target {
|
||||
border-color: rgba(0, 160, 0, 0.9);
|
||||
background-color: rgba(0, 200, 0, 0.35);
|
||||
}
|
||||
|
||||
.region-list li.source,
|
||||
.region-list li.target {
|
||||
background-color: #d2f5d2;
|
||||
}
|
||||
|
||||
.region-list li.dirty {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.coords {
|
||||
font-size: 0.8rem;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.coords.missing {
|
||||
color: #b00;
|
||||
}
|
||||
|
||||
.details {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size: 0.85rem;
|
||||
color: #555;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.connection-form-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.connection-form-table th,
|
||||
.connection-form-table td {
|
||||
padding: 2px 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.label-cell {
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.field-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.field-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.connection-actions-cell {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.btn.mini {
|
||||
padding: 2px 6px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.btn.mini.icon {
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -29,7 +29,13 @@
|
||||
|
||||
<!-- Inventar / Verkauf -->
|
||||
<div v-else-if="activeTab === 'inventory'" class="branch-tab-pane">
|
||||
<SaleSection :branchId="selectedBranch.id" ref="saleSection" />
|
||||
<SaleSection
|
||||
:branchId="selectedBranch.id"
|
||||
:vehicles="vehicles"
|
||||
:branches="branches"
|
||||
ref="saleSection"
|
||||
@transportCreated="handleTransportCreated"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Produktion + Produkt-Erträge -->
|
||||
@@ -58,6 +64,48 @@
|
||||
<button @click="openBuyVehicleDialog">
|
||||
{{ $t('falukant.branch.transport.buy') }}
|
||||
</button>
|
||||
|
||||
<div class="vehicle-overview" v-if="vehicles && vehicles.length">
|
||||
<table class="vehicle-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ $t('falukant.branch.transport.table.type') }}</th>
|
||||
<th>{{ $t('falukant.branch.transport.table.capacity') }}</th>
|
||||
<th>{{ $t('falukant.branch.transport.table.condition') }}</th>
|
||||
<th>{{ $t('falukant.branch.transport.table.mode') }}</th>
|
||||
<th>{{ $t('falukant.branch.transport.table.speed') }}</th>
|
||||
<th>{{ $t('falukant.branch.transport.table.availableFrom') }}</th>
|
||||
<th>{{ $t('falukant.branch.transport.table.status') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="v in vehicles" :key="v.id">
|
||||
<td>
|
||||
{{ $t(`falukant.branch.vehicles.${v.type.tr}`) }}
|
||||
</td>
|
||||
<td>{{ v.type.capacity }}</td>
|
||||
<td>{{ conditionLabel(v.condition) }}</td>
|
||||
<td>{{ v.type.transportMode }}</td>
|
||||
<td>{{ v.type.speed }}</td>
|
||||
<td>{{ formatDateTime(v.availableFrom) }}</td>
|
||||
<td>
|
||||
<span v-if="v.status === 'travelling'">
|
||||
{{ $t('falukant.branch.transport.status.inUse') }}
|
||||
</span>
|
||||
<span v-else-if="v.status === 'building'">
|
||||
{{ $t('falukant.branch.transport.status.building') }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ $t('falukant.branch.transport.status.free') }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p v-else class="no-vehicles">
|
||||
{{ $t('falukant.branch.transport.noVehicles') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<BuyVehicleDialog
|
||||
@@ -102,6 +150,7 @@ export default {
|
||||
branches: [],
|
||||
selectedBranch: null,
|
||||
products: [],
|
||||
vehicles: [],
|
||||
activeTab: 'production',
|
||||
tabs: [
|
||||
{ value: 'production', label: 'falukant.branch.tabs.production' },
|
||||
@@ -175,6 +224,7 @@ export default {
|
||||
regionId: branch.regionId,
|
||||
cityName: branch.region.name,
|
||||
type: this.$t(`falukant.branch.types.${branch.branchType.labelTr}`),
|
||||
branchTypeLabelTr: branch.branchType.labelTr,
|
||||
isMainBranch: branch.isMainBranch,
|
||||
}));
|
||||
if (!this.selectedBranch) {
|
||||
@@ -197,9 +247,11 @@ export default {
|
||||
async onBranchSelected(newBranch) {
|
||||
this.selectedBranch = newBranch;
|
||||
await this.loadProducts();
|
||||
await this.loadVehicles();
|
||||
this.$nextTick(() => {
|
||||
this.$refs.directorInfo?.refresh();
|
||||
this.$refs.saleSection?.loadInventory();
|
||||
this.$refs.saleSection?.loadTransports();
|
||||
this.$refs.productionSection?.loadProductions();
|
||||
this.$refs.storageSection?.loadStorageData();
|
||||
this.$refs.revenueSection?.refresh && this.$refs.revenueSection.refresh();
|
||||
@@ -226,14 +278,21 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
upgradeBranch() {
|
||||
if (this.selectedBranch) {
|
||||
alert(
|
||||
this.$t(
|
||||
'falukant.branch.actions.upgradeAlert',
|
||||
{ branchId: this.selectedBranch.id }
|
||||
)
|
||||
);
|
||||
async upgradeBranch() {
|
||||
if (!this.selectedBranch) return;
|
||||
try {
|
||||
await apiClient.post('/api/falukant/branches/upgrade', {
|
||||
branchId: this.selectedBranch.id,
|
||||
});
|
||||
await this.loadBranches();
|
||||
// Ausgewählten Branch nach dem Upgrade neu setzen
|
||||
const updated = this.branches.find(b => b.id === this.selectedBranch.id);
|
||||
if (updated) {
|
||||
await this.onBranchSelected(updated);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error upgrading branch:', error);
|
||||
alert(this.$t('falukant.branch.actions.upgradeAlert', { branchId: this.selectedBranch.id }));
|
||||
}
|
||||
},
|
||||
|
||||
@@ -242,6 +301,9 @@ export default {
|
||||
if (main && main !== this.selectedBranch) {
|
||||
this.selectedBranch = main;
|
||||
}
|
||||
if (this.selectedBranch) {
|
||||
this.loadVehicles();
|
||||
}
|
||||
if (this.selectedBranch && !this.activeTab) {
|
||||
this.activeTab = 'director';
|
||||
}
|
||||
@@ -280,6 +342,38 @@ export default {
|
||||
};
|
||||
},
|
||||
|
||||
conditionLabel(value) {
|
||||
const v = Number(value) || 0;
|
||||
if (v >= 95) return 'Ausgezeichnet'; // 95–100
|
||||
if (v >= 72) return 'Sehr gut'; // 72–94
|
||||
if (v >= 54) return 'Gut'; // 54–71
|
||||
if (v >= 39) return 'Mäßig'; // 39–53
|
||||
if (v >= 22) return 'Schlecht'; // 22–38
|
||||
if (v >= 6) return 'Sehr schlecht'; // 6–21
|
||||
if (v >= 1) return 'Katastrophal'; // 1–5
|
||||
return 'Unbekannt';
|
||||
},
|
||||
|
||||
async loadVehicles() {
|
||||
if (!this.selectedBranch) return;
|
||||
try {
|
||||
const { data } = await apiClient.get('/api/falukant/vehicles', {
|
||||
params: { regionId: this.selectedBranch.regionId },
|
||||
});
|
||||
this.vehicles = data || [];
|
||||
} catch (error) {
|
||||
console.error('Error loading vehicles:', error);
|
||||
this.vehicles = [];
|
||||
}
|
||||
},
|
||||
|
||||
formatDateTime(value) {
|
||||
if (!value) return '';
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) return '';
|
||||
return date.toLocaleString();
|
||||
},
|
||||
|
||||
handleEvent(eventData) {
|
||||
switch (eventData.event) {
|
||||
case 'production_ready':
|
||||
@@ -352,6 +446,12 @@ export default {
|
||||
handleVehiclesBought() {
|
||||
// Refresh status bar (for updated money) and potentially other data later
|
||||
this.$refs.statusBar?.fetchStatus();
|
||||
this.loadVehicles();
|
||||
},
|
||||
handleTransportCreated() {
|
||||
this.loadVehicles();
|
||||
this.$refs.storageSection?.loadStorageData();
|
||||
this.$refs.saleSection?.loadTransports();
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<tbody>
|
||||
<tr v-for="(value, key) in status" :key="key">
|
||||
<td>{{ $t(`falukant.house.status.${key}`) }}</td>
|
||||
<td>{{ value }}%</td>
|
||||
<td>{{ conditionLabel(value) }}</td>
|
||||
<td>
|
||||
<button v-if="value < 100" @click="renovate(key)">
|
||||
{{ $t('falukant.house.renovate') }} ({{ getRenovationCost(key, value) }})
|
||||
@@ -54,7 +54,7 @@
|
||||
<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>{{ val }}%</td>
|
||||
<td>{{ conditionLabel(val) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -109,6 +109,17 @@ export default {
|
||||
console.error('Error loading house data', err);
|
||||
}
|
||||
},
|
||||
conditionLabel(value) {
|
||||
const v = Number(value) || 0;
|
||||
if (v >= 95) return 'Ausgezeichnet'; // 95–100
|
||||
if (v >= 72) return 'Sehr gut'; // 72–94
|
||||
if (v >= 54) return 'Gut'; // 54–71
|
||||
if (v >= 39) return 'Mäßig'; // 39–53
|
||||
if (v >= 22) return 'Schlecht'; // 22–38
|
||||
if (v >= 6) return 'Sehr schlecht'; // 6–21
|
||||
if (v >= 1) return 'Katastrophal'; // 1–5
|
||||
return 'Unbekannt';
|
||||
},
|
||||
houseStyle(position, picSize) {
|
||||
const columns = 3;
|
||||
const size = picSize;
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
<span v-if="!isAdvancing">{{ $t('falukant.nobility.advance.confirm') }}</span>
|
||||
<span v-else>{{ $t('falukant.nobility.advance.processing') }}</span>
|
||||
</button>
|
||||
<span>->{{ canAdvance }}, {{ isAdvancing }}<-</span>
|
||||
<!-- debug state output removed -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -109,7 +109,7 @@
|
||||
if (!this.canAdvance || this.isAdvancing) return;
|
||||
this.isAdvancing = true;
|
||||
try {
|
||||
await apiClient.post('/api/falukant/nobility/advance');
|
||||
await apiClient.post('/api/falukant/nobility');
|
||||
await this.loadNobility();
|
||||
} catch (err) {
|
||||
console.error('Error advancing nobility:', err);
|
||||
@@ -124,9 +124,6 @@
|
||||
},
|
||||
formatCost(val) {
|
||||
return new Intl.NumberFormat(navigator.language, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(val);
|
||||
},
|
||||
async applyAdvance() {
|
||||
await apiClient.post('/api/falukant/nobility');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user