replace email route with route text copy popup

src/chartConfig.js

@@ -161,7 +161,9 @@ function updateChart() {
     //if (circuit && start trailhead != default start trailhead) {
     //  recalculate all distances in trailFeatures and exported route using startTrailhead as 0
     //}
-    // console.log(JSON.stringify(fullRoute));
+    // if (trailCircuit && !equalCoordinates(this.route[0].start.geometry.coordinates, trailheadFeatures[0].geometry.coordinates, false)) {
+    //     console.log(this.route);
+    // }
     if (this.trailElevationChart) this.trailElevationChart.destroy();
     const ctx = document.getElementById('elevationProfile').getContext("2d");
     let distances = [], elevations = [], days = [], trailheads = [], campsites = [];

src/exportRoute.js

@@ -69,7 +69,7 @@ function updateGeoJSON() {
     }
     exportedRoute = calculateAdjustedDistance(exportedRoute, fullRoute);
     exportedRoute.features.push(fullRoute); //add the full route (not broken into individual days) to the exported file
-    //updateChart(fullRoute);
+    updateRouteText();
     updateChart();
     updateMap();
 }
@@ -84,7 +84,6 @@ function equalCoordinates(coordinate1, coordinate2, checkDistances) {
 }
 
 function calculateAdjustedDistance(exportedRoute, fullRoute) {
-    //features in exportedRoute are pointing to the same objects in trail. exportedRoute needs to be a deep copy of trail feature so adding adjusted distance doesnt affect trail
     if (routeLength <= 0) return exportedRoute;
     const startDistance = fullRoute.geometry.coordinates[0][3];
     const wrapAroundDistance = this.isPositiveDirection ? trailFeature.geometry.coordinates[trailFeature.geometry.coordinates.length - 1][3] - fullRoute.geometry.coordinates[0][3] : fullRoute.geometry.coordinates[fullRoute.geometry.coordinates.length - 1][3];
@@ -194,14 +193,31 @@ function trimCoordinates(featureCollection) {
     return featureCollection;
 }
 
-// Share route via email
-function emailRoute() {
-    if (exportedRoute) {
-        const subject = trailFeature.properties.title + " Itinerary";
-        let message = "";
-        for (let i = 0; i < this.route.length; i++) {
-            message += this.route[i].date.toLocaleDateString('en-us', { year:"2-digit", month:"numeric", day:"numeric"}) + ": " + Math.round(this.route[i].length * distanceConstant * 10) / 10 + " " + distanceUnit + " from " + this.route[i].start.properties.title + " to " + this.route[i].end.properties.title + '%0D%0A';
-        }
-        window.open("mailto:?subject=" + subject + "&body=" + message);
+function updateRouteText() {
+    let message = "";
+    for (let i = 0; i < this.route.length; i++) {
+        message += this.route[i].date.toLocaleDateString('en-us', { year:"2-digit", month:"numeric", day:"numeric"}) + ": " + Math.round(this.route[i].length * distanceConstant * 10) / 10 + " " + distanceUnit + " from " + this.route[i].start.properties.title + " to " + this.route[i].end.properties.title + '\n\n';
+    }
+    routeText.innerText = message;
+}
+
+async function copyContent() {
+    try {
+        await navigator.clipboard.writeText(routeText.value);
+        console.log('Content copied to clipboard');
+    } catch (err) {
+        console.error('Failed to copy: ', err);
     }
-}
+}
+
+// Share route via email
+// function emailRoute() {
+//     if (exportedRoute) {
+//         const subject = trailFeature.properties.title + " Itinerary";
+//         let message = "";
+//         for (let i = 0; i < this.route.length; i++) {
+//             message += this.route[i].date.toLocaleDateString('en-us', { year:"2-digit", month:"numeric", day:"numeric"}) + ": " + Math.round(this.route[i].length * distanceConstant * 10) / 10 + " " + distanceUnit + " from " + this.route[i].start.properties.title + " to " + this.route[i].end.properties.title + '%0D%0A';
+//         }
+//         //window.open("mailto:?subject=" + subject + "&body=" + message);
+//     }
+// }

src/index.html

@@ -191,7 +191,7 @@ <h4 class="modal-title" id="myModalLabel">How It Works</h4>
                 <div class="modal-dialog" role="document">
                     <div class="modal-content">
                         <div class="modal-header">
-                            <h2 class="modal-title" id="exampleModalLabel"><h2>More Route Options</h2>
+                            <h2 class="modal-title" id="exampleModalLabel">More Route Options</h2>
                         </div>
                         <div class="modal-body">
                             <div class="exclude-sites-input">
@@ -228,7 +228,22 @@ <h1 id="routeTitle" contentEditable="true" onkeypress="return (this.innerText.le
                 <img id="routeTitleIcon" src="./resources/pencil.svg" alt="*">
                 <div class="saveButtons">
                     <button id="exportRoute" class="btn btn-sm btn-primary" onclick="exportGeoJSON()">Download</button>
-                    <button id="shareRoute" class="btn btn-sm btn-outline-primary" onclick="emailRoute()">Share</button>
+                    <button id="shareRoute" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#share">Share</button>
+                    <div class="modal fade" id="share" tabindex="-1" role="dialog">
+                        <div class="modal-dialog modal-dialog-scrollable modal-lg">
+                            <div class="modal-content">
+                                <div class="modal-header">
+                                    <h2 class="modal-title" id="exampleModalLabel">Share Route</h2>
+                                </div>
+                                <div class="select-trail-modal modal-body">
+                                    <div class="share-route">
+                                        <p id="routeText"></p>
+                                        <button type="button" class="btn btn-primary btn-lg" onclick="copyContent()">Copy</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
             <table class="table route-table table-hover table-striped" id="table">

src/loadTrail.js

@@ -239,7 +239,7 @@ function calculateLength(lineString) {
     lineString[0][3] = 0;
     for (let i = 1; i < lineString.length; i++) {
         result += haversineDistance(lineString[i-1][1],lineString[i-1][0],lineString[i-1][2],
-                                     lineString[i  ][1],lineString[i  ][0],lineString[i  ][2]);
+                                    lineString[i  ][1],lineString[i  ][0],lineString[i  ][2]);
         lineString[i][3] = result;
     }
     return result;

src/routeGeneration.js

@@ -37,6 +37,7 @@ const loopDirectionLabel = document.getElementsByClassName('loop-direction-label
 const selectTrail = document.getElementById('select-trail');
 const logo = document.getElementById('logo').addEventListener("click", refresh);
 const includeDispersedCampsites = document.getElementById('toggle-dispersed');
+const routeText = document.getElementById('routeText');
 
 populateSelectTrail();
 reset();