frontend: small format and refactor
This commit is contained in:
parent
5e66bc7446
commit
28a91d9f6b
@ -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 = {
|
||||
@ -43,9 +45,9 @@ let currentBoundary: Array<number> | null = null;
|
||||
async function fetchAndDisplayZipCode(coords: Coordinate) {
|
||||
if (currentBoundary &&
|
||||
coords.longitude > currentBoundary[0] &&
|
||||
coords.latitude > currentBoundary[1] &&
|
||||
coords.latitude > currentBoundary[1] &&
|
||||
coords.longitude < currentBoundary[2] &&
|
||||
coords.latitude < currentBoundary[3]
|
||||
coords.latitude < currentBoundary[3]
|
||||
) return;
|
||||
|
||||
const response = await fetchZipCode(coords);
|
||||
@ -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);
|
||||
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(
|
||||
`https://api.dataforsyningen.dk/postnumre?nr=${inputValue}`,
|
||||
)
|
||||
).json();
|
||||
const data = await fetch(
|
||||
`https://api.dataforsyningen.dk/postnumre?nr=${inputValue}`,
|
||||
).then((response) => response.json())
|
||||
|
||||
displayZipCode(
|
||||
zipCodeElement,
|
||||
@ -199,34 +199,37 @@ function pageRedirects() {
|
||||
const mapRedirect = document.getElementById("map-redirect")!
|
||||
const mainElement = document.getElementById("main")!
|
||||
|
||||
|
||||
|
||||
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">
|
||||
<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>`
|
||||
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">
|
||||
<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>
|
||||
`;
|
||||
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);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user