Refresh script library with batch uploads and beta handoff
This commit is contained in:
@@ -0,0 +1,210 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { tick } from 'svelte';
|
||||
import Button from './primitives/Button.svelte';
|
||||
import { betaSelectionHref, mapLabel, scopeLabel, type BetaSelection, type LibraryScript } from '$lib/script-library.js';
|
||||
let { scripts, onuploaded }: { scripts: LibraryScript[]; onuploaded: () => Promise<void> } = $props();
|
||||
interface Duplicate { scriptId: number; versionId: number; version: number; }
|
||||
interface Upload {
|
||||
key: number; file: File; target: number | 'new' | ''; name: string;
|
||||
duplicates: Duplicate[]; inspecting: boolean; inspected: boolean; error: string;
|
||||
result: (BetaSelection & { version: number; reused: boolean }) | null;
|
||||
}
|
||||
let dialog: HTMLDialogElement;
|
||||
let input: HTMLInputElement;
|
||||
let queue = $state<Upload[]>([]);
|
||||
let busy = $state(false);
|
||||
let notes = $state('');
|
||||
let scopeType = $state<'none' | 'game' | 'map'>('none');
|
||||
let scopeGame = $state('');
|
||||
let scopeMap = $state('');
|
||||
let scopeOptions = $state<{ games: string[]; mapsByGame: Record<string, string[]> }>({ games: [], mapsByGame: {} });
|
||||
let servers = $state<Array<{ name: string; game: string | null; map: string | null }>>([]);
|
||||
let scopeLoaded = $state(false);
|
||||
let message = $state('');
|
||||
let preferredTarget = $state<number | null>(null);
|
||||
let nextKey = 0;
|
||||
const pending = $derived(queue.filter(q => !q.result));
|
||||
const inspecting = $derived(queue.some(q => q.inspecting));
|
||||
const hasNew = $derived(pending.some(q => q.target === 'new'));
|
||||
const scopeValue = $derived(scopeType === 'game' ? scopeGame : scopeType === 'map' ? scopeMap : '');
|
||||
const matches = $derived(servers.filter(s => scopeType === 'game' ? s.game === scopeValue : s.map === scopeValue));
|
||||
const ready = $derived(pending.length > 0 && !busy && !inspecting && pending.every(q => q.inspected && !validation(q))
|
||||
&& (!hasNew || scopeType === 'none' || scopeLoaded && !!scopeValue));
|
||||
const results = $derived(queue.flatMap(q => q.result ? [q.result] : []));
|
||||
const testable = $derived(results.filter(r => {
|
||||
const s = scripts.find(s => s.id === r.scriptId);
|
||||
return s && s.runningBetaId === null && s.current_version_id !== r.versionId;
|
||||
}));
|
||||
|
||||
export function open(scriptId?: number) {
|
||||
// Reopening preserves unfinished work; a targeted upload starts a fresh review
|
||||
// only when there is no pending file to lose.
|
||||
if (!pending.length) { queue = []; notes = ''; message = ''; preferredTarget = scriptId ?? null; }
|
||||
dialog.showModal();
|
||||
if (!scopeLoaded) void loadScope();
|
||||
}
|
||||
async function loadScope() {
|
||||
try {
|
||||
const [scopeRes, serversRes] = await Promise.all([fetch('/api/scope-options'), fetch('/api/servers')]);
|
||||
if (!scopeRes.ok || !serversRes.ok) throw new Error('Scope preview could not be loaded. Reopen the drawer to retry.');
|
||||
scopeOptions = await scopeRes.json(); servers = (await serversRes.json()).servers;
|
||||
scopeLoaded = true;
|
||||
} catch (e) { message = (e as Error).message; }
|
||||
}
|
||||
function matchingScripts(file: File) {
|
||||
return scripts.filter(s => s.target_rel_path.replaceAll('\\', '/').split('/').pop()?.toLowerCase() === file.name.toLowerCase());
|
||||
}
|
||||
export async function addFiles(files: File[]) {
|
||||
if (busy || !files.length) return;
|
||||
if (!dialog.open) open();
|
||||
for (const file of files) {
|
||||
const matches = matchingScripts(file);
|
||||
const item: Upload = { key: nextKey++, file, target: preferredTarget ?? (matches.length === 1 ? matches[0].id : matches.length > 1 ? '' : 'new'),
|
||||
name: file.name.replace(/\.[^.]+$/, ''), duplicates: [], inspecting: true, inspected: false, error: '', result: null };
|
||||
queue = [...queue, item];
|
||||
// Work with the reactive proxy, rather than the original object.
|
||||
await inspect(queue.find(q => q.key === item.key)!);
|
||||
}
|
||||
preferredTarget = null;
|
||||
}
|
||||
async function inspect(item: Upload) {
|
||||
item.inspecting = true; item.error = '';
|
||||
try {
|
||||
const form = new FormData(); form.append('content', item.file);
|
||||
const res = await fetch('/api/scripts/inspect', { method: 'POST', body: form });
|
||||
const body = await res.json();
|
||||
if (!res.ok) throw new Error(body.error ?? 'Could not inspect this file.');
|
||||
item.duplicates = body.duplicates; item.inspected = true;
|
||||
} catch (e) { item.error = (e as Error).message; }
|
||||
finally { item.inspecting = false; }
|
||||
}
|
||||
function duplicate(item: Upload) { return item.duplicates.find(d => d.scriptId === item.target); }
|
||||
function validation(item: Upload): string {
|
||||
if (item.target === '') return 'Several scripts use this filename. Choose which script to update.';
|
||||
if (item.target === 'new') {
|
||||
if (!item.name.trim()) return 'Give this script a name.';
|
||||
if (scripts.some(s => s.name === item.name.trim())) return 'This name already exists. Choose a new name or update that script.';
|
||||
if (queue.some(q => q.key !== item.key && !q.result && q.target === 'new' && q.name.trim() === item.name.trim())) return 'Use a distinct name for each new script.';
|
||||
} else {
|
||||
const script = scripts.find(s => s.id === item.target);
|
||||
if (!script) return 'This script is no longer available.';
|
||||
if (script.runningBetaId !== null) return 'Finish the active beta before uploading another version.';
|
||||
if (queue.some(q => q.key !== item.key && !q.result && q.target === item.target)) return 'Choose one file per existing script in this batch.';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
async function upload(prepareBeta: boolean) {
|
||||
if (!ready) return;
|
||||
busy = true; message = '';
|
||||
try {
|
||||
for (const item of queue.filter(q => !q.result)) {
|
||||
item.error = '';
|
||||
try {
|
||||
const form = new FormData();
|
||||
form.append('content', item.file); form.append('notes', notes.trim());
|
||||
const creating = item.target === 'new';
|
||||
if (creating) {
|
||||
form.append('name', item.name.trim()); form.append('scopeType', scopeType);
|
||||
if (scopeValue) form.append('scopeValue', scopeValue);
|
||||
} else form.append('reuseExisting', 'true');
|
||||
const res = await fetch(creating ? '/api/scripts' : `/api/scripts/${item.target}/versions`, { method: 'POST', body: form });
|
||||
const body = await res.json();
|
||||
if (!res.ok || !body.ok) throw new Error(body.error ?? 'Upload failed. Try again.');
|
||||
item.result = { scriptId: creating ? body.script.id : item.target as number,
|
||||
versionId: creating ? body.versionId : body.version.id,
|
||||
version: creating ? 1 : body.version.version, reused: !!body.reused };
|
||||
} catch (e) { item.error = (e as Error).message; }
|
||||
}
|
||||
await onuploaded();
|
||||
if (queue.some(q => !q.result)) message = 'Some files need attention. Successful uploads are saved; retry only the remaining files.';
|
||||
else {
|
||||
message = 'Your files are ready. Choose servers and a test plan in beta setup.';
|
||||
// Read from refreshed props after Svelte applies the parent update.
|
||||
await tick();
|
||||
if (testable.length !== results.length) message = `${results.length - testable.length} version(s) are already promoted or unavailable for a new beta. Review the saved files before continuing.`;
|
||||
if (prepareBeta && testable.length === results.length && testable.length) { dialog.close(); await goto(betaSelectionHref(testable)); }
|
||||
}
|
||||
} catch (e) { message = (e as Error).message; }
|
||||
finally { busy = false; }
|
||||
}
|
||||
function close(event?: Event) { if (busy || inspecting) { event?.preventDefault(); return; } dialog.close(); }
|
||||
</script>
|
||||
|
||||
<dialog bind:this={dialog} aria-labelledby="upload-title" oncancel={close}>
|
||||
<div class="drawer">
|
||||
<header><div><span class="eyebrow">Prepare your next release</span><h2 id="upload-title">Upload scripts</h2></div><Button variant="ghost" ariaLabel="Close upload drawer" disabled={busy || inspecting} onclick={() => close()}>✕</Button></header>
|
||||
<p class="intro">Drop files anywhere or choose them below. Review each destination before uploading.</p>
|
||||
<div class="dropzone">
|
||||
<strong>{preferredTarget ? `New version for ${scripts.find(s => s.id === preferredTarget)?.name ?? 'script'}` : 'One file or a whole batch'}</strong>
|
||||
<span>Existing filenames are recognized automatically.</span>
|
||||
<Button disabled={busy || inspecting} onclick={() => input.click()}>Choose files</Button>
|
||||
<input class="file-input" bind:this={input} type="file" multiple aria-label="Choose script files" onchange={event => { void addFiles([...event.currentTarget.files ?? []]); event.currentTarget.value = ''; }} />
|
||||
</div>
|
||||
<div class="queue" aria-live="polite">
|
||||
{#each queue as item (item.key)}
|
||||
<section class="upload-item" aria-label={item.file.name}>
|
||||
<div class="file-heading"><strong>{item.file.name}</strong><span>{(item.file.size / 1024).toFixed(1)} KB</span>
|
||||
<Button variant="ghost" size="sm" disabled={busy || inspecting} ariaLabel={`Remove ${item.file.name}`} onclick={() => queue = queue.filter(q => q.key !== item.key)}>Remove</Button>
|
||||
</div>
|
||||
{#if item.result}
|
||||
<p class="success">{item.result.reused ? 'Already uploaded' : 'Uploaded'} as v{item.result.version} · <a href="/scripts/{item.result.scriptId}">View script →</a></p>
|
||||
{:else}
|
||||
<label>Destination<select bind:value={item.target} disabled={busy || item.inspecting} onchange={() => item.error = ''}>
|
||||
<option value="" disabled>Choose a script…</option><option value="new">Create a new script</option>
|
||||
{#each scripts as s}<option value={s.id}>{s.name} · {scopeLabel(s)}{s.runningBetaId !== null ? ' · beta active' : ''}</option>{/each}
|
||||
</select></label>
|
||||
{#if item.target === 'new'}<label>Script name<input bind:value={item.name} disabled={busy} /></label>
|
||||
{:else if item.target !== ''}{@const s = scripts.find(s => s.id === item.target)}<p class="note">Keeps scope: {s ? scopeLabel(s) : '—'}. Target: {s?.target_rel_path}</p>{/if}
|
||||
{#if item.inspecting}<p class="note">Checking file contents…</p>
|
||||
{:else if duplicate(item)}<p class="success">Already uploaded as v{duplicate(item)!.version}. We’ll reuse that version.</p>
|
||||
{:else if item.target !== 'new' && item.target !== ''}<p class="note">New version for {scripts.find(s => s.id === item.target)?.name}</p>{/if}
|
||||
{#if validation(item)}<p class="warning">{validation(item)}</p>{/if}
|
||||
{#if item.error}<p class="error" role="alert">{item.error}</p>{#if !item.inspected}<Button size="sm" disabled={busy || inspecting} onclick={() => inspect(item)}>Retry inspection</Button>{/if}{/if}
|
||||
{/if}
|
||||
</section>
|
||||
{/each}
|
||||
</div>
|
||||
{#if pending.length}
|
||||
<section class="shared">
|
||||
<h3>Shared upload details</h3>
|
||||
<label>Version notes<textarea bind:value={notes} disabled={busy} rows="3" placeholder="What changed in these files?"></textarea></label>
|
||||
{#if hasNew}
|
||||
<label>Scope for new scripts<select bind:value={scopeType} disabled={busy} onchange={() => { scopeGame = ''; scopeMap = ''; }}><option value="none">Unscoped · choose beta targets</option><option value="game">Game</option><option value="map">Map</option></select></label>
|
||||
{#if scopeType !== 'none'}
|
||||
<label>Game<select bind:value={scopeGame} disabled={busy || !scopeLoaded} onchange={() => scopeMap = ''}><option value="">Choose a game…</option>{#each scopeOptions.games as g}<option value={g}>{g.toUpperCase()}</option>{/each}</select></label>
|
||||
{#if scopeType === 'map'}<label>Map<select bind:value={scopeMap} disabled={busy || !scopeGame}><option value="">Choose a map…</option>{#each scopeOptions.mapsByGame[scopeGame] ?? [] as m}<option value={m}>{mapLabel(m)}</option>{/each}</select></label>{/if}
|
||||
{#if scopeValue}<p class="note">{matches.length} matching servers: {matches.map(s => s.name).join(', ') || 'None'}</p>{/if}
|
||||
{#if scopeType === 'map' && scopeGame === 't6'}<p class="note">Map scope includes every server using this engine map, including its Survival, Grief, or other variants.</p>{/if}
|
||||
{:else}<p class="note">Unscoped scripts deploy only to explicitly selected beta targets.</p>{/if}
|
||||
<p class="note">Existing scripts keep their current scope.</p>
|
||||
{/if}
|
||||
</section>
|
||||
{/if}
|
||||
{#if message}<p class="notice" role="status">{message}</p>{/if}
|
||||
<footer>
|
||||
{#if pending.length}<Button disabled={!ready} loading={busy} onclick={() => upload(false)}>Upload{results.length ? ' remaining' : ''}</Button><Button variant="primary" disabled={!ready} onclick={() => upload(true)}>Upload & prepare beta →</Button>
|
||||
{:else if testable.length}<Button variant="primary" href={betaSelectionHref(testable)}>Prepare beta with {testable.length} script{testable.length === 1 ? '' : 's'} →</Button>{/if}
|
||||
</footer>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<style>
|
||||
dialog { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(620px, 100vw); height: 100dvh; max-height: 100dvh; max-width: 100vw; padding: 0; border: 0; border-left: 1px solid var(--border-subtle); background: var(--surface); color: var(--text-primary); }
|
||||
dialog::backdrop { background: #0009; backdrop-filter: blur(3px); }
|
||||
.drawer { padding: 28px; display: flex; flex-direction: column; gap: 20px; min-height: 100%; box-sizing: border-box; }
|
||||
header { display: flex; justify-content: space-between; align-items: center; gap: 16px; } h2 { margin: 6px 0 0; font-size: var(--text-2xl); } h3 { margin: 0; font-size: var(--text-md); }
|
||||
.eyebrow { text-transform: uppercase; letter-spacing: .1em; color: var(--accent-primary); font-size: var(--text-xs); }
|
||||
.intro, .note { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.6; margin: 0; overflow-wrap: anywhere; }
|
||||
.dropzone { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); padding: 28px; background: var(--surface-sunken); }
|
||||
.dropzone span { font-size: var(--text-xs); color: var(--text-secondary); } .file-input { display: none; }
|
||||
.queue, .shared { display: flex; flex-direction: column; gap: 16px; } .upload-item { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
|
||||
.file-heading { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .file-heading strong { flex: 1; overflow-wrap: anywhere; } .file-heading span { color: var(--text-tertiary); font-size: var(--text-xs); }
|
||||
label { display: flex; flex-direction: column; gap: 7px; font-size: var(--text-xs); color: var(--text-secondary); }
|
||||
input, select, textarea { box-sizing: border-box; width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-primary); background: var(--surface-sunken); font: inherit; font-size: var(--text-sm); } textarea { resize: vertical; }
|
||||
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
|
||||
.success, .warning, .error { margin: 0; font-size: var(--text-sm); line-height: 1.5; } .success { color: var(--state-online); } .warning { color: var(--state-warning); } .error { color: var(--state-danger); } a { color: inherit; }
|
||||
.notice { padding: 14px; background: var(--surface-raised); border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.6; }
|
||||
footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--border-subtle); }
|
||||
@media (max-width: 640px) { .drawer { padding: 20px; } }
|
||||
</style>
|
||||
Reference in New Issue
Block a user