dyadmisha
/
dune-weaver
mirror de https://github.com/tuanchris/dune-weaver.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dune Weaver Controller</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../static/style.css">
</head>
<body>
    <h1>Dune Weaver Controller</h1>
    <div class="container">
        <!-- Left Column -->
        <div class="left-column">
            <div class="section">
                <h2>Serial Connection</h2>
                <div id="serial_status_container">Status: <span id="serial_status" class="status"> Not connected</span></div>
                <div id="serial_ports_container">
                    <label for="serial_ports">Available Ports:</label>
                    <select id="serial_ports"></select>
                    <button onclick="connectSerial()">Connect</button>
                </div>
                <div id="serial_ports_buttons" class="button-group">
                    <button onclick="disconnectSerial()">Disconnect</button>
                    <button onclick="restartSerial()">Restart</button>
                </div>
            </div>
            <div class="section"> 
                <h2>Mode</h2>
                <label>
                <input type="radio" name="mode" class="modeSelector" value="single_run" checked> Single Run
                </label>
                <label>
                <input type="radio" name="mode" class="modeSelector" value="create_playlist"> Create Playlist
                </label>
                <label>
                <input type="radio" name="mode" class="modeSelector" value="run_playlist"> Run Playlist
                </label>
            </div>
            <div class="section">
                <h2>Quick Actions</h2>
                <div class="button-group">
                    <button onclick="sendHomeCommand()">Home Device</button>
                    <button onclick="moveToCenter()">Move to Center</button>
                    <button onclick="moveToPerimeter()">Move to Perimeter</button>
                    <button onclick="runClearIn()">Clear from In</button>
                    <button onclick="runClearOut()">Clear from Out</button>
                    <button onclick="runSideway()">Clear Sideway</button>
                    <button onclick="stopExecution()" class="delete-button">Stop</button>
                </div>
                <div class="coordinate-input button-group">
                    <label for="theta_input">θ:</label>
                    <input type="number" id="theta_input" placeholder="Theta">
                    <label for="rho_input">ρ:</label>
                    <input type="number" id="rho_input" placeholder="Rho">
                    <button class="small-button" onclick="sendCoordinate()">Send to coordinate</button>
                </div>
            </div>
            <div class="section">
                <h2>Preview</h2>
                <canvas id="patternPreviewCanvas" style="width: 100%;"></canvas>
                <p id="first_coordinate">First Coordinate: Not available</p>
                <p id="last_coordinate">Last Coordinate: Not available</p>
            </div>
        </div>

        <!-- Right Column -->
        <div class="right-column">

                <div class="section modeSection single_run create_playlist">
                    <h2 class="modeSection single_run">Single Run</h2>
                    <h2 class="modeSection create_playlist" style="display: none;"> Create Playlist</h2>
                    <h2 class="modeSection run_playlist" style="display: none;"> Run Playlist</h2>
                    <input class="modeSection single_run create_playlist" type="text" id="search_pattern" placeholder="Search files..." oninput="searchPatternFiles()">
                    <ul  class="modeSection single_run create_playlist" id="theta_rho_files"></ul>
                    <div class="pre-execution-toggles modeSection single_run">
                        <h3>Pre-Execution Action</h3>
                        <label>
                            <input type="radio" name="pre_execution" value="clear_in" id="clear_in"> Clear from In
                        </label>
                        <label>
                            <input type="radio" name="pre_execution" value="clear_out" id="clear_out"> Clear from Out
                        </label>
                        <label>
                            <input type="radio" name="pre_execution" value="clear_sideway" id="clear_out"> Clear sideway
                        </label>
                        <label>
                            <input type="radio" name="pre_execution" value="none" id="no_action" checked> None
                        </label>
                    </div>
                    <div class="button-group modeSection single_run">
                        <button id="run_button" disabled>Run Selected File</button>
                        <button onclick="stopExecution()" class="delete-button">Stop</button>
                    </div>
                    <div class="button-group modeSection create_playlist" style="display: none;">
                        <button onclick="addToPlaylist()">Add File to Playlist</button>
                    </div>
                </div>
                <div class="section modeSection single_run">
                    <h2>Upload new files</h2>
                    <div class="button-group">
                        <input type="file" id="upload_file">
                        <div class="button-group">
                            <button onclick="uploadThetaRho()">Upload</button>
                            <button id="delete_selected_button" class="delete-button" onclick="deleteSelectedFile()" disabled>Delete Selected File</button>
                        </div>
                    </div>
                </div>
                <div class="section modeSection create_playlist run_playlist" style="display: none;">
                    <h2>Create Playlist</h2>
                    <!-- A list showing the files that have been added to the playlist -->
                    <ul id="playlist_items"></ul>
                  
                    <!-- Buttons to reorder files in the playlist -->
                    <div class="button-group">
                      <button onclick="movePlaylistItemUp()">Up</button>
                      <button onclick="movePlaylistItemDown()">Down</button>
                      <button onclick="removeFromPlaylist()" class="delete-button">Remove</button>
                    </div>
                                        
                    <div class="playlist-name-input">
                        <label for="playlist_name">Playlist Name:</label>
                        <input type="text" id="playlist_name" placeholder="Enter playlist name" />
                      </div>
                    
                      <div class="button-group">
                        <!-- Button to add the selected file (from #theta_rho_files) to the playlist -->
                    
                        <!-- Button to create/finalize the playlist -->
                        <button onclick="savePlaylist()">Create Playlist</button>
                    </div>
                </div>
                <div class="section modeSection create_playlist run_playlist" style="display: none;">
                    <h2>Playlists</h2>
                    
                    <!-- Parameter Inputs -->
                    <div class="playlist-parameters">
                        <label for="pause_time">Pause Time (seconds):</label>
                        <input type="number" id="pause_time" min="0" step="0.1" value="0">
                        
                        <label for="clear_pattern">Clear Pattern:</label>
                        <select id="clear_pattern">
                            <option value="none">None</option>
                            <option value="clear_in">Clear from In</option>
                            <option value="clear_out">Clear from Out</option>
                            <option value="clear_sideway">Clear Sideway</option>
                            <option value="random">Random</option>
                        </select>
                        
                        <!-- New Parameters -->
                        <div class="run-options">
                            <label>Run Mode:</label>
                            <label>
                                <input type="radio" name="run_mode" value="single" checked> Single Run
                            </label>
                            <label>
                                <input type="radio" name="run_mode" value="indefinite"> Indefinite Run
                            </label>
                            
                            <label>
                                <input type="checkbox" id="shuffle_playlist"> Shuffle Playlist
                            </label>
                        </div>
                    </div>
                    
                    <!-- Playlists List -->
                    <ul id="all_playlists"></ul>
                </div>
            </div>
        </div>
    </div>

    <div id="status_log">
        <h2>Status Log</h2>
        <!-- Messages will be appended here -->
    </div>
    <script>
        let selectedFile = null;

        function logMessage(message) {
            const log = document.getElementById('status_log');
            const entry = document.createElement('p');
            entry.textContent = message;
            log.appendChild(entry);
            log.scrollTop = log.scrollHeight; // Keep log scrolled to the bottom
        }

        async function selectFile(file, listItem) {
            selectedFile = file;

            // Highlight the selected file
            document.querySelectorAll('#theta_rho_files li').forEach(li => li.classList.remove('selected'));
            listItem.classList.add('selected');

            // Enable buttons
            document.getElementById('run_button').disabled = false;
            document.getElementById('delete_selected_button').disabled = false;

            logMessage(`Selected file: ${file}`);

            // Fetch and preview the selected file
            await previewPattern(file);
        }

        async function uploadThetaRho() {
            const fileInput = document.getElementById('upload_file');
            const file = fileInput.files[0];
            if (!file) {
                logMessage('No file selected for upload.');
                return;
            }

            logMessage(`Uploading file: ${file.name}...`);
            const formData = new FormData();
            formData.append('file', file);

            const response = await fetch('/upload_theta_rho', {
                method: 'POST',
                body: formData
            });

            const result = await response.json();
            if (result.success) {
                logMessage(`File uploaded successfully: ${file.name}`);
                await loadThetaRhoFiles();
            } else {
                logMessage(`Failed to upload file: ${file.name}`);
            }
        }

        async function deleteSelectedFile() {
            if (!selectedFile) {
                logMessage("No file selected for deletion.");
                return;
            }

            const userConfirmed = confirm(`Are you sure you want to delete the selected file "${selectedFile}"?`);
            if (!userConfirmed) return;

            logMessage(`Deleting file: ${selectedFile}...`);
            const response = await fetch('/delete_theta_rho_file', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ file_name: selectedFile }),
            });

            const result = await response.json();
            if (result.success) {
                const ul = document.getElementById('theta_rho_files');
                const selectedItem = Array.from(ul.children).find(li => li.classList.contains('selected'));
                if (selectedItem) selectedItem.remove();

                selectedFile = null;
                document.getElementById('run_button').disabled = true;
                document.getElementById('delete_selected_button').disabled = true;

                logMessage(`File deleted successfully: ${result.file_name}`);
            } else {
                logMessage(`Failed to delete file: ${selectedFile}`);
            }
        }

        async function runThetaRho() {
            if (!selectedFile) {
                logMessage("No file selected to run.");
                return;
            }

            // Get the selected pre-execution action
            const preExecutionAction = document.querySelector('input[name="pre_execution"]:checked').value;

            logMessage(`Running file: ${selectedFile} with pre-execution action: ${preExecutionAction}...`);
            const response = await fetch('/run_theta_rho', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ file_name: selectedFile, pre_execution: preExecutionAction })
            });

            const result = await response.json();
            if (result.success) {
                logMessage(`File running: ${selectedFile}`);
            } else {
                logMessage(`Failed to run file: ${selectedFile}`);
            }
        }

        async function stopExecution() {
            logMessage('Stopping execution...');
            const response = await fetch('/stop_execution', { method: 'POST' });
            const result = await response.json();
            if (result.success) {
                logMessage('Execution stopped.');
            } else {
                logMessage('Failed to stop execution.');
            }
        }

        async function loadSerialPorts() {
            const response = await fetch('/list_serial_ports');
            const ports = await response.json();
            const select = document.getElementById('serial_ports');
            select.innerHTML = '';
            ports.forEach(port => {
                const option = document.createElement('option');
                option.value = port;
                option.textContent = port;
                select.appendChild(option);
            });
            logMessage('Serial ports loaded.');
        }

        async function connectSerial() {
            const port = document.getElementById('serial_ports').value;
            const response = await fetch('/connect_serial', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ port })
            });
            const result = await response.json();
            if (result.success) {
                logMessage(`Connected to serial port: ${port}`);
                // Refresh the status
                await checkSerialStatus();
            } else {
                logMessage(`Error connecting to serial port: ${result.error}`);
            }
        }

        async function disconnectSerial() {
            const response = await fetch('/disconnect_serial', { method: 'POST' });
            const result = await response.json();
            if (result.success) {
                logMessage('Serial port disconnected.');
                // Refresh the status
                await checkSerialStatus();
            } else {
                logMessage(`Error disconnecting: ${result.error}`);
            }
        }

        async function restartSerial() {
            const port = document.getElementById('serial_ports').value;
            const response = await fetch('/restart_serial', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ port })
            });
            const result = await response.json();
            if (result.success) {
                document.getElementById('serial_status').textContent = `Restarted connection to ${port}`;
                logMessage('Serial connection restarted.');

                // No need to change visibility for restart
            } else {
                logMessage(`Error restarting serial connection: ${result.error}`);
            }
        }

        async function sendHomeCommand() {
            const response = await fetch('/send_home', { method: 'POST' });
            const result = await response.json();
            if (result.success) {
                logMessage('HOME command sent successfully.');
            } else {
                logMessage('Failed to send HOME command.');
            }
        }


        let allFiles = []; // Store all files for filtering

        async function loadThetaRhoFiles() {
            logMessage('Loading Theta-Rho files...');
            const response = await fetch('/list_theta_rho_files');
            let files = await response.json();

            // Filter only .thr files
            files = files.filter(file => file.endsWith('.thr'));

            // Separate files into categories
            const customPatternsFiles = files.filter(file => file.startsWith('custom_patterns/'));
            const otherFiles = files.filter(file => !file.startsWith('custom_patterns/'));

            // Sort the files
            const sortedFiles = [
                ...customPatternsFiles.sort(), // Custom patterns first
                ...otherFiles.sort() // Remaining files sorted alphabetically
            ];

            allFiles = sortedFiles; // Store the sorted list of files
            displayFiles(allFiles); // Display the sorted files

            logMessage('Theta-Rho files loaded successfully.');
        }

        function displayFiles(files) {
            const ul = document.getElementById('theta_rho_files');
            ul.innerHTML = ''; // Clear current list

            files.forEach(file => {
                const li = document.createElement('li');
                li.textContent = file;

                // Highlight the selected file when clicked
                li.onclick = () => selectFile(file, li);

                ul.appendChild(li);
            });
        }

        function searchPatternFiles() {
            const searchInput = document.getElementById('search_pattern').value.toLowerCase();
            const filteredFiles = allFiles.filter(file => file.toLowerCase().includes(searchInput));
            displayFiles(filteredFiles); // Display only matching files
        }

        async function moveToCenter() {
            logMessage('Moving to center...');
            const response = await fetch('/move_to_center', { method: 'POST' });
            const result = await response.json();
            if (result.success) {
                logMessage('Moved to center successfully.');
            } else {
                logMessage(`Failed to move to center: ${result.error}`);
            }
        }

        async function moveToPerimeter() {
            logMessage('Moving to perimeter...');
            const response = await fetch('/move_to_perimeter', { method: 'POST' });
            const result = await response.json();
            if (result.success) {
                logMessage('Moved to perimeter successfully.');
            } else {
                logMessage(`Failed to move to perimeter: ${result.error}`);
            }
        }

        async function sendCoordinate() {
            const theta = parseFloat(document.getElementById('theta_input').value);
            const rho = parseFloat(document.getElementById('rho_input').value);

            if (isNaN(theta) || isNaN(rho)) {
                logMessage('Invalid input: θ and ρ must be numbers.');
                return;
            }

            logMessage(`Sending coordinate: θ=${theta}, ρ=${rho}...`);
            const response = await fetch('/send_coordinate', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ theta, rho })
            });

            const result = await response.json();
            if (result.success) {
                logMessage(`Coordinate executed successfully: θ=${theta}, ρ=${rho}`);
            } else {
                logMessage(`Failed to execute coordinate: ${result.error}`);
            }
        }

        async function previewPattern(fileName) {
            logMessage(`Fetching data to preview file: ${fileName}...`);
            const response = await fetch('/preview_thr', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ file_name: fileName })
            });

            const result = await response.json();
            if (result.success) {
                const coordinates = result.coordinates;

                // Update coordinates display
                if (coordinates.length > 0) {
                    const firstCoord = coordinates[0];
                    const lastCoord = coordinates[coordinates.length - 1];
                    document.getElementById('first_coordinate').textContent = `First Coordinate: θ=${firstCoord[0]}, ρ=${firstCoord[1]}`;
                    document.getElementById('last_coordinate').textContent = `Last Coordinate: θ=${lastCoord[0]}, ρ=${lastCoord[1]}`;
                } else {
                    document.getElementById('first_coordinate').textContent = 'First Coordinate: Not available';
                    document.getElementById('last_coordinate').textContent = 'Last Coordinate: Not available';
                }

                renderPattern(coordinates);
            } else {
                logMessage(`Failed to fetch preview for file: ${result.error}`);
                // Clear the coordinate display on error
                document.getElementById('first_coordinate').textContent = 'First Coordinate: Not available';
                document.getElementById('last_coordinate').textContent = 'Last Coordinate: Not available';
            }
        }

        function renderPattern(coordinates) {
            const canvas = document.getElementById('patternPreviewCanvas');
            const ctx = canvas.getContext('2d');

            // Make canvas full screen
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Convert polar to Cartesian and draw the pattern
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const maxRho = Math.max(...coordinates.map(coord => coord[1]));
            const scale = Math.min(canvas.width, canvas.height) / (2 * maxRho); // Scale to fit within the screen

            ctx.beginPath();
            coordinates.forEach(([theta, rho], index) => {
                const x = centerX + rho * Math.cos(theta) * scale;
                const y = centerY - rho * Math.sin(theta) * scale; // Invert y-axis for canvas
                if (index === 0) {
                    ctx.moveTo(x, y);
                } else {
                    ctx.lineTo(x, y);
                }
            });
            ctx.closePath();
            ctx.stroke();
            logMessage('Pattern preview rendered at full screen.');
        }

        function toggleDebugLog() {
            const statusLog = document.getElementById('status_log');
            const debugButton = document.getElementById('debug_button');

            if (statusLog.style.display === 'block') {
                statusLog.style.display = 'none';
                debugButton.textContent = 'Show Debug Log'; // Update the button label
            } else {
                statusLog.style.display = 'block';
                debugButton.textContent = 'Hide Debug Log'; // Update the button label
                statusLog.scrollIntoView({ behavior: 'smooth', block: 'start' }); // Smooth scrolling to the log
            }
        }

        async function checkSerialStatus() {
            const response = await fetch('/serial_status');
            const status = await response.json();
            const statusElement = document.getElementById('serial_status');
            const serialPortsContainer = document.getElementById('serial_ports_container');

            const connectButton = document.querySelector('button[onclick="connectSerial()"]');
            const disconnectButton = document.querySelector('button[onclick="disconnectSerial()"]');
            const restartButton = document.querySelector('button[onclick="restartSerial()"]');

            if (status.connected) {
                const port = status.port || 'Unknown'; // Fallback if port is undefined
                statusElement.textContent = `Connected to ${port}`;
                statusElement.classList.add('connected');
                statusElement.classList.remove('not-connected');
                logMessage(`Reconnected to serial port: ${port}`);

                // Hide Available Ports and show disconnect/restart buttons
                serialPortsContainer.style.display = 'none';
                connectButton.style.display = 'none';
                disconnectButton.style.display = 'inline-block';
                restartButton.style.display = 'inline-block';
            } else {
                statusElement.textContent = 'Not connected';
                statusElement.classList.add('not-connected');
                statusElement.classList.remove('connected');
                logMessage('No active serial connection.');

                // Show Available Ports and the connect button
                serialPortsContainer.style.display = 'block';
                connectButton.style.display = 'inline-block';
                disconnectButton.style.display = 'none';
                restartButton.style.display = 'none';

                // Attempt to auto-load available ports
                await loadSerialPorts();
            }
        }

        async function runFile(fileName) {
            const response = await fetch(`/run_theta_rho_file/${fileName}`, { method: 'POST' });
            const result = await response.json();
            if (result.success) {
                logMessage(`Running file: ${fileName}`);
            } else {
                logMessage(`Failed to run file: ${fileName}`);
            }
        }

        async function runClearIn() {
            await runFile('clear_from_in.thr');
        }

        async function runClearOut() {
            await runFile('clear_from_out.thr');
        }

        async function runSideway() {
            await runFile('clear_sideway.thr');
        }
        
        // Call this function on page load
        checkSerialStatus();

        // Initial load of serial ports and Theta-Rho files
        loadSerialPorts();
        loadThetaRhoFiles();

        document.getElementById('run_button').onclick = runThetaRho;
        
        document.querySelectorAll('.modeSelector').forEach((radio) => {
            radio.addEventListener('change', function () {
              // Hide all .modeSection first
              document.querySelectorAll('.modeSection').forEach((section) => {
                section.style.display = 'none';
              });
          
              // Figure out which mode was selected
              const selectedValue = this.value; // or document.querySelector('.modeSelector:checked').value
          
              // Show every element that has .modeSection AND the selected mode's class
              document
                .querySelectorAll(`.modeSection.${selectedValue}`)
                .forEach((elem) => {
                  elem.style.display = 'block';
                });
            });
          });
        // Keep track of the files in the new playlist
        let playlist = [];
        // Currently selected item in the playlist
        let selectedPlaylistIndex = null;
        
        // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        //  PART A: Loading / listing playlists from the server
        // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        
        async function loadAllPlaylists() {
            try {
            const response = await fetch('/list_all_playlists'); // GET
            const allPlaylists = await response.json();          // e.g. ["My Playlist", "Summer", ...]
            displayAllPlaylists(allPlaylists);
            } catch (err) {
            logMessage(`Error loading playlists: ${err}`);
            }
        }
        
        // Function to display all playlists with Load, Run, and Delete buttons
        function displayAllPlaylists(allPlaylists) {
            const ul = document.getElementById('all_playlists');
            ul.innerHTML = ''; // Clear current list

            allPlaylists.forEach((playlistName) => {
                const li = document.createElement('li');
                li.classList.add('playlist-item'); // For styling

                // Playlist Name
                const nameSpan = document.createElement('span');
                nameSpan.textContent = playlistName;
                li.appendChild(nameSpan);

                // "Load" button
                const loadBtn = document.createElement('button');
                loadBtn.textContent = 'Load';
                loadBtn.onclick = () => loadPlaylist(playlistName);
                loadBtn.classList.add('load-button'); // For styling
                li.appendChild(loadBtn);

                // "Run" button
                const runBtn = document.createElement('button');
                runBtn.textContent = 'Run';
                runBtn.onclick = () => runPlaylist(playlistName);
                runBtn.classList.add('run-button'); // For styling
                li.appendChild(runBtn);

                // "Delete" button
                const deleteBtn = document.createElement('button');
                deleteBtn.textContent = 'Delete';
                deleteBtn.onclick = () => deletePlaylist(playlistName);
                deleteBtn.classList.add('delete-button'); // For styling
                li.appendChild(deleteBtn);

                ul.appendChild(li);
            });
        }

        // Function to run the selected playlist with specified parameters
        async function runPlaylist(playlistName) {
            if (!playlistName) {
                logMessage("No playlist selected to run.");
                return;
            }

            // Get the parameters from the UI
            const pauseTimeInput = document.getElementById('pause_time').value;
            const clearPatternSelect = document.getElementById('clear_pattern').value;
            const runMode = document.querySelector('input[name="run_mode"]:checked').value;
            const shuffle = document.getElementById('shuffle_playlist').checked;

            // Validate pause time
            const pauseTime = parseFloat(pauseTimeInput);
            if (isNaN(pauseTime) || pauseTime < 0) {
                logMessage("Invalid pause time. Please enter a non-negative number.");
                return;
            }

            // Map clear_pattern select value to backend expected values
            let clearPattern = clearPatternSelect;
            if (clearPatternSelect === "none") {
                clearPattern = null;
            }

            logMessage(`Running playlist: ${playlistName} with pause_time=${pauseTime}, clear_pattern=${clearPattern || "None"}, run_mode=${runMode}, shuffle=${shuffle}`);

            try {
                const response = await fetch('/run_playlist', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        playlist_name: playlistName,
                        pause_time: pauseTime,
                        clear_pattern: clearPattern,
                        run_mode: runMode, // 'single' or 'indefinite'
                        shuffle: shuffle      // true or false
                    })
                });

                const result = await response.json();

                if (result.success) {
                    logMessage(`Playlist "${playlistName}" is now running.`);
                } else {
                    logMessage(`Failed to run playlist "${playlistName}": ${result.error}`);
                }
            } catch (error) {
                logMessage(`Error running playlist "${playlistName}": ${error}`);
            }
        }
        
        async function loadPlaylist(playlistName) {
            // This fetches the named playlist from /get_playlist?name=...
            try {
            const response = await fetch(`/get_playlist?name=${encodeURIComponent(playlistName)}`);
            const data = await response.json(); // { "name": "XYZ", "files": [...] }
        
            if (data.error) {
                logMessage(`Error loading playlist "${playlistName}": ${data.error}`);
                return;
            }
        
            // Clear current local playlist; replace with loaded data
            playlist = data.files || [];
            selectedPlaylistIndex = null;
            document.getElementById('playlist_name').value = data.name; // Fill in the name field
        
            refreshPlaylistUI();
            logMessage(`Loaded playlist: ${data.name} with ${playlist.length} file(s).`);
            } catch (err) {
            logMessage(`Error loading playlist: ${err}`);
            }
        }
        
        // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        //  PART B: Creating or Saving (Overwriting) a Playlist
        // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        
        // Instead of separate create/modify functions, we’ll unify them:
        async function savePlaylist() {
            const name = document.getElementById('playlist_name').value.trim();
            if (!name) {
            logMessage("Please enter a playlist name.");
            return;
            }
            if (playlist.length === 0) {
            logMessage("No files in this playlist. Add files first.");
            return;
            }
        
            logMessage(`Saving playlist "${name}" with ${playlist.length} file(s)...`);
        
            try {
            // We can use /create_playlist or /modify_playlist. They do roughly the same in our single-file approach.
            // Let's use /create_playlist to always overwrite or create anew.
            const response = await fetch('/create_playlist', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                name: name,
                files: playlist
                })
            });
            const result = await response.json();
            if (result.success) {
                logMessage(result.message);
                // Reload the entire list of playlists to reflect changes
                loadAllPlaylists();
            } else {
                logMessage(`Failed to save playlist: ${result.error}`);
            }
            } catch (err) {
            logMessage(`Error saving playlist: ${err}`);
            }
        }
        
        // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        //  PART C: Deleting a playlist
        // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        
        async function deletePlaylist(playlistName) {
            if (!confirm(`Delete playlist "${playlistName}"? This cannot be undone.`)) {
            return;
            }
            try {
            const response = await fetch('/delete_playlist', {
                method: 'DELETE',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ name: playlistName })
            });
            const result = await response.json();
            if (result.success) {
                logMessage(result.message);
                loadAllPlaylists(); // Refresh the UI
            } else {
                logMessage(`Failed to delete playlist: ${result.error}`);
            }
            } catch (err) {
            logMessage(`Error deleting playlist: ${err}`);
            }
        }
        
        // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        //  PART D: Local playlist array UI
        // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        
        // Called when the user clicks "Add File to Playlist"
        function addToPlaylist() {
            if (!selectedFile) {
            logMessage("No file selected to add to the playlist.");
            return;
            }
            // Add the current selectedFile to the local array
            playlist.push(selectedFile);
            logMessage(`Added "${selectedFile}" to the playlist.`);
            refreshPlaylistUI();
        }
        
        function refreshPlaylistUI() {
            const ul = document.getElementById('playlist_items');
            ul.innerHTML = '';
        
            playlist.forEach((file, index) => {
            const li = document.createElement('li');
            li.textContent = file;
        
            // When you click on a file in the playlist, mark it as selected
            li.onclick = () => selectPlaylistItem(index);
        
            // Highlight the currently selected playlist item
            if (index === selectedPlaylistIndex) {
                li.classList.add('selected');
            }
            ul.appendChild(li);
            });
        }
        
        function selectPlaylistItem(index) {
            selectedPlaylistIndex = index;
            refreshPlaylistUI();
            logMessage(`Selected playlist file: ${playlist[index]}`);
        }
        
        function movePlaylistItemUp() {
            if (selectedPlaylistIndex === null || selectedPlaylistIndex <= 0) return;
            const temp = playlist[selectedPlaylistIndex - 1];
            playlist[selectedPlaylistIndex - 1] = playlist[selectedPlaylistIndex];
            playlist[selectedPlaylistIndex] = temp;
            selectedPlaylistIndex--;
            refreshPlaylistUI();
        }
        
        function movePlaylistItemDown() {
            if (selectedPlaylistIndex === null || selectedPlaylistIndex >= playlist.length - 1) return;
            const temp = playlist[selectedPlaylistIndex + 1];
            playlist[selectedPlaylistIndex + 1] = playlist[selectedPlaylistIndex];
            playlist[selectedPlaylistIndex] = temp;
            selectedPlaylistIndex++;
            refreshPlaylistUI();
        }
        
        function removeFromPlaylist() {
            if (selectedPlaylistIndex === null) {
            logMessage("No item selected in the playlist to remove.");
            return;
            }
            const removedFile = playlist[selectedPlaylistIndex];
            playlist.splice(selectedPlaylistIndex, 1);
            selectedPlaylistIndex = null;
            refreshPlaylistUI();
            logMessage(`Removed "${removedFile}" from the playlist.`);
        }
        
        // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        //  PART E: Page load initialization
        // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        
        // Make sure we load the existing playlists list on page load
        document.addEventListener('DOMContentLoaded', () => {
            loadAllPlaylists();
        });
         
    </script>
</body>
</html>