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

Update src/client/old.js
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
sora-ext 2025-03-10 17:22:12 +01:00
parent b2a17d18ce
commit 4a33222e82
1 changed files with 41 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
src/client/old.js
View File

@ -2,10 +2,11 @@
import * as api from "./api";
import journey_wrapper from "./types/wrapper";
import { migrator } from "./types/migration";
import { journey_add_place, journey_del_place } from "./helper/journey";
import { search_nominatim, search_flight } from "./helper/api";
import { journey_add_place, journey_from_url } from "./helper/journey";
import { focus_day, focus_leg, nav_mouseleave, nav_mousemove } from "./helper/nav";
import { set_search_set_results } from "./helper/api";
import toast from "./types/toast";
import search_drawer from "./types/search_drawer";
Vue.component("l-map", window.Vue2Leaflet.LMap);
Vue.component("l-tile-layer", window.Vue2Leaflet.LTileLayer);
@ -15,26 +16,16 @@ 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);
const journey_base = journey_from_url()
const app = new Vue({
el: "#app",
data: {
edit_active: ["view", "short"].indexOf(window.location.pathname.split("/")[1]) == -1,
journey: new journey_wrapper(window.location.pathname.split("/").pop() || String.gen_id(16)),
map_override: { active: false, elements: [] },
query: {
type: "", query: "", res: [], load: false, sub: false, note: false, drawer: false, addmarker: false,
},
edit_active: journey_base.edit,
journey: new journey_wrapper(journey_base.id),
search_drawer: new search_drawer(),
useDay: false,
toast: {
show: false,
title: '',
desc: '',
special: '',
acceptText: '',
cancelText: '',
func: () => { },
},
toast: new toast(),
lang: {
format: "ddd D MMM",
formatLocale: {
@ -46,18 +37,12 @@ const app = new Vue({
methods: {
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]]
},
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`;
return `rotate:${brng - 0 * Math.PI / 2}rad`;
},
generate_marker: function (item, fcolor) {
@ -72,77 +57,23 @@ 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 (v) {
this.journey.data = Object.assign(
{},
JSON.parse(v.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]);
}
});
},
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 = () => { }
},
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_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) {
if (item) {
this.map_override.active = true
this.search_drawer.map_override.active = true
if (item.type == 'flight') {
this.map_override.elements = [[item.from_geo.lat, item.from_geo.lon], [item.to_geo.lat, item.to_geo.lon]]
this.search_drawer.map_override.elements = [[item.from_geo.lat, item.from_geo.lon], [item.to_geo.lat, item.to_geo.lon]]
} else {
this.map_override.elements = [[item.lat, item.lon]]
this.search_drawer.map_override.elements = [[item.lat, item.lon]]
}
} else {
this.map_override.active = false
this.search_drawer.map_override.active = false
}
},
drawer_click_item: function (item) {
const tpe = this.query.type
this.search_set_clear(item ? true : false);
const tpe = this.search_drawer.query.type
this.search_drawer.reset();
this.drawer_hover_item();
if (item) {
item.step = -1;
@ -150,28 +81,6 @@ const app = new Vue({
}
},
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) {
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';
@ -179,53 +88,64 @@ const app = new Vue({
},
onMapClick(e) {
if (this.query.addmarker) {
if (this.search_drawer.query.addmarker) {
const newMarker = {
latlon: [e.latlng.lat, e.latlng.lng],
sname: this.query.query,
type: this.query.type,
sname: this.search_drawer.query.query,
type: this.search_drawer.query.type,
};
this.drawer_click_item(newMarker)
}
},
},
created: function () {
set_search_set_results(this.search_set_results);
set_search_set_results((r) => { this.search_drawer.results(r); });
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(() => {
api.save(this.journey.id, this.journey.data);
}, 1000);
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();
this.pressed_prev_next = api.throttle((dir_prev) => {
if (this.useDay && dir_prev) return this.journey.day_prev();
if (!this.useDay && dir_prev) return this.journey.leg_prev();
if (this.useDay && !dir_prev) return this.journey.day_next();
if (!this.useDay && !dir_prev) return this.journey.leg_next();
}, 250)
window.addEventListener("keydown", (e) => {
switch (e.key) {
case "ArrowLeft": return this.pressed_prev()
case "ArrowRight": return this.pressed_next()
default: return console.log(e.key);
case "ArrowLeft": return this.pressed_prev_next(true)
case "ArrowRight": return this.pressed_prev_next(false)
default: return;
}
});
api.load(this.journey.id).then((r) => {
app.journey.data = migrator(r)
app.journey.sel_leg = Math.min(app.journey.leg_count() - 1, journey_base.leg);
app.journey.sel_day = Math.min(app.journey.day_count() - 1, journey_base.day);
setTimeout(() => focus_leg(this.journey) && focus_day(this.journey), 25);
this.$refs.map.mapObject.keyboard.disable();
this.search_drawer.refresh_map = () => { this.$refs.map.mapObject.invalidateSize() }
this.search_drawer.get_leg = () => { return this.journey.leg_get() }
this.search_drawer.get_bb = () => {
if (!this.$refs.map) return []
const bounds = this.$refs.map.mapObject.getBounds();
return [[bounds.getSouthWest().lng, bounds.getSouthWest().lat],
[bounds.getNorthEast().lng, bounds.getNorthEast().lat]]
}
});
},
watch: {
journey: {
handler: function (ndata, odata) {
if (this.edit_active) this.save_data();
window.location.hash = `#${this.journey.sel_leg}_${this.journey.sel_day}`
},
deep: true,
},