Compare commits
1 Commits
main
...
frontend_f
| Author | SHA1 | Date | |
|---|---|---|---|
| a5b7800784 |
@ -15,29 +15,5 @@
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
|
||||
</head>
|
||||
<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>
|
||||
</html>
|
||||
|
||||
@ -120,11 +120,136 @@ function displayZipCode(
|
||||
boundaryElem.style.height = `${bottomleft.y - topright.y}px`;
|
||||
}
|
||||
|
||||
function setupMap(
|
||||
mousePositionElement: HTMLParagraphElement,
|
||||
coordsElement: HTMLParagraphElement,
|
||||
zipCodeElement: HTMLParagraphElement,
|
||||
) {
|
||||
type Component = {
|
||||
children?: Component[],
|
||||
render(): string,
|
||||
hydrate?(update: (action?: () => Promise<any>) => Promise<void>): Promise<void>,
|
||||
};
|
||||
|
||||
function makeReviewsPage(): Component {
|
||||
return {
|
||||
render: () => /*html*/`
|
||||
<h2 id="reviews-title">Anmeldelser</h2>
|
||||
<div id="reviews-container">${loadReviews()}</div>
|
||||
`,
|
||||
}
|
||||
}
|
||||
|
||||
function makeSearchBar(updateZipCodeInfo: (zipCode: string) => Promise<void>): Component {
|
||||
return {
|
||||
render: () => /*html*/`
|
||||
<form id="search-bar">
|
||||
<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) => {
|
||||
if (event.key.length === 1 && !"0123456789".includes(event.key))
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
searchBar.addEventListener("submit", async (event: Event) => {
|
||||
event.preventDefault();
|
||||
update(() => updateZipCodeInfo(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;
|
||||
const data = await fetch(
|
||||
`https://api.dataforsyningen.dk/postnumre?nr=${inputValue}`,
|
||||
).then((response) => response.json())
|
||||
|
||||
zipCodeInfo.zipCode = data.length ? parseInt(data[0]["nr"]) : null;
|
||||
zipCodeInfo.name = data.length ? data[0]["navn"] : null;
|
||||
zipCodeInfo.center = data.length ? { longitude: data[0]["visueltcenter"][0], latitude: data[0]["visueltcenter"][1] } : 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;
|
||||
});
|
||||
const infoBox = makeInfoBox(zipCodeInfo);
|
||||
return {
|
||||
children: [searchBar, infoBox],
|
||||
render: () => /*html*/`
|
||||
${searchBar.render()}
|
||||
<img src="assets/map.jpg" id="map">
|
||||
<div id="dot"></div>
|
||||
<div id="boundary"></div>
|
||||
`,
|
||||
async hydrate() {
|
||||
const mousePositionElement = domSelect<HTMLParagraphElement>("#mouse-position")!;
|
||||
const coordsElement = domSelect<HTMLParagraphElement>("#coords")!;
|
||||
const zipCodeElement = domSelect<HTMLParagraphElement>("#zip-code")!;
|
||||
const mapImg = domSelect<HTMLImageElement>("#map")!;
|
||||
const fetcher = new Throttler(200);
|
||||
|
||||
@ -161,97 +286,93 @@ function setupMap(
|
||||
mapImg.addEventListener("mouseleave", (_event: MouseEvent) => {
|
||||
displayZipCode(zipCodeElement, null, null, null, null);
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function setupSearchBar(zipCodeElement: HTMLParagraphElement) {
|
||||
const searchBar =
|
||||
domSelect<HTMLFormElement>("#search-bar")!;
|
||||
const searchInput =
|
||||
domSelect<HTMLInputElement>("#search-input")!;
|
||||
|
||||
searchInput.addEventListener("keydown", (event) => {
|
||||
if (event.key.length === 1 && !"0123456789".includes(event.key))
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
searchBar.addEventListener("submit", async (event: Event) => {
|
||||
event.preventDefault();
|
||||
|
||||
const inputValue = searchInput.value;
|
||||
if (!/^\d+$/.test(inputValue)) return;
|
||||
const data = await fetch(
|
||||
`https://api.dataforsyningen.dk/postnumre?nr=${inputValue}`,
|
||||
).then((response) => response.json())
|
||||
|
||||
displayZipCode(
|
||||
zipCodeElement,
|
||||
data.length ? parseInt(data[0]["nr"]) : null,
|
||||
data.length ? data[0]["navn"] : 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,
|
||||
);
|
||||
|
||||
});
|
||||
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 pageRedirects() {
|
||||
const reviewRedirect = document.getElementById("reviews-redirect")!
|
||||
const mapRedirect = document.getElementById("map-redirect")!
|
||||
const mainElement = document.getElementById("main")!
|
||||
function makeTooltip(): Component {
|
||||
return {
|
||||
render: () => /*html*/`
|
||||
<div id="tooltip"></div>
|
||||
`,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
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">
|
||||
<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>
|
||||
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>
|
||||
`;
|
||||
const [mousePositionElement, coordsElement, zipCodeElement] = [
|
||||
"#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");
|
||||
|
||||
</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() {
|
||||
if (navigator.userAgent.match("Chrome")) {
|
||||
location.href = "https://mozilla.org/firefox";
|
||||
}
|
||||
|
||||
const mousePositionElement = domSelect<HTMLParagraphElement>("#mouse-position")!;
|
||||
const coordsElement = domSelect<HTMLParagraphElement>("#coords")!;
|
||||
const zipCodeElement = domSelect<HTMLParagraphElement>("#zip-code")!;
|
||||
|
||||
setupSearchBar(zipCodeElement);
|
||||
setupMap(mousePositionElement, coordsElement, zipCodeElement);
|
||||
setTopbarOffset();
|
||||
addToggleDropdownListener();
|
||||
pageRedirects();
|
||||
const bodyElement = document.querySelector<HTMLElement>("body")!;
|
||||
renderComponent(bodyElement, makeLayout());
|
||||
}
|
||||
|
||||
main();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user