init

public/app.js

@@ -0,0 +1,252 @@
+"use strict";
+
+let datalistCounter = 0;
+let lastResults = [];
+let arriveBy = false;
+
+function addStationRow(container, values = {}) {
+  const row = document.createElement("div");
+  row.className = "station-row";
+
+  const input = document.createElement("input");
+  input.type = "text";
+  input.required = true;
+  input.placeholder = "Station name";
+  input.autocomplete = "off";
+  input.value = values.query ?? "";
+  const datalist = document.createElement("datalist");
+  datalist.id = `stations-${datalistCounter++}`;
+  input.setAttribute("list", datalist.id);
+  wireAutocomplete(input, datalist);
+
+  const penalty = document.createElement("input");
+  penalty.type = "number";
+  penalty.className = "penalty";
+  penalty.min = "0";
+  penalty.step = "1";
+  penalty.value = values.penalty ?? "0";
+  penalty.title = "Penalty in minutes (added to this station's journeys for ranking)";
+
+  const unit = document.createElement("span");
+  unit.className = "unit";
+  unit.textContent = "min";
+
+  const remove = document.createElement("button");
+  remove.type = "button";
+  remove.className = "remove";
+  remove.textContent = "×";
+  remove.title = "Remove station";
+  remove.addEventListener("click", () => {
+    if (container.querySelectorAll(".station-row").length > 1) row.remove();
+  });
+
+  row.append(input, penalty, unit, remove, datalist);
+  container.appendChild(row);
+  return input;
+}
+
+function wireAutocomplete(input, datalist) {
+  let timer;
+  input.addEventListener("input", () => {
+    clearTimeout(timer);
+    const query = input.value.trim();
+    if (query.length < 2) return;
+    timer = setTimeout(async () => {
+      try {
+        const res = await fetch(`/api/locations?query=${encodeURIComponent(query)}`);
+        if (!res.ok) return;
+        const stations = await res.json();
+        datalist.replaceChildren(
+          ...stations.map((s) => {
+            const option = document.createElement("option");
+            option.value = s.name;
+            return option;
+          }),
+        );
+      } catch {
+        /* autocomplete is best-effort */
+      }
+    }, 250);
+  });
+}
+
+function collectSide(containerId) {
+  return [...document.querySelectorAll(`#${containerId} .station-row`)]
+    .map((row) => ({
+      query: row.querySelector("input[type=text]").value.trim(),
+      penalty: Number(row.querySelector(".penalty").value) || 0,
+    }))
+    .filter((s) => s.query !== "");
+}
+
+async function runSearch(event) {
+  event.preventDefault();
+  const button = document.getElementById("search-button");
+  const feedback = document.getElementById("feedback");
+  const resultsSection = document.getElementById("results-section");
+
+  const body = { from: collectSide("from-rows"), to: collectSide("to-rows") };
+  const mode = document.getElementById("time-mode").value;
+  const timeValue = document.getElementById("time-value").value;
+  if (mode !== "now") {
+    if (!timeValue) {
+      showFeedback([`Please pick a ${mode === "departure" ? "departure" : "arrival"} time.`], "error");
+      return;
+    }
+    body[mode] = new Date(timeValue).toISOString();
+  }
+  arriveBy = mode === "arrival";
+
+  button.disabled = true;
+  button.textContent = "Searching…";
+  feedback.hidden = true;
+  try {
+    const res = await fetch("/api/search", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify(body),
+    });
+    const data = await res.json();
+    if (!res.ok) {
+      showFeedback([data.error ?? `Search failed (${res.status})`], "error");
+      resultsSection.hidden = true;
+      return;
+    }
+    lastResults = data.journeys;
+    const notes = [...(data.warnings ?? []), ...resolutionNotes(data.resolved)];
+    if (notes.length > 0) showFeedback(notes, "warning");
+    renderResults();
+    resultsSection.hidden = false;
+  } catch (error) {
+    showFeedback([`Search failed: ${error.message}`], "error");
+  } finally {
+    button.disabled = false;
+    button.textContent = "Search";
+  }
+}
+
+function resolutionNotes(resolved) {
+  const notes = [];
+  for (const side of ["from", "to"]) {
+    for (const r of resolved?.[side] ?? []) {
+      if (r.station && r.station.name.toLowerCase() !== r.query.toLowerCase()) {
+        notes.push(`"${r.query}" was interpreted as "${r.station.name}"`);
+      }
+    }
+  }
+  return notes;
+}
+
+function showFeedback(messages, kind) {
+  const feedback = document.getElementById("feedback");
+  feedback.className = kind;
+  feedback.replaceChildren(
+    ...messages.map((m) => {
+      const p = document.createElement("p");
+      p.textContent = m;
+      return p;
+    }),
+  );
+  feedback.hidden = false;
+}
+
+function renderResults() {
+  const sortMode = document.getElementById("sort-mode").value;
+  const sorted = [...lastResults].sort((a, b) => {
+    if (sortMode === "time") {
+      return arriveBy ? b.arrival.localeCompare(a.arrival) : a.departure.localeCompare(b.departure);
+    }
+    return a.score - b.score;
+  });
+
+  const list = document.getElementById("results");
+  list.replaceChildren(...sorted.map(journeyCard));
+  if (sorted.length === 0) {
+    const empty = document.createElement("p");
+    empty.textContent = "No connections found.";
+    list.replaceChildren(empty);
+  }
+}
+
+function journeyCard(j) {
+  const item = document.createElement("li");
+  item.className = "journey";
+
+  const head = document.createElement("div");
+  head.className = "journey-head";
+  const times = document.createElement("span");
+  times.className = "times";
+  times.textContent = `${fmtTime(j.departure)} → ${fmtTime(j.arrival)}`;
+  const meta = document.createElement("span");
+  meta.className = "meta";
+  const penalty = j.fromPenalty + j.toPenalty;
+  meta.textContent =
+    `${fmtDuration(j.durationMinutes)} · ${j.transfers} transfer${j.transfers === 1 ? "" : "s"}` +
+    (penalty > 0 ? ` · +${penalty} min penalty → score ${j.score}` : "");
+  head.append(times, meta);
+
+  const route = document.createElement("div");
+  route.className = "route";
+  route.textContent = `${j.fromStation.name} → ${j.toStation.name}`;
+
+  const lines = document.createElement("div");
+  lines.className = "lines";
+  lines.replaceChildren(
+    ...j.journey.legs
+      .filter((leg) => !leg.walking && leg.line)
+      .map((leg) => {
+        const badge = document.createElement("span");
+        badge.className = "line";
+        badge.textContent = leg.line.name;
+        return badge;
+      }),
+  );
+
+  const details = document.createElement("details");
+  const summary = document.createElement("summary");
+  summary.textContent = "Legs";
+  details.appendChild(summary);
+  for (const leg of j.journey.legs) {
+    const p = document.createElement("p");
+    p.className = "leg";
+    const what = leg.walking
+      ? "walk"
+      : `${leg.line?.name ?? "?"}${leg.direction ? ` → ${leg.direction}` : ""}`;
+    p.textContent = `${fmtTime(leg.departure)} ${leg.origin.name} — ${what} — ${fmtTime(leg.arrival)} ${leg.destination.name}`;
+    details.appendChild(p);
+  }
+
+  item.append(head, route, lines, details);
+  return item;
+}
+
+function fmtTime(iso) {
+  const date = new Date(iso);
+  const time = date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  const today = new Date();
+  const sameDay =
+    date.getFullYear() === today.getFullYear() &&
+    date.getMonth() === today.getMonth() &&
+    date.getDate() === today.getDate();
+  return sameDay ? time : `${date.toLocaleDateString([], { day: "numeric", month: "numeric" })} ${time}`;
+}
+
+function fmtDuration(minutes) {
+  const h = Math.floor(minutes / 60);
+  const m = minutes % 60;
+  return h > 0 ? `${h} h ${m} min` : `${m} min`;
+}
+
+document.getElementById("search-form").addEventListener("submit", runSearch);
+document.getElementById("sort-mode").addEventListener("change", renderResults);
+document.getElementById("time-mode").addEventListener("change", (event) => {
+  document.getElementById("time-value").hidden = event.target.value === "now";
+});
+for (const button of document.querySelectorAll("button.add")) {
+  button.addEventListener("click", () =>
+    addStationRow(document.getElementById(button.dataset.target)),
+  );
+}
+
+addStationRow(document.getElementById("from-rows"));
+addStationRow(document.getElementById("to-rows"));