Skip to content

WIP: index file for use by IAM #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bolmsten wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

WIP: index file for use by IAM #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
214 changes: 121 additions & 93 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>