wip

package.json

@@ -9,7 +9,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 --watch src --watch template --watch router --exec \"yarn build && yarn start\""
+        "demon": "nodemon -e ts,js,css --watch src --watch template --watch router --exec \"yarn build && yarn start\""
     },
     "repository": {
         "type": "git",

src/client/old.js

@@ -22,7 +22,7 @@ const app = new Vue({
     query: {
       type: "", res: [], load: false, sub: false, note: false, drawer: false,
     },
-    leg_nav: {
+    nav: {
       scrollInterval: null,
       scrollDir: null
     },
@@ -215,9 +215,9 @@ const app = new Vue({
 
 
     sideScroll: function (element, direction, speed, step) {
-      this.leg_nav.scrollDir = direction
+      this.nav.scrollDir = direction
       if (direction == 'none') return;
-      this.leg_nav.scrollInterval = setInterval(() => {
+      this.nav.scrollInterval = setInterval(() => {
         element.scrollLeft += (direction == 'left') ? -step : step;
       }, speed);
     },
@@ -228,27 +228,33 @@ const app = new Vue({
     },
 
     focus_leg(idx) {
-      const c = document.querySelector('.scroll-content')
+      const c = document.querySelector('.scroll-content.nav-leg')
       const item = c.children[(idx != undefined ? idx : this.journey.sel_leg) + 1];
       c.scrollLeft = item.offsetLeft + (item.offsetWidth / 2) - c.offsetWidth / 2
     },
+    focus_day(idx) {
+      const c = document.querySelector('.scroll-content.nav-day')
+      const item = c.children[(idx != undefined ? idx : this.journey.sel_day) + 1];
+      c.scrollLeft = item.offsetLeft + (item.offsetWidth / 2) - c.offsetWidth / 2;
+      this.focus_leg()
+    },
 
     nav_mousemove(e) {
       if (e.pointerType != 'mouse') return;
-      const c = document.querySelector('.scroll-content')
+      const c = e.target.closest('.scroll-content') || e.target.firstChild;
       const left = e.pageX - c.getBoundingClientRect().left;
       const newDir =
         left < c.offsetWidth * 0.1 ? 'left' :
           (left > c.offsetWidth * 0.9 ? 'right' : 'none')
-      if (!this.leg_nav.scrollInterval || this.leg_nav.scrollDir != newDir) {
+      if (!this.nav.scrollInterval || this.nav.scrollDir != newDir) {
-        if (this.leg_nav.scrollInterval) clearInterval(this.leg_nav.scrollInterval)
+        if (this.nav.scrollInterval) clearInterval(this.nav.scrollInterval)
         this.sideScroll(c, newDir, 25, 10);
       }
     },
     nav_mouseleave(e) {
-      clearInterval(this.leg_nav.scrollInterval);
+      clearInterval(this.nav.scrollInterval);
-      this.leg_nav.scrollDir = 'none'
+      this.nav.scrollDir = 'none'
-      this.leg_nav.scrollInterval = null
+      this.nav.scrollInterval = null
     },
 
     refreshTextAreaHeight(event) {

src/client/types/migration.ts

@@ -8,6 +8,7 @@ function migrate_A_to_0(e: journey): journey {
         v.day_title = v.day_title || (v as any).step_title;
         v.places.activities = v.places.activities || (v as any).places.places;
         v.travel = v.travel || [];
+        v.day_title = typeof (v.day_title) == "string" ? [v.day_title] : []
     })
     console.log(e)
     return e;

src/client/types/wrapper.ts

@@ -56,6 +56,10 @@ class journey_wrapper {
         this.sel_leg = Math.max(this.sel_leg - 1, 0);
         this.sel_day = 0;
     }
+
+    day_sel(idx: number): void {
+        this.sel_day = idx;
+    }
     day_next() {
         this.sel_day += 1
         if (this.sel_day > this.leg_len() - 1) {

src/style/custom.css

@@ -197,10 +197,6 @@ main {
     background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, var(--white) 50%);
 }
 
-.list-group-item.add {
-    position: absolute;
-    right: 0
-}
 
 .scroll-content>.list-group-item.active,
 .scroll-content>.list-group-item.show {
@@ -212,7 +208,7 @@ main {
     border-bottom-left-radius: var(--border-radius);
 }
 
-.scroll-content>div:nth-last-child(4) {
+.scroll-content>div:nth-last-child(3) {
     border-top-right-radius: var(--border-radius);
     border-bottom-right-radius: var(--border-radius);
 }
@@ -221,6 +217,11 @@ main {
     border-radius: var(--border-radius);
 }
 
+.list-group-item.add {
+    position: absolute;
+    right: 0;
+}
+
 @media (min-width: 768px) {
     .scroll-content.list-group>.list-group-item {
         display: inline-block;
@@ -230,6 +231,12 @@ main {
     .scroll-content>.list-group-item.placeholder-right {
         display: none;
     }
+
+    .list-group-item.add {
+        position: relative;
+        right: 0;
+        margin-left: 1em;
+    }
 }
 
 .list-group {
@@ -240,6 +247,16 @@ main {
     padding: 1rem 0rem;
 }
 
+.list-group-item>.text {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.list-group-item.show {
+    min-width: 24px;
+}
+
 .list-group-item {
     border: 1px solid var(--darkdark);
     display: inline-block;
@@ -247,10 +264,11 @@ main {
     cursor: pointer;
     text-align: center;
     padding: .5rem .5rem;
-    max-width: 90%;
+    max-width: calc(100% - 48px);
+    display: inline-block;
 }
 
-.list-group-item:hover {
+.list-group-item:not(.show):hover {
     filter: brightness(85%);
 }
 

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();")
+        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();")
+        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,64 @@
+.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();")
+        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();"
+        )
+      .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();"
+        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();")
+        i.fas.fa-angle-right
+.row.text-center
+    .col-12.col-sm-12.col-md-5.mr-auto
+        .row
+            .col-5.col-md-6.mr-auto
+                .input.w-100
+                    input(
+                    placeholder="Leg" 
+                    v-model="journey.leg_get().title")
+    .col-7.col-sm-6.col-md-4
+        .input.w-100
+            //- 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)"
+        )

src/template/module/journey/main.pug

@@ -17,8 +17,10 @@
         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_leg.pug
-    include leg/top.pug
+    include leg/top_day.pug
+    //- 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