You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
610 lines
16 KiB
610 lines
16 KiB
<script>
|
|
import { onMount } from 'svelte';
|
|
import { push } from 'svelte-spa-router';
|
|
import { auth } from '../lib/stores/auth.js';
|
|
import { navContext } from '../lib/stores/navContext.js';
|
|
import { fetchDeckWithQuestions, updateDeck, togglePublished, deleteDeck } from '../lib/api/decks.js';
|
|
import { DEFAULT_DECK_CONFIG } from '../lib/deckConfig.js';
|
|
import QuestionEditor from '../lib/QuestionEditor.svelte';
|
|
import ConfirmModal from '../lib/ConfirmModal.svelte';
|
|
|
|
onMount(() => {
|
|
navContext.set('my-decks');
|
|
});
|
|
|
|
export let params = {};
|
|
$: deckId = params?.id;
|
|
|
|
let title = '';
|
|
let description = '';
|
|
let config = { ...DEFAULT_DECK_CONFIG };
|
|
let published = false;
|
|
let questions = [];
|
|
let loading = true;
|
|
let saving = false;
|
|
let error = null;
|
|
let showDeleteConfirm = false;
|
|
let showJsonModal = false;
|
|
let jsonEditText = '';
|
|
let jsonModalError = null;
|
|
let isCopiedDeck = false;
|
|
|
|
const CONFIG_KEYS = Object.keys(DEFAULT_DECK_CONFIG);
|
|
|
|
$: userId = $auth.user?.id;
|
|
|
|
let prevDeckId = '';
|
|
$: if (deckId && userId && deckId !== prevDeckId) {
|
|
prevDeckId = deckId;
|
|
load();
|
|
} else if (!deckId || !userId) {
|
|
loading = false;
|
|
}
|
|
|
|
async function load() {
|
|
if (!deckId) return;
|
|
loading = true;
|
|
error = null;
|
|
try {
|
|
const deck = await fetchDeckWithQuestions(deckId);
|
|
if (deck.owner_id !== userId) {
|
|
push('/');
|
|
return;
|
|
}
|
|
title = deck.title ?? '';
|
|
description = deck.description ?? '';
|
|
config = { ...DEFAULT_DECK_CONFIG, ...(deck.config || {}) };
|
|
published = !!deck.published;
|
|
isCopiedDeck = !!deck.copied_from_deck_id;
|
|
questions = (deck.questions || []).map((q) => ({
|
|
prompt: q.prompt ?? '',
|
|
explanation: q.explanation ?? '',
|
|
answers: Array.isArray(q.answers) ? [...q.answers] : [''],
|
|
correct_answer_indices: Array.isArray(q.correct_answer_indices) ? [...q.correct_answer_indices] : [0],
|
|
}));
|
|
if (questions.length === 0) {
|
|
questions = [{ prompt: '', explanation: '', answers: [''], correct_answer_indices: [0] }];
|
|
}
|
|
} catch (e) {
|
|
error = e?.message ?? 'Failed to load deck';
|
|
questions = [{ prompt: '', explanation: '', answers: [''], correct_answer_indices: [0] }];
|
|
isCopiedDeck = false;
|
|
} finally {
|
|
loading = false;
|
|
}
|
|
}
|
|
|
|
function addQuestion() {
|
|
questions = [...questions, { prompt: '', explanation: '', answers: [''], correct_answer_indices: [0] }];
|
|
}
|
|
|
|
function removeQuestion(i) {
|
|
questions = questions.filter((_, idx) => idx !== i);
|
|
if (questions.length === 0) {
|
|
questions = [{ prompt: '', explanation: '', answers: [''], correct_answer_indices: [0] }];
|
|
}
|
|
}
|
|
|
|
function normalizeQuestion(q) {
|
|
const answers = (q.answers || []).map((a) => String(a).trim()).filter(Boolean);
|
|
if (answers.length === 0) return null;
|
|
const indices = (q.correct_answer_indices ?? [0]).filter((i) => i >= 0 && i < answers.length);
|
|
return {
|
|
prompt: (q.prompt ?? '').trim(),
|
|
explanation: (q.explanation ?? '').trim() || null,
|
|
answers,
|
|
correct_answer_indices: indices.length ? indices : [0],
|
|
};
|
|
}
|
|
|
|
async function save() {
|
|
const t = title.trim();
|
|
if (!t) {
|
|
error = 'Title is required';
|
|
return;
|
|
}
|
|
if (!userId || !deckId) return;
|
|
const normalized = questions.map(normalizeQuestion).filter(Boolean);
|
|
if (normalized.length === 0) {
|
|
error = 'Add at least one question with at least one answer';
|
|
return;
|
|
}
|
|
saving = true;
|
|
error = null;
|
|
try {
|
|
await updateDeck(deckId, {
|
|
title: t,
|
|
description: description.trim(),
|
|
config,
|
|
questions: normalized,
|
|
});
|
|
push('/');
|
|
} catch (e) {
|
|
error = e?.message ?? 'Failed to save deck';
|
|
} finally {
|
|
saving = false;
|
|
}
|
|
}
|
|
|
|
async function togglePublish() {
|
|
if (!deckId) return;
|
|
try {
|
|
await togglePublished(deckId, !published);
|
|
published = !published;
|
|
} catch (e) {
|
|
error = e?.message ?? 'Failed to update publish status';
|
|
}
|
|
}
|
|
|
|
function openDeleteConfirm() {
|
|
if (!deckId) return;
|
|
showDeleteConfirm = true;
|
|
}
|
|
|
|
function closeDeleteConfirm() {
|
|
showDeleteConfirm = false;
|
|
}
|
|
|
|
async function confirmRemove() {
|
|
if (!deckId) return;
|
|
closeDeleteConfirm();
|
|
try {
|
|
await deleteDeck(deckId);
|
|
push('/');
|
|
} catch (e) {
|
|
error = e?.message ?? 'Failed to delete deck';
|
|
}
|
|
}
|
|
|
|
function cancel() {
|
|
push('/');
|
|
}
|
|
|
|
function openJsonModal() {
|
|
jsonEditText = getDeckJson();
|
|
jsonModalError = null;
|
|
showJsonModal = true;
|
|
}
|
|
|
|
function closeJsonModal() {
|
|
showJsonModal = false;
|
|
}
|
|
|
|
function getDeckJson() {
|
|
const normalized = questions.map(normalizeQuestion).filter(Boolean);
|
|
const payload = {
|
|
title: title.trim(),
|
|
description: description.trim(),
|
|
config: { ...config },
|
|
questions: normalized,
|
|
};
|
|
return JSON.stringify(payload, null, 2);
|
|
}
|
|
|
|
async function copyJsonToClipboard() {
|
|
try {
|
|
await navigator.clipboard.writeText(getDeckJson());
|
|
closeJsonModal();
|
|
} catch (_) {}
|
|
}
|
|
</script>
|
|
|
|
<header class="page-header page-header-fixed">
|
|
<div class="page-header-inner">
|
|
<h1 class="page-header-title">Edit deck</h1>
|
|
<div class="header-actions">
|
|
{#if loading}
|
|
<span class="header-spinner" aria-hidden="true"></span>
|
|
{:else}
|
|
<button type="button" class="btn btn-secondary btn-icon-text" onclick={openJsonModal} disabled={saving} title="See JSON">
|
|
<span class="btn-icon-svg" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5a2 2 0 0 0 2 2h1"/><path d="M16 21h1a2 2 0 0 0 2-2v-5a2 2 0 0 1 2-2 2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"/></svg></span>
|
|
See JSON
|
|
</button>
|
|
<button type="button" class="btn btn-secondary btn-icon-text" onclick={cancel} disabled={saving} title="Cancel">
|
|
<span class="btn-icon-svg" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg></span>
|
|
Cancel
|
|
</button>
|
|
<button type="button" class="btn btn-primary btn-icon-text" onclick={save} disabled={saving} title={saving ? 'Saving…' : 'Save'}>
|
|
<span class="btn-icon-svg" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg></span>
|
|
{saving ? 'Saving…' : 'Save'}
|
|
</button>
|
|
<button type="button" class="btn btn-danger btn-icon-only" onclick={openDeleteConfirm} disabled={saving} title="Delete deck" aria-label="Delete deck">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="page page-with-fixed-header">
|
|
{#if $auth.loading}
|
|
<p class="muted">Loading…</p>
|
|
{:else if !userId}
|
|
<p class="auth-required">Sign in to edit decks.</p>
|
|
{:else if loading}
|
|
<div class="loading-state" aria-busy="true" aria-live="polite">
|
|
<span class="loading-spinner" aria-hidden="true"></span>
|
|
<p class="loading-text">Loading deck…</p>
|
|
</div>
|
|
{:else}
|
|
<form class="deck-form" onsubmit={(e) => { e.preventDefault(); save(); }}>
|
|
{#if !isCopiedDeck}
|
|
<div class="publish-row">
|
|
<label class="toggle-label">
|
|
<input type="checkbox" checked={published} onchange={togglePublish} />
|
|
Published (visible in Community)
|
|
</label>
|
|
</div>
|
|
{/if}
|
|
<div class="form-group">
|
|
<label for="title">Title</label>
|
|
<input id="title" type="text" class="input" bind:value={title} placeholder="Deck title" required />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="description">Description</label>
|
|
<textarea id="description" class="input textarea" bind:value={description} placeholder="Optional description" rows="2"></textarea>
|
|
</div>
|
|
|
|
<h2 class="section-title">Questions</h2>
|
|
{#each questions as question, i}
|
|
<QuestionEditor bind:question index={i} onRemove={() => removeQuestion(i)} />
|
|
{/each}
|
|
<button type="button" class="btn btn-add-q" onclick={addQuestion}>+ Add question</button>
|
|
|
|
{#if error}
|
|
<p class="error">{error}</p>
|
|
{/if}
|
|
</form>
|
|
{/if}
|
|
|
|
{#if showJsonModal}
|
|
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
|
|
<div
|
|
class="json-modal-backdrop"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label="Deck JSON"
|
|
tabindex="-1"
|
|
onclick={(e) => e.target === e.currentTarget && closeJsonModal()}
|
|
onkeydown={(e) => e.key === 'Escape' && closeJsonModal()}
|
|
>
|
|
<div
|
|
class="json-modal"
|
|
role="document"
|
|
tabindex="-1"
|
|
onclick={(e) => e.stopPropagation()}
|
|
onkeydown={(e) => e.key === 'Escape' && closeJsonModal()}
|
|
>
|
|
<h2 class="json-modal-title">Deck JSON</h2>
|
|
<textarea class="json-modal-textarea" bind:value={jsonEditText} spellcheck="false" aria-label="Edit deck JSON"></textarea>
|
|
{#if jsonModalError}
|
|
<p class="json-modal-error">{jsonModalError}</p>
|
|
{/if}
|
|
<div class="json-modal-actions">
|
|
<button type="button" class="btn btn-secondary" onclick={closeJsonModal}>Close</button>
|
|
<button type="button" class="btn btn-secondary" onclick={copyJsonToClipboard}>Copy</button>
|
|
<button type="button" class="btn btn-primary" onclick={applyJsonFromModal}>Apply</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<ConfirmModal
|
|
open={showDeleteConfirm}
|
|
title="Delete deck"
|
|
message="Delete this deck? This cannot be undone."
|
|
confirmLabel="Delete"
|
|
cancelLabel="Cancel"
|
|
variant="danger"
|
|
onConfirm={confirmRemove}
|
|
onCancel={closeDeleteConfirm}
|
|
/>
|
|
</div>
|
|
|
|
<style>
|
|
.page {
|
|
padding: 1.5rem;
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.page-with-fixed-header {
|
|
padding-top: calc(var(--navbar-height, 60px) + 3.5rem);
|
|
}
|
|
|
|
.page-header {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.page-header-fixed {
|
|
position: fixed;
|
|
top: var(--navbar-height, 60px);
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 50;
|
|
background: var(--bg, #0f0f0f);
|
|
border-bottom: 1px solid var(--border, #333);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.page-header-inner {
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
padding: 0.75rem 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.page-header-title {
|
|
margin: 0;
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary, #f0f0f0);
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn-icon-text {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.btn-icon-text .btn-icon-svg {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.btn-icon-only {
|
|
padding: 0.5rem;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.header-spinner {
|
|
display: inline-block;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
border: 2px solid var(--border, #333);
|
|
border-top-color: var(--accent, #3b82f6);
|
|
border-radius: 50%;
|
|
animation: header-spin 0.7s linear infinite;
|
|
}
|
|
|
|
@keyframes header-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.publish-row {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.toggle-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.9rem;
|
|
color: var(--text-muted, #a0a0a0);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.toggle-label input {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
|
|
.auth-required,
|
|
.muted {
|
|
margin: 0;
|
|
color: var(--text-muted, #a0a0a0);
|
|
}
|
|
|
|
.deck-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
color: var(--text-muted, #a0a0a0);
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
|
|
.input {
|
|
width: 100%;
|
|
padding: 0.6rem 0.75rem;
|
|
font-size: 0.95rem;
|
|
border: 1px solid var(--border, #333);
|
|
border-radius: 6px;
|
|
background: var(--card-bg, #1e1e1e);
|
|
color: var(--text-primary, #f0f0f0);
|
|
}
|
|
|
|
.textarea {
|
|
resize: vertical;
|
|
min-height: 2.5rem;
|
|
}
|
|
|
|
.section-title {
|
|
margin: 1.5rem 0 0.75rem 0;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary, #f0f0f0);
|
|
}
|
|
|
|
.btn-add-q {
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.9rem;
|
|
border: 1px dashed var(--border, #333);
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--text-muted, #a0a0a0);
|
|
cursor: pointer;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.btn-add-q:hover {
|
|
color: var(--text-primary, #f0f0f0);
|
|
border-color: var(--border-hover, #444);
|
|
}
|
|
|
|
.json-modal-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 100;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.json-modal {
|
|
background: var(--card-bg, #1e1e1e);
|
|
border: 1px solid var(--border, #333);
|
|
border-radius: 8px;
|
|
width: 94vw;
|
|
max-width: 94vw;
|
|
height: 90vh;
|
|
max-height: 90vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.json-modal-title {
|
|
margin: 0;
|
|
padding: 1rem 1.25rem;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary, #f0f0f0);
|
|
border-bottom: 1px solid var(--border, #333);
|
|
}
|
|
|
|
.json-modal-textarea {
|
|
margin: 0;
|
|
padding: 1rem 1.25rem;
|
|
width: 100%;
|
|
min-height: 280px;
|
|
font-family: ui-monospace, monospace;
|
|
font-size: 0.85rem;
|
|
color: var(--text-primary, #f0f0f0);
|
|
background: var(--card-bg, #1e1e1e);
|
|
border: 1px solid var(--border, #333);
|
|
border-radius: 6px;
|
|
resize: vertical;
|
|
flex: 1;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.json-modal-textarea:focus {
|
|
outline: none;
|
|
border-color: var(--accent, #3b82f6);
|
|
}
|
|
|
|
.json-modal-error {
|
|
margin: 0 1.25rem;
|
|
font-size: 0.85rem;
|
|
color: #ef4444;
|
|
}
|
|
|
|
.json-modal-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.5rem;
|
|
padding: 1rem 1.25rem;
|
|
border-top: 1px solid var(--border, #333);
|
|
}
|
|
|
|
.loading-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
min-height: 12rem;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.loading-spinner {
|
|
display: block;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border: 3px solid var(--border, #333);
|
|
border-top-color: var(--accent, #3b82f6);
|
|
border-radius: 50%;
|
|
animation: loading-spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes loading-spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.loading-text {
|
|
margin: 0;
|
|
font-size: 0.95rem;
|
|
color: var(--text-muted, #a0a0a0);
|
|
}
|
|
|
|
.error {
|
|
margin: 0 0 1rem 0;
|
|
font-size: 0.9rem;
|
|
color: #ef4444;
|
|
}
|
|
|
|
.btn {
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
border: 1px solid var(--border, #333);
|
|
border-radius: 6px;
|
|
background: var(--card-bg, #1e1e1e);
|
|
color: var(--text-primary, #f0f0f0);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn:hover:not(:disabled) {
|
|
background: var(--hover-bg, #2a2a2a);
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--accent, #3b82f6);
|
|
border-color: var(--accent, #3b82f6);
|
|
}
|
|
|
|
.btn-primary:hover:not(:disabled) {
|
|
background: #2563eb;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: transparent;
|
|
}
|
|
|
|
.btn-danger {
|
|
background: transparent;
|
|
color: #ef4444;
|
|
border-color: #ef4444;
|
|
}
|
|
|
|
.btn-danger:hover:not(:disabled) {
|
|
background: rgba(239, 68, 68, 0.15);
|
|
}
|
|
</style>
|