Iskalnik pesmi #2

web/static/script.js

@@ -14,6 +14,8 @@ const keypadWrapper = document.getElementById('keypad-wrapper');
 const toggleKeypadBtn = document.getElementById('toggle-keypad-btn');
 const menuToggle = document.getElementById('menu-toggle');
 const menuDropdown = document.getElementById('menu-dropdown');
+const searchInput = document.getElementById('search-input');
+const searchResults = document.getElementById('search-results');
 
 let capsMode = false;
 let wakeLock = null;
@@ -122,6 +124,51 @@ async function loadSong() {
     }
 }
 
+// Iskanje pesmi
+async function searchSongs() {
+    const query = searchInput.value.trim();
+    if (!query) {
+        searchResults.innerHTML = '';
+        searchResults.classList.remove('show');
+        return;
+    }
+
+    try {
+        const response = await fetch('/api/search_songs', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ query: query })
+        });
+        const data = await response.json();
+
+        if (data.results && data.results.length > 0) {
+            searchResults.innerHTML = '';
+            data.results.forEach(song => {
+                const item = document.createElement('div');
+                item.className = 'search-item';
+                item.innerHTML = `
+                    <span class="song-id">${song[0]}</span>
+                    <span class="song-title">${song[1]}</span>
+                `;
+                item.addEventListener('click', () => {
+                    songNumberInput.value = song[0];
+                    loadSong();
+                    searchInput.value = '';
+                    searchResults.innerHTML = '';
+                    searchResults.classList.remove('show');
+                });
+                searchResults.appendChild(item);
+            });
+            searchResults.classList.add('show');
+        } else {
+            searchResults.innerHTML = '<div class="search-item"><span class="song-title">Ni zadetkov</span></div>';
+            searchResults.classList.add('show');
+        }
+    } catch (error) {
+        console.error('Napaka pri iskanju:', error);
+    }
+}
+
 // prejšnja kitica
 async function prevPage() {
     try {
@@ -234,8 +281,37 @@ document.addEventListener('click', (e) => {
     }
 });
 
+// Iskanje dogodki
+if (searchInput) {
+    searchInput.addEventListener('input', () => {
+        searchSongs();
+    });
+
+    searchInput.addEventListener('focus', () => {
+        if (searchInput.value.trim()) {
+            searchResults.classList.add('show');
+        }
+    });
+}
+
+// Zapri rezultate iskanja ob kliku drugam
+document.addEventListener('click', (e) => {
+    if (searchResults && !searchResults.contains(e.target) && e.target !== searchInput) {
+        searchResults.classList.remove('show');
+    }
+});
+
 // fizična tipkovnica
 document.addEventListener('keydown', (e) => {
+    // Če smo v iskalnem polju, ne procesiraj bližnjic za numerično tipkovnico
+    if (document.activeElement === searchInput) {
+        if (e.key === 'Escape') {
+            searchInput.blur();
+            searchResults.classList.remove('show');
+        }
+        return;
+    }
+
     // na telefonu ni potrebe; na velikih ekranih pa naj dela
     if (window.innerWidth < 901) return;