Update src/client/old.js

src/client/old.js

@@ -2,6 +2,7 @@
 import * as api from "./api";
 import journey_wrapper from "./types/wrapper";
 import { migrator } from "./types/migration";
+import { getGeoLine } from "./types/geom";
 
 Vue.component("l-map", window.Vue2Leaflet.LMap);
 Vue.component("l-tile-layer", window.Vue2Leaflet.LTileLayer);
@@ -21,8 +22,11 @@ const app = new Vue({
       ["view", "short"].indexOf(window.location.pathname.split("/")[1]) == -1,
     journey: new journey_wrapper(window.location.pathname.split("/").pop() || String.gen_id(16)),
 
-    query: { hotel: [], flight: [], nominatim: [] },
+    query: {
-    querying: { hotel: false, flight: false, place: false, food: false },
+      type: "",
+      act: false,
+      res: [],
+    },
     impexp: "",
     lang: {
       format: "ddd D MMM",
@@ -49,44 +53,44 @@ const app = new Vue({
       return [[minLng, minLat], [maxLng, maxLat]]
     },
 
-    search_nominatim: function (txt, f) {
+    generate_marker: function (item, fcolor) {
-      if (txt == "") {
-        this.query.nominatim = [];
-        return Promise.resolve([]);
-      }
-      let bb = this.journey.leg_get();
-      return api.query_nominatim(txt, this.compute_bb(), f).catch((err) => []).then((results) => {
-        results.forEach((r) => {
-          r.latlon = [parseFloat(r.lat), parseFloat(r.lon)];
-          r.sname = r.display_name.split(",")[0];
-        });
-        this.query.nominatim = results;
-      });
-    },
-    search_flight: function (txt) {
-      if (txt == "") return;
-      this.querying.flight = true;
-      api.query_flight(txt).then((results) => {
-        if (results.results == "") {
-          this.query.flight = [];
-          this.querying.flight = false;
-          return;
-        }
-        this.query.flight = results.results;
-        this.querying.flight = false;
-      });
-    },
-    generate_icon: function (item, fcolor) {
       return L.AwesomeMarkers.icon({
+        iconAnchor: [12, 36],
         icon: api.icon_type(item) || "star",
         prefix: "fa",
         markerColor: fcolor || item.color || "blue",
       }).createIcon().outerHTML;
     },
 
+    generate_rotation: function (index, list) {
+      if (index < 0 || index >= list.length) return 0;
+      let c0, c1;
+      if (index == 0) {
+        c0 = list[index]
+        c1 = list[index + 1]
+      } else if (index == list.length - 1) {
+        c0 = list[index - 1]
+        c1 = list[index]
+      } else {
+        c0 = list[index - 1];
+        c1 = list[index + 1];
+      }
+      const dx = c1[0] - c0[0];
+      const dy = c1[1] - c0[1];
+      const brng = Math.atan2(dy, dx);
+      return `rotate:${brng - Math.PI / 2}rad`;// * (180 / Math.PI); // Convert from radians to degrees
+
+    },
+
+    generate_icon: function (item, fcolor, styling = "") {
+      return `<i class="fa fa-${api.icon_type(item) || "star"} fa-2x"  style="${styling}; color:${fcolor}; margin-left:-12px; margin-top:-32px; text-align:center; align-content:center; width:32px; height:32px;"></i>`;
+    },
+
     save_data: function () {
+      api.throttle(() => {
         this.impexp = JSON.stringify(this.journey.data).toEncoded();
         api.save(this.journey.id, this.journey.data);
+      }, 1000);
     },
     import_data: function () {
       this.journey.data = Object.assign(
@@ -119,12 +123,58 @@ const app = new Vue({
       console.log(e);
     },
 
+    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) => {
+        this.query.act = true;
+        this.query.type = f;
+        return 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];
+          });
+          this.query.res = r;
+          this.query.act = false;
+        });
+      }
+    },
+    //        break;
+    //           case "flight": {
+    //   return api.query_flight(q).then((r) => {
+    //     // r.path = r.map(el => getGeoLine(
+    //     //   new L.LatLng(el.from_geo.lat, el.from_geo.lon),
+    //     //   new L.LatLng(el.to_geo.lat, el.to_geo.lon), { dist: 10_000_000 }).map(v => [v.lat, v.lng]));
+    //     this.query.res = r;
+    //     this.query.actt = false;
+    //   });
+    // } break;
+    //           default:
+    // console.log(`Query not yet setup: ${k}`)
+    //         }
+    //       }
+    //     },
+
     keyboardEvent(e) {
       if (e.which === 13) {
       }
     },
   },
   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(), 2000)
+
     window.addEventListener("keydown", (e) => {
       switch (e.key) {
         case "ArrowLeft":
@@ -140,53 +190,18 @@ const app = new Vue({
 
     api.load(this.journey.id).then((r) => (app.journey.data = migrator(r)));
 
+    // api.query_flight("qf1").then(r => {
+    //   this.polyline.latlngs = r.map(el => getGeoLine(
+    //     new L.LatLng(el.from_geo.lat, el.from_geo.lon),
+    //     new L.LatLng(el.to_geo.lat, el.to_geo.lon), { dist: 5_000_000 }).map(v => [v.lat, v.lng]));
+    //   console.log(this.polyline.latlngs)
+    // });
 
-    api.query_flight("qf1").then(r => {
-      console.log(r)
-      this.polyline.latlngs = L.geodesic([
-        new L.LatLng(r[0].from_geo.lat, r[0].from_geo.lon),
-        new L.LatLng(r[0].to_geo.lat, r[0].to_geo.lon)], {})._latlngs
-    })
-
-    this.debounceSave = api.throttle(this.save_data, 500);
-    this.debounceSearch = {
-      hotel: api.throttle((q) => {
-        this.querying.hotel = true;
-        this.search_nominatim(
-          q,
-          (r) =>
-            r.type == "hotel" || r.type == "hostel" || r.type == "guest_house",
-        ).then((r) => {
-          this.querying.hotel = false;
-        });
-      }, 500),
-      restaurants: api.throttle((q) => {
-        this.querying.food = true;
-        this.search_nominatim(q, (r) => api.is_restauration_type(r)).then(
-          (r) => {
-            this.querying.food = false;
-          },
-        );
-      }, 500),
-      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: api.throttle((q) => {
-        this.querying.any = true;
-        this.search_nominatim(q, (r) => true).then((r) => {
-          this.querying.any = false;
-        });
-      }, 500),
-      flight: api.throttle((q) => this.search_flight(q), 500),
-    };
   },
   watch: {
     journey: {
       handler: function (ndata, odata) {
-        this.debounceSave();
+        this.save_data();
       },
       deep: true,
     },