From e498ba8b08b7154a0603017fdf95992acac31308 Mon Sep 17 00:00:00 2001
From: simonpipe <simonpipe@noreply.codeberg.org>
Date: Fri, 20 Dec 2024 13:19:22 +0000
Subject: [PATCH] script.js aktualisiert
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Icon hinzugefügt, Verschiebbarkeit auf Icon reduziert.
---
 script.js | 59 ++++++++++++++++++++++++++++++++++---------------------
 1 file changed, 37 insertions(+), 22 deletions(-)

diff --git a/script.js b/script.js
index 8057bd6..4fadd18 100644
--- a/script.js
+++ b/script.js
@@ -12,9 +12,11 @@ document.addEventListener('DOMContentLoaded', function() {
 
     loadExistingPresets();
 
+    // Initialisierung von Sortable für den gesamten Container und das Verschieben mit dem Verschieben-Symbol
     new Sortable(presetContainer, {
         animation: 250,
         ghostClass: 'ghost',
+        handle: '.move-button', // Nur das Verschieben-Symbol erlaubt das Verschieben
         onEnd: () => {
             savePresetOrder();
         }
@@ -49,8 +51,15 @@ document.addEventListener('DOMContentLoaded', function() {
         presetItem.innerHTML = `
             <h3>${name}</h3>
             <div class="button-container">
-              <button class="edit-button">Bearbeiten</button>
-              <button class="delete-button">Löschen</button>
+                <button class="move-button">
+                    <i class="fas fa-arrows-alt"></i> <!-- Verschieben-Symbol -->
+                </button>
+                <button class="edit-button">
+                    <i class="fas fa-edit"></i> <!-- Stift-Symbol für Bearbeiten -->
+                </button>
+                <button class="delete-button">
+                    <i class="fas fa-trash-alt"></i> <!-- Papierkorb-Symbol für Löschen -->
+                </button>
             </div>
         `;
 
@@ -64,9 +73,15 @@ document.addEventListener('DOMContentLoaded', function() {
             deletePreset(presetItem);
         });
 
+        presetItem.querySelector('.move-button').addEventListener('click', (event) => {
+            event.stopPropagation(); // Verhindert, dass das Verschieben-Symbol das gesamte Preset aktiviert
+        });
+
         presetItem.addEventListener('click', (event) => {
-            if (event.target !== presetItem.querySelector('.edit-button') && event.target !== presetItem.querySelector('.delete-button')) {
-                playStream(url, presetItem); // Übergabe des presetItem
+            if (event.target !== presetItem.querySelector('.edit-button') && 
+                event.target !== presetItem.querySelector('.delete-button') && 
+                event.target !== presetItem.querySelector('.move-button')) {
+                playStream(url, presetItem);
             }
         });
 
@@ -107,7 +122,7 @@ document.addEventListener('DOMContentLoaded', function() {
     }
 
     function playStream(url, item) {
-      // Stoppe den aktuell laufenden Stream (falls vorhanden)
+        // Stoppe den aktuell laufenden Stream (falls vorhanden)
         if (currentPlayingItem) {
             const currentAudio = currentPlayingItem.querySelector('audio');
             if (currentAudio) {
@@ -126,9 +141,9 @@ document.addEventListener('DOMContentLoaded', function() {
         };
         item.appendChild(audioElement); // Füge das Audio-Element zum Preset-Item hinzu
         item.classList.add('playing');
-		
+        
         currentPlayingItem = item; // Aktualisiere das aktuell spielende Element
-		currentStationName.textContent = item.querySelector('h3').textContent;
+        currentStationName.textContent = item.querySelector('h3').textContent;
     }
 
     function exportPresets() {
@@ -145,7 +160,7 @@ document.addEventListener('DOMContentLoaded', function() {
 
         URL.revokeObjectURL(url);
     }
-    
+
     function importPresets() {
         const input = document.createElement('input');
         input.type = 'file';
@@ -174,21 +189,21 @@ document.addEventListener('DOMContentLoaded', function() {
         };
         input.click();
     }
-    
-	const stopButton = document.querySelector('.stop-button');
+
+    const stopButton = document.querySelector('.stop-button');
     const progressBar = document.getElementById('progress-bar');
     const currentStationName = document.getElementById('current-station-name');
 
-	stopButton.addEventListener('click', () => {
-	    // Stoppe den aktuellen Stream und setze currentPlayingItem zurück
-	    if (currentPlayingItem) {
-	        const audioElement = currentPlayingItem.querySelector('audio');
-	        audioElement.pause();
-	        audioElement.currentTime = 0;
-	        currentPlayingItem.classList.remove('playing');
-	        currentPlayingItem = null;
-	        currentStationName.textContent = 'Kein Sender ausgewählt.';
-	    }
-	});
+    stopButton.addEventListener('click', () => {
+        // Stoppe den aktuellen Stream und setze currentPlayingItem zurück
+        if (currentPlayingItem) {
+            const audioElement = currentPlayingItem.querySelector('audio');
+            audioElement.pause();
+            audioElement.currentTime = 0;
+            currentPlayingItem.classList.remove('playing');
+            currentPlayingItem = null;
+            currentStationName.textContent = 'Kein Sender ausgewählt.';
+        }
+    });
 
-});
\ No newline at end of file
+});