diff --git a/app.js b/app.js index 808d993..67310c4 100644 --- a/app.js +++ b/app.js @@ -9,6 +9,9 @@ const authSecretInput = document.querySelector("#auth-secret"); const authMessage = document.querySelector("#auth-message"); const appShell = document.querySelector("#app-shell"); const logoutButton = document.querySelector("#logout-button"); +const showFormButton = document.querySelector("#show-form-button"); +const formPanel = document.querySelector("#route-editor"); +const formTitle = document.querySelector("#form-title"); const form = document.querySelector("#route-form"); const idInput = document.querySelector("#route-id"); const nameInput = document.querySelector("#route-name"); @@ -28,9 +31,10 @@ let routes = loadRoutes(); authForm.addEventListener("submit", authenticate); logoutButton.addEventListener("click", lockApp); +showFormButton.addEventListener("click", startAddRoute); form.addEventListener("submit", saveRoute); cancelEditButton.addEventListener("click", resetForm); -clearAllButton.addEventListener("click", removeAllRoutes); +clearAllButton?.addEventListener("click", removeAllRoutes); routesList.addEventListener("click", handleRouteAction); if (sessionStorage.getItem(AUTH_SESSION_KEY) === "yes") { @@ -85,7 +89,7 @@ function saveRoute(event) { event.preventDefault(); const route = { - id: idInput.value || crypto.randomUUID(), + id: idInput.value || createId(), name: nameInput.value.trim(), link: linkInput.value.trim(), date: dateInput.value, @@ -120,7 +124,9 @@ function renderRoutes() { routeCount.textContent = routes.length === 1 ? "1 route saved." : `${routes.length} routes saved.`; emptyState.classList.toggle("hidden", routes.length > 0); - clearAllButton.hidden = routes.length === 0; + if (clearAllButton) { + clearAllButton.hidden = routes.length === 0; + } for (const route of routes) { const card = template.content.firstElementChild.cloneNode(true); @@ -131,13 +137,16 @@ function renderRoutes() { const openLink = card.querySelector(".open-link"); card.dataset.id = route.id; - meta.textContent = route.date ? formatDate(route.date) : "No date"; + meta.textContent = route.date ? formatDate(route.date) : ""; + meta.hidden = !route.date; title.textContent = route.name; title.href = route.link; openLink.href = route.link; - description.textContent = route.description || "No description added."; + description.textContent = route.description; + description.hidden = !route.description; if (route.picture) { + image.hidden = false; image.style.backgroundImage = `url("${cssUrlEscape(route.picture)}")`; } @@ -170,7 +179,19 @@ function handleRouteAction(event) { } } +function startAddRoute() { + resetForm(); + formPanel.hidden = false; + formTitle.textContent = "Add route"; + saveButton.textContent = "Add route"; + cancelEditButton.hidden = false; + form.scrollIntoView({ behavior: "smooth", block: "start" }); + nameInput.focus(); +} + function editRoute(route) { + formPanel.hidden = false; + formTitle.textContent = "Edit route"; idInput.value = route.id; nameInput.value = route.name; linkInput.value = route.link; @@ -233,8 +254,14 @@ async function shareRoute(route) { function resetForm() { form.reset(); idInput.value = ""; + formTitle.textContent = "Add route"; saveButton.textContent = "Add route"; cancelEditButton.hidden = true; + formPanel.hidden = true; +} + +function createId() { + return crypto.randomUUID?.() || `${Date.now()}-${Math.random().toString(16).slice(2)}`; } function isValidUrl(value) { diff --git a/index.html b/index.html index bab6ad8..8eaa919 100644 --- a/index.html +++ b/index.html @@ -23,19 +23,15 @@ -

No routes saved

-

Add your first Google Maps route link using the form.

+

Tap “Add route” to save your first map link.

@@ -93,7 +88,7 @@