Pop Übersichtsmap update
* Gesamtanzahl wird nun angezeigt mit und ohne Koordinaten
This commit is contained in:
@@ -48,7 +48,7 @@ Vue.component('pop-map-modal', {
|
|||||||
<label class="custom-control-label" for="cat-all" style="cursor: pointer;">
|
<label class="custom-control-label" for="cat-all" style="cursor: pointer;">
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<label for="cat-all" style="cursor: pointer; margin-bottom: 0;"><strong>Alle auswählen</strong></label>
|
<label for="cat-all" style="cursor: pointer; margin-bottom: 0;"><strong>Alle auswählen</strong> ({{ totalCount }} <span v-if="totalCount !== allPops.length" class="text-danger" title="Gesamtanzahl inklusive POPs ohne Koordinaten">/ {{ allPops.length }}</span>)</label>
|
||||||
</div>
|
</div>
|
||||||
<div v-for="(label, key) in categories" :key="key" class="mb-1 d-flex align-items-center">
|
<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">
|
<div class="custom-control custom-checkbox mr-2">
|
||||||
@@ -96,11 +96,11 @@ Vue.component('pop-map-modal', {
|
|||||||
99: 'img/markers/marker-pop-bl.png'
|
99: 'img/markers/marker-pop-bl.png'
|
||||||
},
|
},
|
||||||
categoryColors: {
|
categoryColors: {
|
||||||
1: '#a1dfa0', // Outdoor - Green
|
1: '#a1dfa0',
|
||||||
2: '#f8b767', // Indoor - Orange
|
2: '#f8b767',
|
||||||
3: '#a9b8ec', // Sender - Blue
|
3: '#a9b8ec',
|
||||||
4: '#f89797', // Container - Yellow
|
4: '#f89797',
|
||||||
99: '#808080' // Unbekannt - Gray
|
99: '#808080'
|
||||||
},
|
},
|
||||||
visibleCategories: {
|
visibleCategories: {
|
||||||
1: true,
|
1: true,
|
||||||
@@ -121,6 +121,9 @@ Vue.component('pop-map-modal', {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
totalCount() {
|
||||||
|
return Object.values(this.categoryCounts).reduce((acc, count) => acc + count, 0);
|
||||||
|
},
|
||||||
allCategoriesSelected: {
|
allCategoriesSelected: {
|
||||||
get() {
|
get() {
|
||||||
return Object.keys(this.categories).every(key => this.visibleCategories[key]);
|
return Object.keys(this.categories).every(key => this.visibleCategories[key]);
|
||||||
@@ -134,16 +137,12 @@ Vue.component('pop-map-modal', {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// Prepare data
|
|
||||||
const popsObj = window.TT_CONFIG.POPS || {};
|
const popsObj = window.TT_CONFIG.POPS || {};
|
||||||
this.allPops = Object.values(popsObj);
|
this.allPops = Object.values(popsObj);
|
||||||
|
|
||||||
this.calculateCounts();
|
this.calculateCounts();
|
||||||
|
|
||||||
// Listen to modal open event to init map correctly (fix render issues)
|
|
||||||
$(document).on('shown.bs.modal', '#popMapModal', this.initMap);
|
$(document).on('shown.bs.modal', '#popMapModal', this.initMap);
|
||||||
|
|
||||||
// Close suggestions when clicking outside
|
|
||||||
document.addEventListener('click', this.handleClickOutside);
|
document.addEventListener('click', this.handleClickOutside);
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
@@ -152,17 +151,23 @@ Vue.component('pop-map-modal', {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
calculateCounts() {
|
calculateCounts() {
|
||||||
// Reset counts
|
|
||||||
for (let key in this.categoryCounts) {
|
for (let key in this.categoryCounts) {
|
||||||
this.categoryCounts[key] = 0;
|
this.categoryCounts[key] = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.allPops.forEach(pop => {
|
this.allPops.forEach(pop => {
|
||||||
|
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;
|
||||||
|
|
||||||
const category = pop.category || 99;
|
const category = pop.category || 99;
|
||||||
if (this.categoryCounts.hasOwnProperty(category)) {
|
if (this.categoryCounts.hasOwnProperty(category)) {
|
||||||
this.categoryCounts[category]++;
|
this.categoryCounts[category]++;
|
||||||
} else {
|
} else {
|
||||||
// Just in case we have a category not in our list, count it as 99 or ignore
|
|
||||||
this.categoryCounts[99]++;
|
this.categoryCounts[99]++;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user