Merge branch 'spidev' into 'master'

Pop Übersichtsmap update

See merge request fronk/thetool!1986

public/js/pages/Pop/PopMap.js

@@ -41,7 +41,15 @@ Vue.component('pop-map-modal', {
                         <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;">
-                            <h6 class="border-bottom p-0 pb-2 mb-2 mt-0"><strong>Kategorien</strong></h6>
+                            <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)">
@@ -112,6 +120,19 @@ Vue.component('pop-map-modal', {
             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 || {};
@@ -239,6 +260,10 @@ Vue.component('pop-map-modal', {
                         <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>