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

Optimize amount of API calls

Browse Source
This commit is contained in:
ReiMerc 2023-02-09 15:02:26 +01:00
parent f9472dc426
commit 8b95ade0be
3 changed files with 48 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/Throttler.ts
View File

@ -1,17 +1,23 @@
export class Throttler {
private hasBeenCalledWithinTime = false;
private lastCallFunc: (() => any) | null = null;
private lastCallFunc: (() => Promise<any>) | null = null;
private timeout: int | null = null;
public constructor(private minimumTimeBetweenCall: number) {}
public call(func: () => any) {
public async call(func: () => any) {
this.lastCallFunc = func;
if (this.hasBeenCalledWithinTime) return;
this.hasBeenCalledWithinTime = true;
func();
setTimeout(() => {
this.hasBeenCalledWithinTime = false;
if (this.timeout) clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
if (this.lastCallFunc) this.lastCallFunc();
}, this.minimumTimeBetweenCall);
if (this.hasBeenCalledWithinTime) return;
this.hasBeenCalledWithinTime = true;
await func();
setTimeout(() => this.hasBeenCalledWithinTime = false, this.minimumTimeBetweenCall);
}
}

63
frontend/src/main.ts
View File

@ -38,6 +38,28 @@ async function fetchZipCode({
.catch(() => null as never);
}
let currentBoundary;
async function fetchAndDisplayZipCode(coords: Coordinate) {
if (currentBoundary &&
coords.longitude > currentBoundary[0] &&
coords.latitude > currentBoundary[1] &&
coords.longitude < currentBoundary[2] &&
coords.latitude < currentBoundary[3]
) return;
const response = await fetchZipCode(coords);
currentBoundary = response.bbox;
displayZipCode(
document.getElementById("zip-code")!,
response.nr,
response.navn,
response.visueltcenter ? { longitude: response.visueltcenter[0], latitude: response.visueltcenter[1] } : null,
response.bbox ? { x1: response.bbox[0], y1: response.bbox[1], x2: response.bbox[2], y2: response.bbox[3] } : null,
);
}
function displayMousePosition(element: HTMLParagraphElement, mouse: Position) {
element.innerHTML = `Mouse position: <code>(${mouse.x}px, ${mouse.y}px)</code>`;
}
@ -63,9 +85,11 @@ function displayZipCode(
tooltip.setText(zipCode ? `<code>${zipCode}</code> ${name}` : "");
const dot = document.getElementById("dot")!;
const boundaryElem = document.getElementById("boundary")!;
if (!center) {
if (!center || !boundary) {
dot.style.display = "none";
boundaryElem.style.display = "none";
return;
}
@ -83,12 +107,10 @@ function displayZipCode(
dot.style.top = position.y + rect.top + document.documentElement.scrollTop + "px";
// Draw boundary
if (!boundary) return;
const bottomleft = convertCoordinateToPixels({ longitude: boundary.x1, latitude: boundary.y1 }, mapSize);
const topright = convertCoordinateToPixels({ longitude: boundary.x2, latitude: boundary.y2 }, mapSize);
const boundaryElem = document.getElementById("boundary")!;
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";
@ -106,52 +128,35 @@ function setupMap(
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,
response.visueltcenter ? { longitude: response.visueltcenter[0], latitude: response.visueltcenter[1] } : null,
response.bbox ? { x1: response.bbox[0], y1: response.bbox[1], x2: response.bbox[2], y2: response.bbox[3] } : null,
);
});
fetcher.call(async () => await fetchAndDisplayZipCode(coords));
};
mapImg.onmouseup = 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,
response.visueltcenter ? { longitude: response.visueltcenter[0], latitude: response.visueltcenter[1] } : null,
response.bbox ? { x1: response.bbox[0], y1: response.bbox[1], x2: response.bbox[2], y2: response.bbox[3] } : null,
);
});
fetcher.call(async () => await fetchAndDisplayZipCode(coords));
}
mapImg.onmouseleave = (_event: MouseEvent) => {
document.getElementById("dot")!.style.display = "none";
[mousePositionElement, coordsElement].forEach(
(e) => (e.innerHTML = ""),
);
zipCodeElement.innerHTML = "Postnummer ikke fundet";
displayZipCode(zipCodeElement, null, null, null, null);
};
}

1
frontend/style.css
View File

@ -194,6 +194,7 @@ code {
position: absolute;
display: none;
z-index: 2;
pointer-events: none;
}
#tooltip {