X-Git-Url: https://gitweb.michael.orlitzky.com/?a=blobdiff_plain;ds=sidebyside;f=index.html.in;h=96dd04a437b2dab5ae75e188045850419311e235;hb=893bee273e48207ef4609e7f20de688007970699;hp=454cca8758c764c53b367f0c108bc7a07c491c63;hpb=79a92e88cd8157349511aa16379445c7c2776ceb;p=charm-bypass.git
diff --git a/index.html.in b/index.html.in
index 454cca8..96dd04a 100644
--- a/index.html.in
+++ b/index.html.in
@@ -4,33 +4,13 @@
- CharmBypass.
+ CharmBypass: doing transit equity whether they like it or not
@@ -383,28 +411,92 @@
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" */
}
- /******************************/
+ /************************/
/* Set the service name */
- /******************************/
+ /************************/
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" */
+ }
+
+
+ /************************/
+ /* Set the 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");
+ const params = new URLSearchParams(document.location.search);
+
+ 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 */
+ }
+
+ /* Otherwise, leave it blank (and hidden) */
+ }
+
+ /***********************************************************/
+ /* Resize the ticket background based on the service name */
+ /***********************************************************/
+
+ function resize_ticket() {
+ /* Get the "servicename" from the querystring if it's there */
+ const params = new URLSearchParams(document.location.search);
+ 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
+ * by that amount to put it back where it started. */
+ 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. 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
+ * tickets overlayed in inkscape */
+ sn.setAttribute("transform", "translate(0 64.28)");
+ }
+ else if (params.get("servicename") == "MARC Train") {
+ /* 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
+ * BaltimoreLink ticket in mind */
}
/****************************************/
@@ -417,7 +509,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 */
@@ -452,7 +544,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
@@ -473,7 +565,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);
}
/*****************************************/
@@ -522,7 +614,7 @@
is_day = true;
function set_day() {
- sky.style.fill = "#efb02f";
+ sky.style.fill = "#efb02f";
}
function set_night() {
@@ -540,11 +632,87 @@
}
}
+
+ /*******************************************************/
+ /* 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);
+
+ set_service_zone(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";
@@ -557,7 +725,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 */
@@ -572,6 +740,12 @@
/* Set the service name when the page has loaded */
window.addEventListener("load", set_service_name);
+ /* Set the service zone when the page has loaded */
+ window.addEventListener("load", set_service_zone);
+
+ /* 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);
@@ -582,6 +756,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);
}