Release 0.4.0
This commit is contained in:
hnzio committed
1 parent
7590be66a5
commit
4042fe6a64
24 files changed
+3570
-290
No files matched your search
@@ -34,6 +34,10 @@ function text(data: FormData, name: string) {
|
||||
return String(data.get(name) || '');
|
||||
}
|
||||
|
||||
function durationInSeconds(data: FormData) {
|
||||
return Math.round(Number(data.get('durationMinutes')) * 60);
|
||||
}
|
||||
|
||||
function pieceInput(data: FormData): PieceInput {
|
||||
const labels = data.getAll('sourceLabel').map(String);
|
||||
const urls = data.getAll('sourceUrl').map(String);
|
||||
@@ -55,7 +59,7 @@ function pieceInput(data: FormData): PieceInput {
|
||||
summary: text(data, 'summary'),
|
||||
formatId: text(data, 'formatId') || null,
|
||||
status: text(data, 'status') as EditablePieceStatus,
|
||||
durationSeconds: Number(data.get('durationSeconds')),
|
||||
durationSeconds: durationInSeconds(data),
|
||||
intro: text(data, 'intro'),
|
||||
researchText: text(data, 'researchText'),
|
||||
moderationNotes: text(data, 'moderationNotes'),
|
||||
@@ -77,7 +81,7 @@ function saveError(cause: unknown) {
|
||||
};
|
||||
if (code === 'INVALID_TITLE') return { status: 400, error: 'Bitte einen Titel eingeben.' };
|
||||
if (code === 'INVALID_DURATION')
|
||||
return { status: 400, error: 'Die Dauer muss zwischen 0 und 86.400 Sekunden liegen.' };
|
||||
return { status: 400, error: 'Die Dauer muss zwischen 0 und 1.440 Minuten liegen.' };
|
||||
if (code === 'INVALID_SOURCES')
|
||||
return {
|
||||
status: 400,
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
|
||||
let { data, form }: PageProps = $props();
|
||||
let draft = $state(untrack(() => ({ ...data.piece })));
|
||||
let durationMinutes = $state(untrack(() => Number((data.piece.durationSeconds / 60).toFixed(2))));
|
||||
let revision = $state(untrack(() => data.piece.revision));
|
||||
let sources = $state(untrack(() => data.piece.sources.map((source) => ({ ...source }))));
|
||||
let rendered = $state(untrack(() => ({ ...data.rendered })));
|
||||
@@ -156,13 +157,13 @@
|
||||
></label
|
||||
>
|
||||
<label
|
||||
>Dauer in Sekunden<input
|
||||
name="durationSeconds"
|
||||
>Dauer in Minuten<input
|
||||
name="durationMinutes"
|
||||
type="number"
|
||||
min="0"
|
||||
max="86400"
|
||||
step="1"
|
||||
bind:value={draft.durationSeconds}
|
||||
max="1440"
|
||||
step="any"
|
||||
bind:value={durationMinutes}
|
||||
/></label
|
||||
>
|
||||
<label class="wide-field"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { getShow } from '#lib/server/previews.js';
|
||||
|
||||
export function load() {
|
||||
const show = getShow();
|
||||
export function load({ url }) {
|
||||
const show = getShow(url.searchParams.get('show') || undefined);
|
||||
const usages = show.sections.flatMap((section) =>
|
||||
section.usages
|
||||
.filter((usage) => !usage.isReserve)
|
||||
@@ -11,5 +11,5 @@ export function load() {
|
||||
0,
|
||||
usages.findIndex((usage) => usage.status === 'current')
|
||||
);
|
||||
return { show, current: usages[currentIndex], next: usages[currentIndex + 1] ?? null };
|
||||
return { show, current: usages[currentIndex] ?? null, next: usages[currentIndex + 1] ?? null };
|
||||
}
|
||||
@@ -29,37 +29,41 @@
|
||||
aria-label="Schrift vergrößern">A+</button
|
||||
>
|
||||
</div>
|
||||
<a href={resolve('/sendungen')}>Planung schließen</a>
|
||||
<a href={resolve('/sendungen/[id]', { id: data.show.id })}>Planung schließen</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<PreviewNotice area="Live-Modus" />
|
||||
|
||||
<div class="live-grid">
|
||||
<section class="live-current" style={`--prompt-size: ${promptSize}rem`}>
|
||||
<div class="live-kicker">
|
||||
<span>Aktuell · {data.current.section}</span><strong
|
||||
>{formatClock(data.current.durationSeconds)}</strong
|
||||
>
|
||||
</div>
|
||||
<h2>{data.current.title}</h2>
|
||||
<div class="prompter-copy">{data.current.intro}</div>
|
||||
<div class="moderation-card">
|
||||
<span>Moderationsstichpunkte</span>
|
||||
<p>{data.current.moderation}</p>
|
||||
</div>
|
||||
<details class="research-details">
|
||||
<summary>Recherche öffnen</summary>
|
||||
<p>
|
||||
Die Recherche bleibt im echten Live-Modus standardmäßig geschlossen und bewahrt beim
|
||||
Öffnen die Leseposition.
|
||||
</p>
|
||||
</details>
|
||||
<div class="transition-card">
|
||||
<span>Überleitung</span>
|
||||
<p>{data.current.transition}</p>
|
||||
</div>
|
||||
</section>
|
||||
{#if data.current}<section class="live-current" style={`--prompt-size: ${promptSize}rem`}>
|
||||
<div class="live-kicker">
|
||||
<span>Aktuell · {data.current.section}</span><strong
|
||||
>{formatClock(data.current.durationSeconds)}</strong
|
||||
>
|
||||
</div>
|
||||
<h2>{data.current.title}</h2>
|
||||
<div class="prompter-copy">{data.current.intro}</div>
|
||||
<div class="moderation-card">
|
||||
<span>Moderationsstichpunkte</span>
|
||||
<p>{data.current.moderation}</p>
|
||||
</div>
|
||||
<details class="research-details">
|
||||
<summary>Recherche öffnen</summary>
|
||||
<p>
|
||||
Die Recherche bleibt im echten Live-Modus standardmäßig geschlossen und bewahrt beim
|
||||
Öffnen die Leseposition.
|
||||
</p>
|
||||
</details>
|
||||
<div class="transition-card">
|
||||
<span>Überleitung</span>
|
||||
<p>{data.current.transition}</p>
|
||||
</div>
|
||||
</section>{:else}<section class="live-current live-empty">
|
||||
<p class="eyebrow">Noch kein Piece eingeplant</p>
|
||||
<h2>Diese Sendung hat noch keinen moderierbaren Inhalt.</h2>
|
||||
<p>In der Planung kann zuerst ein sendefertiges Piece hinzugefügt werden.</p>
|
||||
</section>{/if}
|
||||
|
||||
<aside class="live-rail">
|
||||
<div class="next-card">
|
||||
|
||||
@@ -1,5 +1,74 @@
|
||||
import { getPieces, getShow } from '#lib/server/previews.js';
|
||||
import { fail, redirect } from '@sveltejs/kit';
|
||||
import type { Actions, PageServerLoad } from './$types';
|
||||
import { requireUser } from '#lib/server/auth.js';
|
||||
import { createShow, listShows, listShowTemplates } from '#lib/server/shows.js';
|
||||
|
||||
export function load() {
|
||||
return { pieces: getPieces(), show: getShow() };
|
||||
function berlinLocalToUtc(value: string): string | null {
|
||||
if (!value) return null;
|
||||
const match = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/.exec(value);
|
||||
if (!match) throw new Error('INVALID_TIMESTAMP');
|
||||
const parts = match.slice(1).map(Number);
|
||||
const localMilliseconds = Date.UTC(parts[0], parts[1] - 1, parts[2], parts[3], parts[4]);
|
||||
let candidate = localMilliseconds;
|
||||
for (let attempt = 0; attempt < 2; attempt += 1) {
|
||||
const formatted = new Intl.DateTimeFormat('en-CA', {
|
||||
timeZone: 'Europe/Berlin',
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hourCycle: 'h23'
|
||||
}).formatToParts(new Date(candidate));
|
||||
const read = (type: Intl.DateTimeFormatPartTypes) =>
|
||||
Number(formatted.find((part) => part.type === type)?.value);
|
||||
const represented = Date.UTC(
|
||||
read('year'),
|
||||
read('month') - 1,
|
||||
read('day'),
|
||||
read('hour'),
|
||||
read('minute')
|
||||
);
|
||||
candidate += localMilliseconds - represented;
|
||||
}
|
||||
return new Date(candidate).toISOString();
|
||||
}
|
||||
|
||||
export const load: PageServerLoad = ({ locals }) => {
|
||||
requireUser(locals.user);
|
||||
return { shows: listShows(), templates: listShowTemplates() };
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
create: async ({ locals, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
const title = String(data.get('title') || '');
|
||||
const startsAt = String(data.get('startsAt') || '');
|
||||
const templateId = String(data.get('templateId') || '') || null;
|
||||
let id: string;
|
||||
try {
|
||||
id = createShow({ title, startsAtUtc: berlinLocalToUtc(startsAt), templateId }).id;
|
||||
} catch (cause) {
|
||||
const code = cause instanceof Error ? cause.message : '';
|
||||
if (code === 'INVALID_TITLE') {
|
||||
return fail(400, { error: 'Bitte einen Titel eingeben.', title, startsAt, templateId });
|
||||
}
|
||||
if (code === 'INVALID_TIMESTAMP') {
|
||||
return fail(400, {
|
||||
error: 'Bitte einen gültigen Termin eingeben.',
|
||||
title,
|
||||
startsAt,
|
||||
templateId
|
||||
});
|
||||
}
|
||||
return fail(400, {
|
||||
error: 'Die Sendung konnte nicht angelegt werden.',
|
||||
title,
|
||||
startsAt,
|
||||
templateId
|
||||
});
|
||||
}
|
||||
redirect(303, `/sendungen/${id}`);
|
||||
}
|
||||
} satisfies Actions;
|
||||
@@ -1,130 +1,104 @@
|
||||
<script lang="ts">
|
||||
import PreviewNotice from '#lib/components/PreviewNotice.svelte';
|
||||
import { formatClock, formatDuration } from '#lib/format.js';
|
||||
import { resolve } from '$app/paths';
|
||||
import type { PageData } from './$types';
|
||||
import { formatDuration } from '#lib/format.js';
|
||||
import type { PageProps } from './$types';
|
||||
|
||||
let { data }: { data: PageData } = $props();
|
||||
let mobilePane = $state<'fundus' | 'plan'>('plan');
|
||||
let plannedCount = $derived(
|
||||
data.show.sections.reduce(
|
||||
(total, section) => total + section.usages.filter((usage) => !usage.isReserve).length,
|
||||
0
|
||||
)
|
||||
);
|
||||
let { data, form }: PageProps = $props();
|
||||
|
||||
function berlinDate(value: string | null) {
|
||||
if (!value) return 'Termin offen';
|
||||
return new Intl.DateTimeFormat('de-DE', {
|
||||
timeZone: 'Europe/Berlin',
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'short'
|
||||
}).format(new Date(value));
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head><title>Sendungen | Sendewerk</title></svelte:head>
|
||||
|
||||
<div class="page-wrap builder-page">
|
||||
<header class="page-heading show-heading">
|
||||
<div class="show-heading-copy">
|
||||
<div class="page-wrap shows-page">
|
||||
<header class="page-heading">
|
||||
<div>
|
||||
<h1>Sendungen</h1>
|
||||
<p class="show-title">{data.show.title}</p>
|
||||
<p class="show-date">{data.show.startsAtBerlin} Uhr</p>
|
||||
</div>
|
||||
<div class="show-summary">
|
||||
<div><strong>{plannedCount}</strong><span>Stücke</span></div>
|
||||
<div>
|
||||
<strong>{formatDuration(data.show.totalDurationSeconds)}</strong><span>Planzeit</span>
|
||||
</div>
|
||||
<a class="live-link" href={resolve('/live')}>Live-Vorschau <span>↗</span></a>
|
||||
<p class="page-intro">Streams aus Fundus-Pieces und freien Abschnitten zusammenstellen.</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<PreviewNotice area="Sendungsbau" />
|
||||
{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
|
||||
|
||||
<div class="mobile-pane-switch" aria-label="Arbeitsbereich auswählen">
|
||||
<button
|
||||
class:active={mobilePane === 'fundus'}
|
||||
type="button"
|
||||
onclick={() => (mobilePane = 'fundus')}>Fundus</button
|
||||
>
|
||||
<button class:active={mobilePane === 'plan'} type="button" onclick={() => (mobilePane = 'plan')}
|
||||
>Ablauf</button
|
||||
>
|
||||
</div>
|
||||
<section class="show-create-panel">
|
||||
<div>
|
||||
<p class="eyebrow">Neuen Stream planen</p>
|
||||
<h2>Leer starten oder Ablauf übernehmen</h2>
|
||||
</div>
|
||||
<form method="POST" action="?/create" class="show-create-form">
|
||||
<label
|
||||
>Titel<input
|
||||
name="title"
|
||||
required
|
||||
maxlength="200"
|
||||
value={form?.title ?? ''}
|
||||
placeholder="Nächste heinzlive-Sendung"
|
||||
/></label
|
||||
>
|
||||
<label
|
||||
>Termin<input name="startsAt" type="datetime-local" value={form?.startsAt ?? ''} /></label
|
||||
>
|
||||
<label
|
||||
>Ausgangspunkt<select name="templateId" value={form?.templateId ?? ''}
|
||||
><option value="">Leer starten</option
|
||||
>{#each data.templates as template (template.id)}<option value={template.id}
|
||||
>{template.name}</option
|
||||
>{/each}</select
|
||||
></label
|
||||
>
|
||||
<button class="primary-button" type="submit">Sendung anlegen</button>
|
||||
</form>
|
||||
<div class="template-notes">
|
||||
{#each data.templates as template (template.id)}<p>
|
||||
<strong>{template.name}:</strong>
|
||||
{template.description}
|
||||
</p>{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="builder-workspace">
|
||||
<section
|
||||
class="builder-pane source-pane"
|
||||
class:mobile-hidden={mobilePane !== 'fundus'}
|
||||
aria-labelledby="source-title"
|
||||
>
|
||||
<header class="pane-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Quelle</p>
|
||||
<h2 id="source-title">Sendefertiger Fundus</h2>
|
||||
</div>
|
||||
<span>{data.pieces.filter((piece) => piece.status === 'ready').length}</span>
|
||||
</header>
|
||||
<div class="source-list">
|
||||
{#each data.pieces.filter((piece) => piece.status === 'ready') as piece (piece.id)}
|
||||
<article class="source-card" style={`--category: ${piece.categoryColor}`}>
|
||||
<section class="show-library" aria-labelledby="show-library-title">
|
||||
<header>
|
||||
<h2 id="show-library-title">Geplante Sendungen</h2>
|
||||
<span>{data.shows.length}</span>
|
||||
</header>
|
||||
{#if data.shows.length}
|
||||
<div class="show-card-list">
|
||||
{#each data.shows as show (show.id)}
|
||||
<a class="show-card" href={resolve('/sendungen/[id]', { id: show.id })}>
|
||||
<div>
|
||||
<span class="category-label"><i></i>{piece.category}</span><span
|
||||
>{formatClock(piece.durationSeconds)}</span
|
||||
<span class={`show-state ${show.status}`}
|
||||
>{show.status === 'ready'
|
||||
? 'Bereit'
|
||||
: show.status === 'draft'
|
||||
? 'Entwurf'
|
||||
: show.status === 'live'
|
||||
? 'Live'
|
||||
: 'Abgeschlossen'}</span
|
||||
>
|
||||
<h3>{show.title}</h3>
|
||||
<p>{berlinDate(show.startsAtUtc)} Uhr</p>
|
||||
</div>
|
||||
<h3>{piece.title}</h3>
|
||||
<p>{piece.format} · {piece.topics.join(', ')}</p>
|
||||
</article>
|
||||
<div class="show-card-facts">
|
||||
<span><strong>{show.sectionCount}</strong> Abschnitte</span><span
|
||||
><strong>{formatDuration(show.totalDurationSeconds)}</strong> Planzeit</span
|
||||
><b aria-hidden="true">→</b>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="reserve-box">
|
||||
<div>
|
||||
<span aria-hidden="true">◇</span>
|
||||
<div><strong>Reservebank</strong><small>1 Stück vorbereitet</small></div>
|
||||
</div>
|
||||
<p>„Pixelart, die nicht nostalgisch sein will“ wartet als Ersatz.</p>
|
||||
{:else}
|
||||
<div class="empty-state">
|
||||
<span aria-hidden="true">＋</span>
|
||||
<h2>Noch keine Sendung</h2>
|
||||
<p>Oben kann der erste Stream geplant werden.</p>
|
||||
</div>
|
||||
</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)}
|
||||
<article class="run-section" style={`--category: ${section.categoryColor}`}>
|
||||
<header>
|
||||
<div class="section-number">{String(index + 1).padStart(2, '0')}</div>
|
||||
<div>
|
||||
<span class="category-label"><i></i>{section.category}</span>
|
||||
<h3>{section.name}</h3>
|
||||
</div>
|
||||
<strong>{formatClock(section.durationSeconds)}</strong>
|
||||
</header>
|
||||
{#if section.usages.filter((usage) => !usage.isReserve).length > 0}
|
||||
<div class="usage-list">
|
||||
{#each section.usages.filter((usage) => !usage.isReserve) as usage (usage.id)}
|
||||
<div class="usage-row">
|
||||
<div>
|
||||
<strong>{usage.title}</strong><small
|
||||
>{formatClock(usage.durationSeconds)} · Stand für diese Sendung</small
|
||||
>
|
||||
</div>
|
||||
<span class:current={usage.status === 'current'} class="usage-status"
|
||||
>{usage.status === 'current' ? 'Aktuell' : 'Offen'}</span
|
||||
>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="section-placeholder">Spieleblock ohne vorbereiteten Fundusinhalt</div>
|
||||
{/if}
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
</div>
|
||||
@@ -0,0 +1,222 @@
|
||||
import { error, fail } from '@sveltejs/kit';
|
||||
import type { Actions, PageServerLoad } from './$types';
|
||||
import { requireUser } from '#lib/server/auth.js';
|
||||
import { getTaxonomy, listPieces } from '#lib/server/content.js';
|
||||
import {
|
||||
addPieceUsage,
|
||||
addShowSection,
|
||||
getShow,
|
||||
movePieceUsage,
|
||||
moveShowSection,
|
||||
removePieceUsage,
|
||||
removeShowSection,
|
||||
saveShowMetadata,
|
||||
updatePieceUsage,
|
||||
updateShowSection,
|
||||
type EditableShowStatus,
|
||||
type UsageStatus
|
||||
} from '#lib/server/shows.js';
|
||||
|
||||
function text(data: FormData, name: string) {
|
||||
return String(data.get(name) || '');
|
||||
}
|
||||
|
||||
function nullableDuration(data: FormData) {
|
||||
const value = text(data, 'explicitDurationSeconds').trim();
|
||||
return value === '' ? null : Number(value);
|
||||
}
|
||||
|
||||
function pieceDurationInSeconds(data: FormData) {
|
||||
return Math.round(Number(data.get('durationMinutes')) * 60);
|
||||
}
|
||||
|
||||
function berlinLocalToUtc(value: string): string | null {
|
||||
if (!value) return null;
|
||||
const match = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/.exec(value);
|
||||
if (!match) throw new Error('INVALID_TIMESTAMP');
|
||||
const parts = match.slice(1).map(Number);
|
||||
const localMilliseconds = Date.UTC(parts[0], parts[1] - 1, parts[2], parts[3], parts[4]);
|
||||
let candidate = localMilliseconds;
|
||||
for (let attempt = 0; attempt < 2; attempt += 1) {
|
||||
const formatted = new Intl.DateTimeFormat('en-CA', {
|
||||
timeZone: 'Europe/Berlin',
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hourCycle: 'h23'
|
||||
}).formatToParts(new Date(candidate));
|
||||
const read = (type: Intl.DateTimeFormatPartTypes) =>
|
||||
Number(formatted.find((part) => part.type === type)?.value);
|
||||
candidate +=
|
||||
localMilliseconds -
|
||||
Date.UTC(read('year'), read('month') - 1, read('day'), read('hour'), read('minute'));
|
||||
}
|
||||
return new Date(candidate).toISOString();
|
||||
}
|
||||
|
||||
function berlinInput(value: string | null) {
|
||||
if (!value) return '';
|
||||
const parts = new Intl.DateTimeFormat('en-CA', {
|
||||
timeZone: 'Europe/Berlin',
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hourCycle: 'h23'
|
||||
}).formatToParts(new Date(value));
|
||||
const read = (type: Intl.DateTimeFormatPartTypes) =>
|
||||
parts.find((part) => part.type === type)?.value ?? '';
|
||||
return `${read('year')}-${read('month')}-${read('day')}T${read('hour')}:${read('minute')}`;
|
||||
}
|
||||
|
||||
function actionError(cause: unknown) {
|
||||
const code = cause instanceof Error ? cause.message : '';
|
||||
if (code === 'CONFLICT')
|
||||
return {
|
||||
status: 409,
|
||||
error: 'Die Sendung wurde inzwischen geändert. Bitte neu laden.',
|
||||
conflict: true
|
||||
};
|
||||
if (code === 'SHOW_COMPLETED')
|
||||
return { status: 409, error: 'Abgeschlossene Sendungen können nicht bearbeitet werden.' };
|
||||
if (code === 'PIECE_NOT_READY')
|
||||
return { status: 400, error: 'Nur sendefertige Pieces können eingeplant werden.' };
|
||||
if (code === 'NOT_FOUND') return { status: 404, error: 'Der Eintrag wurde nicht gefunden.' };
|
||||
if (code === 'INVALID_DURATION')
|
||||
return { status: 400, error: 'Piece-Dauern müssen zwischen 0 und 1.440 Minuten liegen.' };
|
||||
if (code.startsWith('INVALID_'))
|
||||
return { status: 400, error: 'Mindestens ein Feld ist ungültig oder zu lang.' };
|
||||
return { status: 500, error: 'Die Änderung konnte nicht gespeichert werden.' };
|
||||
}
|
||||
|
||||
function attempt(intent: string, operation: () => unknown) {
|
||||
try {
|
||||
return { intent, success: 'Änderung gespeichert.', result: operation() };
|
||||
} catch (cause) {
|
||||
return fail(actionError(cause).status, { intent, ...actionError(cause) });
|
||||
}
|
||||
}
|
||||
|
||||
export const load: PageServerLoad = ({ locals, params, url }) => {
|
||||
requireUser(locals.user);
|
||||
const show = getShow(params.id);
|
||||
if (!show) error(404, 'Sendung nicht gefunden');
|
||||
return {
|
||||
show,
|
||||
startsAtLocal: berlinInput(show.startsAtUtc),
|
||||
pieces: listPieces({
|
||||
statuses: ['ready'],
|
||||
query: url.searchParams.get('q') ?? '',
|
||||
categoryId: url.searchParams.get('category') ?? ''
|
||||
}),
|
||||
taxonomy: getTaxonomy(),
|
||||
filters: {
|
||||
query: url.searchParams.get('q') ?? '',
|
||||
categoryId: url.searchParams.get('category') ?? ''
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
saveMetadata: async ({ locals, params, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
return attempt('saveMetadata', () =>
|
||||
saveShowMetadata(params.id, Number(data.get('revision')), {
|
||||
title: text(data, 'title'),
|
||||
startsAtUtc: berlinLocalToUtc(text(data, 'startsAt')),
|
||||
twitchTitle: text(data, 'twitchTitle'),
|
||||
announcementText: text(data, 'announcementText'),
|
||||
status: text(data, 'status') as EditableShowStatus
|
||||
})
|
||||
);
|
||||
},
|
||||
addSection: async ({ locals, params, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
return attempt('addSection', () =>
|
||||
addShowSection(params.id, Number(data.get('revision')), {
|
||||
name: text(data, 'name'),
|
||||
categoryId: text(data, 'categoryId') || null,
|
||||
explicitDurationSeconds: nullableDuration(data)
|
||||
})
|
||||
);
|
||||
},
|
||||
updateSection: async ({ locals, params, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
return attempt('updateSection', () =>
|
||||
updateShowSection(params.id, text(data, 'sectionId'), Number(data.get('revision')), {
|
||||
name: text(data, 'name'),
|
||||
categoryId: text(data, 'categoryId') || null,
|
||||
explicitDurationSeconds: nullableDuration(data)
|
||||
})
|
||||
);
|
||||
},
|
||||
removeSection: async ({ locals, params, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
return attempt('removeSection', () =>
|
||||
removeShowSection(params.id, text(data, 'sectionId'), Number(data.get('revision')))
|
||||
);
|
||||
},
|
||||
moveSection: async ({ locals, params, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
return attempt('moveSection', () =>
|
||||
moveShowSection(
|
||||
params.id,
|
||||
text(data, 'sectionId'),
|
||||
Number(data.get('position')),
|
||||
Number(data.get('revision'))
|
||||
)
|
||||
);
|
||||
},
|
||||
addUsage: async ({ locals, params, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
return attempt('addUsage', () =>
|
||||
addPieceUsage(params.id, Number(data.get('revision')), {
|
||||
pieceId: text(data, 'pieceId'),
|
||||
sectionId: text(data, 'sectionId') || null
|
||||
})
|
||||
);
|
||||
},
|
||||
updateUsage: async ({ locals, params, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
return attempt('updateUsage', () =>
|
||||
updatePieceUsage(params.id, text(data, 'usageId'), Number(data.get('revision')), {
|
||||
title: text(data, 'title'),
|
||||
durationSeconds: pieceDurationInSeconds(data),
|
||||
ownNotes: text(data, 'ownNotes'),
|
||||
intro: text(data, 'intro'),
|
||||
research: text(data, 'research'),
|
||||
moderation: text(data, 'moderation'),
|
||||
transition: text(data, 'transition'),
|
||||
presentation: text(data, 'presentation'),
|
||||
status: text(data, 'status') as UsageStatus
|
||||
})
|
||||
);
|
||||
},
|
||||
removeUsage: async ({ locals, params, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
return attempt('removeUsage', () =>
|
||||
removePieceUsage(params.id, text(data, 'usageId'), Number(data.get('revision')))
|
||||
);
|
||||
},
|
||||
moveUsage: async ({ locals, params, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
return attempt('moveUsage', () =>
|
||||
movePieceUsage(params.id, text(data, 'usageId'), Number(data.get('revision')), {
|
||||
sectionId: text(data, 'sectionId') || null,
|
||||
position: Number(data.get('position'))
|
||||
})
|
||||
);
|
||||
}
|
||||
} satisfies Actions;
|
||||
@@ -0,0 +1,872 @@
|
||||
<script lang="ts">
|
||||
import { enhance, type SubmitFunction } from '$app/forms';
|
||||
import { resolve } from '$app/paths';
|
||||
import { flip } from 'svelte/animate';
|
||||
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 draggedSectionId = $state('');
|
||||
let draggedUsageId = $state('');
|
||||
let draggedPieceId = $state('');
|
||||
let dropSectionId = $state('');
|
||||
let dropPosition = $state(0);
|
||||
let copyMessage = $state('');
|
||||
let plannedCount = $derived(
|
||||
data.show.sections.reduce((total, section) => total + section.usages.length, 0)
|
||||
);
|
||||
|
||||
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 durationInMinutes(seconds: number) {
|
||||
return Number((seconds / 60).toFixed(2));
|
||||
}
|
||||
|
||||
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());
|
||||
}
|
||||
|
||||
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 }) => {
|
||||
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-Vorschau <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:mobile-hidden={mobilePane !== 'fundus'}
|
||||
aria-labelledby="source-title"
|
||||
>
|
||||
<header class="pane-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Quelle</p>
|
||||
<h2 id="source-title">Sendefertiger Fundus</h2>
|
||||
</div>
|
||||
<span>{data.pieces.length}</span>
|
||||
</header>
|
||||
<form 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-source-list">
|
||||
{#each data.pieces 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>{piece.title}</h3>
|
||||
<p>
|
||||
{piece.format} · {piece.topics.map((item) => item.name).join(', ') || 'Ohne Thema'}
|
||||
</p>
|
||||
<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 !data.pieces.length}<div class="empty-state">
|
||||
<span aria-hidden="true">⌕</span>
|
||||
<h2>Nichts gefunden</h2>
|
||||
<p>Filter ändern 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)} · sendungsspezifische Kopie</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>
|
||||
</div>
|
||||
<details class="usage-editor">
|
||||
<summary>Bearbeiten und verschieben</summary>
|
||||
<form
|
||||
use:enhance={enhanceCommand}
|
||||
method="POST"
|
||||
action="?/updateUsage"
|
||||
class="usage-edit-form"
|
||||
>
|
||||
<input type="hidden" name="revision" value={data.show.revision} /><input
|
||||
type="hidden"
|
||||
name="usageId"
|
||||
value={usage.id}
|
||||
/>
|
||||
<label
|
||||
>Titel<input
|
||||
name="title"
|
||||
required
|
||||
maxlength="200"
|
||||
value={usage.title}
|
||||
/></label
|
||||
><label
|
||||
>Dauer in Minuten<input
|
||||
name="durationMinutes"
|
||||
type="number"
|
||||
min="0"
|
||||
max="1440"
|
||||
step="any"
|
||||
value={durationInMinutes(usage.durationSeconds)}
|
||||
/></label
|
||||
>
|
||||
<label class="wide-field"
|
||||
>Eigene Notizen<textarea name="ownNotes" rows="2"
|
||||
>{usage.ownNotes}</textarea
|
||||
></label
|
||||
><label class="wide-field"
|
||||
>Einleitung<textarea name="intro" rows="2">{usage.intro}</textarea
|
||||
></label
|
||||
><label class="wide-field"
|
||||
>Recherche<textarea name="research" rows="2"
|
||||
>{usage.research}</textarea
|
||||
></label
|
||||
><label class="wide-field"
|
||||
>Moderation<textarea name="moderation" rows="2"
|
||||
>{usage.moderation}</textarea
|
||||
></label
|
||||
><label class="wide-field"
|
||||
>Überleitung<textarea name="transition" rows="2"
|
||||
>{usage.transition}</textarea
|
||||
></label
|
||||
><label class="wide-field"
|
||||
>Präsentation<textarea name="presentation" rows="2"
|
||||
>{usage.presentation}</textarea
|
||||
></label
|
||||
>
|
||||
<input type="hidden" name="status" value={usage.status} /><button
|
||||
class="primary-button wide-field"
|
||||
type="submit">Verwendung speichern</button
|
||||
>
|
||||
</form>
|
||||
<div class="usage-command-row">
|
||||
<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
|
||||
>Ziel<select name="sectionId"
|
||||
><option value="">Reservebank</option
|
||||
>{#each data.show.sections as target (target.id)}<option
|
||||
value={target.id}
|
||||
selected={target.id === section.id}>{target.name}</option
|
||||
>{/each}</select
|
||||
></label
|
||||
><button class="secondary-button" type="submit">Verschieben</button>
|
||||
</form>
|
||||
<form
|
||||
use:enhance={enhanceCommand}
|
||||
method="POST"
|
||||
action="?/removeUsage"
|
||||
onsubmit={(event) =>
|
||||
!confirm('Verwendung aus der 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">Entfernen</button
|
||||
>
|
||||
</form>
|
||||
</div>
|
||||
</details>
|
||||
</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">
|
||||
<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 Reserve entfernen`}>Entfernen</button
|
||||
>
|
||||
</form>
|
||||
</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>
|
||||
</div>
|
||||
Reference in new issue
Block a user