X-Git-Url: https://gitweb.michael.orlitzky.com/?a=blobdiff_plain;f=index.html.in;h=e129eeaf84ff70aaf50915ba8995f98d96d09f86;hb=ea8e2dc15b38517f6ffef061ffdf01a76a57b122;hp=cd71cbb97c80c334aef519d20a5a84e66e77283f;hpb=b664e7d6317ffdf74bd349239cbf0819c1e4c1ca;p=charm-bypass.git diff --git a/index.html.in b/index.html.in index cd71cbb..e129eea 100644 --- a/index.html.in +++ b/index.html.in @@ -4,26 +4,13 @@ - CharmBypass. + CharmBypass: doing transit equity whether they like it or not + +

Origin

+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +

Destination

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + + + + @@ -376,13 +412,13 @@ function set_service_id() { const sid = document.getElementById("serviceid"); - /* Get the "serviceid" from the querystring if it's there */ + /* 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" */ } /******************************/ @@ -391,13 +427,13 @@ function set_service_name() { const sid = document.getElementById("servicename"); - /* Get the "servicename" from the querystring if it's there */ + /* 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" */ } /****************************************/ @@ -410,7 +446,7 @@ /* Get the "code" from the querystring if it's there */ 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 */ @@ -445,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 @@ -466,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); } /*****************************************/ @@ -515,7 +551,7 @@ is_day = true; function set_day() { - sky.style.fill = "#efb02f"; + sky.style.fill = "#efb02f"; } function set_night() { @@ -533,6 +569,76 @@ } } + + /*******************************************************/ + /* 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) */ /******************************************/ @@ -541,7 +647,9 @@ /* 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.overflow = "hidden"; + document.body.style.margin = "0"; + document.body.style.padding = "0"; const svg = document.querySelector("svg"); const menu = document.getElementById("menu"); @@ -555,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 */ @@ -580,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); }