Prettier Pug

public/js/main.js

@@ -27,7 +27,7 @@ Date.prototype.toJSONLocal = (function () {
 function toEncoded(string) {
   const codeUnits = Uint16Array.from(
     { length: string.length },
-    (element, index) => string.charCodeAt(index),
+    (element, index) => string.charCodeAt(index)
   );
   const charCodes = new Uint8Array(codeUnits.buffer);
 
@@ -41,7 +41,7 @@ function toEncoded(string) {
 function toDecoded(string) {
   let binary = window.atob(string);
   const bytes = Uint8Array.from({ length: binary.length }, (element, index) =>
-    binary.charCodeAt(index),
+    binary.charCodeAt(index)
   );
   const charCodes = new Uint16Array(bytes.buffer);
 
@@ -62,7 +62,7 @@ const query_flight = (q) =>
 
 const is_restauration_type = (e) =>
   ["restaurant", "cafe", "pub", "bar", "fast_food", "food_court"].indexOf(
-    e.type,
+    e.type
   ) != -1;
 
 const is_attraction_type = (e) =>
@@ -244,7 +244,7 @@ const app = new Vue({
       if (!this.journey_data.main[this.journey_step_data.section].dateRange)
         return "?";
       var date = new Date(
-        this.journey_data.main[this.journey_step_data.section].dateRange[0],
+        this.journey_data.main[this.journey_step_data.section].dateRange[0]
       );
       date.setDate(date.getDate() + this.journey_step_data.day - 1);
       return this.format_date(date);
@@ -289,10 +289,9 @@ const app = new Vue({
       if (this.journey_data.main.length == 0) return "";
       try {
         return `${this.format_date(
-          this.journey_data.main[0].dateRange[0],
+          this.journey_data.main[0].dateRange[0]
         )} - ${this.format_date(
-          this.journey_data.main[this.journey_data.main.length - 1]
+          this.journey_data.main[this.journey_data.main.length - 1].dateRange[1]
-            .dateRange[1],
         )}`;
       } catch {
         return "?";
@@ -405,7 +404,7 @@ const app = new Vue({
     },
     filter_selected: function (list, step) {
       return list.filter((e) =>
-        step ? e.step == this.journey_step_data.day : e.step >= 0,
+        step ? e.step == this.journey_step_data.day : e.step >= 0
       );
     },
     filter_unselected: function (list) {
@@ -457,7 +456,7 @@ const app = new Vue({
         this.querying.hotel = true;
         this.search_nominatim(
           q,
-          (r) => r.type == "hotel" || r.type == "hostel",
+          (r) => r.type == "hotel" || r.type == "hostel"
         ).then((r) => {
           this.querying.hotel = false;
         });

server.js

@@ -13,7 +13,7 @@ fastify.register(
   },
   (err) => {
     if (err) throw err;
-  },
+  }
 );
 
 fastify.register(require("@fastify/view"), {

template/home.pug

@@ -1,23 +1,29 @@
 doctype html
 
-
 include module/head.pug
 main#app
   .container
     section.mb-big
       .text-center
-        img.main-logo.mb-medium(src='/public/img/helcel.png' alt='Helcel logo')
+        img.main-logo.mb-medium(
+          src="/public/img/helcel.png",
+          alt="Helcel logo"
+        )
         div
           h1.text-huge.text-withSubtitle Open Tourism Map
           h2.text-big.text-gray Collaborative Holiday Planner
         p#js-header-waypoint.m-none
-          a.button.button--primary.button--mobileFull(href='#go') Get started
+          a.button.button--primary.button--mobileFull(href="#go") Get started
   .bg-dark
     .container
       .row.text-center
         .col-12.col-sm-3
           .section
-            img(src='/public/img/lightweight.png' alt='Lightweight' width='118')
+            img(
+              src="/public/img/lightweight.png",
+              alt="Lightweight",
+              width="118"
+            )
             br
             h2.text-withSubtitle.text-big.text-white
               | Lightweight
@@ -28,7 +34,11 @@ main#app
                 | Fastify & Sierra
         .col-12.col-sm-4
           .section
-            img(src='/public/img/customizable.png' alt='Customizable' width='118')
+            img(
+              src="/public/img/customizable.png",
+              alt="Customizable",
+              width="118"
+            )
             br
             h2.text-withSubtitle.text-big.text-white
               | Customizable
@@ -40,8 +50,13 @@ main#app
         .col-12.col-sm-4
           .section
             h2.text-withSubtitle.text-big.text-white
-              img(src='/public/img/opensource.png' alt='Open Source' width='118')
+              img(
+                src="/public/img/opensource.png",
+                alt="Open Source",
+                width="118"
+              )
               br
+              |
               | FOSS
               br
               span.text-medium.text-gray :-)
@@ -50,10 +65,13 @@ main#app
     p
       | Browse hotels, restaurants and attractions,....
       br
+      |
       | Select and plan the varying elements of your journey
     .aligner.aligner--contentEnd
       .input
-        input#journey_id(v-model='journey_id' placeholder='ID' type='text')
+        input#journey_id(v-model="journey_id", placeholder="ID", type="text")
-      button.button.button--primary.button--mobileFull(v-on:click='start_journey') Start the journey
+      button.button.button--primary.button--mobileFull(
+        v-on:click="start_journey"
+      ) Start the journey
 
 include module/foot.pug

template/module/foot.pug

@@ -1,26 +1,31 @@
-script(src='https://unpkg.com/vue@2/dist/vue.min.js')
+script(src="https://unpkg.com/vue@2/dist/vue.min.js")
-script(src='https://unpkg.com/vue2-datepicker/index.min.js')
+script(src="https://unpkg.com/vue2-datepicker/index.min.js")
-script(src='https://unpkg.com/leaflet/dist/leaflet.js')
+script(src="https://unpkg.com/leaflet/dist/leaflet.js")
-script(src='https://unpkg.com/vue2-leaflet')
+script(src="https://unpkg.com/vue2-leaflet")
-script(src='https://unpkg.com/leaflet.awesome-markers/dist/leaflet.awesome-markers.min.js')
+script(
-script(src='https://unpkg.com/axios/dist/axios.min.js')
+  src="https://unpkg.com/leaflet.awesome-markers/dist/leaflet.awesome-markers.min.js"
-script(src='https://unpkg.com/lodash')
+)
-script(src='https://unpkg.com/vue-multiselect')
+script(src="https://unpkg.com/axios/dist/axios.min.js")
-script(src='https://unpkg.com/vue-textarea-autosize/dist/vue-textarea-autosize.umd.min.js')
+script(src="https://unpkg.com/lodash")
+script(src="https://unpkg.com/vue-multiselect")
+script(
+  src="https://unpkg.com/vue-textarea-autosize/dist/vue-textarea-autosize.umd.min.js"
+)
 
-script(src='https://unpkg.com/sortablejs/Sortable.min.js')
+script(src="https://unpkg.com/sortablejs/Sortable.min.js")
-script(src='https://unpkg.com/vuedraggable/dist/vuedraggable.umd.min.js')
+script(src="https://unpkg.com/vuedraggable/dist/vuedraggable.umd.min.js")
 
-script(src='/public/js/main.js' type='text/javascript' charset='utf-8')
+script(src="/public/js/main.js", type="text/javascript", charset="utf-8")
 footer.bg-dark
   .container
     .section.text-center.text-small
       p.text-white
-        img(src='/public/img/helcel.png' alt='helcel logo' width='100')
+        img(src="/public/img/helcel.png", alt="helcel logo", width="100")
         br
         br
+        |
         | Built with   ❤   by Helcel
         br
         span.text-small.text-gray v0.0.1
       p.text-gray
-        a(href='https://git.helcel.net') Helcel Git
+        a(href="https://git.helcel.net") Helcel Git

template/module/head.pug

@@ -1,13 +1,26 @@
 head
   title Helcel-OTM
-  link(rel='shortcut icon' href='/public/img/helcel.ico' type='image/x-icon')
+  link(rel="shortcut icon", href="/public/img/helcel.ico", type="image/x-icon")
-  meta(charset='utf-8')
+  meta(charset="utf-8")
-  meta(name='viewport' content='width=device-width, initial-scale=1')
+  meta(name="viewport", content="width=device-width, initial-scale=1")
-  link(rel='stylesheet' href='https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,700,300' type='text/css')
+  link(
-  link(rel='stylesheet' href='/public/css/index.css')
+    rel="stylesheet",
+    href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,700,300",
+    type="text/css"
+  )
+  link(rel="stylesheet", href="/public/css/index.css")
 
-  link(rel='stylesheet' href='https://unpkg.com/vue2-datepicker/index.css')
+  link(rel="stylesheet", href="https://unpkg.com/vue2-datepicker/index.css")
-  link(rel='stylesheet' href='https://unpkg.com/vue-multiselect/dist/vue-multiselect.min.css')
+  link(
-  link(rel='stylesheet' href='https://unpkg.com/leaflet/dist/leaflet.css')
+    rel="stylesheet",
-  link(rel='stylesheet' href='https://unpkg.com/leaflet.awesome-markers/dist/leaflet.awesome-markers.css')
+    href="https://unpkg.com/vue-multiselect/dist/vue-multiselect.min.css"
-  link(rel='stylesheet' href='https://unpkg.com/@fortawesome/fontawesome-free/css/all.min.css')
+  )
+  link(rel="stylesheet", href="https://unpkg.com/leaflet/dist/leaflet.css")
+  link(
+    rel="stylesheet",
+    href="https://unpkg.com/leaflet.awesome-markers/dist/leaflet.awesome-markers.css"
+  )
+  link(
+    rel="stylesheet",
+    href="https://unpkg.com/@fortawesome/fontawesome-free/css/all.min.css"
+  )

template/module/importexport.pug

@@ -2,8 +2,12 @@ div
   .container-medium.section
     .aligner
       .input.col-sm-4
-        input(v-model='impexp' type='text')
+        input(v-model="impexp", type="text")
       .col-sm-2
-        button.button.button--primary.button--mobileFull(v-on:click='import_data') Import
+        button.button.button--primary.button--mobileFull(
+          v-on:click="import_data"
+        ) Import
       .col-sm-2
-        button.button.button--primary.button--mobileFull(v-on:click='export_data') Export
+        button.button.button--primary.button--mobileFull(
+          v-on:click="export_data"
+        ) Export

template/module/journey_sec.pug

@@ -1,8 +1,20 @@
-draggable(tag='div' :list='journey_data.main' class='list-group bg-dark' handle='.handle')
+draggable.list-group.bg-dark(
-  div.list-group-item.handle(v-for='(element, idx) in journey_data.main' :key='idx' @click='sel_section(idx)' :class='(journey_step_data.section==idx)?"bg-primary":"bg-white"')
+  tag="div",
-    div.text {{element.title}}
+  :list="journey_data.main",
-    i.fa.fa-times.close.fright(style='top:2px;right:2px;position:absolute;' @click='rm_section(idx)')
+  handle=".handle"
+)
+  .list-group-item.handle(
+    v-for="(element, idx) in journey_data.main",
+    :key="idx",
+    @click="sel_section(idx)",
+    :class="journey_step_data.section == idx ? 'bg-primary' : 'bg-white'"
+  )
+    .text {{ element.title }}
+    i.fa.fa-times.close.fright(
+      style="top: 2px; right: 2px; position: absolute",
+      @click="rm_section(idx)"
+    )
 
-  div.list-group-item.bg-white(@click='add_section()')
+  .list-group-item.bg-white(@click="add_section()")
-    div.text Add Section 
+    .text Add Section
-    i.fa.fa-plus.add(style='top:12px;right:5px;position:absolute;')
+    i.fa.fa-plus.add(style="top: 12px; right: 5px; position: absolute")

template/module/journey_step.pug

@@ -1,40 +1,102 @@
-- var map_section = 'journey_data.main[idx]'
+div(v-for="(e, idx) in journey_data.main", :key="idx")
-div(v-for='(e, idx) in journey_data.main' :key='idx')
+  .bg-dark.text-white(v-if="journey_step_data.section == 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(v-model="journey_data.main[idx].title")
         .input.col-sm-2
-          input(placeholder='Day title' v-model=map_section+'.step_title[journey_step_data.day]')
+          input(
+            placeholder="Day title",
+            v-model="journey_data.main[idx].step_title[journey_step_data.day]"
+          )
         .col-sm-3
         .right.input.col-sm-2
-          input(disabled='' :value='active_date() + " (" + journey_step_data.day+")"')
+          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 ({{step_len(idx)}})
+              label Date Range ({{ step_len(idx) }})
             .input.text-dark
-              date-picker(:lang='lang' v-model=map_section+'.dateRange' range='' format='ddd D MMM' placeholder='Date Range' v-on:change='update_date(idx)')
+              date-picker(
+                :lang="lang",
+                v-model="journey_data.main[idx].dateRange",
+                range="",
+                format="ddd D MMM",
+                placeholder="Date Range",
+                v-on:change="update_date(idx)"
+              )
           .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')
+            multiselect#ajax(
+              v-model="journey_data.main[idx].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')
+            multiselect#ajax(
+              v-model="journey_data.main[idx].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')
+            multiselect#ajax(
+              v-model="journey_data.main[idx].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%;')
+            .input.text-dark(style="width: 100%")
-              textarea-autosize.text-small(v-model=map_section+'.notes' placeholder='Notes' :min-height='30' :max-height='350')
+              textarea-autosize.text-small(
+                v-model="journey_data.main[idx].notes",
+                placeholder="Notes",
+                :min-height="30",
+                :max-height="350"
+              )

template/module/map.pug

@@ -1,42 +1,84 @@
-mixin map(section_str)
+l-map(
-  l-map(
+  :zoom.sync="journey_data.main[idx].map.zoom",
-    :zoom.sync=section_str+'.map.zoom' 
+  :center.sync="journey_data.main[idx].map.center",
-    :center.sync=section_str+'.map.center' style='padding-top: 100%;')
+  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-tile-layer(
-    l-marker(v-if=section_str+'.hotel && '+section_str+'.hotel.icon' :lat-lng=section_str+'.hotel.latlon')
+    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[idx].hotel && journey_data.main[idx].hotel.icon",
+    :lat-lng="journey_data.main[idx].hotel.latlon"
+  )
     l-icon
-        div(v-html='generate_icon('+section_str+'.hotel,"darkblue")')
+      div(v-html="generate_icon(journey_data.main[idx].hotel, 'darkblue')")
     l-popup
-        h1.row.text-medium.text-center {{ #{section_str}.hotel.sname}}
+      h1.row.text-medium.text-center {{ journey_data.main[idx].hotel.sname }}
-        span.row.text-small.text-gray {{ #{section_str}.hotel.display_name}}
+      span.row.text-small.text-gray {{ journey_data.main[idx].hotel.display_name }}
-        span(v-if='journey_edit')
+      span(v-if="journey_edit")
         .row.input
-            textarea-autosize.col-12.col-sm-12.text-small(placeholder='Notes' v-model=section_str+'.hotel.notes' :min-height='30' :max-height='350')
+          textarea-autosize.col-12.col-sm-12.text-small(
-        span.row.text-small.text-white(v-else) {{ #{section_str}.hotel.notes}}
+            placeholder="Notes",
-    l-marker(v-for='place in '+section_str+'.places.activities' :lat-lng='place.latlon')
+            v-model="journey_data.main[idx].hotel.notes",
+            :min-height="30",
+            :max-height="350"
+          )
+      span.row.text-small.text-white(v-else) {{ journey_data.main[idx].hotel.notes }}
+  l-marker(
+    v-for="place in journey_data.main[idx].places.activities",
+    :lat-lng="place.latlon"
+  )
     l-icon
-        div(v-if='place.step==journey_step_data.day' v-html='generate_icon(place)')
+      div(
-        div(v-else-if='place.step==-1 || place.step==undefined' v-html='generate_icon(place, "gray")')
+        v-if="place.step == journey_step_data.day",
-        div(v-else-if='journey_edit' v-html='generate_icon(place, "lightgray")')
+        v-html="generate_icon(place)"
+      )
+      div(
+        v-else-if="place.step == -1 || place.step == undefined",
+        v-html="generate_icon(place, 'gray')"
+      )
+      div(v-else-if="journey_edit", v-html="generate_icon(place, 'lightgray')")
       div(v-else)
     l-popup
-        h1.row.text-medium.text-center {{place.sname}}
+      h1.row.text-medium.text-center {{ place.sname }}
-        span.row.text-small.text-gray {{place.display_name}}
+      span.row.text-small.text-gray {{ place.display_name }}
-        span(v-if='journey_edit')
+      span(v-if="journey_edit")
         .row.input
-            textarea-autosize.col-12.col-sm-12.text-small(placeholder='Notes' v-model='place.notes' :min-height='30' :max-height='350')
+          textarea-autosize.col-12.col-sm-12.text-small(
-          a.leaflet-popup-close-button.text-gray(style='right:0px;visibility:visible;' href='#rm' v-on:click.prevent='place.step=-1') -
+            placeholder="Notes",
-          a.leaflet-popup-close-button.text-gray(style='right:16px;visibility:visible;' href='#ad' v-on:click.prevent='place.step=journey_step_data.day') +
+            v-model="place.notes",
-        span.row.text-small.text-dark(v-else) {{place.notes}}
+            :min-height="30",
+            :max-height="350"
+          )
+        a.leaflet-popup-close-button.text-gray(
+          style="right: 0px; visibility: visible",
+          href="#rm",
+          v-on:click.prevent="place.step = -1"
+        ) -
+        a.leaflet-popup-close-button.text-gray(
+          style="right: 16px; visibility: visible",
+          href="#ad",
+          v-on:click.prevent="place.step = journey_step_data.day"
+        ) +
+      span.row.text-small.text-dark(v-else) {{ place.notes }}
 
-    l-marker(v-for='place in '+section_str+'.places.restaurants' :lat-lng.sync='place.latlon')
+  l-marker(
+    v-for="place in journey_data.main[idx].places.restaurants",
+    :lat-lng.sync="place.latlon"
+  )
     l-icon
-        div(v-html="generate_icon(place,'cadetblue')")
+      div(v-html="generate_icon(place, 'cadetblue')")
     l-popup
-        h1.row.text-medium.text-center {{place.sname}}
+      h1.row.text-medium.text-center {{ place.sname }}
-        span.row.text-small.text-gray {{place.display_name}}
+      span.row.text-small.text-gray {{ place.display_name }}
-        span(v-if='journey_edit')
+      span(v-if="journey_edit")
         .row.input
-            textarea-autosize.col-12.col-sm-12.text-small(placeholder='Notes' v-model='place.notes' :min-height='30' :max-height='350')
+          textarea-autosize.col-12.col-sm-12.text-small(
-        span.row.text-small.text-dark(v-else) {{place.notes}}
+            placeholder="Notes",
+            v-model="place.notes",
+            :min-height="30",
+            :max-height="350"
+          )
+      span.row.text-small.text-dark(v-else) {{ place.notes }}

template/module/nav.pug

@@ -1,30 +1,38 @@
 header.header
   .header-inner.container
-    a.header-logo.text-dark(href='/')
+    a.header-logo.text-dark(href="/")
-      img.header-logoImage(src='/public/img/helcel.png' alt='Helcel logo' width='40')
+      img.header-logoImage(
+        src="/public/img/helcel.png",
+        alt="Helcel logo",
+        width="40"
+      )
       span.hide-small OTM
     .input.input-invis.row
-      input.col-6.small(v-model='journey_data.name' type='text')
+      input.col-6.small(v-model="journey_data.name", type="text")
-      input.col-6.small(disabled type='text' :placeholder='total_date() + " (" + total_days() + ")"')
+      input.col-6.small(
-    .row.header-nav.text-big(style='margin-bottom: 0;')
+        disabled,
+        type="text",
+        :placeholder="total_date() + ' (' + total_days() + ')'"
+      )
+    .row.header-nav.text-big(style="margin-bottom: 0")
       .col-sm-2
-        a(:href="'/short/'+journey_id")
+        a(:href="'/short/' + journey_id")
           i.fas.fa-file-contract
       .col-sm-2
-        a(:href="'/view/'+journey_id")
+        a(:href="'/view/' + journey_id")
           i.fas.fa-camera
       .col-sm-2
-        a(href='#main' v-on:click.prevent='first_step')
+        a(href="#main", v-on:click.prevent="first_step")
           i.fas.fa-tools
       .col-sm-1.text-small
-        a(href='#prevprev' v-on:click.prevent='prevprev_step')
+        a(href="#prevprev", v-on:click.prevent="prevprev_step")
           i.fas.fa-angle-double-left
       .col-sm-1
-        a(href='#prev' v-on:click.prevent='prev_step')
+        a(href="#prev", v-on:click.prevent="prev_step")
           i.fas.fa-angle-left
       .col-sm-1
-        a(href='#next' v-on:click.prevent='next_step')
+        a(href="#next", v-on:click.prevent="next_step")
           i.fas.fa-angle-right
       .col-sm-1.text-small
-        a(href='#nextnext' v-on:click.prevent='nextnext_step')
+        a(href="#nextnext", v-on:click.prevent="nextnext_step")
           i.fas.fa-angle-double-right

template/module/nav_pub.pug

@@ -1,14 +1,18 @@
 header.header
   .header-inner.container
-    a.header-logo.text-dark(href='/')
+    a.header-logo.text-dark(href="/")
-      img.header-logoImage(src='/public/img/helcel.png' alt='Helcel logo' width='40')
+      img.header-logoImage(
+        src="/public/img/helcel.png",
+        alt="Helcel logo",
+        width="40"
+      )
       span.hide-small HOTM
     .input.input-invis
-      input.small(:value='journey_data.name' type='text' disabled='')
+      input.small(:value="journey_data.name", type="text", disabled="")
-    .row.header-nav.text-big(style='margin-bottom: 0;')
+    .row.header-nav.text-big(style="margin-bottom: 0")
       .col-sm-3
-        a(:href="'/short/'+journey_id")
+        a(:href="'/short/' + journey_id")
           i.fas.fa-file-contract
       .col-sm-3
-        a(:href="'/view/'+journey_id")
+        a(:href="'/view/' + journey_id")
           i.fas.fa-camera

template/module/short_sec.pug

@@ -1,21 +1,43 @@
 .container.section
   .row.text-center
     .input.col-sm-2
-      input(disabled='' :value='item.title')
+      input(disabled="", :value="item.title")
     .input.col-sm-4
-      input(disabled='' placeholder='No Dates' :value="item.dateRange? (format_date(item.dateRange[0]) + ' - '+ format_date(item.dateRange[1])):''")
+      input(
+        disabled="",
+        placeholder="No Dates",
+        :value="item.dateRange ? format_date(item.dateRange[0]) + ' - ' + format_date(item.dateRange[1]) : ''"
+      )
     .input.col-sm-2
-      input(disabled='' placeholder='No Hotel' :value='item.hotel.sname')
+      input(disabled="", placeholder="No Hotel", :value="item.hotel.sname")
   .row.text-center
-    .input.col-sm-3(v-if='item.transit')
+    .input.col-sm-3(v-if="item.transit")
-      div(v-for='(item,idx) in item.transit')
+      div(v-for="(item, idx) in item.transit")
-        input(disabled='' :value="item.map(v=>v.id).join(', ')")
+        input(disabled="", :value="item.map((v) => v.id).join(', ')")
   .row.text-center
-    .input.col-sm-8(v-if='item.places && item.places.restaurants')
+    .input.col-sm-8(v-if="item.places && item.places.restaurants")
-      textarea-autosize.text-small(placeholder='No Restaurants' :value="item.places.restaurants.map(v=>v.sname+(v.notes?('('+v.notes+')'):'')).join(', ')" :min-height='30' :max-height='350' disabled='')
+      textarea-autosize.text-small(
+        placeholder="No Restaurants",
+        :value="item.places.restaurants.map((v) => v.sname + (v.notes ? '(' + v.notes + ')' : '')).join(', ')",
+        :min-height="30",
+        :max-height="350",
+        disabled=""
+      )
   .row.text-center
-    .input.col-sm-8(v-if='item.places && item.places.activities')
+    .input.col-sm-8(v-if="item.places && item.places.activities")
-      textarea-autosize.text-small(placeholder='No Activities' :value="item.places.activities.map(v=>v.sname+(v.notes?('('+v.notes+')'):'')).join(', ')" :min-height='30' :max-height='350' disabled='')
+      textarea-autosize.text-small(
+        placeholder="No Activities",
+        :value="item.places.activities.map((v) => v.sname + (v.notes ? '(' + v.notes + ')' : '')).join(', ')",
+        :min-height="30",
+        :max-height="350",
+        disabled=""
+      )
   .row.text-center
-    .input.col-sm-8(v-if='item.notes')
+    .input.col-sm-8(v-if="item.notes")
-      textarea-autosize.text-small(placeholder='No Notes' :value='item.notes' :min-height='30' :max-height='350' disabled='')
+      textarea-autosize.text-small(
+        placeholder="No Notes",
+        :value="item.notes",
+        :min-height="30",
+        :max-height="350",
+        disabled=""
+      )

template/module/view_step.pug

@@ -1,23 +1,19 @@
-- var map_section = 'journey_data.main[journey_step_data.section]'
+div(v-for="(e, idx) in journey_data.main", :key="idx")
-
+  .bg-dark.text-white(v-if="journey_step_data.section == 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
-      .aligner.text-center.text-white.text-huge(style='margin-bottom:5px')
+      .aligner.text-center.text-white.text-huge(style="margin-bottom: 5px")
         .aligner--itemTop.fleft
-          a(href='#prev' v-on:click.prevent='prev_step')
+          a(href="#prev", v-on:click.prevent="prev_step")
             i.fas.fa-angle-left
         span.container
-          div
+          span.small {{ journey_data.main[idx].title }} {{ journey_step_data.day }}
-            | {{ #{map_section}.title + ': Day ' + journey_step_data.day}}
+          .text-big.text-gray {{ journey_data.main[idx].step_title[journey_step_data.day] }}
-          .text-big.text-gray {{ #{map_section}.step_title[journey_step_data.day] }}
         .aligner--itemEnd.fright
-          a(href='#next' v-on:click.prevent='next_step')
+          a(href="#next", v-on:click.prevent="next_step")
             i.fas.fa-angle-right
       .row
         .col-12.col-sm-12
           include map.pug
-          +map(map_section)
       .row
         .col-12.col-sm-12
           .container

template/short.pug

@@ -2,6 +2,9 @@ doctype html
 include module/head.pug
 main#app(v-cloak)
   include module/nav_pub.pug
-  div(v-for='(item,idx) in journey_data.main' :class="idx%2===0 ? 'bg-dark text-white' : ''")
+  div(
+    v-for="(item, idx) in journey_data.main",
+    :class="idx % 2 === 0 ? 'bg-dark text-white' : ''"
+  )
     include module/short_sec.pug
 include module/foot.pug

template/view.pug

@@ -1,6 +1,6 @@
 doctype html
 include module/head.pug
 main#app(v-cloak)
-  div(v-if='journey_data.main[journey_step_data.section] != undefined')
+  div(v-if="journey_data.main[journey_step_data.section] != undefined")
     include module/view_step.pug
 include module/foot.pug