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 `
`;
},
}
}));
} catch (err) {
console.error("Error fetching FCP data:", err);
this.error = "Laden der FCP-Standorte fehlgeschlagen.";
this.mapMarkers = [];
} finally {
this.isLoading = false;
}
}
},
template: `
FCP Standorte
{{ error }}
Keine FCP-Standorte gefunden.
`
});