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
@@ -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>
|
||||
Reference in new issue
Block a user