WIP kalisio/kano#133 (catalog + timeline)

kalisio · Jul 27, 2020 · 0175b6d · 0175b6d
1 parent 9452ff6
commit 0175b6d
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 21 deletions.
diff --git a/extras/tours/map/catalog-panel.js b/extras/tours/map/catalog-panel.js
@@ -10,34 +10,44 @@ module.exports = [{
   title: 'tours.catalog-panel.CATEGORY_LABEL',
   params: {
     placement: 'bottom',
-    clickOn: '#BaseLayers',
-    clickDelay: 1000
+    clickOn: '#BaseLayers * i',
+    clickDelay: 1000,
+    clickOnPrevious: '#BaseLayers * i',
+    previousDelay: 500
   }
 }, {
-  target: '#Layers.OSM_DARK',
+  target: '#Layers\\.OSM_DARK',
   title: 'tours.catalog-panel.SHOW_LAYER_LABEL',
   params: {
     placement: 'bottom',
-    clickOn: '#Layers.OSM_DARK',
-    clickDelay: 1000
+    clickOn: '#Layers\\.OSM_DARK',
+    clickDelay: 1000,
+    clickOnPrevious: '#BaseLayers * i',
+    previousDelay: 500
   }
 }, {
-  target: '#Layers.OSM_BRIGHT',
+  target: '#Layers\\.OSM_BRIGHT',
   title: 'tours.catalog-panel.HIDE_LAYER_LABEL',
   content: 'tours.catalog-panel.MIN_LEVEL_LABEL',
   params: {
     placement: 'bottom',
-    clickOn: '#Layers.OSM_BRIGHT',
+    clickOn: '#Layers\\.OSM_BRIGHT',
     clickDelay: 1000,
-    clickOnNext: ['#BaseLayers', '#MeteoLayers'],
+    clickOnNext: ['#BaseLayers * i', '#MeteoLayers * i'],
     nextDelay: 500
   }
 }, {
   target: '#forecast-model',
   title: 'tours.catalog-panel.METEO_MODEL_LABEL',
-  content: 'tours.catalog-panel.METEO_LAYERS_LABEL',
   params: {
     placement: 'top',
-    clickOnNext: '#MeteoLayers'
+    clickOnPrevious: ['#MeteoLayers * i', '#BaseLayers * i'],
+    previousDelay: 500
+  }
+}, {
+  target: '#Layers\\.WIND',
+  title: 'tours.catalog-panel.METEO_LAYERS_LABEL',
+  params: {
+    placement: 'top'
   }
 }]
diff --git a/extras/tours/map/timeline.js b/extras/tours/map/timeline.js
@@ -4,4 +4,70 @@ module.exports = [{
   params: {
     placement: 'top'
   }
+}, {
+  target: '#timeline-date',
+  title: 'tours.timeline.DATE_LABEL',
+  params: {
+    placement: 'top'
+  }
+}, {
+  target: '#timeline-now',
+  title: 'tours.timeline.NOW_LABEL',
+  params: {
+    placement: 'top'
+  }
+}, {
+  target: '#timeline-forward',
+  title: 'tours.timeline.NEXT_STEP_LABEL',
+  params: {
+    placement: 'top'
+  }
+}, {
+  target: '#timeline-backward',
+  title: 'tours.timeline.PREVIOUS_STEP_LABEL',
+  params: {
+    placement: 'top'
+  }
+}, {
+  target: '#timeline-minutes-1',
+  title: 'tours.timeline.PICK_MINUTES_LABEL',
+  params: {
+    placement: 'top'
+  }
+}, {
+  target: '#timeline-next-hour',
+  title: 'tours.timeline.NEXT_HOUR_LABEL',
+  params: {
+    placement: 'top'
+  }
+}, {
+  target: '#timeline-previous-hour',
+  title: 'tours.timeline.PREVIOUS_HOUR_LABEL',
+  params: {
+    placement: 'top'
+  }
+}, {
+  target: '#timeline-hours-1',
+  title: 'tours.timeline.PICK_HOUR_LABEL',
+  params: {
+    placement: 'top'
+  }
+}, {
+  target: '#timeline-next-day',
+  title: 'tours.timeline.NEXT_DAY_LABEL',
+  params: {
+    placement: 'top'
+  }
+}, {
+  target: '#timeline-previous-day',
+  title: 'tours.timeline.PREVIOUS_DAY_LABEL',
+  params: {
+    placement: 'top'
+  }
+}, {
+  target: '#timeline-days-1',
+  title: 'tours.timeline.PICK_DAY_LABEL',
+  params: {
+    placement: 'top'
+  }
 }]
diff --git a/map/client/components/KTimeline.vue b/map/client/components/KTimeline.vue
@@ -4,23 +4,23 @@
       Time controls
      -->
     <div class="full-width row justify-center items-center k-timeline-control">
-      <q-btn v-if="$q.screen.gt.xs" dense flat round icon='las la-step-backward' size="md" color="primary" @click="onPreviousStepClicked">
+      <q-btn id="timeline-backward" v-if="$q.screen.gt.xs" dense flat round icon='las la-step-backward' size="md" color="primary" @click="onPreviousStepClicked">
         <q-tooltip>{{$t('KTimeline.PREVIOUS_STEP')}}</q-tooltip>
       </q-btn>
-      <q-btn  dense flat round icon='las la-calendar' size="md" color="primary">
+      <q-btn id="timeline-date" dense flat round icon='las la-calendar' size="md" color="primary">
         <q-tooltip>{{$t('KTimeline.SET_DATE')}}</q-tooltip>
         <q-popup-proxy transition-show="scale" transition-hide="scale">
           <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-btn dense flat round icon="las la-clock" size="md" color="primary" @click="onNowClicked">
+      <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">
           <q-icon name="las la-play" size="10px" color="white'" />
         </q-badge>
       </q-btn>
-      <q-btn v-if="$q.screen.gt.xs" dense flat round icon='las la-step-forward' size="md" color="primary" @click="onNextStepClicked">
+      <q-btn v-if="$q.screen.gt.xs" id="timeline-forward" dense flat round icon='las la-step-forward' size="md" color="primary" @click="onNextStepClicked">
         <q-tooltip>{{$t('KTimeline.NEXT_STEP')}}</q-tooltip>
       </q-btn>
     </div>
@@ -34,6 +34,7 @@
       <div v-if="minutes.length > 0" class="row justify-center items-center">
         <template v-for="(minute, index) in minutes">
           <q-chip
+            :id="'timeline-minutes-' + index"
             :key="index"
             dense flat outline :size="$q.screen.gt.sm ? '12px' : '10px'"
             :color="minute.color"
@@ -43,32 +44,34 @@
         </template>
       </div>
       <div v-if="hours.length > 0" class="full-width row justify-center items-center">
-        <q-btn dense flat round icon='las la-angle-left' color="primary" @click="onPreviousHourClicked">
+        <q-btn id="timeline-previous-hour" dense flat round icon='las la-angle-left' color="primary" @click="onPreviousHourClicked">
           <q-tooltip>{{$t('KTimeline.PREVIOUS_HOUR')}}</q-tooltip>
         </q-btn>
         <template v-for="(hour, index) in hours">
-          <div :key="index" :class="hour.class" style="height: 25px"  @click="onHourClicked(index, hours.length)">
+          <div :id="'timeline-hours-' + index" :key="index" :class="hour.class"
+            style="height: 25px"  @click="onHourClicked(index, hours.length)">
             {{hour.label}}
           </div>
         </template>
-        <q-btn flat round icon='las la-angle-right'  color="primary" @click="onNextHourClicked">
+        <q-btn id="timeline-next-hour" flat round icon='las la-angle-right'  color="primary" @click="onNextHourClicked">
           <q-tooltip>{{$t('KTimeline.NEXT_HOUR')}}</q-tooltip>
         </q-btn>
       </div>
       <div class="row justify-center items-center">
-        <q-btn dense flat round icon='las la-calendar-minus' color="primary" @click="onPreviousDayClicked">
+        <q-btn id="timeline-previous-day" dense flat round icon='las la-calendar-minus' color="primary" @click="onPreviousDayClicked">
           <q-tooltip>{{$t('KTimeline.PREVIOUS_DAY')}}</q-tooltip>
         </q-btn>
         <template v-for="(day, index) in days">
           <q-chip
+            :id="'timeline-days-' + index"
             :key="index"
             dense flat square outline size="md"
             :color="day.color"
             :text-color="day.textColor"
             :label="day.label"
             clickable @click="onDayClicked(index, days.length)" />
         </template>
-        <q-btn 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>

diff --git a/map/client/i18n/map_en.json b/map/client/i18n/map_en.json
@@ -208,7 +208,19 @@
       "METEO_LAYERS_LABEL": "Each layer will then target data of a specific meteorological element from this model."
     },
     "timeline": {
-      "TIMELINE_LABEL": "The timeline allows to quickly execute actions related to the time of displayed data."
+      "TIMELINE_LABEL": "The timeline allows to quickly execute actions related to the time of displayed data.",
+      "DATE_LABEL": "Jump to any given date by using this button.",
+      "NOW_LABEL": "Stick to real-time using this button.",
+      "NEXT_STEP_LABEL": "Go forward in time to the next step as configured in your settings.",
+      "PREVIOUS_STEP_LABEL": "Go backward in time to the previous step as configured in your settings.",
+      "SETTINGS_LINK": "How to update your settings in the main menu",
+      "PICK_MINUTES_LABEL": "Change the minutes of current time.",
+      "NEXT_HOUR_LABEL": "Go forward in time to the next hour.",
+      "PREVIOUS_HOUR_LABEL": "Go backward in time to the previous hour.",
+      "PICK_HOUR_LABEL": "Or pick the hours of current time.",
+      "NEXT_DAY_LABEL": "Go forward in time to the next day.",
+      "PREVIOUS_DAY_LABEL": "Go backward in time to the previous day.",
+      "PICK_DAY_LABEL": "Or pick a given day."
     }
   },
   "KLocationField": {

diff --git a/map/client/i18n/map_fr.json b/map/client/i18n/map_fr.json
@@ -208,7 +208,19 @@
       "METEO_LAYERS_LABEL": "Chaque couche ciblera alors un élément météorologique issu des données du modèle cible."
     },
     "timeline": {
-      "TIMELINE_LABEL": "La ligne de temps permet d'accéder aux actions relative à la temporalité des données affichées."
+      "TIMELINE_LABEL": "La ligne de temps permet d'accéder aux actions relative à la temporalité des données affichées.",
+      "DATE_LABEL": "Sélectionnez n'importe quelle date via ce bouton.",
+      "NOW_LABEL": "Suivez le temps courant via ce bouton.",
+      "NEXT_STEP_LABEL": "Avancez dans le temps tel que configuré dans vos paramètres.",
+      "PREVIOUS_STEP_LABEL": "Reculez dans le temps tel que configuré dans vos paramètres.",
+      "SETTINGS_LINK": "Mettre à jour vos paramètres dans le menu principal",
+      "PICK_MINUTES_LABEL": "Modifiez les minutes du temps courant.",
+      "NEXT_HOUR_LABEL": "Avancez dans le temps d'une heure.",
+      "PREVIOUS_HOUR_LABEL": "Reculez dans le temps d'une heure.",
+      "PICK_HOUR_LABEL": "Ou choisissez directement l'horaire.",
+      "NEXT_DAY_LABEL": "Avancez dans le temps d'un jour.",
+      "PREVIOUS_DAY_LABEL": "Reculez dans le temps d'un jour.",
+      "PICK_DAY_LABEL": "Ou choisissez directement un jour."
     }
   },
   "KLocationField": {