osrm service checking

src/components/dialogs/MapListDialog.tsx

@@ -48,7 +48,8 @@ class Component extends React.Component<Props, State> {
   openRoute = (_id: string): void => {
     if (isMobile()) this.props.setDialogActive(false);
 
-    pushPath(`/${_id}/${this.props.editing ? 'edit' : ''}`);
+    // pushPath(`/${_id}/${this.props.editing ? 'edit' : ''}`);
+    pushPath(`/${_id}`);
   };
 
   onScroll = (e: { target: { scrollHeight: number, scrollTop: number, clientHeight: number }}): void => {

src/components/panels/EditorPanel.tsx

@@ -11,6 +11,7 @@ import { IRootState } from "$redux/user/reducer";
 import { Tooltip } from "$components/panels/Tooltip";
 
 interface Props extends IRootState {
+  routing: IRootState['features']['routing'],
   setMode: typeof setMode,
   startEditing: typeof startEditing,
   stopEditing: typeof stopEditing,
@@ -46,20 +47,25 @@ class Component extends React.PureComponent<Props, void> {
 
   render() {
     const {
-      mode, changed, editing,
+      mode, changed, editing, routing,
     } = this.props;
 
     return (
       <div>
         <div className={classnames('panel right', { active: editing })} ref={el => { this.panel = el; }}>
           <div className="control-bar control-bar-padded">
-            <button
+            {
-              className={classnames({ active: mode === MODES.ROUTER })}
+              routing &&
-              onClick={this.startRouterMode}
+              <button
-            >
+                className={classnames({ active: mode === MODES.ROUTER })}
-              <Tooltip>Автоматический маршрут</Tooltip>
+                onClick={this.startRouterMode}
-              <Icon icon="icon-route-2" />
+              >
-            </button>
+                <Tooltip>Автоматический маршрут</Tooltip>
+                <Icon icon="icon-route-2" />
+              </button>
+            }
+
+
             <button
               className={classnames({ active: mode === MODES.POLY })}
               onClick={this.startPolyMode}
@@ -67,6 +73,7 @@ class Component extends React.PureComponent<Props, void> {
               <Tooltip>Редактирование маршрута</Tooltip>
               <Icon icon="icon-poly-3" />
             </button>
+
             <button
               className={classnames({ active: (mode === MODES.STICKERS || mode === MODES.STICKERS_SELECT) })}
               onClick={this.startStickerMode}
@@ -133,26 +140,20 @@ class Component extends React.PureComponent<Props, void> {
 function mapStateToProps(state) {
   const {
     user: {
-      user,
       editing,
       mode,
-      routerPoints,
-      activeSticker,
-      title,
-      address,
       changed,
+      features: {
+        routing,
+      }
     },
   } = state;
 
   return {
-    user,
     editing,
     mode,
-    routerPoints,
-    activeSticker,
-    title,
-    address,
     changed,
+    routing,
   };
 }
 

src/index.tsx

@@ -3,10 +3,14 @@
   ## BUGS
 
   todo moving out the screen makes stickers editable again
-  todo make poly editable only on click/manual edit dialog open
 
   ## 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)
+
   done make arrows and distance points
   todo selecting logo on crop
 

src/redux/user/actions.ts

@@ -68,3 +68,5 @@ export const setIsEmpty = is_empty => ({ type: ACTIONS.SET_IS_EMPTY, is_empty })
 
 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 });

src/redux/user/constants.ts

@@ -75,4 +75,6 @@ export const ACTIONS: IActions = {
 
   MAPS_LOAD_MORE: 'MAPS_LOAD_MORE',
   MAPS_SET_SHIFT: 'MAPS_SET_SHIFT',
+
+  SET_FEATURE: 'SET_FEATURE',
 };

src/redux/user/reducer.ts

@@ -46,6 +46,10 @@ export interface IRootReducer {
   dialog: IDialogs[keyof IDialogs],
   dialog_active: boolean,
 
+  features: {
+    routing: boolean,
+  },
+
   renderer: {
     data: string,
     width: number,
@@ -285,6 +289,14 @@ const mapsSetShift: ActionHandler<typeof ActionCreators.mapsSetShift> = (state,
   }
 });
 
+const setFeature: ActionHandler<typeof ActionCreators.setFeature> = (state, { features }) => ({
+  ...state,
+  features: {
+    ...state.features,
+    ...features,
+  }
+});
+
 const HANDLERS = ({
   [ACTIONS.SET_USER]: setUser,
   [ACTIONS.SET_EDITING]: setEditing,
@@ -327,6 +339,7 @@ const HANDLERS = ({
   [ACTIONS.SET_IS_EMPTY]: setIsEmpty,
   [ACTIONS.MAPS_SET_SHIFT]: mapsSetShift,
 
+  [ACTIONS.SET_FEATURE]: setFeature,
 });
 
 export const INITIAL_STATE: IRootReducer = {
@@ -358,6 +371,10 @@ export const INITIAL_STATE: IRootReducer = {
   dialog: DIALOGS.NONE,
   dialog_active: false,
 
+  features: {
+    routing: false,
+  },
+
   renderer: {
     data: '',
     width: 0,

src/redux/user/sagas.ts

@@ -2,7 +2,7 @@ import { REHYDRATE } from 'redux-persist';
 import { delay, SagaIterator } from 'redux-saga';
 import { takeLatest, select, call, put, takeEvery, race, take } from 'redux-saga/effects';
 import {
-  checkIframeToken,
+  checkIframeToken, checkOSRMService,
   checkUserToken,
   getGuestToken, getRouteList,
   getStoredMap,
@@ -32,7 +32,7 @@ import {
   setProvider,
   changeProvider,
   setSaveLoading,
-  mapsSetShift, searchChangeDistance, clearAll,
+  mapsSetShift, searchChangeDistance, clearAll, setFeature,
 } from '$redux/user/actions';
 import { getUrlData, parseQuery, pushLoaderState, pushNetworkInitError, pushPath, replacePath } from '$utils/history';
 import { editor } from '$modules/Editor';
@@ -85,7 +85,7 @@ function* startEmptyEditorSaga() {
   yield put(setChanged(false));
   yield put(setEditing(true));
 
-  return hideLoader();
+  return yield call(setReadySaga);
 }
 
 function* startEditingSaga() {
@@ -136,6 +136,21 @@ function* replaceAddressIfItsBusy(destination, original) {
   pushPath(`/${destination}/edit`);
 }
 
+function* checkOSRMServiceSaga() {
+  const north_east = editor.map.map.getBounds().getNorthEast();
+  const south_west = editor.map.map.getBounds().getSouthWest();
+  const routing = yield call(checkOSRMService, [north_east, south_west]);
+
+  yield put(setFeature({ routing }));
+}
+
+function* setReadySaga() {
+  yield put(setReady(true));
+  hideLoader();
+
+  yield call(checkOSRMServiceSaga);
+}
+
 function* mapInitSaga() {
   pushLoaderState(90);
 
@@ -150,9 +165,7 @@ function* mapInitSaga() {
 
     if (newUrl) {
       yield pushPath(`/${newUrl}`);
-      yield put(setReady(true));
+      return yield call(setReadySaga);
-      hideLoader();
-      return;
     }
   }
 
@@ -162,7 +175,7 @@ function* mapInitSaga() {
     if (map) {
       if (mode && mode === 'edit') {
         if (map && map.owner && mode === 'edit' && map.owner.id !== id) {
-          hideLoader();
+          yield call(setReadySaga);
           yield call(replaceAddressIfItsBusy, map.random_url, map.address);
         } else {
           yield put(setAddressOrigin(''));
@@ -175,8 +188,7 @@ function* mapInitSaga() {
         editor.stopEditing();
       }
 
-      yield put(setReady(true));
+      yield call(setReadySaga);
-      hideLoader();
       return true;
     }
   }

src/utils/api.ts

@@ -4,6 +4,8 @@ import { IRootState } from "$redux/user/reducer";
 import { IUser } from "$constants/auth";
 import { ILatLng } from "$modules/Stickers";
 import { IStickerDump } from "$modules/Sticker";
+import { CLIENT } from '$config/frontend';
+import { LatLngLiteral } from "leaflet";
 
 const arrayToObject = (array: any[], key: string): {} => array.reduce((obj, el) => ({ ...obj, [el[key]]: el }), {});
 
@@ -95,3 +97,7 @@ export const getRouteList = ({
   }
 }).then(result => (result && result.data && result.data.success && result.data))
   .catch(() => ({ list: [], min: 0, max: 0, limit: 0, step: 20, shift: 20 }));
+
+export const checkOSRMService = (bounds: LatLngLiteral[]): Promise<boolean> => (
+  CLIENT && CLIENT.OSRM_URL && axios.get(CLIENT.OSRM_TEST_URL(bounds)).then(() => true).catch(() => false)
+);