234 lines
7.7 KiB
JavaScript
234 lines
7.7 KiB
JavaScript
|
|
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 { focus_day, focus_leg, nav_mouseleave, nav_mousemove } from "./helper/nav";
|
|
import { set_search_set_results } from "./helper/api";
|
|
|
|
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);
|
|
|
|
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,
|
|
},
|
|
useDay: false,
|
|
toast: {
|
|
show: false,
|
|
title: '',
|
|
desc: '',
|
|
special: '',
|
|
acceptText: '',
|
|
cancelText: '',
|
|
func: () => { },
|
|
},
|
|
lang: {
|
|
format: "ddd D MMM",
|
|
formatLocale: {
|
|
firstDayOfWeek: 1,
|
|
},
|
|
monthBeforeYear: true,
|
|
},
|
|
},
|
|
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`;
|
|
|
|
},
|
|
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;"></i>`;
|
|
},
|
|
|
|
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
|
|
if (item.type == 'flight') {
|
|
this.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]]
|
|
}
|
|
} else {
|
|
this.map_override.active = false
|
|
}
|
|
},
|
|
|
|
drawer_click_item: function (item) {
|
|
const tpe = this.query.type
|
|
this.search_set_clear(item ? true : false);
|
|
this.drawer_hover_item();
|
|
if (item) {
|
|
item.step = -1;
|
|
journey_add_place(this.journey, tpe, item)
|
|
}
|
|
},
|
|
|
|
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';
|
|
e.target.style['max-height'] = "100%";
|
|
},
|
|
|
|
onMapClick(e) {
|
|
if (this.query.addmarker) {
|
|
const newMarker = {
|
|
latlon: [e.latlng.lat, e.latlng.lng],
|
|
sname: this.query.query,
|
|
type: this.query.type,
|
|
};
|
|
this.drawer_click_item(newMarker)
|
|
}
|
|
},
|
|
},
|
|
created: function () {
|
|
set_search_set_results(this.search_set_results);
|
|
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();
|
|
}, 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);
|
|
}
|
|
});
|
|
|
|
api.load(this.journey.id).then((r) => {
|
|
app.journey.data = migrator(r)
|
|
});
|
|
},
|
|
watch: {
|
|
journey: {
|
|
handler: function (ndata, odata) {
|
|
if (this.edit_active) this.save_data();
|
|
},
|
|
deep: true,
|
|
},
|
|
},
|
|
});
|