@kalisio/kdk 1.3.5 → 1.4.2

package/lib/map/client/components/KLocationMap.vue

@@ -1,38 +1,51 @@
 <template>
-  <q-card class="q-pa-none" :style="cardStyle">
-    <q-card-section class="fit q-pa-none">
-      <div class="fit column">
-        <div class="col-auto">
-          <q-toolbar class="q-pa-sm bg-accent text-white">
-            <k-text-area :text="location.name" />
-            <q-space />
-            <q-btn v-if="editable" icon="las la-home" flat round dense @click="refreshLocation">
-              <q-tooltip>
-                {{ $t('KLocationMap.RESTORE_BUTTON') }}
-              </q-tooltip>
-            </q-btn>
-            <q-btn icon="las la-search-location" flat round dense @click="centerMap">
-              <q-tooltip>
-                {{ $t('KLocationMap.RECENTER_BUTTON') }}
-              </q-tooltip>
-            </q-btn>
-          </q-toolbar>
-        </div>
-        <div ref="map" class="col" style="fontWeight: normal; zIndex: 0; position: relative">
-          <q-resize-observer @resize="onMapResized" />
-        </div>
-      </div>
-    </q-card-section>
-  </q-card>
+  <div class="fit column">
+    <div v-if="toolbar" class="full-width row">
+      <q-toolbar class="q-pl-sm q-pr-sm bg-accent text-white">
+        <k-text-area :text="locationName" />
+        <q-space />
+        <q-btn v-if="drawable" icon="las la-road" flat round dense @click="onStartLine">
+          <q-tooltip>
+            {{ $t('KLocationMap.DRAW_LINE') }}
+          </q-tooltip>
+        </q-btn>
+        <q-btn v-if="drawable" icon="las la-draw-polygon" flat round dense @click="onStartPolygon">
+          <q-tooltip>
+            {{ $t('KLocationMap.DRAW_POLYGON') }}
+          </q-tooltip>
+        </q-btn>
+        <q-btn v-if="editable" icon="las la-crosshairs" flat round dense @click="onGeolocate">
+          <q-tooltip>
+            {{ $t('KLocationMap.LOCATE_BUTTON') }}
+          </q-tooltip>
+        </q-btn>
+        <q-btn icon="las la-search-location" flat round dense @click="centerMap">
+          <q-tooltip>
+            {{ $t('KLocationMap.RECENTER_BUTTON') }}
+          </q-tooltip>
+        </q-btn>
+        <q-btn v-if="closable" icon="las la-times" flat round dense @click="closeMap">
+          <q-tooltip>
+            {{ $t('KLocationMap.CLOSE_BUTTON') }}
+          </q-tooltip>
+        </q-btn>
+      </q-toolbar>
+    </div>
+    <div ref="map" class="col" style="fontWeight: normal; zIndex: 0; position: relative">
+      <q-resize-observer @resize="onMapResized" />
+    </div>
+  </div>
 </template>
 
 <script>
+import _ from 'lodash'
 import L from 'leaflet'
+import centroid from '@turf/centroid'
 import { colors } from 'quasar'
 import { mixins as kCoreMixins } from '../../../core/client'
 import * as mapMixins from '../mixins/map'
 import { Geolocation } from '../geolocation'
-import { setGatewayJwt, formatUserCoordinates } from '../utils'
+import { setGatewayJwt, formatUserCoordinates, bindLeafletEvents, unbindLeafletEvents } from '../utils'
 
 export default {
   name: 'k-location-map',
@@ -47,19 +60,6 @@ export default {
         return null
       }
     },
-    editable: {
-      type: Boolean,
-      default: true
-    },
-    size: {
-      type: Object,
-      default: () => {
-        return {
-          width: 360,
-          height: 400
-        }
-      }
-    },
     mapOptions: {
       type: Object,
       default: () => {
@@ -76,72 +76,178 @@ export default {
       type: Object,
       default: () => {
         return {
-          iconClasses: 'fas fa-circle 0.75rem',
+          iconClasses: 'fas fa-circle 0.5rem',
           markerColor: colors.getBrand('primary'),
           iconColor: '#FFFFFF',
           iconXOffset: 1,
           iconYOffset: 0
         }
       }
+    },
+    editable: {
+      type: Boolean,
+      default: false
+    },
+    drawable: {
+      type: Boolean,
+      default: false
+    },
+    closable: {
+      type: Boolean,
+      default: false
+    },
+    toolbar: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      location: this.defaultLocation()
     }
   },
   computed: {
-    cardStyle () {
-      return 'width: ' + this.size.width + 'px; height:' + this.size.height + 'px;'
+    locationName () {
+      return this.location ? this.location.name : ''
     }
   },
-  data () {
-    return {
-      location: this.defaultLocation(),
-      isModified: false
+  watch: {
+    value: function () {
+      this.location = this.value
+      this.refresh()
+    },
+    editable: function () {
+      this.refresh()
+    },
+    drawable: function () {
+      this.refresh()
     }
   },
   methods: {
     defaultLocation () {
+      const latitude = this.$store.get('geolocation.position.latitude', 0)
+      const longitude = this.$store.get('geolocation.position.longitude', 0)
       return {
-        name: '',
-        latitude: this.$store.get('geolocation.position.latitude', 0),
-        longitude: this.$store.get('geolocation.position.longitude', 0)
+        name: formatUserCoordinates(latitude, longitude, this.$store.get('locationFormat', 'FFf')),
+        latitude,
+        longitude
       }
     },
     centerMap () {
-      this.center(this.location.longitude, this.location.latitude, this.mapOptions.zoom)
-    },
-    async refreshLocation () {
-      // Updated the location
-      if (this.value) {
-        this.location = this.value
+      if (this.drawLayer) {
+        this.map.fitBounds(this.drawLayer.getBounds())
       } else {
-        await Geolocation.update()
-        const position = this.$store.get('geolocation.position')
-        if (position) {
-          this.location = {
-            name: formatUserCoordinates(position.latitude, position.longitude, this.$store.get('locationFormat', 'FFf')),
-            latitude: position.latitude,
-            longitude: position.longitude
-          }
+        const longitude = (_.has(this.location, 'longitude')
+          ? _.get(this.location, 'longitude') : _.get(this.location, 'coordinates[0]'))
+        const latitude = (_.has(this.location, 'latitude')
+          ? _.get(this.location, 'latitude') : _.get(this.location, 'coordinates[1]'))
+        this.center(longitude, latitude, this.mapOptions.zoom)
+      }
+    },
+    closeMap () {
+      this.$emit('close', this.location)
+    },
+    async geolocate () {
+      await Geolocation.update()
+      const position = this.$store.get('geolocation.position')
+      if (position) {
+        this.location = {
+          name: formatUserCoordinates(position.latitude, position.longitude, this.$store.get('locationFormat', 'FFf')),
+          latitude: position.latitude,
+          longitude: position.longitude
         }
       }
-      // Center the map
-      this.centerMap()
-      // Updated the marker
-      if (!this.marker) {
-        this.marker = L.marker([this.location.latitude, this.location.longitude], {
-          icon: L.icon.fontAwesome(this.markerStyle),
-          draggable: this.editable
-        })
-        this.marker.addTo(this.map)
-        if (this.editable) this.marker.on('drag', this.onLocationDragged)
-      } else {
-        this.marker.setLatLng([this.location.latitude, this.location.longitude])
+    },
+    clear () {
+      if (this.marker) {
+        this.marker.off('drag', this.onLocationDragged)
+        this.marker.removeFrom(this.map)
+        this.marker = null
       }
-      this.isModified = false
+      if (this.drawLayer) {
+        this.map.removeLayer(this.drawLayer)
+        this.drawLayer = null
+      }
+      this.map.pm.disableDraw()
+      unbindLeafletEvents(this.map, ['pm:create'])
+      this.map.pm.setGlobalOptions({ layerGroup: null })
+    },
+    refresh () {
+      this.clear()
+      // No location ?
+      const hasLongitude = _.has(this.location, 'longitude')
+      const hasLatitude = _.has(this.location, 'latitude')
+      const hasGeometry = _.has(this.location, 'coordinates')
+      if (hasGeometry || (hasLongitude && hasLatitude)) {
+        // No default marker in draw mode
+        if (this.drawable && !hasGeometry) return
+        // GeoJson geometry or simple location ?
+        if (_.has(this.location, 'type') && (_.get(this.location, 'type') !== 'Point')) {
+          this.drawLayer = L.geoJson({ type: 'Feature', geometry: this.location })
+          this.map.addLayer(this.drawLayer)
+        } else {
+          const longitude = (hasLongitude
+            ? _.get(this.location, 'longitude') : _.get(this.location, 'coordinates[0]'))
+          const latitude = (hasLatitude
+            ? _.get(this.location, 'latitude') : _.get(this.location, 'coordinates[1]'))
+
+          this.marker = L.marker([latitude, longitude], {
+            icon: L.icon.fontAwesome(this.markerStyle),
+            draggable: this.editable,
+            pmIgnore: true
+          })
+          this.marker.addTo(this.map)
+          if (this.editable) this.marker.on('drag', this.onLocationDragged)
+        }
+
+        // Center the map
+        this.centerMap()
+      }
+    },
+    async onGeolocate () {
+      await this.geolocate()
+      this.refresh()
     },
     onLocationDragged () {
       this.location.name = formatUserCoordinates(this.marker.getLatLng().lat, this.marker.getLatLng().lng, this.$store.get('locationFormat', 'FFf'))
-      this.location.latitude = this.marker.getLatLng().lat
-      this.location.longitude = this.marker.getLatLng().lng
-      this.isModified = true
+      if (_.has(this.location, 'type') && (_.get(this.location, 'type') === 'Point')) {
+        _.set(this.location, 'coordinates[0]', this.marker.getLatLng().lng)
+        _.set(this.location, 'coordinates[1]', this.marker.getLatLng().lat)
+      } else {
+        this.location.longitude = this.marker.getLatLng().lng
+        this.location.latitude = this.marker.getLatLng().lat
+      }
+      this.$emit('input', this.location)
+    },
+    startDraw (shape) {
+      // Clear any previous edition
+      this.clear()
+      this.drawLayer = L.geoJson()
+      this.map.addLayer(this.drawLayer)
+      this.map.pm.setGlobalOptions({ layerGroup: this.drawLayer })
+      this.map.pm.enableDraw(shape, {
+        snappable: true,
+        snapDistance: 20
+      })
+      bindLeafletEvents(this.map, ['pm:create'], this)
+    },
+    stopDraw () {
+      const geoJson = this.drawLayer.toGeoJSON()
+      // The location is the feature geometry
+      const feature = _.get(geoJson, 'features[0]', {})
+      this.location = feature.geometry
+      // Compatibility with GPS-based localization
+      const location = centroid(feature)
+      this.location.name = formatUserCoordinates(
+        _.get(location, 'geometry.coordinates[1]'), _.get(location, 'geometry.coordinates[0]'),
+        this.$store.get('locationFormat', 'FFf'))
+      this.$emit('input', this.location)
+    },
+    onStartLine () {
+      this.startDraw('Line')
+    },
+    onStartPolygon () {
+      this.startDraw('Polygon')
     },
     async refreshBaseLayer () {
       const catalogService = this.$api.getService('catalog', '')
@@ -159,25 +265,34 @@ export default {
       this.refreshMap()
     }
   },
-  created () {
+  beforeCreate () {
     // Load the required components
     this.$options.components['k-text-area'] = this.$load('frame/KTextArea')
   },
   async mounted () {
+    // Initialize component
+    this.location = this.value
+    if (!this.location) await this.geolocate()
     await this.loadRefs()
     this.setupMap(this.$refs.map, this.mapOptions)
     await this.refreshBaseLayer()
-    this.refreshLocation()
+    this.refresh()
     this.$events.$emit('map-ready')
+    this.$on('pm:create', this.stopDraw)
   },
-  destroyed () {
-    if (this.isModified) this.$emit('input', this.location)
+  beforeDestroy () {
+    this.$off('pm:create', this.stopDraw)
+    this.clear()
   }
 }
 </script>
 
 <style>
+  .leaflet-fa-markers {
+    width: 15px;
+    height: 25px;
+  }
   .leaflet-fa-markers .feature-icon {
-      font-size: 14px;
+    font-size: 14px;
   }
 </style>

package/lib/map/client/components/KPositionIndicator.vue

@@ -81,6 +81,7 @@ export default {
 
 <style lang="stylus">
  .position-indicator {
+    pointer-events: none;
     border-radius: 50%;
     background-color: #00000020
  }

package/lib/map/client/components/KTimeline.vue

@@ -13,7 +13,7 @@
           <q-date v-model="date" :mask="calendarDateMask" today-btn minimal />
         </q-popup-proxy>
       </q-btn>
-      <q-chip :label="kActivity.formatTime('date.long', time) + ' ' + kActivity.formatTime('time.long', time)" color="primary" text-color="white" :dense="$q.screen.lt.sm" />
+      <q-chip :label="formatTime(time, 'date.long') + ' ' + formatTime(time, 'time.long')" color="primary" text-color="white" :dense="$q.screen.lt.sm" />
       <q-btn id="timeline-now" dense flat round icon="las la-clock" size="md" color="primary" @click="onNowClicked">
         <q-tooltip>{{$t('KTimeline.SET_NOW')}}</q-tooltip>
         <q-badge v-if="timer !== undefined" floating transparent color="green">
@@ -71,7 +71,7 @@
             :label="day.label"
             clickable @click="onDayClicked(index, days.length)" />
         </template>
-        <q-btn id="timeline-next-day" dense flat round icon='las la-calendar-plus'  color="primary" @click="onNextDayClicked">
+        <q-btn id="timeline-next-day" dense flat round icon='las la-calendar-plus' color="primary" @click="onNextDayClicked">
           <q-tooltip>{{$t('KTimeline.NEXT_DAY')}}</q-tooltip>
         </q-btn>
       </div>
@@ -82,26 +82,31 @@
 <script>
 import logger from 'loglevel'
 import moment from 'moment'
+import { Time } from '../../../core/client/time'
 
 export default {
   name: 'k-timeline',
   inject: ['kActivity'],
   data () {
     return {
-      timeline: this.$store.get('timeline'),
       timer: undefined,
       time: moment.utc(),
-      calendarDateMask: 'YYYY-MM-DD'
+      calendarDateMask: 'YYYY-MM-DD',
+      // Make this reactive
+      timeSettings: Time.get()
     }
   },
   computed: {
+    step () {
+      // For now we do not handle step > 60 minutes
+      return Math.min(this.timeSettings.step, 60)
+    },
     minutes () {
       const minutes = []
-      const step = this.getStep()
-      if (step < 60) {
+      if (this.step < 60) {
         const start = moment.utc(this.time).minute(0)
         const end = moment.utc(this.time).minute(59)
-        for (let m = moment.utc(start); m.isBefore(end); m.add(step, 'm')) {
+        for (let m = moment.utc(start); m.isBefore(end); m.add(this.step, 'm')) {
           minutes.push({
             label: m.minute().toString().padStart(2, 0),
             color: m.isSame(this.time, 'minute') ? 'primary' : 'grey-7',
@@ -122,7 +127,7 @@ export default {
       const end = moment.utc(this.time).add((size + 1), 'hour')
       for (let h = moment.utc(start); h.isBefore(end); h.add(1, 'h')) {
         hours.push({
-          label: this.kActivity.formatTime('time.short', h),
+          label: Time.format(h, 'time.short'),
           class: 'col k-timeline-hour-frame text-caption ' + (h.isSame(this.time, 'hour') ? 'k-timeline-hour-selected' : '')
         })
       }
@@ -139,7 +144,7 @@ export default {
       const end = moment.utc(this.time).add(size + 1, 'day')
       for (let d = moment.utc(start); d.isBefore(end); d.add(1, 'd')) {
         days.push({
-          label: this.kActivity.formatTime('date.short', d),
+          label: Time.format(d, 'date.short'),
           color: d.isSame(this.time, 'date') ? 'primary' : this.monthColors[d.month()],
           textColor: d.isSame(this.time, 'date') ? 'white' : 'black'
         })
@@ -148,13 +153,13 @@ export default {
     },
     date: {
       get: function () {
-        return this.kActivity.currentTimeFormat.utc
+        return Time.getFormat().utc
           ? this.time.format(this.calendarDateMask)
           : moment(this.time).local().format(this.calendarDateMask)
       },
       set: function (value) {
         let time
-        if (this.kActivity.currentTimeFormat.utc) {
+        if (Time.getFormat().utc) {
           time = moment.utc(value, this.calendarDateMask)
           time.hour(this.time.hour())
           time.minute(this.time.minute())
@@ -170,9 +175,8 @@ export default {
     }
   },
   methods: {
-    getStep () {
-      // For now we do not handle step > 60 minutes
-      return Math.min(this.timeline.step, 60)
+    formatTime (time, format) {
+      return Time.format(time, format)
     },
     startTimeLoop () {
       this.setTime(moment.utc())
@@ -180,9 +184,9 @@ export default {
         const now = moment.utc()
         if (!this.time.isSame(now, 'minute')) {
           this.time = now
-          this.kActivity.$off('current-time-changed', this.onTimeChanged)
-          this.kActivity.setCurrentTime(this.time)
-          this.kActivity.$on('current-time-changed', this.onTimeChanged)
+          this.$events.$off('time-current-time-changed', this.onTimeChanged)
+          Time.setCurrentTime(this.time)
+          this.$events.$on('time-current-time-changed', this.onTimeChanged)
         }
       }, 15 * 1000)
     },
@@ -201,28 +205,28 @@ export default {
       }
       if (this.timer) this.stopTimeLoop()
       this.time = time.clone()
-      this.kActivity.$off('current-time-changed', this.onTimeChanged)
-      if (propagate) this.kActivity.setCurrentTime(moment.utc(time))
-      this.kActivity.$on('current-time-changed', this.onTimeChanged)
+      this.$events.$off('time-current-time-changed', this.onTimeChanged)
+      if (propagate) Time.setCurrentTime(moment.utc(time))
+      this.$events.$on('time-current-time-changed', this.onTimeChanged)
     },
     onPreviousStepClicked () {
-      let minutesToSubtract = this.getStep()
-      const remainder = (this.time.minute() + this.time.hour() * 60) % this.getStep()
+      let minutesToSubtract = this.step
+      const remainder = (this.time.minute() + this.time.hour() * 60) % this.step
       if (remainder > 0) {
         minutesToSubtract = remainder
       }
       this.setTime(this.time.subtract(minutesToSubtract, 'minute'))
     },
     onNextStepClicked () {
-      let minutesToAdd = this.getStep()
-      const remainder = (this.time.minute() + this.time.hour() * 60) % this.getStep()
+      let minutesToAdd = this.step
+      const remainder = (this.time.minute() + this.time.hour() * 60) % this.step
       if (remainder > 0) {
-        minutesToAdd = this.getStep() - remainder
+        minutesToAdd = this.step - remainder
       }
       this.setTime(this.time.add(minutesToAdd, 'minute'))
     },
     onMinutesClicked (index) {
-      this.setTime(this.time.minute(index * this.getStep()))
+      this.setTime(this.time.minute(index * this.step))
     },
     onHourClicked (index, length) {
       this.setTime(this.time.add((index - Math.trunc(length / 2)), 'hour'))
@@ -246,7 +250,8 @@ export default {
       this.startTimeLoop()
     },
     onTimeChanged (time) {
-      this.setTime(time, false)
+      // When updating settings the root time object is sent instead of just the current time
+      this.setTime(time.currentTime || time, false)
     }
   },
   created () {
@@ -257,22 +262,22 @@ export default {
     // Define the actions
     this.actions = {
       mobile: [
-        { id: 'previous-day', icon: 'las la-calendar-minus', label: this.$t('KTimeline.PREVIOUS_DAY'), handler: this.onPreviousDayClicked },
-        { id: 'previous-hour', icon: 'las la-angle-left', label: this.$t('KTimeline.PREVIOUS_HOUR'), handler: this.onPreviousHourClicked },
-        { id: 'previous-step', icon: 'las la-step-backward', label: this.$t('KTimeline.PREVIOUS_STEP'), handler: this.onPreviousStepClicked },
-        { id: 'next-step', icon: 'las la-step-forward', label: this.$t('KTimeline.NEXT_STEP'), handler: this.onNextStepClicked },
-        { id: 'next-hour', icon: 'las la-angle-right', label: this.$t('KTimeline.NEXT_HOUR'), handler: this.onNextHourClicked },
-        { id: 'next-day', icon: 'las la-calendar-plus', label: this.$t('KTimeline.NEXT_DAY'), handler: this.onNextDayClicked }
+        { id: 'previous-day', icon: 'las la-calendar-minus', tooltip: this.$t('KTimeline.PREVIOUS_DAY'), handler: this.onPreviousDayClicked },
+        { id: 'previous-hour', icon: 'las la-angle-left', tooltip: this.$t('KTimeline.PREVIOUS_HOUR'), handler: this.onPreviousHourClicked },
+        { id: 'previous-step', icon: 'las la-step-backward', tooltip: this.$t('KTimeline.PREVIOUS_STEP'), handler: this.onPreviousStepClicked },
+        { id: 'next-step', icon: 'las la-step-forward', tooltip: this.$t('KTimeline.NEXT_STEP'), handler: this.onNextStepClicked },
+        { id: 'next-hour', icon: 'las la-angle-right', tooltip: this.$t('KTimeline.NEXT_HOUR'), handler: this.onNextHourClicked },
+        { id: 'next-day', icon: 'las la-calendar-plus', tooltip: this.$t('KTimeline.NEXT_DAY'), handler: this.onNextDayClicked }
       ]
     }
   },
   mounted () {
-    this.kActivity.$on('current-time-changed', this.onTimeChanged)
+    this.$events.$on('time-current-time-changed', this.onTimeChanged)
     // Set the time
-    this.setTime(this.kActivity.currentTime, false)
+    this.setTime(Time.getCurrentTime(), false)
   },
   beforeDestroy () {
-    this.kActivity.$off('current-time-changed', this.onTimeChanged)
+    this.$events.$off('time-current-time-changed', this.onTimeChanged)
   }
 }
 </script>

package/lib/map/client/components/KUrlLegend.vue

@@ -25,7 +25,7 @@ export default {
     onLegendClick (index) {
       this.legends[index].visible = !this.legends[index].visible
     },
-    async tryAddLegend (layer) {
+    async getLegend (layer) {
       let legendUrl = _.get(layer, 'legendUrl')
       if (!legendUrl) {
         // no legend on layer, try to fetch legend in case of WMS layer
@@ -49,32 +49,35 @@ export default {
 
       // make sure server answers the request before using it
       if (legendUrl) {
-        let visible = false
         try {
           const response = await fetch(legendUrl)
-          visible = response.ok
           // additional check for funny servers answering with empty body ...
-          if (visible) {
+          if (response.ok) {
             const asBlob = await response.blob()
-            visible = asBlob ? asBlob.size > 0 : false
-          }
-          if (visible) {
-            // make sure layer is still visible since it may have been hidden in the meantime ...
-            if (this.kActivity.isLayerVisible(layer.name)) {
-              this.urlLegendLayers[layer._id] = legendUrl
-              this.legends.push({
-                src: legendUrl,
-                layer: layer.name,
-                visible: true
-              })
-            }
+            if (asBlob.size === 0) legendUrl = null
           }
         } catch (error) {
+          legendUrl = null
+        }
+      }
+
+      return legendUrl
+    },
+    async tryAddLegend (layer) {
+      const legendUrl = await this.getLegend(layer)
+      if (legendUrl) {
+        // make sure layer is still visible since it may have been hidden in the meantime ...
+        if (this.kActivity.isLayerVisible(layer.name)) {
+          this.legends.push({
+            src: legendUrl,
+            layer: layer.name,
+            visible: true
+          })
         }
       }
     },
-    tryRemoveLegend (layer) {
-      const legendUrl = this.urlLegendLayers[layer._id]
+    async tryRemoveLegend (layer) {
+      const legendUrl = await this.getLegend(layer)
       if (legendUrl) {
         const index = this.legends.findIndex((legend) => legend.src === legendUrl)
         this.legends.splice(index, 1)
@@ -88,7 +91,6 @@ export default {
     }
   },
   mounted () {
-    this.urlLegendLayers = {}
     this.kActivity.$on('layer-shown', this.onShowLayer)
     this.kActivity.$on('layer-hidden', this.onHideLayer)