routes: filtering by distance

src/components/dialogs/MapListMoreDialog.jsx

@@ -9,6 +9,9 @@ import {
   searchSetTitle,
 } from '$redux/user/actions';
 
+
+import { Range } from 'rc-slider';
+
 type Props = {
   routes: {
     limit: Number,
@@ -55,43 +58,40 @@ class Component extends React.Component<Props> {
       routes: {
         list,
         filter: {
+          min,
+          max,
           title,
           distance,
           tab,
         }
       },
       editing,
+      marks,
     } = this.props;
 
     return (
       <div className="dialog-content">
         <div className="dialog-head">
-          <div className="dialog-head-title">
-            маршруты
-          </div>
           <div>
             <input
               type="text"
-              placeholder="title/address"
+              placeholder="Поиск по названию"
               value={title}
               onChange={this.setTitle}
             />
 
             <br />
 
-            <input
-              type="text"
-              placeholder="min"
-              value={distance[0]}
-              onChange={this.setDistanceMin}
+            <Range
+              min={min}
+              max={max}
+              marks={marks}
+              step={20}
+              onChange={this.props.searchSetDistance}
+              defaultValue={distance}
+              pushable={20}
             />
 
-            <input
-              type="text"
-              placeholder="max"
-              value={distance[1]}
-              onChange={this.setDistanceMax}
-            />
           </div>
         </div>
         <Scroll className="dialog-shader">
@@ -115,6 +115,10 @@ class Component extends React.Component<Props> {
 const mapStateToProps = ({ user: { editing, routes } }) => ({
   routes,
   editing,
+  marks: [...new Array((routes.filter.max - routes.filter.min) / 20 + 1)].reduce((obj, el, i) => ({
+    ...obj,
+    [routes.filter.min + (i * 20)]: (routes.filter.min + (i * 20)),
+  }), {}),
   // routes_sorted: Object.keys(routes).sort((a, b) => (Date.parse(routes[b].updated_at) - Date.parse(routes[a].updated_at))),
 });
 

src/redux/user/actions.js

@@ -51,4 +51,7 @@ export const keyPressed = ({ key }) => ({ type: ACTIONS.KEY_PRESSED, key });
 export const searchSetTitle = title => ({ type: ACTIONS.SEARCH_SET_TITLE, title });
 export const searchSetDistance = distance => ({ type: ACTIONS.SEARCH_SET_DISTANCE, distance });
 export const searchSetTab = tab => ({ type: ACTIONS.SEARCH_SET_TAB, tab });
-export const searchPutRoutes = list => ({ type: ACTIONS.SEARCH_PUT_ROUTES, list })
+export const searchSetLoading = loading => ({ type: ACTIONS.SEARCH_SET_LOADING, loading });
+
+export const searchPutRoutes = payload => ({ type: ACTIONS.SEARCH_PUT_ROUTES, ...payload });
+

src/redux/user/constants.js

@@ -56,4 +56,5 @@ export const ACTIONS = ({
 
   SEARCH_SET_TAB: 'SEARCH_SET_TAB',
   SEARCH_PUT_ROUTES: 'SEARCH_PUT_ROUTES',
+  SEARCH_SET_LOADING: 'SEARCH_SET_LOADING',
 }: { [key: String]: String });

src/redux/user/reducer.js

@@ -128,11 +128,24 @@ const searchSetTab = (state, { tab = 'mine' }) => ({
   }
 });
 
-const searchPutRoutes = (state, { list = [] }) => ({
+const searchPutRoutes = (state, { list = [], min, max }) => ({
   ...state,
   routes: {
     ...state.routes,
     list,
+    filter: {
+      ...state.routes.filter,
+      min: min || state.routes.filter.min,
+      max: max || state.routes.filter.max,
+    }
+  }
+});
+
+const searchSetLoading = (state, { loading = false }) => ({
+  ...state,
+  routes: {
+    ...state.routes,
+    loading,
   }
 });
 
@@ -168,6 +181,7 @@ const HANDLERS = ({
   [ACTIONS.SEARCH_SET_DISTANCE]: searchSetDistance,
   [ACTIONS.SEARCH_SET_TAB]: searchSetTab,
   [ACTIONS.SEARCH_PUT_ROUTES]: searchPutRoutes,
+  [ACTIONS.SEARCH_SET_LOADING]: searchSetLoading,
 }: { [key: String]: Function });
 
 export const INITIAL_STATE = {
@@ -210,9 +224,10 @@ export const INITIAL_STATE = {
       title: '',
       starred: false,
       distance: [0, 300],
-
       author: '',
       tab: 'mine',
+      min: 0,
+      max: 300,
     }
   },
 };

src/redux/user/sagas.js

@@ -9,7 +9,7 @@ import {
   postMap
 } from '$utils/api';
 import {
-  hideRenderer, searchPutRoutes,
+  hideRenderer, searchPutRoutes, searchSetLoading,
   setActiveSticker, setAddress,
   setChanged, setDialogActive,
   setEditing,
@@ -435,11 +435,11 @@ function* keyPressedSaga({ key }): void {
 
 function* searchSetSaga() {
   const { id, token } = yield select(getUser);
-
-  yield delay(500);
+  yield delay(1000);
+  yield put(searchSetLoading(true));
   const { routes: { filter: { title, distance, tab } } } = yield select(getState);
 
-  const list = yield call(getRouteList, {
+  const { list, min, max } = yield call(getRouteList, {
     id,
     token,
     title,
@@ -448,7 +448,8 @@ function* searchSetSaga() {
     starred: tab === 'starred',
   });
 
-  yield put(searchPutRoutes(list));
+  yield put(searchPutRoutes({ list, min, max }));
+  return yield put(searchSetLoading(false));
 }
 
 export function* userSaga() {

src/styles/main.less

@@ -11,6 +11,7 @@
 @import 'renderer.less';
 @import 'dialogs.less';
 @import 'progress.less';
+@import 'slider.less';
 
 body {
   font-family: 'Rubik', sans-serif;
@@ -133,3 +134,17 @@ hr {
   height: 2px;
   background: rgba(0, 0, 0, 0.3);
 }
+
+input {
+  width: 100%;
+  padding: 5px 10px 5px 10px;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: @panel_radius;
+  border: none;
+  outline: none;
+  color: white;
+
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 200;
+}

src/styles/save.less

@@ -49,16 +49,8 @@
   display: flex;
 
   input {
-    width: 100%;
     padding: 5px 5px 5px 2px;
     background: transparent;
-    border: none;
-    outline: none;
-    color: white;
-
-    font-family: inherit;
-    font-size: 14px;
-    font-weight: 200;
   }
 }
 

src/styles/slider.less

@@ -0,0 +1,301 @@
+@prefixClass: rc-slider;
+
+@disabledColor: #ccc;
+@border-radius-base: 6px;
+@primary-color: transparent;
+@tooltip-color: #fff;
+@tooltip-bg: tint(#666, 4%);
+@tooltip-arrow-width: 4px;
+@tooltip-distance: @tooltip-arrow-width+4;
+@tooltip-arrow-color: @tooltip-bg;
+@ease-out-quint      : cubic-bezier(0.23, 1, 0.32, 1);
+@ease-in-quint       : cubic-bezier(0.755, 0.05, 0.855, 0.06);
+
+.borderBox() {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
+
+  * {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); //  remove tap highlight color for mobile safari
+  }
+}
+
+.@{prefixClass} {
+  position: relative;
+  height: 40px;
+  padding: 15px 0;
+  // width: 100%;
+  margin: 8px;
+  border-radius: @border-radius-base;
+  touch-action: none;
+
+  .borderBox();
+
+  &-rail {
+    position: absolute;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+    height: 4px;
+    border-radius: @border-radius-base;
+  }
+
+  &-track {
+    position: absolute;
+    left: 0;
+    height: 4px;
+    border-radius: @border-radius-base;
+    background: linear-gradient(90deg, @green_secondary, @blue_secondary);
+  }
+
+  &-handle {
+    position: absolute;
+    margin-left: -7px;
+    margin-top: -5px;
+    width: 14px;
+    height: 14px;
+    cursor: pointer;
+    cursor: -webkit-grab;
+    cursor: grab;
+    border-radius: 50%;
+    border: solid 2px tint(@primary-color, 50%);
+    background-color: #fff;
+    touch-action: pan-x;
+
+    &:focus {
+      // border-color: tint(@primary-color, 20%);
+      box-shadow: 0 0 0 4px tint(@primary-color, 50%);
+      outline: none;
+    }
+
+    &-click-focused:focus {
+      // border-color: tint(@primary-color, 50%);
+      box-shadow: unset;
+    }
+
+    &:hover {
+      border-color: tint(@primary-color, 20%);
+    }
+
+    &:active {
+      border-color: tint(@primary-color, 20%);
+      box-shadow: 0 0 5px tint(@primary-color, 20%);
+      cursor: -webkit-grabbing;
+      cursor: grabbing;
+    }
+  }
+
+  &-mark {
+    position: absolute;
+    top: 18px;
+    left: 0;
+    width: 100%;
+    font-size: 12px;
+  }
+
+  &-mark-text {
+    position: absolute;
+    display: inline-block;
+    vertical-align: middle;
+    text-align: center;
+    cursor: pointer;
+    color: rgba(255, 255, 255, 0.3);
+    padding-top: 10px;
+  }
+
+  &-step {
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    background: transparent;
+  }
+
+  &-dot {
+    position: absolute;
+    bottom: -2px;
+    margin-left: -4px;
+    width: 8px;
+    height: 8px;
+    border: 2px solid #e9e9e9;
+    background-color: #fff;
+    cursor: pointer;
+    border-radius: 50%;
+    vertical-align: middle;
+    &-active {
+      border-color: tint(@primary-color, 50%);
+    }
+  }
+
+  &-disabled {
+    background-color: #e9e9e9;
+
+    .@{prefixClass}-track {
+      background-color: @disabledColor;
+    }
+
+    .@{prefixClass}-handle, .@{prefixClass}-dot {
+      border-color: @disabledColor;
+      box-shadow: none;
+      background-color: #fff;
+      cursor: not-allowed;
+    }
+
+    .@{prefixClass}-mark-text, .@{prefixClass}-dot {
+      cursor: not-allowed!important;
+    }
+  }
+}
+
+.@{prefixClass}-vertical {
+  width: 14px;
+  height: 100%;
+  padding: 0 5px;
+
+  .@{prefixClass} {
+    &-rail {
+      height: 100%;
+      width: 4px;
+    }
+
+    &-track {
+      left: 5px;
+      bottom: 0;
+      width: 4px;
+    }
+
+    &-handle {
+      margin-left: -5px;
+      margin-bottom: -7px;
+      touch-action: pan-y;
+    }
+
+    &-mark {
+      top: 0;
+      left: 18px;
+      height: 100%;
+    }
+
+    &-step {
+      height: 100%;
+      width: 4px;
+    }
+
+    &-dot {
+      left: 2px;
+      margin-bottom: -4px;
+      &:first-child {
+        margin-bottom: -4px;
+      }
+      &:last-child {
+        margin-bottom: -4px;
+      }
+    }
+  }
+}
+
+.motion-common() {
+  animation-duration: .3s;
+  animation-fill-mode: both;
+  display: block !important;
+}
+
+.make-motion(@className, @keyframeName) {
+  .@{className}-enter, .@{className}-appear {
+    .motion-common();
+    animation-play-state: paused;
+  }
+  .@{className}-leave {
+    .motion-common();
+    animation-play-state: paused;
+  }
+  .@{className}-enter.@{className}-enter-active, .@{className}-appear.@{className}-appear-active {
+    animation-name: ~"@{keyframeName}In";
+    animation-play-state: running;
+  }
+  .@{className}-leave.@{className}-leave-active {
+    animation-name: ~"@{keyframeName}Out";
+    animation-play-state: running;
+  }
+}
+.zoom-motion(@className, @keyframeName) {
+  .make-motion(@className, @keyframeName);
+  .@{className}-enter, .@{className}-appear {
+    transform: scale(0, 0); // need this by yiminghe
+    animation-timing-function: @ease-out-quint;
+  }
+  .@{className}-leave {
+    animation-timing-function: @ease-in-quint;
+  }
+}
+.zoom-motion(rc-slider-tooltip-zoom-down, rcSliderTooltipZoomDown);
+
+@keyframes rcSliderTooltipZoomDownIn {
+  0% {
+    opacity: 0;
+    transform-origin: 50% 100%;
+    transform: scale(0, 0);
+  }
+  100% {
+    transform-origin: 50% 100%;
+    transform: scale(1, 1);
+  }
+}
+
+@keyframes rcSliderTooltipZoomDownOut {
+  0% {
+    transform-origin: 50% 100%;
+    transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    transform-origin: 50% 100%;
+    transform: scale(0, 0);
+  }
+}
+
+.@{prefixClass}-tooltip {
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+  visibility: visible;
+
+  .borderBox();
+
+  &-hidden {
+    display: none;
+  }
+
+  &-placement-top {
+    padding: @tooltip-arrow-width 0 @tooltip-distance 0;
+  }
+
+  &-inner {
+    padding: 6px 2px;
+    min-width: 24px;
+    height: 24px;
+    font-size: 12px;
+    line-height: 1;
+    color: @tooltip-color;
+    text-align: center;
+    text-decoration: none;
+    background-color: @tooltip-bg;
+    border-radius: @border-radius-base;
+    box-shadow: 0 0 4px #d9d9d9;
+  }
+
+  &-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+  }
+
+  &-placement-top &-arrow {
+    bottom: @tooltip-distance - @tooltip-arrow-width;
+    left: 50%;
+    margin-left: -@tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-top-color: @tooltip-arrow-color;
+  }
+}

src/utils/api.js

@@ -39,9 +39,9 @@ export const checkIframeToken = ({ viewer_id, auth_key }) => axios.get(API.IFRAM
 }).then(result => (result && result.data && result.data.success && result.data.user)).catch(() => (false));
 
 export const getRouteList = ({
-  title, distance, author, starred 
+  title, distance, author, starred
 }) => axios.get(API.GET_ROUTE_LIST, {
   params: {
-    title, distance, author, starred 
+    title, distance, author, starred
   }
-}).then(result => (result && result.data && result.data.success && result.data.list)).catch(() => ([]));
+}).then(result => (result && result.data && result.data.success && result.data)).catch(() => ([]));