</title>
<style>
+ body {
+ /* For consistency with the SVG */
+ font-family: sans-serif;
+ }
+
fieldset {
margin-top: 1em;
padding-top: 1em;
<h2>it's transit equity y'all</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.
+ <em>Hint:</em> If they start checking it, the daily security
+ code stays the same all day and is the same on a $2 bus ticket
+ as it is on a $9 MARC ticket. It's also the same on every phone.
</p>
<form>
<label for="zone2">Zone 2</label>
</div>
<div>
- <input type="radio" required
+ <input type="radio" required checked
name="zone"
id="zone3"
value="Zone 3" />
<p>Origin:</p>
<div>
- <input type="radio" required
+ <input type="radio" required checked
name="origin"
id="origin1"
value="BAL" />
<label for="destination6">Seabrook (Penn Line)</label>
</div>
<div>
- <input type="radio" required
+ <input type="radio" required checked
name="destination"
id="destination7"
value="WAS" />
* 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.
+ * not on the same line as your origin?) then null is returned.
*/
function compute_marc_zone(src, dest) {
BAL_SEB: 3,
BAL_WAS: 4,
BAL_WBL: 1,
- BCA_CPK_: 3,
- BCA_WAS_: 4,
- BWI_BWE: 1,
+ BCA_CPK: 3,
+ BCA_WAS: 4,
+ BWE_BWI: 1,
+ BWE_SEB: 1,
+ BWE_WAS: 2,
+ BWE_WBL: 2,
BWI_WAS: 3,
BWI_WBL: 1
};
case 4:
return "Four Zone";
default:
- return "";
+ return null;
}
}
const dest = params.get("destination");
if (src && dest) {
- /* MARC Train */
+ /* 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);
}
menu.style.display = "none";
}
+ /**
+ * 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.
+ */
+ function validate_origin_destination(event) {
+ const origins = document.getElementsByName("origin");
+ const destinations = document.getElementsByName("destination");
+
+ 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);
+ }
+ else if (compute_marc_zone(src.value, dest.value) === null) {
+ let err = "Origin and destination are on different lines!";
+ dest.setCustomValidity(err);
+ }
+ }
/*****************************************************/
/* Add event handlers for all of the functions above */
/* 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);
+ }
</script>
</body>