diff --git a/config/parameters.js b/config/parameters.js index 2bfcbec..3804e2e 100644 --- a/config/parameters.js +++ b/config/parameters.js @@ -330,6 +330,9 @@ module.exports = { showCycleNumberInput: { default: false, }, + showSavedRoutesList: { + default: false, + }, }, routingEditor: { radiusOfMapRequest: 2000, diff --git a/src/components/RouteEditingBar/SavedRoutesList.js b/src/components/RouteEditingBar/SavedRoutesList.js new file mode 100644 index 0000000..d909e17 --- /dev/null +++ b/src/components/RouteEditingBar/SavedRoutesList.js @@ -0,0 +1,36 @@ +import React from 'react'; +import { observer } from 'mobx-react'; + +@observer +export default class SavedRoutesList extends React.Component { + render() { + const { routeEditingManager, options } = this.props; + const savedRoutes = Object.keys(routeEditingManager.defaultRoutings); + + if (savedRoutes.length === 0) { + return ( +
+ No saved routes available. +
+ ); + } + + return ( +
+ {savedRoutes.map((name) => ( + + ))} +
+ ); + } +} diff --git a/src/components/RouteEditingBar/index.js b/src/components/RouteEditingBar/index.js index 27c3470..7e1b2db 100644 --- a/src/components/RouteEditingBar/index.js +++ b/src/components/RouteEditingBar/index.js @@ -2,6 +2,7 @@ import React from 'react'; import { inject, observer } from 'mobx-react'; import EditingTip from 'components/RouteEditingBar/EditingTip'; +import SavedRoutesList from 'components/RouteEditingBar/SavedRoutesList'; import removeAllIcon from 'assets/images/routing/remove_all.png'; import removeLastIcon from 'assets/images/routing/remove_last.png'; @@ -9,6 +10,7 @@ import sendRouteIcon from 'assets/images/routing/send_request.png'; import addPoiIcon from 'assets/images/routing/add_poi.png'; import inDefaultRoutingModeIcon from 'assets/images/routing/in_default_routing_mode.png'; import exitDefaultRoutingModeIcon from 'assets/images/routing/exit_default_routing_mode.png'; +import loadRouteIcon from 'assets/images/icons/download.png'; class RouteEditingButton extends React.Component { render() { @@ -62,6 +64,20 @@ export default class RouteEditingMenu extends React.Component { } }} /> + { + options.showDefaultRoutingInput = true; + }} + /> + { + options.showSavedRoutesList = !options.showSavedRoutesList; + }} + /> + {options.showSavedRoutesList + && } ); } diff --git a/src/styles/main.scss b/src/styles/main.scss index 6ce6e9b..017472a 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1783,6 +1783,39 @@ body { } } } + + .saved-routes-list { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + padding: 5px 10px; + background: #252c33; + border-top: 1px solid #000000; + + .no-routes-msg { + color: #999999; + font-size: 13px; + padding: 5px 10px; + } + + .saved-route-item { + margin: 4px 6px; + padding: 5px 12px; + border: 1px solid #555555; + background: #1D2226; + color: #D8D8D8; + font-size: 13px; + cursor: pointer; + border-radius: 3px; + + &:hover { + background: #2A3238; + color: #FFFFFF; + border-color: #888888; + } + } + } } .data-recorder {