Update src/client/old.js

src/client/old.js

@@ -2,10 +2,11 @@
 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 { journey_add_place, journey_from_url } 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";
+import toast from "./types/toast";
+import search_drawer from "./types/search_drawer";
 
 Vue.component("l-map", window.Vue2Leaflet.LMap);
 Vue.component("l-tile-layer", window.Vue2Leaflet.LTileLayer);
@@ -15,26 +16,16 @@ 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 journey_base = journey_from_url()
 
 const app = new Vue({
   el: "#app",
   data: {
-    edit_active: ["view", "short"].indexOf(window.location.pathname.split("/")[1]) == -1,
+    edit_active: journey_base.edit,
-    journey: new journey_wrapper(window.location.pathname.split("/").pop() || String.gen_id(16)),
+    journey: new journey_wrapper(journey_base.id),
-    map_override: { active: false, elements: [] },
+    search_drawer: new search_drawer(),
-    query: {
-      type: "", query: "", res: [], load: false, sub: false, note: false, drawer: false, addmarker: false,
-    },
     useDay: false,
-    toast: {
+    toast: new toast(),
-      show: false,
-      title: '',
-      desc: '',
-      special: '',
-      acceptText: '',
-      cancelText: '',
-      func: () => { },
-    },
     lang: {
       format: "ddd D MMM",
       formatLocale: {
@@ -46,18 +37,12 @@ const app = new Vue({
   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`;
+      return `rotate:${brng - 0 * Math.PI / 2}rad`;
 
     },
     generate_marker: function (item, fcolor) {
@@ -72,77 +57,23 @@ 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 (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
+        this.search_drawer.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]]
+          this.search_drawer.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]]
+          this.search_drawer.map_override.elements = [[item.lat, item.lon]]
         }
       } else {
-        this.map_override.active = false
+        this.search_drawer.map_override.active = false
       }
     },
 
     drawer_click_item: function (item) {
-      const tpe = this.query.type
+      const tpe = this.search_drawer.query.type
-      this.search_set_clear(item ? true : false);
+      this.search_drawer.reset();
       this.drawer_hover_item();
       if (item) {
         item.step = -1;
@@ -150,28 +81,6 @@ const app = new Vue({
       }
     },
 
-    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';
@@ -179,53 +88,64 @@ const app = new Vue({
     },
 
     onMapClick(e) {
-      if (this.query.addmarker) {
+      if (this.search_drawer.query.addmarker) {
         const newMarker = {
           latlon: [e.latlng.lat, e.latlng.lng],
-          sname: this.query.query,
+          sname: this.search_drawer.query.query,
-          type: this.query.type,
+          type: this.search_drawer.query.type,
         };
         this.drawer_click_item(newMarker)
       }
     },
   },
   created: function () {
-    set_search_set_results(this.search_set_results);
+    set_search_set_results((r) => { this.search_drawer.results(r); });
     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(() => {
+    this.pressed_prev_next = api.throttle((dir_prev) => {
-      if (this.useDay) this.journey.day_prev();
+      if (this.useDay && dir_prev) return this.journey.day_prev();
-      else this.journey.leg_prev();
+      if (!this.useDay && dir_prev) return this.journey.leg_prev();
-    }, 250)
+      if (this.useDay && !dir_prev) return this.journey.day_next();
-    this.pressed_next = api.throttle(() => {
+      if (!this.useDay && !dir_prev) return this.journey.leg_next();
-      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 "ArrowLeft": return this.pressed_prev_next(true)
-        case "ArrowRight": return this.pressed_next()
+        case "ArrowRight": return this.pressed_prev_next(false)
-        default: return console.log(e.key);
+        default: return;
       }
     });
 
     api.load(this.journey.id).then((r) => {
       app.journey.data = migrator(r)
+      app.journey.sel_leg = Math.min(app.journey.leg_count() - 1, journey_base.leg);
+      app.journey.sel_day = Math.min(app.journey.day_count() - 1, journey_base.day);
+      setTimeout(() => focus_leg(this.journey) && focus_day(this.journey), 25);
+
+      this.$refs.map.mapObject.keyboard.disable();
+      this.search_drawer.refresh_map = () => { this.$refs.map.mapObject.invalidateSize() }
+      this.search_drawer.get_leg = () => { return this.journey.leg_get() }
+      this.search_drawer.get_bb = () => {
+        if (!this.$refs.map) return []
+        const bounds = this.$refs.map.mapObject.getBounds();
+        return [[bounds.getSouthWest().lng, bounds.getSouthWest().lat],
+        [bounds.getNorthEast().lng, bounds.getNorthEast().lat]]
+      }
     });
   },
   watch: {
     journey: {
       handler: function (ndata, odata) {
         if (this.edit_active) this.save_data();
+        window.location.hash = `#${this.journey.sel_leg}_${this.journey.sel_day}`
       },
       deep: true,
     },