riding speed slider

src/components/panels/DistanceBar.jsx

@@ -3,31 +3,88 @@ import React from 'react';
 import { toHours } from '$utils/format';
 import { Icon } from '$components/panels/Icon';
 import { connect } from 'react-redux';
+import Slider from 'rc-slider';
+import { bindActionCreators } from 'redux';
+import { setSpeed } from '$redux/user/actions';
 
 type Props = {
   distance: number,
   estimated: number,
+  speed: number,
+  setSpeed: Function,
 };
 
-const Component = ({ distance, estimated }: Props) => (
-  <div className="status-bar padded desktop-only">
+type State = {
+  dialogOpened: boolean,
+}
+class Component extends React.PureComponent<Props, State> {
+  constructor(props) {
+    super(props);
+    this.step = 5;
+    this.min = 5;
+    this.max = 30;
+
+    this.marks = [...Array((Math.floor(this.max - this.min) / this.step) + 1)].reduce((obj, el, index) => ({
+      ...obj,
+      [this.min + (index * this.step)]: String(this.min + (index * this.step)),
+    }), { });
+
+    this.state = {
+      dialogOpened: false,
+    };
+  }
+
+  toggleDialog = () => this.setState({ dialogOpened: !this.state.dialogOpened });
+
+  render() {
+    const {
+      props: { distance, estimated, speed },
+      state: { dialogOpened },
+      min, max, step, marks,
+    } = this;
+
+
+    return (
+      <React.Fragment>
+        <div className="status-bar padded desktop-only pointer" onClick={this.toggleDialog}>
           {distance} км&nbsp;
           <Icon icon="icon-cycle" size={32} />
           {
             <span>{toHours(estimated)}</span>
           }
         </div>
+        {
+          dialogOpened &&
+          <div className="control-dialog top left" style={{ left: 0, top: 42 }}>
+            <div className="helper speed-helper">
+              <Slider
+                min={min}
+                max={max}
+                step={step}
+                onChange={this.props.setSpeed}
+                defaultValue={15}
+                value={speed}
+                marks={marks}
+              />
+            </div>
+          </div>
+        }
+      </React.Fragment>
     );
+  }
+}
 
 function mapStateToProps(state) {
   const {
-    user: { distance, estimated },
+    user: { distance, estimated, speed },
   } = state;
 
-  return { distance, estimated };
+  return { distance, estimated, speed };
 }
 
-const mapDispatchToProps = () => ({ });
+const mapDispatchToProps = dispatch => bindActionCreators({
+  setSpeed,
+}, dispatch);
 
 export const DistanceBar = connect(
   mapStateToProps,

src/index.js

@@ -3,7 +3,6 @@
   todo save spinner
   todo cancelling editing someone's else map return back to it's original address /razminochnyj/
 
-  todo riding speed slider
   todo public maps
     todo editing map on map list
     todo setting map public on map list
@@ -29,6 +28,7 @@
 
   OBLIVION STARTS HERE:
 
+  done riding speed slider
   done dont close map list on click
   done fix loaded stickers has wrong text placement for right-sided captions
   done fix save button should not react to clicks

src/redux/store.js

@@ -11,7 +11,7 @@ import { locationChanged } from '$redux/user/actions';
 
 const userPersistConfig = {
   key: 'user',
-  whitelist: ['user', 'logo', 'provider'],
+  whitelist: ['user', 'logo', 'provider', 'speed'],
   storage,
 };
 

src/redux/user/actions.js

@@ -14,6 +14,7 @@ export const setLogo = logo => ({ type: ACTIONS.SET_LOGO, logo });
 export const setTitle = title => ({ type: ACTIONS.SET_TITLE, title });
 export const setAddress = address => ({ type: ACTIONS.SET_ADDRESS, address });
 export const setPublic = is_public => ({ type: ACTIONS.SET_PUBLIC, is_public });
+export const setSpeed = speed => ({ type: ACTIONS.SET_SPEED, speed });
 
 export const startEditing = () => ({ type: ACTIONS.START_EDITING });
 export const stopEditing = () => ({ type: ACTIONS.STOP_EDITING });

src/redux/user/constants.js

@@ -60,4 +60,5 @@ export const ACTIONS = ({
   SEARCH_SET_LOADING: 'SEARCH_SET_LOADING',
 
   OPEN_MAP_DIALOG: 'OPEN_MAP_DIALOG',
+  SET_SPEED: 'SET_SPEED',
 }: { [key: String]: String });

src/redux/user/reducer.js

@@ -8,8 +8,8 @@ import { TIPS } from '$constants/tips';
 import { DEFAULT_PROVIDER } from '$constants/providers';
 import { DIALOGS, TABS } from '$constants/dialogs';
 
-const getEstimated = distance => {
-  const time = (distance && (distance / 15)) || 0;
+const getEstimated = (distance, speed = 15) => {
+  const time = (distance && (distance / speed)) || 0;
   return (time && parseFloat(time.toFixed(1)));
 };
 
@@ -27,7 +27,7 @@ const setMode = (state, { mode }) => ({ ...state, mode });
 const setDistance = (state, { distance }) => ({
   ...state,
   distance,
-  estimated: getEstimated(distance),
+  estimated: getEstimated(distance, state.speed),
 });
 
 const setRouterPoints = (state, { routerPoints }) => ({ ...state, routerPoints });
@@ -152,9 +152,11 @@ const searchSetLoading = (state, { loading = false }) => ({
   }
 });
 
-const setPublic = (state, { is_public = false }) => ({
+const setPublic = (state, { is_public = false }) => ({ ...state, is_public });
+const setSpeed = (state, { speed = 15 }) => ({
   ...state,
-  is_public,
+  speed,
+  estimated: getEstimated(state.distance, speed),
 });
 
 const HANDLERS = ({
@@ -191,6 +193,7 @@ const HANDLERS = ({
   [ACTIONS.SEARCH_PUT_ROUTES]: searchPutRoutes,
   [ACTIONS.SEARCH_SET_LOADING]: searchSetLoading,
   [ACTIONS.SET_PUBLIC]: setPublic,
+  [ACTIONS.SET_SPEED]: setSpeed,
 }: { [key: String]: Function });
 
 export const INITIAL_STATE = {
@@ -202,6 +205,7 @@ export const INITIAL_STATE = {
   routerPoints: 0,
   distance: 0,
   estimated: 0,
+  speed: 15,
   activeSticker: { set: null, sticker: null },
   title: '',
   address: '',

src/styles/panel.less

@@ -494,3 +494,12 @@
 .dialog-prefetch-progress {
   padding: 10px 0 5px;
 }
+
+.speed-helper {
+  width: 300px;
+  padding: 0 20px;
+
+  .rc-slider {
+    width: 100%;
+  }
+}