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;
 

web/static/styles.css

@@ -74,6 +74,78 @@ body {
     position: relative;
 }
 
+.search-container {
+    position: relative;
+    flex: 1;
+    max-width: 400px;
+    margin: 0 auto;
+}
+
+#search-input {
+    width: 100%;
+    padding: 6px 12px;
+    border-radius: 20px;
+    border: 1px solid #444;
+    background-color: #222;
+    color: #fff;
+    font-size: 16px;
+    outline: none;
+}
+
+#search-input:focus {
+    border-color: #1f8a46;
+    background-color: #2a2a2a;
+}
+
+.search-results {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background-color: #222;
+    border: 1px solid #444;
+    border-top: none;
+    border-radius: 0 0 8px 8px;
+    max-height: 300px;
+    overflow-y: auto;
+    z-index: 1001;
+    display: none;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+}
+
+.search-results.show {
+    display: block;
+}
+
+.search-item {
+    padding: 10px 15px;
+    border-bottom: 1px solid #333;
+    cursor: pointer;
+    display: flex;
+    gap: 10px;
+}
+
+.search-item:last-child {
+    border-bottom: none;
+}
+
+.search-item:hover {
+    background-color: #333;
+}
+
+.search-item .song-id {
+    color: #1f8a46;
+    font-weight: bold;
+    min-width: 30px;
+}
+
+.search-item .song-title {
+    color: #fff;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .menu-toggle {
     background: transparent;
     border: none;

web/templates/index.html

@@ -14,6 +14,10 @@
 
     <div class="status-bar">
         <span id="page-info" class="page-info"></span>
+        <div class="search-container">
+            <input type="text" id="search-input" placeholder="Išči pesem..." autocomplete="off">
+            <div id="search-results" class="search-results"></div>
+        </div>
         <div class="menu-container">
             <button id="menu-toggle" class="menu-toggle" type="button">
                 <span class="hamburger-icon"></span>