diff --git a/public/js/main.js b/public/js/main.js index 009fd4d..1977f0d 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -141,15 +141,16 @@ const app = new Vue({ next_step: function(){ this.journey_step_data.day += 1; let s = this.journey_step_data.section; - let cd = this.journey_data.main[s].dateRange? - this.step_len(s):0; + let cd = this.step_len(s); 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.journey_step_data.section = this.journey_data.main.length-1; + this.journey_step_data.day = cd + }else{ + this.journey_step_data.day = 1; } - this.journey_step_data.day = 1; } }, @@ -162,8 +163,7 @@ const app = new Vue({ }else{ let s = this.journey_step_data.section; - let cd = this.journey_data.main[s].dateRange? - this.step_len(s):0; + let cd = this.step_len(s); this.journey_step_data.day = cd ; } } @@ -290,8 +290,10 @@ const app = new Vue({ import_data:function(){ this.journey_data = Object.assign({}, JSON.parse(toDecoded(this.impexp))); this.journey_data.main.forEach(e=>{ - e.dateRange[0] = new Date(e.dateRange[0]); - e.dateRange[1] = new Date(e.dateRange[1]); + if(e.dateRange){ + e.dateRange[0] = new Date(e.dateRange[0]); + e.dateRange[1] = new Date(e.dateRange[1]); + } }) }, export_data:function(){ @@ -308,18 +310,31 @@ const app = new Vue({ list.splice(idx, 1); }, log:function(e){console.log(e)}, + + keyboardEvent (e) { + if (e.which === 13) { + } + }, }, created: function () { + + window.addEventListener('keydown', (e) => { + switch(e.key){ + case 'ArrowLeft': this.prev_step(); break; + case 'ArrowRight': this.next_step(); break; + default: console.log(e.key); + } + }); + axios.get('/api/'+this.journey_id).then(response =>{ if(response.data=='') throw "Invalid Journey Data Received"; app.journey_data = response.data; for(let e of app.journey_data.main){ - if(e.dateRange && e.dateRange.length===2){ + if(e.dateRange){ e.dateRange[0]= new Date(e.dateRange[0]); e.dateRange[1]= new Date(e.dateRange[1]); } - e.flight = undefined; e.step_title = e.step_title || []; } }); diff --git a/template/module/map.pug b/template/module/map.pug index dad7d88..5a32b85 100644 --- a/template/module/map.pug +++ b/template/module/map.pug @@ -16,10 +16,10 @@ mixin map(section_str) 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")') + div(v-else) l-popup h1.row.text-medium.text-center {{place.sname}} span.row.text-small.text-gray {{place.display_name}} diff --git a/template/module/nav.pug b/template/module/nav.pug index a910d2c..8c06f85 100644 --- a/template/module/nav.pug +++ b/template/module/nav.pug @@ -10,7 +10,7 @@ header.header a(:href="'/short/'+journey_id") i.fas.fa-file-contract .col-sm-2 - a(:href="'/view/'+journey_id +'#0'") + a(:href="'/view/'+journey_id") i.fas.fa-camera .col-sm-2 a(href='#main' v-on:click.prevent='first_step') diff --git a/template/module/nav_pub.pug b/template/module/nav_pub.pug index 8fbc8e5..2718ed3 100644 --- a/template/module/nav_pub.pug +++ b/template/module/nav_pub.pug @@ -10,5 +10,5 @@ header.header a(:href="'/short/'+journey_id") i.fas.fa-file-contract .col-sm-3 - a(:href="'/view/'+journey_id +'#0'") + a(:href="'/view/'+journey_id") i.fas.fa-camera \ No newline at end of file diff --git a/template/module/view_step.pug b/template/module/view_step.pug index 3f6342a..217963d 100644 --- a/template/module/view_step.pug +++ b/template/module/view_step.pug @@ -1,21 +1,23 @@ - var map_section = 'journey_data.main[journey_step_data.section]' -.bg-dark.text-white - .container.section - .aligner.text-center.text-white.text-huge(style='margin-bottom:5px') - .aligner--itemTop.fleft - a(href='#prev' v-on:click.prevent='prev_step') - i.fas.fa-angle-left - span.container - div - | {{ #{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 - include map.pug - +map(map_section) - .row - .col-12.col-sm-12 - .container \ No newline at end of file + +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--itemTop.fleft + a(href='#prev' v-on:click.prevent='prev_step') + i.fas.fa-angle-left + span.container + div + | {{ #{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 + include map.pug + +map(map_section) + .row + .col-12.col-sm-12 + .container \ No newline at end of file