dist and time

finishing route

src/components/panels/EditorDialog.jsx

@@ -3,12 +3,13 @@ import { MODES } from '$constants/modes';
 
 import { RouterHelper } from '$components/router/RouterHelper';
 
-export const EditorDialog = ({ mode, routerPoints }) => {
+export const EditorDialog = ({ mode, routerPoints, editor }) => {
   const showDialog = (mode === MODES.ROUTER);
+
   return (
     showDialog &&
       <div id="control-dialog">
-        { mode === MODES.ROUTER && <RouterHelper routerPoints={routerPoints} /> }
+        { mode === MODES.ROUTER && <RouterHelper routerPoints={routerPoints} editor={editor} /> }
       </div>
   );
 };

src/components/panels/EditorPanel.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { MODES } from '$constants/modes';
 import classnames from 'classnames';
 
+import { toHours } from '$utils/time';
+
 import { Icon } from '$components/panels/Icon';
 import { EditorDialog } from '$components/panels/EditorDialog';
 
@@ -15,7 +17,9 @@ export class EditorPanel extends React.PureComponent {
   startShotterMode = () => this.props.editor.changeMode(MODES.SHOTTER);
 
   render() {
-    const { mode, routerPoints } = this.props;
+    const {
+      mode, routerPoints, editor, totalDistance, estimateTime
+    } = this.props;
 
     return (
       <div>
@@ -23,6 +27,7 @@ export class EditorPanel extends React.PureComponent {
         <EditorDialog
           mode={mode}
           routerPoints={routerPoints}
+          editor={editor}
         />
 
         <div className="panel">
@@ -36,6 +41,12 @@ export class EditorPanel extends React.PureComponent {
         </div>
 
         <div className="panel right">
+          <div className="control-dist">
+            {totalDistance} км
+            {
+              (estimateTime > 0) && (estimateTime > 0) && <span>{toHours(estimateTime)}</span>
+            }
+          </div>
           <div className="control-bar">
             <button
               className={classnames({ active: mode === MODES.ROUTER })}
@@ -69,11 +80,18 @@ export class EditorPanel extends React.PureComponent {
             </button>
 
             <button
-              className={classnames('highlighted', { active: mode === MODES.SHOTTER })}
+              className={classnames({ active: mode === MODES.TRASH })}
+              onClick={this.startShotterMode}
+            >
+              <Icon icon="icon-trash" />
+            </button>
+
+            <button
+              className="highlighted"
               onClick={this.startShotterMode}
             >
               <span>СХОРОНИТЬ</span>
-              <Icon icon="icon-shooter" />
+              <Icon icon="icon-save" />
             </button>
           </div>
 
@@ -81,4 +99,4 @@ export class EditorPanel extends React.PureComponent {
       </div>
     );
   }
-};
+}

src/components/router/RouterHelper.jsx

@@ -1,54 +1,68 @@
 import React from 'react';
 
-const noPoints = () => (
+const noPoints = ({ cancelDrawing }) => (
   <div className="router-helper">
     <div className="router-helper__text">
       <div className="big white">Укажите на карте первую точку маршрута</div>
       <div className="small gray">Путь прокладывается по улицам, тротуарам и тропинкам</div>
     </div>
     <div className="router-helper__buttons">
-      <div className="button router-helper__button">
+      <div className="button router-helper__button" onClick={cancelDrawing}>
         Отмена
       </div>
     </div>
   </div>
 );
 
-const firstPoint = () => (
+const firstPoint = ({ cancelDrawing }) => (
   <div className="router-helper">
     <div className="router-helper__text">
       <div className="big white">Укажите на карте конечную точку маршрута</div>
       <div className="small gray"> Вы сможете добавить уточняющие точки</div>
     </div>
     <div className="router-helper__buttons">
-      <div className="button router-helper__button">
+      <div className="button router-helper__button" onClick={cancelDrawing}>
         Отмена
       </div>
     </div>
   </div>
 );
 
-const draggablePoints = () => (
+const draggablePoints = ({ cancelDrawing, submitDrawing }) => (
   <div className="router-helper">
     <div className="router-helper__text">
       <div className="big white">Продолжите маршрут, щелкая по карте</div>
       <div className="small gray">Потяните линию, чтобы указать промежуточные точки</div>
     </div>
     <div className="router-helper__buttons button-group">
-      <div className="button button_red router-helper__button">
+      <div className="button button_red router-helper__button" onClick={cancelDrawing}>
         Отмена
       </div>
-      <div className="button primary router-helper__button">
+      <div className="button primary router-helper__button" onClick={submitDrawing}>
         Применить
       </div>
     </div>
   </div>
 );
 
-export const RouterHelper = ({ routerPoints }) => (
-  <div>
-    { !routerPoints && noPoints() }
-    { routerPoints === 1 && firstPoint() }
-    { routerPoints >= 2 && draggablePoints() }
-  </div>
-);
+export class RouterHelper extends React.Component {
+  cancelDrawing = () => {
+    this.props.editor.router.cancelDrawing();
+  };
+
+  submitDrawing = () => {
+    this.props.editor.router.submitDrawing();
+  };
+
+  render() {
+    const { routerPoints, editor } = this.props;
+    const { cancelDrawing, submitDrawing } = this;
+    return (
+      <div>
+        {!routerPoints && noPoints({ cancelDrawing })}
+        {routerPoints === 1 && firstPoint({ cancelDrawing })}
+        {routerPoints >= 2 && draggablePoints({ cancelDrawing, submitDrawing })}
+      </div>
+    );
+  }
+}