Inial commit (basic UI)

2026-06-05 18:11:04 -05:00
commit 1d105a3bfa
2 changed files with 124 additions and 0 deletions
--- a/app.js
+++ b/app.js
@@ -0,0 +1,83 @@
+const DAEMON_URL = 'http://127.0.0.1:12345';
+
+document.addEventListener('DOMContentLoaded', () => {
+    fetchInstances();
+    document.getElementById('refresh-btn').addEventListener('click', fetchInstances);
+});
+
+
+async function fetchInstances() {
+    const tableBody = document.getElementById('instances-table-body');
+    
+    try {
+        const response = await fetch(`${DAEMON_URL}/instances/list`);
+        if (!response.ok) throw new Error(`Server returned code: ${response.status}`);
+        
+        const instances = await response.json();
+        renderTable(instances);
+    } catch (error) {
+        console.error('Failed fetching telemetry data:', error);
+        tableBody.innerHTML = `<tr><td colspan="5" style="color: #ff5555;">Offline: Could not connect to vs-manager daemon.</td></tr>`;
+    }
+}
+
+
+function renderTable(instances) {
+    const tableBody = document.getElementById('instances-table-body');
+    
+    if (!instances || instances.length === 0) {
+        tableBody.innerHTML = `<tr><td colspan="5">No server configurations registered.</td></tr>`;
+        return;
+    }
+
+    tableBody.innerHTML = ''; 
+
+    instances.forEach(inst => {
+        const row = document.createElement('tr');
+        const isRunning = inst.status === 'RUNNING';
+        
+        row.innerHTML = `
+            <td><strong>${inst.name}</strong></td>
+            <td>${inst.version}</td>
+            <td>${inst.port}</td>
+            <td class="${isRunning ? 'status-running' : 'status-stopped'}">${inst.status}</td>
+            <td>
+                <button class="action-btn" data-name="${inst.name}" data-action="${isRunning ? 'stop' : 'start'}">
+                    ${isRunning ? 'Stop' : 'Start'}
+                </button>
+            </td>
+        `;
+        
+        tableBody.appendChild(row);
+    });
+
+
+    document.querySelectorAll('.action-btn').forEach(btn => {
+        btn.addEventListener('click', handleAction);
+    });
+}
+
+
+async function handleAction(e) {
+    const button = e.target;
+    const name = button.getAttribute('data-name');
+    const action = button.getAttribute('data-action'); 
+    
+    button.disabled = true;
+    button.innerText = 'Processing...';
+
+    try {
+        const response = await fetch(`${DAEMON_URL}/instances/${action}?name=${encodeURIComponent(name)}`, {
+            method: 'POST'
+        });
+
+        if (!response.ok) {
+            const errText = await response.text();
+            alert(`Action Failed: ${errText}`);
+        }
+    } catch (error) {
+        alert(`Network transmission failure: ${error.message}`);
+    } finally {
+        await fetchInstances();
+    }
+}
--- a/index.html
+++ b/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VS Manager Dashboard</title>
+    <style>
+        body { font-family: monospace; padding: 20px; background: #222; color: #fff; }
+        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
+        th, td { border: 1px solid #444; padding: 10px; text-align: left; }
+        th { background: #333; }
+        button { background: #444; color: #fff; border: 1px solid #666; padding: 5px 10px; cursor: pointer; }
+        button:hover { background: #555; }
+        .status-running { color: #55ff55; font-weight: bold; }
+        .status-stopped { color: #ff5555; font-weight: bold; }
+    </style>
+</head>
+<body>
+    <h1>Vintage Story Manager Hub</h1>
+    <button id="refresh-btn">Refresh Operations</button>
+
+    <table>
+        <thead>
+            <tr>
+                <th>Instance Name</th>
+                <th>Version</th>
+                <th>Port</th>
+                <th>Status</th>
+                <th>Actions</th>
+            </tr>
+        </thead>
+        <tbody id="instances-table-body">
+            <tr>
+                <td colspan="5">Connecting to daemon infrastructure...</td>
+            </tr>
+        </tbody>
+    </table>
+
+    <script src="app.js"></script>
+</body>
+</html>