Merge branch 'master' into sarahdev

src/main/webapp/error-page.html

@@ -12,7 +12,6 @@
     <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBaBCxBuGqZx0IGQ4lb9eKrICwU8Rduz3c"></script>
   </head>
 <nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
-     <!--<a class="navbar-brand" href="index.html">N N</a> -->
     <img src="images/NNlogo.png" alt="Neighborhood Nature logo" id="navbar-logo" class="logo">
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>

src/main/webapp/feedback.html

@@ -7,7 +7,6 @@
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
   </head>
 <nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
-     <!--<a class="navbar-brand" href="index.html">N N</a> -->
     <img src="images/NNlogo.png" alt="Neighborhood Nature logo" id="navbar-logo" class="logo">
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>

src/main/webapp/generated-routes.html

@@ -12,7 +12,6 @@
 
   </head>
   <nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
-     <!--<a class="navbar-brand" href="index.html">N N</a> -->
     <img src="images/NNlogo.png" alt="Neighborhood Nature logo" id="navbar-logo" class="logo">
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>

src/main/webapp/index.html

@@ -12,7 +12,6 @@
 
   </head>
   <nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
-    <!--<a class="navbar-brand" href="index.html">N N</a> -->
     <img src="images/NNlogo.png" alt="Neighborhood Nature logo" id="navbar-logo" class="logo">
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>

src/main/webapp/route-script.js

@@ -280,46 +280,22 @@ function createCheckBoxes(waypointChoices) {
 
   const waypointChoiceEl = document.getElementById('select-points');
   for (let i = 0; i < waypointChoices.length; i++) {
-      waypointChoiceEl.appendChild(createCheckBoxSet(waypointChoices[i], FILL_COLORS[i % MAX_WAYPOINTS]));
+      for (let observation of waypointChoices[i]) {
+          waypointChoiceEl.appendChild(createCheckBoxEl(observation));
+      }
   }
   waypointChoiceEl.appendChild(submitEl);
 }
 
-/** Creates an element that has Name of set and checkpoints of coordinates */
-function createCheckBoxSet(set, color) {
-  const setName = set[0].label;
-  const returnDiv = document.createElement('div');
-  returnDiv.setAttribute('class', 'checkbox-set');
-  const CheckBoxTitle = document.createElement('h4');
-  CheckBoxTitle.innerText = setName;
-  const colorbox = createColorBoxElem(color);
-  returnDiv.appendChild(CheckBoxTitle);
-  returnDiv.appendChild(colorbox);
-  // create collapse element
-  const collapseDiv = document.createElement('div');
-  collapseDiv.setAttribute('class', 'collapse');
-  collapseDiv.setAttribute('id', setName + "more");
-  //intialize letter 
-  let letter = 'A';
-  set.forEach((choice,index)=>{
-      if (index === CHOICE_AT_ONCE){ //create a new div that appears with "seemore button"
-        //append a See More button
-        seeMoreButton = createSeeMore(setName);
-        //add see more button to document
-        returnDiv.appendChild(seeMoreButton);
-        collapseDiv.appendChild(createCheckBoxEl(choice, letter));
-        //only add collapse div if needed
-        returnDiv.appendChild(collapseDiv);
-
-      } else if (index > CHOICE_AT_ONCE){//option will be seen in see more 
-        collapseDiv.appendChild(createCheckBoxEl(choice, letter));
-      } else { //visible choices.
-        returnDiv.appendChild(createCheckBoxEl(choice, letter));
-        //letter = String.fromCharCode(letter.charCodeAt(0) + 1); update the marker letter label to the next letter
-      }
-      letter = String.fromCharCode(letter.charCodeAt(0) + 1);
-  });
-  return returnDiv;
+/** Creates an checkbox element with label */
+function createCheckBoxEl(choice){
+    const checkBoxEl = document.createElement('input');
+    checkBoxEl.setAttribute("type", "checkbox");
+    const checkBoxValue = JSON.stringify(choice);
+    checkBoxEl.setAttribute("value", checkBoxValue);
+    checkBoxEl.setAttribute("name", checkBoxValue);
+    checkBoxEl.setAttribute("class", "checkbox");
+    return checkBoxEl;
 }
 
 /**
@@ -333,23 +309,6 @@ function createColorBoxElem(color) {
   return colorbox;
 }
 
-/** Creates an checkbox element with label */
-function createCheckBoxEl(choice, label){
-    const checkBoxEl = document.createElement('input');
-    checkBoxEl.setAttribute("type", "checkbox");
-    const checkBoxValue = JSON.stringify(choice);
-    checkBoxEl.setAttribute("value", checkBoxValue);
-    checkBoxEl.setAttribute("name", checkBoxValue);
-    checkBoxEl.setAttribute("class", "checkbox");
-    const checkBoxLabel = document.createElement('label');
-    checkBoxLabel.innerText = label;
-    const labelAndBox = document.createElement('div');
-    labelAndBox.addEventListener('click', catchCheckboxErrors);
-    labelAndBox.appendChild(checkBoxEl);
-    labelAndBox.appendChild(checkBoxLabel);
-    return labelAndBox;
-}
-
 /**
  * Catch errors when the user selects too many checkboxes.
  */
@@ -401,6 +360,7 @@ function calcRoute(directionsService, directionsRenderer, start, end, waypoints)
     });
 }
 
+/** Create a new p element with the given text and append it to the given parent. */
 function addNewLegendElem(parent, text) {
     let newElem = document.createElement('p');
     newElem.textContent = text;
@@ -415,45 +375,65 @@ async function createWaypointLegend(route, waypointsWithLabels) {
     let legend = document.getElementById('legend');
     let marker = 'A';
     addNewLegendElem(legend, `${marker}: start`);
-    let i;
-    let totalDistance = 0;
-    let totalDuration = 0;
-    // For each leg of the route, find the label of the end point
-    // and add it to the page.
-    for (i = 0; i < route.legs.length - 1; i++) {
-        let pt = route.legs[i].end_location;
-        totalDistance += route.legs[i].distance.value;
-        totalDuration += route.legs[i].duration.value;
-        let label = getInfoFromLatLng(pt, waypointsWithLabels, 'label');
-        let species = getInfoFromLatLng(pt, waypointsWithLabels, 'species');
+
+    const waypointOrder = route.waypoint_order;
+
+    // For each waypoint, in the order given by the route, add a new legend elem with label/species
+    for (let idx of waypointOrder) {
+        let waypoint = waypointsWithLabels[idx];
         marker = String.fromCharCode(marker.charCodeAt(0) + 1);
-        addNewLegendElem(legend, `${marker}: ${label} (${species})`);
+        addNewLegendElem(legend, `${marker}: ${waypoint.label} (${waypoint.species})`);
     }
-    let end = route.legs[route.legs.length - 1].end_location;
-    totalDistance += route.legs[route.legs.length - 1].distance.value;
-    totalDuration += route.legs[route.legs.length - 1].duration.value;
+
     marker = String.fromCharCode(marker.charCodeAt(0) + 1);
     addNewLegendElem(legend, `${marker}: end`);
-    addDistanceTimeToLegend(legend, totalDistance, totalDuration);
-}
 
-/**
- * Given the total distance and time of a route, convert the numbers to more useful metrics
- * and add them to the legend to display to the user.
- */
-function addDistanceTimeToLegend(legend, totalDistance, totalDuration) {
-    // Convert totalDistance and totalDuration to more helpful metrics.
-    totalDistance = Math.round(convertMetersToMiles(totalDistance) * 10) / 10;
-    totalDuration = Math.round(convertSecondsToHours(totalDuration) * 10) / 10;
+    // Add route distance to legend
+    let totalDistance = getRouteDistance(route);
+    addNewLegendElem(legend, `Total Route Distance: ${totalDistance} miles`);
+
+    // Add route duration to legend
+    let totalDuration = getRouteDuration(route);
     let durationMetric = 'hours';
     if (totalDuration < 1) {
         totalDuration = Math.round(convertHoursToMinutes(totalDuration) * 10) / 10;
         durationMetric = 'minutes'
     }
-    addNewLegendElem(legend, `Total Route Distance: ${totalDistance} miles`);
     addNewLegendElem(legend, `Total Route Duration: ${totalDuration} ${durationMetric}`);
 }
 
+/**
+ * Calculate and return the total distance of a route in miles.
+ */
+function getRouteDistance(route) {
+    let totalDistance = 0;
+     for (i = 0; i < route.legs.length - 1; i++) {
+        let pt = route.legs[i].end_location;
+        totalDistance += route.legs[i].distance.value;
+    }
+    let end = route.legs[route.legs.length - 1].end_location;
+    totalDistance += route.legs[route.legs.length - 1].distance.value
+    /* Convert distance to a more helpful metric. */
+    return Math.round(convertMetersToMiles(totalDistance) * 10) / 10;
+}
+
+/**
+ * Calculate and return the total duration of a route in hours.
+ */
+function getRouteDuration(route) {
+    let totalDuration = 0;
+    // For each leg of the route, find the label of the end point
+    // and add it to the page.
+    for (i = 0; i < route.legs.length - 1; i++) {
+        let pt = route.legs[i].end_location;
+        totalDuration += route.legs[i].duration.value;
+    }
+    let end = route.legs[route.legs.length - 1].end_location;
+    totalDuration += route.legs[route.legs.length - 1].duration.value;
+    /* Convert time to a more helpful metric. */
+    return Math.round(convertSecondsToHours(totalDuration) * 10) / 10;
+}
+
 /**
  * Convert a distance in meters to miles.
  */
@@ -477,28 +457,6 @@ function convertHoursToMinutes(time) {
     return time / CONVERSION;
 }
 
-
-/**
- * Given a Google Maps LatLng object and JSON containing waypoint coords with labels, 
- * return the label matching the given LatLng object.
- */
-function getInfoFromLatLng(pt, waypointsWithLabels, infoRequested) {
-    //for (let [label, waypoints] of waypointsWithLabels.entries()) {
-    for (let waypoint of waypointsWithLabels) {
-        // Calculate the difference between the lat/long of the points and 
-        // check if its within a certain range.
-        //for (let waypoint of waypoints) {
-        let latDiff = Math.abs(waypoint.latlng.lat() - pt.lat());
-        let lngDiff = Math.abs(waypoint.latlng.lng() - pt.lng());
-        const range = 0.001;
-        if (latDiff < DIFF && lngDiff < DIFF) {
-            return waypoint[`${infoRequested}`];
-        }
-        //}
-    }
-    return '';
-}
-
 /**
  * Convert waypoint clusters in JSON form returned by servlet to a list of objects containing Google Maps LatLng objects
  * in place of coordinates.
@@ -533,7 +491,6 @@ function convertWaypointstoLatLng(waypoints) {
  */
 async function getWaypoints() {
     let res = await fetch('/query');
-
     // Catch HTTP status error codes
     if (res.status === SC_REQUEST_ENTITY_TOO_LARGE) {
         alert('Too many waypoints in text input. Please try again.');
@@ -583,6 +540,7 @@ async function writeToAssociatedText(){
     associatedTextEl.innerText = "You entered: " + storedtext;
 }
 
+/* Check to see if we're running on Node.js or in a browser for tests */
 try {
     module.exports.addNewLegendElem = addNewLegendElem;
     module.exports.createColorBoxElem = createColorBoxElem;
@@ -592,15 +550,3 @@ try {
 } catch(error) {
     console.log("Not exporting code from this script")
 }
-
-/**
- * Creates see more/see less button linked to id = setName + 'more'
- */
-function createSeeMore(setName){
-    seeMoreButton = document.createElement('button');
-    seeMoreButton.setAttribute('class', 'btn btn-link');
-    seeMoreButton.setAttribute('type', 'button');
-    seeMoreButton.setAttribute('data-toggle', 'collapse');
-    seeMoreButton.setAttribute('data-target', "#" + setName + "more");
-    return seeMoreButton;
-}

src/main/webapp/storedroutes.html

@@ -13,7 +13,6 @@
     <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBaBCxBuGqZx0IGQ4lb9eKrICwU8Rduz3c"></script>
   </head>
   <nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
-   <!--<a class="navbar-brand" href="index.html">N N</a> -->
     <img src="images/NNlogo.png" alt="Neighborhood Nature logo" id="navbar-logo" class="logo">
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>

src/main/webapp/style.css

@@ -69,7 +69,7 @@ html,body { height:100%; }
   flex-grow: 1;
 }
 
-.checkbox-set {
+.checkbox {
     display: none;
 }