diff --git a/src/client/old.js b/src/client/old.js index b2fdafb..17ac0ee 100644 --- a/src/client/old.js +++ b/src/client/old.js @@ -2,7 +2,8 @@ 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 "./journey_helper"; +import { filter_existing, process_results } from "./api_helper"; Vue.component("l-map", window.Vue2Leaflet.LMap); Vue.component("l-tile-layer", window.Vue2Leaflet.LTileLayer); @@ -20,11 +21,20 @@ 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, }, nav: { scrollInterval: null, - scrollDir: null + scrollDir: null, + useDay: false, + }, + toast: { + show: true, + title: 'Confirm deletion', + desc: 'Are you sure ? This is irreversible...', + special: '', + acceptText: 'delete', + cancelText: 'cancel', }, impexp: "", lang: { @@ -80,73 +90,42 @@ 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, - ); + + + search_set_results(r) { + this.query.load = false; + this.query.res = r; + return r }, - filter_unselected: function (list) { - return list.filter((e) => e.step == undefined || e.step < 0); + 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); }, - 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; - } + 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); }, 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 + return (q) => api.query_nominatim(q, this.compute_bb(), api.get_filter(f)).catch((_err) => []).then((r) => { + r = process_results('nominatim', r) + r = filter_existing('nominatim', this.journey.leg_get(), r) + return this.search_set_results(r) }); }, 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; + r = process_results('travel', r) + r = filter_existing('travel', this.journey.leg_get(), r) + return this.search_set_results(r) }); }, @@ -165,28 +144,20 @@ 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, tpe, item) } }, + place_delete(tpe, idx) { + journey_del_place(this.journey, tpe, idx) + }, + 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); @@ -197,23 +168,13 @@ const app = new Vue({ }, 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; - } - this.query.note = false; - this.query.type = f; - const query_in = document.getElementById('query_input') + const is_notes = f == 'notes'; + this.search_set_active(is_notes, f) + const query_in = document.getElementById(is_notes ? 'query_note' : 'query_input') setTimeout(() => query_in.focus(), 500); - this.search_active({ target: query_in }) + if (!is_notes) this.search_active({ target: query_in }) }, - sideScroll: function (element, direction, speed, step) { this.nav.scrollDir = direction if (direction == 'none') return; @@ -222,11 +183,6 @@ const app = new Vue({ }, speed); }, - keyboardEvent(e) { - if (e.which === 13) { - } - }, - focus_leg(idx) { const c = document.querySelector('.scroll-content.nav-leg') const item = c.children[(idx != undefined ? idx : this.journey.sel_leg) + 1]; @@ -258,29 +214,50 @@ const app = new Vue({ }, 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%"; }, + + onMapClick(e) { + if (this.query.addmarker) { + const newMarker = { + latlon: [e.latlng.lat, e.latlng.lng], + lat: e.latlng.lat, + lon: e.latlng.lng, + sname: this.query.query, + type: this.query.type, + }; + this.drawer_click_item(newMarker) + } + }, }, 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.search_flight = api.throttle(this.search_travel("flight"), 2000) 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.nav.useDay) this.journey.day_prev(); + else this.journey.leg_prev(); + }, 200) + this.pressed_next = api.throttle(() => { + if (this.nav.useDay) this.journey.day_next(); + else this.journey.leg_next(); + }, 200) window.addEventListener("keydown", (e) => { switch (e.key) { case "ArrowLeft": - this.journey.day_prev(); + this.pressed_prev() break; case "ArrowRight": - this.journey.day_next(); + this.pressed_next() break; default: console.log(e.key); @@ -301,5 +278,3 @@ const app = new Vue({ }, }, }); - -