router spinner

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) => (
   <div className="control-dialog" style={{ width }}>
+    <div className={classnames('save-loader', { active: is_routing })} />
+
     {!routerPoints && noPoints({ routerCancel })}
     {routerPoints === 1 && firstPoint({ routerCancel })}
     {routerPoints >= 2 && draggablePoints({ routerCancel, routerSubmit })}

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
 

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

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<IWaypoint> = [];
+  setIsRouting: Props['setIsRouting'];
   lockMapClicks: Props['lockMapClicks'];
   setRouterPoints: Props['setRouterPoints'];
   pushPolyPoints: Props['pushPolyPoints'];

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

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',
 };

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<typeof ActionCreators.setFeature> = (state, { fe
   }
 });
 
+const setIsRouting: ActionHandler<typeof ActionCreators.setIsRouting> = (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,

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;