Update src/client/old.js

src/client/old.js

@@ -15,15 +15,20 @@ Vue.component("l-control-scale", window.Vue2Leaflet.LControlScale);
 // Vue.component("multiselect", window.VueMultiselect.default);
 Vue.use(window.VueTextareaAutosize);
 
+var first_boot = true
+
 const app = new Vue({
   el: "#app",
   data: {
     edit_active: ["view", "short"].indexOf(window.location.pathname.split("/")[1]) == -1,
     journey: new journey_wrapper(window.location.pathname.split("/").pop() || String.gen_id(16)),
-    map_override: { active: false, center: [0, 0] },
-
+    map_override: { active: false, elements: [] },
     query: {
-      type: "", res: [], load: false,
+      type: "", res: [], load: false, sub: false,
+    },
+    leg_nav: {
+      scrollInterval: null,
+      scrollDir: null
     },
     impexp: "",
     lang: {
@@ -33,14 +38,6 @@ const app = new Vue({
       },
       monthBeforeYear: true,
     },
-    polyline: {
-      latlngs: [],
-      color: 'green'
-    },
-    leg_nav: {
-      scrollInterval: null,
-      scrollDir: null
-    }
   },
   methods: {
     start_journey: function () { window.location.href = "/" + this.journey.id },
@@ -101,7 +98,16 @@ const app = new Vue({
     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;
@@ -118,6 +124,12 @@ const app = new Vue({
           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
@@ -128,9 +140,13 @@ const app = new Vue({
         r.forEach(el => {
           el.path = getGeoLine(
             { lat: el.from_geo.lat, lng: el.from_geo.lon },
-            { lat: el.to_geo.lat, lng: el.to_geo.lon }, { dist: 5_000_000 }).map(v => [v.lat, v.lng])
+            { 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;
@@ -140,7 +156,11 @@ const app = new Vue({
     drawer_hover_item: function (item) {
       if (item) {
         this.map_override.active = true
-        this.map_override.center = [item.lat, item.lon]
+        if (item.type == 'flight') {
+          this.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]]
+        }
       } else {
         this.map_override.active = false
       }
@@ -150,7 +170,10 @@ const app = new Vue({
       const tpe = this.query.type;
       this.query.res = [];
       this.query.type = null;
+      this.query.sub = false;
       this.drawer_hover_item()
+      if (item) {
+        item.step = -1;
         switch (tpe) {
           case 'hotel': return this.journey.leg_get().hotel = item;
           case 'restaurant': return this.journey.leg_get().places.restaurants.push(item);
@@ -158,6 +181,7 @@ const app = new Vue({
           case 'other': return;
           case 'flight': return this.journey.leg_get().travel.push(item);
         }
+      }
     },
 
     search_active: function (q) {
@@ -172,9 +196,18 @@ const app = new Vue({
       }
     },
 
+    search_enable: function (f) {
+      this.query.type = f;
+      const query_in = document.getElementById('query_input')
+
+      query_in.focus()
+      this.search_active({ target: query_in })
+    },
+
 
     sideScroll: function (element, direction, speed, step) {
       this.leg_nav.scrollDir = direction
+      if (direction == 'none') return;
       this.leg_nav.scrollInterval = setInterval(() => {
         element.scrollLeft += (direction == 'left') ? -step : step;
       }, speed);
@@ -187,8 +220,8 @@ const app = new Vue({
     nav_mousemove(e) {
       const c = document.querySelector('.scroll-content')
       const newDir =
-        e.pageX < c.offsetWidth * 0.2 ? 'left' :
-          (e.pageX > c.offsetWidth * 0.8 ? 'right' : this.leg_nav.scrollDir)
+        e.pageX < c.offsetWidth * 0.1 ? 'left' :
+          (e.pageX > c.offsetWidth * 0.9 ? 'right' : 'none')
       if (!this.leg_nav.scrollInterval || this.leg_nav.scrollDir != newDir) {
         if (this.leg_nav.scrollInterval) clearInterval(this.leg_nav.scrollInterval)
         this.sideScroll(c, newDir, 25, 10);
@@ -196,6 +229,7 @@ const app = new Vue({
     },
     nav_mouseleave(e) {
       clearInterval(this.leg_nav.scrollInterval);
+      this.leg_nav.scrollDir = 'none'
       this.leg_nav.scrollInterval = null
     },
   },
@@ -222,13 +256,9 @@ const app = new Vue({
       }
     });
 
-    api.load(this.journey.id).then((r) => (app.journey.data = migrator(r)));
-
-    // this.search_travel("flight")("qf1").then(r => {
-    //   // this.polyline.latlngs = r.map(e => e.path)
-    //   this.journey.data.main[this.journey.sel_leg].travel = r;
-    // });
-
+    api.load(this.journey.id).then((r) => {
+      app.journey.data = migrator(r)
+    });
   },
   watch: {
     journey: {