+ /* 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" */
+ }
+
+ /******************************/
+ /* Set the service name */
+ /******************************/
+ function set_service_name() {
+ const sid = document.getElementById("servicename");
+
+ /* 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" */
+ }
+
+ /****************************************/
+ /* Set and reposition the security code */
+ /****************************************/
+
+ function set_code() {
+ const ct = document.getElementById("codetext");
+
+ /* 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").toUpperCase();
+ }
+ else {
+ /* Otherwise, use a random code */
+ const bucket = ["0","1","2","3","4","5","6","7","8","9",
+ "A","B","C","D","E","F","G","H","I","J",
+ "K","L","M","N","O","P","Q","R","S","T",
+ "U","V","W","X","Y","Z"];
+
+ /* Two random ints between 0 and 35 */
+ const i1 = Math.floor(Math.random() * 36);
+ const i2 = Math.floor(Math.random() * 36);
+ const d1 = bucket[i1];
+ const d2 = bucket[i2];
+ ct.textContent = d1 + d2;
+ }
+ }
+
+
+ function center_code() {
+ /* Center the security code inside its red box */
+ const ct = document.getElementById("codetext");
+ const bg = document.getElementById("codebg");
+
+ /* First, find the center of the red box */
+ const r1 = bg.getBoundingClientRect();
+ const c1 = r1.left + (r1.width / 2);
+
+ /* Now the center of the code text */
+ const r2 = ct.getBoundingClientRect();
+ const c2 = r2.left + (r2.width / 2);
+
+ /* 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"
+ * coordinates, because that's the only available measurement
+ * we have for the width of the <text> element after futzing
+ * with its contents. But when we reposition that <text>
+ * element, it will be by adjusting its "x" attribute, and
+ * that attribute uses a different coordinate system than the
+ * client rect does. Specifically, "x" refers to an offset
+ * within the SVG's coordinate system, and the client rect
+ * coordinates are pixels on-screen. To convert between the
+ * two, we can take the "width" attribute of the background
+ * element and compare it to the width of the background
+ * element's client rect. Since the size of the background is
+ * fixed, this should give us a multiplier that turns client recr
+ * distances (what we have) into SVG distances (what we want) */
+ const client_to_svg = parseFloat(bg.getAttribute("width"))/r1.width;
+
+ /* Convert hdelta from client rect to SVG coordinates */
+ const svg_hdelta = hdelta * client_to_svg;
+
+ /* Since this <text> 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);
+ }
+
+ /*****************************************/
+ /* Next, set up the ticket date and time */
+ /*****************************************/
+
+ function set_ticket_expiry() {
+ /* There are two parameters, time and date, that we store in one
+ * underlying "date" variable. Default both to an hour and a
+ * half from now. This is what the CharmPass app does for
+ * one-way tickets. */
+ const date = new Date();
+
+ /* BaltimoreLink and MARC Train are valid for an hour and a half */
+ 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;
+ }
+
+ /* We use the low-level get/setTime to change the number of
+ * milliseconds since the epoch that this date represents
+ * Obviously correct, and avoids all suspicious corner cases
+ * for a few more decades. */
+ date.setTime(date.getTime() + (minutes*60*1000));
+
+ tt = document.getElementById("tickettime");
+ tt.textContent = date.toLocaleTimeString();
+
+ const td = document.getElementById("ticketdate");
+ const dateopts = {
+ day: "2-digit",
+ month: "2-digit",
+ year: "2-digit"
+ };
+ td.textContent = date.toLocaleDateString("en-US", dateopts);
+ }
+
+
+ /*********************************************************/
+ /* Finally, the onclick handler for the night/day switch */
+ /*********************************************************/