sora/OTM
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

wip
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
soraefir 2025-03-04 01:45:28 +01:00
parent 82aed417e6
commit 974d0354b4
Signed by: sora
GPG Key ID: A362EA0491E2EEA0
8 changed files with 170 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -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",

26
src/client/old.js
View File

@ -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.leg_nav.scrollInterval) clearInterval(this.leg_nav.scrollInterval)
if (!this.nav.scrollInterval || this.nav.scrollDir != newDir) {
if (this.nav.scrollInterval) clearInterval(this.nav.scrollInterval)
this.sideScroll(c, newDir, 25, 10);
}
},
nav_mouseleave(e) {
clearInterval(this.leg_nav.scrollInterval);
this.leg_nav.scrollDir = 'none'
this.leg_nav.scrollInterval = null
clearInterval(this.nav.scrollInterval);
this.nav.scrollDir = 'none'
this.nav.scrollInterval = null
},
refreshTextAreaHeight(event) {

1
src/client/types/migration.ts
View File

@ -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;

4
src/client/types/wrapper.ts
View File

@ -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) {

32
src/style/custom.css
View File

@ -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%);
}

54
src/template/module/journey/leg/top_day.pug Normal file
View File

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

64
src/template/module/journey/leg/top_leg.pug Normal file
View File

@ -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)"
)

6
src/template/module/journey/main.pug
View File

@ -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.pug
include leg/top_leg.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