wip

template/module/journey/impexp.pug

@@ -0,0 +1,13 @@
+.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

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