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%; + } +}