refactor: change to new column names & add toggle

the csv columns 'heat_<TOD>' changed to '<TOD>_r' & '<TOD>_t' where
_r columns are realtime data with heat values of today
_t columns are data of a typical heat day

feat: added toggle for today or hot day

- adjusted to column values combined from time of day + setting of toggle
- renamed selectedHour to selectedTOD
- add compatibility for URLs with old column names

src/config-examples/ors-map-filters-example.js

@@ -620,7 +620,7 @@ const filters = [
               },
               {
                 name: 'csv_column',
-                value: 'heat_noon' // default value if nothing is selected by the user
+                value: 'noon_r' // default value if nothing is selected by the user
               },
             ]
           },

src/fragments/forms/map-form/components/place-and-directions/components/time-based-route/TimeBasedRoute.vue

@@ -1,14 +1,27 @@
 <template>
   <div>
-    <v-layout row>
-      <v-select :label="$t('timeBasedRoute.hour')" :items="timesOfTheDayLabel"
+    <v-btn-toggle
+      v-model="today_toggle"
+      mandatory
+      v-on:change="departHourChange()"
+    >
+      <v-btn :value="'r'" flat>
+        {{$t('timeBasedRoute.today')}}
+      </v-btn>
+      <v-btn :value="'t'" flat>
+        {{$t('timeBasedRoute.typicalHotDay')}}
+      </v-btn>
+    </v-btn-toggle>
+      <v-layout row>
+      <v-select :label="$t('timeBasedRoute.timeOfDay')" :items="timesOfTheDayLabel"
         item-text="label"
         item-value="value"
-        v-model="selectedHour" v-on:change="departHourChange()"></v-select>
+        v-model="selectedTOD" v-on:change="departHourChange()"></v-select>
     </v-layout>
     <v-divider></v-divider>
-<!--    <v-btn class="form-actions" flat :title="$t('timeBasedRoute.hotDays')" @click="routeOnHotDays()">{{$t('timeBasedRoute.hotDays')}}</v-btn>-->
   </div>
 </template>
 
 <script src="./time-based-route.js"></script>
+
+<style scoped src="./time-based-route.css"></style>

src/fragments/forms/map-form/components/place-and-directions/components/time-based-route/i18n/time-based-route.i18n.de-de.js

@@ -4,6 +4,9 @@ export default {
     morning: 'Morgens',
     noon: 'Mittags',
     afternoon: 'Nachmittags',
-    evening: 'Abends'
+    evening: 'Abends',
+    timeOfDay: 'Tageszeit',
+    today: 'Heute',
+    typicalHotDay: 'Typischer Hitzetag'
   }
 }

src/fragments/forms/map-form/components/place-and-directions/components/time-based-route/i18n/time-based-route.i18n.en-us.js

@@ -4,6 +4,9 @@ export default {
     morning: 'Morning',
     noon: 'Noon',
     afternoon: 'Afternoon',
-    evening: 'Evening'
+    evening: 'Evening',
+    timeOfDay: 'Time of Day',
+    today: 'Today',
+    typicalHotDay: 'Typical Hot Day'
   }
 }

src/fragments/forms/map-form/components/place-and-directions/components/time-based-route/time-based-route.css

@@ -0,0 +1,4 @@
+.v-btn-toggle {
+  flex-direction: column;
+  width: 100%;
+}

src/fragments/forms/map-form/components/place-and-directions/components/time-based-route/time-based-route.js

@@ -12,25 +12,26 @@ export default {
   components: {},
   data: () => {
     return {
+      today_toggle: 't',
       timesOfTheDay: [
         {
           label: 'morning',
-          value: 'heat_morning'
+          value: 'morning'
         },
         {
           label: 'noon',
-          value: 'heat_noon'
+          value: 'noon'
         },
         {
           label: 'afternoon',
-          value: 'heat_afternoon'
+          value: 'afternoon'
         },
         {
           label: 'evening',
-          value: 'heat_evening'
+          value: 'evening'
         }
       ],
-      selectedHour: 'heat_noon'
+      selectedTOD: 'noon'
     }
   },
   computed: {
@@ -49,9 +50,9 @@ export default {
     },*/
     departHourChange() {
       let appRouteData = this.$store.getters.appRouteData
-      // console.log('>>> departHourChange ', this.selectedHour, appRouteData)
+      // console.log('>>> departHourChange ', this.selectedTOD, appRouteData)
 
-      appRouteData.options.options.profile_params.weightings.csv_column = `${this.selectedHour}`
+      appRouteData.options.options.profile_params.weightings.csv_column = `${this.selectedTOD}_${this.today_toggle}`
       // this.$store.commit('appRouteData', appRouteData)
       EventBus.$emit('appRouteDataChanged', appRouteData)
     },
@@ -75,6 +76,20 @@ export default {
     const currentHour = currentTime.getHours()
     const currentMinute = currentTime.getMinutes()
 
-    this.selectedHour = this.getTimeOfDay(currentHour, currentMinute)
+    this.selectedTOD = this.getTimeOfDay(currentHour, currentMinute)
+    let appRouteData = this.$store.getters.appRouteData
+    if (appRouteData.options.options.profile_params.weightings.csv_column) {
+      let [url_TOD, url_today] = appRouteData.options.options.profile_params.weightings.csv_column.split('_')
+      if (url_TOD === 'heat') {
+        // old column names in url
+        this.selectedTOD = url_today
+        this.today_toggle = 't'
+      } else {
+        this.selectedTOD = url_TOD
+        this.today_toggle = url_today
+      }
+    } else {
+      console.log(appRouteData)
+    }
   }
 }