50 lines
3.5 KiB
TypeScript
50 lines
3.5 KiB
TypeScript
import type { ReactElement } from "react";
|
|
import type { AccountSelectionMode } from "../../../shared/account-usage-rules";
|
|
|
|
export interface AccountPriorityModel {
|
|
mode: AccountSelectionMode;
|
|
accounts: readonly { id: string; label: string; mode: string; status: string }[];
|
|
}
|
|
|
|
export function AccountPriorityControls({ provider, model, busy, onModeChange, onMove }: {
|
|
provider: string;
|
|
model: AccountPriorityModel;
|
|
busy: boolean;
|
|
onModeChange?: (provider: string, mode: AccountSelectionMode) => void;
|
|
onMove?: (provider: string, accountId: string, targetId: string) => void;
|
|
}): ReactElement {
|
|
const locale = typeof document !== "undefined" && document.documentElement.lang === "de" ? "de-DE" : "en-US";
|
|
return <details className="settings-account-priority" onDragStart={(event) => event.stopPropagation()} onDragOver={(event) => event.stopPropagation()} onDrop={(event) => event.stopPropagation()}>
|
|
<summary>Account-Reihenfolge</summary>
|
|
<fieldset disabled={busy} className="settings-account-priority-mode">
|
|
<legend>Account-Auswahl</legend>
|
|
{(["automatic", "priority"] as const).map((mode) => <label key={mode}>
|
|
<input type="radio" name={`account-selection-${provider}`} checked={model.mode === mode} disabled={!onModeChange} onChange={() => onModeChange?.(provider, mode)} />
|
|
{mode === "automatic" ? "Automatisch verteilen" : "Feste Reihenfolge"}
|
|
</label>)}
|
|
</fieldset>
|
|
<p>{model.mode === "priority" ? "Der erste nutzbare Account hat Vorrang. Gesperrte Accounts werden übersprungen; laufende Downloads bleiben unverändert." : "Die bisherige automatische Account-Verteilung bleibt aktiv. Die Reihenfolge gilt erst im Modus Feste Reihenfolge."}</p>
|
|
<ol aria-label="Account-Prioritäten">
|
|
{model.accounts.map((account, index) => <li key={account.id} data-priority-account={account.id} draggable={!busy && Boolean(onMove)}
|
|
onDragStart={(event) => { event.stopPropagation(); event.dataTransfer.effectAllowed = "move"; event.dataTransfer.setData("application/x-mdd-account-priority", JSON.stringify({ provider, id: account.id })); }}
|
|
onDragOver={(event) => { event.stopPropagation(); if (!busy && event.dataTransfer.types.includes("application/x-mdd-account-priority")) event.preventDefault(); }}
|
|
onDrop={(event) => {
|
|
event.stopPropagation();
|
|
if (busy) return;
|
|
event.preventDefault();
|
|
try {
|
|
const source = JSON.parse(event.dataTransfer.getData("application/x-mdd-account-priority"));
|
|
if (source.provider === provider && model.accounts.some((candidate) => candidate.id === source.id)) onMove?.(provider, source.id, account.id);
|
|
} catch {}
|
|
}}>
|
|
<span className="settings-account-priority-identity"><span aria-hidden="true">{(index + 1).toLocaleString(locale)}.</span> <span>{account.label}</span><small>{account.mode} · {account.status}</small></span>
|
|
<span className="settings-provider-order-actions">
|
|
<button type="button" disabled={busy || !onMove || index === 0} aria-label={`${account.label} nach oben`} onClick={() => onMove?.(provider, account.id, model.accounts[index - 1].id)}>↑</button>
|
|
<button type="button" disabled={busy || !onMove || index === model.accounts.length - 1} aria-label={`${account.label} nach unten`} onClick={() => onMove?.(provider, account.id, model.accounts[index + 1].id)}>↓</button>
|
|
</span>
|
|
</li>)}
|
|
</ol>
|
|
{model.accounts.length === 0 ? <p>Keine Accounts vorhanden.</p> : null}
|
|
</details>;
|
|
}
|