haos-hacs-immich-album-watcher/frontend/src/routes/servers/+page.svelte

<script lang="ts">
	import { onMount } from 'svelte';
	import { api } from '$lib/api';
	import { t } from '$lib/i18n';
	import PageHeader from '$lib/components/PageHeader.svelte';
	import Card from '$lib/components/Card.svelte';
	import Loading from '$lib/components/Loading.svelte';
	import IconPicker from '$lib/components/IconPicker.svelte';
	import MdiIcon from '$lib/components/MdiIcon.svelte';

	let servers = $state<any[]>([]);
	let showForm = $state(false);
	let editing = $state<number | null>(null);
	let form = $state({ name: 'Immich', url: '', api_key: '', icon: '' });
	let error = $state('');
	let submitting = $state(false);
	let loaded = $state(false);

	let health = $state<Record<number, boolean | null>>({});

	onMount(load);
	async function load() {
		try { servers = await api('/servers'); } catch {} finally { loaded = true; }
		// Ping all servers in background
		for (const s of servers) {
			health[s.id] = null; // loading
			api(`/servers/${s.id}/ping`).then(r => health[s.id] = r.online).catch(() => health[s.id] = false);
		}
	}

	function openNew() {
		form = { name: 'Immich', url: '', api_key: '', icon: '' };
		editing = null; showForm = true;
	}
	function edit(s: any) {
		form = { name: s.name, url: s.url, api_key: '', icon: s.icon || '' };
		editing = s.id; showForm = true;
	}

	async function save(e: SubmitEvent) {
		e.preventDefault(); error = ''; submitting = true;
		try {
			if (editing) {
				const body: any = { name: form.name, url: form.url };
				if (form.api_key) body.api_key = form.api_key;
				await api(`/servers/${editing}`, { method: 'PUT', body: JSON.stringify(body) });
			} else {
				await api('/servers', { method: 'POST', body: JSON.stringify(form) });
			}
			showForm = false; editing = null; await load();
		} catch (err: any) { error = err.message; }
		submitting = false;
	}

	async function remove(id: number) {
		if (!confirm(t('servers.confirmDelete'))) return;
		try { await api(`/servers/${id}`, { method: 'DELETE' }); await load(); } catch (err: any) { error = err.message; }
	}
</script>

<PageHeader title={t('servers.title')} description={t('servers.description')}>
	<button onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}
		class="px-3 py-1.5 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">
		{showForm ? t('servers.cancel') : t('servers.addServer')}
	</button>
</PageHeader>

{#if !loaded}
	<Loading />
{:else}

{#if showForm}
	<Card class="mb-6">
		{#if error}<div class="bg-[var(--color-error-bg)] text-[var(--color-error-fg)] text-sm rounded-md p-3 mb-4">{error}</div>{/if}
		<form onsubmit={save} class="space-y-3">
			<div>
				<div class="flex items-end gap-2">
					<label for="srv-name" class="block text-sm font-medium mb-1">{t('servers.name')}</label>
				</div>
				<div class="flex gap-2">
					<IconPicker value={form.icon} onselect={(v) => form.icon = v} />
					<input id="srv-name" bind:value={form.name} required class="flex-1 px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
				</div>
			</div>
			<div>
				<label for="srv-url" class="block text-sm font-medium mb-1">{t('servers.url')}</label>
				<input id="srv-url" bind:value={form.url} required placeholder={t('servers.urlPlaceholder')} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
			</div>
			<div>
				<label for="srv-key" class="block text-sm font-medium mb-1">{editing ? t('servers.apiKeyKeep') : t('servers.apiKey')}</label>
				<input id="srv-key" bind:value={form.api_key} type="password" required={!editing} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
			</div>
			<button type="submit" disabled={submitting} class="px-4 py-2 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90 disabled:opacity-50">
				{submitting ? t('servers.connecting') : (editing ? t('common.save') : t('servers.addServer'))}
			</button>
		</form>
	</Card>
{/if}

{#if servers.length === 0 && !showForm}
	<Card><p class="text-sm text-[var(--color-muted-foreground)]">{t('servers.noServers')}</p></Card>
{:else}
	<div class="space-y-3">
		{#each servers as server}
			<Card>
				<div class="flex items-center justify-between">
					<div class="flex items-center gap-2">
						<span class="inline-block w-2.5 h-2.5 rounded-full {health[server.id] === true ? 'bg-green-500' : health[server.id] === false ? 'bg-red-500' : 'bg-yellow-400 animate-pulse'}"
							title={health[server.id] === true ? 'Online' : health[server.id] === false ? 'Offline' : 'Checking...'}></span>
						{#if server.icon}<MdiIcon name={server.icon} />{/if}
						<div>
							<p class="font-medium">{server.name}</p>
							<p class="text-sm text-[var(--color-muted-foreground)]">{server.url}</p>
						</div>
					</div>
					<div class="flex items-center gap-3">
						<button onclick={() => edit(server)} class="text-xs text-[var(--color-muted-foreground)] hover:underline">{t('common.edit')}</button>
						<button onclick={() => remove(server.id)} class="text-xs text-[var(--color-destructive)] hover:underline">{t('servers.delete')}</button>
					</div>
				</div>
			</Card>
		{/each}
	</div>
{/if}

{/if}