trustchain-oc1-orchestral/devicehub-teal
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

show message when search is empty

Browse source
This commit is contained in:
RubenPX 2022-04-12 12:06:38 +02:00
parent 34da3599f3
commit 938ccedac7
1 changed files with 47 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
ereuse_devicehub/static/js/main_inventory.js
View file

@ -240,15 +240,34 @@ window.addEventListener("DOMContentLoaded", () => {
event.preventDefault(); event.preventDefault();
}) })
var timeoutHandler = setTimeout(() => { }, 1000) let timeoutHandler = setTimeout(() => { }, 1)
var dropdownList = document.getElementById("dropdown-search-list") let dropdownList = document.getElementById("dropdown-search-list")
let defaultEmptySearch = document.getElementById("dropdown-search-list").innerHTML
inputSearch.addEventListener("input", (e) => { inputSearch.addEventListener("input", (e) => {
console.log("Timeout restart")
clearTimeout(timeoutHandler) clearTimeout(timeoutHandler)
let searchText = e.target.value
if (searchText == '') {
document.getElementById("dropdown-search-list").innerHTML = defaultEmptySearch;
return
}
let resultCount = 0;
function searchCompleted() {
resultCount++;
if (resultCount < 2 && document.getElementById("dropdown-search-list").children.length > 0) {
setTimeout(() => {
document.getElementById("dropdown-search-list").innerHTML = `
<li id="deviceSearchLoader" class="dropdown-item">
<i class="bi bi-x-lg"></i>
<span style="margin-right: 10px">Nothing found</span>
</li>`
}, 100)
}
}
timeoutHandler = setTimeout(async () => { timeoutHandler = setTimeout(async () => {
console.log("timeout start")
dropdownList.innerHTML = ` dropdownList.innerHTML = `
<li id="deviceSearchLoader" class="dropdown-item"> <li id="deviceSearchLoader" class="dropdown-item">
<i class="bi bi-laptop"></i> <i class="bi bi-laptop"></i>
@ -261,9 +280,8 @@ window.addEventListener("DOMContentLoaded", () => {
<div class="spinner-border spinner-border-sm" role="status"> <div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span> <span class="visually-hidden">Loading...</span>
</div> </div>
</li> </li>`;
`
var searchText = e.target.value
try { try {
Api.get_devices(searchText.toUpperCase()).then(devices => { Api.get_devices(searchText.toUpperCase()).then(devices => {
@ -282,15 +300,24 @@ window.addEventListener("DOMContentLoaded", () => {
<span style="margin-right: 10px">${verboseName}</span> <span style="margin-right: 10px">${verboseName}</span>
<span class="badge bg-secondary" style="margin-left: auto;">${device.devicehubID}</span> <span class="badge bg-secondary" style="margin-left: auto;">${device.devicehubID}</span>
</a> </a>
</li>` </li>`;
dropdownList.innerHTML += templateString dropdownList.innerHTML += templateString
if (i == 4) { // Limit to 4 resullts if (i == 4) { // Limit to 4 resullts
break; break;
} }
} }
searchCompleted();
}) })
} catch (error) { } catch (error) {
console.log(error) dropdownList.innerHTML += `
<li id="deviceSearchLoader" class="dropdown-item">
<i class="bi bi-x"></i>
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Error searching devices</span>
</div>
</li>`;
console.log(error);
} }
try { try {
@ -305,17 +332,25 @@ window.addEventListener("DOMContentLoaded", () => {
<i class="bi bi-folder2"></i> <i class="bi bi-folder2"></i>
<span style="margin-right: 10px">${lot.name}</span> <span style="margin-right: 10px">${lot.name}</span>
</a> </a>
</li>` </li>`;
dropdownList.innerHTML += templateString dropdownList.innerHTML += templateString
if (i == 4) { if (i == 4) { // Limit to 4 resullts
break; break;
} }
} }
} }
searchCompleted();
}) })
} catch (error) { } catch (error) {
console.log(error) dropdownList.innerHTML += `
<li id="deviceSearchLoader" class="dropdown-item">
<i class="bi bi-x"></i>
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Error searching lots</span>
</div>
</li>`;
console.log(error);
} }
}, 1000) }, 1000)
}) })