+ /**
+ * Set the ticket's expiration date and time.
+ *
+ * BaltimoreLink and MARC Train tickets expire after 90 minutes;
+ * while Commuter Bus tickets expire after 10 minutes.
+ */
+ function set_ticket_expiry() {
+ /* There are two parameters, time and date, that we store in one
+ * underlying "date" variable. */
+ const date = new Date();
+
+ /* BaltimoreLink and MARC Train */
+ let minutes = 90;
+ const params = new URLSearchParams(document.location.search);
+ if (params.get("servicename") === "Commuter Bus") {
+ /* Commuter bus tickets are only valid for ten minutes */
+ minutes = 10;
+ }
+
+ /* We use the low-level get/setTime to change the number of
+ * milliseconds since the epoch that this date represents
+ * Obviously correct, and avoids all suspicious corner cases
+ * for a few more decades. */
+ date.setTime(date.getTime() + (minutes*60*1000));
+
+ tt = document.getElementById("tickettime");
+ tt.textContent = date.toLocaleTimeString();
+
+ const td = document.getElementById("ticketdate");
+ const dateopts = {
+ day: "2-digit",
+ month: "2-digit",
+ year: "2-digit"
+ };
+ td.textContent = date.toLocaleDateString("en-US", dateopts);
+ }
+
+
+ /**
+ * Swap the day/night sky colors.
+ *
+ * We use CSS classes to keep track of the current state because
+ * it's a tiny bit cleaner than a global variable, but for some
+ * reason we can't use those same classes to actually change the
+ * color. (The classes, change, but the color doesn't.) Rather
+ * than waste time trying to explain this, we just set the "fill"
+ * attribute ourselves whenever we swap classes.
+ */
+ function swap_day_night() {
+ const sky = document.getElementById("sky");
+
+ if (sky.getAttribute("class") === "night") {
+ sky.setAttribute("fill", "#efb02f");
+ sky.setAttribute("class", "day");
+ }
+ else {
+ /* Put this case second so that the first time the
+ * screen is tapped (when there are no classes on
+ * the sky element) the color still changes. */
+ sky.setAttribute("fill", "#143b66");
+ sky.setAttribute("class", "night");
+ }
+ }
+
+
+ /**
+ * 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 null is returned.
+ */
+ function compute_marc_zone(src, dest) {
+
+ /* Sorted on the first component, then the second.
+ *
+ * Key:
+ *
+ * $6.00 => 1
+ * $7.00 => 2
+ * $8.00 => 3
+ * $9.00 => 4
+ */
+ const zone_map = {
+ BAL_BWE: 2,
+ BAL_BWI: 1,
+ BAL_HAE: 1,
+ BAL_NCR: 3,
+ BAL_SEB: 3,
+ BAL_WAS: 4,
+ BAL_WBL: 1,
+ BCA_CPK: 3,
+ BCA_WAS: 4,
+ BWE_BWI: 1,
+ BWE_HAE: 1,
+ BWE_NCR: 1,
+ BWE_SEB: 1,
+ BWE_WAS: 2,
+ BWE_WBL: 2,
+ BWI_HAE: 1,
+ BWI_NCR: 2,
+ BWI_SEB: 2,
+ BWI_WAS: 3,
+ BWI_WBL: 1,
+ FRC_WAS: 4,
+ HAE_NCR: 2,
+ HAE_SEB: 2,
+ HAE_WAS: 3,
+ HAE_WBL: 1,
+ NCR_SEB: 1,
+ NCR_WAS: 1,
+ NCR_WBL: 3,
+ SEB_WAS: 1,
+ SEB_WBL: 3,
+ WAS_WBL: 4
+ };
+
+ /* Forward direction key for zone_map */
+ const fwd = src + "_" + dest;
+
+ /* Reverse direction key for zone_map. The zone_map only
+ * has them listed in one direction, so we check both
+ * directions here. */
+ const rev = dest + "_" + src;
+
+ /* The default. Obviously wrong for when we don't
+ * have the necessary data. */
+ let zone = -1;
+
+ if (zone_map[fwd]) {
+ zone = zone_map[fwd];
+ }
+ else if (zone_map[rev]) {
+ zone = zone_map[rev];
+ }
+
+ /* Convert the number to a string */
+ switch (zone) {
+ case 1:
+ return "One Zone";
+ case 2:
+ return "Two Zone";
+ case 3:
+ return "Three Zone";
+ case 4:
+ return "Four Zone";
+ default:
+ return null;
+ }
+ }
+
+
+ /**
+ * Compute and set the zone.
+ *
+ * We can be given a zone in two ways. First, on Commuter Bus
+ * tickets, it is given explicitly via the querystring. But
+ * It can also be specified implicitly via the origin and
+ * destination on a MARC Train ticket. Here we try both and
+ * then call set_zone() with the result if something worked.
+ */
+ function compute_and_set_zone() {
+ const params = new URLSearchParams(document.location.search);
+ const src = params.get("origin");
+ const dest = params.get("destination");
+
+ if (src && dest) {
+ /* 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);
+ }
+ else if (params.get("zone")) {
+ /* Commuter Bus */
+ set_zone(params.get("zone"));
+ }
+ }
+
+
+ /**
+ * Set the origin and destination for the MARC Train if they
+ * were provided, and unhide them if so.
+ */
+ function set_marc_origin_destination() {
+ const params = new URLSearchParams(document.location.search);
+ if (!params.get("origin") || !params.get("destination")) {
+ return;
+ }
+
+ const src = params.get("origin");
+ const dest = params.get("destination");
+
+ /* origindest contains both the origin and destination */
+ const origindest = document.getElementById("origindest");
+
+ const origin = document.getElementById("origin");
+ const destination = document.getElementById("destination");
+
+ origin.textContent = params.get("origin");
+ destination.textContent = params.get("destination");
+
+ origindest.style.display = "block"; /* hidden by default */
+ }
+
+
+ /**
+ * Hide the menu and display the ticket. This is what happens
+ * when you submit the form.
+ */
+ function go() {
+ /* To create our "window" onto the scene, we're going to slide the
+ * SVG off the left-hand side of the screen, and we don't want
+ * scroll bars to appear. */
+ document.body.style.overflow = "hidden";
+ document.body.style.margin = "0";
+ document.body.style.padding = "0";
+
+ const svg = document.querySelector("svg");
+ const menu = document.getElementById("menu");
+ svg.style.display = "initial";
+ menu.style.display = "none";
+ }
+
+ /**
+ * Determine if the user agent is mobile Firefox.
+ */
+ function ua_is_mobile_ff() {
+ const ua = navigator.userAgent.toLowerCase();
+ return (ua.includes("firefox") && ua.includes("mobile"));
+ }
+
+ /**
+ * 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.
+ *
+ * All browsers except mobile Firefox let us call setCustomValidity()
+ * to provide an error message that is displayed if the user tries
+ * to submit invalid choices. But amazingly, mobile Firefox does not:
+ *
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=1510450
+ *
+ * Instead we have to work around it (in that one browser) by
+ * showing/hiding a paragraph that we fill with the errors.
+ */
+ function validate_origin_destination(event) {
+ const origins = document.getElementsByName("origin");
+ const destinations = document.getElementsByName("destination");
+ const mfe = document.getElementById("marc-form-errors");
+ const marcsubmit = document.getElementById("marc-submit");
+
+ if (ua_is_mobile_ff()) {
+ /* Even though this is only for one browser, empty paragraphs
+ * are handled inconsistently and should be avoided as a rule.
+ * So, we make it say "OK" before we hide it. */
+ mfe.textContent = "OK";
+ mfe.style.visibility = "hidden";
+ marcsubmit.disabled = false;
+ }
+
+ 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);
+
+ if (ua_is_mobile_ff()) {
+ mfe.textContent = err;
+ mfe.style.visibility = "visible";
+ marcsubmit.disabled = true;
+ }
+ }
+ else if (compute_marc_zone(src.value, dest.value) === null) {
+ let err = "Origin and destination are on different lines";
+ dest.setCustomValidity(err);
+
+ if (ua_is_mobile_ff()) {
+ mfe.textContent = err;
+ mfe.style.visibility = "visible";
+ marcsubmit.disabled = true;
+ }
+ }
+ }
+
+ /*****************************************************/
+ /* Add event handlers for all of the functions above */
+ /*****************************************************/
+
+ 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);
+
+ /* 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);
+
+ /* Resize the ticket background if necessary */
+ window.addEventListener("load", resize_ticket);
+
+ /* 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);
+
+ /* Set the ticket expiration date/time upon page load */
+ window.addEventListener("load", set_ticket_expiry);
+
+ /* Set the MARC Train origin and destination, if applicable */
+ window.addEventListener("load", set_marc_origin_destination);
+
+ /* Compute and set the zone, if applicable */
+ window.addEventListener("load", compute_and_set_zone);
+
+ /* 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);
+
+ /* Finally, we have to babysit mobile Firefox, who doesn't
+ * support HTML5 form validation going into 2024. Turn on
+ * the little form errors paragraph so we can toggle its
+ * visibility (and make it display the error) when the user
+ * makes an invalid selection. */
+ window.addEventListener("load", () => {
+ if (ua_is_mobile_ff()) {
+ const mfe = document.getElementById("marc-form-errors");
+ mfe.style.display = "block";
+ }
+ });
+ }