From e43c73e830867beff3c06e50a02f4f88dc572ead Mon Sep 17 00:00:00 2001 From: cukmekerb Date: Sun, 5 Dec 2021 01:17:23 -0800 Subject: [PATCH 01/11] convert CurrentRun to/from JSON --- package-lock.json | 2 -- public/index.html | 12 ++++++++- src/index.ts | 64 ++++++++++++++++++++++++++++++++++++++++------- 3 files changed, 66 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index caffa19..7b78bc5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6082,7 +6082,6 @@ "dependencies": { "anymatch": "~3.1.1", "braces": "~3.0.2", - "fsevents": "~2.1.2", "glob-parent": "~5.1.0", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", @@ -8820,7 +8819,6 @@ "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", - "fsevents": "~2.3.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", diff --git a/public/index.html b/public/index.html index 91f6b26..23e7b02 100644 --- a/public/index.html +++ b/public/index.html @@ -76,6 +76,16 @@ Clear run +
  • + +
    • +
  • + +
  • About
    • @@ -124,4 +134,4 @@ - \ No newline at end of file + diff --git a/src/index.ts b/src/index.ts index ddc33fe..20eec81 100644 --- a/src/index.ts +++ b/src/index.ts @@ -42,6 +42,8 @@ let scrimElement = document.getElementById('settings-scrim') as HTMLElement; let toggleUnitsElement = document.getElementById('toggle-units') as HTMLElement; let followRoadsElement = document.getElementById('follow-roads') as HTMLElement; let clearRunElement = document.getElementById('clear-run') as HTMLElement; +let loadRunElement = document.getElementById('load-run') as HTMLElement; +let saveRunElement = document.getElementById('save-run') as HTMLElement; let streetStyleElement = document.getElementById('street-style') as HTMLElement; let satelliteStyleElement = document.getElementById('satellite-style') as HTMLElement; let darkStyleElement = document.getElementById('dark-style') as HTMLElement; @@ -106,21 +108,21 @@ function addNewPoint(e: MapMouseEvent): void { } else { let prev = currentRun.getLastPosition(); if (followRoads) { - addSegmentFromDirectionsResponse(prev, e); + addSegmentFromDirectionsResponse(prev, e.lngLat); } else { - addSegmentFromStraightLine(prev, e); + addSegmentFromStraightLine(prev, e.lngLat); } } setWaiting(false); } -function addSegmentFromDirectionsResponse(previousLngLat: LngLat, e: MapMouseEvent) { - nextSegmentService.getSegmentFromDirectionsService(previousLngLat, e.lngLat) +function addSegmentFromDirectionsResponse(previousLngLat: LngLat, lngLat: LngLat, animate = true) { + return nextSegmentService.getSegmentFromDirectionsService(previousLngLat, lngLat) .then((newSegment: RunSegment) => { const line = newSegment.geometry as LineString; const coordinates = line.coordinates; - animationService.animateSegment(newSegment); + if (animate) animationService.animateSegment(newSegment); // use ending coordinate from route for the marker const segmentEnd = coordinates[coordinates.length - 1]; @@ -132,15 +134,58 @@ function addSegmentFromDirectionsResponse(previousLngLat: LngLat, e: MapMouseEve }); } -function addSegmentFromStraightLine(previousLngLat: LngLat, e: MapMouseEvent): void { - const newSegment = nextSegmentService.segmentFromStraightLine(previousLngLat, e.lngLat); +function addSegmentFromStraightLine(previousLngLat: LngLat, lngLat: LngLat, animate = true): void { + const newSegment = nextSegmentService.segmentFromStraightLine(previousLngLat, lngLat); - animationService.animateSegment(newSegment); - const marker = addMarker(e.lngLat, false); + if (animate) animationService.animateSegment(newSegment); + const marker = addMarker(lngLat, false); currentRun.addSegment(newSegment, marker); updateLengthElement(); } +function runToJson(run: CurrentRun): string { + if (run === undefined) return "{}"; + let runJSON: {[name:string]: any} = { + start: { + lng: run.start.lngLat.lng, + lat: run.start.lngLat.lat, + }, + distance: run.distance, + segments: [], + followRoads + } + for (let i in run.segments) { + runJSON.segments.push({ + lng: run.segments[i].lngLat.lng, + lat: run.segments[i].lngLat.lat + }) + } + return JSON.stringify(runJSON); +} + +function jsonToRun(json: string) { + let runJSON = JSON.parse(json); + let lngLat = new LngLat(runJSON.start.lng, runJSON.start.lat); + let start = new RunStart(lngLat); + start.setMarker(addMarker(lngLat, true)); + currentRun = new CurrentRun(start); + let prev = lngLat; + for (let i = 0; i < runJSON.segments.length; i++) { + let lngLat = new LngLat(runJSON.segments[i].lng, runJSON.segments[i].lat); + if (runJSON.followRoads) { + addSegmentFromDirectionsResponse(prev, lngLat, false); + } else { + addSegmentFromStraightLine(prev, lngLat, false); + } + prev = lngLat; + } + setTimeout(() => animationService.readdRunToMap(currentRun), 100); +} + +function loadRun(): void { + // TODO +} + function setupUserControls(): void { showHelpElementIfNecessary(); dismissHelpElement.onclick = hideStorageElement; @@ -158,6 +203,7 @@ function setupUserControls(): void { setFollowRoads(followRoads); followRoadsElement.onclick = () => closeMenuAction(toggleFollowRoads); clearRunElement.onclick = () => closeMenuAction(clearRun); + loadRunElement.onclick = () => closeMenuAction(loadRun); const id = preferenceService.getMapStyle(); setSelectedMapToggleStyles(document.getElementById(id) as HTMLElement); From 52531d4cea2770591bd73d8b60482dcb257d6723 Mon Sep 17 00:00:00 2001 From: cukmekerb Date: Fri, 10 Dec 2021 00:03:00 -0800 Subject: [PATCH 02/11] remember followRoads per-segment --- src/current-run.spec.ts | 7 ++++--- src/current-run.ts | 4 +++- src/index.ts | 7 ++++--- src/next-segment-service.ts | 6 ++++-- 4 files changed, 15 insertions(+), 9 deletions(-) diff --git a/src/current-run.spec.ts b/src/current-run.spec.ts index 68297ce..958f2b3 100644 --- a/src/current-run.spec.ts +++ b/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); diff --git a/src/current-run.ts b/src/current-run.ts index d6c228b..051e295 100644 --- a/src/current-run.ts +++ b/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; } } diff --git a/src/index.ts b/src/index.ts index 20eec81..8030cbc 100644 --- a/src/index.ts +++ b/src/index.ts @@ -157,8 +157,9 @@ function runToJson(run: CurrentRun): string { for (let i in run.segments) { runJSON.segments.push({ lng: run.segments[i].lngLat.lng, - lat: run.segments[i].lngLat.lat - }) + lat: run.segments[i].lngLat.lat, + followsRoads: run.segments[i].followsRoads + }); } return JSON.stringify(runJSON); } @@ -172,7 +173,7 @@ function jsonToRun(json: string) { let prev = lngLat; for (let i = 0; i < runJSON.segments.length; i++) { let lngLat = new LngLat(runJSON.segments[i].lng, runJSON.segments[i].lat); - if (runJSON.followRoads) { + if (runJSON.segments[i].followsRoads) { addSegmentFromDirectionsResponse(prev, lngLat, false); } else { addSegmentFromStraightLine(prev, lngLat, false); diff --git a/src/next-segment-service.ts b/src/next-segment-service.ts index 7fbfadb..058674f 100644 --- a/src/next-segment-service.ts +++ b/src/next-segment-service.ts @@ -49,7 +49,8 @@ export class NextSegmentService { uuid(), nextLngLat, route.distance, - route.geometry as LineString + route.geometry as LineString, + true ); } else { throw new Error(`Non-successful status code when getting directions: ${JSON.stringify(res)}`); @@ -76,7 +77,8 @@ export class NextSegmentService { uuid(), nextLngLat, distance, - line + line, + false ); } } From d8a57bfdad2b92f4e172e9fe04a9e2a505f05507 Mon Sep 17 00:00:00 2001 From: cukmekerb Date: Tue, 14 Dec 2021 00:31:59 -0800 Subject: [PATCH 03/11] last run is cached in browser --- src/index.ts | 52 +++++++++++++++++++++++++-------------- src/preference-service.ts | 9 +++++++ 2 files changed, 43 insertions(+), 18 deletions(-) diff --git a/src/index.ts b/src/index.ts index 8030cbc..8411c8c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -71,6 +71,9 @@ map.on('load', () => { preferenceService.saveCurrentFocus(p, map.getZoom()); }), 'bottom-right'); + + jsonToRun(preferenceService.getLastRun()); + if (currentRun !== undefined) showRemoveLast(); }); // click or tap @@ -94,6 +97,12 @@ map.on('style.load', () => { animationService.readdRunToMap(currentRun); }); +function showRemoveLast(): void { + removeLastElement.classList.remove('slide-out'); + removeLastElement.classList.add('slide-in'); + removeLastElement.setAttribute('aria-hidden', 'false'); +} + function addNewPoint(e: MapMouseEvent): void { if (currentRun === undefined) { let start = new RunStart( @@ -101,9 +110,7 @@ function addNewPoint(e: MapMouseEvent): void { ); start.setMarker(addMarker(e.lngLat, true)); currentRun = new CurrentRun(start); - removeLastElement.classList.remove('slide-out'); - removeLastElement.classList.add('slide-in'); - removeLastElement.setAttribute('aria-hidden', 'false'); + showRemoveLast(); updateLengthElement(); } else { let prev = currentRun.getLastPosition(); @@ -114,6 +121,7 @@ function addNewPoint(e: MapMouseEvent): void { } } setWaiting(false); + setTimeout(() => preferenceService.saveLastRun(runToJson(currentRun)), 100); // for some reason this won't save right without a delay } function addSegmentFromDirectionsResponse(previousLngLat: LngLat, lngLat: LngLat, animate = true) { @@ -153,7 +161,7 @@ function runToJson(run: CurrentRun): string { distance: run.distance, segments: [], followRoads - } + }; for (let i in run.segments) { runJSON.segments.push({ lng: run.segments[i].lngLat.lng, @@ -165,22 +173,28 @@ function runToJson(run: CurrentRun): string { } function jsonToRun(json: string) { - let runJSON = JSON.parse(json); - let lngLat = new LngLat(runJSON.start.lng, runJSON.start.lat); - let start = new RunStart(lngLat); - start.setMarker(addMarker(lngLat, true)); - currentRun = new CurrentRun(start); - let prev = lngLat; - for (let i = 0; i < runJSON.segments.length; i++) { - let lngLat = new LngLat(runJSON.segments[i].lng, runJSON.segments[i].lat); - if (runJSON.segments[i].followsRoads) { - addSegmentFromDirectionsResponse(prev, lngLat, false); - } else { - addSegmentFromStraightLine(prev, lngLat, false); + try { + let runJSON = JSON.parse(json); + + let lngLat = new LngLat(runJSON.start.lng, runJSON.start.lat); + let start = new RunStart(lngLat); + start.setMarker(addMarker(lngLat, true)); + currentRun = new CurrentRun(start); + let prev = lngLat; + for (let i = 0; i < runJSON.segments.length; i++) { + let lngLat = new LngLat(runJSON.segments[i].lng, runJSON.segments[i].lat); + if (runJSON.segments[i].followsRoads) { + addSegmentFromDirectionsResponse(prev, lngLat, false); + } else { + addSegmentFromStraightLine(prev, lngLat, false); + } + prev = lngLat; } - prev = lngLat; + setTimeout(() => animationService.readdRunToMap(currentRun), 100); + } + catch { + currentRun = undefined; } - setTimeout(() => animationService.readdRunToMap(currentRun), 100); } function loadRun(): void { @@ -268,12 +282,14 @@ function removeLastSegment(): void { removeLastElement.classList.add('slide-out'); removeLastElement.setAttribute('aria-hidden', 'true'); } + preferenceService.saveLastRun(runToJson(currentRun)); } function clearRun(): void { while (currentRun) { removeLastSegment(); } + preferenceService.saveLastRun(runToJson(currentRun)); } function updateLengthElement(): void { diff --git a/src/preference-service.ts b/src/preference-service.ts index 3c153aa..254d900 100644 --- a/src/preference-service.ts +++ b/src/preference-service.ts @@ -10,6 +10,7 @@ export class PreferenceService { private USE_METRIC_KEY = 'runmap-use_metric'; private FOLLOW_ROADS_KEY = 'runmap-follow_roads'; private MAP_STYLE_KEY = 'runmap-map_style'; + private LAST_RUN_KEY = 'runmap-last_run'; public getLastOrDefaultFocus(): MapFocus { let initialPosition = JSON.parse(localStorage.getItem(this.LAST_FOCUS_KEY)) as MapFocus; @@ -55,6 +56,14 @@ export class PreferenceService { public saveMapStyle(value: string) { this.saveStringPreference(this.MAP_STYLE_KEY, value); } + + public getLastRun(): string { + return this.loadStringPreference(this.LAST_RUN_KEY, "{}"); + } + + public saveLastRun(value: string) { + this.saveStringPreference(this.LAST_RUN_KEY, value); + } public getHasAcknowledgedHelp(): boolean { return this.loadBooleanPreference(this.STORAGE_NOTICE_KEY); From e95be8b9017e9322e5f78283f4e67e9be9be058d Mon Sep 17 00:00:00 2001 From: cukmekerb Date: Tue, 14 Dec 2021 00:44:51 -0800 Subject: [PATCH 04/11] prepare everything to save/load from files --- public/index.html | 4 ++-- public/styles.css | 6 +++++- src/index.ts | 29 +++++++++++++++++++++-------- 3 files changed, 28 insertions(+), 11 deletions(-) diff --git a/public/index.html b/public/index.html index 23e7b02..5fc7c7c 100644 --- a/public/index.html +++ b/public/index.html @@ -72,12 +72,12 @@
  • -
  • -
    • diff --git a/public/styles.css b/public/styles.css index e83c708..6484e1a 100644 --- a/public/styles.css +++ b/public/styles.css @@ -26,6 +26,10 @@ body { user-select: none; } +.hidden { + display: none; +} + #menu-container { top: 12px; left: 12px; @@ -241,4 +245,4 @@ body { #settings-pane { width: 200px; } -} \ No newline at end of file +} diff --git a/src/index.ts b/src/index.ts index 8411c8c..73358a3 100644 --- a/src/index.ts +++ b/src/index.ts @@ -73,7 +73,7 @@ map.on('load', () => { 'bottom-right'); jsonToRun(preferenceService.getLastRun()); - if (currentRun !== undefined) showRemoveLast(); + if (currentRun !== undefined) showRunButtons(); }); // click or tap @@ -97,10 +97,20 @@ map.on('style.load', () => { animationService.readdRunToMap(currentRun); }); -function showRemoveLast(): void { +function showRunButtons(): void { removeLastElement.classList.remove('slide-out'); removeLastElement.classList.add('slide-in'); removeLastElement.setAttribute('aria-hidden', 'false'); + saveRunElement.classList.remove('hidden'); + clearRunElement.classList.remove('hidden'); +} + +function hideRunButtons(): void { + removeLastElement.classList.remove('slide-in'); + removeLastElement.classList.add('slide-out'); + removeLastElement.setAttribute('aria-hidden', 'true'); + saveRunElement.classList.add('hidden'); + clearRunElement.classList.add('hidden'); } function addNewPoint(e: MapMouseEvent): void { @@ -110,7 +120,7 @@ function addNewPoint(e: MapMouseEvent): void { ); start.setMarker(addMarker(e.lngLat, true)); currentRun = new CurrentRun(start); - showRemoveLast(); + showRunButtons(); updateLengthElement(); } else { let prev = currentRun.getLastPosition(); @@ -172,7 +182,7 @@ function runToJson(run: CurrentRun): string { return JSON.stringify(runJSON); } -function jsonToRun(json: string) { +function jsonToRun(json: string): boolean { try { let runJSON = JSON.parse(json); @@ -191,14 +201,19 @@ function jsonToRun(json: string) { prev = lngLat; } setTimeout(() => animationService.readdRunToMap(currentRun), 100); + return true; } - catch { + catch (err) { currentRun = undefined; + console.log(err); + return false; } } function loadRun(): void { // TODO + // we can check the reurn value of jsonToRun in order to check if the load was successful. + // if it was not, display an error onscreen } function setupUserControls(): void { @@ -278,9 +293,7 @@ function removeLastSegment(): void { currentRun.start.marker.remove(); updateLengthElement(); currentRun = undefined; - removeLastElement.classList.remove('slide-in'); - removeLastElement.classList.add('slide-out'); - removeLastElement.setAttribute('aria-hidden', 'true'); + hideRunButtons(); } preferenceService.saveLastRun(runToJson(currentRun)); } From f5449110da3404ce04b4553bd0195fb54b421a2e Mon Sep 17 00:00:00 2001 From: cukmekerb Date: Tue, 14 Dec 2021 00:46:57 -0800 Subject: [PATCH 05/11] update changelog and readme to reflect save/load mechanisms --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 490898f..1af2c37 100644 --- a/README.md +++ b/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/something/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 From df5fc853187510b741cecb4581c479ecbdc6a5fd Mon Sep 17 00:00:00 2001 From: cukmekerb Date: Wed, 15 Dec 2021 21:03:59 -0800 Subject: [PATCH 06/11] downloading of runs --- src/index.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/index.ts b/src/index.ts index 73358a3..23ec664 100644 --- a/src/index.ts +++ b/src/index.ts @@ -210,6 +210,18 @@ function jsonToRun(json: string): boolean { } } +function downloadRun(): void { + let run = runToJson(currentRun); + let file = new Blob([run], { + type: "application/json" + }); + let url = URL.createObjectURL(file); + let link = document.createElement("a"); + link.href = url; + link.download = "currentRun.runmap"; + link.click(); +} + function loadRun(): void { // TODO // we can check the reurn value of jsonToRun in order to check if the load was successful. @@ -234,6 +246,7 @@ function setupUserControls(): void { followRoadsElement.onclick = () => closeMenuAction(toggleFollowRoads); clearRunElement.onclick = () => closeMenuAction(clearRun); loadRunElement.onclick = () => closeMenuAction(loadRun); + saveRunElement.onclick = () => closeMenuAction(downloadRun); const id = preferenceService.getMapStyle(); setSelectedMapToggleStyles(document.getElementById(id) as HTMLElement); From a1256824db865951838fdc862b93f1e33a56bf53 Mon Sep 17 00:00:00 2001 From: cukmekerb Date: Wed, 15 Dec 2021 22:30:19 -0800 Subject: [PATCH 07/11] run upload UI (non-functional) --- public/about.html | 5 +++- public/index.html | 15 +++++++++++ public/styles.css | 67 +++++++++++++++++++++++++++++++++++++++++++++++ src/index.ts | 24 ++++++++++++++--- 4 files changed, 106 insertions(+), 5 deletions(-) diff --git a/public/about.html b/public/about.html index 847a34f..bc5a640 100644 --- a/public/about.html +++ b/public/about.html @@ -98,6 +98,9 @@

  • runmap-map_style: The map style visual you prefer to use.
    • +
  • + runmap-last_run: The last route you plotted. +

    • @@ -129,4 +132,4 @@

    - \ No newline at end of file + diff --git a/public/index.html b/public/index.html index 5fc7c7c..73b34f4 100644 --- a/public/index.html +++ b/public/index.html @@ -92,6 +92,21 @@ +
    +
    +

    + Load a run +

    +
    + + + drag a file or click here + +
    + +
    +
    +
    diff --git a/public/styles.css b/public/styles.css index 6484e1a..32f71f0 100644 --- a/public/styles.css +++ b/public/styles.css @@ -100,6 +100,73 @@ 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: 100%; + height: 100%; + outline: none; + opacity: 0; +} + +#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); diff --git a/src/index.ts b/src/index.ts index 23ec664..df08820 100644 --- a/src/index.ts +++ b/src/index.ts @@ -39,6 +39,9 @@ let menuElement = document.getElementById('menu-toggle') as HTMLElement; let settingsElement = document.getElementById('settings-pane') as HTMLElement; let closeElement = document.getElementById('close-settings') as HTMLElement; let scrimElement = document.getElementById('settings-scrim') as HTMLElement; +let uploadContainer = document.getElementById('upload-container') as HTMLElement +let uploadForm = document.getElementById('upload-form') as HTMLElement; +let runInput = document.getElementById('run-input') as HTMLInputElement; let toggleUnitsElement = document.getElementById('toggle-units') as HTMLElement; let followRoadsElement = document.getElementById('follow-roads') as HTMLElement; let clearRunElement = document.getElementById('clear-run') as HTMLElement; @@ -222,6 +225,12 @@ function downloadRun(): void { link.click(); } +function showUploadForm(): void { + closeMenu(false); + uploadContainer.classList.add("showing-form"); + uploadContainer.setAttribute('aria-hidden', 'false'); +} + function loadRun(): void { // TODO // we can check the reurn value of jsonToRun in order to check if the load was successful. @@ -238,14 +247,14 @@ function setupUserControls(): void { lengthElement.onclick = toggleDistanceUnits; menuElement.onclick = openMenu; - closeElement.onclick = closeMenu; - scrimElement.onclick = closeMenu; + closeElement.onclick = () => closeMenu(); + scrimElement.onclick = () => closeMenu(); toggleUnitsElement.onclick = () => closeMenuAction(toggleDistanceUnits); setFollowRoads(followRoads); followRoadsElement.onclick = () => closeMenuAction(toggleFollowRoads); clearRunElement.onclick = () => closeMenuAction(clearRun); - loadRunElement.onclick = () => closeMenuAction(loadRun); + loadRunElement.onclick = showUploadForm; saveRunElement.onclick = () => closeMenuAction(downloadRun); const id = preferenceService.getMapStyle(); @@ -253,6 +262,10 @@ function setupUserControls(): void { streetStyleElement.onclick = () => closeMenuAction(() => setSelectedMapToggleStyles(streetStyleElement)); satelliteStyleElement.onclick = () => closeMenuAction(() => setSelectedMapToggleStyles(satelliteStyleElement)); darkStyleElement.onclick = () => closeMenuAction(() => setSelectedMapToggleStyles(darkStyleElement)); + + runInput.onchange = () => { + runInput.parentElement.querySelector("span").innerText = runInput.files[0].name; + } } function closeMenuAction(fn: () => void) { @@ -346,9 +359,12 @@ function openMenu() { scrimElement.classList.add('scrim-shown'); } -function closeMenu() { +function closeMenu(hideForm: boolean = true) { settingsElement.classList.remove('settings-open'); settingsElement.setAttribute('aria-hidden', 'true'); + if (!hideForm) return; + uploadContainer.classList.remove("showing-form"); + uploadContainer.setAttribute('aria-hidden', 'true'); scrimElement.classList.remove('scrim-shown'); scrimElement.classList.add('scrim-hidden'); } From ba6037319aecbe0293c7a3032c585290a5c18611 Mon Sep 17 00:00:00 2001 From: cukmekerb Date: Sun, 19 Dec 2021 20:19:19 -0800 Subject: [PATCH 08/11] working run uploads --- public/index.html | 2 +- public/styles.css | 23 ++++++++++------------- src/index.ts | 25 +++++++++++++++++-------- 3 files changed, 28 insertions(+), 22 deletions(-) diff --git a/public/index.html b/public/index.html index 73b34f4..f5b5c43 100644 --- a/public/index.html +++ b/public/index.html @@ -140,7 +140,7 @@

    Click/tap anywhere on the map to add points in order to map out your run! See the about page to learn more. - +