247 lines
8.0 KiB
JavaScript
247 lines
8.0 KiB
JavaScript
|
|
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);
|
|
Vue.component("l-marker", window.Vue2Leaflet.LMarker);
|
|
Vue.component("l-icon", window.Vue2Leaflet.LIcon);
|
|
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);
|
|
Vue.component("multiselect", window.VueMultiselect.default);
|
|
Vue.use(window.VueTextareaAutosize);
|
|
|
|
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, center: [0, 0] },
|
|
|
|
query: {
|
|
type: "", res: [],
|
|
},
|
|
impexp: "",
|
|
lang: {
|
|
format: "ddd D MMM",
|
|
formatLocale: {
|
|
firstDayOfWeek: 1,
|
|
},
|
|
monthBeforeYear: true,
|
|
},
|
|
polyline: {
|
|
latlngs: [],
|
|
color: 'green'
|
|
},
|
|
leg_nav: {
|
|
scrollInterval: null,
|
|
scrollDir: null
|
|
}
|
|
},
|
|
methods: {
|
|
start_journey: function () { window.location.href = "/" + this.journey.id },
|
|
|
|
compute_bb: function () {
|
|
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`;
|
|
|
|
},
|
|
generate_marker: function (item, fcolor) {
|
|
return `
|
|
<div style="position: absolute;top: -30px;left: -6px;">
|
|
<i class=" fa fa-${api.icon_type(item) || "star"} fa-lg icon-white" style="position: absolute;text-align:center; width:24px;height:24px; line-height:1.5em"></i>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 36" width="24" height="36">
|
|
<circle cx="12" cy="12" r="12" fill="${fcolor || item.color || "blue"}"/>
|
|
<polygon points="4,12 20,12 12,36" fill="${fcolor || item.color || "blue"}" /></svg>`
|
|
},
|
|
generate_icon: function (item, fcolor = "", styling = "", classes = "") {
|
|
return `<i class="fa fa-${api.icon_type(item) || "star"} fa-2x ${classes}" style="${styling}; color:${fcolor || "white"}; text-align:center; align-content:center; width:32px; height:32px;"></i>`;
|
|
},
|
|
|
|
|
|
import_data: function () {
|
|
this.journey.data = Object.assign(
|
|
{},
|
|
JSON.parse(this.impexp.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]);
|
|
}
|
|
});
|
|
},
|
|
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,
|
|
);
|
|
},
|
|
filter_unselected: function (list) {
|
|
return list.filter((e) => e.step == undefined || e.step < 0);
|
|
},
|
|
remove_item: function (list, idx) {
|
|
list[idx].step = -1;
|
|
list.splice(idx, 1);
|
|
},
|
|
log: function (e) {
|
|
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.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;
|
|
return r
|
|
});
|
|
}
|
|
},
|
|
search_travel: function (f) {
|
|
return (q) => {
|
|
this.query.type = f;
|
|
return 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: 5_000_000 }).map(v => [v.lat, v.lng])
|
|
el.type = "flight";
|
|
});
|
|
this.query.res = r;
|
|
return r;
|
|
});
|
|
}
|
|
},
|
|
|
|
drawer_hover_item: function (item) {
|
|
if (item) {
|
|
this.map_override.active = true
|
|
this.map_override.center = [item.lat, item.lon]
|
|
} else {
|
|
this.map_override.active = false
|
|
}
|
|
},
|
|
|
|
drawer_click_item: function (item) {
|
|
const tpe = this.query.type;
|
|
this.query.res = [];
|
|
this.query.type = null;
|
|
this.drawer_hover_item()
|
|
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);
|
|
}
|
|
},
|
|
|
|
search_active: function (q) {
|
|
const txt = q.target.value
|
|
switch (this.query.type) {
|
|
case 'hotel': return this.search_hotel(txt);
|
|
case 'restaurant': return this.search_restaurant(txt);
|
|
case 'place': return this.search_place(txt);
|
|
case 'other': return this.search_other(txt);
|
|
case 'flight': return this.search_flight(txt);
|
|
}
|
|
},
|
|
|
|
|
|
sideScroll: function (element, direction, speed, step) {
|
|
this.leg_nav.scrollDir = direction
|
|
this.leg_nav.scrollInterval = setInterval(() => {
|
|
element.scrollLeft += (direction == 'left') ? -step : step;
|
|
}, speed);
|
|
},
|
|
|
|
keyboardEvent(e) {
|
|
if (e.which === 13) {
|
|
}
|
|
},
|
|
nav_mousemove(e) {
|
|
const c = document.querySelector('.scroll-content')
|
|
const newDir =
|
|
e.pageX < c.offsetWidth * 0.2 ? 'left' :
|
|
(e.pageX > c.offsetWidth * 0.8 ? 'right' : this.leg_nav.scrollDir)
|
|
if (!this.leg_nav.scrollInterval || this.leg_nav.scrollDir != newDir) {
|
|
if (this.leg_nav.scrollInterval) clearInterval(this.leg_nav.scrollInterval)
|
|
this.sideScroll(c, newDir, 25, 10);
|
|
}
|
|
},
|
|
nav_mouseleave(e) {
|
|
clearInterval(this.leg_nav.scrollInterval);
|
|
this.leg_nav.scrollInterval = null
|
|
},
|
|
},
|
|
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.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)
|
|
|
|
window.addEventListener("keydown", (e) => {
|
|
switch (e.key) {
|
|
case "ArrowLeft":
|
|
this.journey.day_prev();
|
|
break;
|
|
case "ArrowRight":
|
|
this.journey.day_next();
|
|
break;
|
|
default:
|
|
console.log(e.key);
|
|
}
|
|
});
|
|
|
|
api.load(this.journey.id).then((r) => (app.journey.data = migrator(r)));
|
|
|
|
// this.search_travel("flight")("qf1").then(r => {
|
|
// // this.polyline.latlngs = r.map(e => e.path)
|
|
// this.journey.data.main[this.journey.sel_leg].travel = r;
|
|
// });
|
|
|
|
},
|
|
watch: {
|
|
journey: {
|
|
handler: function (ndata, odata) {
|
|
this.save_data();
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
});
|
|
|
|
|