Keybind and view fix

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 || [];
             }
         });

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}}

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')

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

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
+
+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