GKN-83: Adding work with hook colors to frontend

bitia-ru · Jun 8, 2019 · 0388e52 · 0388e52
1 parent c02b995
commit 0388e52
Show file tree

Hide file tree

Showing 10 changed files with 232 additions and 13 deletions.
diff --git a/public/img/route-img/no_color.png b/public/img/route-img/no_color.png
diff --git a/src/Constants/Actions.js b/src/Constants/Actions.js
@@ -20,3 +20,5 @@ export const SET_DEFAULT_SELECTED_PAGES = 'SET_DEFAULT_SELECTED_PAGES';
 export const SET_SELECTED_FILTER = 'SET_SELECTED_FILTER';
 export const SET_DEFAULT_SELECTED_FILTERS = 'SET_DEFAULT_SELECTED_FILTERS';
 export const LOAD_FROM_LOCAL_STORAGE_SELECTED_FILTERS = 'LOAD_FROM_LOCAL_STORAGE_SELECTED_FILTERS';
+
+export const LOAD_ROUTE_MARK_COLORS = 'LOAD_ROUTE_MARK_COLORS';
diff --git a/src/RouteColorPicker/RouteColorPicker.css b/src/RouteColorPicker/RouteColorPicker.css
@@ -0,0 +1,36 @@
+.mark-color-picker__name {
+    display: inline-block;
+    vertical-align: middle;
+    padding-left: 20px;
+    cursor: pointer;
+}
+
+.mark-color-picker__wrap {
+    display: inline-flex;
+    position: relative;
+    outline: none;
+}
+
+.mark-color-picker__info {
+    cursor: pointer;
+}
+
+.mark-color-picker__color {
+    display: inline-block;
+    width: 60px;
+    height: 20px;
+    vertical-align: middle;
+    margin-left: 15px;
+}
+
+.mark-color-picker__item {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+}
+
+.mark-color-picker__item-text {
+    font-size: 16px;
+    font-family: GilroyRegular, sans-serif;
+    padding-left: 20px;
+}
diff --git a/src/RouteColorPicker/RouteColorPicker.js b/src/RouteColorPicker/RouteColorPicker.js
@@ -0,0 +1,90 @@
+import React, {Component} from 'react';
+import * as R             from 'ramda';
+import PropTypes          from 'prop-types';
+import './RouteColorPicker.css';
+
+export default class RouteColorPicker extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            droppedDown: false
+        };
+        this.mouseOver = false;
+    }
+
+    selectItem = (routeMarkColor) => {
+        this.setState({droppedDown: false});
+        this.props.onSelect(routeMarkColor);
+    };
+
+    onBlur = () => {
+        if (!this.mouseOver) {
+            this.setState({droppedDown: false})
+        }
+    };
+
+    render() {
+        let routeColor = this.props.route[this.props.fieldName];
+        let hasPhotoOrColor = routeColor && (routeColor.photo || routeColor.color);
+        return <div className="mark-color-picker__wrap" onClick={() => {
+            if (this.props.editable) {
+                this.setState({droppedDown: !this.state.droppedDown})
+            }
+        }} onBlur={this.onBlur} tabIndex={1} onMouseLeave={() => this.mouseOver = false}
+                    onMouseOver={() => this.mouseOver = true}>
+            <div className="mark-color-picker__info">
+                <div
+                    className="mark-color-picker__color"
+                    style={(hasPhotoOrColor) ? (this.props.route[this.props.fieldName].photo ? {
+                        backgroundImage: `url(${this.props.route[this.props.fieldName].photo.url})`,
+                        backgroundPosition: 'center',
+                        backgroundSize: 'contain',
+                        backgroundRepeat: 'no-repeat'
+                    } : {
+                        backgroundColor: this.props.route[this.props.fieldName].color
+                    }) : {
+                        backgroundImage: 'url(/public/img/route-img/no_color.png)',
+                        backgroundPosition: 'center',
+                        backgroundSize: 'contain',
+                        backgroundRepeat: 'no-repeat'
+                    }}></div>
+            </div>
+            <div className="mark-color-picker__name">
+                {this.props.route[this.props.fieldName] ? this.props.route[this.props.fieldName].name : 'не задан'}
+            </div>
+            {this.state.droppedDown ?
+                <div className="combo-box__dropdown modal__combo-box-drowdown combo-box__dropdown_active">
+                    <div className="combo-box__dropdown-wrapper">
+                        {R.map((routeMarkColor) =>
+                            <li key={routeMarkColor.id}
+                                onClick={() => this.selectItem(routeMarkColor)}
+                                className="combo-box__dropdown-item combo-box__dropdown-item_padding-10">
+                                <div className="mark-color-picker__item">
+                                    <div
+                                        className="mark-color-picker__color"
+                                        style={routeMarkColor.photo ? {
+                                            backgroundImage: `url(${routeMarkColor.photo.url})`,
+                                            backgroundPosition: 'center',
+                                            backgroundSize: 'contain',
+                                            backgroundRepeat: 'no-repeat'
+                                        } : (routeMarkColor.color ? {backgroundColor: routeMarkColor.color} : {
+                                            backgroundImage: 'url(/public/img/route-img/no_color.png)',
+                                            backgroundPosition: 'center',
+                                            backgroundSize: 'contain',
+                                            backgroundRepeat: 'no-repeat'
+                                        })}></div>
+                                    <div className="mark-color-picker__item-text">{routeMarkColor.name}</div>
+                                </div>
+                            </li>, this.props.routeMarkColors)}
+                    </div>
+                </div> : ''}
+        </div>;
+    }
+}
+
+RouteColorPicker.propTypes = {
+    route: PropTypes.object.isRequired,
+    editable: PropTypes.bool.isRequired,
+    fieldName: PropTypes.string.isRequired
+};
diff --git a/src/RouteDataEditableTable/RouteDataEditableTable.js b/src/RouteDataEditableTable/RouteDataEditableTable.js
@@ -8,7 +8,8 @@ import DatePickerBlock    from '../DatePickerBlock/DatePickerBlock';
 import ComboBoxPerson     from '../ComboBoxPerson/ComboBoxPerson';
 import * as R             from 'ramda';
 import moment             from 'moment';
-import {DATE_FORMAT}      from '../Constants/Date'
+import {DATE_FORMAT}      from '../Constants/Date';
+import RouteColorPicker   from '../RouteColorPicker/RouteColorPicker';
 import './RouteDataEditableTable.css';
 
 export default class RouteDataEditableTable extends Component {
@@ -20,6 +21,14 @@ export default class RouteDataEditableTable extends Component {
         }
     }
 
+    onHoldsColorSelect = (holdsColor) => {
+        this.props.onRouteParamChange(holdsColor, 'holds_color');
+    };
+
+    onMarksColorSelect = (marksColor) => {
+        this.props.onRouteParamChange(marksColor, 'marks_color');
+    };
+
     render() {
         return <div className="route-data-table">
             <div className="route-data-table-row">
@@ -40,6 +49,28 @@ export default class RouteDataEditableTable extends Component {
                     </div>
                 </div>
             </div>
+            <div className="route-data-table-row">
+                <div className="route-data-table-item route-data-table-item_header">
+                    Цвет зацепов:
+                </div>
+                <div className="route-data-table-item">
+                    <RouteColorPicker editable={true} routeMarkColors={this.props.routeMarkColors}
+                                      route={this.props.route}
+                                      fieldName='holds_color'
+                                      onSelect={this.onHoldsColorSelect}/>
+                </div>
+            </div>
+            <div className="route-data-table-row">
+                <div className="route-data-table-item route-data-table-item_header">
+                    Цвет маркировки:
+                </div>
+                <div className="route-data-table-item">
+                    <RouteColorPicker editable={true} routeMarkColors={this.props.routeMarkColors}
+                                      route={this.props.route}
+                                      fieldName='marks_color'
+                                      onSelect={this.onMarksColorSelect}/>
+                </div>
+            </div>
             <div className="route-data-table-row">
                 <div className="route-data-table-item route-data-table-item_header">
                     Тип:
@@ -96,5 +127,6 @@ RouteDataEditableTable.propTypes = {
     route: PropTypes.object.isRequired,
     sector: PropTypes.object.isRequired,
     users: PropTypes.array.isRequired,
-    onRouteParamChange: PropTypes.func.isRequired
+    onRouteParamChange: PropTypes.func.isRequired,
+    routeMarkColors: PropTypes.array.isRequired
 };
diff --git a/src/RouteDataTable/RouteDataTable.js b/src/RouteDataTable/RouteDataTable.js
@@ -5,6 +5,7 @@ import moment             from 'moment';
 import {GetUserName}      from '../Constants/User';
 import {ROUTE_KINDS}      from '../Constants/Route';
 import * as R             from 'ramda';
+import RouteColorPicker   from '../RouteColorPicker/RouteColorPicker';
 import './RouteDataTable.css';
 
 export default class RouteDataTable extends Component {
@@ -31,6 +32,22 @@ export default class RouteDataTable extends Component {
                          style={{backgroundColor: GetCategoryColor(this.props.route.category)}}></div>
                 </div>
             </div>
+            <div className="route-data-table-row">
+                <div className="route-data-table-item route-data-table-item_header">
+                    Цвет зацепов:
+                </div>
+                <div className="route-data-table-item">
+                    <RouteColorPicker editable={false} route={this.props.route} fieldName='holds_color'/>
+                </div>
+            </div>
+            <div className="route-data-table-row">
+                <div className="route-data-table-item route-data-table-item_header">
+                    Цвет маркировки:
+                </div>
+                <div className="route-data-table-item">
+                    <RouteColorPicker editable={false} route={this.props.route} fieldName='marks_color'/>
+                </div>
+            </div>
             <div className="route-data-table-row">
                 <div className="route-data-table-item route-data-table-item_header">
                     Народная категория:

diff --git a/src/RoutesEditModal/RoutesEditModal.js b/src/RoutesEditModal/RoutesEditModal.js
@@ -52,20 +52,26 @@ export default class RoutesEditModal extends Component {
         }
     };
 
+    changed = (newValue, oldValue) => {
+        return JSON.stringify(newValue) !== JSON.stringify(oldValue);
+    };
+
     save = () => {
         let paramList = ['number', 'name', 'author_id', 'category', 'kind', 'installed_at', 'installed_until', 'description'];
         let formData = new FormData();
-        if (JSON.stringify(this.state.currentPointers) !== JSON.stringify(this.state.currentPointersOld)) {
-            let mark = R.clone(this.props.route.mark);
-            if (!mark) {
-                mark = {colors: {holds: 1, marks: 1}};
-            }
+        let pointersChanged = this.changed(this.state.currentPointers, this.state.currentPointersOld);
+        let holdsColorsChanged = this.changed(this.props.route.holds_color, this.state.route.holds_color);
+        let marksColorsChanged = this.changed(this.props.route.marks_color, this.state.route.marks_color);
+        if (pointersChanged || holdsColorsChanged || marksColorsChanged) {
             let x = R.map((pointer) => pointer.x, this.state.currentPointers);
             let y = R.map((pointer) => pointer.y, this.state.currentPointers);
             let angle = R.map((pointer) => pointer.angle, this.state.currentPointers);
-            mark.pointers = {x: x, y: y, angle: angle};
-            formData.append('route[mark][colors][holds]', 1);
-            formData.append('route[mark][colors][marks]', 1);
+            if (this.state.route.holds_color) {
+                formData.append('route[mark][colors][holds]', this.state.route.holds_color.id);
+            }
+            if (this.state.route.marks_color) {
+                formData.append('route[mark][colors][marks]', this.state.route.marks_color.id);
+            }
             for (let i in x) {
                 formData.append('route[mark][pointers][x][]', x[i]);
                 formData.append('route[mark][pointers][y][]', y[i]);
@@ -243,6 +249,7 @@ export default class RoutesEditModal extends Component {
                                                 sector={this.props.sector}
                                                 onRouteParamChange={this.onRouteParamChange}
                                                 user={this.props.user}
+                                                routeMarkColors={this.props.routeMarkColors}
                                                 users={this.props.users}/>
                     </div>
                     <div className="modal__item modal__descr-item">
@@ -284,5 +291,6 @@ RoutesEditModal.propTypes = {
     createRoute: PropTypes.func.isRequired,
     updateRoute: PropTypes.func.isRequired,
     isWaiting: PropTypes.bool.isRequired,
-    numOfActiveRequests: PropTypes.number.isRequired
+    numOfActiveRequests: PropTypes.number.isRequired,
+    routeMarkColors: PropTypes.array.isRequired
 };
diff --git a/src/Spots/SpotsShow.js b/src/Spots/SpotsShow.js
@@ -10,6 +10,7 @@ import {
     setDefaultSelectedFilters,
     loadRoutes,
     loadSectors,
+    loadRouteMarkColors,
     saveUser,
     saveToken,
     removeToken,
@@ -186,6 +187,9 @@ class SpotsShow extends Authorization {
         }
         this.reloadSectors(this.state.sectorId);
         this.props.loadFromLocalStorageSelectedFilters();
+        if (this.props.routeMarkColors.length === 0) {
+            this.loadRouteMarkColors();
+        }
         window.addEventListener("keydown", this.onKeyDown);
         window.addEventListener("keyup", this.onKeyUp);
     }
@@ -388,6 +392,18 @@ class SpotsShow extends Authorization {
         });
     };
 
+    loadRouteMarkColors = () => {
+        this.props.increaseNumOfActiveRequests();
+        Axios.get(`${ApiUrl}/v1/route_mark_colors`)
+            .then(response => {
+                this.props.decreaseNumOfActiveRequests();
+                this.props.loadRouteMarkColors(response.data.payload);
+            }).catch(error => {
+            this.props.decreaseNumOfActiveRequests();
+            this.displayError(error);
+        });
+    };
+
     reloadRoutes = (filters = {}, page = 1) => {
         let currentSectorId = parseInt((filters.sectorId === null || filters.sectorId === undefined) ? this.state.sectorId : filters.sectorId, 10);
         let currentCategoryFrom = (filters.categoryFrom === null || filters.categoryFrom === undefined) ? this.props.selectedFilters[this.state.spotId][currentSectorId].categoryFrom : filters.categoryFrom;
@@ -944,6 +960,7 @@ class SpotsShow extends Authorization {
                                      sector={this.state.sectorId === 0 ? R.find((sector) => sector.id === this.state.currentShown.sector_id, this.props.sectors) : this.state.sector}
                                      cancel={this.cancelEdit}
                                      users={this.state.users}
+                                     routeMarkColors={this.props.routeMarkColors}
                                      user={this.props.user}
                                      numOfActiveRequests={this.props.numOfActiveRequests}
                                      createRoute={this.createRoute}
@@ -1047,7 +1064,8 @@ const mapStateToProps = state => ({
     sectors: state.sectors,
     user: state.user,
     token: state.token,
-    numOfActiveRequests: state.numOfActiveRequests
+    numOfActiveRequests: state.numOfActiveRequests,
+    routeMarkColors: state.routeMarkColors,
 });
 
 const mapDispatchToProps = dispatch => ({
@@ -1058,6 +1076,7 @@ const mapDispatchToProps = dispatch => ({
     setDefaultSelectedFilters: (spotId, sectorIds) => dispatch(setDefaultSelectedFilters(spotId, sectorIds)),
     loadFromLocalStorageSelectedFilters: () => dispatch(loadFromLocalStorageSelectedFilters()),
     loadSectors: sectors => dispatch(loadSectors(sectors)),
+    loadRouteMarkColors: routeMarkColors => dispatch(loadRouteMarkColors(routeMarkColors)),
     saveUser: user => dispatch(saveUser(user)),
     saveToken: token => dispatch(saveToken(token)),
     removeToken: () => dispatch(removeToken()),

diff --git a/src/actions.js b/src/actions.js
@@ -84,3 +84,8 @@ export const setDefaultSelectedFilters = (spotId, sectorIds) => ({
 export const loadFromLocalStorageSelectedFilters = () => ({
     type: acts.LOAD_FROM_LOCAL_STORAGE_SELECTED_FILTERS
 });
+
+export const loadRouteMarkColors = (routeMarkColors) => ({
+    type: acts.LOAD_ROUTE_MARK_COLORS,
+    routeMarkColors
+});
diff --git a/src/reducers.js b/src/reducers.js
@@ -131,6 +131,15 @@ const selectedFiltersReducer = (state = {}, action) => {
     }
 };
 
+const routeMarkColorsReducer = (state = [], action) => {
+    switch (action.type) {
+        case acts.LOAD_ROUTE_MARK_COLORS:
+            return action.routeMarkColors;
+        default:
+            return state;
+    }
+};
+
 export default combineReducers({
     routes: routesReducer,
     sectors: sectorsReducer,
@@ -139,5 +148,6 @@ export default combineReducers({
     token: tokenReducer,
     numOfActiveRequests: numOfActiveRequestsReducer,
     selectedPages: selectedPagesReducer,
-    selectedFilters: selectedFiltersReducer
+    selectedFilters: selectedFiltersReducer,
+    routeMarkColors: routeMarkColorsReducer
 });