diff --git a/src/old.js b/src/old.js index 07049a7..1796bd4 100644 --- a/src/old.js +++ b/src/old.js @@ -1,4 +1,6 @@ + import * as api from "./api"; +import journey_wrapper from "./types/wrapper"; Vue.component("l-map", window.Vue2Leaflet.LMap); Vue.component("l-tile-layer", window.Vue2Leaflet.LTileLayer); @@ -15,13 +17,7 @@ const app = new Vue({ data: { journey_edit: ["view", "short"].indexOf(window.location.pathname.split("/")[1]) == -1, - journey_id: window.location.pathname.split("/").pop() || String.gen_id(16), - - journey_step_data: { day: 1, section: 0 }, - journey_data: { - name: "New Journey", - main: [], - }, + 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 }, @@ -35,185 +31,14 @@ const app = new Vue({ }, }, methods: { - start_journey: function (event) { - window.location.href = "/" + this.journey_id; - }, - add_section: function (event) { - if (this.journey_data.main == undefined) this.journey_data.main = []; - this.journey_data.main.push({ - title: "?", - step_title: [], - map: { zoom: 2 }, - hotel: { latlon: [0, 0] }, - places: { restaurants: [], places: [] }, - }); - }, - step_len: function (idx) { - return this.journey_data.main[idx].dateRange - ? (this.journey_data.main[idx].dateRange[1] - - this.journey_data.main[idx].dateRange[0]) / - (1000 * 60 * 60 * 24) + - 1 - : 1; - }, - next_step: function () { - this.journey_step_data.day += 1; - let s = this.journey_step_data.section; - let cd = this.step_len(s); + start_journey: () => window.location.href = "/" + this.journey.id, - if (this.journey_step_data.day > cd) { - this.journey_step_data.section += 1; - if (this.journey_step_data.section >= this.journey_data.main.length) { - this.journey_step_data.section = this.journey_data.main.length - 1; - this.journey_step_data.day = cd; - } else { - this.journey_step_data.day = 1; - } - } - }, - prev_step: function () { - this.journey_step_data.day -= 1; - if (this.journey_step_data.day <= 0) { - this.journey_step_data.section -= 1; - if (this.journey_step_data.section < 0) { - this.first_step(); - } else { - let s = this.journey_step_data.section; - - let cd = this.step_len(s); - this.journey_step_data.day = cd; - } - } - }, - nextnext_step: function () { - this.journey_step_data.section += 1; - this.journey_step_data.day = 1; - if (this.journey_step_data.section >= this.journey_data.main.length) - this.first_step(); - }, - prevprev_step: function () { - this.journey_step_data.section -= 1; - this.journey_step_data.day = 1; - if (this.journey_step_data.section < 0) this.first_step(); - }, - first_step: function () { - this.journey_step_data.section = 0; - this.journey_step_data.day = 1; - }, - - active_date: function () { - if (this.journey_step_data.day < 0) return "?"; - if (!this.journey_data.main[this.journey_step_data.section].dateRange) - return "?"; - var date = new Date( - this.journey_data.main[this.journey_step_data.section].dateRange[0], - ); - date.setDate(date.getDate() + this.journey_step_data.day - 1); - return this.format_date(date); - }, - format_date: function (d) { - return ( - ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][d.getDay()] + - " " + - d.getDate() + - " " + - [ - "Jan", - "Feb", - "Mar", - "Apr", - "May", - "Jun", - "Jul", - "Aug", - "Sep", - "Oct", - "Nov", - "Dec", - ][d.getMonth()] - ); - }, - - total_days: function () { - if (this.journey_data.main.length == 0) return 0; - try { - return ( - (this.journey_data.main[this.journey_data.main.length - 1] - .dateRange[1] - - this.journey_data.main[0].dateRange[0]) / - (1000 * 60 * 60 * 24) - ); - } catch { - return "?"; - } - }, - total_date: function () { - if (this.journey_data.main.length == 0) return ""; - try { - return `${this.format_date( - this.journey_data.main[0].dateRange[0], - )} - ${this.format_date( - this.journey_data.main[this.journey_data.main.length - 1] - .dateRange[1], - )}`; - } catch { - return "?"; - } - }, - update_date: function (idx) { - let dateRange = this.journey_data.main[idx].dateRange; - let start_end = [0, 0]; - let step_len = 0; - - let last_start = dateRange[0]; - for (let i = idx - 1; i >= 0; --i) { - step_len = this.step_len(i) - 1; - if (this.journey_data.main[i].dateRange) { - start_end = [last_start.getDate() - step_len, last_start.getDate()]; - } else { - this.journey_data.main[i].dateRange = [new Date(), new Date()]; - start_end = [last_start.getDate() - step_len, last_start.getDate()]; - } - this.journey_data.main[i].dateRange[0].setTime(last_start.getTime()); - this.journey_data.main[i].dateRange[0].setDate(start_end[0]); - this.journey_data.main[i].dateRange[1].setTime(last_start.getTime()); - this.journey_data.main[i].dateRange[1].setDate(start_end[1]); - last_start = this.journey_data.main[i].dateRange[0]; - } - - let last_end = dateRange[1]; - for (let i = idx + 1; i < this.journey_data.main.length; ++i) { - step_len = this.step_len(i) - 1; - if (this.journey_data.main[i].dateRange) { - start_end = [last_end.getDate(), last_end.getDate() + step_len]; - } else { - this.journey_data.main[i].dateRange = [new Date(), new Date()]; - start_end = [last_end.getDate(), last_end.getDate() + step_len]; - } - this.journey_data.main[i].dateRange[0].setTime(last_end.getTime()); - this.journey_data.main[i].dateRange[0].setDate(start_end[0]); - this.journey_data.main[i].dateRange[1].setTime(last_end.getTime()); - this.journey_data.main[i].dateRange[1].setDate(start_end[1]); - last_end = this.journey_data.main[i].dateRange[1]; - } - }, - - rm_section: function (idx) { - this.journey_data.main.splice(idx, 1); - if (this.journey_step_data.section == idx) { - this.prevprev_step(); - } - }, - sel_section: function (idx) { - this.journey_step_data.section = idx; - this.journey_step_data.day = 1; - }, search_nominatim: function (txt, f) { if (txt == "") { this.query.nominatim = []; return Promise.resolve([]); } - return query_nominatim(txt, f).then((results) => { + return api.query_nominatim(txt, f).catch((err) => []).then((results) => { results.forEach((r) => { r.latlon = [parseFloat(r.lat), parseFloat(r.lon)]; r.sname = r.display_name.split(",")[0]; @@ -224,7 +49,7 @@ const app = new Vue({ search_flight: function (txt) { if (txt == "") return; this.querying.flight = true; - query_flight(txt.replace(" ", "")).then((results) => { + api.query_flight(txt.replace(" ", "")).then((results) => { if (results.results == "") { this.query.flight = []; this.querying.flight = false; @@ -243,27 +68,27 @@ const app = new Vue({ }, save_data: function () { - this.impexp = JSON.stringify(this.journey_data).toEncoded(); - api.save(this.journey_id, this.journey_data); + this.impexp = JSON.stringify(this.journey.data).toEncoded(); + api.save(this.journey.id, this.journey.data); }, import_data: function () { - this.journey_data = Object.assign( + this.journey.data = Object.assign( {}, JSON.parse(this.impexp.toDecoded()), ); - this.journey_data.main.forEach((e) => { - if (e.dateRange) { - e.dateRange[0] = new Date(e.dateRange[0]); - e.dateRange[1] = new Date(e.dateRange[1]); + 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(); + this.impexp = JSON.stringify(this.journey.data).toEncoded(); }, filter_selected: function (list, step) { return list.filter((e) => - step ? e.step == this.journey_step_data.day : e.step >= 0, + step ? e.step == this.journey.sel_day : e.step >= 0, ); }, filter_unselected: function (list) { @@ -286,21 +111,21 @@ const app = new Vue({ window.addEventListener("keydown", (e) => { switch (e.key) { case "ArrowLeft": - this.prev_step(); + this.journey.day_prev(); break; case "ArrowRight": - this.next_step(); + this.journey.day_next(); break; default: console.log(e.key); } }); - api.load(this.journey_id).then((r) => (app.journey_data = r)); + api.load(this.journey.id).then((r) => (app.journey.data = r)); - this.debounceSave = _.debounce(this.save_data, 500); + this.debounceSave = api.throttle(this.save_data, 500); this.debounceSearch = { - hotel: _.debounce((q) => { + hotel: api.throttle((q) => { this.querying.hotel = true; this.search_nominatim( q, @@ -310,7 +135,7 @@ const app = new Vue({ this.querying.hotel = false; }); }, 500), - restaurants: _.debounce((q) => { + restaurants: api.throttle((q) => { this.querying.food = true; this.search_nominatim(q, (r) => api.is_restauration_type(r)).then( (r) => { @@ -318,23 +143,23 @@ const app = new Vue({ }, ); }, 500), - places: _.debounce((q) => { + 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: _.debounce((q) => { + other: api.throttle((q) => { this.querying.any = true; this.search_nominatim(q, (r) => true).then((r) => { this.querying.any = false; }); }, 500), - flight: _.debounce((q) => this.search_flight(q), 500), + flight: api.throttle((q) => this.search_flight(q), 500), }; }, watch: { - journey_data: { + journey: { handler: function (ndata, odata) { this.debounceSave(); },