From 4a33222e8227f778046841d74979f52838c53319 Mon Sep 17 00:00:00 2001 From: sora-ext Date: Mon, 10 Mar 2025 17:22:12 +0100 Subject: [PATCH] Update src/client/old.js --- src/client/old.js | 162 ++++++++++++---------------------------------- 1 file changed, 41 insertions(+), 121 deletions(-) diff --git a/src/client/old.js b/src/client/old.js index 2eb34bd..2e4a66d 100644 --- a/src/client/old.js +++ b/src/client/old.js @@ -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 ``; }, - 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, },