feat: v3.0 - canvas editor, JSON-only, no Excel, new UI
Some checks failed
Build & Push Docker / build (push) Has been cancelled
Some checks failed
Build & Push Docker / build (push) Has been cancelled
- Remove all Excel code (import, export, template, pandas, openpyxl) - New canvas-based schedule editor with drag & drop (interact.js) - Modern 3-panel UI: sidebar, canvas, documentation tab - New data model: Block with id/date/start/end, ProgramType with id/name/color - Clean API: GET /api/health, POST /api/validate, GET /api/sample, POST /api/generate-pdf - Rewritten PDF generator using ScenarioDocument directly (no DataFrame) - Professional PDF output: dark header, colored blocks, merged cells, legend, footer - Sample JSON: "Zimní výjezd oddílu" with 11 blocks, 3 program types - 30 tests passing (API, core models, PDF generation) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,293 +1,711 @@
|
||||
/* Scenar Creator v3 — Main Stylesheet */
|
||||
|
||||
:root {
|
||||
--header-bg: #1e293b;
|
||||
--accent: #3b82f6;
|
||||
--accent-hover: #2563eb;
|
||||
--danger: #ef4444;
|
||||
--danger-hover: #dc2626;
|
||||
--success: #22c55e;
|
||||
--text: #1e293b;
|
||||
--text-light: #64748b;
|
||||
--border: #e2e8f0;
|
||||
--bg: #f8fafc;
|
||||
--white: #ffffff;
|
||||
--sidebar-width: 280px;
|
||||
--header-height: 56px;
|
||||
--tab-height: 40px;
|
||||
--grid-row-height: 30px;
|
||||
--radius: 8px;
|
||||
--radius-sm: 4px;
|
||||
--shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
--shadow-lg: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
background: #f5f5f5;
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
/* Header */
|
||||
.header {
|
||||
height: var(--header-height);
|
||||
background: var(--header-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 20px;
|
||||
color: white;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 5px;
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
color: #7f8c8d;
|
||||
margin-bottom: 20px;
|
||||
.header-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.3px;
|
||||
}
|
||||
|
||||
.header-version {
|
||||
font-size: 11px;
|
||||
background: rgba(255,255,255,0.15);
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
.tabs {
|
||||
height: var(--tab-height);
|
||||
background: var(--white);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
padding: 0 20px;
|
||||
gap: 0;
|
||||
margin-bottom: 0;
|
||||
border-bottom: 2px solid #3498db;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 10px 24px;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom: none;
|
||||
background: #ecf0f1;
|
||||
padding: 0 16px;
|
||||
height: 100%;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
transition: background 0.2s;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-light);
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
background: #fff;
|
||||
border-color: #3498db;
|
||||
border-bottom: 2px solid #fff;
|
||||
margin-bottom: -2px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tab:hover:not(.active) {
|
||||
background: #d5dbdb;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-top: none;
|
||||
border-radius: 0 0 6px 6px;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Form */
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.form-group input[type="text"],
|
||||
.form-group input[type="file"] {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
color: var(--accent);
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
transition: background 0.2s;
|
||||
transition: all 0.15s;
|
||||
font-family: inherit;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #3498db;
|
||||
color: #fff;
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #2980b9;
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #95a5a6;
|
||||
color: #fff;
|
||||
background: rgba(255,255,255,0.12);
|
||||
color: white;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #7f8c8d;
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #e74c3c;
|
||||
color: #fff;
|
||||
background: var(--danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #c0392b;
|
||||
background: var(--danger-hover);
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 4px 10px;
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Types */
|
||||
.btn-xs {
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
background: var(--bg);
|
||||
color: var(--text-light);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.btn-xs:hover {
|
||||
background: var(--border);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
.tab-content {
|
||||
height: calc(100vh - var(--header-height) - var(--tab-height));
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tab-content.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-layout {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar {
|
||||
width: var(--sidebar-width);
|
||||
min-width: var(--sidebar-width);
|
||||
background: var(--white);
|
||||
border-right: 1px solid var(--border);
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.sidebar-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sidebar-heading {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.form-group input[type="text"],
|
||||
.form-group input[type="date"],
|
||||
.form-group input[type="time"],
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
background: var(--white);
|
||||
color: var(--text);
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.form-row .form-group {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Program type rows */
|
||||
.type-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
padding: 6px 8px;
|
||||
background: var(--bg);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.type-row input[type="color"] {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.type-row input[type="text"] {
|
||||
flex: 1;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
padding: 5px 8px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 12px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.type-row input[type="color"] {
|
||||
width: 40px;
|
||||
height: 32px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
.type-row input[type="text"]:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.type-remove {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--text-light);
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.type-code {
|
||||
max-width: 200px;
|
||||
.type-remove:hover {
|
||||
background: var(--danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Schedule table */
|
||||
#scheduleTable {
|
||||
/* Canvas */
|
||||
.canvas-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.canvas-header {
|
||||
display: flex;
|
||||
padding: 0 0 0 60px;
|
||||
background: var(--white);
|
||||
border-bottom: 1px solid var(--border);
|
||||
min-height: 36px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.canvas-header .day-header {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
border-left: 1px solid var(--border);
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.canvas-header .day-header:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.canvas-scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
display: flex;
|
||||
position: relative;
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.time-axis {
|
||||
width: 60px;
|
||||
min-width: 60px;
|
||||
position: relative;
|
||||
background: var(--white);
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.time-label {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
font-size: 11px;
|
||||
color: var(--text-light);
|
||||
transform: translateY(-50%);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.day-columns {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.day-column {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
border-left: 1px solid var(--border);
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.day-column:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
/* Grid lines */
|
||||
.grid-line {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.grid-line.hour {
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.grid-line.half {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
/* Schedule blocks */
|
||||
.schedule-block {
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
right: 4px;
|
||||
border-radius: 6px;
|
||||
padding: 6px 8px;
|
||||
cursor: grab;
|
||||
overflow: hidden;
|
||||
transition: box-shadow 0.15s;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 20px;
|
||||
user-select: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.schedule-block:hover {
|
||||
box-shadow: var(--shadow-lg);
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.schedule-block:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.schedule-block .block-color-bar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
border-radius: 6px 0 0 6px;
|
||||
}
|
||||
|
||||
.schedule-block .block-title {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
line-height: 1.2;
|
||||
padding-left: 4px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.schedule-block .block-time {
|
||||
font-size: 10px;
|
||||
color: rgba(255,255,255,0.8);
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.schedule-block .block-responsible {
|
||||
font-size: 10px;
|
||||
color: rgba(255,255,255,0.7);
|
||||
padding-left: 4px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.schedule-block.light-bg .block-title {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.schedule-block.light-bg .block-time {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.schedule-block.light-bg .block-responsible {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
/* Resize handle */
|
||||
.schedule-block .resize-handle {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 8px;
|
||||
cursor: s-resize;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.schedule-block:hover .resize-handle {
|
||||
background: rgba(0,0,0,0.1);
|
||||
border-radius: 0 0 6px 6px;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal-overlay.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-lg);
|
||||
width: 420px;
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
color: var(--text-light);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* Toast notification */
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
right: 24px;
|
||||
padding: 12px 20px;
|
||||
border-radius: var(--radius);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
z-index: 2000;
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.toast.hidden {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toast.success {
|
||||
background: var(--success);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.toast.error {
|
||||
background: var(--danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.toast.info {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Documentation */
|
||||
.docs-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 32px 24px;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.docs-container h2 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 24px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.docs-container h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 12px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.docs-container p {
|
||||
margin-bottom: 12px;
|
||||
color: var(--text-light);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.docs-container ul,
|
||||
.docs-container ol {
|
||||
margin-bottom: 12px;
|
||||
padding-left: 24px;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.docs-container li {
|
||||
margin-bottom: 6px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.docs-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
#scheduleTable th,
|
||||
#scheduleTable td {
|
||||
padding: 6px 8px;
|
||||
border: 1px solid #ddd;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#scheduleTable th {
|
||||
background: #ecf0f1;
|
||||
font-weight: 600;
|
||||
margin: 16px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#scheduleTable input {
|
||||
width: 100%;
|
||||
padding: 4px 6px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#scheduleTable input[type="date"] {
|
||||
min-width: 130px;
|
||||
}
|
||||
|
||||
#scheduleTable input[type="time"] {
|
||||
min-width: 90px;
|
||||
}
|
||||
|
||||
/* Editor area */
|
||||
.editor-area {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.editor-area h2 {
|
||||
margin-bottom: 10px;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.editor-area h3 {
|
||||
margin: 15px 0 8px;
|
||||
color: #34495e;
|
||||
}
|
||||
|
||||
/* Imported type editor */
|
||||
.imported-type-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.imported-type-row input[type="text"] {
|
||||
flex: 1;
|
||||
padding: 5px 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.imported-type-row input[type="color"] {
|
||||
width: 36px;
|
||||
height: 28px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* Block list */
|
||||
.block-item {
|
||||
background: #f9f9f9;
|
||||
.docs-table th,
|
||||
.docs-table td {
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 4px;
|
||||
border-radius: 4px;
|
||||
border-left: 4px solid #3498db;
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* Status message */
|
||||
.status-message {
|
||||
margin-top: 15px;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
.docs-table th {
|
||||
background: var(--bg);
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.status-message.success {
|
||||
background: #d5f5e3;
|
||||
color: #27ae60;
|
||||
border: 1px solid #27ae60;
|
||||
.docs-table td {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.status-message.error {
|
||||
background: #fadbd8;
|
||||
color: #e74c3c;
|
||||
border: 1px solid #e74c3c;
|
||||
/* Canvas click area for creating blocks */
|
||||
.day-column-click-area {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* JSON import */
|
||||
.json-import {
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
background: #fafafa;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
/* Scrollbar */
|
||||
.canvas-scroll::-webkit-scrollbar,
|
||||
.sidebar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 20px 0 10px;
|
||||
color: #2c3e50;
|
||||
.canvas-scroll::-webkit-scrollbar-track,
|
||||
.sidebar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.canvas-scroll::-webkit-scrollbar-thumb,
|
||||
.sidebar::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.canvas-scroll::-webkit-scrollbar-thumb:hover,
|
||||
.sidebar::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--text-light);
|
||||
}
|
||||
|
||||
/* Sidebar buttons in non-header context */
|
||||
.sidebar .btn-secondary {
|
||||
background: var(--bg);
|
||||
color: var(--text-light);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.sidebar .btn-secondary:hover {
|
||||
background: var(--border);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@@ -3,131 +3,193 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Scenar Creator</title>
|
||||
<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>
|
||||
<div class="container">
|
||||
<h1>Scenar Creator</h1>
|
||||
<p class="subtitle">Tvorba časových harmonogramů</p>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="tabs">
|
||||
<button class="tab active" onclick="switchTab(event, 'importTab')">Importovat Excel</button>
|
||||
<button class="tab" onclick="switchTab(event, 'builderTab')">Vytvořit inline</button>
|
||||
<header class="header">
|
||||
<div class="header-left">
|
||||
<h1 class="header-title">Scenár Creator</h1>
|
||||
<span class="header-version">v3.0</span>
|
||||
</div>
|
||||
|
||||
<!-- Import Excel Tab -->
|
||||
<div id="importTab" class="tab-content active">
|
||||
<form id="importForm" onsubmit="return handleImport(event)">
|
||||
<div class="form-group">
|
||||
<label for="importTitle">Název akce:</label>
|
||||
<input type="text" id="importTitle" name="title" maxlength="200" required placeholder="Název události">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="importDetail">Detail:</label>
|
||||
<input type="text" id="importDetail" name="detail" maxlength="500" required placeholder="Popis události">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="excelFile">Excel soubor:</label>
|
||||
<input type="file" id="excelFile" name="file" accept=".xlsx,.xls" required>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">Importovat</button>
|
||||
<a href="/api/template" class="btn btn-secondary">Stáhnout šablonu</a>
|
||||
</div>
|
||||
</form>
|
||||
<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>
|
||||
|
||||
<!-- Builder Tab -->
|
||||
<div id="builderTab" class="tab-content">
|
||||
<form id="builderForm" onsubmit="return handleBuild(event)">
|
||||
<div class="form-group">
|
||||
<label for="builderTitle">Název akce:</label>
|
||||
<input type="text" id="builderTitle" name="title" maxlength="200" required placeholder="Název události">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="builderDetail">Detail:</label>
|
||||
<input type="text" id="builderDetail" name="detail" maxlength="500" required placeholder="Popis události">
|
||||
</div>
|
||||
|
||||
<h3>Typy programů</h3>
|
||||
<div id="typesContainer">
|
||||
<div class="type-row" data-index="0">
|
||||
<input type="text" name="type_name_0" placeholder="Kód typu (např. WORKSHOP)" class="type-code">
|
||||
<input type="text" name="type_desc_0" placeholder="Popis">
|
||||
<input type="color" name="type_color_0" value="#0070C0">
|
||||
<button type="button" class="btn btn-danger btn-sm" onclick="removeTypeRow(0)">X</button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary btn-sm" onclick="addTypeRow()">+ Přidat typ</button>
|
||||
|
||||
<h3>Časový harmonogram</h3>
|
||||
<datalist id="availableTypes"></datalist>
|
||||
<div id="scheduleContainer">
|
||||
<table id="scheduleTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Datum</th>
|
||||
<th>Začátek</th>
|
||||
<th>Konec</th>
|
||||
<th>Program</th>
|
||||
<th>Typ</th>
|
||||
<th>Garant</th>
|
||||
<th>Poznámka</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="scheduleBody">
|
||||
<tr data-index="0">
|
||||
<td><input type="date" name="datum_0" required></td>
|
||||
<td><input type="time" name="zacatek_0" required></td>
|
||||
<td><input type="time" name="konec_0" required></td>
|
||||
<td><input type="text" name="program_0" required placeholder="Název bloku"></td>
|
||||
<td><input type="text" name="typ_0" list="availableTypes" required placeholder="Typ"></td>
|
||||
<td><input type="text" name="garant_0" placeholder="Garant"></td>
|
||||
<td><input type="text" name="poznamka_0" placeholder="Poznámka"></td>
|
||||
<td><button type="button" class="btn btn-danger btn-sm" onclick="removeScheduleRow(0)">X</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button type="button" class="btn btn-secondary btn-sm" onclick="addScheduleRow()">+ Přidat řádek</button>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary" name="format" value="excel">Stáhnout Excel</button>
|
||||
<button type="button" class="btn btn-primary" onclick="handleBuildPdf()">Stáhnout PDF</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Import results / editor area -->
|
||||
<div id="editorArea" class="editor-area" style="display:none;">
|
||||
<h2>Importovaná data</h2>
|
||||
<div id="importedInfo"></div>
|
||||
|
||||
<h3>Typy programů</h3>
|
||||
<div id="importedTypesContainer"></div>
|
||||
|
||||
<h3>Bloky</h3>
|
||||
<div id="importedBlocksContainer"></div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button class="btn btn-primary" onclick="generateExcelFromImport()">Stáhnout Excel</button>
|
||||
<button class="btn btn-primary" onclick="generatePdfFromImport()">Stáhnout PDF</button>
|
||||
<button class="btn btn-secondary" onclick="exportJson()">Exportovat JSON</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JSON import -->
|
||||
<div class="json-import">
|
||||
<label>Importovat JSON: <input type="file" id="jsonFile" accept=".json" onchange="handleJsonImport(event)"></label>
|
||||
</div>
|
||||
|
||||
<div id="statusMessage" class="status-message" style="display:none;"></div>
|
||||
<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-group">
|
||||
<label>Datum</label>
|
||||
<input type="date" id="eventDate">
|
||||
</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 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>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content hidden" id="tab-docs">
|
||||
<div class="docs-container">
|
||||
<h2>Dokumentace — Scenár Creator v3</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>
|
||||
</ol>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</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>Formát JSON</h3>
|
||||
<table class="docs-table">
|
||||
<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>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[].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[].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>Vzorový JSON</h3>
|
||||
<p><a href="/api/sample" class="btn btn-secondary btn-sm">Stáhnout sample.json</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Block edit 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>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>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>
|
||||
</body>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* API fetch wrapper for Scenar Creator.
|
||||
* API fetch wrapper for Scenar Creator v3.
|
||||
*/
|
||||
|
||||
const API = {
|
||||
@@ -9,10 +9,9 @@ const API = {
|
||||
opts.headers = { 'Content-Type': 'application/json' };
|
||||
opts.body = JSON.stringify(body);
|
||||
} else {
|
||||
opts.body = body; // FormData
|
||||
opts.body = body;
|
||||
}
|
||||
const res = await fetch(url, opts);
|
||||
return res;
|
||||
return fetch(url, opts);
|
||||
},
|
||||
|
||||
async postJson(url, body) {
|
||||
@@ -33,21 +32,18 @@ const API = {
|
||||
return res.blob();
|
||||
},
|
||||
|
||||
async postFormData(url, formData) {
|
||||
const res = await this.post(url, formData, false);
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({ detail: res.statusText }));
|
||||
throw new Error(err.detail || 'API error');
|
||||
}
|
||||
return res.json();
|
||||
},
|
||||
|
||||
async get(url) {
|
||||
const res = await fetch(url);
|
||||
if (!res.ok) throw new Error(res.statusText);
|
||||
return res.json();
|
||||
},
|
||||
|
||||
async getBlob(url) {
|
||||
const res = await fetch(url);
|
||||
if (!res.ok) throw new Error(res.statusText);
|
||||
return res.blob();
|
||||
},
|
||||
|
||||
downloadBlob(blob, filename) {
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
|
||||
@@ -1,258 +1,304 @@
|
||||
/**
|
||||
* Main application logic for Scenar Creator SPA.
|
||||
* Main application logic for Scenar Creator v3.
|
||||
* State management, UI wiring, modal handling.
|
||||
*/
|
||||
|
||||
window.currentDocument = null;
|
||||
let typeCounter = 1;
|
||||
let scheduleCounter = 1;
|
||||
const App = {
|
||||
state: {
|
||||
event: { title: '', subtitle: '', date: '', location: '' },
|
||||
program_types: [],
|
||||
blocks: []
|
||||
},
|
||||
|
||||
/* --- Tab switching --- */
|
||||
function switchTab(event, tabId) {
|
||||
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
||||
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
|
||||
event.target.classList.add('active');
|
||||
document.getElementById(tabId).classList.add('active');
|
||||
}
|
||||
init() {
|
||||
this.bindEvents();
|
||||
this.newScenario();
|
||||
},
|
||||
|
||||
/* --- Status messages --- */
|
||||
function showStatus(message, type) {
|
||||
const el = document.getElementById('statusMessage');
|
||||
el.textContent = message;
|
||||
el.className = 'status-message ' + type;
|
||||
el.style.display = 'block';
|
||||
setTimeout(() => { el.style.display = 'none'; }, 5000);
|
||||
}
|
||||
// --- State ---
|
||||
|
||||
/* --- Type management --- */
|
||||
function addTypeRow() {
|
||||
const container = document.getElementById('typesContainer');
|
||||
const idx = typeCounter++;
|
||||
const div = document.createElement('div');
|
||||
div.className = 'type-row';
|
||||
div.setAttribute('data-index', idx);
|
||||
div.innerHTML = `
|
||||
<input type="text" name="type_name_${idx}" placeholder="Kód typu" class="type-code">
|
||||
<input type="text" name="type_desc_${idx}" placeholder="Popis">
|
||||
<input type="color" name="type_color_${idx}" value="#0070C0">
|
||||
<button type="button" class="btn btn-danger btn-sm" onclick="removeTypeRow(${idx})">X</button>
|
||||
`;
|
||||
container.appendChild(div);
|
||||
updateTypeDatalist();
|
||||
}
|
||||
getDocument() {
|
||||
this.syncEventFromUI();
|
||||
return {
|
||||
version: '1.0',
|
||||
event: { ...this.state.event },
|
||||
program_types: this.state.program_types.map(pt => ({ ...pt })),
|
||||
blocks: this.state.blocks.map(b => ({ ...b }))
|
||||
};
|
||||
},
|
||||
|
||||
function removeTypeRow(idx) {
|
||||
const row = document.querySelector(`.type-row[data-index="${idx}"]`);
|
||||
if (row) row.remove();
|
||||
updateTypeDatalist();
|
||||
}
|
||||
|
||||
function updateTypeDatalist() {
|
||||
const datalist = document.getElementById('availableTypes');
|
||||
datalist.innerHTML = '';
|
||||
document.querySelectorAll('#typesContainer .type-row').forEach(row => {
|
||||
const nameInput = row.querySelector('input[name^="type_name_"]');
|
||||
if (nameInput && nameInput.value.trim()) {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = nameInput.value.trim();
|
||||
datalist.appendChild(opt);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Update datalist on type name changes
|
||||
document.getElementById('typesContainer').addEventListener('input', function (e) {
|
||||
if (e.target.name && e.target.name.startsWith('type_name_')) {
|
||||
updateTypeDatalist();
|
||||
}
|
||||
});
|
||||
|
||||
/* --- Schedule management --- */
|
||||
function addScheduleRow() {
|
||||
const tbody = document.getElementById('scheduleBody');
|
||||
const idx = scheduleCounter++;
|
||||
const tr = document.createElement('tr');
|
||||
tr.setAttribute('data-index', idx);
|
||||
tr.innerHTML = `
|
||||
<td><input type="date" name="datum_${idx}" required></td>
|
||||
<td><input type="time" name="zacatek_${idx}" required></td>
|
||||
<td><input type="time" name="konec_${idx}" required></td>
|
||||
<td><input type="text" name="program_${idx}" required placeholder="Název bloku"></td>
|
||||
<td><input type="text" name="typ_${idx}" list="availableTypes" required placeholder="Typ"></td>
|
||||
<td><input type="text" name="garant_${idx}" placeholder="Garant"></td>
|
||||
<td><input type="text" name="poznamka_${idx}" placeholder="Poznámka"></td>
|
||||
<td><button type="button" class="btn btn-danger btn-sm" onclick="removeScheduleRow(${idx})">X</button></td>
|
||||
`;
|
||||
tbody.appendChild(tr);
|
||||
}
|
||||
|
||||
function removeScheduleRow(idx) {
|
||||
const row = document.querySelector(`#scheduleBody tr[data-index="${idx}"]`);
|
||||
if (row) row.remove();
|
||||
}
|
||||
|
||||
/* --- Build ScenarioDocument from builder form --- */
|
||||
function buildDocumentFromForm() {
|
||||
const title = document.getElementById('builderTitle').value.trim();
|
||||
const detail = document.getElementById('builderDetail').value.trim();
|
||||
|
||||
if (!title || !detail) {
|
||||
throw new Error('Název akce a detail jsou povinné');
|
||||
}
|
||||
|
||||
// Collect types
|
||||
const programTypes = [];
|
||||
document.querySelectorAll('#typesContainer .type-row').forEach(row => {
|
||||
const code = row.querySelector('input[name^="type_name_"]').value.trim();
|
||||
const desc = row.querySelector('input[name^="type_desc_"]').value.trim();
|
||||
const color = row.querySelector('input[name^="type_color_"]').value;
|
||||
if (code) {
|
||||
programTypes.push({ code, description: desc, color });
|
||||
}
|
||||
});
|
||||
|
||||
// Collect blocks
|
||||
const blocks = [];
|
||||
document.querySelectorAll('#scheduleBody tr').forEach(tr => {
|
||||
const inputs = tr.querySelectorAll('input');
|
||||
const datum = inputs[0].value;
|
||||
const zacatek = inputs[1].value;
|
||||
const konec = inputs[2].value;
|
||||
const program = inputs[3].value.trim();
|
||||
const typ = inputs[4].value.trim();
|
||||
const garant = inputs[5].value.trim() || null;
|
||||
const poznamka = inputs[6].value.trim() || null;
|
||||
|
||||
if (datum && zacatek && konec && program && typ) {
|
||||
blocks.push({ datum, zacatek, konec, program, typ, garant, poznamka });
|
||||
}
|
||||
});
|
||||
|
||||
if (blocks.length === 0) {
|
||||
throw new Error('Přidejte alespoň jeden blok');
|
||||
}
|
||||
|
||||
return {
|
||||
version: "1.0",
|
||||
event: { title, detail },
|
||||
program_types: programTypes,
|
||||
blocks
|
||||
};
|
||||
}
|
||||
|
||||
/* --- Handle builder form submit (Excel) --- */
|
||||
async function handleBuild(event) {
|
||||
event.preventDefault();
|
||||
try {
|
||||
const doc = buildDocumentFromForm();
|
||||
const blob = await API.postBlob('/api/generate-excel', doc);
|
||||
API.downloadBlob(blob, 'scenar_timetable.xlsx');
|
||||
showStatus('Excel vygenerován', 'success');
|
||||
} catch (err) {
|
||||
showStatus('Chyba: ' + err.message, 'error');
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/* --- Handle builder PDF --- */
|
||||
async function handleBuildPdf() {
|
||||
try {
|
||||
const doc = buildDocumentFromForm();
|
||||
const blob = await API.postBlob('/api/generate-pdf', doc);
|
||||
API.downloadBlob(blob, 'scenar_timetable.pdf');
|
||||
showStatus('PDF vygenerován', 'success');
|
||||
} catch (err) {
|
||||
showStatus('Chyba: ' + err.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Handle Excel import --- */
|
||||
async function handleImport(event) {
|
||||
event.preventDefault();
|
||||
const form = document.getElementById('importForm');
|
||||
const formData = new FormData(form);
|
||||
|
||||
try {
|
||||
const result = await API.postFormData('/api/import-excel', formData);
|
||||
if (result.success && result.document) {
|
||||
window.currentDocument = result.document;
|
||||
showImportedDocument(result.document);
|
||||
if (result.warnings && result.warnings.length > 0) {
|
||||
showStatus('Import OK, warnings: ' + result.warnings.join('; '), 'success');
|
||||
} else {
|
||||
showStatus('Excel importován', 'success');
|
||||
}
|
||||
} else {
|
||||
showStatus('Import failed: ' + (result.errors || []).join('; '), 'error');
|
||||
}
|
||||
} catch (err) {
|
||||
showStatus('Chyba importu: ' + err.message, 'error');
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/* --- Show imported document in editor --- */
|
||||
function showImportedDocument(doc) {
|
||||
const area = document.getElementById('editorArea');
|
||||
area.style.display = 'block';
|
||||
|
||||
// Info
|
||||
document.getElementById('importedInfo').innerHTML =
|
||||
`<strong>${doc.event.title}</strong> — ${doc.event.detail}`;
|
||||
|
||||
// Types
|
||||
const typesHtml = doc.program_types.map((pt, i) => `
|
||||
<div class="imported-type-row">
|
||||
<input type="text" value="${pt.code}" data-field="code" data-idx="${i}">
|
||||
<input type="text" value="${pt.description}" data-field="description" data-idx="${i}">
|
||||
<input type="color" value="${pt.color}" data-field="color" data-idx="${i}">
|
||||
</div>
|
||||
`).join('');
|
||||
document.getElementById('importedTypesContainer').innerHTML = typesHtml;
|
||||
|
||||
// Blocks
|
||||
const blocksHtml = doc.blocks.map(b =>
|
||||
`<div class="block-item">${b.datum} ${b.zacatek}–${b.konec} | <strong>${b.program}</strong> [${b.typ}] ${b.garant || ''}</div>`
|
||||
).join('');
|
||||
document.getElementById('importedBlocksContainer').innerHTML = blocksHtml;
|
||||
}
|
||||
|
||||
/* --- Get current document (with any edits from import editor) --- */
|
||||
function getCurrentDocument() {
|
||||
if (!window.currentDocument) {
|
||||
throw new Error('No document loaded');
|
||||
}
|
||||
// Update types from editor
|
||||
const typeRows = document.querySelectorAll('#importedTypesContainer .imported-type-row');
|
||||
if (typeRows.length > 0) {
|
||||
window.currentDocument.program_types = Array.from(typeRows).map(row => ({
|
||||
code: row.querySelector('[data-field="code"]').value.trim(),
|
||||
description: row.querySelector('[data-field="description"]').value.trim(),
|
||||
color: row.querySelector('[data-field="color"]').value,
|
||||
loadDocument(doc) {
|
||||
this.state.event = { ...doc.event };
|
||||
this.state.program_types = (doc.program_types || []).map(pt => ({ ...pt }));
|
||||
this.state.blocks = (doc.blocks || []).map(b => ({
|
||||
...b,
|
||||
id: b.id || this.uid()
|
||||
}));
|
||||
}
|
||||
return window.currentDocument;
|
||||
}
|
||||
this.syncEventToUI();
|
||||
this.renderTypes();
|
||||
this.renderCanvas();
|
||||
},
|
||||
|
||||
/* --- Generate Excel from imported data --- */
|
||||
async function generateExcelFromImport() {
|
||||
try {
|
||||
const doc = getCurrentDocument();
|
||||
const blob = await API.postBlob('/api/generate-excel', doc);
|
||||
API.downloadBlob(blob, 'scenar_timetable.xlsx');
|
||||
showStatus('Excel vygenerován', 'success');
|
||||
} catch (err) {
|
||||
showStatus('Chyba: ' + err.message, 'error');
|
||||
}
|
||||
}
|
||||
newScenario() {
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
this.state = {
|
||||
event: { title: 'Nová akce', subtitle: '', date: today, location: '' },
|
||||
program_types: [
|
||||
{ id: 'main', name: 'Hlavní program', color: '#3B82F6' },
|
||||
{ id: 'rest', name: 'Odpočinek', color: '#22C55E' }
|
||||
],
|
||||
blocks: []
|
||||
};
|
||||
this.syncEventToUI();
|
||||
this.renderTypes();
|
||||
this.renderCanvas();
|
||||
},
|
||||
|
||||
/* --- Generate PDF from imported data --- */
|
||||
async function generatePdfFromImport() {
|
||||
try {
|
||||
const doc = getCurrentDocument();
|
||||
const blob = await API.postBlob('/api/generate-pdf', doc);
|
||||
API.downloadBlob(blob, 'scenar_timetable.pdf');
|
||||
showStatus('PDF vygenerován', 'success');
|
||||
} catch (err) {
|
||||
showStatus('Chyba: ' + err.message, 'error');
|
||||
// --- 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.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('eventLocation').value = this.state.event.location || '';
|
||||
},
|
||||
|
||||
// --- Program types ---
|
||||
|
||||
renderTypes() {
|
||||
const container = document.getElementById('programTypesContainer');
|
||||
container.innerHTML = '';
|
||||
this.state.program_types.forEach((pt, i) => {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'type-row';
|
||||
row.innerHTML = `
|
||||
<input type="color" value="${pt.color}" data-idx="${i}">
|
||||
<input type="text" value="${pt.name}" placeholder="Název typu" data-idx="${i}">
|
||||
<button class="type-remove" data-idx="${i}">×</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();
|
||||
this.renderCanvas();
|
||||
});
|
||||
container.appendChild(row);
|
||||
});
|
||||
},
|
||||
|
||||
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 ---
|
||||
|
||||
renderCanvas() {
|
||||
const dates = this.getUniqueDates();
|
||||
Canvas.renderTimeAxis();
|
||||
Canvas.renderDayColumns(dates);
|
||||
Canvas.renderBlocks(this.state.blocks, this.state.program_types);
|
||||
},
|
||||
|
||||
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]];
|
||||
},
|
||||
|
||||
// --- Modal ---
|
||||
|
||||
editBlock(blockId) {
|
||||
const block = this.state.blocks.find(b => b.id === blockId);
|
||||
if (!block) return;
|
||||
|
||||
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('modalBlockResponsible').value = block.responsible || '';
|
||||
document.getElementById('modalBlockNotes').value = block.notes || '';
|
||||
|
||||
// Populate type select
|
||||
const select = document.getElementById('modalBlockType');
|
||||
select.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);
|
||||
});
|
||||
|
||||
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');
|
||||
}
|
||||
},
|
||||
|
||||
// --- Utility ---
|
||||
|
||||
uid() {
|
||||
return 'xxxx-xxxx-xxxx'.replace(/x/g, () =>
|
||||
Math.floor(Math.random() * 16).toString(16)
|
||||
);
|
||||
},
|
||||
|
||||
// --- Event binding ---
|
||||
|
||||
bindEvents() {
|
||||
// Tabs
|
||||
document.querySelectorAll('.tab').forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
||||
document.querySelectorAll('.tab-content').forEach(c => c.classList.add('hidden'));
|
||||
tab.classList.add('active');
|
||||
document.getElementById('tab-' + tab.dataset.tab).classList.remove('hidden');
|
||||
});
|
||||
});
|
||||
|
||||
// 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();
|
||||
});
|
||||
|
||||
// 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());
|
||||
|
||||
267
app/static/js/canvas.js
Normal file
267
app/static/js/canvas.js
Normal file
@@ -0,0 +1,267 @@
|
||||
/**
|
||||
* Canvas editor for Scenar Creator v3.
|
||||
* Renders schedule blocks on a time-grid canvas with drag & drop via interact.js.
|
||||
*/
|
||||
|
||||
const Canvas = {
|
||||
GRID_MINUTES: 15,
|
||||
PX_PER_SLOT: 30, // 30px per 15 min
|
||||
START_HOUR: 7,
|
||||
END_HOUR: 23,
|
||||
|
||||
get pxPerMinute() {
|
||||
return this.PX_PER_SLOT / this.GRID_MINUTES;
|
||||
},
|
||||
|
||||
get totalSlots() {
|
||||
return ((this.END_HOUR - this.START_HOUR) * 60) / this.GRID_MINUTES;
|
||||
},
|
||||
|
||||
get totalHeight() {
|
||||
return this.totalSlots * this.PX_PER_SLOT;
|
||||
},
|
||||
|
||||
minutesToPx(minutes) {
|
||||
return (minutes - this.START_HOUR * 60) * this.pxPerMinute;
|
||||
},
|
||||
|
||||
pxToMinutes(px) {
|
||||
return Math.round(px / this.pxPerMinute + this.START_HOUR * 60);
|
||||
},
|
||||
|
||||
snapMinutes(minutes) {
|
||||
return Math.round(minutes / this.GRID_MINUTES) * this.GRID_MINUTES;
|
||||
},
|
||||
|
||||
formatTime(totalMinutes) {
|
||||
const h = Math.floor(totalMinutes / 60);
|
||||
const m = totalMinutes % 60;
|
||||
return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
|
||||
},
|
||||
|
||||
parseTime(str) {
|
||||
const [h, m] = str.split(':').map(Number);
|
||||
return h * 60 + m;
|
||||
},
|
||||
|
||||
isLightColor(hex) {
|
||||
const h = hex.replace('#', '');
|
||||
const r = parseInt(h.substring(0, 2), 16);
|
||||
const g = parseInt(h.substring(2, 4), 16);
|
||||
const b = parseInt(h.substring(4, 6), 16);
|
||||
return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.6;
|
||||
},
|
||||
|
||||
renderTimeAxis() {
|
||||
const axis = document.getElementById('timeAxis');
|
||||
axis.innerHTML = '';
|
||||
axis.style.height = this.totalHeight + 'px';
|
||||
|
||||
for (let slot = 0; slot <= this.totalSlots; slot++) {
|
||||
const minutes = this.START_HOUR * 60 + slot * this.GRID_MINUTES;
|
||||
const isHour = minutes % 60 === 0;
|
||||
const isHalf = minutes % 30 === 0;
|
||||
|
||||
if (isHour || isHalf) {
|
||||
const label = document.createElement('div');
|
||||
label.className = 'time-label';
|
||||
label.style.top = (slot * this.PX_PER_SLOT) + 'px';
|
||||
label.textContent = this.formatTime(minutes);
|
||||
if (!isHour) {
|
||||
label.style.fontSize = '9px';
|
||||
label.style.opacity = '0.6';
|
||||
}
|
||||
axis.appendChild(label);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
renderDayColumns(dates) {
|
||||
const header = document.getElementById('canvasHeader');
|
||||
const columns = document.getElementById('dayColumns');
|
||||
header.innerHTML = '';
|
||||
columns.innerHTML = '';
|
||||
|
||||
if (dates.length === 0) dates = [new Date().toISOString().split('T')[0]];
|
||||
|
||||
dates.forEach(dateStr => {
|
||||
// Header
|
||||
const dh = document.createElement('div');
|
||||
dh.className = 'day-header';
|
||||
dh.textContent = dateStr;
|
||||
header.appendChild(dh);
|
||||
|
||||
// Column
|
||||
const col = document.createElement('div');
|
||||
col.className = 'day-column';
|
||||
col.dataset.date = dateStr;
|
||||
col.style.height = this.totalHeight + 'px';
|
||||
|
||||
// Grid lines
|
||||
for (let slot = 0; slot <= this.totalSlots; slot++) {
|
||||
const minutes = this.START_HOUR * 60 + slot * this.GRID_MINUTES;
|
||||
const line = document.createElement('div');
|
||||
line.className = 'grid-line ' + (minutes % 60 === 0 ? 'hour' : 'half');
|
||||
line.style.top = (slot * this.PX_PER_SLOT) + 'px';
|
||||
col.appendChild(line);
|
||||
}
|
||||
|
||||
// Click area for creating blocks
|
||||
const clickArea = document.createElement('div');
|
||||
clickArea.className = 'day-column-click-area';
|
||||
clickArea.addEventListener('click', (e) => {
|
||||
if (e.target !== clickArea) return;
|
||||
const rect = col.getBoundingClientRect();
|
||||
const y = e.clientY - rect.top;
|
||||
const minutes = this.snapMinutes(this.pxToMinutes(y));
|
||||
const endMinutes = Math.min(minutes + 60, this.END_HOUR * 60);
|
||||
App.createBlock(dateStr, this.formatTime(minutes), this.formatTime(endMinutes));
|
||||
});
|
||||
col.appendChild(clickArea);
|
||||
|
||||
columns.appendChild(col);
|
||||
});
|
||||
},
|
||||
|
||||
renderBlocks(blocks, programTypes) {
|
||||
// Remove existing blocks
|
||||
document.querySelectorAll('.schedule-block').forEach(el => el.remove());
|
||||
|
||||
const typeMap = {};
|
||||
programTypes.forEach(pt => { typeMap[pt.id] = pt; });
|
||||
|
||||
blocks.forEach(block => {
|
||||
const col = document.querySelector(`.day-column[data-date="${block.date}"]`);
|
||||
if (!col) return;
|
||||
|
||||
const pt = typeMap[block.type_id] || { color: '#94a3b8', name: '?' };
|
||||
const startMin = this.parseTime(block.start);
|
||||
const endMin = this.parseTime(block.end);
|
||||
const top = this.minutesToPx(startMin);
|
||||
const height = (endMin - startMin) * this.pxPerMinute;
|
||||
const isLight = this.isLightColor(pt.color);
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.className = 'schedule-block' + (isLight ? ' light-bg' : '');
|
||||
el.dataset.blockId = block.id;
|
||||
el.style.top = top + 'px';
|
||||
el.style.height = Math.max(height, 20) + 'px';
|
||||
el.style.backgroundColor = pt.color;
|
||||
|
||||
el.innerHTML = `
|
||||
<div class="block-color-bar" style="background:${this.darkenColor(pt.color)}"></div>
|
||||
<div class="block-title">${this.escapeHtml(block.title)}</div>
|
||||
<div class="block-time">${block.start} – ${block.end}</div>
|
||||
${block.responsible ? `<div class="block-responsible">${this.escapeHtml(block.responsible)}</div>` : ''}
|
||||
<div class="resize-handle"></div>
|
||||
`;
|
||||
|
||||
// Click to edit
|
||||
el.addEventListener('click', (e) => {
|
||||
if (e.target.classList.contains('resize-handle')) return;
|
||||
App.editBlock(block.id);
|
||||
});
|
||||
|
||||
col.appendChild(el);
|
||||
});
|
||||
|
||||
this.initInteract();
|
||||
},
|
||||
|
||||
initInteract() {
|
||||
if (typeof interact === 'undefined') return;
|
||||
|
||||
interact('.schedule-block').draggable({
|
||||
inertia: false,
|
||||
modifiers: [
|
||||
interact.modifiers.snap({
|
||||
targets: [interact.snappers.grid({
|
||||
x: 1, y: this.PX_PER_SLOT
|
||||
})],
|
||||
range: Infinity,
|
||||
relativePoint: { x: 0, y: 0 }
|
||||
}),
|
||||
interact.modifiers.restrict({
|
||||
restriction: 'parent',
|
||||
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
|
||||
})
|
||||
],
|
||||
listeners: {
|
||||
start: (event) => {
|
||||
event.target.style.zIndex = 50;
|
||||
event.target.style.opacity = '0.9';
|
||||
},
|
||||
move: (event) => {
|
||||
const target = event.target;
|
||||
const y = (parseFloat(target.dataset.dragY) || 0) + event.dy;
|
||||
target.dataset.dragY = y;
|
||||
const currentTop = parseFloat(target.style.top) || 0;
|
||||
const newTop = currentTop + event.dy;
|
||||
target.style.top = newTop + 'px';
|
||||
},
|
||||
end: (event) => {
|
||||
const target = event.target;
|
||||
target.style.zIndex = '';
|
||||
target.style.opacity = '';
|
||||
target.dataset.dragY = 0;
|
||||
|
||||
const blockId = target.dataset.blockId;
|
||||
const newTop = parseFloat(target.style.top);
|
||||
const height = parseFloat(target.style.height);
|
||||
|
||||
const startMin = Canvas.snapMinutes(Canvas.pxToMinutes(newTop));
|
||||
const endMin = Canvas.snapMinutes(Canvas.pxToMinutes(newTop + height));
|
||||
|
||||
App.updateBlockTime(blockId, Canvas.formatTime(startMin), Canvas.formatTime(endMin));
|
||||
}
|
||||
}
|
||||
}).resizable({
|
||||
edges: { bottom: '.resize-handle' },
|
||||
modifiers: [
|
||||
interact.modifiers.snap({
|
||||
targets: [interact.snappers.grid({
|
||||
x: 1, y: this.PX_PER_SLOT
|
||||
})],
|
||||
range: Infinity,
|
||||
relativePoint: { x: 0, y: 0 },
|
||||
offset: 'self'
|
||||
}),
|
||||
interact.modifiers.restrictSize({
|
||||
min: { width: 0, height: this.PX_PER_SLOT }
|
||||
})
|
||||
],
|
||||
listeners: {
|
||||
move: (event) => {
|
||||
const target = event.target;
|
||||
target.style.height = event.rect.height + 'px';
|
||||
},
|
||||
end: (event) => {
|
||||
const target = event.target;
|
||||
const blockId = target.dataset.blockId;
|
||||
const top = parseFloat(target.style.top);
|
||||
const height = parseFloat(target.style.height);
|
||||
|
||||
const startMin = Canvas.snapMinutes(Canvas.pxToMinutes(top));
|
||||
const endMin = Canvas.snapMinutes(Canvas.pxToMinutes(top + height));
|
||||
|
||||
App.updateBlockTime(blockId, Canvas.formatTime(startMin), Canvas.formatTime(endMin));
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
darkenColor(hex) {
|
||||
const h = hex.replace('#', '');
|
||||
const r = Math.max(0, parseInt(h.substring(0, 2), 16) - 30);
|
||||
const g = Math.max(0, parseInt(h.substring(2, 4), 16) - 30);
|
||||
const b = Math.max(0, parseInt(h.substring(4, 6), 16) - 30);
|
||||
return `rgb(${r},${g},${b})`;
|
||||
},
|
||||
|
||||
escapeHtml(str) {
|
||||
if (!str) return '';
|
||||
const d = document.createElement('div');
|
||||
d.textContent = str;
|
||||
return d.innerHTML;
|
||||
}
|
||||
};
|
||||
@@ -1,33 +1,31 @@
|
||||
/**
|
||||
* JSON import/export for Scenar Creator.
|
||||
* JSON import/export for Scenar Creator v3.
|
||||
*/
|
||||
|
||||
function exportJson() {
|
||||
if (!window.currentDocument) {
|
||||
showStatus('No document to export', 'error');
|
||||
const doc = App.getDocument();
|
||||
if (!doc) {
|
||||
App.toast('Žádný scénář k exportu', 'error');
|
||||
return;
|
||||
}
|
||||
const json = JSON.stringify(window.currentDocument, null, 2);
|
||||
const json = JSON.stringify(doc, null, 2);
|
||||
const blob = new Blob([json], { type: 'application/json' });
|
||||
API.downloadBlob(blob, 'scenar_export.json');
|
||||
App.toast('JSON exportován', 'success');
|
||||
}
|
||||
|
||||
function handleJsonImport(event) {
|
||||
const file = event.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
function importJson(file) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function (e) {
|
||||
try {
|
||||
const doc = JSON.parse(e.target.result);
|
||||
if (!doc.event || !doc.blocks || !doc.program_types) {
|
||||
throw new Error('Invalid ScenarioDocument format');
|
||||
throw new Error('Neplatný formát ScenarioDocument');
|
||||
}
|
||||
window.currentDocument = doc;
|
||||
showImportedDocument(doc);
|
||||
showStatus('JSON imported successfully', 'success');
|
||||
App.loadDocument(doc);
|
||||
App.toast('JSON importován', 'success');
|
||||
} catch (err) {
|
||||
showStatus('JSON import error: ' + err.message, 'error');
|
||||
App.toast('Chyba importu: ' + err.message, 'error');
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
|
||||
138
app/static/sample.json
Normal file
138
app/static/sample.json
Normal file
@@ -0,0 +1,138 @@
|
||||
{
|
||||
"version": "1.0",
|
||||
"event": {
|
||||
"title": "Zimní výjezd oddílu",
|
||||
"subtitle": "Víkendový zážitkový kurz pro mladé",
|
||||
"date": "2026-03-01",
|
||||
"location": "Chata Horní Lhota"
|
||||
},
|
||||
"program_types": [
|
||||
{
|
||||
"id": "morning",
|
||||
"name": "Ranní program",
|
||||
"color": "#F97316"
|
||||
},
|
||||
{
|
||||
"id": "main",
|
||||
"name": "Hlavní program",
|
||||
"color": "#3B82F6"
|
||||
},
|
||||
{
|
||||
"id": "rest",
|
||||
"name": "Odpočinek",
|
||||
"color": "#22C55E"
|
||||
}
|
||||
],
|
||||
"blocks": [
|
||||
{
|
||||
"id": "b1",
|
||||
"date": "2026-03-01",
|
||||
"start": "08:00",
|
||||
"end": "08:30",
|
||||
"title": "Budíček a rozcvička",
|
||||
"type_id": "morning",
|
||||
"responsible": "Kuba",
|
||||
"notes": "Venkovní rozcvička, pokud počasí dovolí"
|
||||
},
|
||||
{
|
||||
"id": "b2",
|
||||
"date": "2026-03-01",
|
||||
"start": "08:30",
|
||||
"end": "09:00",
|
||||
"title": "Snídaně",
|
||||
"type_id": "rest",
|
||||
"responsible": "Kuchyň",
|
||||
"notes": null
|
||||
},
|
||||
{
|
||||
"id": "b3",
|
||||
"date": "2026-03-01",
|
||||
"start": "09:00",
|
||||
"end": "10:30",
|
||||
"title": "Stopovací hra v lese",
|
||||
"type_id": "main",
|
||||
"responsible": "Lucka",
|
||||
"notes": "Rozdělení do 4 skupin, mapky připraveny"
|
||||
},
|
||||
{
|
||||
"id": "b4",
|
||||
"date": "2026-03-01",
|
||||
"start": "10:30",
|
||||
"end": "11:00",
|
||||
"title": "Svačina a pauza",
|
||||
"type_id": "rest",
|
||||
"responsible": null,
|
||||
"notes": null
|
||||
},
|
||||
{
|
||||
"id": "b5",
|
||||
"date": "2026-03-01",
|
||||
"start": "11:00",
|
||||
"end": "12:30",
|
||||
"title": "Stavba iglú / přístřešků",
|
||||
"type_id": "main",
|
||||
"responsible": "Petr",
|
||||
"notes": "Soutěž o nejlepší stavbu, potřeba lopaty a plachty"
|
||||
},
|
||||
{
|
||||
"id": "b6",
|
||||
"date": "2026-03-01",
|
||||
"start": "12:30",
|
||||
"end": "14:00",
|
||||
"title": "Oběd a polední klid",
|
||||
"type_id": "rest",
|
||||
"responsible": "Kuchyň",
|
||||
"notes": "Guláš + čaj"
|
||||
},
|
||||
{
|
||||
"id": "b7",
|
||||
"date": "2026-03-01",
|
||||
"start": "14:00",
|
||||
"end": "16:00",
|
||||
"title": "Orientační běh",
|
||||
"type_id": "main",
|
||||
"responsible": "Honza",
|
||||
"notes": "Trasa 3 km, kontroly rozmístěny od rána"
|
||||
},
|
||||
{
|
||||
"id": "b8",
|
||||
"date": "2026-03-01",
|
||||
"start": "16:00",
|
||||
"end": "16:30",
|
||||
"title": "Svačina",
|
||||
"type_id": "rest",
|
||||
"responsible": null,
|
||||
"notes": null
|
||||
},
|
||||
{
|
||||
"id": "b9",
|
||||
"date": "2026-03-01",
|
||||
"start": "16:30",
|
||||
"end": "18:00",
|
||||
"title": "Workshopy dle výběru",
|
||||
"type_id": "morning",
|
||||
"responsible": "Lucka + Petr",
|
||||
"notes": "Uzlování / Orientace s buzolou / Kresba mapy"
|
||||
},
|
||||
{
|
||||
"id": "b10",
|
||||
"date": "2026-03-01",
|
||||
"start": "18:00",
|
||||
"end": "19:00",
|
||||
"title": "Večeře",
|
||||
"type_id": "rest",
|
||||
"responsible": "Kuchyň",
|
||||
"notes": null
|
||||
},
|
||||
{
|
||||
"id": "b11",
|
||||
"date": "2026-03-01",
|
||||
"start": "19:00",
|
||||
"end": "21:00",
|
||||
"title": "Noční hra – Světlušky",
|
||||
"type_id": "main",
|
||||
"responsible": "Honza + Kuba",
|
||||
"notes": "Potřeba: čelovky, reflexní pásky, vysílačky"
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user