Migrated to Pug

template/module/journey_step.pug

@@ -1,72 +1,40 @@
-.bg-dark.text-white
-  .container.section
-    .row.text-center
-      .input.col-sm-4
-        input(disabled='' :value="journey_data.main[journey_step_data.section].title + ': Day ' + journey_step_data.day")
-      .input.col-sm-2
-        input(placeholder='Day title' v-model='journey_data.step_title[journey_step]')
-      .col-sm-3
-      .right.input.col-sm-2
-        input(disabled='' :value='active_date()')
-    .row
-      .col-12.col-sm-12
-        l-map(:zoom='  journey_data.main[journey_step_data.section].map.zoom' :center='journey_data.main[journey_step_data.section].map.center' style='padding-top: 100%;')
-          l-tile-layer(url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors')
-          l-control-scale(position='topright' :imperial='false' :metric='true')
-          l-marker(v-if='journey_data.main[journey_step_data.section].hotel && \
-          journey_data.main[journey_step_data.section].hotel.icon' :lat-lng='journey_data.main[journey_step_data.section].hotel.latlon')
-            l-icon
-              div(v-html="generate_icon(journey_data.main[journey_step_data.section].hotel,'darkblue')")
-            l-popup
-              h1.row.text-medium.text-center {{journey_data.main[journey_step_data.section].hotel.sname}}
-              span.row.text-small.text-gray {{journey_data.main[journey_step_data.section].hotel.display_name}}
-              .row.input
-                textarea-autosize.col-12.col-sm-10.text-small(placeholder='Notes' v-model='journey_data.main[journey_step_data.section].hotel.notes' :min-height='30' :max-height='350')
-          l-marker(v-for='place in journey_data.main[journey_step_data.section].places.activities' :lat-lng='place.latlon')
-            div(v-if='place.step==journey_step')
-              l-icon
-                div(v-html='generate_icon(place)')
-              l-popup
-                h1.row.text-medium.text-center {{place.sname}}
-                span.row.text-small.text-gray {{place.display_name}}
-                .row.input
-                  textarea-autosize.col-12.col-sm-10.text-small(placeholder='Notes' v-model='place.notes' :min-height='30' :max-height='350')
-                a.leaflet-popup-close-button.text-gray(style='bottom:9px;top:auto; ' href='#rm' v-on:click.prevent='place.step=-1') -
-            div(v-else-if='place.step >= 0')
-              l-icon
-                div(v-html="generate_icon(place,'orange')")
-              l-popup
-                h1.row.text-medium.text-center {{place.sname}}
-                span.row.text-small.text-gray {{place.display_name}}
-                .row.input
-                  textarea-autosize.col-12.col-sm-10.text-small(placeholder='Notes' v-model='place.notes' :min-height='30' :max-height='350')
-                a.leaflet-popup-close-button.text-gray(style='bottom:9px;top:auto; ' href='#add' v-on:click.prevent='place.step=journey_step') +
-            div(v-else-if='place.step==undefined || place.step == -1')
-              l-icon
-                div(v-html="generate_icon(place,'red')")
-              l-popup
-                h1.row.text-medium.text-center {{place.sname}}
-                span.row.text-small.text-gray {{place.display_name}}
-                .row.input
-                  textarea-autosize.col-12.col-sm-10.text-small(placeholder='Notes' v-model='place.notes' :min-height='30' :max-height='350')
-                a.leaflet-popup-close-button.text-gray(style='bottom:9px;top:auto; ' href='#add' v-on:click.prevent='place.step=journey_step') +
-            div(v-else='')
-              l-icon
-                div(v-html='generate_icon()')
-              l-popup
-                h1.row.text-medium.text-center {{place.sname}}
-                span.row.text-small.text-gray {{place.display_name}}
-    .row
-      .col-12.col-sm-12
-        .container.text-center(v-if='journey_step_data.start || journey_step_data.end')
-          b Flights
-          div(v-if='journey_step_data.start')
-            div(v-for='element in journey_data.main[journey_step_data.section].flightA')
-              a(href='#fligh' v-on:click.prevent="window.open('https://www.flightradar24.com/data/flights/'+element.id,'_blank')") {{ element.label }}
-          div(v-if='journey_step_data.end')
-            div(v-for='element in journey_data.main[journey_step_data.section].flightB')
-              a(href='#fligh' v-on:click.prevent="window.open('https://www.flightradar24.com/data/flights/'+element.id,'_blank')") {{ element.label }}
-        .container
-div
-  .container-medium.section
-.bg-dark
+- var map_section = 'journey_data.main[idx]'
+div(v-for='(e, idx) in journey_data.main' :key='idx')
+  .bg-dark.text-white(v-if="journey_step_data.section==idx")
+    .container.section
+      .row.text-center
+        .input.col-sm-2
+          input(v-model=map_section+'.title')
+        .input.col-sm-2
+          input(placeholder='Day title' v-model=map_section+'.step_title[journey_step_data.day]')
+        .col-sm-3
+        .right.input.col-sm-2
+          input(disabled='' :value='active_date() + " (" + journey_step_data.day+")"')
+      .row
+        .col-9.col-ssm-12
+          include map.pug
+          +map(map_section)
+      
+        .col-3.col-ssm-12
+          .row.text-center
+            div
+              label Date Range
+            .input.text-dark
+              date-picker(:lang='lang' v-model=map_section+'.dateRange' range='' format='ddd D MMM' placeholder='Date Range')
+          .row.text-center
+            div
+              label Hotel
+            multiselect#ajax(v-model=map_section+'.hotel' label='sname' track-by='place_id' placeholder='Type to search' open-direction='bottom' :options='query.nominatim' :searchable='true' :loading='querying.hotel' :internal-search='false' :clear-on-select='false' :options-limit='50' :limit='1' :max-height='600' @search-change='debounceSearch.hotel')
+          .row.text-center
+            div
+              label Restoration
+            multiselect#ajax(v-model=map_section+'.places.restaurants' label='sname' track-by='place_id' placeholder='Type to search' open-direction='bottom' :multiple='true' :options='query.nominatim' :searchable='true' :loading='querying.food' :internal-search='false' :clear-on-select='false' :options-limit='50' :limit='10' :max-height='600' @search-change='debounceSearch.restaurants')
+          .row.text-center
+            div
+              label Activities
+            multiselect#ajax(v-model=map_section+'.places.activities' label='sname' track-by='place_id' placeholder='Type to search' open-direction='bottom' :multiple='true' :options='query.nominatim' :searchable='true' :loading='querying.place' :internal-search='false' :clear-on-select='false' :options-limit='50' :limit='10' :max-height='600' @search-change='debounceSearch.places')
+          .row.text-center
+            div
+              label Notes
+            .input.text-dark(style='width:100%;')
+              textarea-autosize.text-small(v-model=map_section+'.notes' placeholder='Notes' :min-height='30' :max-height='350')