X-Git-Url: https://gitweb.michael.orlitzky.com/?a=blobdiff_plain;f=index.html.in;h=e129eeaf84ff70aaf50915ba8995f98d96d09f86;hb=ea8e2dc15b38517f6ffef061ffdf01a76a57b122;hp=421fedaa72aa5eac6daf10046af4082a759e84f9;hpb=0e1b4682be6b08731bc5ed4c2a983602cbf1c98f;p=charm-bypass.git diff --git a/index.html.in b/index.html.in index 421feda..e129eea 100644 --- a/index.html.in +++ b/index.html.in @@ -4,33 +4,13 @@ - CharmBypass. + CharmBypass: doing transit equity whether they like it or not @@ -314,13 +412,13 @@ function set_service_id() { const sid = document.getElementById("serviceid"); - /* Get the "serviceid" from the querystring if it's there */ - let params = new URLSearchParams(document.location.search); + /* Get the "serviceid" from the querystring if it's there */ + const params = new URLSearchParams(document.location.search); if (params.get("serviceid")) { sid.textContent = params.get("serviceid"); } - /* Otherwise, leave it at "F" */ + /* Otherwise, leave it at "F" */ } /******************************/ @@ -329,13 +427,13 @@ function set_service_name() { const sid = document.getElementById("servicename"); - /* Get the "servicename" from the querystring if it's there */ - let params = new URLSearchParams(document.location.search); + /* Get the "servicename" from the querystring if it's there */ + const params = new URLSearchParams(document.location.search); if (params.get("servicename")) { sid.textContent = params.get("servicename"); } - /* Otherwise, leave it at "BaltimoreLink" */ + /* Otherwise, leave it at "BaltimoreLink" */ } /****************************************/ @@ -346,9 +444,9 @@ const ct = document.getElementById("codetext"); /* Get the "code" from the querystring if it's there */ - let params = new URLSearchParams(document.location.search); + const params = new URLSearchParams(document.location.search); if (params.get("code")) { - ct.textContent = params.get("code"); + ct.textContent = params.get("code").toUpperCase(); } else { /* Otherwise, use a random code */ @@ -383,7 +481,7 @@ /* What do we add to c2 to make it equal to c1? */ const hdelta = c1 - c2; - /* We've measured everything so far in "client rect" + /* We've measured everything so far in "client rect" * coordinates, because that's the only available measurement * we have for the width of the element after futzing * with its contents. But when we reposition that @@ -404,7 +502,7 @@ /* Since this element has an "x" attribute it's easier for * us to shift that than it is to mess with the "left" style. */ - ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + svg_hdelta); + ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + svg_hdelta); } /*****************************************/ @@ -419,8 +517,8 @@ const date = new Date(); /* BaltimoreLink and MARC Train are valid for an hour and a half */ - var minutes = 90; - let params = new URLSearchParams(document.location.search); + let minutes = 90; + const params = new URLSearchParams(document.location.search); if (params.get("servicename") == "Commuter Bus") { /* But commuter bus tickets are only valid for ten minutes */ minutes = 10; @@ -453,7 +551,7 @@ is_day = true; function set_day() { - sky.style.fill = "#efb02f"; + sky.style.fill = "#efb02f"; } function set_night() { @@ -471,11 +569,88 @@ } } + + /*******************************************************/ + /* Compute the MARC "zone" from its origin/destination */ + /*******************************************************/ + + /* Sorted on the first component, then the second */ + const zone_map = { + BAL_BWE: 2, + BAL_BWI: 1, + BAL_SEB: 3, + BAL_WAS: 4, + BAL_WBL: 1, + BCA_CPK_: 3, + BCA_WAS_: 4, + BWI_BWE: 1, + BWI_WAS: 3, + BWI_WBL: 1 + }; + + /* 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. */ + function compute_marc_zone(src, dest) { + /* 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 ""; + } + } + + function set_marc_zone() { + const params = new URLSearchParams(document.location.search); + if (params.get("origin") && params.get("destination")) { + const src = params.get("origin"); + const dest = params.get("destination"); + const zone = compute_marc_zone(src, dest); + + /* TODO: actually set the zone */ + alert(zone); + } + } + /******************************************/ /* Display the ticket (and hide the menu) */ /******************************************/ 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"; @@ -488,7 +663,7 @@ const params = new URLSearchParams(document.location.search); if (params.get("go")) { - /* First unhide the SVG (swap it with the form) */ + /* First unhide the SVG (swap it with the form) */ window.addEventListener("load", go); /* Center the ticket once when the page has loaded */ @@ -513,6 +688,9 @@ /* 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); + /* Swap colors when the screen is tapped */ document.body.addEventListener("click", swap_colors); }