OTM/src/client/vue.ts

import * as api from "./api";
import journey_wrapper from "./types/wrapper";
import { migrator } from "./types/migration";
import { getGeoLine } from "./types/geom";

import Vue from "vue";
import { LMap, LTileLayer, LMarker, LIcon, LPopup, LTooltip, LPolyline, LControlScale } from "vue2-leaflet";
import Multiselect from 'vue-multiselect'
import TextareaAutosize from 'vue-textarea-autosize'

Vue.component("l-map", LMap);
Vue.component("l-tile-layer", LTileLayer);
Vue.component("l-marker", LMarker);
Vue.component("l-icon", LIcon);
Vue.component("l-popup", LPopup);
Vue.component("l-tooltip", LTooltip);
Vue.component("l-polyline", LPolyline);
Vue.component("l-control-scale", LControlScale);
Vue.component("multiselect", Multiselect);
Vue.use(TextareaAutosize);

const app = new Vue({
    el: "#app",
    data: {
        journey_edit:
            ["view", "short"].indexOf(window.location.pathname.split("/")[1]) == -1,
        journey: new journey_wrapper(window.location.pathname.split("/").pop() || String.gen_id(16)),

        query: {
            type: "",
            act: false,
            res: [],
        },
        impexp: "",
        lang: {
            format: "ddd D MMM",
            formatLocale: {
                firstDayOfWeek: 1,
            },
            monthBeforeYear: true,
        },
        polyline: {
            latlngs: [],
            color: 'green'
        }
    },
    methods: {
        start_journey: function () { window.location.href = "/" + this.journey.id },

        compute_bb: function () {
            const bounds = this.$refs.map[0].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`;

        },
        generate_marker: function (item, fcolor) {
            return `
			<div style="position: absolute;top: -30px;left: -6px;">
  			<i class=" fa fa-${api.icon_type(item) || "star"}  fa-lg icon-white" style="position: absolute;text-align:center; width:24px;height:24px; line-height:1.5em"></i>
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 36" width="24" height="36">
              <circle cx="12" cy="12" r="12" fill="${fcolor || item.color || "blue"}"/>
              <polygon points="4,12 20,12 12,36" fill="${fcolor || item.color || "blue"}" /></svg>`
        },
        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>`;
        },


        import_data: function () {
            this.journey.data = Object.assign(
                {},
                JSON.parse(this.impexp.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]);
                }
            });
        },
        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);
        },

        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;
                    return r
                });
            }
        },
        search_travel: function (f) {
            return (q) => {
                this.query.act = true;
                this.query.type = f;
                return api.query_flight(q).then((r) => {
                    r.forEach(el => el.path = 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]));
                    this.query.res = r;
                    this.query.act = false;
                    return r;
                });
            }
        },

        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.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)

        window.addEventListener("keydown", (e) => {
            switch (e.key) {
                case "ArrowLeft":
                    this.journey.day_prev();
                    break;
                case "ArrowRight":
                    this.journey.day_next();
                    break;
                default:
                    console.log(e.key);
            }
        });

        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)
        });

    },
    watch: {
        journey: {
            handler: function (ndata, odata) {
                this.save_data();
            },
            deep: true,
        },
    },
});