marijo/routes
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Cleaning up design

Browse source
This commit is contained in:
marijo 2026-06-29 07:51:42 +00:00
parent 09952fb470
commit 89b2a7171e
3 changed files with 174 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

37
app.js
View file

@ -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) {