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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sand Table 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>Sand Table Controller</h1>
    <div class="container">
        <!-- Left Column -->
        <div class="left-column">
            <div class="section">
                <h2>Serial Connection</h2>
                <label for="serial_ports">Available Ports:</label>
                <select id="serial_ports"></select>
                <div class="button-group">
                    <button onclick="connectSerial()">Connect</button>
                    <button onclick="disconnectSerial()">Disconnect</button>
                    <button onclick="restartSerial()">Restart</button>
                </div>
                <p id="serial_status" class="status">Status: Not connected</p>
            </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>
                </br>
                    <button onclick="runClearIn()">Clear from In</button>
                    <button onclick="runClearOut()">Clear from Out</button>
                   
                </div>
            </div>
            <div class="section">
                <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>

        <!-- Right Column -->
        <div class="right-column">
            <div class="section">
                <h2>Pattern Files</h2>
                <input type="text" id="search_pattern" placeholder="Search files..." oninput="searchPatternFiles()">
                <ul id="theta_rho_files"></ul>
                <div class="pre-execution-toggles">
                    <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="none" id="no_action" checked> None
                    </label>
                </div>
                <div class="button-group">
                    <button id="run_button" disabled>Run Selected File</button>
                    <button onclick="stopExecution()" class="delete-button">Stop</button>
                </div>
            </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 loadThetaRhoFiles() {
            logMessage('Loading Theta-Rho files...');
            const response = await fetch('/list_theta_rho_files');
            const files = await response.json();
            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);
            });

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

        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}`);
        }

        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}`);
                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) {
                document.getElementById('serial_status').textContent = `Status: Connected to ${port}`;
                logMessage(`Connected to serial port: ${port}`);
            } 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) {
                document.getElementById('serial_status').textContent = 'Status: Disconnected';
                logMessage('Serial port disconnected.');
            } 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 = `Status: Restarted connection to ${port}`;
                logMessage('Serial connection restarted.');
            } 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.');
            }
        }

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

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

        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}`);
            }
        }

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

        async function loadThetaRhoFiles() {
            logMessage('Loading Theta-Rho files...');
            const response = await fetch('/list_theta_rho_files');
            const files = await response.json();
            allFiles = files; // Store the full list of files
            displayFiles(allFiles); // Initially display all 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}`);
            }
        }

        // Initial load of serial ports and Theta-Rho files
        loadSerialPorts();
        loadThetaRhoFiles();
        
        document.getElementById('run_button').onclick = runThetaRho;

    </script>
</body>
</html>