Can now create instances
This commit is contained in:
83
old/app.js
Normal file
83
old/app.js
Normal file
@@ -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();
|
||||||
|
}
|
||||||
|
}
|
||||||
41
old/index.html
Normal file
41
old/index.html
Normal file
@@ -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>
|
||||||
102
src/App.svelte
102
src/App.svelte
@@ -1,15 +1,21 @@
|
|||||||
<script>
|
<script>
|
||||||
import { onMount } from 'svelte';
|
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 InstanceList from './lib/components/InstanceList.svelte';
|
||||||
import InstanceDetail from './lib/components/InstanceDetail.svelte';
|
import InstanceDetail from './lib/components/InstanceDetail.svelte';
|
||||||
|
|
||||||
let instances = [];
|
let instances = [];
|
||||||
let connectionError = null;
|
let connectionError = null;
|
||||||
let processingTargets = {};
|
let processingTargets = {};
|
||||||
|
|
||||||
let activeFocusedInstance = null;
|
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() {
|
async function syncTelemetry() {
|
||||||
try {
|
try {
|
||||||
instances = await fetchInstances();
|
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(() => {
|
onMount(() => {
|
||||||
syncTelemetry();
|
syncTelemetry();
|
||||||
const interval = setInterval(syncTelemetry, 4000);
|
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>
|
<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>
|
<p class="text-xs text-stone-400 mt-1">VintageStory Server Manager</p>
|
||||||
</div>
|
</div>
|
||||||
{#if !activeFocusedInstance}
|
<div class="flex gap-3">
|
||||||
<button
|
{#if !activeFocusedInstance}
|
||||||
on:click={syncTelemetry}
|
<button
|
||||||
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">
|
on:click={() => { showCreateForm = !showCreateForm; createError = null; }}
|
||||||
Refresh Status
|
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">
|
||||||
</button>
|
{showCreateForm ? 'Cancel' : 'New Instance'}
|
||||||
{/if}
|
</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>
|
</header>
|
||||||
|
|
||||||
{#if connectionError}
|
{#if connectionError}
|
||||||
@@ -68,6 +102,56 @@
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/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}
|
{#if activeFocusedInstance}
|
||||||
<InstanceDetail
|
<InstanceDetail
|
||||||
instance={activeFocusedInstance}
|
instance={activeFocusedInstance}
|
||||||
|
|||||||
@@ -43,3 +43,14 @@ export async function fetchServerLogs(name) {
|
|||||||
}
|
}
|
||||||
return await res.json();
|
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");
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user