dev merge (#163)

Co-authored-by: soraefir
Co-authored-by: sora-ext
Reviewed-on: #163

src/template/module/journey/impexp.pug

@@ -1,13 +0,0 @@
-.impexp
-  .container-medium.section
-    .aligner
-      .input.col-sm-4
-        input(v-model="impexp", type="text")
-      .col-sm-2
-        button.button.button--primary.button--mobileFull(
-          v-on:click="import_data"
-        ) Import
-      .col-sm-2
-        button.button.button--primary.button--mobileFull(
-          v-on:click="export_data"
-        ) Export

src/template/module/journey/leg/drawer-notes.pug

@@ -1,8 +1,9 @@
-.col-12.input.text-dark()
+.w-100.input()
     textarea.text-small#query_note(
             v-model="journey.leg_get().notes"
+            rows="1"
             @input="refreshTextAreaHeight"
             @focus="refreshTextAreaHeight"
-            rows="1"
             placeholder="...",
-    )
+    )
+    

src/template/module/journey/leg/drawer.pug

@@ -1,5 +1,5 @@
 
-.col-12.input.text-dark
+.input.w-100.text-dark
     input#query_input(
         type="search"
         @input="search_active"
@@ -7,6 +7,7 @@
         placeholder="Search ... "
         style="width:85%;"
         :disabled="query.note"
+        v-model="query.query"
     )
     .spinner(v-if="query.load")
 
@@ -23,7 +24,8 @@ div(v-if="['hotel', 'restaurant', 'place','other', 'travel'].indexOf(query.type)
         .bg-dark.divider(
             :key="'qdiv'+idx" style="height:1px" )
     .query-result.col-12.bg-white.text-dark(
-        v-if="query.load==false && query.res.length==0" )
+        v-if="query.load==false && query.res.length>=0 && query.query!=''"
+            @click="query.addmarker=true"  )
         div( v-html="generate_icon('star', 'var(--dark)')")
         .col-10()
             | Add custom
@@ -40,7 +42,7 @@ div(v-else-if="['flight'].indexOf(query.type)>=0")
             div( v-html="generate_icon('plane', 'var(--dark)')")
             .col-10()
                 | {{ item.from  }} => {{item.to}}  
-        bg-dark.divider(
+        .bg-dark.divider(
             :key="'qdiv'+idx" style="height:1px" )
 div(v-else)
     template()

src/template/module/journey/leg/nav.pug

@@ -1,34 +0,0 @@
-.scroll-handler.row(
-  @mouseleave="nav_mouseleave"
-  @mousemove="nav_mousemove")
-
-  .col-3.col-sm-2.col-md-1
-    .list-group.text-dark.h-100
-      .fleft.list-group-item.bg-white.text-small.rounded.h-100(v-on:click.prevent="journey.leg_prev()")
-        i.fas.fa-angle-left
-  .col-6.col-sm-8.col-md-10
-    draggable.scroll-content.list-group.bg-dark(
-      tag="div",
-      :list="journey.data.main",
-      handle=".handle"
-    )
-      .list-group-item.handle.text-dark(
-        v-for="(element, idx) in journey.data.main",
-        :key="idx",
-        @click="journey.leg_sel(idx)",
-        :class="journey.sel_leg == idx ? 'bg-primary' : 'bg-white'"
-      )
-        .text {{ element.title || "Leg "+idx}}
-        i.fa.fa-times.close.fright(
-          style="top: 2px; right: 2px; position: absolute",
-          @click="journey.rm_leg(idx)"
-        )
-      .list-group-item.bg-dark
-      .list-group-item.bg-white.text-dark(@click="journey.add_leg()")
-        div 
-          i.fa.fa-plus.add()
-
-  .col-3.col-sm-2.col-md-1
-    .list-group.text-dark.h-100
-      a.fright.list-group-item.bg-white.text-small.rounded.h-100(v-on:click.prevent="journey.leg_next()")
-        i.fas.fa-angle-right

src/template/module/journey/leg/top.pug

@@ -1,36 +0,0 @@
-.row.text-center.align
-    .col-5.col-sm-4.col-md-2
-        .input
-            input(
-            placeholder="Leg" 
-            v-model="journey.leg_get().title")
-
-    .col-5.col-sm-4.col-md-2.mr-auto
-        .input
-            input(
-            placeholder="Day"
-            v-model="journey.leg_get().day_title[journey.sel_day]"
-        )
-    .col-8.col-sm-6.col-md-4
-        .input
-            //- label Date Range ({{ journey.leg_len() }})
-            date-picker(
-            :lang="lang",
-            v-model="journey.leg_get().date_range",
-            range="",
-            format="ddd D MMM",
-            placeholder="Date Range",
-            v-on:change="journey.date_update(journey.sel_leg)"
-        )
-    .col-4.col-sm-4.col-md-3.ml-auto
-        .input
-            input(
-            disabled="",
-            :value="journey.date_sel() + ' (' + journey.sel_day + ')'"
-            )
-        //- .col-6.list-group-item.align.center.bg-white(style="padding: 0.5rem 0;")
-        //-   i.fas.fa-angle-double-right(v-on:click.prevent="journey.day_next()")
-              .col-sm-1.text-small
-       
-        //- a(href="#prev", v-on:click.prevent="journey.day_prev()")
-          i.fas.fa-angle-left

src/template/module/journey/leg/top_day.pug

@@ -0,0 +1,54 @@
+.row
+  .mr-auto.col-auto
+    .list-group.text-dark
+      .list-group-item.show.bg-white.rounded(v-on:click.prevent="journey.day_prev(); focus_day(journey);")
+        i.fas.fa-angle-left
+  .col-8.col-sm-8.col-md-10.scroll-handler(
+  @pointerleave="nav_mouseleave"
+  @pointermove="nav_mousemove")
+  
+    draggable.scroll-content.nav-day.list-group.bg-dark(
+      tag="div",
+      :list="journey.leg_get().day_title",
+      handle=".handle"
+    )
+      .list-group-item.bg-white.text-white.show.placeholder-left(
+        :class="journey.sel_day >0? '': 'bg-dark'"
+        slot="header"
+      )
+        .text {{'⋅'}}
+      .list-group-item.handle.text-dark(
+        v-for="(element, idx) in journey.leg_len()",
+        :key="idx",
+        @click="journey.day_sel(idx)",
+        :class="journey.sel_day == idx ? 'bg-primary active' : 'bg-white'"
+      )
+        .text {{ journey.leg_get().day_title[idx] || "Leg "+idx}}
+      .list-group-item.bg-white.text-white.show.placeholder-right(
+        :class="journey.sel_leg < journey.data.main.length-1? '': 'bg-dark'"
+        slot="footer"
+      )
+        .text {{'⋅'}}
+      .list-group-item.bg-dark.text-white(
+          style="display:none"
+          slot="footer"
+      )
+        .text {{'⋅'}}
+
+  .ml-auto.col-auto
+    .list-group.text-dark
+      .list-group-item.show.bg-white.rounded(v-on:click.prevent="journey.day_next(); focus_day(journey);")
+        i.fas.fa-angle-right
+.row
+  .col-8.col-sm-6.col-md-4
+    .input.w-100
+      input.col-8(
+      placeholder="Day"
+      v-model="journey.leg_get().day_title[journey.sel_day]"
+      )
+  .ml-auto.col-4.col-sm-4.col-md-3
+    .input.w-100
+      input.text-right(
+      disabled="",
+      :value="journey.date_sel() + ' (' + journey.sel_day + ')'"
+      )

src/template/module/journey/leg/top_leg.pug

@@ -0,0 +1,61 @@
+.row
+  .mr-auto.col-auto
+    .list-group.text-dark
+      .list-group-item.show.bg-white.rounded(v-on:click.prevent="journey.leg_prev(); focus_leg(journey);")
+        i.fas.fa-angle-left
+  .col-8.col-sm-8.col-md-10.scroll-handler(
+  @pointerleave="nav_mouseleave"
+  @pointermove="nav_mousemove")
+  
+    draggable.scroll-content.nav-leg.list-group.bg-dark(
+      tag="div",
+      :list="journey.data.main",
+      handle=".handle"
+    )
+      .list-group-item.bg-white.text-white.show.placeholder-left(
+        :class="journey.sel_leg >0? '': 'bg-dark'"
+        slot="header"
+      )
+        .text {{'⋅'}}
+      .list-group-item.handle.text-dark(
+        v-for="(element, idx) in journey.data.main",
+        :key="idx",
+        @click="journey.leg_sel(idx)",
+        :class="journey.sel_leg == idx ? 'bg-primary active' : 'bg-white'"
+      )
+        .text {{ element.title || "Leg "+idx}}
+        i.fa.fa-times.text-small.fright(
+          style="top: 2px; right: 2px; position: absolute",
+          @click="journey.rm_leg(idx); focus_leg(journey);"
+        )
+      .list-group-item.bg-white.text-white.show.placeholder-right(
+        :class="journey.sel_leg < journey.data.main.length-1? '': 'bg-dark'"
+        slot="footer"
+      )
+        .text {{'⋅'}}
+      .list-group-item.bg-white.text-dark.add(@click="journey.add_leg(); focus_leg(journey);"
+        slot="footer"
+        :class="journey.sel_leg >= journey.data.main.length-1? 'show': ''")
+        div 
+          i.fa.fa-plus()
+
+  .ml-auto.col-auto
+    .list-group.text-dark
+      .list-group-item.show.bg-white.rounded(v-on:click.prevent="journey.leg_next(); focus_leg(journey);")
+        i.fas.fa-angle-right
+.row.text-center
+    .col-6.col-sm-6.col-md-5.mr-auto
+      .input.w-100
+          input(
+          placeholder="Leg" 
+          v-model="journey.leg_get().title")
+    .col-6.col-sm-6.col-md-4
+        .input.w-100
+            date-picker(
+            :lang="lang",
+            v-model="journey.leg_get().date_range",
+            range="",
+            format="ddd D MMM",
+            placeholder="Date Range",
+            v-on:change="journey.date_update(journey.sel_leg)"
+        )

src/template/module/journey/main.pug

@@ -1,31 +1,25 @@
-.row.fleft(style="position:absolute;right:0;")
-  .col-1
-    a(:href="'/short/' + journey.id")
-      i.fas.fa-file-contract
-  .col-1
-    a(:href="'/view/' + journey.id")
-      i.fas.fa-camera
-  .col-1
-    a(href="#", v-on:click.prevent="first_step")
-      i.fas.fa-tools
-
+include smallbar.pug
 
 .bg-dark.text-white(v-if="journey && journey.leg_get()")
   .container
-    .row.align(style="padding-top:45px;")
-      .col-6.col-sm-4.col-md-3.input.text-big
-        input.text-center(v-model="journey.data.name" placeholder="My Journey" type="text")
+    .row.align(style="padding-top:45px;position:relative")
+      .col-6.col-sm-4.col-md-3
+        .input.text-big
+          input.text-center(v-model="journey.data.name" placeholder="My Journey" type="text")
+      .col-6.col-sm-4.col-md-3( v-if="useDay" )
+        .input.text-small
+          input.text-center(v-model="journey.leg_get().title" placeholder="Leg" type="text")
       //- input.small(type="text", :placeholder="journey.date_tot() + ' (' + journey.tot_len() + ')'" )
 
-    include leg/nav.pug
-    include leg/top.pug
-    .row(style="aspect-ratio:1.25;")
+    template(v-if="useDay")
+      include leg/top_day.pug
+    template(v-else)
+      include leg/top_leg.pug
+    .row(style="aspect-ratio:1.25;min-height:432px;max-height:calc(100vh - 125px);width:calc(100% + 24px);")
       .map-container(:class=" { 'col-2 col-sm-5 col-md-8': query.type, 'col-2 col-sm-5 col-md-6': query.note , 'col-12': (!query.type  && !query.note) }" )
         include map.pug
       .row.drawer-container(:class="{ 'col-10 col-sm-7 col-md-4': query.type, 'col-10 col-sm-7 col-md-6': query.note, 'col-0': (!query.type  && !query.note) }")
-        .drawer-container(:class="{ 'col-12 ': query.type, 'col-0': !query.type }")
+        .h-100(:class="{ 'w-100 ': query.type, 'w-0': !query.type }")
           include leg/drawer.pug
-        .drawer-container(:class="{ 'col-12': query.note, 'col-0': !query.note }")
+        .h-100(:class="{ 'w-100': query.note, 'w-0': !query.note }")
           include leg/drawer-notes.pug
-
-//- include impexp.pug

src/template/module/journey/map.pug

@@ -1,15 +1,17 @@
 l-map(
-  :zoom.sync="journey.leg_get().map.zoom",
-  :center.sync="journey.leg_get().map.center",
+  :zoom.sync="journey.leg_get().map.zoom"
+  :center.sync="journey.leg_get().map.center"
+  @click="onMapClick"
   style="height:100%"
   no-blocking-animations=true
+  :style="query.addmarker?'cursor:crosshair':''"
   ref="map"
 )
   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="bottomleft", :imperial="false", :metric="true")
+  l-control-scale(position="bottomleft" :imperial="false" :metric="true")
   include map/override.pug
 
   include map/hotel.pug

src/template/module/journey/map/override.pug

@@ -1,7 +1,7 @@
 l-marker(
     v-if="map_override.active",
     v-for="(el, idx) in map_override.elements"
-    key="'ovr'+idx"
+    :key="'ovr'+idx"
     :lat-lng="el"
   )
   l-icon(v-html="generate_marker('plus', 'darkgreen')")

src/template/module/journey/smallbar.pug

@@ -0,0 +1,30 @@
+.smallbar
+  .col-auto.mr-auto(style="display:flex; flex-flow: row")
+    .col-1
+      a.text-white.tooltip(:href="'/short/' + journey.id")
+        i.fas.fa-file-contract
+        .tooltip-text Summary
+    .col-1
+      a.text-white.tooltip(:href="'/view/' + journey.id")
+        i.fas.fa-camera
+        .tooltip-text Daily
+    .col-1
+      a.text-white.tooltip(href="#", v-on:click.prevent="first_step")
+        i.fas.fa-tools
+        .tooltip-text Editor
+    .col-1
+    .col-1
+      a.text-white.tooltip(v-on:click.prevent="toast_impexp(true)")
+        i.fas.fa-file-import
+        .tooltip-text Import
+    .col-1
+      a.text-white.tooltip(v-on:click.prevent="toast_impexp(false)")
+        i.fas.fa-file-export
+        .tooltip-text Export
+
+  .col-auto.ml-auto
+    .switch.legday-switch
+      input(type="checkbox" v-model="useDay")
+      .rocker
+        .rocker-left LEG 
+        .rocker-right DAY

src/template/module/view/short_leg.pug

@@ -11,7 +11,7 @@
       )
     .col-1.col-sm-2
     .input.col-5.col-sm-3.text-dark
-      .text(disabled="" placeholder="No Hotel" :value="item.hotel?item.hotel.sname:''") {{item.hotel?item.hotel.sname:'No Hotel'}}
+      .text(disabled="" placeholder="No Hotel" :value="item.hotel?item.hotel.sname:''") {{(item.hotel?item.hotel.sname:'') || 'No Hotel'}}
   //- .row.text-center
     .input.col-sm-3(v-if="item.travel")
       div(v-for="(item, idx) in item.travel")

src/template/module/view/toast.pug

@@ -0,0 +1,14 @@
+template
+  .overlay.text-dark(v-if="toast.show" @click="")
+    .popup.bg-white(@click.stop)
+      .row
+        .col-auto.text-huge {{ toast.title }}
+      .row(v-if="toast.desc")
+        .col-auto.text-medium {{ toast.desc }}
+      .row(v-if="toast.special")
+        .col-auto.text-medium 
+          .input
+            input(v-model="toast.special") 
+      .row.align
+        button.button.bg-white(@click="toast.func" v-if="toast.acceptText") {{ toast.acceptText }}
+        button.button.bg-white(@click="toast.show=false;" v-if="toast.cancelText") {{ toast.cancelText }}