feat: v4.0 - multi-day horizontal canvas, duration input, overnight blocks, PDF horizontal layout

app/static/index.html

@@ -13,7 +13,7 @@
     <header class="header">
         <div class="header-left">
             <h1 class="header-title">Scenár Creator</h1>
-            <span class="header-version">v3.0</span>
+            <span class="header-version">v4.0</span>
         </div>
         <div class="header-actions">
             <label class="btn btn-secondary btn-sm" id="importJsonBtn">
@@ -44,9 +44,15 @@
                         <label>Podtitul</label>
                         <input type="text" id="eventSubtitle" placeholder="Podtitul">
                     </div>
-                    <div class="form-group">
-                        <label>Datum</label>
-                        <input type="date" id="eventDate">
+                    <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>
@@ -66,69 +72,75 @@
             </aside>
 
             <main class="canvas-wrapper">
-                <div class="canvas-header" id="canvasHeader"></div>
-                <div class="canvas-scroll">
-                    <div class="canvas" id="canvas">
-                        <div class="time-axis" id="timeAxis"></div>
-                        <div class="day-columns" id="dayColumns"></div>
-                    </div>
+                <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 v3</h2>
+            <h2>Dokumentace — Scenár Creator v4</h2>
 
             <h3>Jak začít</h3>
-            <p>Máte dvě možnosti:</p>
             <ol>
-                <li><strong>Nový scénář</strong> — klikněte na tlačítko "Nový scénář" v záhlaví. Vytvoří se prázdný scénář s jedním dnem.</li>
-                <li><strong>Import JSON</strong> — klikněte na "Import JSON" a vyberte dříve uložený .json soubor. Můžete také přetáhnout JSON soubor přímo na plochu editoru.</li>
+                <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" v postranním panelu, nebo klikněte na prázdné místo na časové ose.</li>
-                <li><strong>Přesun bloku:</strong> Chytněte blok myší a přetáhněte ho na jiný čas. Bloky se přichytávají na 15minutovou mřížku.</li>
-                <li><strong>Změna délky:</strong> Chytněte dolní okraj bloku a tažením změňte dobu trvání.</li>
-                <li><strong>Úprava bloku:</strong> Klikněte na blok pro otevření editačního popup okna, kde můžete upravit název, typ, garanta a poznámku.</li>
-                <li><strong>Smazání bloku:</strong> V editačním popup okně klikněte na tlačítko "Smazat blok".</li>
+                <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>
-            <p>V postranním panelu v sekci "Typy programů" můžete:</p>
             <ul>
-                <li>Přidat nový typ kliknutím na "+ Přidat typ"</li>
-                <li>Pojmenovat typ a vybrat barvu pomocí barevného výběru</li>
-                <li>Odebrat typ kliknutím na tlačítko ×</li>
+                <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 JSON</h3>
-            <p>Kliknutím na "Export JSON" stáhnete aktuální stav scénáře jako .json soubor. Tento soubor můžete později znovu importovat a pokračovat v úpravách.</p>
-
-            <h3>Generování PDF</h3>
-            <p>Kliknutím na "Generovat PDF" se scénář odešle na server a vygeneruje se přehledný PDF dokument ve formátu A4 na šířku s barevnými bloky a legendou.</p>
+            <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>
+                <thead><tr><th>Pole</th><th>Typ</th><th>Popis</th></tr></thead>
                 <tbody>
-                    <tr><td>version</td><td>string</td><td>Verze formátu (1.0)</td></tr>
                     <tr><td>event.title</td><td>string</td><td>Název akce</td></tr>
-                    <tr><td>event.subtitle</td><td>string?</td><td>Podtitul</td></tr>
-                    <tr><td>event.date</td><td>string?</td><td>Datum (YYYY-MM-DD)</td></tr>
-                    <tr><td>event.location</td><td>string?</td><td>Místo</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[].id</td><td>string</td><td>Unikátní ID bloku</td></tr>
-                    <tr><td>blocks[].date</td><td>string</td><td>Datum (YYYY-MM-DD)</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)</td></tr>
+                    <tr><td>blocks[].end</td><td>string</td><td>Konec (HH:MM) — může být &lt; 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>
@@ -136,12 +148,12 @@
                 </tbody>
             </table>
 
-            <h3>Vzorový JSON</h3>
-            <p><a href="/api/sample" class="btn btn-secondary btn-sm">Stáhnout sample.json</a></p>
+            <h3>API dokumentace</h3>
+            <p><a href="/docs" class="btn btn-secondary btn-sm" target="_blank">Swagger UI</a></p>
         </div>
     </div>
 
-    <!-- Block edit modal -->
+    <!-- Block edit/create modal -->
     <div class="modal-overlay hidden" id="blockModal">
         <div class="modal">
             <div class="modal-header">
@@ -154,6 +166,10 @@
                     <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>
@@ -168,6 +184,10 @@
                         <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">
@@ -192,5 +212,8 @@
     <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>