diff --git a/src/components/dialogs/RouterDialog.tsx b/src/components/dialogs/RouterDialog.tsx index 731cd8e..b24b695 100644 --- a/src/components/dialogs/RouterDialog.tsx +++ b/src/components/dialogs/RouterDialog.tsx @@ -4,10 +4,12 @@ import { routerCancel as routerCancelAction, routerSubmit as routerSubmitAction, } from "$redux/user/actions"; +import classnames from "classnames"; type Props = { routerPoints: number, width: number, + is_routing: boolean, routerCancel: typeof routerCancelAction, routerSubmit: typeof routerSubmitAction, @@ -81,9 +83,11 @@ const draggablePoints = ({ ); export const RouterDialog = ({ - routerPoints, routerCancel, routerSubmit, width + routerPoints, routerCancel, routerSubmit, width, is_routing, }: Props) => (
+
+ {!routerPoints && noPoints({ routerCancel })} {routerPoints === 1 && firstPoint({ routerCancel })} {routerPoints >= 2 && draggablePoints({ routerCancel, routerSubmit })} diff --git a/src/index.tsx b/src/index.tsx index 8d82d76..412c32f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -6,12 +6,13 @@ ## FEATURES - done check if osrm available - done selecting map on dialog in edit mode opens it at view mode - todo routing spinner - todo polyline editing only in manual mode (or by click) + todo arrows on screenshot - done make arrows and distance points + todo refactor reducer to use is_editing and etc (mb move them to status object) + todo tower sticker + todo route description + + todo polyline editing only in manual mode (or by click) todo selecting logo on crop done public maps @@ -24,11 +25,18 @@ todo check canvas support at startup todo check osrm is up - todo maybe: map preview on save (nope) + todo maybe: map preview on save (dont think so) + + ## DONE + + done routing spinner done maybe: stickers clusterization? done moving out the screen makes stickers editable again - ## DONE + done check if osrm available + done selecting map on dialog in edit mode opens it at view mode + done make arrows and distance points + done fix arrows (can't reproduce now :-( ) done adding route, applying it and adding again and deleting it makes ghost points on the map diff --git a/src/modules/Editor.ts b/src/modules/Editor.ts index f5fc3ed..02a1165 100644 --- a/src/modules/Editor.ts +++ b/src/modules/Editor.ts @@ -14,7 +14,7 @@ import { setAddress, setChanged, setDistance, - setIsEmpty, + setIsEmpty, setIsRouting, setLogo, setMarkersShown, setMode, @@ -81,9 +81,19 @@ export class Editor { map, routerMoveStart, lockMapClicks, setDistance: this.setDistance, triggerOnChange, editor: this, }); - this.stickers = new Stickers({ map, lockMapClicks, triggerOnChange, editor: this }); + this.stickers = new Stickers({ + map, + lockMapClicks, + triggerOnChange, + editor: this + }); + this.router = new Router({ - map, lockMapClicks, setRouterPoints: this.setRouterPoints, pushPolyPoints + map, + lockMapClicks, + pushPolyPoints, + setRouterPoints: this.setRouterPoints, + setIsRouting: this.setIsRouting, }); this.switches = { @@ -176,6 +186,7 @@ export class Editor { setAddress: typeof setAddress = value => store.dispatch(setAddress(value)); setPublic: typeof setPublic = value => store.dispatch(setPublic(value)); setIsEmpty: typeof setIsEmpty = value => store.dispatch(setIsEmpty(value)); + setIsRouting: typeof setIsRouting = value => store.dispatch(setIsRouting(value)); setMarkersShown = (value: boolean): void => { if (this.getState().markers_shown !== value) store.dispatch(setMarkersShown(value)); diff --git a/src/modules/Router.ts b/src/modules/Router.ts index 50f070e..9262d9b 100644 --- a/src/modules/Router.ts +++ b/src/modules/Router.ts @@ -13,6 +13,7 @@ interface IWaypoint { } interface Props { + setIsRouting: typeof editor.setIsRouting, map: Map, setRouterPoints: typeof editor.setRouterPoints, pushPolyPoints: typeof editor.pushPolyPoints, @@ -21,12 +22,13 @@ interface Props { export class Router { constructor({ - map, lockMapClicks, setRouterPoints, pushPolyPoints + map, lockMapClicks, setRouterPoints, pushPolyPoints, setIsRouting, }: Props) { this.waypoints = []; this.lockMapClicks = lockMapClicks; this.setRouterPoints = setRouterPoints; this.pushPolyPoints = pushPolyPoints; + this.setIsRouting = setIsRouting; const routeLine = r => Routing.line(r, { styles: [ @@ -58,11 +60,22 @@ export class Router { geometryOnly: false, }, useHints: false, - }).on('waypointschanged', this.updateWaypointsCount); + }) + .on('routingstart', this.showSpinner) + .on('routesfound routingerror', this.hideSpinner) + .on('waypointschanged', this.updateWaypointsCount); this.router.addTo(map); } + showSpinner = () => { + this.setIsRouting(true); + }; + + hideSpinner = () => { + this.setIsRouting(false); + }; + pushWaypointOnClick = ({ latlng: { lat, lng } }: { latlng: ILatLng }): void => { const waypoints = this.router.getWaypoints().filter(({ latLng }) => !!latLng); this.router.setWaypoints([...waypoints, { lat, lng }]); @@ -153,6 +166,7 @@ export class Router { }; waypoints: Array = []; + setIsRouting: Props['setIsRouting']; lockMapClicks: Props['lockMapClicks']; setRouterPoints: Props['setRouterPoints']; pushPolyPoints: Props['pushPolyPoints']; diff --git a/src/redux/user/actions.ts b/src/redux/user/actions.ts index 443b9eb..f434755 100644 --- a/src/redux/user/actions.ts +++ b/src/redux/user/actions.ts @@ -70,3 +70,4 @@ export const mapsLoadMore = () => ({ type: ACTIONS.MAPS_LOAD_MORE }); export const mapsSetShift = (shift: number) => ({ type: ACTIONS.MAPS_SET_SHIFT, shift }); export const setFeature = (features: { [x: string]: boolean }) => ({ type: ACTIONS.SET_FEATURE, features }); +export const setIsRouting = (is_routing: boolean) => ({ type: ACTIONS.SET_IS_ROUTING, is_routing }); diff --git a/src/redux/user/constants.ts b/src/redux/user/constants.ts index c31924f..61ceed7 100644 --- a/src/redux/user/constants.ts +++ b/src/redux/user/constants.ts @@ -77,4 +77,5 @@ export const ACTIONS: IActions = { MAPS_SET_SHIFT: 'MAPS_SET_SHIFT', SET_FEATURE: 'SET_FEATURE', + SET_IS_ROUTING: 'SET_IS_ROUTING', }; diff --git a/src/redux/user/reducer.ts b/src/redux/user/reducer.ts index 4eaf31c..1c0deaf 100644 --- a/src/redux/user/reducer.ts +++ b/src/redux/user/reducer.ts @@ -33,9 +33,11 @@ export interface IRootReducer { address_origin: string, changed: boolean, provider: keyof typeof PROVIDERS, - is_public: boolean, markers_shown: boolean, + + is_public: boolean, is_empty: boolean, + is_routing: boolean, save_error: string, save_finished: boolean, @@ -297,6 +299,11 @@ const setFeature: ActionHandler = (state, { fe } }); +const setIsRouting: ActionHandler = (state, { is_routing }) => ({ + ...state, + is_routing, +}); + const HANDLERS = ({ [ACTIONS.SET_USER]: setUser, [ACTIONS.SET_EDITING]: setEditing, @@ -340,12 +347,13 @@ const HANDLERS = ({ [ACTIONS.MAPS_SET_SHIFT]: mapsSetShift, [ACTIONS.SET_FEATURE]: setFeature, + [ACTIONS.SET_IS_ROUTING]: setIsRouting, }); export const INITIAL_STATE: IRootReducer = { ready: false, user: { ...DEFAULT_USER }, - editing: false, + mode: MODES.NONE, logo: DEFAULT_LOGO, routerPoints: 0, @@ -356,11 +364,14 @@ export const INITIAL_STATE: IRootReducer = { title: '', address: '', address_origin: '', - changed: false, provider: DEFAULT_PROVIDER, - is_public: false, + markers_shown: true, + changed: false, + editing: false, + is_public: false, is_empty: true, + is_routing: false, save_error: '', save_finished: false, diff --git a/src/styles/save.less b/src/styles/save.less index ba9b520..ef1cb06 100644 --- a/src/styles/save.less +++ b/src/styles/save.less @@ -33,6 +33,9 @@ opacity: 0; touch-action: none; pointer-events: none; + text-transform: uppercase; + font-size: 1.2em; + color: fade(white, 70%); svg { fill: white;