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-02-27 00:55:37 +01:00
parent b7b87507e3
commit f1c702bc14
13 changed files with 1126 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/main.ts
View File

@@ -1,4 +1,4 @@
import "./types/ext";
import "./types/format";
import "./api";
import "./old.js";
import "./vue";

332
src/client/old.js
View File

@@ -16,194 +16,172 @@ Vue.component("multiselect", window.VueMultiselect.default);
Vue.use(window.VueTextareaAutosize);
const app = new Vue({
el: "#app",
data: {
journey_edit:
["view", "short"].indexOf(window.location.pathname.split("/")[1]) == -1,
journey: new journey_wrapper(window.location.pathname.split("/").pop() || String.gen_id(16)),
el: "#app",
data: {
journey_edit:
["view", "short"].indexOf(window.location.pathname.split("/")[1]) == -1,
journey: new journey_wrapper(window.location.pathname.split("/").pop() || String.gen_id(16)),
query: {
type: "",
act: false,
res: [],
},
impexp: "",
lang: {
format: "ddd D MMM",
formatLocale: {
firstDayOfWeek: 1,
},
monthBeforeYear: true,
},
polyline: {
latlngs: [],
color: 'green'
}
},
methods: {
start_journey: function () { window.location.href = "/" + this.journey.id },
query: {
type: "",
act: false,
res: [],
},
impexp: "",
lang: {
format: "ddd D MMM",
formatLocale: {
firstDayOfWeek: 1,
},
monthBeforeYear: true,
},
polyline: {
latlngs: [],
color: 'green'
}
},
methods: {
start_journey: function () { window.location.href = "/" + this.journey.id },
compute_bb: function () {
const map = this.$refs.map[0].mapObject;
var bounds = map.getBounds();
var minLng = bounds.getSouthWest().lng;
var minLat = bounds.getSouthWest().lat;
var maxLng = bounds.getNorthEast().lng;
var maxLat = bounds.getNorthEast().lat;
return [[minLng, minLat], [maxLng, maxLat]]
},
compute_bb: function () {
const bounds = this.$refs.map[0].mapObject.getBounds();
return [[bounds.getSouthWest().lng, bounds.getSouthWest().lat],
[bounds.getNorthEast().lng, bounds.getNorthEast().lat]]
},
generate_rotation: function (index, list) {
if (index < 0 || index >= list.length) return 0;
const c0 = list[(index == 0) ? index : (index - 1)]
const c1 = list[(index == list.length - 1) ? index : (index + 1)]
const brng = Math.atan2(c1[1] - c0[1], c1[0] - c0[0]);
return `rotate:${brng - Math.PI / 2}rad`;
generate_marker: function (item, fcolor) {
return L.AwesomeMarkers.icon({
iconAnchor: [12, 36],
icon: api.icon_type(item) || "star",
prefix: "fa",
markerColor: fcolor || item.color || "blue",
}).createIcon().outerHTML;
},
},
generate_marker: function (item, fcolor) {
return `
<div style="position: absolute;top: -30px;left: -6px;">
<i class=" fa fa-${api.icon_type(item) || "star"} fa-lg icon-white" style="position: absolute;text-align:center; width:24px;height:24px; line-height:1.5em"></i>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 36" width="24" height="36">
<circle cx="12" cy="12" r="12" fill="${fcolor || item.color || "blue"}"/>
<polygon points="4,12 20,12 12,36" fill="${fcolor || item.color || "blue"}" /></svg>`
},
generate_icon: function (item, fcolor, styling = "") {
return `<i class="fa fa-${api.icon_type(item) || "star"} fa-2x" style="${styling}; color:${fcolor}; margin-left:-12px; margin-top:-32px; text-align:center; align-content:center; width:32px; height:32px;"></i>`;
},
generate_rotation: function (index, list) {
if (index < 0 || index >= list.length) return 0;
let c0, c1;
if (index == 0) {
c0 = list[index]
c1 = list[index + 1]
} else if (index == list.length - 1) {
c0 = list[index - 1]
c1 = list[index]
} else {
c0 = list[index - 1];
c1 = list[index + 1];
}
const dx = c1[0] - c0[0];
const dy = c1[1] - c0[1];
const brng = Math.atan2(dy, dx);
return `rotate:${brng - Math.PI / 2}rad`;// * (180 / Math.PI); // Convert from radians to degrees
},
import_data: function () {
this.journey.data = Object.assign(
{},
JSON.parse(this.impexp.toDecoded()),
);
this.journey.data.main.forEach((e) => {
if (e.date_range) {
e.date_range[0] = new Date(e.date_range[0]);
e.date_range[1] = new Date(e.date_range[1]);
}
});
},
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);
},
generate_icon: function (item, fcolor, styling = "") {
return `<i class="fa fa-${api.icon_type(item) || "star"} fa-2x" style="${styling}; color:${fcolor}; margin-left:-12px; margin-top:-32px; text-align:center; align-content:center; width:32px; height:32px;"></i>`;
},
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;
}
},
save_data: function () {
api.throttle(() => {
this.impexp = JSON.stringify(this.journey.data).toEncoded();
api.save(this.journey.id, this.journey.data);
}, 1000);
},
import_data: function () {
this.journey.data = Object.assign(
{},
JSON.parse(this.impexp.toDecoded()),
);
this.journey.data.main.forEach((e) => {
if (e.date_range) {
e.date_range[0] = new Date(e.date_range[0]);
e.date_range[1] = new Date(e.date_range[1]);
}
});
},
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);
},
search_nominatim: function (f) {
return (q) => {
this.query.act = true;
this.query.type = f;
return 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];
});
this.query.res = r;
this.query.act = false;
return r
});
}
},
search_travel: function (f) {
return (q) => {
this.query.act = true;
this.query.type = f;
return api.query_flight(q).then((r) => {
r.forEach(el => el.path = getGeoLine(
new L.LatLng(el.from_geo.lat, el.from_geo.lon),
new L.LatLng(el.to_geo.lat, el.to_geo.lon), { dist: 5_000_000 }).map(v => [v.lat, v.lng]));
this.query.res = r;
this.query.act = false;
return r;
});
}
},
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;
}
},
keyboardEvent(e) {
if (e.which === 13) {
}
},
},
created: function () {
search_nominatim: function (f) {
return (q) => {
this.query.act = true;
this.query.type = f;
return 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];
});
this.query.res = r;
this.query.act = false;
});
}
},
// break;
// case "flight": {
// return api.query_flight(q).then((r) => {
// // r.path = r.map(el => getGeoLine(
// // new L.LatLng(el.from_geo.lat, el.from_geo.lon),
// // new L.LatLng(el.to_geo.lat, el.to_geo.lon), { dist: 10_000_000 }).map(v => [v.lat, v.lng]));
// this.query.res = r;
// this.query.actt = false;
// });
// } break;
// default:
// console.log(`Query not yet setup: ${k}`)
// }
// }
// },
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)
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)
keyboardEvent(e) {
if (e.which === 13) {
}
},
},
created: function () {
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);
}
});
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)
// this.search_flight = api.throttle(this.search_travel(), 2000)
api.load(this.journey.id).then((r) => (app.journey.data = migrator(r)));
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);
}
});
this.search_travel("flight")("qf1").then(r => {
this.polyline.latlngs = r.map(e => e.path)
});
api.load(this.journey.id).then((r) => (app.journey.data = migrator(r)));
// api.query_flight("qf1").then(r => {
// this.polyline.latlngs = r.map(el => getGeoLine(
// new L.LatLng(el.from_geo.lat, el.from_geo.lon),
// new L.LatLng(el.to_geo.lat, el.to_geo.lon), { dist: 5_000_000 }).map(v => [v.lat, v.lng]));
// console.log(this.polyline.latlngs)
// });
},
watch: {
journey: {
handler: function (ndata, odata) {
this.save_data();
},
deep: true,
},
},
},
watch: {
journey: {
handler: function (ndata, odata) {
this.save_data();
},
deep: true,
},
},
});

3
src/client/types/geom.ts
View File

@@ -159,7 +159,6 @@ function recursiveMidPoint(src: L.LatLng, dst: L.LatLng, opt: { step?: number, d
geom.splice(1, 0, mp);
}
} else if (opt.dist != undefined) {
// console.log(src, dst, pointDistance(src, dst))
if (pointDistance(src, dst) > opt.dist) {
geom.splice(0, 1, ...recursiveMidPoint(src, mp, { dist: opt.dist }));
geom.splice(geom.length - 2, 2, ...recursiveMidPoint(mp, dst, { dist: opt.dist }));
@@ -167,11 +166,9 @@ function recursiveMidPoint(src: L.LatLng, dst: L.LatLng, opt: { step?: number, d
geom.splice(1, 0, mp);
}
}
console.log(geom)
return geom;
}
export function getGeoLine(src: L.LatLng, dst: L.LatLng, opt: { step: number, dist: number }) {
return recursiveMidPoint(src, dst, opt)
}

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

@@ -9,7 +9,7 @@ class journey_wrapper {
sel_leg: number = 0;
sel_day: number = 0;
constructor(id: string) {
constructor(id: String) {
this.id = id;
}

192
src/client/vue.ts Normal file
View File

@@ -0,0 +1,192 @@
import * as api from "./api";
import journey_wrapper from "./types/wrapper";
import { migrator } from "./types/migration";
import { getGeoLine } from "./types/geom";
import Vue from "vue";
import { LMap, LTileLayer, LMarker, LIcon, LPopup, LTooltip, LPolyline, LControlScale } from "vue2-leaflet";
import Multiselect from 'vue-multiselect'
import TextareaAutosize from 'vue-textarea-autosize'
Vue.component("l-map", LMap);
Vue.component("l-tile-layer", LTileLayer);
Vue.component("l-marker", LMarker);
Vue.component("l-icon", LIcon);
Vue.component("l-popup", LPopup);
Vue.component("l-tooltip", LTooltip);
Vue.component("l-polyline", LPolyline);
Vue.component("l-control-scale", LControlScale);
Vue.component("multiselect", Multiselect);
Vue.use(TextareaAutosize);
const app = new Vue({
el: "#app",
data: {
journey_edit:
["view", "short"].indexOf(window.location.pathname.split("/")[1]) == -1,
journey: new journey_wrapper(window.location.pathname.split("/").pop() || String.gen_id(16)),
query: {
type: "",
act: false,
res: [],
},
impexp: "",
lang: {
format: "ddd D MMM",
formatLocale: {
firstDayOfWeek: 1,
},
monthBeforeYear: true,
},
polyline: {
latlngs: [],
color: 'green'
}
},
methods: {
start_journey: function () { window.location.href = "/" + this.journey.id },
compute_bb: function () {
const bounds = this.$refs.map[0].mapObject.getBounds();
return [[bounds.getSouthWest().lng, bounds.getSouthWest().lat],
[bounds.getNorthEast().lng, bounds.getNorthEast().lat]]
},
generate_rotation: function (index, list) {
if (index < 0 || index >= list.length) return 0;
const c0 = list[(index == 0) ? index : (index - 1)]
const c1 = list[(index == list.length - 1) ? index : (index + 1)]
const brng = Math.atan2(c1[1] - c0[1], c1[0] - c0[0]);
return `rotate:${brng - Math.PI / 2}rad`;
},
generate_marker: function (item, fcolor) {
return `
<div style="position: absolute;top: -30px;left: -6px;">
<i class=" fa fa-${api.icon_type(item) || "star"} fa-lg icon-white" style="position: absolute;text-align:center; width:24px;height:24px; line-height:1.5em"></i>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 36" width="24" height="36">
<circle cx="12" cy="12" r="12" fill="${fcolor || item.color || "blue"}"/>
<polygon points="4,12 20,12 12,36" fill="${fcolor || item.color || "blue"}" /></svg>`
},
generate_icon: function (item, fcolor, styling = "") {
return `<i class="fa fa-${api.icon_type(item) || "star"} fa-2x" style="${styling}; color:${fcolor}; margin-left:-12px; margin-top:-32px; text-align:center; align-content:center; width:32px; height:32px;"></i>`;
},
import_data: function () {
this.journey.data = Object.assign(
{},
JSON.parse(this.impexp.toDecoded()),
);
this.journey.data.main.forEach((e) => {
if (e.date_range) {
e.date_range[0] = new Date(e.date_range[0]);
e.date_range[1] = new Date(e.date_range[1]);
}
});
},
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);
},
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;
}
},
search_nominatim: function (f) {
return (q) => {
this.query.act = true;
this.query.type = f;
return 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];
});
this.query.res = r;
this.query.act = false;
return r
});
}
},
search_travel: function (f) {
return (q) => {
this.query.act = true;
this.query.type = f;
return api.query_flight(q).then((r) => {
r.forEach(el => el.path = getGeoLine(
new L.LatLng(el.from_geo.lat, el.from_geo.lon),
new L.LatLng(el.to_geo.lat, el.to_geo.lon), { dist: 5_000_000 }).map(v => [v.lat, v.lng]));
this.query.res = r;
this.query.act = false;
return r;
});
}
},
keyboardEvent(e) {
if (e.which === 13) {
}
},
},
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)
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)
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);
}
});
api.load(this.journey.id).then((r) => (app.journey.data = migrator(r)));
this.search_travel("flight")("qf1").then(r => {
this.polyline.latlngs = r.map(e => e.path)
});
},
watch: {
journey: {
handler: function (ndata, odata) {
this.save_data();
},
deep: true,
},
},
});

5
src/server/api.ts
View File

@@ -1,10 +1,9 @@
import { FastifyInstance } from 'fastify/types/instance';
import { ProxyAgent, setGlobalDispatcher } from 'undici';
//import { ProxyAgent, setGlobalDispatcher } from 'undici';
import { flight_get_data } from './api_flight'
import { nominatim_get_data } from './api_nominatim';
setGlobalDispatcher(new ProxyAgent(process.env.HTTPS_PROXY as string));
//setGlobalDispatcher(new ProxyAgent(process.env.HTTPS_PROXY as string));
export default function (server, opts, done) {