Update src/old.js

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: new journey_wrapper(window.location.pathname.split("/").pop() || String.gen_id(16)),
-
-    journey_step_data: { day: 1, section: 0 },
-    journey_data: {
-      name: "New Journey",
-      main: [],
-    },
 
     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) {
+    start_journey: () => window.location.href = "/" + this.journey.id,
-      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);
 
-      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();
+      this.impexp = JSON.stringify(this.journey.data).toEncoded();
-      api.save(this.journey_id, this.journey_data);
+      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) => {
+      this.journey.data.main.forEach((e) => {
-        if (e.dateRange) {
+        if (e.date_range) {
-          e.dateRange[0] = new Date(e.dateRange[0]);
+          e.date_range[0] = new Date(e.date_range[0]);
-          e.dateRange[1] = new Date(e.dateRange[1]);
+          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();
       },