feat: add fcp map
fix: fixed lazy fcp search fix: try to fix preorder filter
This commit is contained in:
Luca Haid
@@ -101,4 +101,28 @@ class ADBRimoFcpController extends TTCrud {
|
||||
$counts['upd'], $counts['fcpNF'], $counts['noFCP'], $counts['noExtId']);
|
||||
self::returnJson(['success' => true, 'message' => $msg]);
|
||||
}
|
||||
|
||||
public function MapAction() {
|
||||
Helper::renderVue($this, "ADBRimoFcpMap", "ADBRimoFcpMap", [
|
||||
"MAPBOX_KEY" => TT_MAPBOX_TILE_API_TOKEN,
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
public function getAllFCPsAction() {
|
||||
$input = json_decode(file_get_contents('php://input'), true);
|
||||
|
||||
$fcpList = ADBRimoFcp::getAll();
|
||||
$fcpData = array_map(function ($fcp) {
|
||||
return [
|
||||
'id' => $fcp->id,
|
||||
// 'rimo_ex_state' => $fcp->rimo_ex_state,
|
||||
// 'rimo_op_state' => $fcp->rimo_op_state,
|
||||
'gps_lat' => $fcp->gps_lat,
|
||||
'gps_long' => $fcp->gps_long
|
||||
];
|
||||
}, $fcpList);
|
||||
|
||||
self::returnJson(['success' => true, 'data' => $fcpData]);
|
||||
}
|
||||
}
|
||||
@@ -1095,7 +1095,7 @@ class PreorderController extends mfBaseController {
|
||||
|
||||
return array_map(
|
||||
fn($fcp) => ["id" => $fcp->name ?? null, "text" => $fcp->name ?? null, 'lat' => $fcp->gps_lat ?? null, 'lng' => $fcp->gps_long ?? null],
|
||||
ADBRimoFcp::getAll(["netzgebiet_id" => $campaign->network->adb_netzgebiet_id]) ?? []
|
||||
ADBRimoFcp::getAll(["netzgebiet_id" => intval($campaign->network->adb_netzgebiet_id)]) ?? []
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1005,14 +1005,26 @@ class PreorderModel
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!empty($filter['fcp'])) {
|
||||
if (!empty($filter['fcp']) && array_key_exists("preordercampaign_id", $filter)) {
|
||||
$fcp = $filter['fcp'];
|
||||
$db = FronkDB::singleton();
|
||||
$campaign = new Preordercampaign($filter['preordercampaign_id']);
|
||||
if (is_array($fcp)) {
|
||||
$items = array_map(fn($i) => "'" . $db->escape($i) . "'", array_filter($fcp));
|
||||
if ($items) $where .= " AND adb_hausnummer.rimo_fcp_name IN (" . implode(',', $items) . ")";
|
||||
$items = array_map(fn($i) => ADBRimoFcp::getAll([
|
||||
'netzgebiet_id' => intval($campaign->network->adb_netzgebiet_id),
|
||||
'name' => $i])[0], array_filter($fcp));
|
||||
|
||||
|
||||
|
||||
$items = array_map(fn($i) => $i->id, array_filter($items));
|
||||
if ($items) $where .= " AND adb_hausnummer.fcp_id IN (" . implode(',', $items) . ")";
|
||||
} else {
|
||||
$fcp = ADBRimoFcp::getAll([
|
||||
'netzgebiet_id' => intval($campaign->network->adb_netzgebiet_id),
|
||||
'name' => $fcp]);
|
||||
if ($fcp) $fcp = $fcp[0]->id;
|
||||
else $fcp = null;
|
||||
|
||||
$where .= " AND adb_hausnummer.rimo_fcp_name = '" . $db->escape($fcp) . "'";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -49,6 +49,7 @@ $jsFiles = [
|
||||
"plugins/vue/tt-components/tt-textarea.js",
|
||||
"plugins/vue/tt-components/tt-position-manager.js",
|
||||
"plugins/vue/tt-components/tt-tooltip.js",
|
||||
"plugins/vue/tt-components/tt-map.js",
|
||||
];
|
||||
|
||||
|
||||
|
||||
@@ -200,6 +200,7 @@ Vue.component('a-d-b-rimo-fcp', {
|
||||
<div style="display: flex; gap: 10px;">
|
||||
<tt-button icon="fas fa-upload" text="FCPs Importieren" additional-class="btn-outline-success" @click="showImportFCPModal = true" />
|
||||
<tt-button icon="fas fa-upload" text="Locations Importieren" additional-class="btn-outline-success" @click="showImportLocationsModal = true" />
|
||||
<tt-button text="Karte anzeigen" icon="fas fa-map" additional-class="btn-outline-primary" @click="window.location.href = window.TT_CONFIG['BASE_PATH'] + '/ADBRimoFcp/Map'" />
|
||||
</div>
|
||||
</template>
|
||||
</tt-table-crud>
|
||||
@@ -231,7 +232,8 @@ Vue.component('a-d-b-rimo-fcp', {
|
||||
showImportLocationsModal: false,
|
||||
networkAreas: window.TT_CONFIG?.CRUD_CONFIG?.columns?.find(col => col.key === 'netzgebiet_id')?.modal?.items || [],
|
||||
fcpApiUrl: window.TT_CONFIG['BASE_PATH'] + '/ADBRimoFcp/ImportFCPs',
|
||||
locationsApiUrl: window.TT_CONFIG['BASE_PATH'] + '/ADBRimoFcp/ImportLocations'
|
||||
locationsApiUrl: window.TT_CONFIG['BASE_PATH'] + '/ADBRimoFcp/ImportLocations',
|
||||
window
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
93
public/js/pages/ADBRimoFcpMap/ADBRimoFcpMap.js
Normal file
93
public/js/pages/ADBRimoFcpMap/ADBRimoFcpMap.js
Normal file
@@ -0,0 +1,93 @@
|
||||
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>
|
||||
`
|
||||
});
|
||||
185
public/plugins/vue/tt-components/tt-map.js
Normal file
185
public/plugins/vue/tt-components/tt-map.js
Normal file
@@ -0,0 +1,185 @@
|
||||
Vue.component('tt-map', {
|
||||
props: {
|
||||
markersData: {
|
||||
type: Array,
|
||||
default: () => [] // Expecting [{ lat: Number, lng: Number, options: { maki?: Object, popup?: String, asyncPopupContent?: Function } }, ...]
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({}) // User overrides for defaults
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
markerLayer: null,
|
||||
tileLayers: { streets: null, satellite: null },
|
||||
mapType: localStorage.getItem('tt-map-type') || 'streets', // Default to 'streets' or stored preference
|
||||
internalLoading: true,
|
||||
scriptsLoaded: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isLoading() {
|
||||
return this.internalLoading || this.loading;
|
||||
},
|
||||
mapConfig() {
|
||||
const defaults = {
|
||||
center: [47.0707, 15.4395],
|
||||
zoom: 13,
|
||||
mapboxKey: window.TT_CONFIG?.MAPBOX_KEY,
|
||||
streetsTileUrl: 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}',
|
||||
streetsTileId: 'mapbox/streets-v11',
|
||||
satelliteTileUrl: 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}',
|
||||
satelliteTileId: 'mapbox/satellite-streets-v12', // Or 'mapbox/satellite-v9'
|
||||
tileAttribution: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
|
||||
clusterOptions: {},
|
||||
makiMarkerOptions: { icon: "marker", color: "#3b82f6", size: "m" }
|
||||
};
|
||||
return { ...defaults, ...this.config }; // Merge user config over defaults
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
try {
|
||||
await this.loadScripts();
|
||||
this.scriptsLoaded = true;
|
||||
this.initializeMap();
|
||||
this.updateMarkers();
|
||||
this.internalLoading = false;
|
||||
} catch (error) {
|
||||
console.error("Map Initialization Error:", error);
|
||||
this.internalLoading = false;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
loadScripts() {
|
||||
const scripts = [
|
||||
{ type: 'link', url: 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css' },
|
||||
{ type: 'script', url: 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js' },
|
||||
{ type: 'script', url: 'https://unpkg.com/leaflet-makimarkers@3.1.0/Leaflet.MakiMarkers.js' },
|
||||
{ type: 'link', url: 'https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css' },
|
||||
{ type: 'link', url: 'https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css' },
|
||||
{ type: 'script', url: 'https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js' }
|
||||
];
|
||||
|
||||
const promises = scripts.map(s => new Promise((resolve, reject) => {
|
||||
let el;
|
||||
if (s.type === 'script') {
|
||||
el = document.createElement('script');
|
||||
el.src = s.url; el.async = false; el.onload = resolve; el.onerror = reject;
|
||||
} else {
|
||||
el = document.createElement('link');
|
||||
el.rel = 'stylesheet'; el.href = s.url; resolve();
|
||||
}
|
||||
if (el) document.head.appendChild(el); else reject();
|
||||
}));
|
||||
return Promise.all(promises);
|
||||
},
|
||||
initializeMap() {
|
||||
if (!this.scriptsLoaded || !L || !L.MarkerClusterGroup || !L.MakiMarkers || !this.mapConfig.mapboxKey) return;
|
||||
|
||||
this.map = L.map(this.$refs.mapContainer, { preferCanvas: true }).setView(this.mapConfig.center, this.mapConfig.zoom);
|
||||
L.MakiMarkers.accessToken = this.mapConfig.mapboxKey;
|
||||
|
||||
this.tileLayers.streets = L.tileLayer(this.mapConfig.streetsTileUrl, {
|
||||
attribution: this.mapConfig.tileAttribution, maxZoom: 18, id: this.mapConfig.streetsTileId,
|
||||
tileSize: 512, zoomOffset: -1, accessToken: this.mapConfig.mapboxKey
|
||||
});
|
||||
this.tileLayers.satellite = L.tileLayer(this.mapConfig.satelliteTileUrl, {
|
||||
attribution: this.mapConfig.tileAttribution, maxZoom: 18, id: this.mapConfig.satelliteTileId,
|
||||
tileSize: 512, zoomOffset: -1, accessToken: this.mapConfig.mapboxKey
|
||||
});
|
||||
|
||||
this.tileLayers[this.mapType].addTo(this.map); // Add initial layer based on preference
|
||||
|
||||
this.markerLayer = L.markerClusterGroup(this.mapConfig.clusterOptions);
|
||||
this.map.addLayer(this.markerLayer);
|
||||
|
||||
// Invalidate size after initial load if container might not have been ready
|
||||
this.$nextTick(() => {
|
||||
this.map.invalidateSize();
|
||||
});
|
||||
// Add resize listener
|
||||
window.addEventListener('resize', this.handleResize);
|
||||
},
|
||||
updateMarkers() {
|
||||
if (!this.map || !this.markerLayer || !this.scriptsLoaded) return;
|
||||
this.markerLayer.clearLayers();
|
||||
const markersToAdd = [];
|
||||
this.markersData.forEach(data => {
|
||||
if (data.lat != null && data.lng != null) {
|
||||
const makiOptions = { ...this.mapConfig.makiMarkerOptions, ...(data.options?.maki || {}) };
|
||||
const icon = L.MakiMarkers.icon(makiOptions);
|
||||
const marker = L.marker([data.lat, data.lng], { icon: icon });
|
||||
|
||||
if (data.options?.popup) {
|
||||
marker.bindPopup(data.options.popup);
|
||||
} else if (data.options?.asyncPopupContent && typeof data.options.asyncPopupContent === 'function') {
|
||||
marker.bindPopup(() => '<div class="popup-loader">Loading...</div>'); // Initial content
|
||||
marker.on('popupopen', async (e) => {
|
||||
const popup = e.popup;
|
||||
try {
|
||||
const content = await data.options.asyncPopupContent(data); // Pass marker data to function
|
||||
popup.setContent(content);
|
||||
} catch (error) {
|
||||
console.error("Error loading popup content:", error);
|
||||
popup.setContent('<div class="text-danger">Failed to load content.</div>');
|
||||
}
|
||||
popup.update(); // Adjust size
|
||||
});
|
||||
}
|
||||
|
||||
if (data.options?.tooltip) marker.bindTooltip(data.options.tooltip);
|
||||
markersToAdd.push(marker);
|
||||
}
|
||||
});
|
||||
if (markersToAdd.length > 0) this.markerLayer.addLayers(markersToAdd);
|
||||
},
|
||||
toggleMapType() {
|
||||
this.map.removeLayer(this.tileLayers[this.mapType]);
|
||||
this.mapType = this.mapType === 'streets' ? 'satellite' : 'streets';
|
||||
this.tileLayers[this.mapType].addTo(this.map);
|
||||
localStorage.setItem('tt-map-type', this.mapType);
|
||||
},
|
||||
handleResize() {
|
||||
if (this.map) {
|
||||
// Use debounce if resize events fire too rapidly
|
||||
this.map.invalidateSize();
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
markersData: { handler() { this.updateMarkers(); }, deep: true },
|
||||
loading(newVal) {
|
||||
// Optional: Invalidate map size when loading finishes, in case container size changed
|
||||
if (!newVal && this.map) {
|
||||
this.$nextTick(() => this.map.invalidateSize());
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.handleResize);
|
||||
if (this.map) {
|
||||
this.map.remove();
|
||||
this.map = null;
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<div style="position: relative; width: 100%; height: 100%;">
|
||||
<div v-if="isLoading" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1001; background: rgba(255,255,255,0.7); display: flex; justify-content: center; align-items: center;">
|
||||
<tt-loader></tt-loader>
|
||||
</div>
|
||||
<div ref="mapContainer" style="width: 100%; height: 100%; z-index: 1;" :style="{ visibility: internalLoading ? 'hidden' : 'visible' }"></div>
|
||||
<button @click="toggleMapType"
|
||||
class="btn btn-light btn-sm"
|
||||
style="position: absolute; top: 10px; right: 10px; z-index: 1000;">
|
||||
<i :class="mapType === 'streets' ? 'fas fa-globe-americas' : 'fas fa-map'"></i>
|
||||
{{ mapType === 'streets' ? 'Satellite' : 'Map' }}
|
||||
</button>
|
||||
</div>
|
||||
`
|
||||
});
|
||||
Reference in New Issue
Block a user