component MAP

components/Ui/Map.vue

@@ -0,0 +1,99 @@
+<template>
+  <div id="map-wrap">
+    <client-only>
+      <l-map :zoom=zoom :center="center">
+        <l-tile-layer :url="layerUrl"></l-tile-layer>
+        <l-marker
+          :lat-lng="latLong"
+          draggable
+          v-on:update:latLng="onMoveMarker"></l-marker>
+      </l-map>
+
+      <v-btn class="mr-4 ot_green ot_white--text" @click="updateMap">
+        {{$t('updateMap')}}
+      </v-btn>
+
+    </client-only>
+  </div>
+</template>
+
+<script lang="ts">
+  import {defineComponent, computed,ref, toRefs, useContext} from '@nuxtjs/composition-api'
+  import {QUERY_TYPE, TYPE_ALERT} from "~/types/enums";
+  import {AddressPostal} from "~/models/Core/AddressPostal";
+  import {AnyJson} from "~/types/interfaces";
+  import {alert} from "~/types/interfaces";
+
+  export default defineComponent({
+    props:{
+      address:{
+        type: Object as () => AddressPostal,
+        required: true
+      },
+      zoom:{
+        type: Number,
+        required: true
+      }
+    },
+    setup(props, {emit}){
+      const {$dataProvider, store} = useContext()
+      const {address} = toRefs(props)
+      const latitude = ref(address.value.latitude)
+      const longitude = ref(address.value.longitude)
+
+      const center = computed(() => [latitude.value,longitude.value])
+      const latLong = computed(() => [latitude.value,longitude.value])
+      const layerUrl = 'https://{s}.tile.osm.org/{z}/{x}/{y}.png'
+
+      const updateMap = async () => {
+        let response = await $dataProvider.invoke({
+          type: QUERY_TYPE.DEFAULT,
+          url: `gps-coordinate-searching?street=${address.value.streetAddress} ${address.value.streetAddressSecond} ${address.value.streetAddressThird}&cp=${address.value.postalCode}&city=${address.value.addressCity}`
+        })
+        if(response.length > 0){
+          latitude.value = response[0].latitude
+          longitude.value = response[0].longitude
+
+          address.value.latitude = response[0].latitude
+          address.value.longitude = response[0].longitude
+          emit('updateAddress', address.value)
+        }else{
+          const alert:alert = {
+            type: TYPE_ALERT.ALERT,
+            message: 'no_coordinate_corresponding'
+          }
+          store.commit('page/setAlert', alert)
+        }
+      }
+
+      const onMoveMarker = async (event:AnyJson) => {
+        let response = await $dataProvider.invoke({
+          type: QUERY_TYPE.DEFAULT,
+          url: `gps-coordinate-reverse/${event.lat}/${event.lng}`
+        })
+        address.value.streetAddress = response.streetAddress
+        address.value.streetAddressSecond = response.streetAddressSecond
+        address.value.streetAddressThird = response.streetAddressThird
+        address.value.postalCode = response.cp
+        address.value.addressCity = response.city
+
+        emit('updateAddress', address.value)
+      }
+
+      return {
+        updateMap,
+        center,
+        latLong,
+        layerUrl,
+        onMoveMarker
+      }
+    }
+  })
+
+</script>
+
+<style scoped>
+  #map-wrap{
+    height: 30vh;
+  }
+</style>