package.json

@@ -8,7 +8,7 @@
         "build-client": "esbuild src/client/main.ts --outfile=public/main.js --tree-shaking=true  --bundle --minify --sourcemap --tsconfig=tsconfig-client.json",
         "build-server": "esbuild src/server/**/*.ts --outdir=build --platform=node --format=cjs",
         "start": "node build/main.js",
-        "demon": "nodemon -e ts,js,pug --watch src --watch template --watch router --exec \"yarn build && yarn start\""
+        "demon": "nodemon -e ts,js --watch src --watch template --watch router --exec \"yarn build && yarn start\""
     },
     "repository": {
         "type": "git",
@@ -20,19 +20,13 @@
         "@fastify/leveldb": "^6.0.0",
         "@fastify/static": "^8.0.0",
         "@fastify/view": "^10.0.0",
-        "@prettier/plugin-pug": "^3.0.0",
         "@types/node": "^22.13.5",
         "esbuild": "^0.25.0",
         "fastify": "^5.2.1",
         "jsdom": "^26.0.0",
-        "leaflet": "^1.9.4",
         "nodemon": "^3.0.1",
         "prettier": "^3.5.2",
         "pug": "^3.0.2",
-        "undici": "^7.3.0",
+        "undici": "^7.3.0"
-        "vue": "2",
-        "vue-multiselect": "2",
-        "vue-textarea-autosize": "^1.1.1",
-        "vue2-leaflet": "^2.7.1"
     }
 }

src/client/api.ts

@@ -124,7 +124,7 @@ export const icon_type = (item: string | NominatimResult): string => {
             "place_of_worship",
             "attraction",
             "information",
-            "university", "theatre", "opera"
+            "university", "science_park", "theatre", "opera"
         ],
         mountain: ["peak", "viewpoint"],
         parking: ["parking"],

src/client/old.js

@@ -12,8 +12,6 @@ Vue.component("l-popup", window.Vue2Leaflet.LPopup);
 Vue.component("l-tooltip", window.Vue2Leaflet.LTooltip);
 Vue.component("l-polyline", window.Vue2Leaflet.LPolyline);
 Vue.component("l-control-scale", window.Vue2Leaflet.LControlScale);
-// Vue.component("multiselect", window.VueMultiselect.default);
-Vue.use(window.VueTextareaAutosize);
 
 var first_boot = true
 
@@ -24,7 +22,7 @@ const app = new Vue({
     journey: new journey_wrapper(window.location.pathname.split("/").pop() || String.gen_id(16)),
     map_override: { active: false, elements: [] },
     query: {
-      type: "", res: [], load: false, sub: false,
+      type: "", res: [], load: false, sub: false, note: false, drawer: false,
     },
     leg_nav: {
       scrollInterval: null,
@@ -43,6 +41,7 @@ const app = new Vue({
     start_journey: function () { window.location.href = "/" + this.journey.id },
 
     compute_bb: function () {
+      if (!this.$refs.map) return undefined
       const bounds = this.$refs.map.mapObject.getBounds();
       return [[bounds.getSouthWest().lng, bounds.getSouthWest().lat],
       [bounds.getNorthEast().lng, bounds.getNorthEast().lat]]
@@ -64,7 +63,7 @@ const app = new Vue({
               <polygon points="4,12 20,12 12,36" fill="${fcolor || item.color || "blue"}" /></svg>`
     },
     generate_icon: function (item, fcolor = "", styling = "", classes = "") {
-      return `<i class="fa fa-${api.icon_type(item) || "star"} fa-2x ${classes}"  style="${styling}; color:${fcolor || "white"}; text-align:center; align-content:center; width:32px; height:32px;"></i>`;
+      return `<i class="fa fa-${api.icon_type(item) || "star"} fa-2x ${classes}"  style="${styling}; color:${fcolor || "white"}; text-align:center; align-content:center;"></i>`;
     },
 
 
@@ -169,7 +168,10 @@ const app = new Vue({
     drawer_click_item: function (item) {
       const tpe = this.query.type;
       this.query.res = [];
+      this.query.note = false;
       this.query.type = null;
+      this.query.drawer = item ? true : false;
+      setTimeout(() => this.$refs.map.mapObject.invalidateSize(), 500);
       this.query.sub = false;
       this.drawer_hover_item()
       if (item) {
@@ -197,10 +199,19 @@ const app = new Vue({
     },
 
     search_enable: function (f) {
+      this.query.drawer = true;
+      setTimeout(() => this.$refs.map.mapObject.invalidateSize(), 500);
+      if (f == "notes") {
+        this.query.note = true;
+        this.query.type = null;
+        const query_in = document.getElementById('query_note')
+        setTimeout(() => query_in.focus(), 500);
+        return;
+      }
+      this.query.note = false;
       this.query.type = f;
       const query_in = document.getElementById('query_input')
-
+      setTimeout(() => query_in.focus(), 500);
-      query_in.focus()
       this.search_active({ target: query_in })
     },
 
@@ -219,9 +230,10 @@ const app = new Vue({
     },
     nav_mousemove(e) {
       const c = document.querySelector('.scroll-content')
+      const left = e.pageX - c.getBoundingClientRect().left;
       const newDir =
-        e.pageX < c.offsetWidth * 0.1 ? 'left' :
+        left < c.offsetWidth * 0.1 ? 'left' :
-          (e.pageX > c.offsetWidth * 0.9 ? 'right' : 'none')
+          (left > c.offsetWidth * 0.9 ? 'right' : 'none')
       if (!this.leg_nav.scrollInterval || this.leg_nav.scrollDir != newDir) {
         if (this.leg_nav.scrollInterval) clearInterval(this.leg_nav.scrollInterval)
         this.sideScroll(c, newDir, 25, 10);
@@ -232,6 +244,13 @@ const app = new Vue({
       this.leg_nav.scrollDir = 'none'
       this.leg_nav.scrollInterval = null
     },
+
+    refreshTextAreaHeight(event) {
+      console.log("AAA", event.target.scrollHeight, event.target)
+      event.target.style['height'] = 'auto';
+      event.target.style['height'] = event.target.scrollHeight + 'px';
+      event.target.style['max-height'] = "100%";
+    },
   },
   created: function () {
     this.search_hotel = api.throttle(this.search_nominatim("hotel"), 1000)

src/client/types/format.ts

@@ -38,14 +38,8 @@ declare global {
     }
 }
 
-const journey_template: journey = {
-    fmt_ver: 1,
-    title: "New Journey",
-    main: [],
-}
-
 const leg_template: leg = {
-    title: "New Leg",
+    title: "",
     day_title: [],
     map: { zoom: 2, center: { lng: 0, lat: 0 } },
     travel: [],
@@ -54,6 +48,12 @@ const leg_template: leg = {
     notes: "",
     date_range: null
 }
+const journey_template: journey = {
+    fmt_ver: 1,
+    title: "New Journey",
+    main: [leg_template],
+}
+
 
 export { map, geoloc, leg, journey }
 export { journey_template, leg_template }

src/client/types/wrapper.ts

@@ -29,6 +29,7 @@ class journey_wrapper {
     rm_leg(idx: number): void {
         this.data.main.splice(idx, 1);
         if (this.sel_leg == idx) this.leg_prev();
+        if (this.sel_leg > this.data.main.length - 1) this.leg_next();
     }
     tot_len(): number | "?" {
         if (this.leg_count() == 0) return 0;

src/server/api_nominatim.ts

@@ -15,6 +15,7 @@ export function nominatim_get_data(id: string, bb: string[][] | null = null): Pr
     const url = new URL("https://nominatim.openstreetmap.org/search");
     url.searchParams.append('format', 'jsonv2')
     url.searchParams.append('q', id)
+    url.searchParams.append('limit', '20')
     if (bb) {
         url.searchParams.append('viewbox', `${bb[0][0]},${bb[0][1]},${bb[1][0]},${bb[1][1]}`)
         url.searchParams.append('bounded', `1`)

template/home.pug

@@ -2,76 +2,31 @@ doctype html
 
 include module/head.pug
 main#app
-  .container
+  .bg-white.section.text-dark
-    section.mb-big
+    .container.mb-big
       .text-center
-        img.main-logo.mb-medium(
-          src="/public/img/helcel.png",
-          alt="Helcel logo"
-        )
         div
           h1.text-huge.text-withSubtitle Open Tourism Map
           h2.text-big.text-gray Collaborative Holiday Planner
-        p#js-header-waypoint.m-none
+  .spacer
-          a.button.button--primary.button--mobileFull(href="#go") Get started
+  .section.bg-dark.text-white
-  .bg-dark
+    .container-medium 
-    .container
+      .row
-      .row.text-center
+        .col-8
-        .col-12.col-sm-3
+          h2.text-big Your journey
-          .section
+          p.text-gray
-            img(
+            | Browse hotels, restaurants and attractions,....
-              src="/public/img/lightweight.png",
-              alt="Lightweight",
-              width="118"
-            )
             br
-            h2.text-withSubtitle.text-big.text-white
+            |
-              | Lightweight
+            | Select and plan the varying elements of your journey
-              br
+        .col-4
-              span.text-medium.text-gray
+          .row.align
-                | Powered By
+            .input
-                br
+              input#journey.id(v-model="journey.id", placeholder="ID", type="text")
-                | Fastify & Sierra
+          p
-        .col-12.col-sm-4
+          .row.align
-          .section
+            button.button.button--primary.button--mobileFull(
-            img(
+              v-on:click="start_journey"
-              src="/public/img/customizable.png",
+            ) Start the journey
-              alt="Customizable",
-              width="118"
-            )
-            br
-            h2.text-withSubtitle.text-big.text-white
-              | Customizable
-              br
-              span.text-medium.text-gray
-                | Many Templates
-                br
-                | to choose from
-        .col-12.col-sm-4
-          .section
-            h2.text-withSubtitle.text-big.text-white
-              img(
-                src="/public/img/opensource.png",
-                alt="Open Source",
-                width="118"
-              )
-              br
-              |
-              | FOSS
-              br
-              span.text-medium.text-gray :-)
-  #go.container-medium.section
-    h2.text-big Your journey
-    p
-      | Browse hotels, restaurants and attractions,....
-      br
-      |
-      | Select and plan the varying elements of your journey
-    .aligner.aligner--contentEnd
-      .input
-        input#journey.id(v-model="journey.id", placeholder="ID", type="text")
-      button.button.button--primary.button--mobileFull(
-        v-on:click="start_journey"
-      ) Start the journey
 
 include module/foot.pug

template/journey.pug

@@ -3,6 +3,5 @@ doctype html
 include module/head.pug
 
 main#app(v-cloak)
-  include module/nav.pug
+  include module/journey/main.pug
-  include module/journey.pug
 include module/foot.pug

template/module/foot.pug

@@ -2,21 +2,12 @@ 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/vue-textarea-autosize")
 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
+footer.bg-dark.section
-  .container
+  .container.text-center.text-small.text-white
-    .section.text-center.text-small
-      p.text-white
-        img(src="/public/img/helcel.png", alt="helcel logo", width="100")
-        br
-        br
-        |
         | Built with   ❤   by Helcel
         br
         span.text-small.text-gray v0.0.1
-      p.text-gray
-        a(href="https://git.helcel.net") Helcel Git

template/module/journey.pug

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

template/module/journey/leg.pug

@@ -1,11 +0,0 @@
-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-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="...",
+    )

template/module/journey/leg/drawer.pug

@@ -1,16 +1,18 @@
-.input.text-dark(style="width: 100%")
+
+.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(style="width:100%" 
+
-    v-if="['hotel', 'restaurant', 'place','other', 'travel'].indexOf(query.type)>=0")
+div(v-if="['hotel', 'restaurant', 'place','other', 'travel'].indexOf(query.type)>=0")
     template(v-for="(item, idx) in query.res" )
-        .col-12.bg-white.text-dark(
+        .query-result.col-12.bg-white.text-dark(
-            style="display:flex;align-items:center; border-radius:3px;"
             :key="'q'+idx" 
             @mouseover="drawer_hover_item(item)" 
             @mouseleave="drawer_hover_item()"
@@ -20,20 +22,17 @@ div(style="width:100%"
                 | {{ item.name }}
         .bg-dark.divider(
             :key="'qdiv'+idx" style="height:1px" )
-    .col-12.bg-white.text-dark(
+    .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" )
-        style="display:flex;align-items:center; border-radius:3px;" )
         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(style="width:100%" 
+div(v-else-if="['flight'].indexOf(query.type)>=0")
-    v-else-if="['flight'].indexOf(query.type)>=0")
     template(v-for="(item, idx) in query.res" )
-        .col-12.bg-white.text-dark(
+        .query-result.col-12.bg-white.text-dark(
-            style="display:flex;align-items:center; border-radius:3px;"
             :key="'q'+idx" 
             @mouseover="drawer_hover_item(item)" 
             @mouseleave="drawer_hover_item()"
@@ -41,10 +40,9 @@ div(style="width:100%"
             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(style="width:100%" v-else)
+div(v-else)
     template()
-        .col-12.bg-white.text-dark(
+        .query-result.col-12.bg-white.text-dark()
-            style="display:flex;align-items:center; border-radius:3px;")
         | Unsuppored Query type {{query.type}}

template/module/journey/leg/nav.pug

@@ -1,23 +1,34 @@
-.scroll-handler(
+.scroll-handler.row(
   @mouseleave="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()")
+  .col-3.col-sm-2.col-md-1
-      .text Add Leg
+    .list-group.text-dark.h-100
-      i.fa.fa-plus.add(style="top: 12px; right: 5px; position: absolute")
+      .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

template/module/journey/leg/old_cfg.pug

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

@@ -1,15 +1,17 @@
-.row.text-center
+.row.text-center.align
-    .col-sm-2
+    .col-5.col-sm-4.col-md-2
-        .input
-            input(v-model="journey.leg_get().title")
-    .col-sm-2
         .input
             input(
-            placeholder="Day title",
+            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
-    .col-sm-4
         .input
             //- label Date Range ({{ journey.leg_len() }})
             date-picker(
@@ -20,10 +22,15 @@
             placeholder="Date Range",
             v-on:change="journey.date_update(journey.sel_leg)"
         )
-    .col-sm-2
+    .col-4.col-sm-4.col-md-3.ml-auto
-    .right.col-sm-2
         .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

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

template/module/journey/map.pug

@@ -3,12 +3,13 @@ l-map(
   :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="bottomright", :imperial="false", :metric="true")
+  l-control-scale(position="bottomleft", :imperial="false", :metric="true")
   include map/override.pug
 
   include map/hotel.pug

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

@@ -15,27 +15,23 @@ mixin map_marker(place, color_sel_c, color_sel_o, color_else)
       v-else
       v-html="generate_marker(place, \""+color_else+"\")"
     )
-    l-popup()
+    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(style="margin-bottom:0")
+        .row.input()
-          textarea-autosize.col-12.col-sm-12.text-small(
+          textarea.col-12.col-sm-12.text-small(
-            placeholder="Notes",
+            placeholder="",
             v-model="place.notes",
-            :min-height="30",
-            :max-height="350"
           )
-        a.leaflet-popup-close-button.text-gray(
+      .leaflet-popup-button-group(v-if="edit_active")
-          style="right: 4px; visibility: visible",
+        a.text-gray(
-          href="#rm",
-          v-on:click.prevent="place_delete(\""+place+"\",index)"
-          v-html="generate_icon('trash', 'NA')"
-        ) 
-        a.leaflet-popup-close-button.text-gray(
-          style="right: 20px; visibility: visible",
-          href="#toggle_day",
           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 }}

template/module/journey/map/right_menu.pug

@@ -1,5 +1,5 @@
-.map-menu
+.map-menu.map-menu-top
-    div( v-if="query.type" @click="drawer_click_item()" )
+    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')")
@@ -14,24 +14,8 @@
         .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
-//- .map-menu-sub {
+    div(v-if="query.note" @click="drawer_click_item()" )
-//-   display: flex;
+        .map-menu-item(v-html="generate_icon('close')")
-//-   flex-direction: row-reverse;
+    div(v-if="!query.note" @click="search_enable('notes')")
-//-   gap: 5px;
+        .map-menu-item( v-html="generate_icon('pencil')")
-//- }
-//- .map-menu-item,
-//- .map-menu-sub-item {
-//-   background-color: var(--darkdark);
-//-   padding: 5px;
-//-   border-radius: 50%;
-//-   cursor: pointer;
-//-   float: right;
-//-   height: fit-content;
-//- }
-//- .vue2leaflet-map {
-//-   border-radius: 3px;
-//- }
-//- .leaflet-popup-content {
-//-   margin: 10px 20px;
-//- }

template/module/journey/map/travel.pug

@@ -1,22 +1,22 @@
 mixin flight_popup()
-  l-popup()
+  l-popup(
-    h1.row.text-medium.text-center {{ travel.id.toUpperCase() }}
+    :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-autosize.col-12.col-sm-12.text-small(
+        textarea.col-12.col-sm-12.text-small(
-          placeholder="Notes",
+          placeholder="",
           v-model="travel.notes",
-          :min-height="30",
-          :max-height="350"
         )
-      a.leaflet-popup-close-button.text-gray(
-        style="right: 4px; visibility: visible",
-        href="#rm",
-        v-on:click.prevent="place_delete('flight',idx)"
-        v-html="generate_icon('trash', 'NA')"
-      ) 
     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'")

template/module/nav.pug

@@ -1,38 +0,0 @@
-header.header
-  .header-inner.container
-    a.header-logo.text-dark(href="/")
-      img.header-logoImage(
-        src="/public/img/helcel.png",
-        alt="Helcel logo",
-        width="40"
-      )
-      span.hide-small OTM
-    .input.input-invis.row
-      input.col-6.small(v-model="journey.data.name", type="text")
-      input.col-6.small(
-        disabled,
-        type="text",
-        :placeholder="journey.date_tot() + ' (' + journey.tot_len() + ')'"
-      )
-    .row.header-nav.text-big(style="margin-bottom: 0")
-      .col-sm-2
-        a(:href="'/short/' + journey.id")
-          i.fas.fa-file-contract
-      .col-sm-2
-        a(:href="'/view/' + journey.id")
-          i.fas.fa-camera
-      .col-sm-2
-        a(href="#main", v-on:click.prevent="first_step")
-          i.fas.fa-tools
-      .col-sm-1.text-small
-        a(href="#prevprev", v-on:click.prevent="journey.leg_prev()")
-          i.fas.fa-angle-double-left
-      .col-sm-1
-        a(href="#prev", v-on:click.prevent="journey.day_prev()")
-          i.fas.fa-angle-left
-      .col-sm-1
-        a(href="#next", v-on:click.prevent="journey.day_next()")
-          i.fas.fa-angle-right
-      .col-sm-1.text-small
-        a(href="#nextnext", v-on:click.prevent="journey.leg_next()")
-          i.fas.fa-angle-double-right

template/module/view/nav.pug

@@ -1,12 +1,5 @@
 header.header
   .header-inner.container
-    a.header-logo.text-dark(href="/")
-      img.header-logoImage(
-        src="/public/img/helcel.png",
-        alt="Helcel logo",
-        width="40"
-      )
-      span.hide-small HOTM
     .input.input-invis
       input.small(:value="journey.data.name", type="text", disabled="")
     .row.header-nav.text-big(style="margin-bottom: 0")

template/module/view/short_leg.pug

@@ -16,28 +16,22 @@
         input(disabled="", :value="item.map((v) => v.id).join(', ')")
   .row.text-center
     .input.col-sm-8(v-if="item.places && item.places.restaurants")
-      textarea-autosize.text-small(
+      .text-small(
         placeholder="No Restaurants",
         :value="item.places.restaurants.map((v) => v.sname + (v.notes ? '(' + v.notes + ')' : '')).join(', ')",
-        :min-height="30",
-        :max-height="350",
         disabled=""
       )
   .row.text-center
     .input.col-sm-8(v-if="item.places && item.places.activities")
-      textarea-autosize.text-small(
+      .text-small(
         placeholder="No Activities",
         :value="item.places.activities.map((v) => v.sname + (v.notes ? '(' + v.notes + ')' : '')).join(', ')",
-        :min-height="30",
-        :max-height="350",
         disabled=""
       )
   .row.text-center
     .input.col-sm-8(v-if="item.notes")
-      textarea-autosize.text-small(
+      .text-small(
         placeholder="No Notes",
         :value="item.notes",
-        :min-height="30",
-        :max-height="350",
         disabled=""
       )

template/view.pug

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