dev #160
@ -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 `<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>`;
|
||||
},
|
||||
|
||||
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,
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user