diff --git a/src/MultiFlexi/UiII/AppShell.php b/src/MultiFlexi/UiII/AppShell.php new file mode 100644 index 00000000..50b61c2e --- /dev/null +++ b/src/MultiFlexi/UiII/AppShell.php @@ -0,0 +1,48 @@ + 'app-shell'] + $properties); + + // Vytvoření postranního panelu + $this->sidebar = new Sidebar(); + $this->addItem($this->sidebar); + + // Vytvoření hlavní obsahové oblasti + $this->contentArea = $this->addItem(new \Ease\Html\MainTag(null, ['class' => 'content-area'])); + $this->pageMax = $this->contentArea->addItem(new \Ease\Html\DivTag(null, ['class' => 'page-max'])); + } + + /** + * Přidá obsah do hlavní části stránky. + * + * @param mixed $content Obsah k přidání. + * + * @return mixed + */ + public function addContent($content) + { + return $this->pageMax->addItem($content); + } +} diff --git a/src/MultiFlexi/UiII/RunTemplatePage.php b/src/MultiFlexi/UiII/RunTemplatePage.php new file mode 100644 index 00000000..1467198b --- /dev/null +++ b/src/MultiFlexi/UiII/RunTemplatePage.php @@ -0,0 +1,205 @@ +addItem($this->createHeader()); + + // Filters card + $this->addItem($this->createFiltersCard()); + + // Table + chart row + $row = $this->addItem(new \Ease\TWB4\Row()); + $col1 = $row->addColumn('12'); + $col1->addItem($this->createTableCard()); + $col2 = $row->addColumn('12'); + $col2->addItem($this->createChartCard()); + + // Footer actions + $this->addItem($this->createFooterActions()); + + // Modal + \Ease\TWB4\WebPage::singleton()->body->addItem($this->createDetailModal()); + } + + private function createHeader() + { + $header = new \Ease\Html\DivTag(null, ['class' => 'd-flex align-items-center mb-3']); + $toggleBtn = ''; + $header->addItem($toggleBtn . '

Výpisy do Pohody 925 – 5230011904

'); + $actions = $header->addItem(new \Ease\Html\DivTag(null, ['class' => 'card-header-actions'])); + $actions->addItem(new \Ease\TWB4\SubmitButton('Spustit', 'primary', ['id' => 'btnRun'])); + $actions->addItem(new \Ease\TWB4\LinkButton('?refresh=1', 'Obnovit', 'outline-secondary', ['id' => 'btnRefresh'])); + + return $header; + } + + private function createFiltersCard() + { + $card = new \Ease\TWB4\Card(null, ['class' => 'mb-3']); + $form = ' +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+ + +
+
+ + +
+
'; + $card->addItem(new \Ease\TWB4\CardBody($form)); + + return $card; + } + + private function createTableCard() + { + $table = ' +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DatumProtiúčet / PopisVariabilní symbolČástkaStavAkce
13.4.2023T-shirt s potiskem123456-12,00Exportováno
21.3.2023Trhovin lenyd654321-20,00Čeká
31.3.2023Počtávea98765451,00Exportováno
+
'; + + $card = new \Ease\TWB4\Card(null, ['class' => 'mb-3']); + $card->addItem(new \Ease\TWB4\CardBody($table)); + + return $card; + } + + private function createChartCard() + { + $chartHeader = ' +
+
Statistiky za období
+
+ + + +
+
'; + + $chartBody = ''; + $card = new \Ease\TWB4\Card(null, ['class' => 'chart-card mb-4']); + $card->addItem(new \Ease\TWB4\CardBody($chartHeader.$chartBody)); + + return $card; + } + + private function createFooterActions() + { + $footer = new \Ease\Html\DivTag(null, ['class' => 'd-flex justify-content-between align-items-center mt-3']); + $footer->addItem('
Zobrazeno 1–20 z 456 položek
'); + $footer->addItem(' + '); + + return $footer; + } + + private function createDetailModal() + { + $modalContent = ' +
+
ID
+
925-5230011904-20230413-1
+
Datum
+
13.4.2023 10:07
+
Trvání
+
0.2s
+
Výstup
+
Soubor: výpis-20230413.xml
+
+
+
Log
+ 
+[INFO] 2023-04-13 10:07: Started...
+[INFO] 2023-04-13 10:07: Exported 12 items
+[ERROR] 2023-04-13 10:07: Missing mapping for account ...
+
'; + + $modal = new \Ease\TWB4\Modal( + 'Detail běhu', + $modalContent, + ['id' => 'detailModal', 'size' => 'lg'] + ); + $modal->modalFooter->addItem(new \Ease\TWB4\LinkButton('#', 'Stáhnout výstup', 'primary')); + + return $modal; + } +} diff --git a/src/MultiFlexi/UiII/Sidebar.php b/src/MultiFlexi/UiII/Sidebar.php new file mode 100644 index 00000000..eade2624 --- /dev/null +++ b/src/MultiFlexi/UiII/Sidebar.php @@ -0,0 +1,23 @@ + 'sidebar d-flex flex-column'] + $properties); + $this->addItem(new \Ease\Html\H3Tag('DARAM', ['class' => 'text-danger mb-4'])); + + $nav = $this->addItem(new \Ease\Html\NavTag(null, ['class' => 'nav flex-column'])); + $nav->addItem(new \Ease\Html\ATag('#', ' Dashboard', ['class' => 'nav-link active'])); + $nav->addItem(new \Ease\Html\ATag('#', ' Runs', ['class' => 'nav-link'])); + $nav->addItem(new \Ease\Html\ATag('#', ' Logs', ['class' => 'nav-link'])); + $nav->addItem(new \Ease\Html\ATag('#', ' Statistiky', ['class' => 'nav-link'])); + $nav->addItem(new \Ease\Html\ATag('#', ' Nastavení', ['class' => 'nav-link'])); + + $this->addItem('
verze MultiFlexi • lokální
'); + } +} diff --git a/src/MultiFlexi/UiII/WebPage.php b/src/MultiFlexi/UiII/WebPage.php new file mode 100644 index 00000000..13b165db --- /dev/null +++ b/src/MultiFlexi/UiII/WebPage.php @@ -0,0 +1,77 @@ +addCss('https://stackpath.bootstrapcdn.com/bootstrap/4.6.2/css/bootstrap.min.css'); + $this->addCss('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'); // Font Awesome 6 + $this->addCss( + ' + html, body { height: 100%; } + .app-shell { min-height: 100vh; display: flex; background: #f7f8fa; } + .sidebar { + width: 220px; + background: #fff; + border-right: 1px solid #e6e9ef; + padding: 1.25rem 0.75rem; + position: sticky; + top: 0; + height: 100vh; + transition: margin-left 0.3s, width 0.3s; + } + .sidebar.collapsed { margin-left: -220px; } + .content-area { + flex: 1; + padding: 1.25rem; + display: flex; + justify-content: center; + transition: margin-left 0.3s; + } + .content-area.expanded { + margin-left: 0; + } + .page-max { width: 100%; max-width: 1200px; } + .card-header-actions { display:flex; gap: 0.5rem; align-items:center; } + @media (max-width: 768px) { + .sidebar { display:none; } + } + ' + ); + + // Vytvoření hlavní obálky + $this->appShell = new AppShell(); + $this->body->addItem($this->appShell); + } + + /** + * Přidá do stránky základní JavaScript. + */ + public function finalize(): void + { + // Přidání základních JS souborů na konec + $this->addJavaScript('https://code.jquery.com/jquery-3.5.1.slim.min.js', null, true); + $this->addJavaScript('https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js', null, true); + $this->addJavaScript('https://stackpath.bootstrapcdn.com/bootstrap/4.6.2/js/bootstrap.min.js', null, true); + $this->addJavaScript('https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js', null, true); + + parent::finalize(); + } +} diff --git a/src/runtemplate_new.php b/src/runtemplate_new.php new file mode 100644 index 00000000..03ab562f --- /dev/null +++ b/src/runtemplate_new.php @@ -0,0 +1,50 @@ +appShell->addContent(new RunTemplatePage()); + +// Přidání JavaScriptu pro graf a sbalování sidebaru +$page->addJavaScript(" + // Sample Chart.js config + var ctx = document.getElementById('runsChart').getContext('2d'); + var runsChart = new Chart(ctx, { + type: 'line', + data: { + labels: ['Fri','Mon','Tue','Wed','Thu','Fri','Sat','Tue'], + datasets: [{ + label: 'Běhy', + data: [2, 12, 8, 10, 22, 18, 24, 12], + fill: false, + borderWidth: 2, + pointRadius: 3, + lineTension: 0.2 + }] + }, + options: { + legend: { display: false }, + scales: { + yAxes: [{ ticks: { beginAtZero: true } }] + }, + responsive: true, + maintainAspectRatio: false + } + }); + + // Sidebar toggle logic + $(document).on('click', '.sidebar-toggle-btn', function() { + $('.sidebar').toggleClass('collapsed'); + $('.content-area').toggleClass('expanded'); + }); +"); + +// Vykreslení stránky do souboru +file_put_contents('/home/jules/verification/runtemplate.html', $page->draw(false));