diff --git a/public/css/index.css b/public/css/index.css
index 71aa092..7f5a122 100644
--- a/public/css/index.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/public/js/main.js b/public/js/main.js
index fcc0dc0..ea9d015 100644
--- a/public/js/main.js
+++ b/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,
},
diff --git a/server.js b/server.js
index 7f0c542..fe33c25 100644
--- a/server.js
+++ b/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'));
diff --git a/template/journey.pug b/template/journey.pug
index 85d46dc..eb8e944 100644
--- a/template/journey.pug
+++ b/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/journey_sec.pug
+ include module/journey_step.pug
include module/importexport.pug
include module/foot.pug
\ No newline at end of file
diff --git a/template/module/foot.pug b/template/module/foot.pug
index 7459ad8..15baaba 100644
--- a/template/module/foot.pug
+++ b/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
diff --git a/template/module/journey_sec.pug b/template/module/journey_sec.pug
index 1044bb1..67bdd08 100644
--- a/template/module/journey_sec.pug
+++ b/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='© OpenStreetMap 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')
- //
-
-
- H
-
-
- 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')
\ No newline at end of file
+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()')
\ No newline at end of file
diff --git a/template/module/journey_sec_add.pug b/template/module/journey_sec_add.pug
deleted file mode 100644
index c1be089..0000000
--- a/template/module/journey_sec_add.pug
+++ /dev/null
@@ -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
\ No newline at end of file
diff --git a/template/module/journey_step.pug b/template/module/journey_step.pug
index 805b624..f8568be 100644
--- a/template/module/journey_step.pug
+++ b/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='© OpenStreetMap 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
\ No newline at end of file
+- 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')
diff --git a/template/module/map.pug b/template/module/map.pug
new file mode 100644
index 0000000..dad7d88
--- /dev/null
+++ b/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='© OpenStreetMap 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}}
\ No newline at end of file
diff --git a/template/module/view_step.pug b/template/module/view_step.pug
index 0ca1ad8..85dde41 100644
--- a/template/module/view_step.pug
+++ b/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='© OpenStreetMap 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
\ No newline at end of file