added location picker to setting

resources/js/components/latlng.vue

@@ -1,6 +1,9 @@
 <template>
     <div id="latlng">
         <div ref="mapContainer" :style="'height: 300px;'+mapStyle"></div>
+        <template v-if="this.xname != 'NOTHING'">
+            <input type="hidden" :name="xname" :value="allData">
+        </template>
     </div>
 </template>
 
@@ -21,9 +24,15 @@ export default {
             zip: '',
             lat: null,
             lng: null,
+            firstMove: false,
+            currentZoom: 10,
         }
     },
     props: {
+        xname: {
+            default: 'NOTHING',
+            type: String,
+        },
         darkMode: {
             type: Boolean,
             default: false,
@@ -36,7 +45,7 @@ export default {
             type: Number,
             default: 50.99155000,
         },
-        izoom:{
+        izoom: {
             type: Number,
             default: 10,
         },
@@ -45,6 +54,7 @@ export default {
         this.lat = this.ilat;
         this.lng = this.ilng;
         this.zoom = this.izoom;
+        this.currentZoom = this.izoom;
         this.initMap();
     },
     computed: {
@@ -53,7 +63,10 @@ export default {
                 return 'filter: invert(100%) hue-rotate(120deg) brightness(95%) contrast(90%);';
             }
             return '';
-        }
+        },
+        allData() {
+            return this.lat + ',' + this.lng + ',' + this.currentZoom;
+        },
     },
     methods: {
         initMap() {
@@ -67,6 +80,33 @@ export default {
             this.map.on('click', this.onMapClick);
             this.map.attributionControl.setPrefix('xShop');
 
+            if (this.marker) {
+                this.map.removeLayer(this.marker);
+            }
+
+            this.marker = L.marker({lat: this.lat, lng: this.lng}).addTo(this.map);
+            // You can emit the selected location or perform any other desired action here
+            // console.log('Selected location:', e.latlng);
+
+            this.map.on("moveend", () => {
+                if (!this.firstMove) {
+                    this.map.invalidateSize();
+                    this.firstMove = true;
+                }
+            });
+            this.map.on("zoomend", (e, x) => {
+                this.map.invalidateSize();
+                this.firstMove = true;
+                this.currentZoom = e.target._zoom;
+            });
+            try {
+                document.querySelector('#lat').value = this.lat;
+                document.querySelector('#lng').value = this.lng;
+            } catch (e) {
+                console.log(e.message);
+            }
+
+
         },
         onMapClick(e) {
             if (this.marker) {
@@ -82,7 +122,7 @@ export default {
             try {
                 document.querySelector('#lat').value = this.lat;
                 document.querySelector('#lng').value = this.lng;
-            } catch(e) {
+            } catch (e) {
                 console.log(e.message);
             }
 

resources/views/components/setting-field.blade.php

@@ -19,6 +19,10 @@
         @case('ICON')
             <remix-icon-picker xname="{{$setting->key}}" xvalue="{{old($setting->key, $setting->value)}}"></remix-icon-picker>
             @break
+        @case('LOCATION')
+            @php($latlng = explode(',',old($setting->key, $setting->value)))
+            <lat-lng xname="{{$setting->key}}" :ilat="{{$latlng[0]}}" :ilng="{{$latlng[1]}}" :izoom="{{$latlng[2]}}" :dark-mode="true"></lat-lng>
+            @break
         @case('EDITOR')
             <textarea name="{{$setting->key}}" id="{{$setting->key}}"
                       class="form-control ckeditorx"