From 78b6206bede755fe0619539fd10fee061f63ad84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9on=20Melein?= <leon@thesociallions.nl>
Date: Sun, 18 Aug 2024 13:54:27 +0200
Subject: [PATCH] Search experiment with lunr.js

---
 package-lock.json |  7 +++++
 package.json      |  1 +
 src/js/main.js    | 77 ++++++++++++++++++++++++++++++++++++++++++-----
 src/js/search.js  | 14 +++++++++
 4 files changed, 92 insertions(+), 7 deletions(-)
 create mode 100644 src/js/search.js

diff --git a/package-lock.json b/package-lock.json
index 1703743..e4c2811 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@fontsource/inter": "^5.0.20",
         "flag-icons": "^7.2.3",
+        "lunr": "^2.3.9",
         "maplibre-gl": "^4.1.3"
       },
       "devDependencies": {
@@ -932,6 +933,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/lunr": {
+      "version": "2.3.9",
+      "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
+      "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==",
+      "license": "MIT"
+    },
     "node_modules/maplibre-gl": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-4.1.3.tgz",
diff --git a/package.json b/package.json
index 63bae87..d716fc4 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "@fontsource/inter": "^5.0.20",
     "flag-icons": "^7.2.3",
+    "lunr": "^2.3.9",
     "maplibre-gl": "^4.1.3"
   }
 }
diff --git a/src/js/main.js b/src/js/main.js
index 56298cf..90c205f 100755
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -1,11 +1,63 @@
 import { geoIpLocate } from "./geoIP"
+import {searchSetup } from "./search"
 
-// Search
-// document.getElementById('searchbar').addEventListener('input', e => {
-//     console.log(e.target.value);
-// });
-const searchElement = document.getElementById('searchbar');
+var documents = [
+    {
+        "id": 304872,
+        "name": "De Grote Speelweide, Amsterdamse Bos",
+        "alternate_name": "De Grote Speelweide",
+        "current_status": "WAARSCHUWING",
+        "description": "De Grote Speelweide ligt in het Amsterdamse Bos. De waterdiepte van de vijver varieert van 1 tot 1,5 meter.",
+        "photos": "NH-089-001 Amsterdamse Bos.png",
+        "website": null,
+        "lat": 52.3197,
+        "lon": 4.8282,
+        "eu_designation": "2",
+        "e_coli": 77.0,
+        "int_ent": 230.0,
+        "amenities": [
+            5943892, 5943898, 5943927, 5943930, 5943907, 5943893, 5943911, 5943913
+        ],
+        "warnings": null
+    },
+    {
+        "id": 1153,
+        "name": "Nieuwe Meer, Noordoever",
+        "alternate_name": "Noordoever",
+        "current_status": "goed",
+        "description": "De Nieuwe Meer ligt ten zuidwesten van Amsterdam. De maximum diepte is ongeveer 30 meter.\r\nLet op! Deze locatie wordt momenteel niet bemonsterd en is gekoppeld aan Nieuwe Meer Westzijde Oeverlanden. De waterkwaliteitsgegevens zijn daarom hetzelfde als bij de Westzijde Oeverlanden.",
+        "photos": "Nieuwe Meer Noordoever.PNG",
+        "website": null,
+        "lat": 52.335,
+        "lon": 4.8157,
+        "eu_designation": 0,
+        "e_coli": null,
+        "int_ent": null,
+        "amenities": null,
+        "warnings": null
+    },
+    {
+        "id": 7960110,
+        "name": "Zwemsteiger Nieuwe Meer",
+        "alternate_name": "Nieuwe Meer",
+        "current_status": "goed",
+        "description": "De zwemsteiger Nieuwe Meer ligt in het Amsterdamse Bos, aan de zuidoostkant van de Nieuwe Meer.",
+        "photos": null,
+        "website": null,
+        "lat": 52.3329,
+        "lon": 4.8465,
+        "eu_designation": 0,
+        "e_coli": 46.0,
+        "int_ent": 15.0,
+        "amenities": [5943892, 5943893, 5943911, 5943930],
+        "warnings": null
+    }
+]
 
+function filterById(jsonObject, id) { return jsonObject.filter(function (jsonObject) { return (jsonObject['id'] == id); })[0]; }
+
+const searchElement = document.getElementById('searchbar');
+const searchHandler = searchSetup(documents);
 
 document.getElementById('location').addEventListener('click', e => {
     navigator.geolocation.getCurrentPosition((position) => {
@@ -23,9 +75,15 @@ const searchData = (event) => {
     console.log("Searching...", value);
 
     if (value.length > 0){
+        resultsElement.innerHTML = ""
         placeholderElement.classList.add('hidden')
         resultsElement.classList.remove('hidden')
-        resultsElement.innerHTML = `<h3 class="result-card">${value}</h3>`
+        var results = searchHandler.search(value);
+        results.forEach(element => {
+            var data = filterById(documents, element.ref);
+            console.log(data);
+            resultsElement.innerHTML += `<p class="result-card">${data.name}</p>`;
+        });
     } else {
         placeholderElement.classList.remove('hidden')
         resultsElement.classList.add('hidden')
@@ -45,8 +103,13 @@ const debounce = (callback, waitTime) => {
 }
 
 const debounceHandler = debounce(searchData, 300);
-searchElement.addEventListener('input', debounceHandler);
 
+searchElement.addEventListener('input', debounceHandler);
+searchElement.addEventListener("keyup", (event) => {
+    if (event.key === "Enter") {
+        console.log("Enter!", event.target.value)
+    }
+})
 
 // Approximate location based on IP when geolocation is not available
 await navigator.permissions.query({ name: 'geolocation' }).then(async (value) => {
diff --git a/src/js/search.js b/src/js/search.js
new file mode 100644
index 0000000..59beda1
--- /dev/null
+++ b/src/js/search.js
@@ -0,0 +1,14 @@
+import lunr from "lunr"
+
+export function searchSetup(documents){
+
+    var idx = lunr(function () {
+        this.ref('id')
+        this.field('name')
+
+        documents.forEach(function (doc) {
+            this.add(doc)
+        }, this)
+    })
+    return idx;
+}
\ No newline at end of file