dev (#160)

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

src/template/module/foot.pug

@@ -0,0 +1,13 @@
+script(src="https://unpkg.com/leaflet")
+
+script(src="https://unpkg.com/vue@2")
+script(src="https://unpkg.com/vue2-datepicker")
+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.section
+  .container.text-center.text-small.text-white
+        | Built with   ❤   by Helcel
+        br
+        span.text-small.text-gray v0.0.1

src/template/module/head.pug

@@ -0,0 +1,18 @@
+head
+  title Helcel-OTM
+  link(rel="shortcut icon", href="/public/img/helcel.ico", type="image/x-icon")
+  meta(charset="utf-8")
+  meta(name="viewport", content="width=device-width, initial-scale=1")
+  link(
+    rel="stylesheet",
+    href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,700,300",
+    type="text/css"
+  )
+  link(rel="stylesheet", href="/public/index.css")
+
+  link(rel="stylesheet", href="https://unpkg.com/vue2-datepicker/index.css")
+  link(rel="stylesheet", href="https://unpkg.com/leaflet/dist/leaflet.css")
+  link(
+    rel="stylesheet",
+    href="https://unpkg.com/@fortawesome/fontawesome-free/css/all.min.css"
+  )

src/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

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

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

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

@@ -0,0 +1,48 @@
+
+.col-12.input.text-dark
+    input#query_input(
+        type="search"
+        @input="search_active"
+        @focus="search_active"
+        placeholder="Search ... "
+        style="width:85%;"
+        :disabled="query.note"
+    )
+    .spinner(v-if="query.load")
+
+div(v-if="['hotel', 'restaurant', 'place','other', 'travel'].indexOf(query.type)>=0")
+    template(v-for="(item, idx) in query.res" )
+        .query-result.col-12.bg-white.text-dark(
+            :key="'q'+idx" 
+            @mouseover="drawer_hover_item(item)" 
+            @mouseleave="drawer_hover_item()"
+            @click="drawer_click_item(item)" )
+            div( v-html="generate_icon(item, 'var(--dark)')")
+            .col-10()
+                | {{ item.name }}
+        .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" )
+        div( v-html="generate_icon('star', 'var(--dark)')")
+        .col-10()
+            | Add custom
+
+    .col-12.text-white.text-center(
+        ) {{query.load? `Loading ...` : `Found ${query.res.length} results`}}
+div(v-else-if="['flight'].indexOf(query.type)>=0")
+    template(v-for="(item, idx) in query.res" )
+        .query-result.col-12.bg-white.text-dark(
+            :key="'q'+idx" 
+            @mouseover="drawer_hover_item(item)" 
+            @mouseleave="drawer_hover_item()"
+            @click="drawer_click_item(item)" )
+            div( v-html="generate_icon('plane', 'var(--dark)')")
+            .col-10()
+                | {{ item.from  }} => {{item.to}}  
+        bg-dark.divider(
+            :key="'qdiv'+idx" style="height:1px" )
+div(v-else)
+    template()
+        .query-result.col-12.bg-white.text-dark()
+        | Unsuppored Query type {{query.type}}

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

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

@@ -0,0 +1,36 @@
+.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/main.pug

@@ -0,0 +1,31 @@
+.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
+
+
+.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")
+      //- 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;")
+      .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 }")
+          include leg/drawer.pug
+        .drawer-container(:class="{ 'col-12': query.note, 'col-0': !query.note }")
+          include leg/drawer-notes.pug
+
+//- include impexp.pug

src/template/module/journey/map.pug

@@ -0,0 +1,21 @@
+l-map(
+  :zoom.sync="journey.leg_get().map.zoom",
+  :center.sync="journey.leg_get().map.center",
+  style="height:100%"
+  no-blocking-animations=true
+  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")
+  include map/override.pug
+
+  include map/hotel.pug
+  include map/activities.pug
+  include map/restaurants.pug
+
+  include map/travel.pug
+  template(v-if="edit_active")
+    include map/right_menu.pug

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

@@ -0,0 +1,6 @@
+include mixin-marker.pug
+div(
+    v-for="(place, index) in journey.leg_get().places.activities",
+    :key="'activities'+index",
+  )
+  +map_marker("activities", "var(--lightdark)", "var(--light)", "var(--lightlight)")

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

@@ -0,0 +1,7 @@
+include mixin-marker.pug
+div(
+    v-if="journey.leg_get().hotel",
+    v-for="(place, index) in [journey.leg_get().hotel]",
+    :key="'hotel'+index",
+  )
+  +map_marker("hotel", "var(--darkdark)", "var(--darkdark)", "var(--darkdark)")

src/template/module/journey/map/mixin-marker.pug

@@ -0,0 +1,37 @@
+
+mixin map_marker(place, color_sel_c, color_sel_o, color_else)
+  l-marker(
+    :lat-lng="place.latlon"
+  )
+    l-icon(
+      v-if="(place.step == journey.sel_day)"
+      v-html="generate_marker(place, \""+color_sel_c+"\")"
+    )
+    l-icon(
+      v-else-if="(place.step >=0)"
+      v-html="generate_marker(place, \""+color_sel_o+"\")"
+    )
+    l-icon(
+      v-else
+      v-html="generate_marker(place, \""+color_else+"\")"
+    )
+    l-popup(
+    :options="{maxWidth:400, minWidth:300}")
+      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.col-12.col-sm-12.text-small(
+            placeholder="",
+            v-model="place.notes",
+          )
+      .leaflet-popup-button-group(v-if="edit_active")
+        a.text-gray(
+          v-on:click.prevent="place.step = ((place.step==journey.sel_day)?-1:journey.sel_day)"
+          v-html="generate_icon(((place.step==journey.sel_day)?'calendar-xmark':'calendar-plus'), 'NA')"
+        )
+        a.text-gray(
+          v-on:click.prevent="place_delete(\""+place+"\",index)"
+          v-html="generate_icon('trash', 'NA')"
+        ) 
+      span.row.text-small.text-dark(v-else) {{ place.notes }}

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

@@ -0,0 +1,11 @@
+l-marker(
+    v-if="map_override.active",
+    v-for="(el, idx) in map_override.elements"
+    key="'ovr'+idx"
+    :lat-lng="el"
+  )
+  l-icon(v-html="generate_marker('plus', 'darkgreen')")
+l-polyline(
+    v-if="map_override.active && map_override.elements.length>1"
+    :lat-lngs="map_override.elements" :color="'darkgreen'"
+)

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

@@ -0,0 +1,6 @@
+include mixin-marker.pug
+div(
+    v-for="(place, index) in journey.leg_get().places.restaurants",
+    :key="'restaurants'+index",
+  )
+  +map_marker("restaurants", "var(--dark)", "var(--dark)", "var(--dark)")

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

@@ -0,0 +1,21 @@
+.map-menu.map-menu-top
+    div(v-if="query.type" @click="drawer_click_item()" )
+        .map-menu-item(v-html="generate_icon('close')")
+    div(v-if="!query.type" @click="search_enable('hotel')")
+        .map-menu-item( v-html="generate_icon('bed')")
+    div(v-if="!query.type" @click="search_enable('restaurant')")
+        .map-menu-item( v-html="generate_icon('utensils')")
+    div(v-if="!query.type" @click="search_enable('place')")
+        .map-menu-item( v-html="generate_icon('star')")
+    .map-menu-sub(v-if="!query.type" @mouseenter="query.sub=true" @mouseleave="query.sub=false" )
+        .map-menu-item(v-html="generate_icon('route')")
+        .map-menu-item(v-if="query.sub" @click="search_enable('flight')" v-html="generate_icon('plane')")
+        .map-menu-item(v-if="query.sub" @click="search_enable('train')" v-html="generate_icon('train')")
+        .map-menu-item(v-if="query.sub" @click="search_enable('car')" v-html="generate_icon('car')")
+        .map-menu-item(v-if="query.sub" @click="search_enable('other')" v-html="generate_icon('person-biking')")
+
+.map-menu.map-menu-center
+    div(v-if="query.note" @click="drawer_click_item()" )
+        .map-menu-item(v-html="generate_icon('close')")
+    div(v-if="!query.note" @click="search_enable('notes')")
+        .map-menu-item( v-html="generate_icon('pencil')")

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

@@ -0,0 +1,32 @@
+mixin flight_popup()
+  l-popup(
+    :options="{maxWidth:400, minWidth:300}"
+  )
+    h1.row.text-medium.text-center.text-uppercase {{ travel.id }}
+    span.row.text-small.text-gray {{ travel.from }} - {{travel.to}}
+    span(v-if="edit_active")
+      .row.input(style="margin-bottom:0")
+        textarea.col-12.col-sm-12.text-small(
+          placeholder="",
+          v-model="travel.notes",
+        )
+    span.row.text-small.text-dark(v-else) {{ travel.notes }}
+    span(v-if="edit_active")
+      .leaflet-popup-button-group(v-if="edit_active")
+        a.text-gray(
+          v-on:click.prevent="place_delete('flight',idx)"
+          v-html="generate_icon('trash', 'NA')"
+        ) 
+
+div(v-for= "(travel, idx) in journey.leg_get().travel")
+  l-polyline(:lat-lngs="travel.path" :color="travel.color || 'gray'")
+    +flight_popup()
+    
+  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')"
+      )
+    +flight_popup()

src/template/module/view/nav.pug

@@ -0,0 +1,10 @@
+.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="'/' + journey.id" v-on:click.prevent="first_step")
+  //-     i.fas.fa-tools

src/template/module/view/short_leg.pug

@@ -0,0 +1,39 @@
+.col-11.container.section
+  .row.text-center.align.padding-1
+    .input.col-5.col-sm-2
+      input(disabled="", placeholder="Unnamed" :value="item.title")
+    .col-sm-1
+    .input.col-6.col-sm-4
+      input(
+        disabled="",
+        placeholder="No Dates",
+        :value="item.date_range ? item.date_range[0].toLocal() + ' - ' + item.date_range[1].toLocal() : ''"
+      )
+    .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'}}
+  //- .row.text-center
+    .input.col-sm-3(v-if="item.travel")
+      div(v-for="(item, idx) in item.travel")
+        input(disabled="", placeholder="-" :value="item.map((v) => v.id).join(', ')")
+  .row.align.padding-1
+    .input.col-sm-10.text-dark
+      .text-small(
+        placeholder="No Restaurants",
+        :value="item.places.restaurants.map((v) => v.sname + (v.notes ? '(' + v.notes + ')' : '')).join(', ') || 'No Restaurants'",
+        disabled=""
+      ) {{item.places.restaurants.map((v) => v.sname + (v.notes ? '(' + v.notes + ')' : '')).join(', ') || 'No Restaurants'}}
+  .row.align.padding-1
+    .input.col-sm-10.text-dark
+      .text-small(
+        placeholder="No Activities",
+        :value="item.places.activities.map((v) => v.sname + (v.notes ? '(' + v.notes + ')' : '')).join(', ') || 'No Activites'",
+        disabled=""
+      ) {{item.places.activities.map((v) => v.sname + (v.notes ? '(' + v.notes + ')' : '')).join(', ') || 'No Activites'}}
+  .row.align.padding-1
+    .input.col-sm-10.text-dark
+      .text-small(
+        placeholder="No Notes",
+        :value="item.notes || 'No Notes'",
+        disabled=""
+      ) {{item.notes || 'No Notes'}}

src/template/module/view/view_day.pug

@@ -0,0 +1,19 @@
+div(v-for="(e, idx) in journey.data.main", :key="idx")
+  .bg-dark.text-white(v-if="journey.sel_leg == idx")
+    .container.section
+      .row
+        .col-3.fleft.text-center.text-white.text-huge
+          a(v-on:click.prevent="journey.day_prev()")
+            i.fas.fa-angle-left
+        .col-6.container.text-center.align
+          span.small {{ journey.data.main[idx].title }} {{ journey.sel_day }}
+          .text-big.text-gray {{ journey.data.main[idx].day_title[journey.sel_day] }}
+        .col-3.fright.text-center.text-white.text-huge
+          a(v-on:click.prevent="journey.day_next()")
+            i.fas.fa-angle-right
+      .row
+        .col-12.col-sm-12(style="aspect-ratio:1.25;")
+          include ../journey/map.pug
+      .row
+        .col-10
+          span.small.text-gray {{journey.data.main[idx].note || '...'}}