Compare commits

...

1 Commits

Author SHA1 Message Date
a5b7800784 frontend: refactoring 2023-02-13 01:48:24 +01:00
2 changed files with 231 additions and 134 deletions

View File

@ -15,29 +15,5 @@
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head> </head>
<body> <body>
<div id="topbar">
<h1>Postnummer App</h1>
<div class="spacer"></div>
<button id="dropdown-button"></button>
<div id="dropdown">
<button id="map-redirect">Kort</button>
<button id="reviews-redirect">Anmeldelser</button>
</div>
</div>
<main id="main">
<form id="search-bar">
<input id="search-input" type="text" placeholder="Postnummer" maxlength="4">
<button id="search-button" type="submit">Search</button>
</form>
<img src="assets/map.jpg" id="map">
<div id="dot"></div>
<div id="boundary"></div>
<div id="info">
<p id="zip-code">Postnummer ikke fundet</p>
<p id="mouse-position"></p>
<p id="coords"></p>
</div>
</main>
<div id="tooltip"></div>
</body> </body>
</html> </html>

View File

@ -120,138 +120,259 @@ function displayZipCode(
boundaryElem.style.height = `${bottomleft.y - topright.y}px`; boundaryElem.style.height = `${bottomleft.y - topright.y}px`;
} }
function setupMap( type Component = {
mousePositionElement: HTMLParagraphElement, children?: Component[],
coordsElement: HTMLParagraphElement, render(): string,
zipCodeElement: HTMLParagraphElement, hydrate?(update: (action?: () => Promise<any>) => Promise<void>): Promise<void>,
) { };
const mapImg = domSelect<HTMLImageElement>("#map")!;
const fetcher = new Throttler(200);
mapImg.addEventListener('mousemove', async (event: MouseEvent) => { function makeReviewsPage(): Component {
const mousePosition: Position = { x: event.offsetX, y: event.offsetY }; return {
displayMousePosition(mousePositionElement, mousePosition); render: () => /*html*/`
<h2 id="reviews-title">Anmeldelser</h2>
const mapSize: Size = { <div id="reviews-container">${loadReviews()}</div>
width: mapImg.clientWidth, `,
height: mapImg.clientHeight, }
};
const coords = convertPixelsToCoordinate(mousePosition, mapSize);
displayCoords(coordsElement, coords);
fetcher.call(async () => await fetchAndDisplayZipCode(coords));
});
mapImg.addEventListener("mouseup", async (event: MouseEvent) => {
const mousePosition: Position = { x: event.offsetX, y: event.offsetY };
displayMousePosition(mousePositionElement, mousePosition);
const mapSize: Size = {
width: mapImg.clientWidth,
height: mapImg.clientHeight,
};
const coords = convertPixelsToCoordinate(mousePosition, mapSize);
displayCoords(coordsElement, coords);
fetcher.call(async () => await fetchAndDisplayZipCode(coords));
});
mapImg.addEventListener("mouseleave", (_event: MouseEvent) => {
displayZipCode(zipCodeElement, null, null, null, null);
});
} }
function setupSearchBar(zipCodeElement: HTMLParagraphElement) { function makeSearchBar(updateZipCodeInfo: (zipCode: string) => Promise<void>): Component {
const searchBar = return {
domSelect<HTMLFormElement>("#search-bar")!; render: () => /*html*/`
const searchInput = <form id="search-bar">
domSelect<HTMLInputElement>("#search-input")!; <input id="search-input" type="text" placeholder="Postnummer" maxlength="4">
<button id="search-button" type="submit">Search</button>
</form>
`,
async hydrate(update) {
const searchBar =
domSelect<HTMLFormElement>("#search-bar")!;
const searchInput =
domSelect<HTMLInputElement>("#search-input")!;
searchInput.addEventListener("keydown", (event) => { searchInput.addEventListener("keydown", (event) => {
if (event.key.length === 1 && !"0123456789".includes(event.key)) if (event.key.length === 1 && !"0123456789".includes(event.key))
event.preventDefault(); event.preventDefault();
}); });
searchBar.addEventListener("submit", async (event: Event) => { searchBar.addEventListener("submit", async (event: Event) => {
event.preventDefault(); event.preventDefault();
update(() => updateZipCodeInfo(searchInput.value));
});
},
};
}
const inputValue = searchInput.value; type ZipCodeInfo = {
zipCode: number | null,
name: string | null,
center: Coordinate | null,
boundary: Square | null,
}
function makeInfoBox(info: ZipCodeInfo): Component {
const { zipCode, name, center, boundary } = info;
return {
render: () => /*html*/`
<div id="info">
<p id="zip-code">${info.zipCode === null ? "Postnummer ikke fundet" : `Postnummer: <code>${zipCode}</code>, ${name}`}</p>
<p id="mouse-position"></p>
<p id="coords"></p>
</div>
`,
async hydrate() {
tooltip.setText(zipCode ? `<code>${zipCode}</code> ${name}` : "");
const dot = document.getElementById("dot")!;
const boundaryElem = document.getElementById("boundary")!;
if (!center || !boundary) {
dot.style.display = "none";
boundaryElem.style.display = "none";
return;
}
const mapImg = document.getElementById("map")!;
const mapSize: Size = {
width: mapImg.clientWidth,
height: mapImg.clientHeight,
};
// Draw dot
const position = convertCoordinateToPixels(center, mapSize);
const rect = document.getElementById("map")!.getBoundingClientRect();
dot.style.display = "block";
dot.style.left = `${position.x + rect.left}px`;
dot.style.top = `${position.y + rect.top + document.documentElement.scrollTop}px`;
// Draw boundary
const bottomleft = convertCoordinateToPixels({ longitude: boundary.x1, latitude: boundary.y1 }, mapSize);
const topright = convertCoordinateToPixels({ longitude: boundary.x2, latitude: boundary.y2 }, mapSize);
boundaryElem.style.display = "block";
boundaryElem.style.left = `${bottomleft.x + rect.left}px`;
boundaryElem.style.top = `${topright.y + rect.top + document.documentElement.scrollTop}px`;
boundaryElem.style.width = `${topright.x - bottomleft.x}px`;
boundaryElem.style.height = `${bottomleft.y - topright.y}px`;
}
}
}
function makeMainPage(): Component {
const zipCodeInfo: ZipCodeInfo = {
zipCode: null,
name: null,
center: null,
boundary: null,
}
const searchBar = makeSearchBar(async (searchInputValue) => {
const inputValue = searchInputValue;
if (!/^\d+$/.test(inputValue)) return; if (!/^\d+$/.test(inputValue)) return;
const data = await fetch( const data = await fetch(
`https://api.dataforsyningen.dk/postnumre?nr=${inputValue}`, `https://api.dataforsyningen.dk/postnumre?nr=${inputValue}`,
).then((response) => response.json()) ).then((response) => response.json())
displayZipCode( zipCodeInfo.zipCode = data.length ? parseInt(data[0]["nr"]) : null;
zipCodeElement, zipCodeInfo.name = data.length ? data[0]["navn"] : null;
data.length ? parseInt(data[0]["nr"]) : null, zipCodeInfo.center = data.length ? { longitude: data[0]["visueltcenter"][0], latitude: data[0]["visueltcenter"][1] } : null;
data.length ? data[0]["navn"] : null, zipCodeInfo.boundary = data.length ? { x1: data[0]["bbox"][0], y1: data[0]["bbox"][1], x2: data[0]["bbox"][2], y2: data[0]["bbox"][3] } : null;
data.length ? { longitude: data[0]["visueltcenter"][0], latitude: data[0]["visueltcenter"][1] } : null,
data.length ? { x1: data[0]["bbox"][0], y1: data[0]["bbox"][1], x2: data[0]["bbox"][2], y2: data[0]["bbox"][3] } : null,
);
}); });
} const infoBox = makeInfoBox(zipCodeInfo);
return {
function pageRedirects() { children: [searchBar, infoBox],
const reviewRedirect = document.getElementById("reviews-redirect")! render: () => /*html*/`
const mapRedirect = document.getElementById("map-redirect")! ${searchBar.render()}
const mainElement = document.getElementById("main")!
reviewRedirect.addEventListener("click", () => {
mainElement.innerHTML = /*html*/`
<h2 id="reviews-title">Anmeldelser</h2>
<div id="reviews-container">${loadReviews()}</div>
`;
const dropdown = document.getElementById("dropdown")!;
dropdown.classList.remove("enabled");
});
mapRedirect.addEventListener("click", () => {
mainElement.innerHTML = /*html*/`
<form id="search-bar">
<input id="search-input" type="text" placeholder="Postnummer" maxlength="4">
<button id="search-button" type="submit">Search</button>
</form>
<img src="assets/map.jpg" id="map"> <img src="assets/map.jpg" id="map">
<div id="dot"></div> <div id="dot"></div>
<div id="boundary"></div> <div id="boundary"></div>
<div id="info"> `,
<p id="zip-code">Postnummer ikke fundet</p> async hydrate() {
<p id="mouse-position"></p> const mousePositionElement = domSelect<HTMLParagraphElement>("#mouse-position")!;
<p id="coords"></p> const coordsElement = domSelect<HTMLParagraphElement>("#coords")!;
</div> const zipCodeElement = domSelect<HTMLParagraphElement>("#zip-code")!;
`; const mapImg = domSelect<HTMLImageElement>("#map")!;
const [mousePositionElement, coordsElement, zipCodeElement] = [ const fetcher = new Throttler(200);
"#mouse-position",
"#coords",
"#zip-code",
].map((id) => domSelect<HTMLParagraphElement>(id)!);
setupSearchBar(zipCodeElement);
setupMap(mousePositionElement, coordsElement, zipCodeElement);
const dropdown = document.getElementById("dropdown")!;
dropdown.classList.remove("enabled");
}) mapImg.addEventListener('mousemove', async (event: MouseEvent) => {
const mousePosition: Position = { x: event.offsetX, y: event.offsetY };
displayMousePosition(mousePositionElement, mousePosition);
const mapSize: Size = {
width: mapImg.clientWidth,
height: mapImg.clientHeight,
};
const coords = convertPixelsToCoordinate(mousePosition, mapSize);
displayCoords(coordsElement, coords);
fetcher.call(async () => await fetchAndDisplayZipCode(coords));
});
mapImg.addEventListener("mouseup", async (event: MouseEvent) => {
const mousePosition: Position = { x: event.offsetX, y: event.offsetY };
displayMousePosition(mousePositionElement, mousePosition);
const mapSize: Size = {
width: mapImg.clientWidth,
height: mapImg.clientHeight,
};
const coords = convertPixelsToCoordinate(mousePosition, mapSize);
displayCoords(coordsElement, coords);
fetcher.call(async () => await fetchAndDisplayZipCode(coords));
});
mapImg.addEventListener("mouseleave", (_event: MouseEvent) => {
displayZipCode(zipCodeElement, null, null, null, null);
});
},
};
}
function makeRouter(route: "main" | "reviews"): Component {
switch (route) {
case "main":
{
const mainPage = makeMainPage();
return {
children: [mainPage],
render: () => mainPage.render(),
};
}
case "reviews": {
const reviewsPage = makeReviewsPage();
return {
children: [reviewsPage],
render: () => reviewsPage.render(),
}
}
}
}
function makeTooltip(): Component {
return {
render: () => /*html*/`
<div id="tooltip"></div>
`,
}
}
function makeLayout(): Component {
let route: "main" | "reviews" = "main";
const router = makeRouter(route);
const tooltip = makeTooltip();
return {
children: [router, tooltip],
render: () => /**/`
<div id="topbar">
<h1>Postnummer App</h1>
<div class="spacer"></div>
<button id="dropdown-button"></button>
<div id="dropdown">
<button id="map-redirect">Kort</button>
<button id="reviews-redirect">Anmeldelser</button>
</div>
</div>
<main id="main">
${router.render()}
</main>
${tooltip.render()}
`,
async hydrate(update) {
setTopbarOffset();
addToggleDropdownListener();
document.getElementById("reviews-redirect")!.addEventListener('click', () => {
update(async () => route = "reviews");
})
document.getElementById("map-redirect")!.addEventListener('click', () => {
update(async () => route = "main");
})
},
}
}
function hydrateComponentAndChildren(component: Component, update: (action?: () => Promise<any>) => Promise<void>) {
component.hydrate && component.hydrate(update);
component.children?.forEach((child) => hydrateComponentAndChildren(child, update));
}
function renderComponent(element: HTMLElement, component: Component) {
element.innerHTML = component.render();
window.requestAnimationFrame(() => {
hydrateComponentAndChildren(component, async (action) => {
action && await action();
element.innerHTML = component.render();
});
});
} }
function main() { function main() {
if (navigator.userAgent.match("Chrome")) { if (navigator.userAgent.match("Chrome")) {
location.href = "https://mozilla.org/firefox"; location.href = "https://mozilla.org/firefox";
} }
const bodyElement = document.querySelector<HTMLElement>("body")!;
const mousePositionElement = domSelect<HTMLParagraphElement>("#mouse-position")!; renderComponent(bodyElement, makeLayout());
const coordsElement = domSelect<HTMLParagraphElement>("#coords")!;
const zipCodeElement = domSelect<HTMLParagraphElement>("#zip-code")!;
setupSearchBar(zipCodeElement);
setupMap(mousePositionElement, coordsElement, zipCodeElement);
setTopbarOffset();
addToggleDropdownListener();
pageRedirects();
} }
main(); main();