Feature/measurement update

components/AppButton.vue

@@ -1,9 +1,20 @@
 <template>
-  <button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 uppercase font-bold rounded-sm" type="button">
+  <button :class="['py-2 px-4 uppercase font-bold rounded-md', type === 'secondary' ? 'text-primary bg-white border-primary border-2' : 'text-white bg-primary', { 'opacity-50': disabled }]" type="button" :disabled="disabled">
     <slot />
   </button>
 </template>
 
 <script>
-export default { }
+export default {
+  props: {
+    type: {
+      type: String,
+      default: 'primary'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
 </script>

components/AreaInput.vue

@@ -7,41 +7,52 @@
       <input
         :id="`${id}-area`"
         :value="value"
+        :disabled="drawingActive"
         class="w-full py-2 px-3 text-gray-700 leading-normal rounded relative border rounded mb-4 shadow appearance-none label-floating"
         type="number"
         @input="(e) => $emit('input', parseFloat(e.target.value))"
       >
       <p v-if="!mapVisible" class="text-xs mb-4">
-        Jeśli nie znasz powierzchni skorzystaj z opcji <span class="action-link" @click="initMap">Zaznacz na mapie</span>
+        Jeśli nie znasz powierzchni skorzystaj z opcji <span class="font-bold underline text-primary cursor-pointer" @click="initMap">Zaznacz na mapie</span>
       </p>
-      <ol v-else class="text-xs mb-4 list-decimal pl-4">
-        <li>Skorzystaj z wyszukiwarki lub <span class="action-link" @click="useGeolocation">uzyj geolokacji</span>.</li>
-        <li>Zaznacz obszar (PPM > <span class="italic">Measure distance</span>)</li>
-        <li>Kliknij <span class="font-bold">Zatwierdź</span></li>
-      </ol>
     </div>
     <div v-if="mapVisible">
       <input
         :id="`${id}-autocomplete`"
         ref="autocomplete"
         v-model="autocomplete"
-        class="w-full py-2 px-3 text-gray-700 leading-normal rounded relative border rounded mb-4 shadow appearance-none label-floating"
+        class="w-full py-2 px-3 text-gray-700 leading-normal rounded relative border rounded mb-2 shadow appearance-none label-floating"
         type="text"
       >
+      <p :class="['font-bold', {'text-primary underline cursor-pointer' : !drawingActive}]" @click="drawingActive ? null :useGeolocation">
+        Pobierz aktualną lokalizację <gps-image class="inline ml-2 mb-2" />
+      </p>
       <div ref="map" class="w-full" style="height: 50vh" />
     </div>
     <div class="my-2">
       <template v-if="mapVisible">
+        <p v-if="drawingActive" class="mb-2">
+          Zaznacz obszar na mapie
+        </p>
+        <app-button type="secondary" :disabled="drawingActive" @click.native="startMeasurements">
+          Rysuj
+        </app-button>
         <app-button @click.native="getArea">
-          Zatwierdź
+          Zmierz
         </app-button>
       </template>
     </div>
   </section>
 </template>
 
 <script>
+import GpsImage from '~/assets/gps.svg?inline'
+
 export default {
+
+  components: {
+    GpsImage
+  },
   props: {
     id: {
       type: String,
@@ -60,7 +71,8 @@ export default {
   data: () => ({
     area: null,
     mapVisible: false,
-    autocomplete: ''
+    autocomplete: '',
+    drawingActive: false
   }),
 
   methods: {
@@ -75,6 +87,7 @@ export default {
     },
 
     getArea () {
+      this.drawingActive = false
       this.$maps.endMeasurement()
       const area = Math.ceil(this.$maps.getMeasuredArea())
       if (!area) {
@@ -88,13 +101,12 @@ export default {
     useGeolocation () {
       this.autocomplete = ''
       this.$maps.geolocate()
+    },
+
+    startMeasurements () {
+      this.drawingActive = true
+      this.$maps.startMeasurements()
     }
   }
 }
 </script>
-
-<style>
-.action-link {
-  @apply font-bold underline text-blue-500 cursor-pointer;
-}
-</style>

plugins/maps.client.js

@@ -9,7 +9,7 @@ export default function ({ $config }, inject) {
 
   addScript()
 
-  inject('maps', { showMap, getMeasuredArea, endMeasurement, initAutocomplete, geolocate })
+  inject('maps', { showMap, getMeasuredArea, endMeasurement, initAutocomplete, geolocate, startMeasurements })
 
   function addScript () {
     const script = document.createElement('script')
@@ -64,10 +64,12 @@ export default function ({ $config }, inject) {
   function renderMap (canvas, lat, lng) {
     const position = new window.google.maps.LatLng(lat, lng)
     const mapOptions = {
-      zoom: 15,
+      zoom: 18,
       center: position,
       disableDefaultUI: true,
-      zoomControl: true
+      zoomControl: true,
+      mapTypeId: 'satellite',
+      tilt: 0
     }
 
     map = new window.google.maps.Map(canvas, mapOptions)
@@ -88,6 +90,10 @@ export default function ({ $config }, inject) {
     })
   }
 
+  function startMeasurements () {
+    measureTool.start()
+  }
+
   function endMeasurement () {
     measureTool.end()
   }