Can now create instances

2026-06-05 23:32:15 -05:00
parent 52670731d9
commit c98822babe
4 changed files with 228 additions and 9 deletions
--- a/old/app.js
+++ b/old/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/old/index.html
+++ b/old/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>VSSM Dashboard</h1>
+    <button id="refresh-btn">Refresh</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>
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,15 +1,21 @@
 <script>
  import { onMount } from 'svelte';
-  import { fetchInstances, toggleInstanceStatus } from './lib/api';
+  import { fetchInstances, toggleInstanceStatus, createInstance } from './lib/api';
  import InstanceList from './lib/components/InstanceList.svelte';
  import InstanceDetail from './lib/components/InstanceDetail.svelte';

  let instances = [];
  let connectionError = null;
  let processingTargets = {};
-  
  let activeFocusedInstance = null;

+  let showCreateForm = false;
+  let newName = '';
+  let newVersion = '1.22.3'; 
+  let newPort = '42420';
+  let isCreating = false;
+  let createError = null;
+
  async function syncTelemetry() {
    try {
      instances = await fetchInstances();
@@ -38,6 +44,27 @@
    }
  }

+  async function handleCreateServer() {
+    if (!newName.trim() || !newVersion.trim() || !newPort) {
+      createError = "All fields are required.";
+      return;
+    }
+
+    isCreating = true;
+    createError = null;
+
+    try {
+      await createInstance(newName.trim(), newVersion.trim(), newPort);
+      newName = '';
+      showCreateForm = false;
+      await syncTelemetry();
+    } catch (err) {
+      createError = err.message;
+    } finally {
+      isCreating = false;
+    }
+  }
+
  onMount(() => {
    syncTelemetry();
    const interval = setInterval(syncTelemetry, 4000);
@@ -52,13 +79,20 @@
      <h1 class="text-xl font-serif font-bold tracking-wide text-amber-100/90">VSSM Dashboard</h1>
      <p class="text-xs text-stone-400 mt-1">VintageStory Server Manager</p>
    </div>
+    <div class="flex gap-3">
      {#if !activeFocusedInstance}
+        <button 
+          on:click={() => { showCreateForm = !showCreateForm; createError = null; }}
+          class="border border-amber-800 bg-amber-950/20 hover:bg-amber-900/30 text-amber-200 px-4 py-1.5 text-xs uppercase tracking-wider transition-colors cursor-pointer rounded shadow-sm">
+          {showCreateForm ? 'Cancel' : 'New Instance'}
+        </button>
        <button 
          on:click={syncTelemetry}
          class="border border-stone-600 bg-stone-800/60 hover:bg-stone-700 hover:text-amber-100 px-4 py-1.5 text-xs uppercase tracking-wider transition-colors cursor-pointer rounded shadow-sm">
          Refresh Status
        </button>
      {/if}
+    </div>
  </header>

  {#if connectionError}
@@ -68,6 +102,56 @@
    </div>
  {/if}

+  {#if showCreateForm && !activeFocusedInstance}
+    <div class="mb-6 p-4 border border-stone-700/60 bg-stone-900/80 rounded shadow-md backdrop-blur-sm animate-fade-in">
+      <h2 class="text-sm font-bold text-amber-200 uppercase tracking-wide mb-4">Setup New Server Instance</h2>
+      
+      {#if createError}
+        <div class="bg-red-900/20 border border-red-800/40 text-red-300 p-2.5 text-xs mb-4 rounded">
+          {createError}
+        </div>
+      {/if}
+
+      <form on:submit|preventDefault={handleCreateServer} class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
+        <div>
+          <label class="block text-xs text-stone-400 mb-1.5 uppercase">Server Name</label>
+          <input 
+            type="text" 
+            bind:value={newName}
+            placeholder="e.g., survival-hub" 
+            disabled={isCreating}
+            class="w-full border border-stone-700 bg-stone-950/60 p-2 text-xs rounded focus:outline-none focus:border-stone-500 text-stone-100" />
+        </div>
+        <div>
+          <label class="block text-xs text-stone-400 mb-1.5 uppercase">Game Version</label>
+          <input 
+            type="text" 
+            bind:value={newVersion}
+            placeholder="e.g., 1.19.8" 
+            disabled={isCreating}
+            class="w-full border border-stone-700 bg-stone-950/60 p-2 text-xs rounded focus:outline-none focus:border-stone-500 text-stone-100" />
+        </div>
+        <div>
+          <label class="block text-xs text-stone-400 mb-1.5 uppercase">Network Port</label>
+          <input 
+            type="number" 
+            bind:value={newPort}
+            placeholder="42420" 
+            disabled={isCreating}
+            class="w-full border border-stone-700 bg-stone-950/60 p-2 text-xs rounded focus:outline-none focus:border-stone-500 text-stone-100 font-mono" />
+        </div>
+        <div>
+          <button 
+            type="submit"
+            disabled={isCreating}
+            class="w-full border border-emerald-800 bg-emerald-950/30 hover:bg-emerald-900/40 text-emerald-200 font-bold py-2 text-xs uppercase rounded transition-colors disabled:opacity-50 cursor-pointer shadow-sm">
+            {isCreating ? 'Downloading & Creating...' : 'Create Instance'}
+          </button>
+        </div>
+      </form>
+    </div>
+  {/if}
+
  {#if activeFocusedInstance}
    <InstanceDetail 
      instance={activeFocusedInstance} 
--- a/src/lib/api.js
+++ b/src/lib/api.js
@@ -43,3 +43,14 @@ export async function fetchServerLogs(name) {
  }
  return await res.json();
 }
+
+export async function createInstance(name, version, port) {
+  const res = await fetch(`${DAEMON_URL}/instances/create?name=${encodeURIComponent(name)}&version=${encodeURIComponent(version)}&port=${parseInt(port)}`, {
+    method: 'POST'
+  });
+  
+  if (!res.ok) {
+    const errText = await res.text();
+    throw new Error(errText || "Failed to create server instance");
+  }
+}