Update src/client/old.js

src/client/old.js

@@ -2,7 +2,8 @@
 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 "./journey_helper";
+import { filter_existing, process_results } from "./api_helper";
 
 Vue.component("l-map", window.Vue2Leaflet.LMap);
 Vue.component("l-tile-layer", window.Vue2Leaflet.LTileLayer);
@@ -20,11 +21,20 @@ 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,
     },
     nav: {
       scrollInterval: null,
-      scrollDir: null
+      scrollDir: null,
+      useDay: false,
+    },
+    toast: {
+      show: true,
+      title: 'Confirm deletion',
+      desc: 'Are you sure ? This is irreversible...',
+      special: '',
+      acceptText: 'delete',
+      cancelText: 'cancel',
     },
     impexp: "",
     lang: {
@@ -80,73 +90,42 @@ 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;
-      }
-    },
 
-    search_nominatim: function (f) {
+
-      return (q) => api.query_nominatim(q, this.compute_bb(), this.get_filter(f)).catch((_err) => []).then((r) => {
+    search_set_results(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
+    },
+    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);
+    },
+
+    search_nominatim: function (f) {
+      return (q) => api.query_nominatim(q, this.compute_bb(), api.get_filter(f)).catch((_err) => []).then((r) => {
+        r = process_results('nominatim', r)
+        r = filter_existing('nominatim', this.journey.leg_get(), r)
+        return this.search_set_results(r)
       });
     },
     search_travel: function (f) {
       return (q) => api.query_flight(q).then((r) => {
-        r.forEach(el => {
+        r = process_results('travel', r)
-          el.path = getGeoLine(
+        r = filter_existing('travel', this.journey.leg_get(), r)
-            { lat: el.from_geo.lat, lng: el.from_geo.lon },
+        return this.search_set_results(r)
-            { 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;
       });
     },
 
@@ -165,28 +144,20 @@ const app = new Vue({
 
     drawer_click_item: function (item) {
       const tpe = this.query.type;
-      this.query.res = [];
+      this.search_set_clear(item ? true : false);
-      this.query.note = false;
+      this.drawer_hover_item();
-      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()
       if (item) {
         item.step = -1;
-        switch (tpe) {
+        journey_add_place(this.journey, tpe, item)
-          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);
-        }
       }
     },
 
+    place_delete(tpe, idx) {
+      journey_del_place(this.journey, tpe, idx)
+    },
+
     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);
@@ -197,23 +168,13 @@ const app = new Vue({
     },
 
     search_enable: function (f) {
-      this.query.drawer = true;
+      const is_notes = f == 'notes';
-      setTimeout(() => this.$refs.map.mapObject.invalidateSize(), 500);
+      this.search_set_active(is_notes, f)
-      if (f == "notes") {
+      const query_in = document.getElementById(is_notes ? 'query_note' : 'query_input')
-        this.query.note = true;
-        this.query.type = null;
-        const query_in = document.getElementById('query_note')
       setTimeout(() => query_in.focus(), 500);
-        return;
+      if (!is_notes) this.search_active({ target: query_in })
-      }
-      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.nav.scrollDir = direction
       if (direction == 'none') return;
@@ -222,11 +183,6 @@ const app = new Vue({
       }, speed);
     },
 
-    keyboardEvent(e) {
-      if (e.which === 13) {
-      }
-    },
-
     focus_leg(idx) {
       const c = document.querySelector('.scroll-content.nav-leg')
       const item = c.children[(idx != undefined ? idx : this.journey.sel_leg) + 1];
@@ -258,29 +214,50 @@ const app = new Vue({
     },
 
     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%";
     },
+
+    onMapClick(e) {
+      if (this.query.addmarker) {
+        const newMarker = {
+          latlon: [e.latlng.lat, e.latlng.lng],
+          lat: e.latlng.lat,
+          lon: e.latlng.lng,
+          sname: this.query.query,
+          type: this.query.type,
+        };
+        this.drawer_click_item(newMarker)
+      }
+    },
   },
   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)
+    this.search_flight = api.throttle(this.search_travel("flight"), 2000)
     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.nav.useDay) this.journey.day_prev();
+      else this.journey.leg_prev();
+    }, 200)
+    this.pressed_next = api.throttle(() => {
+      if (this.nav.useDay) this.journey.day_next();
+      else this.journey.leg_next();
+    }, 200)
 
     window.addEventListener("keydown", (e) => {
       switch (e.key) {
         case "ArrowLeft":
-          this.journey.day_prev();
+          this.pressed_prev()
           break;
         case "ArrowRight":
-          this.journey.day_next();
+          this.pressed_next()
           break;
         default:
           console.log(e.key);
@@ -301,5 +278,3 @@ const app = new Vue({
     },
   },
 });
-
-