AutoDateFixing

public/js/main.js

@@ -133,21 +133,23 @@ const app = new Vue({
             if(this.journey_data.main==undefined) this.journey_data.main=[];
             this.journey_data.main.push({title:"?",step_title:[],map:{zoom:2}, hotel:{latlon:[0,0]},places:{restaurants:[],places:[]}});
         },
+        step_len: function(idx){
+            return this.journey_data.main[idx].dateRange?
+                ((this.journey_data.main[idx].dateRange[1]-this.journey_data.main[idx].dateRange[0])/(1000*60*60*24))+1
+                : 1;
+        },
         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.journey_data.main[s].dateRange[1]-this.journey_data.main[s].dateRange[0])/(1000*60*60*24))+1 :
-                0;
+                this.step_len(s):0;
                     
             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 = 1;
-                }else{
-                    this.journey_step_data.day = 1;
                 }
+                this.journey_step_data.day = 1;
             }
 
         },
@@ -161,8 +163,7 @@ const app = new Vue({
                     let s = this.journey_step_data.section;
                     
                     let cd = this.journey_data.main[s].dateRange? 
-                        ((this.journey_data.main[s].dateRange[1]-this.journey_data.main[s].dateRange[0])/(1000*60*60*24))+1 :
-                        0;
+                        this.step_len(s):0;
                     this.journey_step_data.day = cd ;
                 }
             }
@@ -196,6 +197,43 @@ const app = new Vue({
                 + d.getDate() + ' '
                 + ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][d.getMonth()];
         },
+        update_date: function(idx){
+            let dateRange = this.journey_data.main[idx].dateRange;
+            let start_end = [0,0];
+            let step_len = 0;
+
+            let last_start = dateRange[0];
+            for(let i = idx-1; i >=0; --i){
+                step_len = this.step_len(i)-1;
+                if (this.journey_data.main[i].dateRange){
+                    start_end = [last_start.getDate() - step_len, last_start.getDate()];
+                }else{
+                    this.journey_data.main[i].dateRange= [new Date(), new Date()] 
+                    start_end = [last_start.getDate() - step_len, last_start.getDate()];
+                }
+                this.journey_data.main[i].dateRange[0].setTime(last_start.getTime())
+                this.journey_data.main[i].dateRange[0].setDate(start_end[0]);
+                this.journey_data.main[i].dateRange[1].setTime(last_start.getTime())
+                this.journey_data.main[i].dateRange[1].setDate(start_end[1]);
+                last_start = this.journey_data.main[i].dateRange[0];
+            }
+
+            let last_end = dateRange[1];
+            for(let i = idx+1; i<this.journey_data.main.length; ++i){
+                step_len = this.step_len(i)-1;
+                if (this.journey_data.main[i].dateRange){
+                    start_end = [last_end.getDate(), last_end.getDate() + step_len];
+                }else{
+                    this.journey_data.main[i].dateRange= [new Date(), new Date()] 
+                    start_end = [last_end.getDate(), last_end.getDate() + step_len];
+                }
+                this.journey_data.main[i].dateRange[0].setTime(last_end.getTime())
+                this.journey_data.main[i].dateRange[0].setDate(start_end[0]);
+                this.journey_data.main[i].dateRange[1].setTime(last_end.getTime())
+                this.journey_data.main[i].dateRange[1].setDate(start_end[1]);
+                last_end = this.journey_data.main[i].dateRange[1];
+            }
+        },
 
         rm_section: function(idx){
             this.journey_data.main.splice(idx,1);

template/journey.pug

@@ -2,7 +2,7 @@ doctype html
 
 include module/head.pug
 
-main#app
+main#app(v-cloak)
   include module/nav.pug
   include module/journey_sec.pug
   include module/journey_step.pug

template/module/journey_step.pug

@@ -18,9 +18,9 @@ div(v-for='(e, idx) in journey_data.main' :key='idx')
         .col-3.col-ssm-12
           .row.text-center
             div
-              label Date Range
+              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')
+              date-picker(:lang='lang' v-model=map_section+'.dateRange' range='' format='ddd D MMM' placeholder='Date Range' v-on:change='update_date(idx)')
           .row.text-center
             div
               label Hotel

template/module/view_step.pug

@@ -1,5 +1,5 @@
 - var map_section = 'journey_data.main[journey_step_data.section]'
-.bg-dark.text-white(v-cloak='')
+.bg-dark.text-white
   .container.section
     .aligner.text-center.text-white.text-huge(style='margin-bottom:5px')
       .aligner--itemTop.fleft

template/short.pug

@@ -1,6 +1,6 @@
 doctype html
 include module/head.pug
-main#app
+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' : ''")
     include module/short_sec.pug

template/view.pug

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