Add Save Route and Load Route buttons to RouteEditingBar

config/parameters.js

@@ -330,6 +330,9 @@ module.exports = {
     showCycleNumberInput: {
       default: false,
     },
+    showSavedRoutesList: {
+      default: false,
+    },
   },
   routingEditor: {
     radiusOfMapRequest: 2000,

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 (
+        <div className="saved-routes-list">
+          <span className="no-routes-msg">No saved routes available.</span>
+        </div>
+      );
+    }
+
+    return (
+      <div className="saved-routes-list">
+        {savedRoutes.map((name) => (
+          <button
+            key={name}
+            className="saved-route-item"
+            onClick={() => {
+              routeEditingManager.addDefaultRoutingPoint(name);
+              options.showSavedRoutesList = false;
+            }}
+            title={`Load route: ${name}`}
+          >
+            {name}
+          </button>
+        ))}
+      </div>
+    );
+  }
+}

src/components/RouteEditingBar/index.js

@@ -2,13 +2,15 @@ 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';
 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 {
                           }
                         }}
                     />
+                    <RouteEditingButton
+                        label="Save Route"
+                        icon={inDefaultRoutingModeIcon}
+                        onClick={() => {
+                          options.showDefaultRoutingInput = true;
+                        }}
+                    />
+                    <RouteEditingButton
+                        label="Load Route"
+                        icon={loadRouteIcon}
+                        onClick={() => {
+                          options.showSavedRoutesList = !options.showSavedRoutesList;
+                        }}
+                    />
                     <RouteEditingButton
                         label="Add Default Routing"
                         icon={routeEditingManager.inDefaultRoutingMode
@@ -78,6 +94,11 @@ export default class RouteEditingMenu extends React.Component {
                     />
                     <EditingTip />
                 </div>
+                {options.showSavedRoutesList
+                  && <SavedRoutesList
+                    routeEditingManager={routeEditingManager}
+                    options={options}
+                  />}
             </div>
     );
   }

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 {