@wemap/providers 3.1.2 → 3.1.4

package/debug/details/ItineraryComponent.jsx

@@ -0,0 +1,323 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import { Level } from '@wemap/geo';
+
+import ItineraryStore from '../stores/ItineraryStore';
+import MapHandler from '../map/MapHandler';
+
+const ItineraryServers = ItineraryStore.Servers;
+
+const Mode = {
+    Config: 'config',
+    WaitUserPositionForStart: 'wait-user-position-for-start',
+    SelectStartOnMap: 'select-start-on-map',
+    SelectEndOnMap: 'select-end-on-map',
+    ItineraryCompute: 'itinerary-compute',
+    Itinerary: 'itinerary'
+};
+
+const ItineraryEvents = ItineraryStore.Events;
+
+class ItineraryComponent extends React.PureComponent {
+
+    static propTypes = { mapHandler: PropTypes.instanceOf(MapHandler) };
+
+
+    constructor(props, context) {
+        super(props, context);
+
+        this.itineraryStore = ItineraryStore.instance;
+
+        this.state = {
+            endLevel: '',
+            error: null,
+            mode: this.itineraryStore.itinerary ? Mode.Itinerary : Mode.Config
+        };
+
+    }
+
+    componentDidMount() {
+        this.itineraryStore.on(ItineraryEvents.StartChanged, () => this.forceUpdate());
+        this.itineraryStore.on(ItineraryEvents.EndChanged, () => this.forceUpdate());
+        this.itineraryStore.on(ItineraryEvents.ItineraryChanged, it => this.onItineraryChanged(it));
+        this.itineraryStore.on(ItineraryEvents.ItineraryServerChanged, () => this.forceUpdate());
+        this.itineraryStore.on(ItineraryEvents.UseStairsChanged, () => this.forceUpdate());
+        this.itineraryStore.on(ItineraryEvents.ItineraryNotFound, () => this.setState({ error: ItineraryEvents.ItineraryNotFound }));
+        this.itineraryStore.on(ItineraryEvents.ServerError, () => this.setState({ error: ItineraryEvents.ServerError }));
+
+        if (this.props.mapHandler) {
+            this.initMapHandler();
+        }
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+        if (prevProps.mapHandler !== this.props.mapHandler && this.props.mapHandler !== null) {
+            this.initMapHandler();
+        }
+
+        if (prevState.mode !== this.state.mode) {
+            if (this.state.mode === Mode.SelectStartOnMap || this.state.mode === Mode.SelectEndOnMap) {
+                this.props.mapHandler.needClick();
+            }
+        }
+    }
+
+    initMapHandler() {
+        this.props.mapHandler.onMapClick(coords => this.onMapClick(coords));
+
+        const transformLevel = mapLevel => mapLevel === null ? '' : mapLevel.toString();
+        const map = this.props.mapHandler.mapboxInstance;
+        this.setState({ endLevel: transformLevel(map.getLevel()) });
+        map.on('level', () => this.setState({ endLevel: transformLevel(map.getLevel()) }));
+    }
+
+    onItineraryChanged(itinerary) {
+        if (itinerary) {
+            this.setState({ mode: Mode.Itinerary });
+        } else {
+            this.setState({ mode: Mode.Config });
+        }
+    }
+
+    onMapClick(position) {
+        if (this.state.mode === Mode.SelectStartOnMap) {
+            this.itineraryStore.start = position;
+            this.setState({ mode: Mode.Config });
+        } else if (this.state.mode === Mode.SelectEndOnMap) {
+            if (this.itineraryStore.itineraryServer === ItineraryServers.Indoor
+                && this.state.endLevel !== ''
+            ) {
+                position.level = Level.fromString(this.state.endLevel);
+            }
+            this.itineraryStore.end = position;
+            this.setState({ mode: Mode.Config });
+        }
+    }
+
+    onUseUserPositionClick() {
+        this.setState({ mode: Mode.WaitUserPositionForStart });
+        this.itineraryStore.retrieveStartFromUserLocation().then(() => {
+            this.setState({ mode: Mode.Config });
+        });
+    }
+
+    render() {
+
+        const configMode = this.state.mode !== Mode.Itinerary;
+
+        return (
+            <div>
+                <div className="title">Itinerary</div>
+                {configMode ? this.renderConfig() : this.renderItinerary()}
+            </div>
+        );
+    }
+
+    renderItinerary() {
+        return (
+            <button
+                value=''
+                onClick={() => this.itineraryStore.remove()}>
+                Remove itinerary
+            </button>
+        );
+    }
+
+    renderConfig() {
+
+        const handleComputeClick = () => {
+            this.itineraryStore.compute();
+            this.setState({ itineraryNotFound: false });
+        };
+
+        const lockedMode = this.state.mode === Mode.SelectEndOnMap
+            || this.state.mode === Mode.SelectStartOnMap
+            || this.state.mode === Mode.WaitUserPositionForStart
+            || this.state.mode === Mode.ItineraryCompute;
+
+        return (
+            <div>
+                {this.state.error
+                    ? <div style={{
+                        marginBottom: '5px',
+                        color: 'red'
+                    }}>
+                        {this.state.error === ItineraryEvents.ItineraryNotFound
+                            ? 'Itinerary not found'
+                            : 'Server error'
+                        }
+                    </div>
+                    : null}
+                <div>
+                    {this.renderServer()}
+                </div>
+
+                <div style={{ marginTop: '5px' }}>
+                    {this.renderStart(lockedMode)}
+                </div>
+
+                <div style={{ marginTop: '5px' }}>
+                    {this.renderEnd(lockedMode)}
+                </div>
+
+                <div style={{
+                    marginTop: '10px',
+                    width: '100%',
+                    textAlign: 'center'
+                }}>
+                    <button
+                        disabled={!this.itineraryStore.start || !this.itineraryStore.end || lockedMode}
+                        onClick={handleComputeClick}
+                    >
+                        Compute
+                    </button>
+                </div>
+
+            </div>
+        );
+    }
+
+    renderServer() {
+
+        const serversList = Object.values(ItineraryServers);
+        const serverValue = serversList.indexOf(this.itineraryStore.itineraryServer);
+
+        const handleServerSelectChange = (event) => {
+            const server = serversList[event.target.value];
+            this.itineraryStore.itineraryServer = server;
+        };
+
+        const isIndoor = this.itineraryStore.itineraryServer === ItineraryServers.Indoor;
+
+        return (
+            <>
+                Server:
+                <select
+                    style={{ marginLeft: '5px' }}
+                    value={serverValue}
+                    onChange={handleServerSelectChange}>
+                    {
+                        serversList.map((server, index) =>
+                            <option key={index}
+                                value={index}>
+                                {server.name}
+                            </option>
+                        )
+                    }
+                </select>
+
+                {isIndoor ? (
+                    <img id='wheelchair-icon'
+                        className={!this.itineraryStore.useStairs ? 'selected' : null}
+                        onClick={() => (this.itineraryStore.useStairs = !this.itineraryStore.useStairs)} />
+                ) : null}
+            </>
+        );
+    }
+
+    renderStart(lockedMode) {
+
+        let buttons;
+
+        if (this.itineraryStore.start) {
+            buttons = (
+                <button
+                    disabled={lockedMode}
+                    style={{ backgroundColor: '#e57373' }}
+                    onClick={() => (this.itineraryStore.start = null)}
+                >
+                    Remove
+                </button>
+            );
+        } else {
+            buttons = (
+                <>
+                    <button
+                        disabled={lockedMode}
+                        onClick={() => this.onUseUserPositionClick()}
+                    >
+                        {
+                            this.state.mode === Mode.WaitUserPositionForStart ? (
+                                <div className="loader"
+                                    style={{ marginRight: '5px' }}></div>
+                            ) : null
+                        }
+                        User position
+                    </button>
+
+                    <button
+                        disabled={lockedMode}
+                        style={{ marginLeft: '5px' }}
+                        onClick={() => this.setState({ mode: Mode.SelectStartOnMap })}
+                    >
+                        Select on map
+                    </button>
+                </>
+            );
+        }
+
+        return (
+            <>
+                Start:
+                <span style={{ marginLeft: '5px' }}>{buttons}</span>
+            </>
+        );
+    }
+
+    renderEnd(lockedMode) {
+
+        let buttons;
+
+        if (this.itineraryStore.end) {
+            buttons = (
+                <button
+                    disabled={lockedMode}
+                    style={{ backgroundColor: '#e57373' }}
+                    onClick={() => (this.itineraryStore.end = null)}
+                >
+                    Remove
+                </button>
+            );
+        } else {
+            buttons = (
+                <button
+                    disabled={lockedMode}
+                    onClick={() => this.setState({ mode: Mode.SelectEndOnMap })}
+                >
+                    Select on map
+                </button>
+            );
+        }
+
+        const isIndoor = this.itineraryStore.itineraryServer === ItineraryServers.Indoor;
+        const showEndLevel = isIndoor && !this.itineraryStore.end;
+
+        return (
+            <>
+                <div>
+                    End:
+                    <span style={{ marginLeft: '5px' }}>{buttons}</span>
+                    {
+                        showEndLevel ? (
+                            <span style={{ marginLeft: '5px' }}>
+                                level:
+                                <input
+                                    disabled={lockedMode && !this.state.mode === Mode.SelectEndOnMap}
+                                    value={this.state.endLevel}
+                                    onChange={event => this.setState({ endLevel: event.target.value })}
+                                    style={{
+                                        marginLeft: '5px',
+                                        width: '30px'
+                                    }}
+                                    type='number' />
+                            </span>
+                        ) : null
+                    }
+                </div>
+            </>
+        );
+    }
+}
+
+export default ItineraryComponent;

package/debug/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import AbsoluteAttitudeComponent from './components/AbsoluteAttitudeComponent';
+import AbsolutePositionComponent from './components/AbsolutePositionComponent';
+import GnssWifiComponent from './components/GnssWifiComponent';
+import ImuComponent from './components/ImuComponent';
+import InclinationComponent from './components/InclinationComponent';
+import MainComponent from './MainComponent';
+import RelativeAttitudeComponent from './components/RelativeAttitudeComponent';
+import StepDetectionComponent from './components/StepDetectionComponent';
+
+const createReactElement = (component, container) => ReactDOM.render(
+    React.createElement(component, {}, null),
+    container
+);
+
+export {
+    AbsoluteAttitudeComponent,
+    AbsolutePositionComponent,
+    ImuComponent,
+    InclinationComponent,
+    GnssWifiComponent,
+    MainComponent,
+    RelativeAttitudeComponent,
+    StepDetectionComponent,
+    createReactElement
+};

package/debug/map/MapComponent.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import mapboxgl from 'mapbox-gl';
+import 'mapbox-gl-css';
+import PropTypes from 'prop-types';
+import noop from 'lodash.noop';
+
+import MapHandler from './MapHandler';
+
+mapboxgl.accessToken
+    = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
+
+const BELOW_LAYER_ID = 'housenum-label';
+
+class MapComponent extends React.Component {
+    static propTypes = {
+        locationEnabled: PropTypes.bool.isRequired,
+        maxZoom: PropTypes.number,
+        onMapLoaded: PropTypes.func,
+        indoorMaps: PropTypes.array
+    };
+
+    static defaultProps = {
+        maxZoom: 22,
+        onMapLoaded: noop
+    };
+
+    componentDidMount() {
+        this.map = new mapboxgl.Map({
+            container: this.mapContainer,
+            style: 'mapbox://styles/mapbox/streets-v10',
+            maxZoom: this.props.maxZoom
+        });
+
+        this.mapHandler = new MapHandler(this.map, this.mapContainer);
+        this.mapHandler.componentDidMount();
+
+
+        const mapLoadedFn = () => this.props.onMapLoaded(this.mapHandler);
+
+        this.map.on('load', () => {
+            if (this.props.indoorMaps && this.props.indoorMaps.length > 0) {
+                this.loadIndoorMaps(this.props.indoorMaps)
+                    .then(mapLoadedFn);
+            } else {
+                mapLoadedFn();
+            }
+        });
+
+        this.map.addControl(new mapboxgl.IndoorControl());
+
+    }
+
+    componentWillUnmount() {
+        this.mapHandler.componentWillUnmount();
+        this.map.remove();
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.locationEnabled !== this.props.locationEnabled) {
+            this.mapHandler.locationEnabled = this.props.locationEnabled;
+        }
+    }
+
+    loadIndoorMaps(mapsPaths) {
+        return Promise.all(
+            mapsPaths.map(mapPath =>
+                fetch(mapPath)
+                    .then(res => res.json())
+                    .then(geojson => this.map.indoor.addMap(geojson, null, BELOW_LAYER_ID)))
+        );
+    }
+
+    render() {
+        return (
+            <div ref={map => (this.mapContainer = map)}
+                style={{
+                    width: '100%',
+                    height: '100%'
+                }} />
+        );
+    }
+}
+
+export default MapComponent;

package/debug/map/MapHandler.js

@@ -0,0 +1,53 @@
+import mapboxgl from 'mapbox-gl';
+
+import { Coordinates } from '@wemap/geo';
+
+import ItineraryMapHandler from './helpers/ItineraryMapHandler';
+import UserOnMapHandler from './helpers/UserOnMapHandler';
+import MapClickHandler from './helpers/MapClickHandler';
+
+class MapHandler {
+
+    itineraryMapHandler;
+    userOnMapHandler;
+
+    /**
+     *
+     * @param {mapboxgl.Map} map
+     * @param {HTMLDivElement} mapContainer
+     */
+    constructor(map, mapContainer) {
+        this.itineraryMapHandler = new ItineraryMapHandler(map);
+        this.userOnMapHandler = new UserOnMapHandler(map, mapContainer);
+        this.mapClickHandler = new MapClickHandler(map, this.userOnMapHandler);
+        this.map = map;
+    }
+
+    componentDidMount() {
+        this.userOnMapHandler.componentDidMount();
+    }
+
+    componentWillUnmount() {
+        this.userOnMapHandler.componentWillUnmount();
+    }
+
+    /**
+     * @param {Function} fn
+     */
+    onMapClick(fn) {
+        this.map.on('click', e => {
+            fn(new Coordinates(e.lngLat.lat, e.lngLat.lng));
+            this.map.getCanvas().style.cursor = '';
+        });
+    }
+
+    needClick() {
+        this.map.getCanvas().style.cursor = 'pointer';
+    }
+
+    get mapboxInstance() {
+        return this.map;
+    }
+}
+
+export default MapHandler;

package/debug/map/MapboxHelper.js

@@ -0,0 +1,50 @@
+import mapboxgl from 'mapbox-gl';
+
+class MapboxHelper {
+
+    static coordsToLngLat = coords => [coords.lng, coords.lat];
+
+    // https://stackoverflow.com/a/39006388/2239938
+    static createGeoJSONCircle(center, radiusInKm, points) {
+        if (!points) {
+            points = 64;
+        }
+
+        var coords = {
+            latitude: center[1],
+            longitude: center[0]
+        };
+
+        var km = radiusInKm;
+
+        var ret = [];
+        var distanceX = km / (111.320 * Math.cos(coords.latitude * Math.PI / 180));
+        var distanceY = km / 110.574;
+
+        var theta, x, y;
+        for (let i = 0; i < points; i++) {
+            theta = (i / points) * (2 * Math.PI);
+            x = distanceX * Math.cos(theta);
+            y = distanceY * Math.sin(theta);
+
+            ret.push([coords.longitude + x, coords.latitude + y]);
+        }
+        ret.push(ret[0]);
+        return ret;
+    }
+
+    static createMarker(options) {
+        const elem = document.createElement('div');
+        elem.style.marginLeft = '-' + options.iconAnchor[0] + 'px';
+        elem.style.marginTop = '-' + options.iconAnchor[1] + 'px';
+        elem.style.width = 0;
+        elem.style.height = 0;
+        elem.appendChild(options.dom);
+
+        const marker = new mapboxgl.Marker(elem);
+        marker.setLngLat([options.longitude, options.latitude]);
+        return marker;
+    }
+}
+
+export default MapboxHelper;