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

dev merge (#163)
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
Co-authored-by: soraefir
Co-authored-by: sora-ext
Reviewed-on: #163
This commit is contained in:
sora
2025-03-05 00:11:11 +01:00
parent 78b080dc05
commit 803dd84858
34 changed files with 749 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/client/api.ts
View File

@ -1,4 +1,4 @@
export const throttle = (func: () => void, wait: number) => {
export const throttle = (func: (...args: any[]) => any, wait: number) => {
var lastTime = 0;
var timeoutId: ReturnType<typeof setTimeout> | undefined;
var lastArgs: any[];
@ -54,7 +54,7 @@ export const save = (id: string, v: journey) =>
export const query_nominatim = (
q: string,
bb: any,
f: (v: string) => Boolean = () => true
f: (v: NominatimResult) => Boolean = () => true
) => {
if (q.length == 0) return Promise.resolve([])
let url = new URL("/api/place/" + q, window.location.origin);
@ -141,7 +141,7 @@ export const icon_type = (item: string | NominatimResult): string => {
"nature_reserve",
],
"dice-five": ["water_park", "theme_park", "casino"],
"": ["?", "neighbourhood", "quarter", "highway"],
"": ["?", "neighbourhood", "quarter", "highway", "place"],
};
for (let k in types) {
@ -150,3 +150,13 @@ export const icon_type = (item: string | NominatimResult): string => {
console.log(item.display_name, item.category, item.type);
return "question";
};
export const get_filter = function (f: string) {
switch (f) {
case "hotel": return is_hotel_type;
case "restaurant": return is_restauration_type;
case "place": return is_attraction_type;
case "other":
default: return () => true;
}
}

61
src/client/helper/api.ts Normal file
View File

@ -0,0 +1,61 @@
import { getGeoLine } from "../types/geom";
import * as api from "../api";
const filter_existing = function (tpe: "nominatim" | "travel", leg: leg, r: geoloc[]) {
switch (tpe) {
case 'nominatim':
return r.filter(e => {
if (leg.hotel && leg.hotel.osm_id == e.osm_id) return false;
if (leg.places.restaurants.find(i => i.osm_id == e.osm_id)) return false;
if (leg.places.activities.find(i => i.osm_id == e.osm_id)) return false;
return true
})
case 'travel':
console.log(r)
return r.filter(e => {
if (leg.travel.find(i => `${(e as any).from}->${(e as any).to}` == `${(i as any).from}->${(i as any).to}`)) return false;
return true
})
}
}
const process_results = function (tpe: "nominatim" | "travel", r: geoloc[]) {
switch (tpe) {
case 'nominatim':
return r.map((rr) => {
rr.latlon = [parseFloat((rr as any).lat), parseFloat((rr as any).lon)];
rr.title = (rr as any).display_name.split(",")[0];
return rr;
});
case 'travel':
console.log(r)
return r.map(el => {
(el as any).path = getGeoLine(
{ lat: (el as any).from_geo.lat, lng: (el as any).from_geo.lon },
{ lat: (el as any).to_geo.lat, lng: (el as any).to_geo.lon }, { dist: 2_500_000 }).map(v => [v.lat, v.lng]);
(el as any).type = "flight";
return el;
});
}
}
var _search_set_results: (...arg: any[]) => any;
export const set_search_set_results = function (f: (...arg: any[]) => any) {
_search_set_results = f;
}
export const search_nominatim = api.throttle(
(f: string, q: string, bb: [[number, number], [number, number]], leg: leg) =>
api.query_nominatim(q, bb, api.get_filter(f)).catch((_err) => console.log(_err)).then((r) => {
r = process_results('nominatim', r)
r = filter_existing('nominatim', leg, r)
_search_set_results(r)
}), 1000);
export const search_flight = api.throttle(
(f: string, q: string, leg: leg) =>
api.query_flight(q).then((r) => {
r = process_results('travel', r)
r = filter_existing('travel', leg, r)
_search_set_results(r)
}), 2000)

41
src/client/helper/journey.ts Normal file
View File

@ -0,0 +1,41 @@
import journey_wrapper from './types/wrapper';
/* LIST HELPERS */
export const filter_selected = function (journey: journey_wrapper, list: geoloc[], step: boolean) {
return list.filter((e) =>
step ? e.step == journey.sel_day : e.step >= 0,
);
}
export const filter_unselected = function (list: geoloc[]) {
return list.filter((e) => e.step == undefined || e.step < 0);
}
export const remove_item = function (list: geoloc[], idx: number) {
list[idx].step = -1;
list.splice(idx, 1);
}
/* JOURNEY ADD/RM ITEM HELPER */
export const journey_add_place = function (journey: journey_wrapper, tpe: String, item: geoloc) {
switch (tpe) {
case 'hotel': return journey.leg_get().hotel = item;
case 'restaurant': return journey.leg_get().places.restaurants.push(item);
case 'place': return journey.leg_get().places.activities.push(item);
case 'other': return;
case 'flight': return journey.leg_get().travel.push(item);
}
}
export const journey_del_place = function (journey: journey_wrapper, tpe: String, idx: number) {
console.log(tpe)
switch (tpe) {
case "hotel": return journey.leg_get().hotel = null;
case "restaurants": return journey.leg_get().places.restaurants.splice(idx, 1);
case "activities": return journey.leg_get().places.activities.splice(idx, 1);
case "other": return;
case "flight": return journey.leg_get().travel.splice(idx, 1);
default: return true;
}
}

49
src/client/helper/nav.ts Normal file
View File

@ -0,0 +1,49 @@
import journey_wrapper from "../types/wrapper";
var nav = {
scrollInterval: 0,
scrollDir: 'none',
};
const sideScroll = function (element: Element, direction: 'left' | 'right' | 'none', speed: number, step: number) {
nav.scrollDir = direction
if (direction == 'none') return;
nav.scrollInterval = setInterval(() => {
element.scrollLeft += (direction == 'left') ? -step : step;
}, speed);
}
export const focus_leg = function (journey: journey_wrapper, idx: number | null = null) {
const c = document.querySelector('.scroll-content.nav-leg')!!
console.log(idx, c, journey)
const item = c.children[(idx != null ? idx : journey.sel_leg) + 1];
c.scrollLeft = (item as any).offsetLeft + ((item as any).offsetWidth / 2) - (c as any).offsetWidth / 2
}
export const focus_day = function (journey: journey_wrapper, idx: number | null = null) {
const c = document.querySelector('.scroll-content.nav-day')!!
console.log(idx, c, journey)
const item = c.children[(idx != null ? idx : journey.sel_day) + 1];
c.scrollLeft = (item as any).offsetLeft + ((item as any).offsetWidth / 2) - (c as any).offsetWidth / 2;
//focus_leg(journey) // We dont render both navs anymore
}
export const nav_mousemove = function (e: PointerEvent) {
if (e.pointerType != 'mouse') return;
const c = (e.target as any).closest('.scroll-content') || (e.target as any).firstChild;
const left = e.pageX - c.getBoundingClientRect().left;
const newDir =
left < c.offsetWidth * 0.1 ? 'left' :
(left > c.offsetWidth * 0.9 ? 'right' : 'none')
if (!nav.scrollInterval || nav.scrollDir != newDir) {
if (nav.scrollInterval) clearInterval(nav.scrollInterval)
sideScroll(c, newDir, 25, 10);
}
}
export const nav_mouseleave = function (_e: PointerEvent) {
clearInterval(nav.scrollInterval);
nav.scrollDir = 'none'
nav.scrollInterval = 0
}

277
src/client/old.js
View File

@ -2,7 +2,10 @@
import * as api from "./api";
import journey_wrapper from "./types/wrapper";
import { migrator } from "./types/migration";
import { getGeoLine } from "./types/geom";
import { journey_add_place, journey_del_place } from "./helper/journey";
import { search_nominatim, search_flight } from "./helper/api";
import { focus_day, focus_leg, nav_mouseleave, nav_mousemove } from "./helper/nav";
import { set_search_set_results } from "./helper/api";
Vue.component("l-map", window.Vue2Leaflet.LMap);
Vue.component("l-tile-layer", window.Vue2Leaflet.LTileLayer);
@ -20,13 +23,18 @@ 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, note: false, drawer: false,
type: "", query: "", res: [], load: false, sub: false, note: false, drawer: false, addmarker: false,
},
leg_nav: {
scrollInterval: null,
scrollDir: null
useDay: false,
toast: {
show: false,
title: '',
desc: '',
special: '',
acceptText: '',
cancelText: '',
func: () => { },
},
impexp: "",
lang: {
format: "ddd D MMM",
formatLocale: {
@ -64,11 +72,10 @@ const app = new Vue({
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>`;
},
import_data: function () {
import_data: function (v) {
this.journey.data = Object.assign(
{},
JSON.parse(this.impexp.toDecoded()),
JSON.parse(v.toDecoded()),
);
this.journey.data.main.forEach((e) => {
if (e.date_range) {
@ -77,77 +84,47 @@ const app = new Vue({
}
});
},
export_data: function () {
this.impexp = JSON.stringify(this.journey.data).toEncoded();
},
filter_selected: function (list, step) {
return list.filter((e) =>
step ? e.step == this.journey.sel_day : e.step >= 0,
);
},
filter_unselected: function (list) {
return list.filter((e) => e.step == undefined || e.step < 0);
},
remove_item: function (list, idx) {
list[idx].step = -1;
list.splice(idx, 1);
},
log: function (e) {
console.log(e);
},
place_delete: function (f, idx) {
switch (f) {
case "hotel": return this.journey.leg_get().hotel = null;
case "restaurant": return this.journey.leg_get().places.restaurants.splice(idx, 1);
case "activities": return this.journey.leg_get().places.activities.splice(idx, 1);
case "other": return;
case "flight": return this.journey.leg_get().travel.splice(idx, 1);
default: return true;
}
},
get_filter: function (f) {
switch (f) {
case "hotel": return api.is_hotel_type;
case "restaurant": return api.is_restauration_type;
case "place": return api.is_attraction_type;
case "other":
default: return () => true;
}
toast_reset: function () {
this.toast.show = false;
this.toast.title = '';
this.toast.desc = ''
this.toast.special = '';
this.toast.acceptText = ''
this.toast.cancelText = ''
this.toast.func = () => { }
},
search_nominatim: function (f) {
return (q) => api.query_nominatim(q, this.compute_bb(), this.get_filter(f)).catch((_err) => []).then((r) => {
r.forEach((rr) => {
rr.latlon = [parseFloat(rr.lat), parseFloat(rr.lon)];
rr.sname = rr.display_name.split(",")[0];
});
r = r.filter(e => {
if (this.journey.leg_get().hotel && this.journey.leg_get().hotel.osm_id == e.osm_id) return false;
if (this.journey.leg_get().places.restaurants.find(i => i.osm_id == e.osm_id)) return false;
if (this.journey.leg_get().places.activities.find(i => i.osm_id == e.osm_id)) return false;
return true
})
this.query.load = false;
this.query.res = r;
return r
});
toast_impexp: function (is_import) {
this.toast.show = true;
this.toast.title = is_import ? 'Import' : 'Export';
this.toast.desc = ''
this.toast.special = JSON.stringify(this.journey.data).toEncoded();
this.toast.acceptText = is_import ? 'load' : ''
this.toast.cancelText = 'cancel'
this.toast.func = () => { this.import_data(this.toast.special); this.toast_reset(); }
},
search_travel: function (f) {
return (q) => api.query_flight(q).then((r) => {
r.forEach(el => {
el.path = getGeoLine(
{ lat: el.from_geo.lat, lng: el.from_geo.lon },
{ lat: el.to_geo.lat, lng: el.to_geo.lon }, { dist: 2_500_000 }).map(v => [v.lat, v.lng])
el.type = "flight";
});
r = r.filter(e => {
if (this.journey.leg_get().travel.find(i => `${i.from}->${i.to}` == `${e.from}->${e.to}`)) return false;
return true
})
this.query.load = false;
this.query.res = r;
return r;
});
search_set_results(r) {
this.query.load = false;
this.query.res = r;
return r
},
search_set_clear(keep_drawer) {
this.query.res = [];
this.query.note = false;
this.query.type = null;
this.query.addmarker = false;
this.query.sub = false;
this.query.drawer = keep_drawer;
setTimeout(() => this.$refs.map.mapObject.invalidateSize(), 500);
},
search_set_active: function (is_notes, tpe) {
this.query.drawer = true;
this.query.note = is_notes;
this.query.type = !is_notes ? tpe : null;
this.query.load = !is_notes;
setTimeout(() => this.$refs.map.mapObject.invalidateSize(), 500);
},
drawer_hover_item: function (item) {
@ -164,112 +141,79 @@ 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()
this.search_set_clear(item ? true : false);
this.drawer_hover_item();
if (item) {
item.step = -1;
switch (tpe) {
case 'hotel': return this.journey.leg_get().hotel = item;
case 'restaurant': return this.journey.leg_get().places.restaurants.push(item);
case 'place': return this.journey.leg_get().places.activities.push(item);
case 'other': return;
case 'flight': return this.journey.leg_get().travel.push(item);
}
journey_add_place(this.journey, this.query.type, item)
}
},
search_active: function (q) {
const txt = q.target.value
this.query.load = true;
switch (this.query.type) {
case 'hotel': return this.search_hotel(txt);
case 'restaurant': return this.search_restaurant(txt);
case 'place': return this.search_place(txt);
case 'other': return this.search_other(txt);
case 'flight': return this.search_flight(txt);
search_active: function (_e) {
const tpe = this.query.type;
const query = this.query.query;
switch (tpe) {
case 'hotel':
case 'restaurant': ;
case 'place':
case 'other':
return search_nominatim(tpe, query, this.compute_bb(), this.journey.leg_get())
case 'flight':
return search_flight(tpe, query, this.journey.leg_get());
}
},
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;
const is_notes = f == 'notes';
this.search_set_active(is_notes, f)
setTimeout(() => document.getElementById(is_notes ? 'query_note' : 'query_input').focus(), 500);
if (!is_notes) this.search_active()
},
refreshTextAreaHeight: function (e) {
e.target.style['height'] = 'auto';
e.target.style['height'] = e.target.scrollHeight + 'px';
e.target.style['max-height'] = "100%";
},
onMapClick(e) {
if (this.query.addmarker) {
const newMarker = {
latlon: [e.latlng.lat, e.latlng.lng],
sname: this.query.query,
type: this.query.type,
};
this.drawer_click_item(newMarker)
}
this.query.note = false;
this.query.type = f;
const query_in = document.getElementById('query_input')
setTimeout(() => query_in.focus(), 500);
this.search_active({ target: query_in })
},
sideScroll: function (element, direction, speed, step) {
this.leg_nav.scrollDir = direction
if (direction == 'none') return;
this.leg_nav.scrollInterval = setInterval(() => {
element.scrollLeft += (direction == 'left') ? -step : step;
}, speed);
},
keyboardEvent(e) {
if (e.which === 13) {
}
},
nav_mousemove(e) {
const c = document.querySelector('.scroll-content')
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)
this.sideScroll(c, newDir, 25, 10);
}
},
nav_mouseleave(e) {
clearInterval(this.leg_nav.scrollInterval);
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)
this.search_restaurant = api.throttle(this.search_nominatim("restaurant"), 1000)
this.search_place = api.throttle(this.search_nominatim("place"), 1000)
set_search_set_results(this.search_set_results);
this.nav_mouseleave = nav_mouseleave;
this.nav_mousemove = nav_mousemove;
this.focus_day = focus_day;
this.focus_leg = focus_leg;
this.place_delete = (tpe, idx) => journey_del_place(this.journey, tpe, idx);
this.save_data = api.throttle(() => {
this.impexp = JSON.stringify(this.journey.data).toEncoded();
api.save(this.journey.id, this.journey.data);
}, 1000);
this.search_flight = api.throttle(this.search_travel("flight"), 2000)
this.pressed_prev = api.throttle(() => {
if (this.useDay) this.journey.day_prev();
else this.journey.leg_prev();
}, 250)
this.pressed_next = api.throttle(() => {
if (this.useDay) this.journey.day_next();
else this.journey.leg_next();
}, 250)
window.addEventListener("keydown", (e) => {
switch (e.key) {
case "ArrowLeft":
this.journey.day_prev();
break;
case "ArrowRight":
this.journey.day_next();
break;
default:
console.log(e.key);
case "ArrowLeft": return this.pressed_prev()
case "ArrowRight": return this.pressed_next()
default: return console.log(e.key);
}
});
@ -280,12 +224,9 @@ const app = new Vue({
watch: {
journey: {
handler: function (ndata, odata) {
if (this.edit_active)
this.save_data();
if (this.edit_active) this.save_data();
},
deep: true,
},
},
});

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

@ -6,6 +6,8 @@ declare global {
lng: number
}
interface geoloc {
title: string
osm_id: number
latlon: [number, number]
notes: string
step: -1
@ -22,7 +24,7 @@ declare global {
day_title: string[]
date_range: [Date, Date] | null
map: map
travel: unknown[]
travel: geoloc[]
hotel: geoloc | null
places: {
restaurants: geoloc[]

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;

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

@ -1,3 +1,4 @@
import './ext.ts'
import { journey_template, leg_template } from "./format"
const date_day_diff = (d0: Date, d1: Date): number =>
@ -56,6 +57,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) {
@ -78,6 +83,13 @@ class journey_wrapper {
}
}
}
day_cycle() {
if (this.sel_day >= this.leg_len() - 1) {
this.sel_day = 0;
} else {
this.day_next()
}
}
date_sel(): string {
if (this.sel_day < 0) return "?";
let leg = this.leg_get()