diff --git a/src/client/old.js b/src/client/old.js index ae82cc2..d92a4d4 100644 --- a/src/client/old.js +++ b/src/client/old.js @@ -2,6 +2,7 @@ import * as api from "./api"; import journey_wrapper from "./types/wrapper"; import { migrator } from "./types/migration"; +import { getGeoLine } from "./types/geom"; Vue.component("l-map", window.Vue2Leaflet.LMap); Vue.component("l-tile-layer", window.Vue2Leaflet.LTileLayer); @@ -21,8 +22,11 @@ const app = new Vue({ ["view", "short"].indexOf(window.location.pathname.split("/")[1]) == -1, journey: new journey_wrapper(window.location.pathname.split("/").pop() || String.gen_id(16)), - query: { hotel: [], flight: [], nominatim: [] }, - querying: { hotel: false, flight: false, place: false, food: false }, + query: { + type: "", + act: false, + res: [], + }, impexp: "", lang: { format: "ddd D MMM", @@ -49,44 +53,44 @@ const app = new Vue({ return [[minLng, minLat], [maxLng, maxLat]] }, - search_nominatim: function (txt, f) { - if (txt == "") { - this.query.nominatim = []; - return Promise.resolve([]); - } - let bb = this.journey.leg_get(); - return api.query_nominatim(txt, this.compute_bb(), f).catch((err) => []).then((results) => { - results.forEach((r) => { - r.latlon = [parseFloat(r.lat), parseFloat(r.lon)]; - r.sname = r.display_name.split(",")[0]; - }); - this.query.nominatim = results; - }); - }, - search_flight: function (txt) { - if (txt == "") return; - this.querying.flight = true; - api.query_flight(txt).then((results) => { - if (results.results == "") { - this.query.flight = []; - this.querying.flight = false; - return; - } - this.query.flight = results.results; - this.querying.flight = false; - }); - }, - generate_icon: function (item, fcolor) { + 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_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 + + }, + + generate_icon: function (item, fcolor, styling = "") { + return ``; + }, + save_data: function () { - this.impexp = JSON.stringify(this.journey.data).toEncoded(); - api.save(this.journey.id, this.journey.data); + 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( @@ -119,12 +123,58 @@ const app = new Vue({ 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; + }); + } + }, + // 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}`) + // } + // } + // }, + 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.search_flight = api.throttle(this.search_travel(), 2000) + window.addEventListener("keydown", (e) => { switch (e.key) { case "ArrowLeft": @@ -140,53 +190,18 @@ const app = new Vue({ 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) + // }); - api.query_flight("qf1").then(r => { - console.log(r) - this.polyline.latlngs = L.geodesic([ - new L.LatLng(r[0].from_geo.lat, r[0].from_geo.lon), - new L.LatLng(r[0].to_geo.lat, r[0].to_geo.lon)], {})._latlngs - }) - - this.debounceSave = api.throttle(this.save_data, 500); - this.debounceSearch = { - hotel: api.throttle((q) => { - this.querying.hotel = true; - this.search_nominatim( - q, - (r) => - r.type == "hotel" || r.type == "hostel" || r.type == "guest_house", - ).then((r) => { - this.querying.hotel = false; - }); - }, 500), - restaurants: api.throttle((q) => { - this.querying.food = true; - this.search_nominatim(q, (r) => api.is_restauration_type(r)).then( - (r) => { - this.querying.food = false; - }, - ); - }, 500), - places: api.throttle((q) => { - this.querying.place = true; - this.search_nominatim(q, (r) => api.is_attraction_type(r)).then((r) => { - this.querying.place = false; - }); - }, 500), - other: api.throttle((q) => { - this.querying.any = true; - this.search_nominatim(q, (r) => true).then((r) => { - this.querying.any = false; - }); - }, 500), - flight: api.throttle((q) => this.search_flight(q), 500), - }; }, watch: { journey: { handler: function (ndata, odata) { - this.debounceSave(); + this.save_data(); }, deep: true, },