220 lines
10 KiB
HTML
220 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="cs">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Scenár Creator</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/static/css/app.css">
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<div class="header-left">
|
|
<h1 class="header-title">Scenár Creator</h1>
|
|
<span class="header-version">v4.0</span>
|
|
</div>
|
|
<div class="header-actions">
|
|
<label class="btn btn-secondary btn-sm" id="importJsonBtn">
|
|
<input type="file" accept=".json" id="importJsonInput" hidden>
|
|
Import JSON
|
|
</label>
|
|
<button class="btn btn-secondary btn-sm" id="newScenarioBtn">Nový scénář</button>
|
|
<button class="btn btn-secondary btn-sm" id="exportJsonBtn">Export JSON</button>
|
|
<button class="btn btn-primary btn-sm" id="generatePdfBtn">Generovat PDF</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="tabs">
|
|
<button class="tab active" data-tab="editor">Editor</button>
|
|
<button class="tab" data-tab="docs">Dokumentace</button>
|
|
</div>
|
|
|
|
<div class="tab-content" id="tab-editor">
|
|
<div class="app-layout">
|
|
<aside class="sidebar">
|
|
<section class="sidebar-section">
|
|
<h3 class="sidebar-heading">Informace o akci</h3>
|
|
<div class="form-group">
|
|
<label>Název</label>
|
|
<input type="text" id="eventTitle" placeholder="Název akce">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Podtitul</label>
|
|
<input type="text" id="eventSubtitle" placeholder="Podtitul">
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Od</label>
|
|
<input type="date" id="eventDateFrom">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Do</label>
|
|
<input type="date" id="eventDateTo">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Místo</label>
|
|
<input type="text" id="eventLocation" placeholder="Místo konání">
|
|
</div>
|
|
</section>
|
|
|
|
<section class="sidebar-section">
|
|
<h3 class="sidebar-heading">Typy programů</h3>
|
|
<div id="programTypesContainer"></div>
|
|
<button class="btn btn-secondary btn-xs" id="addTypeBtn">+ Přidat typ</button>
|
|
</section>
|
|
|
|
<section class="sidebar-section">
|
|
<button class="btn btn-primary btn-block" id="addBlockBtn">+ Přidat blok</button>
|
|
</section>
|
|
</aside>
|
|
|
|
<main class="canvas-wrapper">
|
|
<div id="canvasScrollArea" class="canvas-scroll-area">
|
|
<div id="timeAxis" class="time-axis-row"></div>
|
|
<div id="dayRows" class="day-rows"></div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Documentation tab -->
|
|
<div class="tab-content hidden" id="tab-docs">
|
|
<div class="docs-container">
|
|
<h2>Dokumentace — Scenár Creator v4</h2>
|
|
|
|
<h3>Jak začít</h3>
|
|
<ol>
|
|
<li><strong>Nový scénář</strong> — klikněte na "Nový scénář" v záhlaví.</li>
|
|
<li><strong>Import JSON</strong> — klikněte na "Import JSON" a vyberte uložený .json soubor.</li>
|
|
</ol>
|
|
|
|
<h3>Nastavení akce</h3>
|
|
<p>V postranním panelu nastavte:</p>
|
|
<ul>
|
|
<li><strong>Od / Do</strong> — rozsah dat akce. Každý den se zobrazí jako jeden řádek v editoru.</li>
|
|
<li>Jedno datum = jednodnenní akce, více datumů = vícedenní kurz.</li>
|
|
</ul>
|
|
|
|
<h3>Práce s bloky</h3>
|
|
<ul>
|
|
<li><strong>Přidání bloku:</strong> Klikněte na "+ Přidat blok" nebo klikněte na prázdné místo v časové ose.</li>
|
|
<li><strong>Přesun bloku:</strong> Chytněte blok a táhněte doleva/doprava po časové ose. Snap na 15 min.</li>
|
|
<li><strong>Změna délky:</strong> Chytněte pravý okraj bloku a táhněte.</li>
|
|
<li><strong>Úprava bloku:</strong> Klikněte na blok.</li>
|
|
<li><strong>Smazání bloku:</strong> V editačním okně klikněte na "Smazat blok".</li>
|
|
</ul>
|
|
|
|
<h3>Čas bloku</h3>
|
|
<ul>
|
|
<li>Zadejte <strong>Začátek</strong> a <strong>Konec</strong> (HH:MM).</li>
|
|
<li>Nebo zadejte <strong>Začátek</strong> a <strong>Trvání</strong> (HH:MM) — konec se vypočítá automaticky.</li>
|
|
<li>Lze zadat i <strong>program přes půlnoc</strong> — konec může být menší než začátek (např. 23:00 → 01:30).</li>
|
|
</ul>
|
|
|
|
<h3>Typy programů a barvy</h3>
|
|
<ul>
|
|
<li>Přidejte typ kliknutím na "+ Přidat typ".</li>
|
|
<li>Nastavte název a barvu pomocí barevného výběru.</li>
|
|
</ul>
|
|
|
|
<h3>Export</h3>
|
|
<ul>
|
|
<li><strong>Export JSON</strong> — uloží scénář jako .json soubor pro pozdější použití.</li>
|
|
<li><strong>Generovat PDF</strong> — vytvoří tisknutelný PDF timetable (A4, jedna stránka, barvy, legenda).</li>
|
|
<li><strong>Vzorový JSON</strong> — <a href="/api/sample">stáhnout sample.json</a></li>
|
|
</ul>
|
|
|
|
<h3>Formát JSON</h3>
|
|
<table class="docs-table">
|
|
<thead><tr><th>Pole</th><th>Typ</th><th>Popis</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>event.title</td><td>string</td><td>Název akce</td></tr>
|
|
<tr><td>event.date_from</td><td>string</td><td>Začátek akce (YYYY-MM-DD)</td></tr>
|
|
<tr><td>event.date_to</td><td>string</td><td>Konec akce (YYYY-MM-DD)</td></tr>
|
|
<tr><td>event.location</td><td>string?</td><td>Místo konání</td></tr>
|
|
<tr><td>program_types[].id</td><td>string</td><td>Unikátní ID typu</td></tr>
|
|
<tr><td>program_types[].name</td><td>string</td><td>Název typu</td></tr>
|
|
<tr><td>program_types[].color</td><td>string</td><td>Barva (#RRGGBB)</td></tr>
|
|
<tr><td>blocks[].date</td><td>string</td><td>Datum bloku (YYYY-MM-DD)</td></tr>
|
|
<tr><td>blocks[].start</td><td>string</td><td>Začátek (HH:MM)</td></tr>
|
|
<tr><td>blocks[].end</td><td>string</td><td>Konec (HH:MM) — může být < start pro přes-půlnoční blok</td></tr>
|
|
<tr><td>blocks[].title</td><td>string</td><td>Název bloku</td></tr>
|
|
<tr><td>blocks[].type_id</td><td>string</td><td>ID typu programu</td></tr>
|
|
<tr><td>blocks[].responsible</td><td>string?</td><td>Garant</td></tr>
|
|
<tr><td>blocks[].notes</td><td>string?</td><td>Poznámka</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3>API dokumentace</h3>
|
|
<p><a href="/docs" class="btn btn-secondary btn-sm" target="_blank">Swagger UI</a></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Block edit/create modal -->
|
|
<div class="modal-overlay hidden" id="blockModal">
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<h3 id="modalTitle">Upravit blok</h3>
|
|
<button class="modal-close" id="modalClose">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="hidden" id="modalBlockId">
|
|
<div class="form-group">
|
|
<label>Název bloku</label>
|
|
<input type="text" id="modalBlockTitle" placeholder="Název">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Den</label>
|
|
<input type="date" id="modalBlockDate">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Typ programu</label>
|
|
<select id="modalBlockType"></select>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label>Začátek</label>
|
|
<input type="time" id="modalBlockStart">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Konec</label>
|
|
<input type="time" id="modalBlockEnd">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Nebo trvání</label>
|
|
<input type="text" id="modalBlockDuration" placeholder="HH:MM (např. 1:30)">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Garant</label>
|
|
<input type="text" id="modalBlockResponsible" placeholder="Garant">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Poznámka</label>
|
|
<textarea id="modalBlockNotes" rows="3" placeholder="Poznámka"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-danger btn-sm" id="modalDeleteBtn">Smazat blok</button>
|
|
<button class="btn btn-primary btn-sm" id="modalSaveBtn">Uložit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status toast -->
|
|
<div class="toast hidden" id="toast"></div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/interactjs@1.10.27/dist/interact.min.js"></script>
|
|
<script src="/static/js/api.js"></script>
|
|
<script src="/static/js/canvas.js"></script>
|
|
<script src="/static/js/export.js"></script>
|
|
<script src="/static/js/app.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => App.init());
|
|
</script>
|
|
</body>
|
|
</html>
|