Merge pull request #31 from vincens2005/main

Allow for Saving/Loading runs from JSON

README.md

@@ -23,7 +23,6 @@ Use it for planning a route, or getting a sense of your route after a workout.
 - Elevation along route
 - Simple instructions in-app (better user guidance/education)
 - Mile markers along route
-- Save/load run
 
 ## Thanks
 
@@ -32,6 +31,7 @@ Use it for planning a route, or getting a sense of your route after a workout.
 
 ## Changelog
 
+- 12/19/21: Added the ability to download/upload runs, as well as caching the current run in the browser
 - 11/28/20: Refactored a bit to better abstract out mapbox API, localStorage interactions
 - 6/14/20: Updates to the testing experience, take advantage of existing libraries to simplify things
 - 3/28/20: Audits, enabled Github workflows, also added extra accessiblity/aria context

public/about.html

@@ -98,6 +98,9 @@ <h2>
   <li>
     <span>runmap-map_style</span>: The map style visual you prefer to use.
   </li>
+  <li>
+    <span>runmap-last_run</span>: The last route you plotted.
+  </li>
 </ul>
 
 <h2>
@@ -129,4 +132,4 @@ <h2>
   </button>
 </div>
 
-</html>
+</html>

public/index.html

@@ -72,16 +72,41 @@
       </button>
     </li>
     <li>
-      <button id="clear-run" aria-label="Clear all points from the current run">
+      <button id="clear-run" aria-label="Clear all points from the current run" class="hidden">
         Clear run
       </button>
     </li>
+    <li>
+      <button id="save-run" aria-label="Save the current run to a JSON file" class="hidden">
+        Save run
+      </button>
+    </li>
+    <li>
+      <button id="load-run" aria-label="Load a run from a JSON file">
+        Load run
+      </button>
+    </li>
     <li>
       <a href="about.html" target="_blank">About</a>
     </li>
   </ul>
 </div>
 
+<div id="upload-container" aria-hidden="false" class="fixed-center">
+  <form id="upload-form">
+    <h1>
+      Load a run
+    </h1>
+    <div class="uploadbox">
+      <input type="file" id="run-input">
+      <span>  
+        drag a file or click here
+      </span>
+    </div>
+    <input type="submit" class="button" value="Upload!">
+  </form>
+</div>
+
 <div id="settings-scrim" aria-hidden="true"></div>
 
 <div id="mapbox-container"></div>
@@ -115,7 +140,7 @@
     Click/tap anywhere on the map to add points in order to map out your run! See the <a target="_blank" href="about.html">about page</a> to
     learn more.
   </div>
-  <button id="dismiss-notice">Got it!</button>
+  <button id="dismiss-notice" class="button">Got it!</button>
 </div>
 
 <noscript>
@@ -124,4 +149,4 @@
 <script src="vendor.js"></script>
 <script src="app.js"></script>
 
-</html>
+</html>

public/styles.css

@@ -26,6 +26,10 @@ body {
   user-select: none;
 }
 
+.hidden {
+  display: none;
+}
+
 #menu-container {
   top: 12px;
   left: 12px;
@@ -79,10 +83,6 @@ body {
 
 #dismiss-notice {
   margin-top: 8px;
-  height: 32px;
-  width: 96px;
-  border-radius: 4px;
-  background-color: buttonface;
 }
 
 #settings-pane {
@@ -96,6 +96,74 @@ body {
   transition-duration: 0.3s;
 }
 
+.fixed-center {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  position: fixed;
+  z-index: 4;
+}
+
+#upload-container {
+  background: white;
+  border-radius: 10px;
+  transition: 0.3s;
+  padding: 5px 10px;
+  filter: drop-shadow(2px 2px 12px rgba(0, 0, 0, 0.4))
+}
+
+.uploadbox {
+  width: 300px;
+  height: 120px;
+  line-height: 120px;
+  text-align: center;
+  cursor: pointer;
+  margin: 8px 0;
+  border: 2px dashed #c0c0c0;
+}
+
+.uploadbox input[type="file"] {
+  cursor: pointer;
+  position: absolute;
+  margin: 0;
+  padding: 0;
+  width: 300px;
+  height: 120px;
+  outline: none;
+  opacity: 0;
+  margin-left: -21.5%;
+}
+
+#upload-container:not(.showing-form) {
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(0.1);
+}
+
+#upload-container h1 {
+  margin: 0;
+}
+
+.button {
+  margin: 0 auto;
+  cursor: pointer;
+  user-select: none;
+  border: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  height: 30px;
+  width: 90px;
+  background-color: rgb(75, 129, 232);
+  color: #fff;
+  border-radius: 6px;
+  border-color: transparent;
+}
+
+.button:hover {
+  opacity: 0.85;
+}
+
 .settings-open {
   transform: translateX(340px);
   box-shadow: 2px 16px 12px 6px rgba(0, 0, 0, 0.2);
@@ -241,4 +309,4 @@ body {
   #settings-pane {
     width: 200px;
   }
-}
+}

src/current-run.spec.ts

@@ -24,15 +24,16 @@ describe('CurrentRun class', () => {
     let currentRun = new CurrentRun(new RunStart({} as LngLat));
 
     let initialExpectedDistance = 500;
-    let firstSegment = new RunSegment('some-uuid', {} as LngLat, initialExpectedDistance, {} as LineString);
+    let firstSegment = new RunSegment('some-uuid', {} as LngLat, initialExpectedDistance, {} as LineString, false);
     let marker = getMockMarker();
     currentRun.addSegment(firstSegment, marker);
 
     expect(currentRun.distance).toBe(initialExpectedDistance, 'Distance was not set correctly from the distance response.');
     expect(firstSegment.marker).toBe(marker);
+    expect(firstSegment.followsRoads).toBe(false);
 
     let secondDistance = 1337;
-    let secondSegment = new RunSegment('different-uuid', {} as LngLat, secondDistance, {} as LineString);
+    let secondSegment = new RunSegment('different-uuid', {} as LngLat, secondDistance, {} as LineString, true);
     currentRun.addSegment(secondSegment, getMockMarker());
     expect(currentRun.distance).toBe(initialExpectedDistance + secondDistance, 'Distance did not correctly add the incoming distance response value.');
   });
@@ -52,7 +53,7 @@ describe('CurrentRun class', () => {
 
     let expectedLngLat = { lng: 101, lat: 202 } as LngLat;
     let expectedDistance = 100;
-    let segment = new RunSegment('some-uuid', expectedLngLat, expectedDistance, {} as LineString);
+    let segment = new RunSegment('some-uuid', expectedLngLat, expectedDistance, {} as LineString, false);
     let marker = getMockMarker();
     spyOn(marker, 'remove').and.stub();
     currentRun.addSegment(segment, marker);

src/current-run.ts

@@ -27,12 +27,14 @@ export class RunSegment extends RunStart {
   public id: string;
   public distance: number; // in meters
   public geometry: LineString;
+  public followsRoads: boolean;
 
-  constructor(id: string, lngLat: LngLat, distance: number, geometry: LineString) {
+  constructor(id: string, lngLat: LngLat, distance: number, geometry: LineString, followsRoads: boolean) {
     super(lngLat);
     this.id = id;
     this.distance = distance;
     this.geometry = geometry;
+    this.followsRoads = followsRoads;
   }
 }