diff --git a/src/components/panels/DistanceBar.jsx b/src/components/panels/DistanceBar.jsx
index a75a46a..35f6c62 100644
--- a/src/components/panels/DistanceBar.jsx
+++ b/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) => (
-
- {distance} км
-
- {
- {toHours(estimated)}
- }
-
-);
+type State = {
+ dialogOpened: boolean,
+}
+class Component extends React.PureComponent {
+ 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 (
+
+
+ {distance} км
+
+ {
+ {toHours(estimated)}
+ }
+
+ {
+ dialogOpened &&
+
+ }
+
+ );
+ }
+}
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,
diff --git a/src/index.js b/src/index.js
index a88cf1d..3d2508c 100644
--- a/src/index.js
+++ b/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
diff --git a/src/redux/store.js b/src/redux/store.js
index dfd0421..b8b30b6 100644
--- a/src/redux/store.js
+++ b/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,
};
diff --git a/src/redux/user/actions.js b/src/redux/user/actions.js
index 53cc083..c488a10 100644
--- a/src/redux/user/actions.js
+++ b/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 });
diff --git a/src/redux/user/constants.js b/src/redux/user/constants.js
index 8d7dbe0..6ee7a7a 100644
--- a/src/redux/user/constants.js
+++ b/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 });
diff --git a/src/redux/user/reducer.js b/src/redux/user/reducer.js
index 32dd92f..5faba28 100644
--- a/src/redux/user/reducer.js
+++ b/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: '',
diff --git a/src/styles/panel.less b/src/styles/panel.less
index 8c174bd..9471caa 100644
--- a/src/styles/panel.less
+++ b/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%;
+ }
+}