93 lines
3.8 KiB
JavaScript
93 lines
3.8 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 && response.data.success && Array.isArray(response.data.data)) {
|
|
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 (markerData) => {
|
|
const response = await axios.get(`${this.window.TT_CONFIG.BASE_PATH}/ADBRimoFcp/getById?id=${fcp.id}`);
|
|
const fullFcpData = response.data;
|
|
return `
|
|
<div style="padding: 0px 5px 5px 5px; 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">Coordinates:</td>
|
|
<td class="py-1">
|
|
<a href="https://maps.google.com/?q=${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>
|
|
`; },
|
|
}
|
|
}));
|
|
} else {
|
|
console.error("Invalid data format from API:", response.data);
|
|
this.error = "Invalid data format received.";
|
|
this.mapMarkers = [];
|
|
}
|
|
} catch (err) {
|
|
console.error("Error fetching FCP data:", err);
|
|
this.error = "Failed to load FCP locations.";
|
|
this.mapMarkers = [];
|
|
} finally {
|
|
this.isLoading = false;
|
|
}
|
|
}
|
|
},
|
|
template: `
|
|
<tt-card style="height: 80vh; position: relative;">
|
|
<template #header>
|
|
<h5>FCP Locations</h5>
|
|
</template>
|
|
<div v-if="!isLoading && error" class="alert alert-danger">
|
|
{{ error }}
|
|
</div>
|
|
<tt-map :markers-data="mapMarkers" :loading="isLoading"></tt-map>
|
|
<div v-if="!isLoading && !error && mapMarkers.length === 0" class="alert alert-info">
|
|
No FCP locations found.
|
|
</div>
|
|
</tt-card>
|
|
`
|
|
}); |