78 lines
4.0 KiB
JavaScript
78 lines
4.0 KiB
JavaScript
Vue.component('ADBRimoFcpMap', {
|
|
data() {
|
|
return {
|
|
mapMarkers: [],
|
|
isLoading: true,
|
|
error: null,
|
|
window,
|
|
fetchUrl: window.TT_CONFIG.BASE_PATH + '/ADBRimoFcp/getAllFCPs',
|
|
};
|
|
},
|
|
async created() {
|
|
await this.fetchAndPrepareData();
|
|
},
|
|
methods: {
|
|
async fetchAndPrepareData() {
|
|
this.isLoading = true;
|
|
this.error = null;
|
|
try {
|
|
const response = await axios.get(this.fetchUrl);
|
|
if (!response.data?.success || !Array.isArray(response.data.data)) {
|
|
console.error("Invalid data format from API:", response.data);
|
|
this.error = "Ungültiges Datenformat von der API empfangen.";
|
|
this.mapMarkers = [];
|
|
return;
|
|
}
|
|
|
|
this.mapMarkers = response.data.data
|
|
.filter(fcp => fcp.gps_lat != null && fcp.gps_long != null)
|
|
.map(fcp => ({
|
|
lat: fcp.gps_lat,
|
|
lng: fcp.gps_long,
|
|
options: {
|
|
asyncPopupContent: async () => {
|
|
const res = await axios.get(`${this.window.TT_CONFIG.BASE_PATH}/ADBRimoFcp/getById?id=${fcp.id}`);
|
|
const fullFcpData = res.data;
|
|
return `
|
|
<div style="font-size: 0.85rem;">
|
|
<h5 class="mb-3 mt-1">${fullFcpData.name}</h5>
|
|
<table class="table table-sm table-borderless mb-0">
|
|
<tbody>
|
|
<tr><td class="font-weight-bold py-1">RIMO ID:</td><td class="py-1" style="word-break: break-all;">${fullFcpData.rimo_id}</td></tr>
|
|
<tr><td class="font-weight-bold py-1">RIMO Ex State:</td><td class="py-1">${fullFcpData.rimo_ex_state}</td></tr>
|
|
<tr><td class="font-weight-bold py-1">RIMO Op State:</td><td class="py-1">${fullFcpData.rimo_op_state}</td></tr>
|
|
<tr><td class="font-weight-bold py-1">Building Type:</td><td class="py-1">${fullFcpData.building_type}</td></tr>
|
|
<tr><td class="font-weight-bold py-1">Koordinaten:</td>
|
|
<td class="py-1">
|
|
<a href="http://googleusercontent.com/maps/google.com/0{fullFcpData.gps_lat},${fullFcpData.gps_long}" target="_blank" class="text-primary">
|
|
<i class="fas fa-map-marker-alt mr-1"></i>${fullFcpData.gps_lat},<br> ${fullFcpData.gps_long}
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>`;
|
|
},
|
|
}
|
|
}));
|
|
|
|
} catch (err) {
|
|
console.error("Error fetching FCP data:", err);
|
|
this.error = "Laden der FCP-Standorte fehlgeschlagen.";
|
|
this.mapMarkers = [];
|
|
} finally {
|
|
this.isLoading = false;
|
|
}
|
|
}
|
|
},
|
|
template: `
|
|
<tt-card style="height: 80vh; position: relative;">
|
|
<template #header><h5>FCP Standorte</h5></template>
|
|
<div v-if="error" class="alert alert-danger m-2">{{ error }}</div>
|
|
<tt-map :markers-data="mapMarkers" :loading="isLoading"></tt-map>
|
|
<div v-if="!isLoading && !error && !mapMarkers.length" class="alert alert-info m-2">
|
|
Keine FCP-Standorte gefunden.
|
|
</div>
|
|
</tt-card>
|
|
`
|
|
}); |