920 lines
31 KiB
Svelte
920 lines
31 KiB
Svelte
<script lang="ts">
|
|
import { enhance, type SubmitFunction } from '$app/forms';
|
|
import { replaceState } from '$app/navigation';
|
|
import { resolve } from '$app/paths';
|
|
import { page } from '$app/state';
|
|
import { flip } from 'svelte/animate';
|
|
import { onMount, untrack } from 'svelte';
|
|
import PieceUsageHistory from '#lib/components/PieceUsageHistory.svelte';
|
|
import UsageEditorDialog from '#lib/components/UsageEditorDialog.svelte';
|
|
import { formatClock, formatDuration } from '#lib/format.js';
|
|
import type { PageProps } from './$types';
|
|
|
|
let { data, form }: PageProps = $props();
|
|
let mobilePane = $state<'fundus' | 'plan'>('plan');
|
|
let dragged = $state<{ kind: 'piece' | 'section' | 'usage'; id: string } | null>(null);
|
|
let dropPreview = $state<
|
|
| { kind: 'section'; position: number }
|
|
| { kind: 'usage'; sectionId: string | null; position: number }
|
|
| null
|
|
>(null);
|
|
let dropTarget = $state<string | null>(null);
|
|
let moveSectionForm: HTMLFormElement;
|
|
let moveUsageForm: HTMLFormElement;
|
|
let addUsageForm: HTMLFormElement;
|
|
let removeUsageForm: HTMLFormElement;
|
|
let draggedSectionId = $state('');
|
|
let draggedUsageId = $state('');
|
|
let draggedPieceId = $state('');
|
|
let removedUsageId = $state('');
|
|
let dropSectionId = $state('');
|
|
let dropPosition = $state(0);
|
|
let copyMessage = $state('');
|
|
let showUsedPieces = $state(untrack(() => data.filters.includeUsed));
|
|
let showPlannedPieces = $state(untrack(() => data.filters.includePlanned));
|
|
let visiblePieces = $derived(
|
|
data.pieces.filter(
|
|
(piece) =>
|
|
(showUsedPieces || piece.sentHistory.length === 0 || piece.isFavorite) &&
|
|
(showPlannedPieces || !piece.isPlannedInCurrentShow)
|
|
)
|
|
);
|
|
let plannedCount = $derived(
|
|
data.show.sections.reduce((total, section) => total + section.usages.length, 0)
|
|
);
|
|
onMount(() => {
|
|
const syncFiltersFromHistory = () => {
|
|
const search = new URL(window.location.href).searchParams;
|
|
showUsedPieces = search.get('includeUsed') === '1';
|
|
showPlannedPieces = search.get('includePlanned') === '1';
|
|
};
|
|
window.addEventListener('popstate', syncFiltersFromHistory);
|
|
return () => window.removeEventListener('popstate', syncFiltersFromHistory);
|
|
});
|
|
|
|
function berlinDate(value: string | null) {
|
|
if (!value) return 'Termin offen';
|
|
return new Intl.DateTimeFormat('de-DE', {
|
|
timeZone: 'Europe/Berlin',
|
|
dateStyle: 'full',
|
|
timeStyle: 'short'
|
|
}).format(new Date(value));
|
|
}
|
|
|
|
function setSourceFilter(name: 'includeUsed' | 'includePlanned', checked: boolean) {
|
|
if (name === 'includeUsed') showUsedPieces = checked;
|
|
else showPlannedPieces = checked;
|
|
const url = new URL(page.url.href);
|
|
if (checked) url.searchParams.set(name, '1');
|
|
else url.searchParams.delete(name);
|
|
// This URL is cloned from the current page; only same-route filter parameters change.
|
|
// eslint-disable-next-line svelte/no-navigation-without-resolve
|
|
replaceState(url, page.state);
|
|
}
|
|
|
|
function startDrag(kind: 'piece' | 'section' | 'usage', id: string, event: DragEvent) {
|
|
dragged = { kind, id };
|
|
event.dataTransfer?.setData('text/plain', id);
|
|
if (event.dataTransfer) event.dataTransfer.effectAllowed = kind === 'piece' ? 'copy' : 'move';
|
|
}
|
|
|
|
function finishDrag() {
|
|
dragged = null;
|
|
dropPreview = null;
|
|
dropTarget = null;
|
|
}
|
|
|
|
function draggedTitle() {
|
|
if (!dragged) return '';
|
|
const draggedId = dragged.id;
|
|
if (dragged.kind === 'piece') {
|
|
return data.pieces.find((piece) => piece.id === draggedId)?.title ?? 'Piece';
|
|
}
|
|
if (dragged.kind === 'section') {
|
|
return data.show.sections.find((section) => section.id === draggedId)?.name ?? 'Abschnitt';
|
|
}
|
|
for (const section of data.show.sections) {
|
|
const usage = section.usages.find((item) => item.id === draggedId);
|
|
if (usage) return usage.title;
|
|
}
|
|
return data.show.reserve.find((usage) => usage.id === draggedId)?.title ?? 'Piece';
|
|
}
|
|
|
|
function positionAtPointer(event: DragEvent, position: number) {
|
|
const target = event.currentTarget as HTMLElement;
|
|
const bounds = target.getBoundingClientRect();
|
|
return event.clientY < bounds.top + bounds.height / 2 ? position : position + 1;
|
|
}
|
|
|
|
function previewSection(event: DragEvent, position: number) {
|
|
event.preventDefault();
|
|
if (dragged?.kind !== 'section') return;
|
|
dropPreview = { kind: 'section', position: positionAtPointer(event, position) };
|
|
dropTarget = null;
|
|
}
|
|
|
|
function previewUsage(
|
|
event: DragEvent,
|
|
sectionId: string | null,
|
|
position: number,
|
|
atPointer = true
|
|
) {
|
|
event.preventDefault();
|
|
if (!dragged || dragged.kind === 'section') return;
|
|
event.stopPropagation();
|
|
dropPreview = {
|
|
kind: 'usage',
|
|
sectionId,
|
|
position: atPointer ? positionAtPointer(event, position) : position
|
|
};
|
|
dropTarget = sectionId ?? 'reserve';
|
|
}
|
|
|
|
function dropAtPreview() {
|
|
if (!dropPreview) return;
|
|
if (dropPreview.kind === 'section') dropSection(dropPreview.position);
|
|
else dropUsage(dropPreview.sectionId, dropPreview.position);
|
|
}
|
|
|
|
function showsUsagePreview(sectionId: string | null, position?: number) {
|
|
return (
|
|
dropPreview?.kind === 'usage' &&
|
|
dropPreview.sectionId === sectionId &&
|
|
(position === undefined || dropPreview.position === position)
|
|
);
|
|
}
|
|
|
|
function dropSection(position: number) {
|
|
if (!dragged || dragged.kind !== 'section') return;
|
|
draggedSectionId = dragged.id;
|
|
dropPosition = position;
|
|
finishDrag();
|
|
setTimeout(() => moveSectionForm.requestSubmit());
|
|
}
|
|
|
|
function dropUsage(sectionId: string | null, position: number) {
|
|
if (!dragged || dragged.kind === 'section') return;
|
|
dropSectionId = sectionId ?? '';
|
|
dropPosition = position;
|
|
if (dragged.kind === 'piece') {
|
|
draggedPieceId = dragged.id;
|
|
finishDrag();
|
|
setTimeout(() => addUsageForm.requestSubmit());
|
|
return;
|
|
}
|
|
draggedUsageId = dragged.id;
|
|
finishDrag();
|
|
setTimeout(() => moveUsageForm.requestSubmit());
|
|
}
|
|
|
|
function removeDraggedUsage() {
|
|
if (dragged?.kind !== 'usage') return;
|
|
if (!confirm('Piece aus dieser Sendung entfernen?')) {
|
|
finishDrag();
|
|
return;
|
|
}
|
|
removedUsageId = dragged.id;
|
|
finishDrag();
|
|
setTimeout(() => removeUsageForm.requestSubmit());
|
|
}
|
|
|
|
const enhanceCommand: SubmitFunction = ({ formElement, submitter }) => {
|
|
const affected = formElement.closest<HTMLElement>(
|
|
'.run-section, .editable-reserve, .builder-source-card, .show-settings, .add-section-form'
|
|
);
|
|
affected?.classList.add('is-updating');
|
|
if (submitter instanceof HTMLButtonElement) submitter.disabled = true;
|
|
return async ({ result, update }) => {
|
|
if (result.type === 'success') formElement.closest<HTMLDialogElement>('dialog')?.close();
|
|
await update({ reset: result.type === 'success', invalidateAll: true });
|
|
affected?.classList.remove('is-updating');
|
|
if (submitter instanceof HTMLButtonElement) submitter.disabled = false;
|
|
};
|
|
};
|
|
|
|
async function copyText(label: string, value: string) {
|
|
try {
|
|
await navigator.clipboard.writeText(value);
|
|
copyMessage = `${label} kopiert.`;
|
|
} catch {
|
|
copyMessage = 'Kopieren wurde vom Browser blockiert.';
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<svelte:head><title>{data.show.title} | Sendungen | Sendewerk</title></svelte:head>
|
|
|
|
<div class="page-wrap builder-page">
|
|
<header class="page-heading show-heading">
|
|
<div class="show-heading-copy">
|
|
<a class="back-link" href={resolve('/sendungen')}>← Sendungen</a>
|
|
<h1>{data.show.title}</h1>
|
|
<p class="show-date">
|
|
{data.show.startsAtUtc ? `${berlinDate(data.show.startsAtUtc)} Uhr` : 'Termin offen'}
|
|
</p>
|
|
</div>
|
|
<div class="show-summary">
|
|
<div><strong>{plannedCount}</strong><span>Pieces</span></div>
|
|
<div>
|
|
<strong>{formatDuration(data.show.totalDurationSeconds)}</strong><span>Planzeit</span>
|
|
</div>
|
|
<a class="live-link" href={resolve(`/live?show=${encodeURIComponent(data.show.id)}`)}
|
|
>Live-Steuerung <span>↗</span></a
|
|
>
|
|
</div>
|
|
</header>
|
|
|
|
{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
|
|
{#if form?.success}<div class="form-message success" role="status">{form.success}</div>{/if}
|
|
<div class="sr-only" role="status" aria-live="polite">{copyMessage}</div>
|
|
|
|
<details class="show-settings">
|
|
<summary>Sendungsdaten und Twitch-Texte</summary>
|
|
<form
|
|
use:enhance={enhanceCommand}
|
|
method="POST"
|
|
action="?/saveMetadata"
|
|
class="show-settings-form"
|
|
>
|
|
<input type="hidden" name="revision" value={data.show.revision} />
|
|
<label class="wide-field"
|
|
>Interner Titel<input
|
|
name="title"
|
|
required
|
|
maxlength="200"
|
|
value={data.show.title}
|
|
/></label
|
|
>
|
|
<label
|
|
>Termin<input name="startsAt" type="datetime-local" value={data.startsAtLocal} /><small
|
|
>Die Anzeige erfolgt immer in Europe/Berlin.</small
|
|
></label
|
|
>
|
|
<label
|
|
>Status<select name="status" value={data.show.status}
|
|
><option value="draft">Entwurf</option><option value="ready">Bereit</option><option
|
|
value="live">Live</option
|
|
></select
|
|
></label
|
|
>
|
|
<label class="wide-field"
|
|
>Twitch-Titel<span class="copy-field"
|
|
><input name="twitchTitle" maxlength="200" value={data.show.twitchTitle} /><button
|
|
type="button"
|
|
onclick={() => copyText('Twitch-Titel', data.show.twitchTitle)}>Kopieren</button
|
|
></span
|
|
></label
|
|
>
|
|
<label class="wide-field"
|
|
>Ankündigung<span class="copy-field"
|
|
><textarea name="announcementText" maxlength="20000" rows="4"
|
|
>{data.show.announcementText}</textarea
|
|
><button type="button" onclick={() => copyText('Ankündigung', data.show.announcementText)}
|
|
>Kopieren</button
|
|
></span
|
|
></label
|
|
>
|
|
<div class="wide-field settings-submit">
|
|
<span>{copyMessage}</span><button class="primary-button" type="submit"
|
|
>Sendungsdaten speichern</button
|
|
>
|
|
</div>
|
|
</form>
|
|
</details>
|
|
|
|
<div class="mobile-pane-switch" aria-label="Arbeitsbereich auswählen">
|
|
<button
|
|
class:active={mobilePane === 'fundus'}
|
|
aria-pressed={mobilePane === 'fundus'}
|
|
type="button"
|
|
onclick={() => (mobilePane = 'fundus')}>Fundus</button
|
|
>
|
|
<button
|
|
class:active={mobilePane === 'plan'}
|
|
aria-pressed={mobilePane === 'plan'}
|
|
type="button"
|
|
onclick={() => (mobilePane = 'plan')}>Ablauf</button
|
|
>
|
|
</div>
|
|
|
|
<div class="builder-workspace">
|
|
<section
|
|
class="builder-pane source-pane"
|
|
class:drop-ready={dropTarget === 'source'}
|
|
class:mobile-hidden={mobilePane !== 'fundus'}
|
|
aria-labelledby="source-title"
|
|
ondragover={(event) => {
|
|
if (dragged?.kind !== 'usage') return;
|
|
event.preventDefault();
|
|
dropTarget = 'source';
|
|
}}
|
|
ondrop={(event) => {
|
|
event.preventDefault();
|
|
removeDraggedUsage();
|
|
}}
|
|
>
|
|
<header class="pane-heading">
|
|
<div>
|
|
<p class="eyebrow">Quelle</p>
|
|
<h2 id="source-title">Sendefertiger Fundus</h2>
|
|
</div>
|
|
<span>{visiblePieces.length}</span>
|
|
</header>
|
|
{#if dropTarget === 'source'}<div class="drag-remove-target">
|
|
<strong>Aus Sendung entfernen</strong><span>Das Fundus-Original bleibt erhalten.</span>
|
|
</div>{/if}
|
|
<details class="plan-piece-create">
|
|
<summary>Neues Piece direkt einplanen</summary>
|
|
<form use:enhance={enhanceCommand} method="POST" action="?/createUsage">
|
|
<input type="hidden" name="revision" value={data.show.revision} />
|
|
<input type="hidden" name="commandId" value={data.createCommandId} />
|
|
<label>Titel<input name="title" required maxlength="200" /></label>
|
|
<label
|
|
>Vorlage<select name="templateId">
|
|
{#each data.pieceTemplates as template (template.id)}<option value={template.id}
|
|
>{template.name}</option
|
|
>{/each}
|
|
</select></label
|
|
>
|
|
<label
|
|
>Ziel<select name="sectionId">
|
|
<option value="">Reservebank</option>
|
|
{#each data.show.sections as section (section.id)}<option value={section.id}
|
|
>{section.name}</option
|
|
>{/each}
|
|
</select></label
|
|
>
|
|
<button class="secondary-button" type="submit">Anlegen und einplanen</button>
|
|
</form>
|
|
</details>
|
|
<form id="builder-filters" method="GET" class="builder-filter">
|
|
<label
|
|
><span class="sr-only">Fundus durchsuchen</span><input
|
|
type="search"
|
|
name="q"
|
|
value={data.filters.query}
|
|
placeholder="Fundus durchsuchen"
|
|
/></label
|
|
>
|
|
<label
|
|
><span class="sr-only">Abschnitt filtern</span><select name="category"
|
|
><option value="">Alle Abschnitte</option
|
|
>{#each data.taxonomy.categories as category (category.id)}<option
|
|
value={category.id}
|
|
selected={data.filters.categoryId === category.id}>{category.name}</option
|
|
>{/each}</select
|
|
></label
|
|
>
|
|
<button class="text-button" type="submit">Filtern</button>
|
|
</form>
|
|
<div class="builder-filter-options" aria-label="Fundusauswahl erweitern">
|
|
<label class="filter-checkbox">
|
|
<input
|
|
type="checkbox"
|
|
name="includeUsed"
|
|
value="1"
|
|
form="builder-filters"
|
|
checked={showUsedPieces}
|
|
onchange={(event) => setSourceFilter('includeUsed', event.currentTarget.checked)}
|
|
/>
|
|
<span>Auch verwendete Inhalte zeigen</span>
|
|
</label>
|
|
<label class="filter-checkbox">
|
|
<input
|
|
type="checkbox"
|
|
name="includePlanned"
|
|
value="1"
|
|
form="builder-filters"
|
|
checked={showPlannedPieces}
|
|
onchange={(event) => setSourceFilter('includePlanned', event.currentTarget.checked)}
|
|
/>
|
|
<span>Auch eingeplante Inhalte zeigen</span>
|
|
</label>
|
|
</div>
|
|
<div class="builder-source-list">
|
|
{#each visiblePieces as piece (piece.id)}
|
|
<article
|
|
class="builder-source-card"
|
|
class:is-dragging={dragged?.kind === 'piece' && dragged.id === piece.id}
|
|
style={`--category:${piece.categories[0]?.color ?? '#8b8f98'}`}
|
|
>
|
|
<div
|
|
class="source-drag-copy"
|
|
role="group"
|
|
aria-label={`${piece.title} in den Ablauf ziehen`}
|
|
draggable="true"
|
|
ondragstart={(event) => startDrag('piece', piece.id, event)}
|
|
ondragend={finishDrag}
|
|
>
|
|
<div>
|
|
<span class="category-label"
|
|
><i></i>{piece.categories.map((item) => item.name).join(', ') || 'Offen'}</span
|
|
><span>{formatClock(piece.durationSeconds)}</span>
|
|
</div>
|
|
<h3>
|
|
{#if piece.isFavorite}<span class="favorite-mark" aria-label="Favorit">★</span
|
|
>{/if}{piece.title}
|
|
</h3>
|
|
<p>
|
|
{piece.format} · {piece.topics.map((item) => item.name).join(', ') || 'Ohne Thema'}
|
|
</p>
|
|
{#if piece.isPlannedInCurrentShow}<span class="planned-label">Eingeplant</span>{/if}
|
|
<PieceUsageHistory history={piece.sentHistory} />
|
|
<small class="drag-hint">Ziehen oder Ziel auswählen</small>
|
|
</div>
|
|
<form
|
|
use:enhance={enhanceCommand}
|
|
method="POST"
|
|
action="?/addUsage"
|
|
class="source-add-form"
|
|
>
|
|
<input type="hidden" name="revision" value={data.show.revision} /><input
|
|
type="hidden"
|
|
name="pieceId"
|
|
value={piece.id}
|
|
/>
|
|
<label
|
|
><span class="sr-only">Ziel für {piece.title}</span><select
|
|
name="sectionId"
|
|
aria-label={`Ziel für ${piece.title}`}
|
|
><option value="">Reservebank</option
|
|
>{#each data.show.sections as section (section.id)}<option value={section.id}
|
|
>{section.name}</option
|
|
>{/each}</select
|
|
></label
|
|
>
|
|
<button class="secondary-button" type="submit">Hinzufügen</button>
|
|
</form>
|
|
</article>
|
|
{/each}
|
|
</div>
|
|
{#if !visiblePieces.length}<div class="empty-state">
|
|
<span aria-hidden="true">⌕</span>
|
|
<h2>Keine verfügbaren Pieces</h2>
|
|
<p>
|
|
Suchfilter ändern, ausgeblendete Inhalte einblenden oder Pieces im Fundus sendefertig
|
|
markieren.
|
|
</p>
|
|
</div>{/if}
|
|
</section>
|
|
|
|
<section
|
|
class="builder-pane run-pane"
|
|
class:mobile-hidden={mobilePane !== 'plan'}
|
|
aria-labelledby="run-title"
|
|
>
|
|
<header class="pane-heading">
|
|
<div>
|
|
<p class="eyebrow">Sendungsplan</p>
|
|
<h2 id="run-title">Ablauf</h2>
|
|
</div>
|
|
<span>{formatDuration(data.show.totalDurationSeconds)}</span>
|
|
</header>
|
|
<div class="run-list">
|
|
{#each data.show.sections as section, index (section.id)}
|
|
<div
|
|
class="section-drag-slot"
|
|
role="presentation"
|
|
ondragover={(event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}}
|
|
ondrop={(event) => {
|
|
event.stopPropagation();
|
|
dropAtPreview();
|
|
}}
|
|
animate:flip={{ duration: 180 }}
|
|
>
|
|
{#if dropPreview?.kind === 'section' && dropPreview.position === index}
|
|
<div class="drag-insert-preview section-insert-preview" data-drop-preview="section">
|
|
<span>Hier einfügen</span><strong>{draggedTitle()}</strong>
|
|
</div>
|
|
{/if}
|
|
<article
|
|
class="run-section editable-run-section"
|
|
class:is-dragging={dragged?.kind === 'section' && dragged.id === section.id}
|
|
class:drop-ready={dropTarget === section.id}
|
|
style={`--category:${section.categoryColor ?? '#8b8f98'}`}
|
|
ondragover={(event) => {
|
|
if (dragged?.kind === 'section') previewSection(event, index);
|
|
else previewUsage(event, section.id, section.usages.length, false);
|
|
}}
|
|
ondrop={dropAtPreview}
|
|
>
|
|
<header
|
|
class="section-drag-handle"
|
|
role="group"
|
|
aria-label={`${section.name} verschieben`}
|
|
draggable="true"
|
|
ondragstart={(event) => startDrag('section', section.id, event)}
|
|
ondragend={finishDrag}
|
|
>
|
|
<div class="section-number">{String(index + 1).padStart(2, '0')}</div>
|
|
<div>
|
|
<span class="category-label"><i></i>{section.category ?? 'Offen'}</span>
|
|
<h3>{section.name}</h3>
|
|
</div>
|
|
<strong>{formatClock(section.durationSeconds)}</strong>
|
|
</header>
|
|
<div class="row-actions" aria-label={`Abschnitt ${section.name} verschieben`}>
|
|
<form use:enhance={enhanceCommand} method="POST" action="?/moveSection">
|
|
<input type="hidden" name="revision" value={data.show.revision} /><input
|
|
type="hidden"
|
|
name="sectionId"
|
|
value={section.id}
|
|
/><input type="hidden" name="position" value={index - 1} /><button
|
|
type="submit"
|
|
disabled={index === 0}
|
|
aria-label={`${section.name} nach oben`}>↑</button
|
|
>
|
|
</form>
|
|
<form use:enhance={enhanceCommand} method="POST" action="?/moveSection">
|
|
<input type="hidden" name="revision" value={data.show.revision} /><input
|
|
type="hidden"
|
|
name="sectionId"
|
|
value={section.id}
|
|
/><input type="hidden" name="position" value={index + 1} /><button
|
|
type="submit"
|
|
disabled={index === data.show.sections.length - 1}
|
|
aria-label={`${section.name} nach unten`}>↓</button
|
|
>
|
|
</form>
|
|
</div>
|
|
{#if section.usages.length}<div class="usage-list">
|
|
{#each section.usages as usage, usageIndex (usage.id)}
|
|
<div
|
|
class="usage-drag-slot"
|
|
role="presentation"
|
|
ondragover={(event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}}
|
|
ondrop={(event) => {
|
|
event.stopPropagation();
|
|
dropAtPreview();
|
|
}}
|
|
animate:flip={{ duration: 180 }}
|
|
>
|
|
{#if showsUsagePreview(section.id, usageIndex)}
|
|
<div
|
|
class="drag-insert-preview usage-insert-preview"
|
|
data-drop-preview="usage"
|
|
>
|
|
<strong>{draggedTitle()}</strong><small>Hier einfügen</small>
|
|
</div>
|
|
{/if}
|
|
<div
|
|
class="usage-row editable-usage"
|
|
class:is-dragging={dragged?.kind === 'usage' && dragged.id === usage.id}
|
|
role="group"
|
|
aria-label={`Verwendung ${usage.title}`}
|
|
ondragover={(event) => previewUsage(event, section.id, usageIndex)}
|
|
ondrop={(event) => {
|
|
event.stopPropagation();
|
|
dropAtPreview();
|
|
}}
|
|
>
|
|
<div
|
|
class="usage-drag-copy"
|
|
role="group"
|
|
aria-label={`${usage.title} verschieben`}
|
|
draggable="true"
|
|
ondragstart={(event) => {
|
|
event.stopPropagation();
|
|
startDrag('usage', usage.id, event);
|
|
}}
|
|
ondragend={finishDrag}
|
|
>
|
|
<strong>{usage.title}</strong><small
|
|
>{formatClock(usage.durationSeconds)}</small
|
|
>
|
|
</div>
|
|
<div class="row-actions">
|
|
<form use:enhance={enhanceCommand} method="POST" action="?/moveUsage">
|
|
<input type="hidden" name="revision" value={data.show.revision} /><input
|
|
type="hidden"
|
|
name="usageId"
|
|
value={usage.id}
|
|
/><input type="hidden" name="sectionId" value={section.id} /><input
|
|
type="hidden"
|
|
name="position"
|
|
value={usageIndex - 1}
|
|
/><button
|
|
type="submit"
|
|
disabled={usageIndex === 0}
|
|
aria-label={`${usage.title} nach oben`}>↑</button
|
|
>
|
|
</form>
|
|
<form use:enhance={enhanceCommand} method="POST" action="?/moveUsage">
|
|
<input type="hidden" name="revision" value={data.show.revision} /><input
|
|
type="hidden"
|
|
name="usageId"
|
|
value={usage.id}
|
|
/><input type="hidden" name="sectionId" value={section.id} /><input
|
|
type="hidden"
|
|
name="position"
|
|
value={usageIndex + 1}
|
|
/><button
|
|
type="submit"
|
|
disabled={usageIndex === section.usages.length - 1}
|
|
aria-label={`${usage.title} nach unten`}>↓</button
|
|
>
|
|
</form>
|
|
<UsageEditorDialog
|
|
{usage}
|
|
revision={data.show.revision}
|
|
sectionId={section.id}
|
|
sections={data.show.sections}
|
|
error={form?.error}
|
|
{enhanceCommand}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
{#if showsUsagePreview(section.id, section.usages.length)}
|
|
<div class="drag-insert-preview usage-insert-preview" data-drop-preview="usage">
|
|
<strong>{draggedTitle()}</strong><small>Hier einfügen</small>
|
|
</div>
|
|
{/if}
|
|
</div>{:else}
|
|
{#if showsUsagePreview(section.id, 0)}
|
|
<div class="usage-list">
|
|
<div class="drag-insert-preview usage-insert-preview" data-drop-preview="usage">
|
|
<strong>{draggedTitle()}</strong><small>Hier einfügen</small>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
<div
|
|
class="section-placeholder"
|
|
role="group"
|
|
aria-label={`Leerer Abschnitt ${section.name}`}
|
|
ondragover={(event) => previewUsage(event, section.id, 0, false)}
|
|
ondrop={(event) => {
|
|
event.stopPropagation();
|
|
dropAtPreview();
|
|
}}
|
|
>
|
|
Leerer Abschnitt · Piece aus dem Fundus hinzufügen oder hierher ziehen
|
|
</div>
|
|
{/if}
|
|
<details class="section-editor">
|
|
<summary>Abschnitt bearbeiten</summary>
|
|
<form
|
|
use:enhance={enhanceCommand}
|
|
method="POST"
|
|
action="?/updateSection"
|
|
class="section-edit-form"
|
|
>
|
|
<input type="hidden" name="revision" value={data.show.revision} /><input
|
|
type="hidden"
|
|
name="sectionId"
|
|
value={section.id}
|
|
/><label
|
|
>Name<input name="name" required maxlength="200" value={section.name} /></label
|
|
><label
|
|
>Kategorie<select name="categoryId"
|
|
><option value="">Ohne Kategorie</option
|
|
>{#each data.taxonomy.categories as category (category.id)}<option
|
|
value={category.id}
|
|
selected={section.categoryId === category.id}>{category.name}</option
|
|
>{/each}</select
|
|
></label
|
|
><label
|
|
>Explizite Dauer in Sekunden<input
|
|
name="explicitDurationSeconds"
|
|
type="number"
|
|
min="0"
|
|
max="86400"
|
|
value={section.explicitDurationSeconds ?? ''}
|
|
placeholder="Summe der Pieces"
|
|
/></label
|
|
><button class="secondary-button" type="submit">Abschnitt speichern</button>
|
|
</form>
|
|
<form
|
|
use:enhance={enhanceCommand}
|
|
method="POST"
|
|
action="?/removeSection"
|
|
onsubmit={(event) =>
|
|
!confirm('Abschnitt samt Einplanungen entfernen?') && event.preventDefault()}
|
|
>
|
|
<input type="hidden" name="revision" value={data.show.revision} /><input
|
|
type="hidden"
|
|
name="sectionId"
|
|
value={section.id}
|
|
/><button class="text-button danger-text" type="submit"
|
|
>Abschnitt entfernen</button
|
|
>
|
|
</form>
|
|
</details>
|
|
</article>
|
|
</div>
|
|
{/each}
|
|
{#if dropPreview?.kind === 'section' && dropPreview.position === data.show.sections.length}
|
|
<div
|
|
class="drag-insert-preview section-insert-preview"
|
|
data-drop-preview="section"
|
|
role="group"
|
|
aria-label={`${draggedTitle()} hier einfügen`}
|
|
ondragover={(event) => event.preventDefault()}
|
|
ondrop={dropAtPreview}
|
|
>
|
|
<span>Hier einfügen</span><strong>{draggedTitle()}</strong>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
<form
|
|
use:enhance={enhanceCommand}
|
|
method="POST"
|
|
action="?/addSection"
|
|
class="add-section-form"
|
|
>
|
|
<input type="hidden" name="revision" value={data.show.revision} /><label
|
|
>Name<input name="name" required maxlength="200" placeholder="Neuer Abschnitt" /></label
|
|
><label
|
|
>Kategorie<select name="categoryId"
|
|
><option value="">Ohne Kategorie</option
|
|
>{#each data.taxonomy.categories as category (category.id)}<option value={category.id}
|
|
>{category.name}</option
|
|
>{/each}</select
|
|
></label
|
|
><label
|
|
>Explizite Dauer <input
|
|
name="explicitDurationSeconds"
|
|
type="number"
|
|
min="0"
|
|
max="86400"
|
|
placeholder="optional, Sekunden"
|
|
/></label
|
|
><button class="primary-button" type="submit">Abschnitt hinzufügen</button>
|
|
</form>
|
|
|
|
<section
|
|
class="reserve-box editable-reserve"
|
|
class:drop-ready={dropTarget === 'reserve'}
|
|
aria-label="Reservebank"
|
|
ondragover={(event) => previewUsage(event, null, data.show.reserve.length, false)}
|
|
ondrop={dropAtPreview}
|
|
>
|
|
<header>
|
|
<div>
|
|
<span aria-hidden="true">◇</span>
|
|
<div>
|
|
<strong>Reservebank</strong><small
|
|
>{data.show.reserve.length}
|
|
{data.show.reserve.length === 1 ? 'Piece' : 'Pieces'} · zählt nicht zur Planzeit</small
|
|
>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
{#each data.show.reserve as usage, usageIndex (usage.id)}
|
|
<div
|
|
class="reserve-drag-slot"
|
|
role="presentation"
|
|
ondragover={(event) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}}
|
|
ondrop={(event) => {
|
|
event.stopPropagation();
|
|
dropAtPreview();
|
|
}}
|
|
animate:flip={{ duration: 180 }}
|
|
>
|
|
{#if showsUsagePreview(null, usageIndex)}
|
|
<div class="drag-insert-preview reserve-insert-preview" data-drop-preview="usage">
|
|
<strong>{draggedTitle()}</strong><small>Hier in die Reserve einfügen</small>
|
|
</div>
|
|
{/if}
|
|
<div
|
|
class="reserve-usage"
|
|
class:is-dragging={dragged?.kind === 'usage' && dragged.id === usage.id}
|
|
role="group"
|
|
aria-label={`Reserve ${usage.title}`}
|
|
ondragover={(event) => previewUsage(event, null, usageIndex)}
|
|
ondrop={(event) => {
|
|
event.stopPropagation();
|
|
dropAtPreview();
|
|
}}
|
|
>
|
|
<div
|
|
class="usage-drag-copy"
|
|
role="group"
|
|
aria-label={`${usage.title} verschieben`}
|
|
draggable="true"
|
|
ondragstart={(event) => startDrag('usage', usage.id, event)}
|
|
ondragend={finishDrag}
|
|
>
|
|
<strong>{usage.title}</strong><small>{formatClock(usage.durationSeconds)}</small>
|
|
</div>
|
|
<form use:enhance={enhanceCommand} method="POST" action="?/moveUsage">
|
|
<input type="hidden" name="revision" value={data.show.revision} /><input
|
|
type="hidden"
|
|
name="usageId"
|
|
value={usage.id}
|
|
/><input type="hidden" name="position" value="9999" /><label
|
|
><span class="sr-only">{usage.title} einplanen in</span><select
|
|
name="sectionId"
|
|
required
|
|
><option value="">Abschnitt wählen</option
|
|
>{#each data.show.sections as section (section.id)}<option value={section.id}
|
|
>{section.name}</option
|
|
>{/each}</select
|
|
></label
|
|
><button class="secondary-button" type="submit">Einplanen</button>
|
|
</form>
|
|
<form
|
|
use:enhance={enhanceCommand}
|
|
method="POST"
|
|
action="?/removeUsage"
|
|
onsubmit={(event) =>
|
|
!confirm('Piece aus dieser Sendung entfernen?') && event.preventDefault()}
|
|
>
|
|
<input type="hidden" name="revision" value={data.show.revision} /><input
|
|
type="hidden"
|
|
name="usageId"
|
|
value={usage.id}
|
|
/><button
|
|
class="text-button danger-text"
|
|
type="submit"
|
|
aria-label={`${usage.title} aus Sendung entfernen`}>Aus Sendung entfernen</button
|
|
>
|
|
</form>
|
|
<UsageEditorDialog
|
|
{usage}
|
|
revision={data.show.revision}
|
|
sectionId=""
|
|
sections={data.show.sections}
|
|
error={form?.error}
|
|
{enhanceCommand}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
{#if showsUsagePreview(null, data.show.reserve.length)}
|
|
<div class="drag-insert-preview reserve-insert-preview" data-drop-preview="usage">
|
|
<strong>{draggedTitle()}</strong><small>Hier in die Reserve einfügen</small>
|
|
</div>
|
|
{/if}
|
|
{#if !data.show.reserve.length}<p>
|
|
Pieces lassen sich hier parken, ohne die geplante Dauer zu erhöhen.
|
|
</p>{/if}
|
|
</section>
|
|
</section>
|
|
</div>
|
|
|
|
<form
|
|
bind:this={moveSectionForm}
|
|
use:enhance={enhanceCommand}
|
|
method="POST"
|
|
action="?/moveSection"
|
|
class="hidden-command-form"
|
|
>
|
|
<input type="hidden" name="revision" value={data.show.revision} /><input
|
|
type="hidden"
|
|
name="sectionId"
|
|
value={draggedSectionId}
|
|
/><input type="hidden" name="position" value={dropPosition} />
|
|
</form>
|
|
<form
|
|
bind:this={moveUsageForm}
|
|
use:enhance={enhanceCommand}
|
|
method="POST"
|
|
action="?/moveUsage"
|
|
class="hidden-command-form"
|
|
>
|
|
<input type="hidden" name="revision" value={data.show.revision} /><input
|
|
type="hidden"
|
|
name="usageId"
|
|
value={draggedUsageId}
|
|
/><input type="hidden" name="sectionId" value={dropSectionId} /><input
|
|
type="hidden"
|
|
name="position"
|
|
value={dropPosition}
|
|
/>
|
|
</form>
|
|
<form
|
|
bind:this={addUsageForm}
|
|
use:enhance={enhanceCommand}
|
|
method="POST"
|
|
action="?/addUsage"
|
|
class="hidden-command-form"
|
|
>
|
|
<input type="hidden" name="revision" value={data.show.revision} /><input
|
|
type="hidden"
|
|
name="pieceId"
|
|
value={draggedPieceId}
|
|
/><input type="hidden" name="sectionId" value={dropSectionId} />
|
|
</form>
|
|
<form
|
|
bind:this={removeUsageForm}
|
|
use:enhance={enhanceCommand}
|
|
method="POST"
|
|
action="?/removeUsage"
|
|
class="hidden-command-form"
|
|
>
|
|
<input type="hidden" name="revision" value={data.show.revision} />
|
|
<input type="hidden" name="usageId" value={removedUsageId} />
|
|
</form>
|
|
</div>
|