Migrated to Pug

public/css/index.css

@@ -4005,3 +4005,16 @@ input:-webkit-autofill {
     margin-left: 83.33333%; }
   .offset-xl-11 {
     margin-left: 91.66667%; } }
+
+
+.leaflet-popup-close-button {
+  visibility: hidden;
+}
+
+.p-abs {
+  position: absolute;
+}
+
+.list-group {
+  margin-top: 16px;
+}

public/js/main.js

@@ -105,25 +105,25 @@ Vue.use(window.VueTextareaAutosize);
 const app = new Vue({
     el: '#app',
     data: {
+        journey_edit: (['view','short'].indexOf(window.location.pathname.split('/')[1])==-1),
         journey_id : window.location.pathname.split('/').pop() || gen_id(16),
-        journey_step: window.location.hash.slice(1)==""?((['view','short'].indexOf(window.location.pathname.split('/')[1])!=-1)?0:-1):parseInt(window.location.hash.slice(1)),
-        journey_step_data: {day:-1, section:-1},
+        
+        journey_step_data: {day:1, section:0},
         journey_data : {
             name: "New Journey",
             main:[],
-            step_title:[],
         },
+        
         query:{hotel:[],flight:[],nominatim:[]},
         querying:{hotel:false,flight:false,place:false,food:false},
         impexp:"",
         lang: {
+            format: 'ddd D MMM',
             formatLocale: {
                 firstDayOfWeek: 1,
             },
             monthBeforeYear: true,
         },
-
-        visible_step: 0,
     },
     methods: {
         start_journey: function(event){
@@ -131,81 +131,53 @@ const app = new Vue({
         },
         add_section: function(event){
             if(this.journey_data.main==undefined) this.journey_data.main=[];
-            this.journey_data.main.push({step_title:"?",map:{zoom:2}, hotel:{latlon:[0,0]},places:{restaurants:[],places:[]}});
+            this.journey_data.main.push({title:"?",step_title:[],map:{zoom:2}, hotel:{latlon:[0,0]},places:{restaurants:[],places:[]}});
         },
         next_step: function(){
-            this.journey_step+=1;
-            this.journey_step_data = this.step_convert(this.journey_step);
-            if(this.journey_step_data.section==-1) this.prev_step();
-            window.location.hash = '#' + this.journey_step;
+            this.journey_step_data.day += 1;
+            let s = this.journey_step_data.section;
+            let cd = ((this.journey_data.main[s].dateRange[1]-this.journey_data.main[s].dateRange[0])/(1000*60*60*24))+1;
+                    
+            if(this.journey_step_data.day>cd){
+                this.journey_step_data.section +=1;
+                if(this.journey_step_data.section>=this.journey_data.main.length){
+                    this.first_step();
+                }else{
+                    this.journey_step_data.day = 1;
+                }
+            }
 
         },
         prev_step: function(){
-            this.journey_step-=1;
-            if(this.journey_step<-1) this.journey_step=-1;
-            if(this.journey_step==-1 && this.view) this.journey_step=0;
-            this.journey_step_data = this.step_convert(this.journey_step);
-            window.location.hash = '#' + this.journey_step;
-
+            this.journey_step_data.day -=1;
+            if(this.journey_step_data.day<=0){
+                this.journey_step_data.section -=1;
+                if(this.journey_step_data.section <0){
+                    this.first_step();
+                }else{
+                    let s = this.journey_step_data.section;
+                    let cd = ((this.journey_data.main[s].dateRange[1]-this.journey_data.main[s].dateRange[0])/(1000*60*60*24))+1;
+                    this.journey_step_data.day = cd ;
+                }
+            }
         },
         nextnext_step: function(){
-            let nd = this.journey_step_data;
-            let ns = this.journey_step;
-            while((nd.section==this.journey_step_data.section || nd.day>1)
-                     && ns>=0){
-                ns+=1;
-                nd = this.step_convert(ns)
-                if(nd.section==-1){
-                    ns-=1;
-                    nd = this.step_convert(ns)
-                    break;
-                }
-            }
-            this.journey_step = ns;
-            this.journey_step_data = nd;
-            window.location.hash = '#' + this.journey_step;
+            this.journey_step_data.section += 1;
+            this.journey_step_data.day = 1;
+            if(this.journey_step_data.section>=this.journey_data.main.length)
+                this.first_step();
         },
         prevprev_step: function(){
-            let nd = this.journey_step_data;
-            let ns = this.journey_step;
-            while((nd.section==this.journey_step_data.section || nd.day>1)
-                     && ns>=0){
-                ns-=1;
-                nd = this.step_convert(ns)
-                if(ns==-1){
-                    ns+=1;
-                    nd = this.step_convert(ns)
-                    break;
-                }
-            }
-            this.journey_step = ns;
-            this.journey_step_data = nd;
-            window.location.hash = '#' + this.journey_step;
+            this.journey_step_data.section -= 1;
+            this.journey_step_data.day = 1;
+            if(this.journey_step_data.section<0)
+                this.first_step();
         },
         first_step: function(){
-            this.journey_step=-1;
-            this.journey_step_data = {day:-1, section:-1};
-            window.location.hash = '';
-        },
-        step_convert: function(step){
-            let steps_left = step+1;
-            for(let e in this.journey_data.main){
-                if(this.journey_data.main[e].dateRange && (this.journey_data.main[e].dateRange[0]-(new Date(0))) != 0){
-                    let cd = ((this.journey_data.main[e].dateRange[1]-this.journey_data.main[e].dateRange[0])/(1000*60*60*24))+1;
-                    if(cd>=steps_left){
-                        return {day: steps_left, section:e,start: (steps_left==1), end: (steps_left==cd)};
-                    }else{
-                        steps_left -= cd;
-                    }
-                }else{
-                    steps_left -= 1;
-                }
-                if(steps_left==0){
-                        return {day:0,section:e, start:true,end:true};
-                }
-            }
-            return {day:-1, section:-1};
+            this.journey_step_data.section =0;
+            this.journey_step_data.day = 1;
         },
+
         active_date: function(){
             if(this.journey_step_data.day < 0) return "?";
             if(!this.journey_data.main[this.journey_step_data.section].dateRange) return "?";
@@ -214,19 +186,20 @@ const app = new Vue({
             return this.format_date(date)
         },
         format_date: function(d){
-            var dt = d.toJSONLocal().slice(0, 10);
-            return        dt.slice(8, 10) + '/' 
-                        + dt.slice(5, 7) + '/' 
-                        + dt.slice(0, 4) + ' ('
-                        + ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][d.getDay()]
-                        +')';
+            return ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][d.getDay()] + ' ' 
+                + d.getDate() + ' '
+                + ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][d.getMonth()];
         },
 
         rm_section: function(idx){
             this.journey_data.main.splice(idx,1);
+            if(this.journey_step_data.section==idx){
+                this.prevprev_step();
+            }
         },
-        toggle_section_vis: function(idx){
-            this.visible_step ^= 0x1 << (idx);
+        sel_section: function(idx){
+            this.journey_step_data.section = idx;
+            this.journey_step_data.day = 0;
         },
         search_nominatim: function(txt,f){
             if(txt==""){
@@ -277,7 +250,7 @@ const app = new Vue({
             this.impexp = toEncoded(JSON.stringify(this.journey_data));
         },
         filter_selected:function(list,step){
-            return list.filter(e=>(step?(e.step==this.journey_step):(e.step>=0)))
+            return list.filter(e=>(step?(e.step==this.journey_step_data.day):(e.step>=0)))
         },
         filter_unselected:function(list){
             return list.filter(e=>(e.step==undefined || e.step<0))
@@ -299,7 +272,6 @@ const app = new Vue({
                     e.dateRange[1]= new Date(e.dateRange[1]);
                 }
             }
-            this.journey_step_data = this.step_convert(this.journey_step);
         });
         this.debounceSave = _.debounce(this.save_data, 500)
         this.debounceSearch = {"hotel":_.debounce((q)=>{this.querying.hotel=true;this.search_nominatim(q,(r)=>(r.type=="hotel" || r.type=="hostel")).then((r)=>{this.querying.hotel=false});}, 500),
@@ -312,16 +284,7 @@ const app = new Vue({
     watch: {
         journey_data: {
             handler:function (ndata, odata){ 
-                this.debounceSave()
-                if(ndata.main.length == odata.main.length){
-                    for(let d in ndata.main){
-                        if(ndata.main[d].hotel != odata.main[d].hotel){
-                            if(ndata.main[d].hotel.latlon){
-                                this.journey_data.main[d].map.center=ndata.main[d].hotel.latlon;
-                            }
-                        }
-                    }
-                }
+                this.debounceSave();
             },
             deep: true,
         },

server.js

@@ -23,7 +23,6 @@ fastify.register(require('./router/api'), { prefix: '/api' });
 
 
 fastify.get('/', (req, reply) => reply.view("/template/home.pug", ));
-
 fastify.get('/:id', (req, reply) => reply.view('/template/journey.pug'));
 fastify.get('/view/:id', (req, reply) => reply.view('/template/view.pug'));
 fastify.get('/short/:id', (req, reply) => reply.view('/template/short.pug'));

template/journey.pug

@@ -4,11 +4,7 @@ include module/head.pug
 
 main#app
   include module/nav.pug
-  div(v-if='journey_step==-1')
-    div(v-for='(item,idx) in journey_data.main' :class="idx%2===0 ? 'bg-dark text-white' : ''" v-cloak='')
   include module/journey_sec.pug
-    include module/journey_sec_add.pug
-  div(v-else)
   include module/journey_step.pug
   include module/importexport.pug
 include module/foot.pug

template/module/foot.pug

@@ -7,6 +7,10 @@ script(src='https://unpkg.com/axios/dist/axios.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/vuedraggable/dist/vuedraggable.umd.min.js')
+
 script(src='/public/js/main.js' type='text/javascript' charset='utf-8')
 footer.bg-dark
   .container

template/module/journey_sec.pug

@@ -1,71 +1,9 @@
-.container.section
-  .row.text-center
-    .col-auto
-      button.button.button--secondary.button--mobileFull(v-on:click='rm_section(idx)') X
-    .col-auto
-      button.button.button--secondary.button--mobileFull(v-on:click='toggle_section_vis(idx)') -
-    .input.col-sm-4
-      input(v-model='item.title' type='text')
-  .row(v-if='visible_step & (0x1 << idx)')
-    .col-12.col-sm-8
-      l-map(:zoom.sync='item.map.zoom' :center.sync='item.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='item.hotel' :lat-lng.sync='item.hotel.latlon')
-          l-icon
-            div(v-html="generate_icon(item.hotel,'darkblue')")
-          l-popup
-            h1.row.text-medium.text-center {{item.hotel.sname}}
-            span.row.text-small.text-gray {{item.hotel.display_name}}
-            .row.input
-              textarea-autosize.col-12.col-sm-10.text-small(placeholder='Notes' v-model='item.hotel.notes' :min-height='30' :max-height='350')
-          //
-            <l-tooltip :options="{ permanent: true, interactive: true }">
-            <div>
-            H
-            </div>
-            </l-tooltip>
-        l-marker(v-for='place in item.places.restaurants' :lat-lng.sync='place.latlon')
-          l-icon
-            div(v-html="generate_icon(place,'cadetblue')")
-          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')
-        l-marker(v-for='place in item.places.activities' :lat-lng.sync='place.latlon')
-          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')
-    .col-12.col-sm-4
-      .row.text-center
-        div
-          label Date Range
-        .input.text-dark
-          date-picker(:lang='lang' v-model='item.dateRange' range='' placeholder='Date Range')
-      .row.text-center
-        div
-          label Hotel
-        multiselect#ajax(v-model='item.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 Fight
-        multiselect#ajax(v-model='item.flightA' label='label' track-by='id' placeholder='Type to search' open-direction='bottom' :multiple='true' :options='query.flight' :searchable='true' :loading='querying.flight' :internal-search='false' :clear-on-select='false' :options-limit='50' :limit='10' :max-height='600' @search-change='debounceSearch.flight')
-        multiselect#ajax(v-model='item.flightB' label='label' track-by='id' placeholder='Type to search' open-direction='bottom' :multiple='true' :options='query.flight' :searchable='true' :loading='querying.flight' :internal-search='false' :clear-on-select='false' :options-limit='50' :limit='10' :max-height='600' @search-change='debounceSearch.flight')
-      .row.text-center
-        div
-          label Restoration
-        multiselect#ajax(v-model='item.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='item.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='item.notes' placeholder='Notes' :min-height='30' :max-height='350')
+draggable(tag='ul' :list='journey_data.main' class='col-1 list-group p-abs' handle='.handle')
+  div.list-group-item.handle(v-for='(element, idx) in journey_data.main' :key='idx' @click='sel_section(idx)' :style='journey_step_data.section==idx?"left:10px":""')
+    span.text {{element.title}}
+    //- input.col-12.input(disabled='' :value='element.title' style='display:block;margin:0;') 
+    i.fa.fa-times.close.fright(style='top:2px;right:2px;position:absolute;' @click='rm_section(idx)')
+
+  div.list-group-item()
+    span.text Add Section 
+    i.fa.fa-plus.add(@click='add_section()')

template/module/journey_sec_add.pug

@@ -1,4 +0,0 @@
-.bg-dark
-  .container-medium.section
-#go.container-medium.section.text-white
-  button.button.button--primary.button--mobileFull(v-on:click='add_section') Add Section

template/module/journey_step.pug

@@ -1,72 +1,40 @@
-.bg-dark.text-white
+- 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-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]')
+          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()')
+          input(disabled='' :value='active_date() + " (" + journey_step_data.day+")"')
       .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
+        .col-9.col-ssm-12
+          include map.pug
+          +map(map_section)
+      
+        .col-3.col-ssm-12
+          .row.text-center
             div
-  .container-medium.section
-.bg-dark
+              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')

template/module/map.pug

@@ -0,0 +1,42 @@
+mixin map(section_str)
+  l-map(
+    :zoom.sync=section_str+'.map.zoom' 
+    :center.sync=section_str+'.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=section_str+'.hotel && '+section_str+'.hotel.icon' :lat-lng=section_str+'.hotel.latlon')
+      l-icon
+        div(v-html='generate_icon('+section_str+'.hotel,"darkblue")')
+      l-popup
+        h1.row.text-medium.text-center {{ #{section_str}.hotel.sname}}
+        span.row.text-small.text-gray {{ #{section_str}.hotel.display_name}}
+        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')
+        span.row.text-small.text-white(v-else) {{ #{section_str}.hotel.notes}}
+    l-marker(v-for='place in '+section_str+'.places.activities' :lat-lng='place.latlon')
+      l-icon
+
+        div(v-if='place.step==journey_step_data.day' 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")')
+      l-popup
+        h1.row.text-medium.text-center {{place.sname}}
+        span.row.text-small.text-gray {{place.display_name}}
+        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')
+          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-icon
+        div(v-html="generate_icon(place,'cadetblue')")
+      l-popup
+        h1.row.text-medium.text-center {{place.sname}}
+        span.row.text-small.text-gray {{place.display_name}}
+        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')
+        span.row.text-small.text-dark(v-else) {{place.notes}}

template/module/view_step.pug

@@ -1,7 +1,5 @@
+- var map_section = 'journey_data.main[journey_step_data.section]'
 .bg-dark.text-white(v-cloak='')
-  .text-small.fright(style='margin:6px 12px;')
-    a(:href="'/'+journey_id")
-      i.fas.fa-tools
   .container.section
     .aligner.text-center.text-white.text-huge(style='margin-bottom:5px')
       .aligner--itemTop.fleft
@@ -9,45 +7,15 @@
           i.fas.fa-angle-left
       span.container
         div
-          | {{journey_data.main[journey_step_data.section].title + ': Day ' + journey_step_data.day}}
-        .text-big.text-gray {{journey_data.step_title[journey_step]}}
+          | {{ #{map_section}.title + ': Day ' + 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')
           i.fas.fa-angle-right
     .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}}
-              span.row.text-small.text-white {{journey_data.main[journey_step_data.section].hotel.notes}}
-          l-marker(v-for='place in journey_data.main[journey_step_data.section].places.activities' :lat-lng='place.latlon' 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}}
-              span.row.text-small.text-dark {{place.notes}}
-          l-marker(v-for='place in journey_data.main[journey_step_data.section].places.activities' :lat-lng='place.latlon' v-if='place.step==undefined || place.step==-1')
-            l-icon
-              div(v-html="generate_icon(place,'gray')")
-            l-popup
-              h1.row.text-medium.text-center {{place.sname}}
-              span.row.text-small.text-gray {{place.display_name}}
-              span.row.text-small.text-dark {{place.notes}}
-          l-marker(v-for='place in journey_data.main[journey_step_data.section].places.restaurants' :lat-lng.sync='place.latlon')
-            l-icon
-              div(v-html="generate_icon(place,'cadetblue')")
-            l-popup
-              h1.row.text-medium.text-center {{place.sname}}
-              span.row.text-small.text-gray {{place.display_name}}
-              span.row.text-small.text-dark {{place.notes}}
+        include map.pug
+        +map(map_section)
     .row
       .col-12.col-sm-12
         .container