Release 0.7.2
This commit is contained in:
hnzio committed
1 parent
64f55a8b1f
commit
d5b1c58ba2
23 files changed
+1630
-455
No files matched your search
@@ -46,22 +46,34 @@ export const actions = {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
const entryIds = data.getAll('entryIds').map(String);
|
||||
if (!entryIds.length) return fail(400, { feedError: 'Mindestens einen Beitrag auswählen.' });
|
||||
if (!entryIds.length)
|
||||
return fail(400, {
|
||||
intent: 'feedImport',
|
||||
feedError: 'Mindestens einen Beitrag auswählen.'
|
||||
});
|
||||
try {
|
||||
const pieceIds = importFeedEntries(entryIds, data.getAll('categoryIds').map(String));
|
||||
return {
|
||||
intent: 'feedImport',
|
||||
feedSuccess: `${pieceIds.length} ${pieceIds.length === 1 ? 'Beitrag' : 'Beiträge'} in den Eingang übernommen.`
|
||||
};
|
||||
} catch {
|
||||
return fail(400, { feedError: 'Die Auswahl konnte nicht übernommen werden.' });
|
||||
return fail(400, {
|
||||
intent: 'feedImport',
|
||||
feedError: 'Die Auswahl konnte nicht übernommen werden.'
|
||||
});
|
||||
}
|
||||
},
|
||||
discardFeeds: async ({ locals, request }) => {
|
||||
requireUser(locals.user);
|
||||
const data = await request.formData();
|
||||
const entryIds = data.getAll('entryIds').map(String);
|
||||
if (!entryIds.length) return fail(400, { feedError: 'Mindestens einen Beitrag auswählen.' });
|
||||
if (!entryIds.length)
|
||||
return fail(400, { intent: 'feedDiscard', feedError: 'Mindestens einen Beitrag auswählen.' });
|
||||
const count = discardFeedEntries(entryIds);
|
||||
return { feedSuccess: `${count} ${count === 1 ? 'Beitrag' : 'Beiträge'} verworfen.` };
|
||||
return {
|
||||
intent: 'feedDiscard',
|
||||
feedSuccess: `${count} ${count === 1 ? 'Beitrag' : 'Beiträge'} verworfen.`
|
||||
};
|
||||
}
|
||||
} satisfies Actions;
|
||||
@@ -1,9 +1,10 @@
|
||||
<script lang="ts">
|
||||
/* eslint-disable svelte/no-navigation-without-resolve -- RSS links are validated external URLs. */
|
||||
import { resolve } from '$app/paths';
|
||||
import AppIcon from '#lib/components/AppIcon.svelte';
|
||||
import RssSelectionDialog from '#lib/components/RssSelectionDialog.svelte';
|
||||
import type { PageProps } from './$types';
|
||||
let { data, form }: PageProps = $props();
|
||||
let rssDialog: { showModal: () => void };
|
||||
</script>
|
||||
|
||||
<svelte:head><title>Eingang | Sendewerk</title></svelte:head>
|
||||
@@ -44,65 +45,39 @@
|
||||
<button class="primary-button" type="submit">Im Eingang ablegen</button>
|
||||
</form>
|
||||
</section>
|
||||
<section class="quiet-panel feed-inbox">
|
||||
<section class="quiet-panel rss-inbox-panel">
|
||||
<div class="panel-heading">
|
||||
<div>
|
||||
<p class="eyebrow">RSS-Importeingang</p>
|
||||
<h2>Beiträge sichten</h2>
|
||||
<h2>RSS-Beiträge</h2>
|
||||
</div>
|
||||
<span>{data.feedEntries.length} neu</span>
|
||||
<span class="catalog-entry-icon"><AppIcon name="rss" /></span>
|
||||
</div>
|
||||
<p>Beiträge bleiben hier getrennt, bis du sie auswählst und in den Fundus übernimmst.</p>
|
||||
<p class="catalog-note">
|
||||
{data.feedEntries.length}
|
||||
{data.feedEntries.length === 1 ? 'Beitrag ist' : 'Beiträge sind'}
|
||||
verfügbar. Erst deine ausdrückliche Auswahl übernimmt sie in den redaktionellen Eingang.
|
||||
</p>
|
||||
{#if form?.feedError}<div class="form-message error" role="alert">{form.feedError}</div>{/if}
|
||||
{#if form?.feedSuccess}<div class="form-message success" role="status">
|
||||
{form.feedSuccess}
|
||||
</div>{/if}
|
||||
{#if data.feedEntries.length}
|
||||
<form method="POST" class="feed-selection">
|
||||
<fieldset class="feed-categories">
|
||||
<legend>Kategorien für die Auswahl <span>(Feed-Standard gilt ohne Auswahl)</span></legend>
|
||||
{#each data.taxonomy.categories as category (category.id)}
|
||||
<label
|
||||
><input type="checkbox" name="categoryIds" value={category.id} />
|
||||
{category.name}</label
|
||||
>
|
||||
{/each}
|
||||
</fieldset>
|
||||
<div class="feed-entry-list">
|
||||
{#each data.feedEntries as entry (entry.id)}
|
||||
<label class="feed-entry">
|
||||
<input type="checkbox" name="entryIds" value={entry.id} />
|
||||
<span
|
||||
><small
|
||||
>{entry.feedName}{entry.publishedAtUtc
|
||||
? ` · ${new Date(entry.publishedAtUtc).toLocaleDateString('de-DE')}`
|
||||
: ''}</small
|
||||
><strong>{entry.title}</strong>{#if entry.summary}<span>{entry.summary}</span>{/if}
|
||||
<a
|
||||
href={entry.url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
onclick={(event) => event.stopPropagation()}>Original öffnen</a
|
||||
></span
|
||||
>
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="feed-actions">
|
||||
<button class="primary-button" type="submit" formaction="?/importFeeds"
|
||||
>Auswahl übernehmen</button
|
||||
>
|
||||
<button class="text-button danger-text" type="submit" formaction="?/discardFeeds"
|
||||
>Auswahl verwerfen</button
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
{:else}
|
||||
<p class="empty-copy">
|
||||
Keine neuen Feed-Beiträge. Aktivierte Feeds werden automatisch abgerufen.
|
||||
</p>
|
||||
{/if}
|
||||
<button
|
||||
class="compact-add-button"
|
||||
type="button"
|
||||
disabled={!data.feedEntries.length}
|
||||
onclick={() => rssDialog.showModal()}
|
||||
>
|
||||
<AppIcon name="list" />
|
||||
{data.feedEntries.length ? 'RSS-Beiträge auswählen' : 'Keine neuen RSS-Beiträge'}
|
||||
</button>
|
||||
</section>
|
||||
<RssSelectionDialog
|
||||
bind:this={rssDialog}
|
||||
entries={data.feedEntries}
|
||||
categories={data.taxonomy.categories}
|
||||
{form}
|
||||
/>
|
||||
{#if data.pieces.length}
|
||||
<section class="inbox-list">
|
||||
<h2>{data.pieces.length} {data.pieces.length === 1 ? 'offener Inhalt' : 'offene Inhalte'}</h2>
|
||||
@@ -143,57 +118,16 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.feed-inbox {
|
||||
.rss-inbox-panel {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
gap: 0.75rem;
|
||||
margin-block: 1.5rem;
|
||||
padding: clamp(0.85rem, 2vw, 1.2rem);
|
||||
}
|
||||
.feed-selection,
|
||||
.feed-entry-list {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
.rss-inbox-panel .panel-heading {
|
||||
margin: 0;
|
||||
}
|
||||
.feed-categories {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.6rem 1rem;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.feed-categories legend {
|
||||
width: 100%;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.45rem;
|
||||
}
|
||||
.feed-categories legend span {
|
||||
font-weight: 400;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.feed-entry {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.8rem;
|
||||
align-items: start;
|
||||
padding: 0.9rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.7rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.feed-entry > span {
|
||||
display: grid;
|
||||
gap: 0.25rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.feed-entry small {
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.feed-entry a {
|
||||
width: fit-content;
|
||||
}
|
||||
.feed-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
.rss-inbox-panel .catalog-note {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -8,6 +8,7 @@ import {
|
||||
clearPresentationChannel,
|
||||
endLive,
|
||||
getLiveView,
|
||||
getPresentationChannelStatus,
|
||||
goBack,
|
||||
issuePresentationAccess,
|
||||
moveOpenUsage,
|
||||
@@ -87,6 +88,7 @@ export const load: PageServerLoad = ({ locals, url }) => {
|
||||
const live = getLiveView(showId);
|
||||
return {
|
||||
live,
|
||||
outputStatus: getPresentationChannelStatus(showId),
|
||||
canManageShares: actor.role === 'barkeeper',
|
||||
shares: actor.role === 'barkeeper' ? listShares(actor, showId) : [],
|
||||
commandId: randomUUID(),
|
||||
|
||||
+188
-129
@@ -300,9 +300,10 @@
|
||||
menuOpen = true;
|
||||
expandedContext = null;
|
||||
await tick();
|
||||
liveMenuPopover
|
||||
?.querySelector<HTMLElement>('button:not(:disabled), a[href]')
|
||||
?.focus({ preventScroll: true });
|
||||
(
|
||||
liveMenuPopover?.querySelector<HTMLElement>('[data-menu-initial-focus]') ??
|
||||
liveMenuPopover?.querySelector<HTMLElement>('button:not(:disabled), a[href]')
|
||||
)?.focus({ preventScroll: true });
|
||||
}
|
||||
|
||||
async function closeLiveMenu(restoreFocus = true) {
|
||||
@@ -361,6 +362,15 @@
|
||||
return 'Kommend';
|
||||
}
|
||||
|
||||
function showStateLabel() {
|
||||
if (data.live.show.status === 'completed') return 'Historisch abgeschlossen';
|
||||
if (!data.live.startedAtUtc)
|
||||
return data.live.show.status === 'ready' ? 'Bereit zum Start' : 'Entwurf';
|
||||
if (data.live.endedAtUtc) return 'Lauf beendet';
|
||||
if (data.live.isPaused) return 'Pausiert';
|
||||
return 'Läuft';
|
||||
}
|
||||
|
||||
function liveAction(name: string) {
|
||||
return `?show=${encodeURIComponent(data.live.show.id)}&/${name}`;
|
||||
}
|
||||
@@ -481,28 +491,46 @@
|
||||
</form>{/if}
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="total-countdown"
|
||||
type="button"
|
||||
onclick={toggleTimerDisplay}
|
||||
aria-label={timerDisplay === 'elapsed'
|
||||
? 'Gelaufene Gesamtzeit, zu Restzeit wechseln'
|
||||
: 'Geschätzte Restzeit, zu gelaufener Zeit wechseln'}
|
||||
>
|
||||
<span class="timer-label"
|
||||
><AppIcon name="timer" /> {timerDisplay === 'elapsed' ? 'Gelaufen' : 'Restzeit'}</span
|
||||
<div class="total-timer-control">
|
||||
<button
|
||||
class="total-countdown"
|
||||
type="button"
|
||||
onclick={toggleTimerDisplay}
|
||||
aria-label={timerDisplay === 'elapsed'
|
||||
? 'Gelaufene Gesamtzeit, zu Restzeit wechseln'
|
||||
: 'Geschätzte Restzeit, zu gelaufener Zeit wechseln'}
|
||||
>
|
||||
<strong
|
||||
>{formatCountdown(
|
||||
timerDisplay === 'elapsed' ? totalElapsedSeconds : remainingSeconds
|
||||
)}</strong
|
||||
>
|
||||
{#if timerDisplay === 'remaining' && data.live.remainingEstimate.unplannedSectionCount}
|
||||
<small title="Verbleibende Abschnitte ohne geplante Abschnittsdauer"
|
||||
>+ {data.live.remainingEstimate.unplannedSectionCount} ungeplant</small
|
||||
<span class="timer-label"
|
||||
><AppIcon name="timer" /> {timerDisplay === 'elapsed' ? 'Gelaufen' : 'Restzeit'}</span
|
||||
>
|
||||
{/if}
|
||||
</button>
|
||||
<strong
|
||||
>{formatCountdown(
|
||||
timerDisplay === 'elapsed' ? totalElapsedSeconds : remainingSeconds
|
||||
)}</strong
|
||||
>
|
||||
{#if timerDisplay === 'remaining' && data.live.remainingEstimate.unplannedSectionCount}
|
||||
<small title="Verbleibende Abschnitte ohne geplante Abschnittsdauer"
|
||||
>+ {data.live.remainingEstimate.unplannedSectionCount} ungeplant</small
|
||||
>
|
||||
{/if}
|
||||
</button>
|
||||
{#if data.live.startedAtUtc && !data.live.endedAtUtc}<details class="timer-reset-menu">
|
||||
<summary aria-label="Aktionen für Gesamtzeit"><AppIcon name="ellipsis" /></summary>
|
||||
<form
|
||||
method="POST"
|
||||
action={liveAction('resetTotalTimer')}
|
||||
use:enhance={enhanceCommand}
|
||||
onsubmit={(event) => {
|
||||
if (!confirm('Gesamtzeit wirklich zurücksetzen?')) event.preventDefault();
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<input type="hidden" name="revision" value={data.live.liveRevision} />
|
||||
<input type="hidden" name="commandId" value={data.commandId} />
|
||||
<button class="text-button" type="submit">Gesamtzeit zurücksetzen</button>
|
||||
</form>
|
||||
</details>{/if}
|
||||
</div>
|
||||
|
||||
<div class="section-timer-control">
|
||||
<div
|
||||
@@ -540,6 +568,24 @@
|
||||
<AppIcon name={data.live.isPaused ? 'play' : 'pause'} />
|
||||
</button>
|
||||
</form>{/if}
|
||||
{#if data.live.startedAtUtc && !data.live.endedAtUtc && data.live.sectionTimer && data.live.sectionTimer.plannedDurationSeconds > 0}<details
|
||||
class="timer-reset-menu"
|
||||
>
|
||||
<summary aria-label="Aktionen für Abschnittszeit"><AppIcon name="ellipsis" /></summary>
|
||||
<form
|
||||
method="POST"
|
||||
action={liveAction('resetSectionTimer')}
|
||||
use:enhance={enhanceCommand}
|
||||
onsubmit={(event) => {
|
||||
if (!confirm('Abschnittstimer wirklich zurücksetzen?')) event.preventDefault();
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<input type="hidden" name="revision" value={data.live.liveRevision} />
|
||||
<input type="hidden" name="commandId" value={data.commandId} />
|
||||
<button class="text-button" type="submit">Abschnittszeit zurücksetzen</button>
|
||||
</form>
|
||||
</details>{/if}
|
||||
</div>
|
||||
|
||||
<button
|
||||
@@ -567,52 +613,23 @@
|
||||
inert={mobileRailOpen}
|
||||
>
|
||||
<section class="live-menu-show">
|
||||
<small>Sendung</small>
|
||||
<strong>{data.live.show.title}</strong>
|
||||
</section>
|
||||
<section>
|
||||
<strong>Ansicht</strong>
|
||||
<div class="font-control" aria-label="Prompter-Schriftgröße">
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => changePromptSize(-0.1)}
|
||||
aria-label="Schrift verkleinern">A−</button
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => changePromptSize(0.1)}
|
||||
aria-label="Schrift vergrößern">A+</button
|
||||
>
|
||||
<strong>Sendung steuern</strong>
|
||||
<div class="live-menu-show-heading">
|
||||
<span>
|
||||
<small>Sendung</small>
|
||||
<strong>{data.live.show.title}</strong>
|
||||
</span>
|
||||
<span class:paused={data.live.isPaused} class="live-show-state">{showStateLabel()}</span>
|
||||
</div>
|
||||
<button type="button" class="text-button" aria-pressed={!showTimes} onclick={toggleTimes}>
|
||||
{showTimes ? 'Zeiten ausblenden' : 'Zeiten einblenden'}
|
||||
</button>
|
||||
<ThemeToggle />
|
||||
</section>
|
||||
<section>
|
||||
<strong>Ausgabekanal</strong>
|
||||
{#if data.canManageShares}<ShareManagement
|
||||
shows={[{ ...data.live.show, startsAtUtc: null }]}
|
||||
shares={data.shares}
|
||||
fixedShowId={data.live.show.id}
|
||||
{form}
|
||||
/>{/if}
|
||||
<form method="POST" action={liveAction('createOutput')} use:enhance={enhanceOutput}>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<button class="secondary-button" type="submit">Ausgabe verbinden und öffnen</button>
|
||||
</form>
|
||||
<form method="POST" action={liveAction('rotateOutput')} use:enhance={enhanceOutput}>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<button class="text-button" type="submit">Schlüssel erneuern</button>
|
||||
</form>
|
||||
<form method="POST" action={liveAction('clearOutput')} use:enhance={enhanceCommand}>
|
||||
<button class="text-button danger-text" type="submit">Ausgabekanal trennen</button>
|
||||
</form>
|
||||
</section>
|
||||
<section>
|
||||
<strong>Sendungssteuerung</strong>
|
||||
<small>Status: {data.live.show.status}</small>
|
||||
{#if !data.live.startedAtUtc}
|
||||
<form method="POST" action={liveAction('start')} use:enhance={enhanceCommand}>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<input type="hidden" name="revision" value={data.live.liveRevision} />
|
||||
<input type="hidden" name="commandId" value={data.commandId} />
|
||||
<button class="secondary-button" type="submit"
|
||||
><AppIcon name="play" /> Sendung starten</button
|
||||
>
|
||||
</form>
|
||||
<form method="POST" action={liveAction('setStatus')} use:enhance={enhanceCommand}>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<input
|
||||
@@ -627,27 +644,16 @@
|
||||
{data.live.show.status === 'ready' ? 'Als Entwurf markieren' : 'Als bereit markieren'}
|
||||
</button>
|
||||
</form>
|
||||
<form method="POST" action={liveAction('start')} use:enhance={enhanceCommand}>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<input type="hidden" name="revision" value={data.live.liveRevision} />
|
||||
<input type="hidden" name="commandId" value={data.commandId} />
|
||||
<button class="secondary-button" type="submit"
|
||||
><AppIcon name="play" /> Sendung starten</button
|
||||
>
|
||||
</form>
|
||||
{:else if data.live.endedAtUtc}
|
||||
{#if data.live.show.status === 'completed'}
|
||||
<p class="quiet-copy">Diese Sendung ist historisch abgeschlossen und unveränderlich.</p>
|
||||
<a class="secondary-button" href={resolve('/sendungen/[id]', { id: data.live.show.id })}
|
||||
>Historische Sendung öffnen</a
|
||||
>
|
||||
<p class="quiet-copy">Diese Sendung ist historisch abgeschlossen.</p>
|
||||
{:else}
|
||||
<form method="POST" action={liveAction('resumeEnded')} use:enhance={enhanceCommand}>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<input type="hidden" name="revision" value={data.live.liveRevision} />
|
||||
<input type="hidden" name="commandId" value={data.commandId} />
|
||||
<button class="secondary-button" type="submit"
|
||||
><AppIcon name="play" /> Lauf fortsetzen</button
|
||||
><AppIcon name="play" /> Beendeten Lauf wiederaufnehmen</button
|
||||
>
|
||||
</form>
|
||||
<form
|
||||
@@ -679,49 +685,19 @@
|
||||
</button>
|
||||
{/if}
|
||||
{:else}
|
||||
<form
|
||||
method="POST"
|
||||
action={liveAction(data.live.isPaused ? 'resume' : 'pause')}
|
||||
use:enhance={enhanceCommand}
|
||||
>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<input type="hidden" name="revision" value={data.live.liveRevision} />
|
||||
<input type="hidden" name="commandId" value={data.commandId} />
|
||||
<button class="secondary-button" type="submit">
|
||||
<AppIcon name={data.live.isPaused ? 'play' : 'pause'} />
|
||||
{data.live.isPaused ? 'Fortsetzen' : 'Pausieren'}
|
||||
</button>
|
||||
</form>
|
||||
{#if data.live.sectionTimer && data.live.sectionTimer.plannedDurationSeconds > 0}<form
|
||||
{#if needsResume}<form
|
||||
method="POST"
|
||||
action={liveAction('resetSectionTimer')}
|
||||
action={liveAction('start')}
|
||||
use:enhance={enhanceCommand}
|
||||
onsubmit={(event) => {
|
||||
if (!confirm('Abschnittstimer wirklich zurücksetzen?')) event.preventDefault();
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<input type="hidden" name="revision" value={data.live.liveRevision} />
|
||||
<input type="hidden" name="commandId" value={data.commandId} />
|
||||
<button class="text-button" type="submit"
|
||||
><AppIcon name="arrow-rotate-left" /> Abschnittszeit zurücksetzen</button
|
||||
>
|
||||
<button class="secondary-button" type="submit">Live-Stand wiederaufnehmen</button>
|
||||
</form>{/if}
|
||||
<form
|
||||
method="POST"
|
||||
action={liveAction('resetTotalTimer')}
|
||||
use:enhance={enhanceCommand}
|
||||
onsubmit={(event) => {
|
||||
if (!confirm('Gesamtzeit wirklich zurücksetzen?')) event.preventDefault();
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<input type="hidden" name="revision" value={data.live.liveRevision} />
|
||||
<input type="hidden" name="commandId" value={data.commandId} />
|
||||
<button class="text-button" type="submit"
|
||||
><AppIcon name="timer" /> Gesamtzeit zurücksetzen</button
|
||||
>
|
||||
</form>
|
||||
{#if data.live.isPaused}<p class="live-menu-hint">
|
||||
Fortsetzen ist direkt bei der Abschnittszeit erreichbar.
|
||||
</p>{/if}
|
||||
<form
|
||||
method="POST"
|
||||
action={liveAction('end')}
|
||||
@@ -739,20 +715,103 @@
|
||||
>
|
||||
</form>
|
||||
{/if}
|
||||
{#if needsResume && !data.live.endedAtUtc}<form
|
||||
method="POST"
|
||||
action={liveAction('start')}
|
||||
use:enhance={enhanceCommand}
|
||||
>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<input type="hidden" name="revision" value={data.live.liveRevision} />
|
||||
<input type="hidden" name="commandId" value={data.commandId} />
|
||||
<button class="text-button" type="submit">Live-Stand wiederaufnehmen</button>
|
||||
</form>{/if}
|
||||
<a href={resolve('/sendungen/[id]', { id: data.live.show.id })}
|
||||
>Liveansicht verlassen · Zur Planung</a
|
||||
>
|
||||
</section>
|
||||
<section>
|
||||
<strong>Ansicht</strong>
|
||||
<div class="live-view-controls">
|
||||
<div class="font-control" aria-label="Prompter-Schriftgröße">
|
||||
<button
|
||||
data-menu-initial-focus
|
||||
type="button"
|
||||
onclick={() => changePromptSize(-0.1)}
|
||||
aria-label="Schrift verkleinern">A−</button
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => changePromptSize(0.1)}
|
||||
aria-label="Schrift vergrößern">A+</button
|
||||
>
|
||||
</div>
|
||||
<button type="button" class="text-button" aria-pressed={!showTimes} onclick={toggleTimes}>
|
||||
{showTimes ? 'Zeiten ausblenden' : 'Zeiten einblenden'}
|
||||
</button>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</section>
|
||||
{#if data.canManageShares}<section>
|
||||
<strong>Teilen</strong>
|
||||
<ShareManagement
|
||||
shows={[{ ...data.live.show, startsAtUtc: null }]}
|
||||
shares={data.shares}
|
||||
fixedShowId={data.live.show.id}
|
||||
{form}
|
||||
/>
|
||||
</section>{/if}
|
||||
<section class="live-output-section">
|
||||
<details class="live-output-settings">
|
||||
<summary>
|
||||
<span><AppIcon name="display" /> Ausgabe einrichten</span>
|
||||
<small
|
||||
>{data.outputStatus === 'connected'
|
||||
? 'Mit dieser Sendung verbunden'
|
||||
: data.outputStatus === 'other_show'
|
||||
? 'Mit einer anderen Sendung verbunden'
|
||||
: 'Nicht verbunden'}</small
|
||||
>
|
||||
<AppIcon name="chevron-right" />
|
||||
</summary>
|
||||
<div class="live-output-settings-body">
|
||||
<p>Der OBS-Ausgabekanal ändert sich erst durch eine der folgenden Aktionen.</p>
|
||||
<form method="POST" action={liveAction('createOutput')} use:enhance={enhanceOutput}>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<button class="secondary-button" type="submit">
|
||||
{data.outputStatus === 'connected'
|
||||
? 'Ausgabe öffnen'
|
||||
: 'Mit dieser Sendung verbinden und öffnen'}
|
||||
</button>
|
||||
</form>
|
||||
{#if data.outputStatus === 'connected'}
|
||||
<form
|
||||
method="POST"
|
||||
action={liveAction('rotateOutput')}
|
||||
use:enhance={enhanceOutput}
|
||||
onsubmit={(event) => {
|
||||
if (
|
||||
!confirm(
|
||||
'Schlüssel erneuern? Bereits eingerichtete OBS-Quellen verlieren den Zugriff.'
|
||||
)
|
||||
)
|
||||
event.preventDefault();
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="showId" value={data.live.show.id} />
|
||||
<button class="text-button" type="submit">Schlüssel erneuern</button>
|
||||
</form>
|
||||
<form
|
||||
method="POST"
|
||||
action={liveAction('clearOutput')}
|
||||
use:enhance={enhanceCommand}
|
||||
onsubmit={(event) => {
|
||||
if (
|
||||
!confirm(
|
||||
'Ausgabekanal trennen? Verbundene Browserquellen zeigen anschließend keine Sendung.'
|
||||
)
|
||||
)
|
||||
event.preventDefault();
|
||||
}}
|
||||
>
|
||||
<button class="text-button danger-text" type="submit">Kanal trennen</button>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
<nav class="live-menu-navigation" aria-label="Liveansicht verlassen">
|
||||
<a href={resolve('/sendungen/[id]', { id: data.live.show.id })}
|
||||
><AppIcon name="arrow-left" /> Zur Planung</a
|
||||
>
|
||||
<small>Die Sendung und öffentliche Ausgabe laufen unverändert weiter.</small>
|
||||
</nav>
|
||||
</div>{/if}
|
||||
|
||||
<div class="live-messages">
|
||||
|
||||
@@ -22,7 +22,8 @@ import { deleteFeedSource, fetchFeed, listFeedSources, saveFeedSource } from '#l
|
||||
import {
|
||||
createTechnicalAccess,
|
||||
listTechnicalAccesses,
|
||||
revokeTechnicalAccess
|
||||
revokeTechnicalAccess,
|
||||
updateTechnicalAccess
|
||||
} from '#lib/server/technical-access.js';
|
||||
import {
|
||||
inviteUser,
|
||||
@@ -343,6 +344,21 @@ export const actions = {
|
||||
return fail(400, { intent: 'technicalAccess', error: actionError(cause) });
|
||||
}
|
||||
},
|
||||
updateTechnicalAccess: async ({ locals, request }) => {
|
||||
const actor = requireBarkeeper(locals.user);
|
||||
const data = await request.formData();
|
||||
try {
|
||||
updateTechnicalAccess(
|
||||
actor,
|
||||
String(data.get('accessId') || ''),
|
||||
String(data.get('name') || ''),
|
||||
String(data.get('permissions') || '')
|
||||
);
|
||||
return { intent: 'technicalAccess', success: 'Technischer Zugang aktualisiert.' };
|
||||
} catch (cause) {
|
||||
return fail(400, { intent: 'technicalAccess', error: actionError(cause) });
|
||||
}
|
||||
},
|
||||
revokeTechnicalAccess: async ({ locals, request }) => {
|
||||
const actor = requireBarkeeper(locals.user);
|
||||
const data = await request.formData();
|
||||
|
||||
@@ -1,12 +1,19 @@
|
||||
<script lang="ts">
|
||||
import { resolve } from '$app/paths';
|
||||
import AppIcon from '#lib/components/AppIcon.svelte';
|
||||
import FeedEditorDialog from '#lib/components/FeedEditorDialog.svelte';
|
||||
import IconPicker from '#lib/components/IconPicker.svelte';
|
||||
import ShareManagement from '#lib/components/ShareManagement.svelte';
|
||||
import TechnicalAccessDialog from '#lib/components/TechnicalAccessDialog.svelte';
|
||||
import ToolEditorDialog from '#lib/components/ToolEditorDialog.svelte';
|
||||
import type { PageProps } from './$types';
|
||||
let { data, form }: PageProps = $props();
|
||||
let toolDialog: { showModal: (tool?: (typeof data.tools)[number] | null) => void };
|
||||
let feedDialog: { showModal: (feed?: (typeof data.feeds)[number] | null) => void };
|
||||
let technicalAccessDialog: {
|
||||
showModal: (access?: (typeof data.technicalAccesses)[number] | null) => void;
|
||||
};
|
||||
let managementIntent = $derived(form?.intent?.toLowerCase() ?? '');
|
||||
|
||||
function confirmTaxonomyRemoval(event: SubmitEvent) {
|
||||
if (!confirm('Eintrag wirklich entfernen?')) event.preventDefault();
|
||||
@@ -20,124 +27,60 @@
|
||||
<h1>Verwaltung</h1>
|
||||
<p class="page-intro">Konten, Werkzeuge und bestehende Taxonomie verwalten.</p>
|
||||
</header>
|
||||
{#if form?.error && !form.intent?.toLowerCase().includes('share')}<div
|
||||
{#if form?.error && !['share', 'technicalaccess'].some( (intent) => managementIntent.includes(intent) )}<div
|
||||
class="form-message error"
|
||||
role="alert"
|
||||
>
|
||||
{form.error}
|
||||
</div>{/if}
|
||||
{#if form?.success && !form.intent?.toLowerCase().includes('share')}<div
|
||||
{#if form?.success && !['share', 'technicalaccess'].some( (intent) => managementIntent.includes(intent) )}<div
|
||||
class="form-message success"
|
||||
role="status"
|
||||
>
|
||||
{form.success}
|
||||
</div>{/if}
|
||||
<h2 class="section-heading">Schnittstellen</h2>
|
||||
<section class="quiet-panel integration-panel">
|
||||
<section class="quiet-panel integration-catalog">
|
||||
<div class="panel-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Import</p>
|
||||
<h2>RSS-Feeds</h2>
|
||||
</div>
|
||||
<span>{data.feeds.length} eingerichtet</span>
|
||||
<button class="compact-add-button" type="button" onclick={() => feedDialog.showModal()}>
|
||||
<AppIcon name="plus" /> Feed hinzufügen
|
||||
</button>
|
||||
</div>
|
||||
<p>
|
||||
<p class="catalog-note">
|
||||
Aktive Feeds werden im gewählten Intervall abgerufen. Beiträge landen zuerst separat im
|
||||
Eingang.
|
||||
</p>
|
||||
<details class="integration-create">
|
||||
<summary class="compact-add-button"><AppIcon name="plus" /> Feed hinzufügen</summary>
|
||||
<form class="integration-form" method="POST" action="?/saveFeed">
|
||||
<label>Name<input name="name" required maxlength="120" /></label>
|
||||
<label
|
||||
>Feed-URL<input
|
||||
name="url"
|
||||
type="url"
|
||||
required
|
||||
maxlength="2000"
|
||||
placeholder="https://example.org/feed.xml"
|
||||
/></label
|
||||
>
|
||||
<label
|
||||
>Intervall in Minuten<input
|
||||
name="refreshIntervalMinutes"
|
||||
type="number"
|
||||
min="15"
|
||||
max="10080"
|
||||
value="60"
|
||||
required
|
||||
/></label
|
||||
>
|
||||
<label
|
||||
>Standardkategorie<select name="defaultCategoryId"
|
||||
><option value="">Keine</option
|
||||
>{#each data.taxonomy.categories as category (category.id)}<option value={category.id}
|
||||
>{category.name}</option
|
||||
>{/each}</select
|
||||
></label
|
||||
>
|
||||
<label class="check-row"
|
||||
><input type="checkbox" name="isEnabled" value="1" checked /> Automatisch abrufen</label
|
||||
>
|
||||
<button class="primary-button" type="submit">Feed anlegen</button>
|
||||
</form>
|
||||
</details>
|
||||
<div class="integration-list">
|
||||
<div class="catalog-settings-list integration-settings-list">
|
||||
{#each data.feeds as feed (feed.id)}
|
||||
<details>
|
||||
<summary
|
||||
><span
|
||||
><strong>{feed.name}</strong><small
|
||||
<article class:inactive={!feed.isEnabled} class="catalog-setting-row">
|
||||
<button
|
||||
class="catalog-entry-main"
|
||||
type="button"
|
||||
aria-label={`${feed.name} bearbeiten`}
|
||||
onclick={() => feedDialog.showModal(feed)}
|
||||
>
|
||||
<span class="catalog-entry-icon"><AppIcon name="rss" /></span>
|
||||
<span class="catalog-entry-copy">
|
||||
<strong>{feed.name}</strong>
|
||||
<small
|
||||
>{feed.lastError
|
||||
? `Fehler: ${feed.lastError}`
|
||||
: feed.lastFetchedAtUtc
|
||||
? `Zuletzt: ${new Date(feed.lastFetchedAtUtc).toLocaleString('de-DE')}`
|
||||
: 'Noch nicht abgerufen'}</small
|
||||
></span
|
||||
><AppIcon name="pen" /></summary
|
||||
>
|
||||
<form class="integration-form" method="POST" action="?/saveFeed">
|
||||
<input type="hidden" name="feedId" value={feed.id} />
|
||||
<label>Name<input name="name" required maxlength="120" value={feed.name} /></label>
|
||||
<label
|
||||
>Feed-URL<input
|
||||
name="url"
|
||||
type="url"
|
||||
required
|
||||
maxlength="2000"
|
||||
value={feed.url}
|
||||
/></label
|
||||
>
|
||||
<label
|
||||
>Intervall in Minuten<input
|
||||
name="refreshIntervalMinutes"
|
||||
type="number"
|
||||
min="15"
|
||||
max="10080"
|
||||
value={feed.refreshIntervalMinutes}
|
||||
required
|
||||
/></label
|
||||
>
|
||||
<label
|
||||
>Standardkategorie<select name="defaultCategoryId"
|
||||
><option value="">Keine</option
|
||||
>{#each data.taxonomy.categories as category (category.id)}<option
|
||||
value={category.id}
|
||||
selected={feed.defaultCategoryId === category.id}>{category.name}</option
|
||||
>{/each}</select
|
||||
></label
|
||||
>
|
||||
<label class="check-row"
|
||||
><input type="checkbox" name="isEnabled" value="1" checked={feed.isEnabled} /> Automatisch
|
||||
abrufen</label
|
||||
>
|
||||
<button class="secondary-button" type="submit">Speichern</button>
|
||||
</form>
|
||||
<div class="row-actions">
|
||||
? `Zuletzt ${new Date(feed.lastFetchedAtUtc).toLocaleString('de-DE')}`
|
||||
: 'Noch nicht abgerufen'} · {feed.isEnabled ? 'Automatisch' : 'Pausiert'}</small
|
||||
>
|
||||
</span>
|
||||
<AppIcon name="pen" />
|
||||
</button>
|
||||
<div class="catalog-entry-actions">
|
||||
<form method="POST" action="?/fetchFeed">
|
||||
<input type="hidden" name="feedId" value={feed.id} /><button
|
||||
class="text-button"
|
||||
type="submit">Jetzt abrufen</button
|
||||
<input type="hidden" name="feedId" value={feed.id} />
|
||||
<button type="submit" aria-label={`${feed.name} jetzt abrufen`} title="Jetzt abrufen"
|
||||
><AppIcon name="arrow-rotate-right" /></button
|
||||
>
|
||||
</form>
|
||||
<form
|
||||
@@ -146,74 +89,82 @@
|
||||
onsubmit={(event) =>
|
||||
!confirm('Feed und seinen Importeingang löschen?') && event.preventDefault()}
|
||||
>
|
||||
<input type="hidden" name="feedId" value={feed.id} /><button
|
||||
class="text-button danger-text"
|
||||
type="submit">Feed löschen</button
|
||||
<input type="hidden" name="feedId" value={feed.id} />
|
||||
<button
|
||||
class="danger-text"
|
||||
type="submit"
|
||||
aria-label={`${feed.name} löschen`}
|
||||
title="Feed löschen"><AppIcon name="trash" /></button
|
||||
>
|
||||
</form>
|
||||
</div>
|
||||
</details>
|
||||
</article>
|
||||
{/each}
|
||||
{#if !data.feeds.length}<p class="empty-copy">Noch keine RSS-Feeds eingerichtet.</p>{/if}
|
||||
</div>
|
||||
</section>
|
||||
<FeedEditorDialog bind:this={feedDialog} categories={data.taxonomy.categories} />
|
||||
|
||||
<section class="quiet-panel integration-panel">
|
||||
<section class="quiet-panel integration-catalog">
|
||||
<div class="panel-heading">
|
||||
<div>
|
||||
<p class="eyebrow">Externe Assistenz</p>
|
||||
<h2>Technische Zugänge</h2>
|
||||
</div>
|
||||
<a href={resolve('/api/v1/openapi.json')} target="_blank">OpenAPI</a>
|
||||
<button
|
||||
class="compact-add-button"
|
||||
type="button"
|
||||
onclick={() => technicalAccessDialog.showModal()}
|
||||
>
|
||||
<AppIcon name="plus" /> Zugang hinzufügen
|
||||
</button>
|
||||
</div>
|
||||
<p>
|
||||
<p class="catalog-note">
|
||||
Tokens gelten ausschließlich für die API. Schreibende Aufrufe werden protokolliert und müssen
|
||||
idempotent sein.
|
||||
idempotent sein. <a href={resolve('/api/v1/openapi.json')} target="_blank">OpenAPI öffnen</a>
|
||||
</p>
|
||||
{#if form?.technicalToken}<div class="token-reveal" role="status">
|
||||
<strong>Token, einmalig sichtbar</strong><code>{form.technicalToken}</code>
|
||||
</div>{/if}
|
||||
<details class="integration-create">
|
||||
<summary class="compact-add-button"><AppIcon name="plus" /> Zugang hinzufügen</summary>
|
||||
<form class="integration-form" method="POST" action="?/createTechnicalAccess">
|
||||
<label
|
||||
>Name<input
|
||||
name="name"
|
||||
required
|
||||
maxlength="120"
|
||||
placeholder="Redaktionsassistenz"
|
||||
/></label
|
||||
>
|
||||
<label
|
||||
>Berechtigung<select name="permissions"
|
||||
><option value="read">Nur lesen</option><option value="read_write"
|
||||
>Lesen und schreiben</option
|
||||
></select
|
||||
></label
|
||||
>
|
||||
<button class="primary-button" type="submit">Zugang anlegen</button>
|
||||
</form>
|
||||
</details>
|
||||
<div class="integration-list">
|
||||
<div class="catalog-settings-list integration-settings-list">
|
||||
{#each data.technicalAccesses as access (access.id)}
|
||||
<div class="access-row">
|
||||
<span
|
||||
><strong>{access.name}</strong><small
|
||||
>{access.permissions === 'read' ? 'Nur lesen' : 'Lesen und schreiben'} · {access.revokedAtUtc
|
||||
? 'Widerrufen'
|
||||
: access.lastUsedAtUtc
|
||||
? `Zuletzt genutzt ${new Date(access.lastUsedAtUtc).toLocaleString('de-DE')}`
|
||||
: 'Noch nicht genutzt'}</small
|
||||
></span
|
||||
>{#if !access.revokedAtUtc}<form method="POST" action="?/revokeTechnicalAccess">
|
||||
<input type="hidden" name="accessId" value={access.id} /><button
|
||||
class="secondary-button"
|
||||
type="submit">Widerrufen</button
|
||||
<article class:inactive={Boolean(access.revokedAtUtc)} class="catalog-setting-row">
|
||||
<button
|
||||
class="catalog-entry-main"
|
||||
type="button"
|
||||
disabled={Boolean(access.revokedAtUtc)}
|
||||
aria-label={`${access.name} bearbeiten`}
|
||||
onclick={() => technicalAccessDialog.showModal(access)}
|
||||
>
|
||||
<span class="catalog-entry-icon"><AppIcon name="key" /></span>
|
||||
<span class="catalog-entry-copy">
|
||||
<strong>{access.name}</strong>
|
||||
<small
|
||||
>{access.permissions === 'read' ? 'Nur lesen' : 'Lesen und schreiben'} · {access.revokedAtUtc
|
||||
? 'Widerrufen'
|
||||
: access.lastUsedAtUtc
|
||||
? `Zuletzt genutzt ${new Date(access.lastUsedAtUtc).toLocaleString('de-DE')}`
|
||||
: 'Noch nicht genutzt'}</small
|
||||
>
|
||||
</form>{/if}
|
||||
</div>
|
||||
</span>
|
||||
{#if !access.revokedAtUtc}<AppIcon name="pen" />{/if}
|
||||
</button>
|
||||
{#if !access.revokedAtUtc}<div class="catalog-entry-actions">
|
||||
<form method="POST" action="?/revokeTechnicalAccess">
|
||||
<input type="hidden" name="accessId" value={access.id} />
|
||||
<button
|
||||
class="danger-text"
|
||||
type="submit"
|
||||
aria-label={`${access.name} widerrufen`}
|
||||
title="Zugang widerrufen"><AppIcon name="ban" /></button
|
||||
>
|
||||
</form>
|
||||
</div>{/if}
|
||||
</article>
|
||||
{/each}
|
||||
{#if !data.technicalAccesses.length}<p class="empty-copy">
|
||||
Noch keine technischen Zugänge angelegt.
|
||||
</p>{/if}
|
||||
</div>
|
||||
</section>
|
||||
<TechnicalAccessDialog bind:this={technicalAccessDialog} {form} />
|
||||
|
||||
<section class="quiet-panel account-panel">
|
||||
<div class="panel-heading">
|
||||
@@ -457,78 +408,11 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.integration-panel {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
.integration-catalog {
|
||||
margin-block: 1.5rem;
|
||||
padding: clamp(0.85rem, 2vw, 1.2rem);
|
||||
}
|
||||
.integration-form {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
|
||||
gap: 0.8rem;
|
||||
align-items: end;
|
||||
}
|
||||
.integration-create > summary {
|
||||
width: fit-content;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
}
|
||||
.integration-create > summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
.integration-create[open] > .integration-form {
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
.integration-form label:not(.check-row) {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
.check-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
min-height: 2.6rem;
|
||||
}
|
||||
.integration-list {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.integration-list details,
|
||||
.access-row {
|
||||
padding: 0.75rem 0.8rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-medium);
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
.integration-list summary,
|
||||
.access-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
.integration-list summary > span,
|
||||
.access-row > span {
|
||||
display: grid;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
.integration-list small {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.row-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
.token-reveal {
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
padding: 0.8rem;
|
||||
border: 2px solid var(--color-accent);
|
||||
border-radius: 0.7rem;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.token-reveal code {
|
||||
user-select: all;
|
||||
.integration-catalog .catalog-note a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user