diff --git a/frontend/.prettierrc.tml b/frontend/.prettierrc.tml new file mode 100644 index 0000000..7365bf2 --- /dev/null +++ b/frontend/.prettierrc.tml @@ -0,0 +1,6 @@ +# .prettierrc.toml +trailingComma = "all" +tabWidth = 4 +semi = true +singleQuote = false +jsxSingleQuote = false diff --git a/frontend/.prettierrc.toml b/frontend/.prettierrc.toml new file mode 100644 index 0000000..7365bf2 --- /dev/null +++ b/frontend/.prettierrc.toml @@ -0,0 +1,6 @@ +# .prettierrc.toml +trailingComma = "all" +tabWidth = 4 +semi = true +singleQuote = false +jsxSingleQuote = false diff --git a/frontend/Makefile b/frontend/Makefile new file mode 100644 index 0000000..88ce765 --- /dev/null +++ b/frontend/Makefile @@ -0,0 +1,15 @@ + +.PHONY: build watch check clean + +build: + esbuild src/main.ts --outfile=bundle.js --minify --sourcemap --bundle + +watch: + esbuild src/main.ts --outfile=bundle.js --minify --sourcemap --bundle --watch + +check: + tsc --noEmit -p tsconfig.json + +clean: + rm -rf bundle.js bundle.js.map + diff --git a/frontend/build.sh b/frontend/build.sh deleted file mode 100644 index 34393ca..0000000 --- a/frontend/build.sh +++ /dev/null @@ -1,5 +0,0 @@ - -set -xe - -esbuild src/main.ts --outfile=bundle.js --minify --sourcemap --bundle - diff --git a/frontend/build_watch.sh b/frontend/build_watch.sh deleted file mode 100644 index 817b0ce..0000000 --- a/frontend/build_watch.sh +++ /dev/null @@ -1,5 +0,0 @@ - -set -xe - -esbuild src/main.ts --outfile=bundle.js --minify --sourcemap --bundle --watch - diff --git a/frontend/bundle.js.map b/frontend/bundle.js.map deleted file mode 100644 index dab7829..0000000 --- a/frontend/bundle.js.map +++ /dev/null @@ -1,7 +0,0 @@ -{ - "version": 3, - "sources": ["src/main.ts"], - "sourcesContent": ["\nfunction main() {\n console.log(\"hello world\");\n}\n\nmain();\n\n"], - "mappings": "MACA,SAASA,GAAO,CACZ,QAAQ,IAAI,aAAa,CAC7B,CAEAA,EAAK", - "names": ["main"] -} diff --git a/frontend/check.sh b/frontend/check.sh deleted file mode 100644 index 15d6550..0000000 --- a/frontend/check.sh +++ /dev/null @@ -1,5 +0,0 @@ - -set -xe - -tsc src/main.ts --noEmit - diff --git a/frontend/index.html b/frontend/index.html index 3744dde..4e1d911 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -5,14 +5,25 @@ Postnummer App + + + + +
-

Postnummer App

+

Postnummer App

+
-
+

+

+

diff --git a/frontend/map.jpg b/frontend/map.jpg index 14c1f33..94f99b6 100644 Binary files a/frontend/map.jpg and b/frontend/map.jpg differ diff --git a/frontend/src/main.ts b/frontend/src/main.ts index 20f7a33..e96c5f8 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -1,7 +1,131 @@ +import { Throttler } from "./utils"; + +type Position = { + x: number; + y: number; +}; + +type Size = { width: number; height: number }; + +type Coordinate = { + longitude: number; + latitude: number; +}; + +type ZipCodeReverseResponse = { + nr: number | null; + navn: string; +}; + +async function fetchZipCode({ + longitude, + latitude, +}: Coordinate): Promise { + return fetch( + `https://api.dataforsyningen.dk/postnumre/reverse?x=${longitude}&y=${latitude}`, + ) + .then((request) => request.json()) + .then((data) => { + let zipCode = parseInt(data.nr); + return { + ...data, + nr: isNaN(zipCode) ? null : zipCode, + } as ZipCodeReverseResponse; + }) + .catch(() => null as never); +} + +function convertPixelsToCoordinate(mouse: Position, map: Size): Coordinate { + const scalar = { x: 8, y: 3.6 }; + const offset = { x: 6.2, y: 57.93 }; + return { + longitude: (mouse.x / map.width) * scalar.x + offset.x, + latitude: Math.abs((mouse.y / map.height) * scalar.y - offset.y), + }; +} + +function displayMousePosition(element: HTMLParagraphElement, mouse: Position) { + element.innerHTML = `Mouse position: (${mouse.x}px, ${mouse.y}px)`; +} + +function displayCoords(element: HTMLParagraphElement, coords: Coordinate) { + element.innerHTML = `Coords: ${coords.longitude.toFixed( + 3, + )}, ${coords.latitude.toFixed(3)}`; +} + +function displayZipCode( + element: HTMLParagraphElement, + zipCode: number | null, + name: string, +) { + element.innerHTML = + zipCode === null + ? `Postnummer ikke fundet` + : `Postnummer: ${zipCode}, ${name}`; +} + +function setupMap( + mousePositionElement: HTMLParagraphElement, + coordsElement: HTMLParagraphElement, + zipCodeElement: HTMLParagraphElement, +) { + const mapImg = document.querySelector("#map")!; + const fetcher = new Throttler(500); + + mapImg.onmousemove = 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 () => { + const response = await fetchZipCode(coords); + displayZipCode(zipCodeElement, response.nr, response.navn); + }); + }; + + mapImg.onmouseleave = (_event: MouseEvent) => { + [mousePositionElement, coordsElement, zipCodeElement].forEach( + (e) => (e.innerHTML = ""), + ); + }; +} + +function setupSearchBar(zipCodeElement: HTMLParagraphElement) { + const searchInput = + document.querySelector("#search-input")!; + const searchButton = + document.querySelector("#search-button")!; + + searchButton.onclick = async (_event: MouseEvent) => { + const inputValue = searchInput.value; + if (!/^\d+$/.test(inputValue)) return; + const data = await ( + await fetch( + `https://api.dataforsyningen.dk/postnumre?nr=${inputValue}`, + ) + ).json(); + displayZipCode( + zipCodeElement, + parseInt(data[0]["nr"]), + data[0]["navn"], + ); + }; +} function main() { - console.log("hello world"); + const [mousePositionElement, coordsElement, zipCodeElement] = [ + "#mouse-position", + "#coords", + "#zip-code", + ].map((id) => document.querySelector(id)!); + + setupSearchBar(zipCodeElement); + setupMap(mousePositionElement, coordsElement, zipCodeElement); } main(); - diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts new file mode 100644 index 0000000..c55e284 --- /dev/null +++ b/frontend/src/utils.ts @@ -0,0 +1,17 @@ +export class Throttler { + private hasBeenCalledWithinTime = false; + private lastCallFunc: (() => any) | null = null; + + public constructor(private minimumTimeBetweenCall: number) {} + + public call(func: () => any) { + this.lastCallFunc = func; + if (this.hasBeenCalledWithinTime) return; + this.hasBeenCalledWithinTime = true; + func(); + setTimeout(() => { + this.hasBeenCalledWithinTime = false; + if (this.lastCallFunc) this.lastCallFunc(); + }, this.minimumTimeBetweenCall); + } +} diff --git a/frontend/style.css b/frontend/style.css index 6c709d3..d52be07 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -6,13 +6,69 @@ body { margin: 0; height: 100vh; + font-family: "Open Sans", sans-serif; +} + +#topbar { + background-color: #aaa; + color: #000; + text-align: center; + margin: 0; + padding: 0.5rem; + /* box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); */ +} + +#topbar > h1 { + margin: 0; + font-size: 2rem; } main { text-align: center; + padding: 1rem; + margin: auto; + width: 50%; +} + +main > * { + margin: 2px; +} + +#search-bar { + width: 100%; + display: flex; + flex-direction: row; + padding: 5px; + border: 1px solid #666; + border-radius: 5px; +} + +#search-input { + width: 100%; + font-size: 1rem; + border: 0; + outline: 0; + padding-bottom: 2px; +} + +#search-input:focus { + border-bottom: 2px solid black; + padding-bottom: 0; +} + +#search-button { + width: 5rem; + font-size: 1rem; } #map { - max-width: 100%; + width: 100%; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.4); +} + +@media screen and (max-width: 1000px) { + main { + width: 100%; + } } diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json new file mode 100644 index 0000000..a5a00b6 --- /dev/null +++ b/frontend/tsconfig.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "target": "es6", + "module": "es6", + "moduleResolution": "nodenext", + "skipLibCheck": true, + "lib": ["es6", "dom"], + "strict": true, + "noEmit": true, + "pretty": true + }, + "include": ["./src/**/*.ts"] +}