From c9d372fd1d578292cfed1b2dacf47c8c9b7c7e11 Mon Sep 17 00:00:00 2001
From: ReimarPB <reimarpb@gmail.com>
Date: Mon, 6 Feb 2023 20:28:16 +0100
Subject: [PATCH] Fix search bar

---
 frontend/index.html  |  8 ++++----
 frontend/src/main.ts | 18 +++++++++++++-----
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 0631f40..2ececee 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -15,10 +15,10 @@
             <h1>Postnummer App</h1>
         </div>
         <main>
-            <div id="search-bar">
-                <input id="search-input" placeholder="Postnummer">
-                <button id="search-button">Search</button>
-            </div>
+            <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"><br>
             <p id="mouse-position"></p>
             <p id="coords"></p>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index e96c5f8..2ac4f71 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -96,12 +96,18 @@ function setupMap(
 }
 
 function setupSearchBar(zipCodeElement: HTMLParagraphElement) {
+    const searchBar =
+        document.querySelector<HTMLFormElement>("#search-bar");
     const searchInput =
         document.querySelector<HTMLInputElement>("#search-input")!;
-    const searchButton =
-        document.querySelector<HTMLButtonElement>("#search-button")!;
 
-    searchButton.onclick = async (_event: MouseEvent) => {
+    // Prevent typing letters
+    searchBar.onkeypress = (event: KeyboardEvent) => {console.log(event);
+        event.key !== "Enter" || !isNaN(parseInt(event.key));}
+
+    searchBar.onsubmit = async (event: MouseEvent) => {
+        event.preventDefault();
+
         const inputValue = searchInput.value;
         if (!/^\d+$/.test(inputValue)) return;
         const data = await (
@@ -109,11 +115,13 @@ function setupSearchBar(zipCodeElement: HTMLParagraphElement) {
                 `https://api.dataforsyningen.dk/postnumre?nr=${inputValue}`,
             )
         ).json();
+
         displayZipCode(
             zipCodeElement,
-            parseInt(data[0]["nr"]),
-            data[0]["navn"],
+            data.length ? parseInt(data[0]["nr"]) : null,
+            data.length ? data[0]["navn"] : null,
         );
+
     };
 }