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

83
frontend/src/main.ts
View File

@ -5,6 +5,8 @@ import { Size } from "./size";
import { Tooltip } from "./Tooltip"; import { Tooltip } from "./Tooltip";
import { loadReviews } from "./review"; import { loadReviews } from "./review";
const domSelect = <E extends Element>(query: string) => document.querySelector<E>(query);
const tooltip = new Tooltip(document.getElementById("tooltip")!); const tooltip = new Tooltip(document.getElementById("tooltip")!);
type Square = { type Square = {
@ -43,9 +45,9 @@ let currentBoundary: Array<number> | null = null;
async function fetchAndDisplayZipCode(coords: Coordinate) { async function fetchAndDisplayZipCode(coords: Coordinate) {
if (currentBoundary && if (currentBoundary &&
coords.longitude > currentBoundary[0] && coords.longitude > currentBoundary[0] &&
coords.latitude > currentBoundary[1] && coords.latitude > currentBoundary[1] &&
coords.longitude < currentBoundary[2] && coords.longitude < currentBoundary[2] &&
coords.latitude < currentBoundary[3] coords.latitude < currentBoundary[3]
) return; ) return;
const response = await fetchZipCode(coords); const response = await fetchZipCode(coords);
@ -53,7 +55,7 @@ async function fetchAndDisplayZipCode(coords: Coordinate) {
currentBoundary = response.bbox; currentBoundary = response.bbox;
displayZipCode( displayZipCode(
document.querySelector<HTMLParagraphElement>("#zip-code")!, domSelect<HTMLParagraphElement>("#zip-code")!,
response.nr, response.nr,
response.navn, response.navn,
response.visueltcenter ? { longitude: response.visueltcenter[0], latitude: response.visueltcenter[1] } : null, response.visueltcenter ? { longitude: response.visueltcenter[0], latitude: response.visueltcenter[1] } : null,
@ -104,18 +106,18 @@ function displayZipCode(
const position = convertCoordinateToPixels(center, mapSize); const position = convertCoordinateToPixels(center, mapSize);
const rect = document.getElementById("map")!.getBoundingClientRect(); const rect = document.getElementById("map")!.getBoundingClientRect();
dot.style.display = "block"; dot.style.display = "block";
dot.style.left = position.x + rect.left + "px"; dot.style.left = `${position.x + rect.left}px`;
dot.style.top = position.y + rect.top + document.documentElement.scrollTop + "px"; dot.style.top = `${position.y + rect.top + document.documentElement.scrollTop}px`;
// Draw boundary // Draw boundary
const bottomleft = convertCoordinateToPixels({ longitude: boundary.x1, latitude: boundary.y1 }, mapSize); const bottomleft = convertCoordinateToPixels({ longitude: boundary.x1, latitude: boundary.y1 }, mapSize);
const topright = convertCoordinateToPixels({ longitude: boundary.x2, latitude: boundary.y2 }, mapSize); const topright = convertCoordinateToPixels({ longitude: boundary.x2, latitude: boundary.y2 }, mapSize);
boundaryElem.style.display = "block"; boundaryElem.style.display = "block";
boundaryElem.style.left = bottomleft.x + rect.left + "px"; boundaryElem.style.left = `${bottomleft.x + rect.left}px`;
boundaryElem.style.top = topright.y + rect.top + document.documentElement.scrollTop + "px"; boundaryElem.style.top = `${topright.y + rect.top + document.documentElement.scrollTop}px`;
boundaryElem.style.width = topright.x - bottomleft.x + "px"; boundaryElem.style.width = `${topright.x - bottomleft.x}px`;
boundaryElem.style.height = bottomleft.y - topright.y + "px"; boundaryElem.style.height = `${bottomleft.y - topright.y}px`;
} }
function setupMap( function setupMap(
@ -123,7 +125,7 @@ function setupMap(
coordsElement: HTMLParagraphElement, coordsElement: HTMLParagraphElement,
zipCodeElement: HTMLParagraphElement, zipCodeElement: HTMLParagraphElement,
) { ) {
const mapImg = document.querySelector<HTMLImageElement>("#map")!; const mapImg = domSelect<HTMLImageElement>("#map")!;
const fetcher = new Throttler(200); const fetcher = new Throttler(200);
mapImg.addEventListener('mousemove', async (event: MouseEvent) => { mapImg.addEventListener('mousemove', async (event: MouseEvent) => {
@ -163,9 +165,9 @@ function setupMap(
function setupSearchBar(zipCodeElement: HTMLParagraphElement) { function setupSearchBar(zipCodeElement: HTMLParagraphElement) {
const searchBar = const searchBar =
document.querySelector<HTMLFormElement>("#search-bar")!; domSelect<HTMLFormElement>("#search-bar")!;
const searchInput = const searchInput =
document.querySelector<HTMLInputElement>("#search-input")!; 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))
@ -177,11 +179,9 @@ function setupSearchBar(zipCodeElement: HTMLParagraphElement) {
const inputValue = searchInput.value; const inputValue = searchInput.value;
if (!/^\d+$/.test(inputValue)) return; if (!/^\d+$/.test(inputValue)) return;
const data = await ( const data = await fetch(
await fetch( `https://api.dataforsyningen.dk/postnumre?nr=${inputValue}`,
`https://api.dataforsyningen.dk/postnumre?nr=${inputValue}`, ).then((response) => response.json())
)
).json();
displayZipCode( displayZipCode(
zipCodeElement, zipCodeElement,
@ -199,34 +199,37 @@ function pageRedirects() {
const mapRedirect = document.getElementById("map-redirect")! const mapRedirect = document.getElementById("map-redirect")!
const mainElement = document.getElementById("main")! const mainElement = document.getElementById("main")!
reviewRedirect.addEventListener("click", () => { reviewRedirect.addEventListener("click", () => {
mainElement.innerHTML = `<h2 id="reviews-title">Anmeldelser</h2> mainElement.innerHTML = /*html*/`
<div id="reviews-container">${loadReviews()}</div>` <h2 id="reviews-title">Anmeldelser</h2>
<div id="reviews-container">${loadReviews()}</div>
`;
const dropdown = document.getElementById("dropdown")!; const dropdown = document.getElementById("dropdown")!;
dropdown.classList.remove("enabled"); dropdown.classList.remove("enabled");
}); });
mapRedirect.addEventListener("click", () => { mapRedirect.addEventListener("click", () => {
mainElement.innerHTML = mainElement.innerHTML = /*html*/`
`<form id="search-bar"> <form id="search-bar">
<input id="search-input" type="text" placeholder="Postnummer" maxlength="4"> <input id="search-input" type="text" placeholder="Postnummer" maxlength="4">
<button id="search-button" type="submit">Search</button> <button id="search-button" type="submit">Search</button>
</form> </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"> <div id="info">
<p id="zip-code">Postnummer ikke fundet</p> <p id="zip-code">Postnummer ikke fundet</p>
<p id="mouse-position"></p> <p id="mouse-position"></p>
<p id="coords"></p> <p id="coords"></p>
</div>` </div>
`;
const [mousePositionElement, coordsElement, zipCodeElement] = [ const [mousePositionElement, coordsElement, zipCodeElement] = [
"#mouse-position", "#mouse-position",
"#coords", "#coords",
"#zip-code", "#zip-code",
].map((id) => document.querySelector<HTMLParagraphElement>(id)!); ].map((id) => domSelect<HTMLParagraphElement>(id)!);
setupSearchBar(zipCodeElement); setupSearchBar(zipCodeElement);
setupMap(mousePositionElement, coordsElement, zipCodeElement); setupMap(mousePositionElement, coordsElement, zipCodeElement);
const dropdown = document.getElementById("dropdown")!; const dropdown = document.getElementById("dropdown")!;
@ -240,11 +243,9 @@ function main() {
location.href = "https://mozilla.org/firefox"; location.href = "https://mozilla.org/firefox";
} }
const [mousePositionElement, coordsElement, zipCodeElement] = [ const mousePositionElement = domSelect<HTMLParagraphElement>("#mouse-position")!;
"#mouse-position", const coordsElement = domSelect<HTMLParagraphElement>("#coords")!;
"#coords", const zipCodeElement = domSelect<HTMLParagraphElement>("#zip-code")!;
"#zip-code",
].map((id) => document.querySelector<HTMLParagraphElement>(id)!);
setupSearchBar(zipCodeElement); setupSearchBar(zipCodeElement);
setupMap(mousePositionElement, coordsElement, zipCodeElement); setupMap(mousePositionElement, coordsElement, zipCodeElement);