- improved map performance

- improved look and feel
- minified

public/js/pages/ADBRimoFcpMap/ADBRimoFcpMap.js

@@ -17,59 +17,48 @@ Vue.component('ADBRimoFcpMap', {
             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 {
+                if (!response.data?.success || !Array.isArray(response.data.data)) {
                     console.error("Invalid data format from API:", response.data);
-                    this.error = "Invalid data format received.";
+                    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 = "Failed to load FCP locations.";
+                this.error = "Laden der FCP-Standorte fehlgeschlagen.";
                 this.mapMarkers = [];
             } finally {
                 this.isLoading = false;
@@ -78,15 +67,11 @@ Vue.component('ADBRimoFcpMap', {
     },
     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>
+        <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 === 0" class="alert alert-info">
-          No FCP locations found.
+        <div v-if="!isLoading && !error && !mapMarkers.length" class="alert alert-info m-2">
+          Keine FCP-Standorte gefunden.
         </div>
       </tt-card>
     `