<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
- CharmBypass: transit equity whether you like it or not
+ CharmBypass: doing transit equity whether they like it or not
</title>
<style>
input[type=submit] {
- margin-top: 1em;
- margin-bottom: 1em;
+ margin-top: 1em;
+ margin-bottom: 1em;
}
svg {
#citycopy {
/* The city moves faster than the clouds but slower
* than the trees */
- animation: citycopyscroll 35s linear infinite;
+ animation: citycopyscroll 35s linear infinite;
}
</style>
</head>
<body>
<div id="menu">
<h1>CharmBypass</h1>
- <h2>transit equity whether you like it or not</h2>
+ <h2>doing transit equity whether they like it or not</h2>
+
+ <p>
+ <em>Hint:</em> If you think the driver or fare inspector will
+ actually check it, the daily security code is the same on a
+ $2.00 BaltimoreLink ticket as it is on a $9.00 MARC Train
+ ticket. It's also the same on your friend's phone, or for
+ anyone else in Maryland that day.
+ </p>
+
<form>
<fieldset>
<legend>BaltimoreLink (Bus, Light Rail, Metro)</legend>
+ <div>
+ <label for="code1">
+ Daily security code (optional):
+ </label>
+ <input id="code1"
+ name="code"
+ type="text"
+ minlength="2"
+ maxlength="2"
+ pattern="[a-zA-Z0-9]+" />
+ </div>
<input type="hidden" name="servicename" value="BaltimoreLink" />
<input type="submit" name="go" value="Get Ticket" />
</fieldset>
<input type="hidden" name="serviceid" value="R" />
<input type="hidden" name="servicename" value="Commuter Bus" />
+ <div>
+ <label for="code2">
+ Daily security code (optional):
+ </label>
+ <input id="code2"
+ name="code"
+ type="text"
+ minlength="2"
+ maxlength="2"
+ pattern="[a-zA-Z0-9]+" />
+ </div>
+
<h3>Zone</h3>
<div>
- <input type="radio" id="zone1" name="zone" value="Zone 1" />
+ <input required 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" />
+ <input required 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" />
+ <input required 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" />
+ <input required 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" />
+ <input required type="radio" id="zone5" name="zone" value="Zone 5" />
<label for="zone5">Zone 5</label>
</div>
<fieldset>
<legend>MARC Train</legend>
+ <div>
+ <label for="code3">
+ Daily security code (optional):
+ </label>
+ <input id="code3"
+ name="code"
+ type="text"
+ minlength="2"
+ maxlength="2"
+ pattern="[a-zA-Z0-9]+" />
+ </div>
+
<h3>Origin</h3>
<div>
- <input type="radio" id="origin1" name="origin" value="BAL" />
+ <input required type="radio" id="origin1" name="origin" value="BAL" />
<label for="origin1">Baltimore/Penn (Penn Line)</label>
</div>
<div>
- <input type="radio" id="origin2" name="origin" value="BCA" />
+ <input required type="radio" id="origin2" name="origin" value="BCA" />
<label for="origin2">Baltimore/Camden (Camden Line)</label>
</div>
<div>
- <input type="radio" id="origin3" name="origin" value="BWE" />
+ <input required type="radio" id="origin3" name="origin" value="BWE" />
<label for="origin3">Bowie State (Penn Line)</label>
</div>
<div>
- <input type="radio" id="origin4" name="origin" value="BWI" />
+ <input required type="radio" id="origin4" name="origin" value="BWI" />
<label for="origin4">BWI Airport (Penn Line)</label>
</div>
<div>
- <input type="radio" id="origin5" name="origin" value="CPK" />
+ <input required type="radio" id="origin5" name="origin" value="CPK" />
<label for="origin5">College Park (Camden Line)</label>
</div>
<div>
- <input type="radio" id="origin6" name="origin" value="SEB" />
+ <input required type="radio" id="origin6" name="origin" value="SEB" />
<label for="origin6">Seabrook (Penn Line)</label>
</div>
<div>
- <input type="radio" id="origin7" name="origin" value="WAS" />
+ <input required type="radio" id="origin7" name="origin" value="WAS" />
<label for="origin7">Washington D.C.</label>
</div>
<div>
- <input type="radio" id="origin8" name="origin" value="WBL" />
+ <input required type="radio" id="origin8" name="origin" value="WBL" />
<label for="origin8">West Baltimore (Penn Line)</label>
</div>
<h3>Destination</h3>
<div>
- <input type="radio" id="destination1" name="destination" value="BAL" />
+ <input required type="radio" id="destination1" name="destination" value="BAL" />
<label for="destination1">Baltimore/Penn (Penn Line)</label>
</div>
<div>
- <input type="radio" id="destination2" name="destination" value="BCA" />
+ <input required type="radio" id="destination2" name="destination" value="BCA" />
<label for="destination2">Baltimore/Camden (Camden Line)</label>
</div>
<div>
- <input type="radio" id="destination3" name="destination" value="BWE" />
+ <input required type="radio" id="destination3" name="destination" value="BWE" />
<label for="destination3">Bowie State (Penn Line)</label>
</div>
<div>
- <input type="radio" id="destination4" name="destination" value="BWI" />
+ <input required type="radio" id="destination4" name="destination" value="BWI" />
<label for="destination4">BWI Airport (Penn Line)</label>
</div>
<div>
- <input type="radio" id="destination5" name="destination" value="CPK" />
+ <input required type="radio" id="destination5" name="destination" value="CPK" />
<label for="destination5">College Park (Camden Line)</label>
</div>
<div>
- <input type="radio" id="destination6" name="destination" value="SEB" />
+ <input required type="radio" id="destination6" name="destination" value="SEB" />
<label for="destination6">Seabrook (Penn Line)</label>
</div>
<div>
- <input type="radio" id="destination7" name="destination" value="WAS" />
+ <input required type="radio" id="destination7" name="destination" value="WAS" />
<label for="destination7">Washington D.C.</label>
</div>
<div>
- <input type="radio" id="destination8" name="destination" value="WBL" />
+ <input required type="radio" id="destination8" name="destination" value="WBL" />
<label for="destination8">West Baltimore (Penn Line)</label>
</div>
/* 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 */
}
}
+
+ /*******************************************************/
+ /* 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) */
/******************************************/
/* 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);
}
projects / charm-bypass.git / blobdiff