dev merge (#163)
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
Co-authored-by: soraefir Co-authored-by: sora-ext Reviewed-on: #163
This commit is contained in:
@ -2,7 +2,10 @@
|
||||
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 "./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);
|
||||
@ -20,13 +23,18 @@ 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,
|
||||
},
|
||||
leg_nav: {
|
||||
scrollInterval: null,
|
||||
scrollDir: null
|
||||
useDay: false,
|
||||
toast: {
|
||||
show: false,
|
||||
title: '',
|
||||
desc: '',
|
||||
special: '',
|
||||
acceptText: '',
|
||||
cancelText: '',
|
||||
func: () => { },
|
||||
},
|
||||
impexp: "",
|
||||
lang: {
|
||||
format: "ddd D MMM",
|
||||
formatLocale: {
|
||||
@ -64,11 +72,10 @@ const app = new Vue({
|
||||
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 () {
|
||||
import_data: function (v) {
|
||||
this.journey.data = Object.assign(
|
||||
{},
|
||||
JSON.parse(this.impexp.toDecoded()),
|
||||
JSON.parse(v.toDecoded()),
|
||||
);
|
||||
this.journey.data.main.forEach((e) => {
|
||||
if (e.date_range) {
|
||||
@ -77,77 +84,47 @@ 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,
|
||||
);
|
||||
},
|
||||
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);
|
||||
},
|
||||
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;
|
||||
}
|
||||
|
||||
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 = () => { }
|
||||
},
|
||||
|
||||
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
|
||||
});
|
||||
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_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;
|
||||
});
|
||||
|
||||
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) {
|
||||
@ -164,112 +141,79 @@ 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, this.query.type, item)
|
||||
}
|
||||
},
|
||||
|
||||
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);
|
||||
case 'place': return this.search_place(txt);
|
||||
case 'other': return this.search_other(txt);
|
||||
case 'flight': return this.search_flight(txt);
|
||||
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) {
|
||||
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;
|
||||
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)
|
||||
}
|
||||
this.query.note = false;
|
||||
this.query.type = f;
|
||||
const query_in = document.getElementById('query_input')
|
||||
setTimeout(() => query_in.focus(), 500);
|
||||
this.search_active({ target: query_in })
|
||||
},
|
||||
|
||||
|
||||
sideScroll: function (element, direction, speed, step) {
|
||||
this.leg_nav.scrollDir = direction
|
||||
if (direction == 'none') return;
|
||||
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 left = e.pageX - c.getBoundingClientRect().left;
|
||||
const newDir =
|
||||
left < c.offsetWidth * 0.1 ? 'left' :
|
||||
(left > c.offsetWidth * 0.9 ? 'right' : 'none')
|
||||
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.scrollDir = 'none'
|
||||
this.leg_nav.scrollInterval = null
|
||||
},
|
||||
|
||||
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%";
|
||||
},
|
||||
},
|
||||
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)
|
||||
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(() => {
|
||||
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.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":
|
||||
this.journey.day_prev();
|
||||
break;
|
||||
case "ArrowRight":
|
||||
this.journey.day_next();
|
||||
break;
|
||||
default:
|
||||
console.log(e.key);
|
||||
case "ArrowLeft": return this.pressed_prev()
|
||||
case "ArrowRight": return this.pressed_next()
|
||||
default: return console.log(e.key);
|
||||
}
|
||||
});
|
||||
|
||||
@ -280,12 +224,9 @@ const app = new Vue({
|
||||
watch: {
|
||||
journey: {
|
||||
handler: function (ndata, odata) {
|
||||
if (this.edit_active)
|
||||
this.save_data();
|
||||
if (this.edit_active) this.save_data();
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user