@kalisio/kdk 1.5.0 → 1.7.0

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

@@ -153,24 +153,22 @@ export default {
     },
     date: {
       get: function () {
-        return Time.getFormat().utc
-          ? this.time.format(this.calendarDateMask)
+        // Assume locale if timezone not provided
+        return Time.getFormatTimezone()
+          ? moment(this.time).tz(Time.getFormatTimezone()).format(this.calendarDateMask)
           : moment(this.time).local().format(this.calendarDateMask)
       },
       set: function (value) {
         let time
-        if (Time.getFormat().utc) {
-          time = moment.utc(value, this.calendarDateMask)
-          time.hour(this.time.hour())
-          time.minute(this.time.minute())
+        // Assume locale if timezone not provided
+        if (Time.getFormatTimezone()) {
+          time = moment.tz(value, this.calendarDateMask, Time.getFormatTimezone())
         } else {
           time = moment(value, this.calendarDateMask)
-          const localTime = moment(this.time.valueOf())
-          time.hour(localTime.hour())
-          time.minute(localTime.minute())
-          time = moment.utc(time)
         }
-        this.setTime(time)
+        time.hour(this.time.hour())
+        time.minute(this.time.minute())
+        this.setTime(moment.utc(time))
       }
     }
   },
@@ -181,14 +179,11 @@ export default {
     startTimeLoop () {
       this.setTime(moment.utc())
       this.timer = setInterval(() => {
-        const now = moment.utc()
-        if (!this.time.isSame(now, 'minute')) {
-          this.time = now
-          this.$events.$off('time-current-time-changed', this.onTimeChanged)
-          Time.setCurrentTime(this.time)
-          this.$events.$on('time-current-time-changed', this.onTimeChanged)
-        }
-      }, 15 * 1000)
+        this.time = moment.utc()
+        this.$events.$off('time-current-time-changed', this.onTimeChanged)
+        Time.setCurrentTime(this.time)
+        this.$events.$on('time-current-time-changed', this.onTimeChanged)
+      }, 1000 * this.timeSettings.interval)
     },
     stopTimeLoop () {
       clearInterval(this.timer)
@@ -282,27 +277,27 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="scss">
   .k-timeline {
-    background: #ffffff
-    border: solid 1px lightgrey
-    border-radius: 5px
-    width: 60vw
+    background: #ffffff;
+    border: solid 1px lightgrey;
+    border-radius: 5px;
+    width: 60vw;
   }
   .k-timeline:hover {
-    border: solid 1px $primary
-    cursor: mouse
+    border: solid 1px $primary;
+    cursor: mouse;
   }
   .k-timeline-control {
-    padding: 5px
-    border-bottom: solid 1px lightgrey
+    padding: 5px;
+    border-bottom: solid 1px lightgrey;
   }
   .k-timeline-hour-frame {
-    border-bottom: solid 5px $grey-5
-    border-left: solid 1px white
-    border-right: solid 1px white
-    text-align: center
-    vertical-align: middle
+    border-bottom: solid 5px $grey-5;
+    border-left: solid 1px white;
+    border-right: solid 1px white;
+    text-align: center;
+    vertical-align: middle;
     user-select: none; /* supported by Chrome and Opera */
     -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
@@ -310,9 +305,9 @@ export default {
     -ms-user-select: none; /* Internet Explorer/Edge */
   }
   .k-timeline-hour-selected {
-    border-bottom: solid 5px $primary
+    border-bottom: solid 5px $primary;
   }
   .k-timeline-hour-frame:hover {
-    border-bottom: solid 5px $primary
+    border-bottom: solid 5px $primary;
   }
 </style>

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

@@ -0,0 +1,156 @@
+<template>
+  <div ref="map" class="col" style="fontWeight: normal; zIndex: 0; position: relative">
+    <q-resize-observer @resize="onMapResized" />
+  </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import L from 'leaflet'
+import { colors } from 'quasar'
+import { mixins as kCoreMixins, utils as kCoreUtils } from '../../../core/client'
+import * as mapMixins from '../mixins/map'
+import * as kMapMixins from '../mixins'
+import { setGatewayJwt } from '../utils'
+import meta from 'moment-timezone/data/meta/latest.json'
+
+// Convert timezones to GeoJson
+const timezones = _.values(meta.zones).map(timezone => ({
+  type: 'Feature',
+  geometry: {
+    type: 'Point',
+    coordinates: [timezone.long, timezone.lat]
+  },
+  properties: {
+    name: timezone.name
+  }
+}))
+
+export default {
+  name: 'k-timezone-map',
+  mixins: [
+    kCoreMixins.refsResolver(['map']),
+    kMapMixins.style,
+    mapMixins.baseMap,
+    mapMixins.geojsonLayers,
+    mapMixins.style,
+    mapMixins.tooltip
+  ],
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      timezone: ''
+    }
+  },
+  watch: {
+    value: function () {
+      this.setTimezone(this.value)
+    }
+  },
+  methods: {
+    setTimezone (timezone) {
+      // If empty need to initialize
+      if (timezone && (timezone === this.timezone)) return
+      // Check if input time zone has a location
+      timezone = _.get(meta, 'zones.' + timezone, {})
+      this.timezone = _.get(timezone, 'name', '')
+      this.refreshTimezonesLayer()
+      if (this.timezone) {
+        this.center(timezone.long, timezone.lat, this.map.getZoom())
+      }
+    },
+    async refreshBaseLayer () {
+      const catalogService = this.$api.getService('catalog', '')
+      // Get first visible base layer
+      const response = await catalogService.find({ query: { type: 'BaseLayer', 'leaflet.isVisible': true } })
+      if (response.data.length > 0) {
+        const baseLayer = response.data[0]
+        // Do we need to inject a token ?
+        const gatewayToken = this.$api.get('storage').getItem(this.$config('gatewayJwt'))
+        if (gatewayToken) setGatewayJwt([baseLayer], gatewayToken)
+        this.addLayer(baseLayer)
+      }
+    },
+    getTimezoneMarker (feature, latlng) {
+      const isSelected = (this.timezone === feature.properties.name)
+      return this.createMarkerFromStyle(latlng,
+        this.convertFromSimpleStyleSpec({
+          'marker-type': 'circleMarker',
+          radius: isSelected ? 8 : 5,
+          'stroke-color': colors.getBrand('primary'),
+          'stroke-opacity': isSelected ? 1 : 0,
+          'fill-opacity': 0.5,
+          'fill-color': isSelected ? colors.getBrand('secondary') : colors.getBrand('primary')
+        })
+      )
+    },
+    getTimezoneTooltip (feature, layer) {
+      const name = _.get(feature, 'properties.name')
+      let tooltip
+      if (name) {
+        const isSelected = (this.timezone === name)
+        tooltip = L.tooltip({ permanent: isSelected }, layer)
+        tooltip.setContent(kCoreUtils.getTimezoneLabel(name))
+      }
+      return tooltip
+    },
+    async refreshTimezonesLayer () {
+      const layer = this.getLayerByName('Timezones')
+      if (!layer) {
+        await this.addLayer({
+          name: 'Timezones',
+          type: 'OverlayLayer',
+          featureId: 'name',
+          leaflet: {
+            type: 'geoJson',
+            isVisible: true,
+            realtime: true
+          }
+        })
+      }
+      this.updateLayer('Timezones', { type: 'FeatureCollection', features: timezones })
+    },
+    async onMapResized (size) {
+      this.refreshMap()
+    },
+    onTimezoneSelected (layer, event) {
+      const feature = _.get(event, 'target.feature')
+      if (feature) {
+        const timezone = _.get(feature, 'properties.name')
+        this.setTimezone(timezone)
+        this.$emit('timezone-selected', timezone)
+      }
+    }
+  },
+  created () {
+    this.registerStyle('markerStyle', this.getTimezoneMarker)
+    this.registerStyle('tooltip', this.getTimezoneTooltip)
+    this.$on('click', this.onTimezoneSelected)
+  },
+  async mounted () {
+    // Initialize component
+    await this.loadRefs()
+    this.setupMap(this.$refs.map, {
+      maxBounds: [[-90, -180], [90, 180]],
+      maxBoundsViscosity: 0.25,
+      minZoom: 3,
+      maxZoom: 6,
+      zoom: 3,
+      center: [0, 0],
+      scale: false,
+      geolocate: false
+    })
+    await this.refreshBaseLayer()
+    this.setTimezone(this.value)
+    this.$events.$emit('map-ready')
+  },
+  beforeDestroy () {
+    this.$off('click', this.onTimezoneSelected)
+  }
+}
+</script>

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

@@ -108,14 +108,15 @@ export default {
 }
 </script>
 
-<style lang="stylus">
-.k-url-legend-container
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-
-.k-url-legend-item
-  text-overflow: ellipsis;
-  cursor: pointer;
-  background-color: rgba(255, 255, 255, 0.5);
+<style lang="scss">
+  .k-url-legend-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .k-url-legend-item {
+    text-overflow: ellipsis;
+    cursor: pointer;
+    background-color: rgba(255, 255, 255, 0.5);
+  }
 </style>

package/lib/map/client/components/catalog/KAddLayer.vue

@@ -4,8 +4,9 @@
     :title="$t('KAddLayer.TITLE')"
     v-model="isModalOpened"
     @opened="$emit('opened')"
-    @closed="$emit('closed')">
-    <div slot="modal-content">
+    @closed="$emit('closed')"
+  >
+    <div>
       <q-tabs  align="justify" v-model="mode" inverted>
         <q-tab id="import-layer" name="import" icon="las la-desktop" />
         <q-tab id="connect-layer" name="connect" icon="las la-plug" />

package/lib/map/client/components/catalog/KBaseLayersSelector.vue

@@ -95,7 +95,7 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style lang="scss">
 .k-layer-card:hover {
   cursor: pointer;
 }

package/lib/map/client/components/catalog/KCatalogLayersPanel.vue

@@ -0,0 +1,56 @@
+<template>
+  <k-layers-panel
+    :layers="filteredLayers"
+    :layerCategories="filteredCategories"
+    :forecastModels="forecastModels"
+    :forecastModelHandlers="forecastModelHandlers"
+    :forecastModel="forecastModel" />
+</template>
+
+<script>
+import _ from 'lodash'
+
+export default {
+  name: 'k-catalog-layers-panel',
+  props: {
+    layers: {
+      type: Object,
+      default: () => {}
+    },
+    layerCategories: {
+      type: Array,
+      default: () => []
+    },
+    forecastModels: {
+      type: Array,
+      default: () => []
+    },
+    forecastModelHandlers: {
+      type: Object,
+      default: () => {}
+    },
+    forecastModel: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  computed: {
+    filteredLayers () {
+      return _.filter(this.layers, layer => {
+        const scope = _.get(layer, 'scope', '')
+        const filter = ['user', 'system', 'activity']
+        return !filter.includes(scope)
+      })
+    },
+    filteredCategories () {
+      return _.filter(this.layerCategories, category => {
+        return !_.has(category, '_id')
+      })
+    }
+  },
+  beforeCreate () {
+    // Load the required components
+    this.$options.components['k-layers-panel'] = this.$load('catalog/KLayersPanel')
+  }
+}
+</script>

package/lib/map/client/components/catalog/KCreateView.vue

@@ -0,0 +1,91 @@
+<template>
+  <k-modal
+    id="add-view-modal"
+    :title="$t(getSchema().title)"
+    :buttons="getButtons()"
+    v-model="isModalOpened"
+    @opened="$emit('opened')"
+    @closed="$emit('closed')"
+  >
+    <k-form ref="form" :schema="getSchema()" />
+  </k-modal>
+</template>
+
+<script>
+import mixins from '../../../../core/client/mixins'
+
+export default {
+  name: 'k-add-view',
+  mixins: [mixins.baseModal],
+  inject: ['kActivity'],
+  data () {
+    return {
+      creating: false
+    }
+  },
+  methods: {
+    getButtons () {
+      return [
+        { id: 'cancel-button', label: 'CANCEL', renderer: 'form-button', outline: true, handler: () => this.closeModal() },
+        { id: 'apply-button', label: 'CREATE', renderer: 'form-button', loading: this.creating, handler: () => this.apply() }
+      ]
+    },
+    getSchema () {
+      return {
+        $schema: 'http://json-schema.org/draft-06/schema#',
+        $id: 'http://www.kalisio.xyz/schemas/favorite-view.create.json#',
+        title: 'schemas.CREATE_VIEW_TITLE',
+        description: 'Map view creation schema',
+        type: 'object',
+        properties: {
+          name: {
+            type: 'string',
+            maxLength: 128,
+            minLength: 3,
+            field: {
+              component: 'form/KTextField',
+              label: 'schemas.CREATE_VIEW_NAME_FIELD_LABEL'
+            }
+          },
+          description: {
+            type: 'string',
+            maxLength: 256,
+            field: {
+              component: 'form/KTextField',
+              label: 'schemas.CREATE_VIEW_DESCRIPTION_FIELD_LABEL'
+            }
+          },
+          layers: {
+            type: 'boolean',
+            default: false,
+            field: {
+              component: 'form/KToggleField',
+              label: 'schemas.CREATE_VIEW_LAYERS_FIELD_LABEL'
+            }
+          }
+        },
+        required: ['name']
+      }
+    },
+    async apply () {
+      const result = this.$refs.form.validate()
+      if (result.isValid) {
+        const view = result.values
+        try {
+          this.creating = true
+          await this.kActivity.saveContext(view)
+          this.creating = false
+          this.closeModal()
+        } catch (error) {
+          this.creating = false
+          throw error
+        }
+      }
+    }
+  },
+  beforeCreate () {
+    this.$options.components['k-modal'] = this.$load('frame/KModal')
+    this.$options.components['k-form'] = this.$load('form/KForm')
+  }
+}
+</script>

package/lib/map/client/components/catalog/KLayerCategories.vue

@@ -7,8 +7,9 @@
     :buttons="buttons"
     v-model="isModalOpened"
     @opened="$emit('opened')"
-    @closed="$emit('closed')">
-    <div slot="modal-content" id="layer-categories-content">
+    @closed="$emit('closed')"
+  >
+    <div id="layer-categories-content">
       <q-card-section id="layer-categories-list" v-if="mode === 'list'">
         <k-list
           style="min-height: 50px; min-width: 200px"
@@ -46,7 +47,8 @@ export default {
   },
   computed: {
     baseQuery () {
-      return Object.assign({ type: 'Category' }, this.sorter.query)
+      // Built-in categories do not have _id
+      return Object.assign({ type: 'Category', _id: { $exists: true } }, this.sorter.query)
     },
     title () {
       if (this.mode === 'add') {

package/lib/map/client/components/catalog/{KCatalog.vue → KLayersPanel.vue}

@@ -1,5 +1,5 @@
 <template>
-  <q-scroll-area :style="computedStyle">
+  <k-scroll-area :maxHeight="scrollAreaMaxHeight" :style="panelStyle">
     <q-list dense bordered>
       <slot name="header" />
       <k-layers-selector
@@ -21,24 +21,27 @@
             :forecastModels="forecastModels"
             :forecastModelHandlers="forecastModelHandlers"
             :forecastModel="forecastModel"
-            :options="category.options || category"></component>
+            :options="category.options || category">
+          </component>
         </q-expansion-item>
       </template>
       <slot name="footer" />
     </q-list>
-  </q-scroll-area>
+  </k-scroll-area>
 </template>
 
 <script>
 import sift from 'sift'
 import _ from 'lodash'
 import path from 'path'
+import { catalogPanel } from '../../mixins'
 
 export default {
-  name: 'k-catalog',
+  name: 'k-layers-panel',
+  mixins: [catalogPanel],
   props: {
     layers: {
-      type: Object,
+      type: Array,
       default: () => {}
     },
     layerCategories: {
@@ -59,19 +62,19 @@ export default {
     }
   },
   watch: {
-    layerCategories: function () {
-      // Make configured categories reactive as catalog categoriess are built from
-      this.categorize()
+    layers: {
+      handler () {
+        this.categorize()
+      }
+    },
+    layerCategories: {
+      handler () {
+        this.categorize()
+      }
     }
   },
   computed: {
-    computedStyle () {
-      if (this.$q.screen.lt.md) return 'height: 65vh; min-width: 300px;'
-      if (this.$q.screen.lt.lg) return 'height: 70vh; min-width: 350px;'
-      return 'height: 75vh; min-width: 400px;'
-    },
     layersByCategory () {
-      const layers = _.values(this.layers)
       const layersByCategory = {}
       _.forEach(this.layerCategories, category => {
         // Built-in categories use filtering while user-defined ones use layers list
@@ -82,17 +85,14 @@ export default {
           filter = { name: { $in: _.get(category, 'layers') } }
         }
         // If the list of layers in category is empty we can have a null filter
-        layersByCategory[category.name] = filter ? _.remove(layers, sift(filter)) : []
+        layersByCategory[category.name] = filter ? _.remove(this.layers, sift(filter)) : []
       })
       return layersByCategory
     },
     orphanLayers () {
       // Filters system layers
-      const layers = _.values(_.filter(this.layers, layer => {
-        return _.get(layer, 'scope', '') !== 'system'
-      }))
       const categories = _.flatten(_.values(this.layersByCategory))
-      return _.difference(layers, categories)
+      return _.difference(this.layers, categories)
     }
   },
   methods: {
@@ -120,7 +120,7 @@ export default {
       return false
     },
     categorize () {
-      this.layerCategories.forEach(category => {
+      _.forEach(this.layerCategories, category => {
         const component = _.get(category, 'component', 'catalog/KLayersSelector')
         const componentKey = _.kebabCase(path.basename(component))
         category.componentKey = componentKey
@@ -128,10 +128,11 @@ export default {
       })
     }
   },
-  created () {
+  beforeCreate () {
     // Load the required components
-    this.$options.components['k-panel'] = this.$load('frame/KPanel')
     this.$options.components['k-layers-selector'] = this.$load('catalog/KLayersSelector')
+  },
+  created () {
     // Categorize layers
     this.categorize()
   }

package/lib/map/client/components/catalog/KLayersSelector.vue

@@ -22,11 +22,11 @@
             </q-tooltip>
           </div>
           <q-space />
-          <q-icon name="las la-exclamation-circle" size="md" color="warning" v-if="layer.isDisabled">
+          <q-icon name="las la-exclamation-circle" size="sm" color="warning" v-if="layer.isDisabled">
             <q-tooltip>{{ $t('KLayersSelector.LAYER_DISABLED') }}</q-tooltip>
           </q-icon>
           <!-- Layer toggle -->
-          <q-toggle :value="layer.isVisible" :disable="layer.isDisabled" @input="onLayerClicked(layer)"/>
+          <q-toggle :value="layer.isVisible" :disable="layer.isDisabled" size="sm" @input="onLayerClicked(layer)" />
           <!-- Layer actions -->
           <k-panel
             :id="`${layer.name}-actions`"
@@ -37,7 +37,7 @@
         </div>
       </template>
     </div>
-    <div v-else-if="!options.hideIfEmpty" class="row justify-center q-pb-sm">
+    <div v-else-if="!options.hideIfEmpty" class="row justify-center q-pa-sm">
       <k-stamp icon="las la-exclamation-circle" icon-size="sm" :text="$t('KLayersSelector.NO_LAYER_AVAILABLE')" direction="horizontal" />
     </div>
     <slot name="footer" />

package/lib/map/client/components/catalog/KUserLayersPanel.vue

@@ -0,0 +1,40 @@
+<template>
+  <k-layers-panel
+    :layers="filteredLayers"
+    :layerCategories="filteredCategories" />
+</template>
+
+<script>
+import _ from 'lodash'
+
+export default {
+  name: 'k-users-layers-panel',
+  props: {
+    layers: {
+      type: Object,
+      default: () => {}
+    },
+    layerCategories: {
+      type: Array,
+      default: () => []
+    }
+  },
+  computed: {
+    filteredLayers () {
+      return _.filter(this.layers, layer => {
+        const scope = _.get(layer, 'scope', '')
+        return scope === 'user' || scope === 'activity'
+      })
+    },
+    filteredCategories () {
+      return _.filter(this.layerCategories, category => {
+        return _.has(category, '_id')
+      })
+    }
+  },
+  beforeCreate () {
+    // Load the required components
+    this.$options.components['k-layers-panel'] = this.$load('catalog/KLayersPanel')
+  }
+}
+</script>