app/electron/project-selection.html - master - tisit/FUXA_SCADA

app/electron/project-selection.html
185 строк6 KB
Matthew Reed
Refactor and tidy up directories and add sub directory for electron
13 ноя 2025, 22:51
13 ноя 2025, 22:514a879f7
<!DOCTYPE html>
<html>
<head>
    <title>FUXA Project Selection</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 15px;
            background-color: #424242;
            color: #FFFFFF;
            height: 100vh;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        h2 {
            text-align: center;
            color: #FFFFFF;
            margin-bottom: 15px;
            flex-shrink: 0;
        }
        .error-message {
            color: #ff6b6b;
            margin-bottom: 15px;
            padding: 10px;
            background-color: #2d2d2d;
            border: 1px solid #ff9999;
            border-radius: 5px;
            text-align: center;
            display: none;
        }
        .table-container {
            flex: 1;
            overflow-y: auto;
            margin-bottom: 15px;
            border: 1px solid rgba(39,39,39,0.42);
            border-radius: 5px;
            min-height: 200px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            background-color: #37373D;
            table-layout: fixed;
        }
        th {
            background-color: #333333;
            color: #FFFFFF;
            padding: 12px 8px;
            text-align: left;
            position: sticky;
            top: 0;
            z-index: 1;
            font-size: 14px;
        }
        th:nth-child(1) { width: 25%; }
        th:nth-child(2) { width: 50%; }
        th:nth-child(3) { width: 25%; }
        td {
            padding: 10px 8px;
            border-bottom: 1px solid rgba(39,39,39,0.42);
            cursor: pointer;
            font-size: 13px;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
        tr:nth-child(even) {
            background-color: #424242;
        }
        tr:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        .button-container {
            flex-shrink: 0;
            text-align: center;
            padding-top: 10px;
            display: flex;
            justify-content: center;
            gap: 10px;
            border-top: 1px solid rgba(39,39,39,0.42);
            margin-top: auto;
            padding-bottom: 10px;
        }
        button {
            padding: 8px 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 13px;
            width: auto;
            min-width: 80px;
            max-width: 120px;
        }
        button.new, button.cancel {
            background-color: #757575;
            color: #FFFFFF;
        }
        button.open {
            background-color: #448AFF;
            color: #FFFFFF;
        }
        button:hover {
            opacity: 0.9;
        }
        @media (max-width: 500px) {
            body {
                padding: 10px;
            }
            h2 {
                font-size: 16px;
                margin-bottom: 10px;
            }
            th, td {
                padding: 8px 4px;
                font-size: 12px;
            }
            button {
                padding: 6px 8px;
                font-size: 12px;
                min-width: 70px;
            }
        }
    </style>
</head>
<body>
    <h2>Select a FUXA Project</h2>
    <div id="errorMessage" class="error-message"></div>
    <div class="table-container">
        <table id="projectsTable">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Path</th>
                    <th>Created</th>
                </tr>
            </thead>
            <tbody id="projectsBody">
                <!-- Projects will be populated by JavaScript -->
            </tbody>
        </table>
    </div>
    <div class="button-container">
        <button class="new" onclick="window.electronAPI.selectAction('new')">New Project</button>
        <button class="open" onclick="window.electronAPI.selectAction('open')">Open Project</button>
        <button class="cancel" onclick="window.electronAPI.cancel()">Cancel</button>
    </div>
    <script>
        const { ipcRenderer } = require('electron');
        window.electronAPI = {
            // Auto-start settings
            getAutoStartSettings: () => ipcRenderer.invoke('get-auto-start-settings'),
            setAutoStartSettings: (settings) => ipcRenderer.invoke('set-auto-start-settings', settings),
            // Fullscreen settings
            getFullscreenSettings: () => ipcRenderer.invoke('get-fullscreen-settings'),
            setFullscreenSettings: (settings) => ipcRenderer.invoke('set-fullscreen-settings', settings),
            getRecentProjects: () => ipcRenderer.invoke('get-recent-projects'),
            // Project selection (for backward compatibility)
            selectAction: (action) => ipcRenderer.send('project-action', action),
            selectProject: (path) => ipcRenderer.send('project-selected', path),
            cancel: () => ipcRenderer.send('project-action', 'cancel')
        };

        // Load projects when the page loads
        ipcRenderer.on('load-projects', (event, projects) => {
            const tbody = document.getElementById('projectsBody');
            tbody.innerHTML = '';
            projects.forEach(project => {
                const row = document.createElement('tr');
                row.innerHTML = '<td>' + project.name + '</td><td>' + project.path + '</td><td>' + new Date(project.createdAt).toLocaleDateString() + '</td>';
                row.onclick = () => window.electronAPI.selectProject(project.path);
                tbody.appendChild(row);
            });
        });

        // Show error message if provided
        ipcRenderer.on('show-error', (event, message) => {
            const errorDiv = document.getElementById('errorMessage');
            errorDiv.textContent = message;
            errorDiv.style.display = 'block';
        });
    </script>
</body>
</html>