wip

template/journey.pug

@@ -4,7 +4,5 @@ include module/head.pug
 
 main#app(v-cloak)
   include module/nav.pug
-  include module/journey_nav.pug
-  include module/journey_leg.pug
-  include module/importexport.pug
+  include module/journey.pug
 include module/foot.pug

template/module/foot.pug

@@ -1,11 +1,11 @@
 script(src="https://unpkg.com/leaflet")
-script(src="https://unpkg.com/sortablejs")
 
 script(src="https://unpkg.com/vue@2")
 script(src="https://unpkg.com/vue2-datepicker")
 script(src="https://unpkg.com/vue-textarea-autosize")
 script(src="https://unpkg.com/vue-multiselect@2")
 script(src="https://unpkg.com/vue2-leaflet")
+script(src="https://unpkg.com/sortablejs")
 script(src="https://unpkg.com/vuedraggable")
 script(src="/public/main.js", type="text/javascript", charset="utf-8")
 footer.bg-dark

template/module/journey.pug

@@ -0,0 +1,3 @@
+.journey
+    include journey/leg.pug
+include journey/impexp.pug

template/module/journey/impexp.pug

@@ -1,4 +1,4 @@
-div
+.impexp
   .container-medium.section
     .aligner
       .input.col-sm-4
@@ -10,4 +10,4 @@ div
       .col-sm-2
         button.button.button--primary.button--mobileFull(
           v-on:click="export_data"
-        ) Export
+        ) Export

template/module/journey/leg.pug

@@ -0,0 +1,11 @@
+include leg/nav.pug
+.bg-dark.text-white(v-if="journey && journey.leg_get()")
+  .container.section
+    include leg/top.pug
+    .row(style="aspect-ratio:1.25;")
+      .map-container(:class="{ 'col-9': query.type, 'col-12': !query.type }" )
+        include map.pug
+      .drawer-container(:class="{ 'col-3': query.type, 'col-0': !query.type }")
+        include leg/drawer.pug
+        
+    include leg/old_cfg.pug 

template/module/journey/leg/drawer.pug

@@ -0,0 +1,15 @@
+.row.text-center 
+    .input.text-dark(style="width: 100%")
+        input(
+            type="search"
+            @input="search_active"
+            placeholder="Search ... "
+        )
+    ul
+        li(
+            v-for="item in query.res" 
+            :key="item.id" 
+            @mouseover="drawer_hover_item(item)" 
+            @mouseleave="drawer_hover_item()"
+            @click="drawer_click_item(item)" )
+            | {{ item.name }}

template/module/journey/leg/nav.pug

@@ -0,0 +1,23 @@
+.scroll-handler(
+  @mouveleave="nav_mouseleave"
+  @mousemove="nav_mousemove")
+  draggable.scroll-content.list-group.bg-dark(
+    tag="div",
+    :list="journey.data.main",
+    handle=".handle"
+  )
+    .list-group-item.handle(
+      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 }}
+      i.fa.fa-times.close.fright(
+        style="top: 2px; right: 2px; position: absolute",
+        @click="journey.rm_leg(idx)"
+      )
+
+    .list-group-item.bg-white(@click="journey.add_leg()")
+      .text Add Leg
+      i.fa.fa-plus.add(style="top: 12px; right: 5px; position: absolute")

template/module/journey/leg/old_cfg.pug

@@ -0,0 +1,71 @@
+div
+  div
+    .row.text-center
+        div
+            label Hotel
+            multiselect#ajax(
+            v-model="journey.leg_get().hotel",
+            label="sname",
+            track-by="place_id",
+            placeholder="Type to search",
+            open-direction="bottom",
+            :options="query.res",
+            :searchable="true",
+            :loading="query.type=='hotel'",
+            :internal-search="false",
+            :clear-on-select="false",
+            :options-limit="50",
+            :limit="1",
+            :max-height="600",
+            @search-change="search_hotel"
+          )
+    .row.text-center
+        div
+            label Restoration
+            multiselect#ajax(
+            v-model="journey.leg_get().places.restaurants",
+            label="sname",
+            track-by="place_id",
+            placeholder="Type to search",
+            open-direction="bottom",
+            :multiple="true",
+            :options="query.res",
+            :searchable="true",
+            :loading="query.type == 'restaurant'",
+            :internal-search="false",
+            :clear-on-select="false",
+            :options-limit="50",
+            :limit="10",
+            :max-height="600",
+            @search-change="search_restaurant"
+          )
+    .row.text-center
+        div
+            label Activities
+            multiselect#ajax(
+            v-model="journey.leg_get().places.activities",
+            label="sname",
+            track-by="place_id",
+            placeholder="Type to search",
+            open-direction="bottom",
+            :multiple="true",
+            :options="query.res",
+            :searchable="true",
+            :loading="query.type=='place'",
+            :internal-search="false",
+            :clear-on-select="false",
+            :options-limit="50",
+            :limit="10",
+            :max-height="600",
+            @search-change="search_place"
+          )
+    .row.text-center
+        div
+            label Notes
+            .input.text-dark(style="width: 100%")
+                textarea-autosize.text-small(
+              v-model="journey.leg_get().notes",
+              placeholder="Notes",
+              :min-height="30",
+              :max-height="350"
+            )

template/module/journey/leg/top.pug

@@ -0,0 +1,29 @@
+.row.text-center
+    .col-sm-2
+        .input
+            input(v-model="journey.leg_get().title")
+    .col-sm-2
+        .input
+            input(
+            placeholder="Day title",
+            v-model="journey.leg_get().day_title[journey.sel_day]"
+        )
+
+    .col-sm-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-sm-1
+    .right.col-sm-2
+        .input
+            input(
+            disabled="",
+            :value="journey.date_sel() + ' (' + journey.sel_day + ')'"
+            )

template/module/journey/map.pug

@@ -0,0 +1,20 @@
+l-map(
+  :zoom.sync="journey.leg_get().map.zoom",
+  :center.sync="journey.leg_get().map.center",
+  style="height:100%"
+  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="bottomright", :imperial="false", :metric="true")
+  include map/override.pug
+
+  include map/hotel.pug
+  include map/activities.pug
+  include map/restaurants.pug
+
+  include map/travel.pug
+
+  include map/right_menu.pug

template/module/journey/map/activities.pug

@@ -0,0 +1,37 @@
+l-marker(
+    v-for="(place, index) in journey.leg_get().places.activities",
+    :key="'activities'+index",
+    :lat-lng="place.latlon"
+  )
+  l-icon(
+      v-if="place.step == journey.sel_day",
+      v-html="generate_marker(place)"
+    )
+  l-icon(
+      v-else-if="place.step == -1 || place.step == undefined",
+      v-html="generate_marker(place, 'gray')"
+    )
+  l-icon(v-else-if="edit_active", v-html="generate_marker(place, 'lightgray')")
+  l-icon(v-else)
+  l-popup
+    h1.row.text-medium.text-center {{ place.sname }}
+    span.row.text-small.text-gray {{ place.display_name }}
+    span(v-if="edit_active")
+      .row.input(style="margin-bottom:0")
+        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.sel_day"
+      ) +
+    span.row.text-small.text-dark(v-else) {{ place.notes }}

template/module/journey/map/hotel.pug

@@ -0,0 +1,18 @@
+l-marker(
+    v-if="journey.leg_get().hotel",
+    :lat-lng="journey.leg_get().hotel.latlon"
+  )
+  l-icon(v-html="generate_marker(journey.leg_get().hotel, 'darkblue')")
+  l-popup
+    h1.row.text-medium.text-center {{ journey.leg_get().hotel.sname }}
+    span.row.text-small.text-gray {{ journey.leg_get().hotel.display_name }}
+    span(v-if="edit_active")
+      .row.input(style="margin-bottom:0;")
+        textarea-autosize.col-12.col-sm-12.text-small(
+          placeholder="Notes",
+          v-model="journey.leg_get().hotel.notes",
+          :min-height="30",
+          :max-height="350"
+        )
+    span.row.text-small.text-white(v-else) {{ journey.leg_get().hotel.notes }}
+  

template/module/journey/map/override.pug

@@ -0,0 +1,5 @@
+l-marker(
+    v-if="map_override.active",
+    :lat-lng="map_override.center"
+  )
+  l-icon(v-html="generate_marker('plus', 'darkgreen')")

template/module/journey/map/restaurants.pug

@@ -0,0 +1,18 @@
+l-marker(
+    v-for="(place, index) in journey.leg_get().places.restaurants",
+      :key="'restaurants'+index"
+    :lat-lng="place.latlon"
+  )
+  l-icon(v-html="generate_marker(place, 'cadetblue')")
+  l-popup
+    h1.row.text-medium.text-center {{ place.sname }}
+    span.row.text-small.text-gray {{ place.display_name }}
+    span(v-if="edit_active")
+      .row.input(style="margin-bottom:0")
+        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 }}

template/module/journey/map/right_menu.pug

@@ -0,0 +1,6 @@
+.map-menu
+    .map-menu-item( v-if="query.type" @click="query.type=''" v-html="generate_icon('close')")
+    .map-menu-item(v-if="!query.type" @click="query.type='hotel'" v-html="generate_icon('bed')")
+    .map-menu-item(v-if="!query.type" @click="query.type='restaurant'" v-html="generate_icon('utensils')")
+    .map-menu-item(v-if="!query.type" @click="query.type='place'" v-html="generate_icon('star')")
+    .map-menu-item(v-if="!query.type" @click="query.type='flight'" v-html="generate_icon('plane')")

template/module/journey/map/travel.pug

@@ -0,0 +1,9 @@
+div(v-for= "travel in journey.leg_get().travel")
+  l-polyline(:lat-lngs="travel.path" :color="travel.color || 'gray'")
+  l-marker(
+      v-for="(place, index) in travel.path"
+      :key="'plane'+index"
+      :lat-lng="place"
+    )
+    l-icon(v-html="generate_icon('plane', travel.color || 'gray', generate_rotation(index,travel.path), 'travel-path-icon')"
+      )

template/module/journey_leg.pug

@@ -1,119 +0,0 @@
-div(v-for="(e, idx) in journey.data.main", :key="idx")
-  .bg-dark.text-white(v-if="journey.sel_leg == idx")
-    .container.section
-      .row.text-center
-        .input.col-sm-2
-          input(v-model="journey.leg_get(idx).title")
-        .input.col-sm-2
-          input(
-            placeholder="Day title",
-            v-model="journey.leg_get(idx).day_title[journey.sel_day]"
-          )
-        .col-sm-3
-        .right.input.col-sm-2
-          input(
-            disabled="",
-            :value="journey.date_sel() + ' (' + journey.sel_day + ')'"
-          )
-      .row
-        .map-container(:class="{ 'col-9': !drawer_active, 'col-7': drawer_active }")
-          include map.pug
-        .drawer-container(:class="{ 'col-3': drawer_active, 'col-0': !drawer_active }")
-          .row.text-center 
-            .input.text-dark(style="width: 100%")
-                input(
-                  type="search"
-                @input="search_active"
-                placeholder="Search ... "
-              )
-            ul
-              li(
-                v-for="item in query.res" 
-                :key="item.id" 
-                @mouseover="drawer_hover_item(item)" 
-                @mouseleave="drawer_hover_item()"
-                @click="drawer_click_item(item)" )
-                | {{ item.name }}
-          
-        .col-3.col-ssm-12
-          .row.text-center
-            div
-              label Date Range ({{ journey.leg_len(idx) }})
-            .input.text-dark
-              date-picker(
-                :lang="lang",
-                v-model="journey.data.main[idx].date_range",
-                range="",
-                format="ddd D MMM",
-                placeholder="Date Range",
-                v-on:change="journey.date_update(idx)"
-              )
-          .row.text-center
-            div
-              label Hotel
-            multiselect#ajax(
-              v-model="journey.data.main[idx].hotel",
-              label="sname",
-              track-by="place_id",
-              placeholder="Type to search",
-              open-direction="bottom",
-              :options="query.res",
-              :searchable="true",
-              :loading="query.type=='hotel'",
-              :internal-search="false",
-              :clear-on-select="false",
-              :options-limit="50",
-              :limit="1",
-              :max-height="600",
-              @search-change="search_hotel"
-            )
-          .row.text-center
-            div
-              label Restoration
-            multiselect#ajax(
-              v-model="journey.data.main[idx].places.restaurants",
-              label="sname",
-              track-by="place_id",
-              placeholder="Type to search",
-              open-direction="bottom",
-              :multiple="true",
-              :options="query.res",
-              :searchable="true",
-              :loading="query.type == 'restaurant'",
-              :internal-search="false",
-              :clear-on-select="false",
-              :options-limit="50",
-              :limit="10",
-              :max-height="600",
-              @search-change="search_restaurant"
-            )
-          .row.text-center
-            div
-              label Activities
-            multiselect#ajax(
-              v-model="journey.data.main[idx].places.activities",
-              label="sname",
-              track-by="place_id",
-              placeholder="Type to search",
-              open-direction="bottom",
-              :multiple="true",
-              :options="query.res",
-              :searchable="true",
-              :loading="query.type=='place'",
-              :internal-search="false",
-              :clear-on-select="false",
-              :options-limit="50",
-              :limit="10",
-              :max-height="600",
-              @search-change="search_place"
-            )
-          .row.text-center
-            div
-              label Notes
-            .input.text-dark(style="width: 100%")
-              textarea-autosize.text-small(
-                v-model="journey.data.main[idx].notes",
-                placeholder="Notes",
-                :min-height="30",
-                :max-height="350"
-              )

template/module/journey_nav.pug

@@ -1,20 +0,0 @@
-draggable.scroll-content.list-group.bg-dark(
-  tag="div",
-  :list="journey.data.main",
-  handle=".handle"
-)
-  .list-group-item.handle(
-    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 }}
-    i.fa.fa-times.close.fright(
-      style="top: 2px; right: 2px; position: absolute",
-      @click="journey.rm_leg(idx)"
-    )
-
-  .list-group-item.bg-white(@click="journey.add_leg()")
-    .text Add Leg
-    i.fa.fa-plus.add(style="top: 12px; right: 5px; position: absolute")

template/module/map.pug

@@ -1,99 +0,0 @@
-l-map(
-  
-  :zoom.sync="journey.leg_get().map.zoom",
-  :center.sync="journey.leg_get().map.center",
-  style="padding-top: 100%"
-  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="topright", :imperial="false", :metric="true")
-  l-marker(
-    v-if="map_override.active",
-    :lat-lng="map_override.center"
-  )
-    l-icon(v-html="generate_marker('plus', 'darkgreen')")
-
-  l-marker(
-    v-if="journey.data.main[idx].hotel",
-    :lat-lng="journey.data.main[idx].hotel.latlon"
-  )
-    l-icon(v-html="generate_marker(journey.data.main[idx].hotel, 'darkblue')")
-    l-popup
-      h1.row.text-medium.text-center {{ journey.data.main[idx].hotel.sname }}
-      span.row.text-small.text-gray {{ journey.data.main[idx].hotel.display_name }}
-      span(v-if="edit_active")
-        .row.input(style="margin-bottom:0;")
-          textarea-autosize.col-12.col-sm-12.text-small(
-            placeholder="Notes",
-            v-model="journey.data.main[idx].hotel.notes",
-            :min-height="30",
-            :max-height="350"
-          )
-      span.row.text-small.text-white(v-else) {{ journey.data.main[idx].hotel.notes }}
-  l-marker(
-    v-for="(place, index) in journey.data.main[idx].places.activities",
-    :key="'activities'+index",
-    :lat-lng="place.latlon"
-  )
-    l-icon(
-        v-if="place.step == journey.sel_day",
-        v-html="generate_marker(place)"
-      )
-    l-icon(
-        v-else-if="place.step == -1 || place.step == undefined",
-        v-html="generate_marker(place, 'gray')"
-      )
-    l-icon(v-else-if="edit_active", v-html="generate_marker(place, 'lightgray')")
-    l-icon(v-else)
-    l-popup
-      h1.row.text-medium.text-center {{ place.sname }}
-      span.row.text-small.text-gray {{ place.display_name }}
-      span(v-if="edit_active")
-        .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.sel_day"
-        ) +
-      span.row.text-small.text-dark(v-else) {{ place.notes }}
-  l-marker(
-    v-for="(place, index) in journey.data.main[idx].places.restaurants",
-      :key="'restaurants'+index"
-    :lat-lng="place.latlon"
-  )
-    l-icon(v-html="generate_marker(place, 'cadetblue')")
-    l-popup
-      h1.row.text-medium.text-center {{ place.sname }}
-      span.row.text-small.text-gray {{ place.display_name }}
-      span(v-if="edit_active")
-        .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 }}
-
-  div(v-for= "travel in journey.data.main[idx].travel")
-    l-polyline(:lat-lngs="travel.path" :color="travel.color || 'gray'")
-    l-marker(
-      v-for="(place, index) in travel.path"
-      :key="'plane'+index"
-      :lat-lng="place"
-    )
-      l-icon(v-html="generate_icon('plane', travel.color || 'gray', generate_rotation(index,travel.path))")

template/short.pug

@@ -1,10 +1,10 @@
 doctype html
 include module/head.pug
 main#app(v-cloak)
-  include module/nav_pub.pug
+  include module/view/nav.pug
   div(
     v-for="(item, idx) in journey.data.main",
     :class="idx % 2 === 0 ? 'bg-dark text-white' : ''"
   )
-    include module/short_sec.pug
+    include module/view/short_leg.pug
 include module/foot.pug

template/view.pug

@@ -2,5 +2,5 @@ doctype html
 include module/head.pug
 main#app(v-cloak)
   div(v-if="journey.data.main[journey.sel_leg] != undefined")
-    include module/view_step.pug
+    include module/view/view_day.pug
 include module/foot.pug