index.html.in: handle the MARC Train ticket size and zone setting

diff --git a/index.html.in b/index.html.in
index 69d5d31491ed0bdd945342471a73769ea410c9e1..96dd04a437b2dab5ae75e188045850419311e235 100644 (file)
--- a/index.html.in
+++ b/index.html.in
@@ -215,11 +215,11 @@
       <h2>doing transit equity whether they like it or not</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 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.
       </p>
 
       <form>
@@ -250,7 +250,7 @@
             <label for="code2">
               Daily security code (optional):
             </label>
-           <input id="code2"
+            <input id="code2"
                    name="code"
                    type="text"
                    minlength="2"
@@ -287,11 +287,11 @@
         <fieldset>
           <legend>MARC Train</legend>
 
-         <div>
+          <div>
             <label for="code3">
               Daily security code (optional):
             </label>
-           <input id="code3"
+            <input id="code3"
                    name="code"
                    type="text"
                    minlength="2"
@@ -439,12 +439,19 @@
       /************************/
       /* Set the service zone */
       /************************/
-      function set_service_zone() {
+      function set_service_zone(zone) {
+        /* We can take the zone as a parameter too; this allows
+         * us to use this function for the (computed) MARC Train
+         * zone and not just the querystring Commuter Bus zone */
         const z = document.getElementById("zone");
-
-        /* Get the "zone" from the querystring if it's there */
         const params = new URLSearchParams(document.location.search);
-        if (params.get("zone")) {
+
+        if (zone) {
+          z.textContent = zone;
+          z.style.display = "block"; /* It's hidden by default */
+        }
+        else if (params.get("zone")) {
+          /* Get the "zone" from the querystring if it's there */
           z.textContent = params.get("zone");
           z.style.display = "block"; /* It's hidden by default */
         }
@@ -459,11 +466,11 @@
       function resize_ticket() {
         /* Get the "servicename" from the querystring if it's there */
         const params = new URLSearchParams(document.location.search);
-        if (params.get("servicename") == "Commuter Bus") {
-          const tbg = document.getElementById("ticketbg");
-          const t = document.getElementById("ticket");
-          const sn = document.getElementById("servicename");
+        const tbg = document.getElementById("ticketbg");
+        const t = document.getElementById("ticket");
+        const sn = document.getElementById("servicename");
 
+        if (params.get("servicename") == "Commuter Bus") {
           /* The top of the background is initially at y=246.859, and
            * we scale it by a factor of 1.12 to y=276.482 for a change
            * of 29.623. So after we scale it, we translate it upwards
@@ -471,7 +478,9 @@
           tbg.setAttribute("transform", "translate(0 -29.623) scale(1 1.12)");
 
           /* Now translate the entire ticket up by the magic amount, 1/5
-           * of the size change we made to the background. */
+           * of the size change we made to the background. This ratio
+           * was found by measuring pixels in side-by-side screenshots
+           * of BaltimoreLink and Commuter Bus tickets. */
           t.setAttribute("transform", "translate(0 -9.33)");
 
           /* More magic numbers discovered by comparing the two
@@ -479,7 +488,11 @@
           sn.setAttribute("transform", "translate(0 64.28)");
         }
         else if (params.get("servicename") == "MARC Train") {
-          /* hi */
+          /* insane tricks are explained above */
+          tbg.setAttribute("transform",
+                           "translate(0 -72.378) scale(1 1.2932)");
+          t.setAttribute("transform", "translate(0 -67.17)");
+          sn.setAttribute("transform", "translate(0 131.0)");
         }
 
         /* Otherwise, leave it alone. The SVG was designed with the
@@ -684,8 +697,7 @@
           const dest = params.get("destination");
           const zone = compute_marc_zone(src, dest);
 
-          /* TODO: actually set the zone */
-          alert(zone);
+          set_service_zone(zone);
         }
       }
 
@@ -744,8 +756,8 @@
         /* Set the ticket expiration date/time upon page load */
         window.addEventListener("load", set_ticket_expiry);
 
-       /* Set the MARC Train zone, if applicable */
-       window.addEventListener("load", set_marc_zone);
+        /* Set the MARC Train zone, if applicable */
+        window.addEventListener("load", set_marc_zone);
 
         /* Swap colors when the screen is tapped */
         document.body.addEventListener("click", swap_colors);