index.html.in: replace a few tabs with spaces

[charm-bypass.git] / index.html.in

diff --git a/index.html.in b/index.html.in
index 5ab677672fbb658b1d13170ffb5a6639237ee794..763e2694220eae446b6e19c65551ca1600f1f2f6 100644 (file)
--- a/index.html.in
+++ b/index.html.in
@@ -12,6 +12,11 @@
     </title>
 
     <style>
+      body {
+        /* For consistency with the SVG */
+        font-family: sans-serif;
+      }
+
       fieldset {
         margin-top: 1em;
         padding-top: 1em;
@@ -186,11 +191,9 @@
       <h2>it's transit equity y'all</h2>
 
       <p>
-        <em>Hint:</em> If you think the driver or fare inspector will
-        actually check it, the daily security code is the same on a
-        $2.00 BaltimoreLink ticket as it is on a $9.00 MARC Train
-        ticket. It's also the same on your friend's phone, or for
-        anyone else in Maryland that day.
+        <em>Hint:</em> If they start checking it, the daily security
+        code stays the same all day and is the same on a $2 bus ticket
+        as it is on a $9 MARC ticket. It's also the same on every phone.
       </p>
 
       <form>
@@ -247,7 +250,7 @@
             <label for="zone2">Zone 2</label>
           </div>
           <div>
-            <input type="radio" required
+            <input type="radio" required checked
                    name="zone"
                    id="zone3"
                    value="Zone 3" />
@@ -290,7 +293,7 @@
 
           <p>Origin:</p>
           <div>
-            <input type="radio" required
+            <input type="radio" required checked
                    name="origin"
                    id="origin1"
                    value="BAL" />
@@ -390,7 +393,7 @@
             <label for="destination6">Seabrook (Penn Line)</label>
           </div>
           <div>
-            <input type="radio" required
+            <input type="radio" required checked
                    name="destination"
                    id="destination7"
                    value="WAS" />
@@ -680,8 +683,7 @@
        * Compute the zone (string) for the given origin/destination pair.
        *
        * If we don't know it or if you chose in invalid pair (destination
-       * not on the same line as your origin?) then the empty string is
-       * returned.
+       * not on the same line as your origin?) then null is returned.
        */
       function compute_marc_zone(src, dest) {
 
@@ -692,9 +694,12 @@
           BAL_SEB: 3,
           BAL_WAS: 4,
           BAL_WBL: 1,
-          BCA_CPK_: 3,
-          BCA_WAS_: 4,
-          BWI_BWE: 1,
+          BCA_CPK: 3,
+          BCA_WAS: 4,
+          BWE_BWI: 1,
+          BWE_SEB: 1,
+          BWE_WAS: 2,
+          BWE_WBL: 2,
           BWI_WAS: 3,
           BWI_WBL: 1
         };
@@ -729,7 +734,7 @@
           case 4:
             return "Four Zone";
           default:
-            return "";
+            return null;
         }
       }
 
@@ -749,7 +754,8 @@
         const dest = params.get("destination");
 
         if (src && dest) {
-          /* MARC Train */
+          /* MARC Train. We can assume that compute_marc_zone() doesn't
+           * return null because that's part of our form validation. */
           const zone = compute_marc_zone(src, dest);
           set_zone(zone);
         }
@@ -804,6 +810,38 @@
         menu.style.display = "none";
       }
 
+      /**
+       * Validate the MARC form's origin/destination.
+       *
+       * We don't want the user to be able to choose a pair of stops that
+       * aren't actually connected by the same MARC line. If we don't have
+       * zone information for the (origin,destination) pair, that indicates
+       * that it's probably not a valid choice; otherwise I would have
+       * filled in the information from the CharmPass app already.
+       */
+      function validate_origin_destination(event) {
+        const origins = document.getElementsByName("origin");
+        const destinations = document.getElementsByName("destination");
+
+        let src = null;
+        let dest = null;
+        origins.forEach((x) => { if (x.checked) src = x; })
+        destinations.forEach((x) => {
+          if (x.checked) dest = x;
+
+          /* clear all errors before possibly setting one */
+          x.setCustomValidity('');
+        })
+
+        if (src.value === dest.value) {
+          let err = "Origin and destination are the same!";
+          dest.setCustomValidity(err);
+        }
+        else if (compute_marc_zone(src.value, dest.value) === null) {
+          let err = "Origin and destination are on different lines!";
+          dest.setCustomValidity(err);
+        }
+      }
 
       /*****************************************************/
       /* Add event handlers for all of the functions above */
@@ -848,6 +886,21 @@
         /* Swap colors when the screen is tapped */
         document.body.addEventListener("click", swap_day_night);
       }
+      else {
+        /* If we haven't submitted the form yet, set up change handlers
+         * for the origin/destination radio buttons that validate that
+         * the origin and destination are on the same line. */
+        document.getElementsByName("origin").forEach(
+         (x) => x.addEventListener("change", validate_origin_destination)
+        );
+        document.getElementsByName("destination").forEach(
+         (x) => x.addEventListener("change", validate_origin_destination)
+        );
+
+       /* Also do it when the page loads, because firefox likes to
+        * remember your selection even after the page reloads. */
+        window.addEventListener("load", validate_origin_destination);
+      }
 
     </script>
   </body>