Appmanager: implement functional search bar
reworked handlers for different app types
Change-Id: I82d3c856aa5c583dcdcf83ed6fbaf440bc4c8f87
diff --git a/core/installer/welcome/static/app-manager.js b/core/installer/welcome/static/app-manager.js
index 5cd568b..55357f3 100644
--- a/core/installer/welcome/static/app-manager.js
+++ b/core/installer/welcome/static/app-manager.js
@@ -1,4 +1,13 @@
+function delaySearch(func, wait) {
+ let timeout;
+ return function (...args) {
+ clearTimeout(timeout);
+ timeout = setTimeout(() => func.apply(this, args), wait);
+ };
+}
+
document.addEventListener("DOMContentLoaded", function () {
+ let searchRequestCount = 0;
const page = document.documentElement;
const headerHeight = parseFloat(getComputedStyle(page).getPropertyValue('--pico-header-height').replace("px", ""));
const nav = document.getElementById("menu");
@@ -7,6 +16,39 @@
const menu = document.getElementById("menu-nav");
const menuHeight = parseFloat(getComputedStyle(document.getElementById('menu-nav')).height.replace("px", "")) + 15;
menu.style.setProperty("height", `${menuHeight}px`);
+ const searchForm = document.getElementById('search-form');
+ const searchInput = document.getElementById('search-input');
+ function fetchAndUpdateAppList() {
+ searchRequestCount++;
+ const currentRequest = searchRequestCount;
+ const formData = new FormData(searchForm);
+ const query = formData.get('query');
+ const pageType = document.getElementById('page-type').value;
+ const url = `/${pageType}?query=${encodeURIComponent(query)}`;
+ fetch(url, {
+ method: 'GET'
+ })
+ .then(response => response.text())
+ .then(html => {
+ if (currentRequest !== searchRequestCount) {
+ return;
+ }
+ const tempDiv = document.createElement('div');
+ tempDiv.innerHTML = html;
+ const newAppListHTML = tempDiv.querySelector('#app-list').innerHTML;
+ const appListContainer = document.getElementById("app-list");
+ appListContainer.innerHTML = newAppListHTML;
+ })
+ .catch(error => console.error('Error fetching app list:', error));
+ }
+ const delayedFetchAndUpdateAppList = delaySearch(fetchAndUpdateAppList, 300);
+ searchForm.addEventListener('submit', (event) => {
+ event.preventDefault();
+ fetchAndUpdateAppList();
+ });
+ searchInput.addEventListener('input', () => {
+ delayedFetchAndUpdateAppList();
+ });
});
let prevWindowHeight = window.innerHeight;