From e1fa366a350cdcfeeee7bb33369d5e5392876189 Mon Sep 17 00:00:00 2001
From: Fredrik Bolmsten <fredrik.bolmsten@ess.eu>
Date: Tue, 11 Jul 2023 15:28:48 +0200
Subject: [PATCH] index file for use by IAM

---
 public/index.html | 214 ++++++++++++++++++++++++++--------------------
 1 file changed, 121 insertions(+), 93 deletions(-)
diff --git a/public/index.html b/public/index.html
index 14cb890..6cfd927 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,107 +1,135 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <meta charset="UTF-8">
+  <head>
+    <meta charset="UTF-8" />
     <title>Searchable Dropdown</title>
     <style>
-        body {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh; /* Adjust this value to fit your needs */
-            }
+      body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh; /* Adjust this value to fit your needs */
+      }
 
-        #countrySelect {
-            padding: 6px;
-            font-size: 16px;
-            width: 100%;
-            margin-bottom: 16px;
-        }
+      .dropdown {
+        position: relative;
+        display: inline-block;
+      }
 
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-        
-        .dropdown-input {
-            width: 200px;
-            padding: 5px;
-            font-size: 16px;
-        }
-        
-        .dropdown-list {
-            position: absolute;
-            z-index: 1;
-            width: 100%;
-            max-height: 200px;
-            overflow-y: auto;
-            background-color: #f9f9f9;
-            border: 1px solid #ccc;
-            padding: 5px;
-        }
-        
-        .dropdown-list-item {
-            padding: 5px;
-            cursor: pointer;
-        }
-        
-        .dropdown-list-item:hover {
-            background-color: #ddd;
-        }
+      .dropdown-input {
+        width: 200px;
+        padding: 5px;
+        font-size: 16px;
+      }
+
+      .dropdown-list {
+        position: absolute;
+        z-index: 1;
+        width: 100%;
+        max-height: 200px;
+        overflow-y: auto;
+        background-color: #f9f9f9;
+        border: 1px solid #ccc;
+        padding: 5px;
+      }
+
+      .dropdown-list-item {
+        padding: 5px;
+        cursor: pointer;
+      }
+
+      .dropdown-list-item:hover {
+        background-color: #ddd;
+      }
     </style>
-</head>
-<body>
+  </head>
+  <body>
     <div class="dropdown">
-        <select id="countrySelect" onchange="searchDropdown()">
-            <option value="">All Countries</option>
-            <option value="CN">China</option>
-            <option value="DK">Denmark</option>
-            <option value="IN">India</option>
-            <option value="IT">Italy</option>
-            <option value="LV">Latvia</option>
-            <option value="MK">North Macedonia</option>
-            <option value="SE">Sweden</option>
-        </select>
-        <br>
-        <input type="text" id="searchInput" class="dropdown-input" onkeyup="searchDropdown()">
-        <div id="searchResults" class="dropdown-list"></div>
+      <input
+        class="required required-missing-display"
+        id="mail"
+        autocomplete="user-text"
+        type="text"
+        name="affiliation"
+        value=""
+      />
     </div>
-    
+
     <script>
-        function searchDropdown() {
-            var input = document.getElementById("searchInput");
-            var query = input.value;
-            var countrySelect = document.getElementById("countrySelect");
-            var selectedCountryCode = countrySelect.value;
-            var searchResults = document.getElementById("searchResults");
-            
-            // Clear previous search results
+      // Add listener here for keyup
+      var timeoutId;
+      var searchInput = document.querySelector('input[name="affiliation"]');
+      searchInput.addEventListener("keyup", debounce(searchDropdown, 500));
+
+      //Add searchResults after searchInput
+      var searchResults = document.createElement("div");
+      searchResults.className = "dropdown-list";
+      searchResults.id = "searchResults";
+
+      searchInput.parentNode.insertBefore(
+        searchResults,
+        searchInput.nextSibling
+      );
+
+      //TODO add country before input element
+      function createListItem(text, parent) {
+        var listItem = document.createElement("div");
+        listItem.classList.add("dropdown-list-item");
+        listItem.innerText = text;
+        parent.appendChild(listItem);
+
+        return listItem;
+      }
+
+      function searchDropdown() {
+        var input = document.querySelector('input[name="affiliation"]');
+        var query = input.value;
+        var searchResults = document.getElementById("searchResults");
+
+        // Clear previous search results
+        searchResults.innerHTML = "";
+
+        if (query.length >= 3) {
+          // Construct the API URL with the query and country code
+          var apiUrl =
+            "https://api.ror.org/organizations?affiliation=" +
+            encodeURIComponent(query);
+          var setResults = function (elem) {
+            input.value = elem.srcElement.innerHTML;
             searchResults.innerHTML = "";
-            
-            if (query.length >= 3) {
-                // Construct the API URL with the query and country code
-                var apiUrl = "http://localhost:3000/organizations/?query=" + encodeURIComponent(query);
-                if (selectedCountryCode) {
-                    apiUrl += "&country=" + selectedCountryCode;
-                }
-                
-                // Make API request
-                fetch(apiUrl)
-                    .then(response => response.json())
-                    .then(data => {
-                        // Process the API response and populate the dropdown list
-                        data.forEach(item => {
-                            var listItem = document.createElement("div");
-                            listItem.classList.add("dropdown-list-item");
-                            listItem.innerText = item.name;
-                            searchResults.appendChild(listItem);
-                        });
-                    })
-                    .catch(error => {
-                        console.error("Error fetching data from the API:", error);
-                    });
-            }
+          };
+          // Make API request
+          fetch(apiUrl)
+            .then((response) => response.json())
+            .then((data) => {
+              // Process the API response and populate the dropdown list
+
+              if (data.items != 0) {
+                data.items.forEach((item) => {
+                  var itemDiv = createListItem(
+                    item.organization.name,
+                    searchResults
+                  );
+                  itemDiv.onclick = setResults.bind(item.organization.name);
+                });
+              } else {
+                createListItem("No results found", searchResults);
+              }
+            })
+            .catch((error) => {
+              console.error("Error fetching data from the API:", error);
+            });
+        } else {
+          createListItem("Minimum three characters", searchResults);
         }
+      }
+
+      function debounce(func, delay) {
+        return function () {
+          clearTimeout(timeoutId);
+          timeoutId = setTimeout(func, delay);
+        };
+      }
     </script>
-</body>
+  </body>
 </html>
