46aa483bbc
* Gps Daten und Google Maps Verlinkung implementiert * Alle auswählen Checkbox implementiert
378 lines
16 KiB
JavaScript
378 lines
16 KiB
JavaScript
Vue.component('pop-map-modal', {
|
|
template: `
|
|
<div>
|
|
<div class="modal fade" id="popMapModal" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl modal-dialog-centered" style="max-width: 95vw;">
|
|
<div class="modal-content" style="height: 90vh;">
|
|
<div class="modal-header bg-dark text-white">
|
|
<h5 class="modal-title"><i class="fas fa-map-marked-alt"></i><span class="text-light mt-1 d-inline-block"> POP Übersicht</span></h5>
|
|
<div class="d-flex align-items-center ml-auto">
|
|
<div class="input-group mr-3 position-relative" style="width: 300px;">
|
|
<input type="text" class="form-control form-control-sm"
|
|
v-model="searchQuery"
|
|
@input="filterPops"
|
|
@keydown.down.prevent="moveSelection(1)"
|
|
@keydown.up.prevent="moveSelection(-1)"
|
|
@keydown.enter.prevent="handleEnter"
|
|
placeholder="POP suchen...">
|
|
<div class="input-group-append">
|
|
<button class="btn btn-primary btn-sm" @click="searchPop"><i class="fas fa-search"></i></button>
|
|
<button v-if="searchQuery" class="btn btn-secondary btn-sm" @click="clearSearch"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
|
|
<div v-if="filteredPops.length > 0 && showSuggestions" class="list-group position-absolute w-100" style="top: 100%; z-index: 1050; max-height: 300px; overflow-y: auto; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
|
|
<a href="#" v-for="(pop, index) in filteredPops" :key="pop.id"
|
|
class="list-group-item list-group-item-action py-2"
|
|
:class="{ 'active': index === selectedIndex }"
|
|
@click.prevent="selectPop(pop)">
|
|
<div class="d-flex w-100 justify-content-between">
|
|
<h6 class="mb-1" :class="{ 'text-white': index === selectedIndex }">{{ pop.name }}</h6>
|
|
</div>
|
|
<small :class="index === selectedIndex ? 'text-white' : 'text-muted'">{{ categories[pop.category || 99] }} | {{ pop.location }}</small>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="modal-body p-0 position-relative">
|
|
<div id="pop-map" style="width: 100%; height: 100%;"></div>
|
|
|
|
<div class="legend-box" style="position: absolute; bottom: 30px; right: 20px; background: white; padding: 15px; border-radius: 5px; box-shadow: 0 0 15px rgba(0,0,0,0.2); z-index: 1000; min-width: 200px;">
|
|
<h5 class="border-bottom p-0 pb-2 mb-2 mt-0"><strong>Kategorien</strong></h5>
|
|
<div class="mb-1 d-flex align-items-center pb-1 border-bottom">
|
|
<div class="custom-control custom-checkbox mr-2">
|
|
<input type="checkbox" class="custom-control-input" id="cat-all" v-model="allCategoriesSelected">
|
|
<label class="custom-control-label" for="cat-all" style="cursor: pointer;">
|
|
</label>
|
|
</div>
|
|
<label for="cat-all" style="cursor: pointer; margin-bottom: 0;"><strong>Alle auswählen</strong></label>
|
|
</div>
|
|
<div v-for="(label, key) in categories" :key="key" class="mb-1 d-flex align-items-center">
|
|
<div class="custom-control custom-checkbox mr-2">
|
|
<input type="checkbox" class="custom-control-input" :id="'cat-'+key" v-model="visibleCategories[key]" @change="updateMap(false)">
|
|
<label class="custom-control-label" :for="'cat-'+key" style="cursor: pointer;">
|
|
</label>
|
|
</div>
|
|
<img :src="window.TT_CONFIG.BASE_URL + '/' + categoryImages[key]" style="height: 20px; margin-right: 5px;">
|
|
<label :for="'cat-'+key" style="cursor: pointer; margin-bottom: 0;">{{ label }} ({{ categoryCounts[key] || 0 }})</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
data() {
|
|
return {
|
|
map: null,
|
|
popLayer: null,
|
|
searchQuery: '',
|
|
filteredPops: [],
|
|
showSuggestions: false,
|
|
selectedIndex: -1,
|
|
categories: {
|
|
1: 'Outdoor (Kasten/Schrank)',
|
|
2: 'Indoor (Keller Gebäude)',
|
|
3: 'Sender/Funk (Sendemast)',
|
|
4: 'Container (Garage, Container)',
|
|
99: 'Unbekannt'
|
|
},
|
|
states: {
|
|
1: "Planung (Innenleben)",
|
|
2: "Bauphase (Schrank)",
|
|
3: "Grobdoku",
|
|
4: "in Betrieb",
|
|
5: "von Techniker abgenommen (Altbestand)"
|
|
},
|
|
categoryImages: {
|
|
1: 'img/markers/marker-pop.png',
|
|
2: 'img/markers/marker-pop-o.png',
|
|
3: 'img/markers/marker-pop-b.png',
|
|
4: 'img/markers/marker-pop-v.png',
|
|
99: 'img/markers/marker-pop-bl.png'
|
|
},
|
|
categoryColors: {
|
|
1: '#a1dfa0', // Outdoor - Green
|
|
2: '#f8b767', // Indoor - Orange
|
|
3: '#a9b8ec', // Sender - Blue
|
|
4: '#f89797', // Container - Yellow
|
|
99: '#808080' // Unbekannt - Gray
|
|
},
|
|
visibleCategories: {
|
|
1: true,
|
|
2: true,
|
|
3: true,
|
|
4: true,
|
|
99: true
|
|
},
|
|
categoryCounts: {
|
|
1: 0,
|
|
2: 0,
|
|
3: 0,
|
|
4: 0,
|
|
99: 0
|
|
},
|
|
allPops: [],
|
|
markers: []
|
|
};
|
|
},
|
|
computed: {
|
|
allCategoriesSelected: {
|
|
get() {
|
|
return Object.keys(this.categories).every(key => this.visibleCategories[key]);
|
|
},
|
|
set(value) {
|
|
Object.keys(this.categories).forEach(key => {
|
|
this.visibleCategories[key] = value;
|
|
});
|
|
this.updateMap(false);
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
// Prepare data
|
|
const popsObj = window.TT_CONFIG.POPS || {};
|
|
this.allPops = Object.values(popsObj);
|
|
|
|
this.calculateCounts();
|
|
|
|
// Listen to modal open event to init map correctly (fix render issues)
|
|
$(document).on('shown.bs.modal', '#popMapModal', this.initMap);
|
|
|
|
// Close suggestions when clicking outside
|
|
document.addEventListener('click', this.handleClickOutside);
|
|
},
|
|
beforeDestroy() {
|
|
$(document).off('shown.bs.modal', '#popMapModal', this.initMap);
|
|
document.removeEventListener('click', this.handleClickOutside);
|
|
},
|
|
methods: {
|
|
calculateCounts() {
|
|
// Reset counts
|
|
for (let key in this.categoryCounts) {
|
|
this.categoryCounts[key] = 0;
|
|
}
|
|
|
|
this.allPops.forEach(pop => {
|
|
const category = pop.category || 99;
|
|
if (this.categoryCounts.hasOwnProperty(category)) {
|
|
this.categoryCounts[category]++;
|
|
} else {
|
|
// Just in case we have a category not in our list, count it as 99 or ignore
|
|
this.categoryCounts[99]++;
|
|
}
|
|
});
|
|
},
|
|
open() {
|
|
$('#popMapModal').modal('show');
|
|
},
|
|
initMap() {
|
|
if (this.map) {
|
|
setTimeout(() => {
|
|
this.map.invalidateSize();
|
|
}, 100);
|
|
return;
|
|
}
|
|
|
|
if (typeof L === 'undefined' || !L.MakiMarkers) {
|
|
console.error('Leaflet or MakiMarkers not loaded');
|
|
return;
|
|
}
|
|
|
|
L.MakiMarkers.accessToken = window.TT_CONFIG.MAPBOX_TOKEN;
|
|
|
|
this.map = L.map('pop-map').setView([51.1657, 10.4515], 6);
|
|
|
|
const standardLayer = L.tileLayer('https://mapsneu.wien.gv.at/basemap/{id}/normal/google3857/{z}/{y}/{x}.{imgtype}', {
|
|
maxZoom: 19,
|
|
id: "geolandbasemap",
|
|
imgtype: "png",
|
|
attribution: 'Basemap.at'
|
|
});
|
|
|
|
const satelliteLayer = L.tileLayer('https://mapsneu.wien.gv.at/basemap/{id}/normal/google3857/{z}/{y}/{x}.{imgtype}', {
|
|
maxZoom: 19,
|
|
id: "bmaporthofoto30cm",
|
|
imgtype: "jpeg",
|
|
attribution: 'Basemap.at'
|
|
});
|
|
|
|
standardLayer.addTo(this.map);
|
|
|
|
const baseMaps = {
|
|
"Karte": standardLayer,
|
|
"Satellit": satelliteLayer
|
|
};
|
|
|
|
L.control.layers(baseMaps).addTo(this.map);
|
|
|
|
this.popLayer = L.featureGroup().addTo(this.map);
|
|
|
|
this.updateMap();
|
|
},
|
|
updateMap(shouldFit = true) {
|
|
if (!this.map) return;
|
|
|
|
this.popLayer.clearLayers();
|
|
this.markers = [];
|
|
|
|
const bounds = L.latLngBounds();
|
|
let hasMarkers = false;
|
|
|
|
this.allPops.forEach(pop => {
|
|
const category = pop.category || 99;
|
|
|
|
if (!this.visibleCategories[category]) return;
|
|
|
|
const gps = pop.gps;
|
|
if (!gps) return;
|
|
|
|
const parts = gps.split(',');
|
|
if (parts.length !== 2) return;
|
|
|
|
const lat = parseFloat(parts[0]);
|
|
const lng = parseFloat(parts[1]);
|
|
|
|
if (isNaN(lat) || isNaN(lng) || (lat === 0 && lng === 0)) return;
|
|
|
|
let iconUrl = this.categoryImages[category] || this.categoryImages[99];
|
|
let color = this.categoryColors[category] || '#808080';
|
|
|
|
const marker = L.marker([lat, lng], {
|
|
icon: L.MakiMarkers.icon({
|
|
icon: 'village',
|
|
color: color,
|
|
size: 'l'
|
|
})
|
|
});
|
|
|
|
let categoryName = this.categories[category] || 'Unbekannt';
|
|
let stateText = this.states[pop.state] || pop.state || '-';
|
|
|
|
const popupContent = `
|
|
<div style="min-width: 200px;">
|
|
<h6 class="p-0"><i class="fas fa-building"></i> <strong>${pop.name}</strong></h6>
|
|
<hr class="my-2">
|
|
<div><strong>Kategorie:</strong> ${categoryName}</div>
|
|
<div><strong>Status:</strong> ${stateText}</div>
|
|
<div><strong>Info:</strong> ${pop.location || '-'}</div>
|
|
<div class="d-flex align-items-center justify-content-between mt-1">
|
|
<span><strong>GPS:</strong> ${lat.toFixed(6)}, ${lng.toFixed(6)}</span>
|
|
<a target="_blank" href="https://www.google.com/maps?q=${lat},${lng}" class="btn btn-sm btn-outline-secondary py-0 px-1" title="In Google Maps öffnen">Google Maps <i class="fas fa-map-marker-alt"></i></a>
|
|
</div>
|
|
<div class="mt-2">
|
|
<a target="_blank" href="${window.TT_CONFIG.BASE_URL}/Pop/Detail?id=${pop.id}" class="btn btn-sm btn-info btn-block text-light"><i class="fas fa-info-circle"></i> Details</a>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
marker.bindPopup(popupContent);
|
|
marker.popData = pop;
|
|
|
|
this.popLayer.addLayer(marker);
|
|
this.markers.push(marker);
|
|
bounds.extend([lat, lng]);
|
|
hasMarkers = true;
|
|
});
|
|
|
|
if (shouldFit === true && hasMarkers && !this.searchQuery) {
|
|
this.map.fitBounds(bounds, {padding: [50, 50]});
|
|
}
|
|
},
|
|
filterPops() {
|
|
const query = this.searchQuery.toLowerCase().trim();
|
|
this.selectedIndex = -1;
|
|
|
|
if (query.length < 1) {
|
|
this.filteredPops = [];
|
|
this.showSuggestions = false;
|
|
return;
|
|
}
|
|
|
|
this.filteredPops = this.allPops.filter(pop =>
|
|
pop.name.toLowerCase().includes(query) ||
|
|
(pop.location && pop.location.toLowerCase().includes(query))
|
|
).slice(0, 10);
|
|
|
|
this.showSuggestions = true;
|
|
},
|
|
moveSelection(step) {
|
|
if (!this.showSuggestions || this.filteredPops.length === 0) return;
|
|
|
|
this.selectedIndex += step;
|
|
|
|
if (this.selectedIndex < 0) {
|
|
this.selectedIndex = this.filteredPops.length - 1;
|
|
} else if (this.selectedIndex >= this.filteredPops.length) {
|
|
this.selectedIndex = 0;
|
|
}
|
|
},
|
|
handleEnter() {
|
|
if (this.showSuggestions && this.selectedIndex >= 0 && this.selectedIndex < this.filteredPops.length) {
|
|
this.selectPop(this.filteredPops[this.selectedIndex]);
|
|
} else {
|
|
this.searchPop();
|
|
}
|
|
},
|
|
selectPop(pop) {
|
|
this.searchQuery = pop.name;
|
|
this.showSuggestions = false;
|
|
this.selectedIndex = -1;
|
|
this.searchPop();
|
|
},
|
|
handleClickOutside(event) {
|
|
if (!event.target.closest('.input-group')) {
|
|
this.showSuggestions = false;
|
|
this.selectedIndex = -1;
|
|
}
|
|
},
|
|
searchPop() {
|
|
const query = this.searchQuery.toLowerCase().trim();
|
|
if (!query) {
|
|
this.clearSearch();
|
|
return;
|
|
}
|
|
|
|
this.showSuggestions = false;
|
|
this.selectedIndex = -1;
|
|
|
|
let found = this.markers.find(m => m.popData.name.toLowerCase().includes(query));
|
|
|
|
if (!found) {
|
|
const hiddenPop = this.allPops.find(p => p.name.toLowerCase().includes(query));
|
|
if (hiddenPop) {
|
|
const category = hiddenPop.category || 99;
|
|
if (!this.visibleCategories[category]) {
|
|
this.visibleCategories[category] = true;
|
|
this.updateMap(false);
|
|
found = this.markers.find(m => m.popData.id === hiddenPop.id);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (found) {
|
|
this.map.flyTo(found.getLatLng(), 15);
|
|
setTimeout(() => {
|
|
found.openPopup();
|
|
}, 500);
|
|
} else {
|
|
alert('Kein POP gefunden (oder keine GPS Koordinaten).');
|
|
}
|
|
},
|
|
clearSearch() {
|
|
this.searchQuery = '';
|
|
this.filteredPops = [];
|
|
this.showSuggestions = false;
|
|
this.selectedIndex = -1;
|
|
const bounds = L.latLngBounds();
|
|
this.markers.forEach(m => bounds.extend(m.getLatLng()));
|
|
if (this.markers.length > 0) {
|
|
this.map.fitBounds(bounds, {padding: [50, 50]});
|
|
}
|
|
}
|
|
}
|
|
}); |