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

app/static/js/app.js

@@ -1,11 +1,11 @@
 /**
- * Main application logic for Scenar Creator v3.
- * State management, UI wiring, modal handling.
+ * Main application logic for Scenar Creator v4.
+ * Multi-day state, duration input, horizontal canvas.
  */
 
 const App = {
     state: {
-        event: { title: '', subtitle: '', date: '', location: '' },
+        event: { title: '', subtitle: '', date_from: '', date_to: '', location: '' },
         program_types: [],
         blocks: []
     },
@@ -15,20 +15,72 @@ const App = {
         this.newScenario();
     },
 
-    // --- State ---
+    // ─── Helpers ───────────────────────────────────────────────────────
+
+    uid() {
+        return 'b_' + Math.random().toString(36).slice(2, 10);
+    },
+
+    parseTimeToMin(str) {
+        if (!str) return 0;
+        const [h, m] = str.split(':').map(Number);
+        return (h || 0) * 60 + (m || 0);
+    },
+
+    minutesToTime(totalMin) {
+        const h = Math.floor(totalMin / 60);
+        const m = totalMin % 60;
+        return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+    },
+
+    // Return sorted list of all dates from date_from to date_to (inclusive)
+    getDates() {
+        const from = this.state.event.date_from || this.state.event.date;
+        const to = this.state.event.date_to || from;
+        if (!from) return [];
+
+        const dates = [];
+        const cur = new Date(from + 'T12:00:00');
+        const end = new Date((to || from) + 'T12:00:00');
+
+        // Safety: max 31 days
+        let safety = 0;
+        while (cur <= end && safety < 31) {
+            dates.push(cur.toISOString().slice(0, 10));
+            cur.setDate(cur.getDate() + 1);
+            safety++;
+        }
+        return dates;
+    },
+
+    // ─── State ────────────────────────────────────────────────────────
 
     getDocument() {
         this.syncEventFromUI();
         return {
             version: '1.0',
-            event: { ...this.state.event },
+            event: {
+                ...this.state.event,
+                date: this.state.event.date_from, // backward compat
+            },
             program_types: this.state.program_types.map(pt => ({ ...pt })),
             blocks: this.state.blocks.map(b => ({ ...b }))
         };
     },
 
     loadDocument(doc) {
-        this.state.event = { ...doc.event };
+        const ev = doc.event || {};
+        // Backward compat: if only date exists, use it as date_from = date_to
+        const date_from = ev.date_from || ev.date || '';
+        const date_to = ev.date_to || date_from;
+
+        this.state.event = {
+            title: ev.title || '',
+            subtitle: ev.subtitle || '',
+            date_from,
+            date_to,
+            location: ev.location || '',
+        };
         this.state.program_types = (doc.program_types || []).map(pt => ({ ...pt }));
         this.state.blocks = (doc.blocks || []).map(b => ({
             ...b,
@@ -40,9 +92,9 @@ const App = {
     },
 
     newScenario() {
-        const today = new Date().toISOString().split('T')[0];
+        const today = new Date().toISOString().slice(0, 10);
         this.state = {
-            event: { title: 'Nová akce', subtitle: '', date: today, location: '' },
+            event: { title: 'Nová akce', subtitle: '', date_from: today, date_to: today, location: '' },
             program_types: [
                 { id: 'main', name: 'Hlavní program', color: '#3B82F6' },
                 { id: 'rest', name: 'Odpočinek', color: '#22C55E' }
@@ -54,23 +106,25 @@ const App = {
         this.renderCanvas();
     },
 
-    // --- Sync sidebar <-> state ---
+    // ─── Sync sidebar <-> state ───────────────────────────────────────
 
     syncEventFromUI() {
         this.state.event.title = document.getElementById('eventTitle').value.trim() || 'Nová akce';
         this.state.event.subtitle = document.getElementById('eventSubtitle').value.trim() || null;
-        this.state.event.date = document.getElementById('eventDate').value || null;
+        this.state.event.date_from = document.getElementById('eventDateFrom').value || null;
+        this.state.event.date_to = document.getElementById('eventDateTo').value || this.state.event.date_from;
         this.state.event.location = document.getElementById('eventLocation').value.trim() || null;
     },
 
     syncEventToUI() {
         document.getElementById('eventTitle').value = this.state.event.title || '';
         document.getElementById('eventSubtitle').value = this.state.event.subtitle || '';
-        document.getElementById('eventDate').value = this.state.event.date || '';
+        document.getElementById('eventDateFrom').value = this.state.event.date_from || '';
+        document.getElementById('eventDateTo').value = this.state.event.date_to || this.state.event.date_from || '';
         document.getElementById('eventLocation').value = this.state.event.location || '';
     },
 
-    // --- Program types ---
+    // ─── Program types ────────────────────────────────────────────────
 
     renderTypes() {
         const container = document.getElementById('programTypesContainer');
@@ -83,16 +137,13 @@ const App = {
                 <input type="text" value="${pt.name}" placeholder="Název typu" data-idx="${i}">
                 <button class="type-remove" data-idx="${i}">&times;</button>
             `;
-            // Color change
             row.querySelector('input[type="color"]').addEventListener('change', (e) => {
                 this.state.program_types[i].color = e.target.value;
                 this.renderCanvas();
             });
-            // Name change
             row.querySelector('input[type="text"]').addEventListener('change', (e) => {
                 this.state.program_types[i].name = e.target.value.trim();
             });
-            // Remove
             row.querySelector('.type-remove').addEventListener('click', () => {
                 this.state.program_types.splice(i, 1);
                 this.renderTypes();
@@ -102,150 +153,222 @@ const App = {
         });
     },
 
-    addType() {
-        const id = 'type_' + this.uid().substring(0, 6);
-        this.state.program_types.push({
-            id,
-            name: 'Nový typ',
-            color: '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0')
-        });
-        this.renderTypes();
-    },
-
-    // --- Blocks ---
-
-    createBlock(date, start, end) {
-        const typeId = this.state.program_types.length > 0 ? this.state.program_types[0].id : 'main';
-        const block = {
-            id: this.uid(),
-            date: date || this.state.event.date || new Date().toISOString().split('T')[0],
-            start: start || '09:00',
-            end: end || '10:00',
-            title: 'Nový blok',
-            type_id: typeId,
-            responsible: null,
-            notes: null
-        };
-        this.state.blocks.push(block);
-        this.renderCanvas();
-        this.editBlock(block.id);
-    },
-
-    updateBlockTime(blockId, start, end) {
-        const block = this.state.blocks.find(b => b.id === blockId);
-        if (block) {
-            block.start = start;
-            block.end = end;
-            this.renderCanvas();
-        }
-    },
-
-    deleteBlock(blockId) {
-        this.state.blocks = this.state.blocks.filter(b => b.id !== blockId);
-        this.renderCanvas();
-    },
-
-    // --- Canvas rendering ---
+    // ─── Canvas ───────────────────────────────────────────────────────
 
     renderCanvas() {
-        const dates = this.getUniqueDates();
-        Canvas.renderTimeAxis();
-        Canvas.renderDayColumns(dates);
-        Canvas.renderBlocks(this.state.blocks, this.state.program_types);
+        Canvas.render(this.state);
     },
 
-    getUniqueDates() {
-        const dateSet = new Set();
-        this.state.blocks.forEach(b => dateSet.add(b.date));
-        if (this.state.event.date) dateSet.add(this.state.event.date);
-        const dates = Array.from(dateSet).sort();
-        return dates.length > 0 ? dates : [new Date().toISOString().split('T')[0]];
-    },
+    // ─── Block modal ──────────────────────────────────────────────────
 
-    // --- Modal ---
-
-    editBlock(blockId) {
+    // Open modal to edit existing block
+    openBlockModal(blockId) {
         const block = this.state.blocks.find(b => b.id === blockId);
         if (!block) return;
 
+        document.getElementById('modalTitle').textContent = 'Upravit blok';
         document.getElementById('modalBlockId').value = block.id;
-        document.getElementById('modalBlockTitle').value = block.title;
-        document.getElementById('modalBlockStart').value = block.start;
-        document.getElementById('modalBlockEnd').value = block.end;
+        document.getElementById('modalBlockTitle').value = block.title || '';
+        document.getElementById('modalBlockStart').value = block.start || '';
+        document.getElementById('modalBlockEnd').value = block.end || '';
         document.getElementById('modalBlockResponsible').value = block.responsible || '';
         document.getElementById('modalBlockNotes').value = block.notes || '';
+        this._updateDuration();
 
-        // Populate type select
-        const select = document.getElementById('modalBlockType');
-        select.innerHTML = '';
+        this._populateTypeSelect(block.type_id);
+        document.getElementById('modalBlockDate').value = block.date || '';
+        document.getElementById('modalDeleteBtn').style.display = 'inline-block';
+        document.getElementById('blockModal').classList.remove('hidden');
+    },
+
+    // Open modal to create new block
+    openNewBlockModal(date, start, end) {
+        document.getElementById('modalTitle').textContent = 'Nový blok';
+        document.getElementById('modalBlockId').value = '';
+        document.getElementById('modalBlockTitle').value = '';
+        document.getElementById('modalBlockStart').value = start || '09:00';
+        document.getElementById('modalBlockEnd').value = end || '10:00';
+        document.getElementById('modalBlockResponsible').value = '';
+        document.getElementById('modalBlockNotes').value = '';
+        document.getElementById('modalBlockDate').value = date || '';
+        this._updateDuration();
+
+        this._populateTypeSelect(null);
+        document.getElementById('modalDeleteBtn').style.display = 'none';
+        document.getElementById('blockModal').classList.remove('hidden');
+    },
+
+    _populateTypeSelect(selectedId) {
+        const sel = document.getElementById('modalBlockType');
+        sel.innerHTML = '';
         this.state.program_types.forEach(pt => {
             const opt = document.createElement('option');
             opt.value = pt.id;
             opt.textContent = pt.name;
-            if (pt.id === block.type_id) opt.selected = true;
-            select.appendChild(opt);
+            if (pt.id === selectedId) opt.selected = true;
+            sel.appendChild(opt);
         });
-
-        document.getElementById('blockModal').classList.remove('hidden');
     },
 
-    saveBlockFromModal() {
-        const blockId = document.getElementById('modalBlockId').value;
-        const block = this.state.blocks.find(b => b.id === blockId);
-        if (!block) return;
-
-        block.title = document.getElementById('modalBlockTitle').value.trim() || 'Blok';
-        block.type_id = document.getElementById('modalBlockType').value;
-        block.start = document.getElementById('modalBlockStart').value;
-        block.end = document.getElementById('modalBlockEnd').value;
-        block.responsible = document.getElementById('modalBlockResponsible').value.trim() || null;
-        block.notes = document.getElementById('modalBlockNotes').value.trim() || null;
-
-        this.closeModal();
-        this.renderCanvas();
-    },
-
-    closeModal() {
-        document.getElementById('blockModal').classList.add('hidden');
-    },
-
-    // --- Toast ---
-
-    toast(message, type) {
-        const el = document.getElementById('toast');
-        el.textContent = message;
-        el.className = 'toast ' + (type || 'info');
-        setTimeout(() => el.classList.add('hidden'), 3000);
-    },
-
-    // --- PDF ---
-
-    async generatePdf() {
-        try {
-            const doc = this.getDocument();
-            if (doc.blocks.length === 0) {
-                this.toast('Přidejte alespoň jeden blok', 'error');
-                return;
-            }
-            const blob = await API.postBlob('/api/generate-pdf', doc);
-            API.downloadBlob(blob, 'scenar_timetable.pdf');
-            this.toast('PDF vygenerován', 'success');
-        } catch (err) {
-            this.toast('Chyba: ' + err.message, 'error');
+    _updateDuration() {
+        const startVal = document.getElementById('modalBlockStart').value;
+        const endVal = document.getElementById('modalBlockEnd').value;
+        if (!startVal || !endVal) {
+            document.getElementById('modalBlockDuration').value = '';
+            return;
         }
+        const s = this.parseTimeToMin(startVal);
+        let e = this.parseTimeToMin(endVal);
+        if (e < s) e += 24 * 60; // overnight
+        const dur = e - s;
+        document.getElementById('modalBlockDuration').value = this.minutesToTime(dur);
     },
 
-    // --- Utility ---
+    _saveModal() {
+        const blockId = document.getElementById('modalBlockId').value;
+        const date = document.getElementById('modalBlockDate').value;
+        const title = document.getElementById('modalBlockTitle').value.trim();
+        const type_id = document.getElementById('modalBlockType').value;
+        const start = document.getElementById('modalBlockStart').value;
+        const end = document.getElementById('modalBlockEnd').value;
+        const responsible = document.getElementById('modalBlockResponsible').value.trim() || null;
+        const notes = document.getElementById('modalBlockNotes').value.trim() || null;
 
-    uid() {
-        return 'xxxx-xxxx-xxxx'.replace(/x/g, () =>
-            Math.floor(Math.random() * 16).toString(16)
-        );
+        if (!title) { this.toast('Zadejte název bloku', 'error'); return; }
+        if (!start || !end) { this.toast('Zadejte čas začátku a konce', 'error'); return; }
+
+        if (blockId) {
+            // Edit existing
+            const idx = this.state.blocks.findIndex(b => b.id === blockId);
+            if (idx !== -1) {
+                Object.assign(this.state.blocks[idx], { date, title, type_id, start, end, responsible, notes });
+            }
+        } else {
+            // New block
+            this.state.blocks.push({ id: this.uid(), date, title, type_id, start, end, responsible, notes });
+        }
+
+        document.getElementById('blockModal').classList.add('hidden');
+        this.renderCanvas();
+        this.toast('Blok uložen', 'success');
     },
 
-    // --- Event binding ---
+    _deleteBlock() {
+        const blockId = document.getElementById('modalBlockId').value;
+        if (!blockId) return;
+        this.state.blocks = this.state.blocks.filter(b => b.id !== blockId);
+        document.getElementById('blockModal').classList.add('hidden');
+        this.renderCanvas();
+        this.toast('Blok smazán', 'success');
+    },
+
+    // ─── Toast ────────────────────────────────────────────────────────
+
+    toast(message, type = 'success') {
+        const el = document.getElementById('toast');
+        if (!el) return;
+        el.textContent = message;
+        el.className = `toast ${type}`;
+        el.classList.remove('hidden');
+        clearTimeout(this._toastTimer);
+        this._toastTimer = setTimeout(() => el.classList.add('hidden'), 3000);
+    },
+
+    // ─── Events ───────────────────────────────────────────────────────
 
     bindEvents() {
+        // Import JSON
+        document.getElementById('importJsonInput').addEventListener('change', (e) => {
+            if (e.target.files[0]) importJson(e.target.files[0]);
+            e.target.value = '';
+        });
+
+        // Export JSON
+        document.getElementById('exportJsonBtn').addEventListener('click', () => exportJson());
+
+        // New scenario
+        document.getElementById('newScenarioBtn').addEventListener('click', () => {
+            if (!confirm('Vytvořit nový scénář? Neuložené změny budou ztraceny.')) return;
+            this.newScenario();
+        });
+
+        // Generate PDF
+        document.getElementById('generatePdfBtn').addEventListener('click', async () => {
+            this.syncEventFromUI();
+            const doc = this.getDocument();
+            if (!doc.blocks.length) {
+                this.toast('Žádné bloky k exportu', 'error');
+                return;
+            }
+            try {
+                this.toast('Generuji PDF…', 'success');
+                const blob = await API.postBlob('/api/generate-pdf', doc);
+                API.downloadBlob(blob, 'scenar.pdf');
+                this.toast('PDF staženo', 'success');
+            } catch (err) {
+                this.toast('Chyba PDF: ' + err.message, 'error');
+            }
+        });
+
+        // Add block button
+        document.getElementById('addBlockBtn').addEventListener('click', () => {
+            const dates = this.getDates();
+            const date = dates[0] || new Date().toISOString().slice(0, 10);
+            this.openNewBlockModal(date, '09:00', '10:00');
+        });
+
+        // Add type
+        document.getElementById('addTypeBtn').addEventListener('click', () => {
+            this.state.program_types.push({
+                id: 'type_' + Math.random().toString(36).slice(2, 6),
+                name: 'Nový typ',
+                color: '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, '0')
+            });
+            this.renderTypes();
+        });
+
+        // Modal close
+        document.getElementById('modalClose').addEventListener('click', () => {
+            document.getElementById('blockModal').classList.add('hidden');
+        });
+        document.getElementById('modalSaveBtn').addEventListener('click', () => this._saveModal());
+        document.getElementById('modalDeleteBtn').addEventListener('click', () => this._deleteBlock());
+
+        // Duration ↔ end sync
+        document.getElementById('modalBlockDuration').addEventListener('input', (e) => {
+            const durStr = e.target.value.trim();
+            const startVal = document.getElementById('modalBlockStart').value;
+            if (!startVal || !durStr) return;
+            const durParts = durStr.split(':').map(Number);
+            if (durParts.length < 2 || isNaN(durParts[0]) || isNaN(durParts[1])) return;
+            const durMin = durParts[0] * 60 + durParts[1];
+            if (durMin <= 0) return;
+            const startMin = this.parseTimeToMin(startVal);
+            const endMin = startMin + durMin;
+            document.getElementById('modalBlockEnd').value = this.minutesToTime(endMin % 1440 || endMin);
+        });
+
+        document.getElementById('modalBlockEnd').addEventListener('input', () => {
+            this._updateDuration();
+        });
+        document.getElementById('modalBlockStart').addEventListener('input', () => {
+            this._updateDuration();
+        });
+
+        // Date range sync: if dateFrom changes and dateTo < dateFrom, set dateTo = dateFrom
+        document.getElementById('eventDateFrom').addEventListener('change', (e) => {
+            const toEl = document.getElementById('eventDateTo');
+            if (!toEl.value || toEl.value < e.target.value) {
+                toEl.value = e.target.value;
+            }
+            this.syncEventFromUI();
+            this.renderCanvas();
+        });
+        document.getElementById('eventDateTo').addEventListener('change', () => {
+            this.syncEventFromUI();
+            this.renderCanvas();
+        });
+
         // Tabs
         document.querySelectorAll('.tab').forEach(tab => {
             tab.addEventListener('click', () => {
@@ -256,49 +379,11 @@ const App = {
             });
         });
 
-        // Header buttons
-        document.getElementById('newScenarioBtn').addEventListener('click', () => this.newScenario());
-        document.getElementById('exportJsonBtn').addEventListener('click', () => exportJson());
-        document.getElementById('generatePdfBtn').addEventListener('click', () => this.generatePdf());
-
-        // Import JSON
-        document.getElementById('importJsonInput').addEventListener('change', (e) => {
-            if (e.target.files[0]) importJson(e.target.files[0]);
-            e.target.value = '';
-        });
-
-        // Sidebar
-        document.getElementById('addTypeBtn').addEventListener('click', () => this.addType());
-        document.getElementById('addBlockBtn').addEventListener('click', () => this.createBlock());
-
-        // Modal
-        document.getElementById('modalSaveBtn').addEventListener('click', () => this.saveBlockFromModal());
-        document.getElementById('modalClose').addEventListener('click', () => this.closeModal());
-        document.getElementById('modalDeleteBtn').addEventListener('click', () => {
-            const blockId = document.getElementById('modalBlockId').value;
-            this.closeModal();
-            this.deleteBlock(blockId);
-        });
-
         // Close modal on overlay click
         document.getElementById('blockModal').addEventListener('click', (e) => {
-            if (e.target.classList.contains('modal-overlay')) this.closeModal();
+            if (e.target === document.getElementById('blockModal')) {
+                document.getElementById('blockModal').classList.add('hidden');
+            }
         });
-
-        // Drag & drop JSON on canvas
-        const canvasWrapper = document.querySelector('.canvas-wrapper');
-        if (canvasWrapper) {
-            canvasWrapper.addEventListener('dragover', (e) => e.preventDefault());
-            canvasWrapper.addEventListener('drop', (e) => {
-                e.preventDefault();
-                const file = e.dataTransfer.files[0];
-                if (file && file.name.endsWith('.json')) {
-                    importJson(file);
-                }
-            });
-        }
-    }
+    },
 };
-
-// Boot
-document.addEventListener('DOMContentLoaded', () => App.init());