h2/postnummer-app
h2/postnummer-app
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

frontend: small format and refactor

Browse Source
This commit is contained in:
Simon 2023-02-10 18:51:58 +01:00
parent 5e66bc7446
commit 28a91d9f6b
1 changed files with 42 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/src/main.ts
View File

@ -5,6 +5,8 @@ import { Size } from "./size";
import { Tooltip } from "./Tooltip";
import { loadReviews } from "./review";
const domSelect = <E extends Element>(query: string) => document.querySelector<E>(query);
const tooltip = new Tooltip(document.getElementById("tooltip")!);
type Square = {
@ -53,7 +55,7 @@ async function fetchAndDisplayZipCode(coords: Coordinate) {
currentBoundary = response.bbox;
displayZipCode(
document.querySelector<HTMLParagraphElement>("#zip-code")!,
domSelect<HTMLParagraphElement>("#zip-code")!,
response.nr,
response.navn,
response.visueltcenter ? { longitude: response.visueltcenter[0], latitude: response.visueltcenter[1] } : null,
@ -104,18 +106,18 @@ function displayZipCode(
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";
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";
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 setupMap(
@ -123,7 +125,7 @@ function setupMap(
coordsElement: HTMLParagraphElement,
zipCodeElement: HTMLParagraphElement,
) {
const mapImg = document.querySelector<HTMLImageElement>("#map")!;
const mapImg = domSelect<HTMLImageElement>("#map")!;
const fetcher = new Throttler(200);
mapImg.addEventListener('mousemove', async (event: MouseEvent) => {
@ -163,9 +165,9 @@ function setupMap(
function setupSearchBar(zipCodeElement: HTMLParagraphElement) {
const searchBar =
document.querySelector<HTMLFormElement>("#search-bar")!;
domSelect<HTMLFormElement>("#search-bar")!;
const searchInput =
document.querySelector<HTMLInputElement>("#search-input")!;
domSelect<HTMLInputElement>("#search-input")!;
searchInput.addEventListener("keydown", (event) => {
if (event.key.length === 1 && !"0123456789".includes(event.key))
@ -177,11 +179,9 @@ function setupSearchBar(zipCodeElement: HTMLParagraphElement) {
const inputValue = searchInput.value;
if (!/^\d+$/.test(inputValue)) return;
const data = await (
await fetch(
const data = await fetch(
`https://api.dataforsyningen.dk/postnumre?nr=${inputValue}`,
)
).json();
).then((response) => response.json())
displayZipCode(
zipCodeElement,
@ -201,16 +201,18 @@ function pageRedirects() {
reviewRedirect.addEventListener("click", () => {
mainElement.innerHTML = `<h2 id="reviews-title">Anmeldelser</h2>
<div id="reviews-container">${loadReviews()}</div>`
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 =
`<form id="search-bar">
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>
@ -221,12 +223,13 @@ function pageRedirects() {
<p id="zip-code">Postnummer ikke fundet</p>
<p id="mouse-position"></p>
<p id="coords"></p>
</div>`
</div>
`;
const [mousePositionElement, coordsElement, zipCodeElement] = [
"#mouse-position",
"#coords",
"#zip-code",
].map((id) => document.querySelector<HTMLParagraphElement>(id)!);
].map((id) => domSelect<HTMLParagraphElement>(id)!);
setupSearchBar(zipCodeElement);
setupMap(mousePositionElement, coordsElement, zipCodeElement);
const dropdown = document.getElementById("dropdown")!;
@ -240,11 +243,9 @@ function main() {
location.href = "https://mozilla.org/firefox";
}
const [mousePositionElement, coordsElement, zipCodeElement] = [
"#mouse-position",
"#coords",
"#zip-code",
].map((id) => document.querySelector<HTMLParagraphElement>(id)!);
const mousePositionElement = domSelect<HTMLParagraphElement>("#mouse-position")!;
const coordsElement = domSelect<HTMLParagraphElement>("#coords")!;
const zipCodeElement = domSelect<HTMLParagraphElement>("#zip-code")!;
setupSearchBar(zipCodeElement);
setupMap(mousePositionElement, coordsElement, zipCodeElement);