Urejevalnik pesmi (feature #1)

web/static/script.js

@@ -16,6 +16,12 @@ const menuToggle = document.getElementById('menu-toggle');
 const menuDropdown = document.getElementById('menu-dropdown');
 const searchInput = document.getElementById('search-input');
 const searchResults = document.getElementById('search-results');
+const editSongBtn = document.getElementById('edit-song-btn');
+const editModal = document.getElementById('edit-modal');
+const editTitleInput = document.getElementById('edit-title');
+const editLyricsInput = document.getElementById('edit-lyrics');
+const saveEditBtn = document.getElementById('save-edit-btn');
+const cancelEditBtn = document.getElementById('cancel-edit-btn');
 
 let capsMode = false;
 let wakeLock = null;
@@ -218,6 +224,68 @@ async function toggleCaps() {
     }
 }
 
+// Odpri urejevalnik
+async function openEditor() {
+    try {
+        const response = await fetch('/api/get_song_details');
+        const data = await response.json();
+
+        if (data.status === 'ok') {
+            editTitleInput.value = data.song.title;
+            editLyricsInput.value = data.song.lyrics;
+            editModal.dataset.songId = data.song.id;
+            editModal.style.display = 'block';
+            menuDropdown.classList.remove('show');
+        } else {
+            alert(data.message || 'Za urejanje najprej naložite skladbo.');
+            menuDropdown.classList.remove('show');
+        }
+    } catch (error) {
+        console.error('Napaka pri pridobivanju podatkov pesmi:', error);
+        alert('Napaka pri povezavi s strežnikom.');
+    }
+}
+
+// Zapri urejevalnik
+function closeEditor() {
+    editModal.style.display = 'none';
+}
+
+// Shrani spremembe
+async function saveSongEdit() {
+    const songId = editModal.dataset.songId;
+    const title = editTitleInput.value.trim();
+    const lyrics = editLyricsInput.value.trim();
+
+    if (!title || !lyrics) {
+        alert('Naslov in besedilo ne smeta biti prazna.');
+        return;
+    }
+
+    try {
+        const response = await fetch('/api/update_song', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                id: songId,
+                title: title,
+                lyrics: lyrics
+            })
+        });
+        const data = await response.json();
+
+        if (data.status === 'ok') {
+            closeEditor();
+            await updateState(true);
+        } else {
+            alert('Napaka pri shranjevanju: ' + data.message);
+        }
+    } catch (error) {
+        console.error('Napaka pri shranjevanju pesmi:', error);
+        alert('Napaka pri povezavi s strežnikom.');
+    }
+}
+
 // skrij/pokaži tipkovnico
 function toggleKeypad() {
     if (!keypadWrapper || !toggleKeypadBtn) return;
@@ -284,6 +352,30 @@ if (toggleKeypadBtn) {
     });
 }
 
+// Uredi besedilo
+if (editSongBtn) {
+    editSongBtn.addEventListener('click', () => {
+        vibrate();
+        openEditor();
+    });
+}
+
+// Prekliči urejanje
+if (cancelEditBtn) {
+    cancelEditBtn.addEventListener('click', () => {
+        vibrate();
+        closeEditor();
+    });
+}
+
+// Posodobi (Shrani) urejanje
+if (saveEditBtn) {
+    saveEditBtn.addEventListener('click', () => {
+        vibrate();
+        saveSongEdit();
+    });
+}
+
 // Hamburger menu toggle
 if (menuToggle) {
     menuToggle.addEventListener('click', (e) => {
@@ -330,6 +422,14 @@ document.addEventListener('keydown', (e) => {
         return;
     }
 
+    // Če smo v urejevalniku, ne procesiraj bližnjic za numerično tipkovnico
+    if (editModal && editModal.style.display === 'block') {
+        if (e.key === 'Escape') {
+            closeEditor();
+        }
+        return;
+    }
+
     // na telefonu ni potrebe; na velikih ekranih pa naj dela
     if (window.innerWidth < 901) return;
 

web/static/styles.css

@@ -418,6 +418,89 @@ body {
     }
 }
 
+/* Modal Styles */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 2000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.8);
+    overflow-y: auto;
+}
+
+.modal-content {
+    background-color: #222;
+    margin: 5% auto;
+    padding: 20px;
+    border: 1px solid #444;
+    width: 90%;
+    max-width: 800px;
+    border-radius: 8px;
+    color: white;
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 5px;
+}
+
+.form-control {
+    width: 100%;
+    padding: 10px;
+    background-color: #333;
+    border: 1px solid #555;
+    color: white;
+    border-radius: 4px;
+    box-sizing: border-box;
+    font-size: 16px;
+}
+
+textarea.form-control {
+    resize: vertical;
+    font-family: inherit;
+}
+
+.modal-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.btn-primary {
+    background-color: #1f8a46;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-weight: bold;
+}
+
+.btn-secondary {
+    background-color: #555;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.btn-primary:hover {
+    filter: brightness(1.1);
+}
+
+.btn-secondary:hover {
+    filter: brightness(1.1);
+}
+
 /* veliki ekrani */
 @media (min-width: 901px) {