]> gitweb.michael.orlitzky.com - charm-bypass.git/commitdiff
index.html.in: begin the menu process
authorMichael Orlitzky <michael@orlitzky.com>
Wed, 1 Nov 2023 19:09:49 +0000 (15:09 -0400)
committerMichael Orlitzky <michael@orlitzky.com>
Wed, 1 Nov 2023 19:09:49 +0000 (15:09 -0400)
The page should begin as a form that lets you select a ticket. Only
when that form is submitted should we display the ticket. This commit
starts the transition.

index.html.in

index 9f9d41dd47a8eb4e2da6dd48f7ae2fd7b68a6078..b686203bdfdc47458e09161ac7befb94ede2653d 100644 (file)
         top: 0;
         left: 0;
         height: 100%;
+
+        /* Hide everything by default. We only show it once the user has
+         * submitted the menu form */
+        display: none;
       }
 
       /* The blinking fade in/out animation for the ticket date and time */
   </head>
 
   <body>
+    <div id="menu">
+      <form>
+       <fieldset>
+         <legend>BaltimoreLink (Bus, Light Rail, Metro)</legend>
+         <input type="hidden" name="servicename" value="BaltimoreLink" />
+         <input type="submit" name="go" value="Generate Ticket" />
+       </fieldset>
+      </form>
+      <form>
+       <fieldset>
+         <legend>Commuter Bus</legend>
+         <input type="hidden" name="serviceid" value="R" />
+         <input type="hidden" name="servicename" value="Commuter Bus" />
+         <div>
+           <input type="radio" id="zone1" name="zone" value="Zone 1" />
+           <label for="zone1">Zone 1</label>
+         </div>
+         <div>
+           <input type="radio" id="zone2" name="zone" value="Zone 2" />
+           <label for="zone2">Zone 2</label>
+         </div>
+         <div>
+           <input type="radio" id="zone3" name="zone" value="Zone 3" />
+           <label for="zone3">Zone 3</label>
+         </div>
+         <div>
+           <input type="radio" id="zone4" name="zone" value="Zone 4" />
+           <label for="zone4">Zone 4</label>
+         </div>
+         <div>
+           <input type="radio" id="zone5" name="zone" value="Zone 5" />
+           <label for="zone5">Zone 5</label>
+         </div>
+
+         <input type="submit" name="go" value="Generate Ticket" />
+       </fieldset>
+      </form>
+      <form>
+       <fieldset>
+         <legend>MARC Train</legend>
+         <input type="hidden" name="serviceid" value="R" />
+         <input type="hidden" name="servicename" value="MARC Train" />
+         <input type="submit" name="go" value="Generate Ticket" />
+       </fieldset>
+      </form>
+    </div>
+
     @SVGDATA@
 
     <script>
         }
       }
 
+      /******************************************/
+      /* Display the ticket (and hide the menu) */
+      /******************************************/
+
+      function go() {
+        const svg = document.querySelector("svg");
+        const menu = document.getElementById("menu");
+        svg.style.display = "initial";
+        menu.style.display = "none";
+      }
 
       /*****************************************************/
       /* Add event handlers for all of the functions above */
       /*****************************************************/
 
-      /* Center the ticket once when the page has loaded */
-      window.addEventListener("load", center_ticket);
+      const params = new URLSearchParams(document.location.search);
+      if (params.get("go")) {
+       /* First unhide the SVG (swap it with the form) */
+        window.addEventListener("load", go);
+
+        /* Center the ticket once when the page has loaded */
+        window.addEventListener("load", center_ticket);
 
-      /* Re-center the ticket when the window is resized */
-      window.addEventListener("resize", center_ticket);
+        /* Re-center the ticket when the window is resized */
+        window.addEventListener("resize", center_ticket);
 
-      /* Set the service identifier when the page has loaded */
-      window.addEventListener("load", set_service_id);
+        /* Set the service identifier when the page has loaded */
+        window.addEventListener("load", set_service_id);
 
-      /* Set the service name when the page has loaded */
-      window.addEventListener("load", set_service_name);
+        /* Set the service name when the page has loaded */
+        window.addEventListener("load", set_service_name);
 
-      /* Set the security code text when the page has loaded */
-      window.addEventListener("load", set_code);
+        /* Set the security code text when the page has loaded */
+        window.addEventListener("load", set_code);
 
-      /* Center the security code text when the page has loaded; in
-       * particular, after we set the code. */
-      window.addEventListener("load", center_code);
+        /* Center the security code text when the page has loaded; in
+         * particular, after we set the code. */
+        window.addEventListener("load", center_code);
 
-      /* Set the ticket expiration date/time upon page load */
-      window.addEventListener("load", set_ticket_expiry);
+        /* Set the ticket expiration date/time upon page load */
+        window.addEventListener("load", set_ticket_expiry);
 
-      /* Swap colors when the screen is tapped */
-      document.body.addEventListener("click", swap_colors);
+        /* Swap colors when the screen is tapped */
+        document.body.addEventListener("click", swap_colors);
+      }
 
     </script>
   </body>