@kalisio/kdk 2.4.1 → 2.5.2

package/extras/configs/helpers.js

@@ -0,0 +1,78 @@
+module.exports = {
+  verticalSeparator: (options) => {
+    // color: color to be used. Default to `grey-4`
+    return Object.assign({
+      component: 'QSeparator',
+      vertical: true,
+      color: 'grey-4',
+      style: 'margin-left: 2px; margin-right: 2px;'
+    }, options)
+  },
+  horizontalSeparator: (options) => {
+    // color: color to be used. Default to `grey-4`
+    return Object.assign({
+      component: 'QSeparator',
+      color: 'grey-4',
+      class: 'full-width',
+      style: 'min-height: 1px;'
+    }, options)
+  },
+  leftPane: (options) => {
+    // component: component to be used to render the leftPane. Default to 'LeftPane`
+    const component = options?.component || 'LeftPane'
+    return {
+      content: [{ component }]
+    }
+  },
+  toggleWidget: (options) => {
+    // widgetId: widget identifier
+    // icon: icon to be displayed
+    // message: label or tooltip to be displayed when not toggled
+    // toggleIcon: icon to be displayed when toggled
+    // toggleMessage: label or tooltip to be displayed when toggled
+    // renderer: renderer of the action
+    const params = Object.assign({ renderer: 'item' }, options)
+    return {
+      id: `toggle-${params.widgetId}`, 
+      icon: params.icon, 
+      label: params.renderer === 'item' ? params.message : null,
+      tooltip: params.renderer === 'button' ? params.message : null,
+      toggle: { 
+        icon: params.toggleIcon,
+        label: params.renderer === 'item' ? params.toggleMessage : null,
+        tooltip: params.renderer === 'button' ? params.toggleMessage : null,
+      },
+      renderer: params.renderer,
+      widgetId: params.widgetId,
+      component: 'action/KToggleWidgetVisibility'
+    }
+  },
+  toggleSticky: (options) => {
+    // stickyId: sticky identifier
+    // icon: icon to be displayed
+    // showMessage: label or tooltip to be displayed when not toggled
+    // hideMessage: label or tooltip to be displayed when toggled
+    // renderer: renderer of the action
+    const params = Object.assign({ renderer: 'item' }, options)
+    return {
+      id: `toggle-${params.stickyId}`, 
+      icon: params.icon, 
+      label: params.renderer === 'item' ? params.message : null,
+      tooltip: params.renderer === 'button' ? params.message : null,
+      toggle: { 
+        icon: params.toggleIcon,
+        label: params.renderer === 'item' ? params.toggleMessage : null,
+        tooltip: params.renderer === 'button' ? params.toggleMessage : null,
+      },
+      renderer: params.renderer,
+      stickyId: params.stickyId,
+      component: 'action/KToggleStickyVisibility'
+    }
+  },
+  assign: (object, patch) => {
+    return Object.assign(object, patch)
+  },
+  visible: (object, rule) => {
+    return module.exports.assign(object, { visible: rule })
+  }
+}

package/extras/configs/panes.left.js

@@ -0,0 +1,118 @@
+module.exports = {
+  activityLink: (options) => {
+    // name: the activity name. It is required
+    // params: params to be added to the router
+    const name = options.name
+    const params = options?.params
+    return Object.assign({
+      id: `${name}-activity-action`,
+      renderer: 'item',
+      route: { name: `${name}-activity`, params }
+    }, options)
+  },
+  settings: (options) => {
+    return Object.assign({
+      id: 'settings-action',
+      icon: 'las la-cog',
+      label: 'layout.MY_SETTINGS',
+      renderer: 'item',
+      dialog: {
+        title: 'layout.MY_SETTINGS',
+        component: 'app/KSettings',
+        cancelAction: 'CANCEL',
+        okAction: {
+          id: 'apply-settings', label: 'APPLY', handler: 'apply'
+        }
+      }
+    }, options)
+  },
+  about: (options) => {
+    return Object.assign({
+      id: 'about-action',
+      icon: 'las la-info',
+      label: 'layout.ABOUT',
+      renderer: 'item',
+      dialog: {
+        title: 'layout.ABOUT',
+        component: 'app/KAbout', 
+        okAction: 'CLOSE'
+      },
+    }, options)
+  },
+  platformInfo: (options) => {
+    return Object.assign({
+      id: 'platform-info-action',
+      icon: 'las la-desktop',
+      label: 'KAbout.PLATFORM_INFO',
+      stack: true,
+      dialog: {
+        title: 'KAbout.PLATFORM_INFO',
+        component: 'app/KPlatform',
+        okAction: 'CLOSE',
+        widthPolicy: 'narrow'
+      }
+    }, options)
+  },
+  reportBug: (options) => {
+    return Object.assign({
+      id: 'report-bug-action',
+      icon: 'las la-bug',
+      label: 'KAbout.BUG_REPORT',
+      stack: true,
+      component: 'action/KBugReportAction'
+    }, options)
+  },
+  legalNotice: (options) => {
+    return Object.assign({
+      id: 'legal-notice-action',
+      icon: 'las la-gavel',
+      label: 'LEGAL_NOTICE',
+      dialog: {
+        title: 'LEGAL_NOTICE',
+        component: 'document/KHtml',
+        'component.url': 'legal-notice.html',
+        okAction: 'CLOSE'
+      }
+    }, options)
+  },
+  privacyPolicy: (options) => {
+    return Object.assign({
+      id: 'privacy-policy-action',
+      icon: 'las la-shield-alt',
+      label: 'PRIVACY_POLICY'
+    }, options)
+  },
+  onlineHelp: (options) => {
+    return Object.assign({
+      id: 'online-help-action',
+      icon: 'las la-book',
+      label: 'layout.ONLINE_HELP',
+      renderer: 'item'
+    }, options)
+  },
+  contextualHelp: (options) => {
+    // route: default tour route. Default to 'home'
+    const route = options?.route || 'home'
+    return Object.assign({
+      id: 'contextual-help-action',
+      icon: 'las la-question-circle',
+      label: 'layout.CONTEXTUAL_HELP',
+      handler: { name: 'launchTour', params: [route] },
+      renderer: 'item'
+    }, options)
+  },
+  logout: (options) => {
+    // provider: whether to use an Oauth provider to logout
+    const provider = options?.provider
+    return Object.assign({
+      id: 'logout-action',
+      icon: 'las la-sign-out-alt',
+      label: 'layout.LOGOUT',
+      route: {
+        name: 'logout',
+        ...(provider && { params: { provider } })
+      },
+      renderer: 'item'
+    }, options)
+  }
+}

package/extras/configs/panes.top.js

@@ -0,0 +1,222 @@
+const helpers = require('./helpers.js')
+
+module.exports = {
+  activityLink: (name, icon, tooltip, params = null, query = null) => {
+    return {
+      id: `${name}-activity-action`,
+      icon,
+      tooltip,
+      route: { name: `${name}-activity`, params, query }
+    }
+  },
+  activityStamp: (name, icon, label) => {
+    return {
+      id: `${name}-activity-stamp`,
+      component: 'KStamp',
+      icon,
+      iconSize: 'sm',
+      text: label,
+      direction: 'horizontal',
+      class: 'text-grey-7'
+    }
+  },
+  searchFilter: (options) => {
+    // fields: fields to search on
+    const fields = options?.fields || ['name', 'description']
+    return {
+      component: 'collection/KFilter',
+      label: options?.label,
+      fields
+    }
+  },
+  timeFilter: (options) => {
+    return Object.assign({
+      component: 'collection/KTimeFilterControl'
+    }, options)
+  },
+  tagsFilter: (options) => {
+    return Object.assign({
+      component: 'collection/KTagsFilterControl'
+    }, options)
+  },
+  locateUser: (options) => {
+    // renderer: renderer to be used to display the action
+    const renderer = options?.renderer || 'button'
+    return {
+      id: 'locate-user',
+      component: 'tools/KGeolocateTool',
+      renderer
+    }
+  },
+  activeLocationSearchMode: (options) => {
+    // renderer: renderer to be used to display the action
+    // mode: the mode used to declare the measure tool
+    const renderer = options?.renderer || 'button'
+    const mode = options?.mode || 'search-location'
+    return {
+      id: 'search-location',
+      icon: 'las la-search-location',
+      label: renderer === 'item' ? 'layout.SEARCH_LOCATION' : null,
+      tooltip: renderer === 'button' ? 'layout.SEARCH_LOCATION' : null,
+      handler: { name: 'setTopPaneMode', params: [mode] },
+      renderer
+    }
+  },
+  locationSearchMode: (options) => {
+    // geocoders: geocoders array to be used as the sources
+    // restoreMode: mode to be restored when closing the mode
+    const geocoders = options?.geocoders || []
+    const restoreMode = options?.restoreMode || 'default'
+    return [
+      module.exports.restoreMode({ mode: restoreMode, icon: options?.icon, tooltip: options?.tooltip }),
+      helpers.verticalSeparator(),
+      {
+        component: 'tools/KSearchTool',
+        geocoders,
+        autofocus: true
+      }
+    ]
+  },
+  activeMeasureToolMode: (options) => {
+    // renderer: renderer to be used to display the action
+    // mode: the mode used to declare the location search
+    const renderer = options?.renderer || 'item'
+    const mode = options?.mode || 'measure-tool'
+    return {
+      id: 'measure-tool',
+      icon: 'las la-ruler-combined',
+      label: renderer === 'item' ? 'layout.MEASURE_TOOL' : null,
+      tooltip: renderer === 'button' ? 'layout.MEASURE_TOOL' : null,
+      handler: { name: 'setTopPaneMode', params: [mode] },
+      renderer
+    }
+  },
+  measureToolMode: (options) => {
+    // restoreMode: mode to be restored when closing the mode
+    const restoreMode = options?.restoreMode || 'default'
+    return [
+      module.exports.restoreMode({ mode: restoreMode, icon: options?.icon, tooltip: options?.tooltip }),
+      helpers.verticalSeparator(),
+      { component: 'KMeasureTool' }
+    ]
+  },
+  toggleLegend: (options) => {
+    // renderer: renderer to be used to display the action
+    const renderer = options?.renderer || 'item'
+    return helpers.toggleWidget({
+      widgetId: 'legend-widget',
+      icon: 'las la-atlas',
+      message: 'layout.LEGEND',
+      toggleIcon: { name: 'las la-atlas', color: 'grey-6', overlay: { name: 'las la-slash', color: 'primary', rotation: 90 } },
+      hideMessage: 'layout.LEGEND',
+      renderer
+    })
+  },
+  toggleTimeSeries: (options) => {
+    // renderer: renderer to be used to display the action
+    const renderer = options?.renderer || 'item'
+    return helpers.toggleWidget({
+      widgetId: 'time-series-widget',
+      icon: 'las la-chart-line',
+      message: 'layout.TIME_SERIES',
+      toggleIcon: { name: 'las la-chart-line', color: 'grey-6', overlay: { name: 'las la-slash', color: 'primary', rotation: 90 } },
+      renderer
+    })
+  },
+  toggleSelectionManager: (options) => {
+    // renderer: renderer to be used to display the action
+    const renderer = options?.renderer || 'item'
+    return helpers.toggleWidget({
+      widgetId: 'selection-widget',
+      icon: 'las la-object-group',
+      message: 'layout.SELECTION_MANAGER',
+      toggleIcon: { name: 'las la-object-group', color: 'grey-6', overlay: { name: 'las la-slash', color: 'primary', rotation: 90 } },
+      renderer
+    })
+  },
+  toggleStylesManager: (options) => {
+    // renderer: renderer to be used to display the action
+    const renderer = options?.renderer || 'item'
+    return helpers.toggleWidget({
+      widgetId: 'style-manager',
+      icon: 'las la-paint-brush',
+      message: 'layout.STYLES_MANAGER',
+      toggleIcon: { name: 'las la-paint-brush', color: 'grey-6', overlay: { name: 'las la-slash', color: 'primary', rotation: 90 } },
+      renderer
+    })
+  },
+  togglePosition: (options) => {
+    // renderer: renderer to be used to display the action
+    const renderer = options?.renderer || 'item'
+    return helpers.toggleSticky({
+      stickyId: 'position-sticky',
+      icon: 'las la-plus',
+      message: 'layout.POSITION',
+      toggleIcon: { name: 'las la-plus', color: 'grey-6', overlay: { name: 'las la-slash', color: 'primary', rotation: 90 } },
+      renderer
+    })
+  },
+  toggleNorthArrow: (options) => {
+    // renderer: renderer to be used to display the action
+    const renderer = options?.renderer || 'item'
+    return helpers.toggleSticky({
+      stickyId: 'north-arrow-sticky',
+      icon: 'las la-location-arrow',
+      message: 'layout.NORTH_ARROW',
+      toggleIcon: { name: 'las la-location-arrow', color: 'grey-6', overlay: { name: 'las la-slash', color: 'primary', rotation: 90 } },
+      renderer
+    })
+  },
+  toggleFullscreen: (options) => {
+    // renderer: renderer to be used to display the action
+    const renderer = options?.renderer || 'item'
+    return {
+      id: 'toggle-fullscreen',
+      component: 'action/KToggleFullscreenAction',
+      icon: 'las la-expand',
+      label: renderer === 'item' ? 'layout.ENTER_FULLSCREEN' : null,
+      tooltip: renderer === 'button' ? 'layout.ENTER_FULLSCREEN' : null,
+      toggle: {
+        icon: 'las la-compress',
+        label: renderer === 'item' ? 'layout.EXIT_FULLSCREEN' : null,
+        tooltip: renderer === 'button' ? 'layout.EXIT_FULLSCREEN' : null
+      },
+      renderer
+    }
+  },
+  printTool: (options) => {
+    // renderer: renderer to be used to display the action
+    const renderer = options?.renderer || 'item'
+    return {
+      id: 'print-tool',
+      icon: 'las la-print',
+      label: renderer === 'item' ? 'layout.PRINT_TOOL' : null,
+      tooltip: renderer === 'button' ? 'layout.PRINT_TOOL' : null,
+      dialog: { 
+        component: 'KCapture', 
+        title: 'layout.PRINT_TOOL', 
+        cancelAction: 'CANCEL', 
+        okAction: { 
+          id: 'print-button', 
+          label: 'layout.PRINT', 
+          handler: 'apply' 
+        } 
+      } ,
+      renderer
+    }
+  },
+  restoreMode: (options) => {
+    // mode: mode to be restored. By default: 'default'
+    // icon: icon to be displayed, default is `las la-times`
+    // tooltip: tooltip to be displayed
+    const mode = options?.mode || 'default'
+    const icon = options?.icon || 'las la-times'
+    const tooltip = options?.tooltip || null
+    return {
+      id: `restore-${mode}`,
+      icon,
+      tooltip,
+      handler: { name: 'setTopPaneMode', params: [mode] }
+    }
+  }
+}

package/extras/configs/stickies.js

@@ -0,0 +1,57 @@
+module.exports = {
+  filterView: (options) => {
+    return Object.assign({
+      id: 'filter-view-sticky',
+      position: 'top',
+      offset: [0, 50],
+      component: 'collection/KFilterView'
+    })
+  },  
+  position: (options) => {
+    return Object.assign({
+      id: 'position-sticky',
+      visible: false,
+      position: 'top',      
+      offset: [0, 42],
+      component: 'stickies/KPosition'
+    }, options)
+  },
+  target: (options) => {
+    return Object.assign({ 
+      id: 'target-sticky',
+      visible: false,
+      position: 'center',
+      offset: [0, -20], 
+      pointerEvents: 'none',
+      component: 'stickies/KTarget'
+    }, options)
+  },
+  levelSlider: (options) => {
+    return Object.assign({ 
+      id: 'level-slider-sticky', 
+      visible: true,
+      position: 'right', 
+      offset: [40, 0], 
+      component: 'stickies/KLevelSlider'
+    }, options)
+  },
+  northArrow: (options) => {
+    return Object.assign({ 
+      id: 'north-arrow-sticky',
+      visible: true, 
+      position: 'bottom-left',
+      offset: [110, 2], 
+      pointerEvents: 'none',
+      component: 'stickies/KNorthArrow' 
+    }, options)
+  },
+  attribution: (options) => {
+    return Object.assign({
+      id: 'attribution-sticky',
+      visible: true, 
+      position: 'bottom-right', 
+      offset: [80, 24], 
+      component: 'stickies/KAttribution'
+    }, options)
+  }
+}

package/extras/configs/widgets.left.js

@@ -0,0 +1,23 @@
+module.exports = {
+  LEGEND: {
+    id: 'legend-widget',
+    label: 'KLegend.LABEL',
+    icon: 'las la-atlas',
+    scrollable: true,
+    content: { component: 'legend/KLegend' }
+  },
+  FEATURES_SELECTION: {
+    id: 'selection-widget',
+    label: 'KFeaturesSelection.LABEL',
+    icon: 'las la-object-group',
+    scrollable: true,
+    content: { component: 'selection/KFeaturesSelection' }
+  },
+  STYLE_MANAGER: {
+    id: 'style-manager',
+    label: 'KStyleManager.TITLE',
+    icon: 'las la-paint-brush',
+    scrollable: true,
+    content: { component: 'styles/KStyleManager' }
+  }
+}

package/extras/configs/widgets.top.js

@@ -0,0 +1,73 @@
+module.exports = {
+  INFORMATION_BOX: {
+    id: 'information-box',
+    label: 'KInformationBox.LABEL',
+    icon: 'las la-digital-tachograph',
+    scrollable: true,
+    content: { component: 'widget/KInformationBox' },
+    header: [{
+      id: 'center-view',
+      icon: 'las la-eye',
+      tooltip: 'KInformationBox.CENTER_ON',
+      visible: 'hasFeature',
+      handler: 'onCenterOn'
+    }, {
+      id: 'copy-properties',
+      icon: 'las la-clipboard',
+      tooltip: 'KInformationBox.COPY_PROPERTIES',
+      visible: 'hasProperties',
+      handler: 'onCopyProperties'
+    }, {
+      id: 'export-feature',
+      icon: 'kdk:json.svg',
+      tooltip: 'KInformationBox.EXPORT_FEATURE',
+      visible: 'hasFeature',
+      handler: 'onExportFeature'
+    }]
+  }, 
+  TIME_SERIES: {
+    id: 'time-series',
+    label: 'TimeSeries.LABEL',
+    icon: 'las la-chart-line',
+    content: { component: 'TimeSeries' },
+    header: [{ component: 'TimeSeriesToolbar' }]
+  }, 
+  ELEVATION_PROFILE: {
+    id: 'elevation-profile',
+    label: 'KElevationProfile.LABEL',
+    icon: 'las la-mountain',
+    content: { component: 'widget/KElevationProfile' },
+    header: [{
+      id: 'center-view',
+      icon: 'las la-eye',
+      tooltip: 'KElevationProfile.CENTER_ON',
+      visible: 'hasFeature',
+      handler: 'onCenterOn'
+    }, {
+      id: 'copy-properties',
+      icon: 'las la-clipboard',
+      tooltip: 'KElevationProfile.COPY_PROFILE',
+      visible: 'hasProfile',
+      handler: 'onCopyProfile'
+    }, {
+      id: 'export-feature',
+      icon: 'kdk:json.svg',
+      tooltip: 'KElevationProfile.EXPORT_PROFILE',
+      visible: 'profile',
+      handler: 'onExportProfile'
+    }]
+  }, 
+  MAPILLARY_VIEWER: {
+    id: 'mapillary-viewer',
+    label: 'KMapillaryViewer.LABEL',
+    icon: 'kdk:mapillary.png',
+    content: { component: 'widget/KMapillaryViewer' },
+    header: [{
+      id: 'center',
+      icon: 'las la-eye',
+      tooltip: 'KMapillaryViewer.CENTER_ON',
+      visible: 'hasImage',
+      handler: 'centerMap'
+    }]
+  }
+}

package/extras/css/core.variables.scss

@@ -1,11 +1,19 @@
 // Sass/SCSS variables customization
 // https://quasar.dev/style/sass-scss-variables#variables-list
 
+//@use "sass:color";
+
 // Theme
 $primary: #293341 !default;
+
+//$secondary: color.adjust($primary, $lightness: 75%, $space: hsl) !default;
+//$accent: color.adjust($primary, $lightness: 25%, $space: hsl) !default;
+//$dark: color.adjust($primary, $lightness: -25%, $space: hsl) !default;
+
 $secondary: lighten($primary, 75%) !default;
 $accent: lighten($primary, 25%) !default;
 $dark: darken($primary, 25%) !default;
+
 $info: $accent !default;
 $positive: #7bb946 !default;
 $negative: #c74a4a !default;

package/extras/images/north.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- License: GPL. Made by Viglino: https://github.com/Viglino/font-gis -->
+<svg width="800px" height="800px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M42.066 0v20h3.752V6.957L53.881 20h4.053V0h-3.752v13.355L45.996 0zm5.57 26.688l-25.77 69.949c-.823 2.238 1.658 4.248 3.677 2.978L50 84.195l24.455 15.42c2.02 1.273 4.504-.738 3.68-2.978l-25.79-70c-.472-1.096-1.283-1.632-2.384-1.635c-1.1-.003-2.017.856-2.324 1.686zm-.136 14.83V79.86L29.1 91.463z" fill="#000000" fill-rule="evenodd"></path></svg>

package/extras/tours/map/side-nav.js

@@ -1,5 +1,5 @@
 module.exports = [{
-  target: '#logout',
+  target: '#logout-action',
   title: 'tours.side-nav.LOGOUT_LABEL',
   content: 'tours.side-nav.SESSION_LABEL',
   params: {
@@ -20,7 +20,7 @@ module.exports = [{
   params: {
     placement: 'top',
     clickOnPrevious: '#left-opener',
-    clickOnNext: ['#left-opener', '#about'],
+    clickOnNext: ['#left-opener', '#about', '#left-opener'],
     nextDelay: 500
   }
 }, {
@@ -33,4 +33,4 @@ module.exports = [{
     clickOnNext: ['#ok-action', '#left-opener'],
     nextDelay: 500
   }
-}]
+}]