Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

--- techdoc:diagramyidc [28.08.2025 14:21] – turych
+++ techdoc:diagramyidc [29.08.2025 08:24] (aktuální) – turych
@@ Řádek 1: / Řádek 1: @@
 ==== Diagramy s toky dokladů ====
-Ve vstupních obrazovkách nebo navigačních uživatelských stránkách lze jednoduše zobrazovat i diagramy s toky dokladů s možností prokliku na formuláře jednotlivých typů dokladů. Jedná se o intuitivnější a jednodušší způsob, než je hledání daného formuláře ve stromu činností. Vstupní obrazovky mohou vypadat např. takto:\\
+Ve vstupních obrazovkách nebo navigačních uživatelských stránkách lze jednoduše zobrazovat i diagramy. K jejich tvorbě je použit nástroj Mermaid ([[https://mermaid.js.org]]). Kromě diagramů tak lze stejným způsobem vytvářet i sequence diagramy, Ganttovy diagramy, ERM diagramy a další.\\
-{{ :images:diagramy:tokdokldiagram1.jpg?direct&400 | Diagram 1}}\\
+Diagramy použité jako jednoduchý rozcestník pro uživatele mohou zobrazovat toky dokladů s možností prokliku na formuláře. Jedná se o intuitivnější a jednodušší způsob, než je hledání daného formuláře ve stromu činností. Vstupní obrazovky mohou vypadat např. takto:\\
-{{ :images:diagramy:tokdokldiagram2.jpg?direct&400 | Diagram 2}}\\
+{{ :images:diagramy:tokdokldiagram2.jpg?direct&400 | Diagram 1}}\\
-Celý diagram je samozřejmě dynamický nejen obsahově, ale i graficky. Po obsahové stránce může stejný diagram zobrazovat různé popisy a odkazy podle přihlášeného uživatele a jeho oprávnění, popř. jazykového nastavení. Po stránce grafické reaguje např. na změnu velikosti stránky či na lupu v prohlížeči. Všechny bloky v diagramu se také automaticky zvýrazní po najetí kurzorem myši.
+{{ :images:diagramy:tokdokldiagram1.jpg?direct&400 | Diagram 2}}\\
-=== Předloha diagramu - soubor .IDC ===
+Celý diagram je samozřejmě dynamický nejen obsahově, ale i graficky. Protože je diagram realizován jako běžný soubor ve webu, platí pro něj stejná pravidla, jako pro běžné HTML předlohy včetně přetěžování aplikačním webem nebo překladů. Po grafické stránce se jedná o kompletně stylovatelné prvky, jejichž design si lze přizpůsobit v uživatelském CSS souboru. Všechny bloky v diagramu se také automaticky zvýrazní po najetí kurzorem myši.\\
-Jako předloha stránky s diagramem slouží běžná IDC/HTX sestava, nejedná se tedy o žádné speciální rozšíření technologie ESO9. K tvorbě stránek s diagramy tedy postačí znalosti stávajících implementačních postupů ESO9.\\
+V rámci ESO9Start jsou k dispozici ukázkové diagramy v adresáři //Users//, předlohy //tokdokl1.mmd// a //tokdokl2.mmd//.
-Soubor .IDC obsahuje datový zdroj, v němž jsou uvedeny popisy bloků v diagramu a adresy URL, na něž se má po kliknutí na blok přejít. Pro jednoduchost si ukážeme tvorbu diagramu z {{ :images:diagramyIDC:DiagramyIDC_1.png?linkonly | prvního obrázku}}:\\
+=== Předloha diagramu - soubor .MMD ===
+Jako předloha stránky s diagramem slouží soubory typu MMD, které obsahují popis diagramu v markdown syntaxi (podrobněji viz produktový web Mermaid). MMD soubor se odkazuje běžným způsobem přes parametr TURL (např.//esoform.asp?TURL=Users/tokdokl1.mmd//). Oproti standardní syntaxi Mermaid diagramů je pro účely ESO9 v záhlaví MMD souboru uveden pouze nadpis uvozený dvěma hashmarky (#).\\
+Příklad definice diagramu z {{ :images:diagramy:tokdokldiagram2.jpg?linkonly | prvního obrázku}}:\\
 <code>
-Datasource: ESO9
+##Ukázkový diagram toku dokladů v ESO9##
-SQLStatement: SELECT 'Prodejní' + CHAR(13)+CHAR(10) + 'objednávka' as ITEM1,
+---
-+'Faktura' + CHAR(13)+CHAR(10) + 'vydaná' as ITEM2,
+config:
-+'Skladová' + CHAR(13)+CHAR(10) + 'výdejka' as ITEM3,
+  theme: 'base'
-+ 'esoform.asp?TPage=PRODEJ/POBJ.HTM&StartFilter=2&HDOKSTYLE=&SDOKSTYLE=&WHERE=WHERE IDTYPDOK=52 AND IDHDOK_VZOR=257&IDTYPDOK_STAVHDOK=52&ORDERBY=ORDER BY CIS_DOK&VZORTEXT=Prodejní objednávka tuzemská&RelType=PARAMETERS&CINNOST=2. 2. 1. 2&DataAction=LAST&Title=Prodejní objednávka tuzemská' as ITEM1URL,
+  themeVariables:
-+ 'esoform.asp?TPage=PRODEJ/FAV.HTM&StartFilter=2&HDOKSTYLE=/*Neuhrazené po splatnosti FVU*/  CASE WHEN (not(dbo.fn_NespZavPohlVal(IDHDOK) <= 0)) AND DTSPLATNO < GETDATE() THEN dbo.fnVarchar_Concatenate(CHAR(35), ''FF0000'') ELSE NULL END AS MF_ROWSTYLE,&SDOKSTYLE=&WHERE=WHERE IDTYPDOK=7 AND IDHDOK_VZOR=7&IDTYPDOK_STAVHDOK=7&ORDERBY=ORDER BY CIS_DOK&VZORTEXT=FVU tuzemská&RelType=PARAMETERS&CINNOST=2. 2. 3. 1&DataAction=LAST&Title=FVU tuzemská' as ITEM2URL,
+    primaryColor: '#399BCA'
-+ 'esoform.asp?Tpage=sklad/vydejkas.htm&StartFilter=2&HDOKSTYLE=/*Záporné výdejky - STORNO*/  CASE WHEN HDKUHRADEVAL < 0 THEN dbo.fnVarchar_Concatenate(CHAR(35), ''FF0000'') ELSE NULL END AS MF_ROWSTYLE,&SDOKSTYLE=&WHERE=WHERE IDTYPDOK = 9 and idhdok_vzor = 3485&ORDERBY=ORDER BY CIS_DOK&IDTYPDOK_STAVHDOK=9&vzortext=SVU - sklad 30 - prodej do tuzemska&RelType=Parameters&CINNOST=2. 3. 2. 1&dataaction=last&title=SVU - sklad 30 - prodej do tuzemska' as ITEM3URL
+    primaryTextColor: '#FFFFFF'
-Template: User1StartPage.htx
+    lineColor: '#000000'
-</code>
+---
-Prvky //ITEMx// obsahují popisy bloků (včetně požadovaného odřádkování textu), prvky //ITEMxURL// obsahují URL činností/formulářů, na něž uživatel po kliknutí přejde. V uvedeném příkladu jsou adresy zadání napevno z vybraných činností ESO9 Start, vhodnější by samozřejmě bylo použít dynamické načtení typů/vzorů dokladu pro přihlášeného uživatele a to včetně překladů do cizích jazyků.\\
+  graph LR
-=== Předloha diagramu - soubor .HTX ===
+  A[Prodejní objednávka] --> B[Faktura vydaná]
-Pro vizuální popis IDC sestav slouží soubory s příponou .HTX. Kromě očekávatelného bloku //<%begindetail%>// / //<%enddetail%>// bude v tomto případě obsahovat i několik HTML TAGů. Celý zdrojový kód stránky s jednoduchým diagramem bude vypadat následovně:\\
+  B --> C[Skladová výdejka fyzická]
-<code>
-<!DOCTYPE HTML>
+  click A "esoform.asp?TPage=PRODEJ/POBJ.HTM&StartFilter=2&HDOKSTYLE=&SDOKSTYLE=&WHERE=WHERE IDTYPDOK=52 AND IDHDOK_VZOR=257&IDTYPDOK_STAVHDOK=52&ORDERBY=ORDER BY CIS_DOK&VZORTEXT=Prodejní objednávka tuzemská&RelType=PARAMETERS&CINNOST=2. 2. 1. 2&DataAction=LAST&Title=Prodejní objednávka tuzemská"
-<html>
+  click B "esoform.asp?TPage=PRODEJ/FAV.HTM&StartFilter=2&HDOKSTYLE=/*Neuhrazené po splatnosti FVU*/  CASE WHEN (not(dbo.fn_NespZavPohlVal(IDHDOK) <= 0)) AND DTSPLATNO < GETDATE() THEN dbo.fnVarchar_Concatenate(CHAR(35), ''FF0000'') ELSE NULL END AS MF_ROWSTYLE,&SDOKSTYLE=&WHERE=WHERE IDTYPDOK=7 AND IDHDOK_VZOR=7&IDTYPDOK_STAVHDOK=7&ORDERBY=ORDER BY CIS_DOK&VZORTEXT=FVU tuzemská&RelType=PARAMETERS&CINNOST=2. 2. 3. 1&DataAction=LAST&Title=FVU tuzemská"
+  click C "esoform.asp?Tpage=sklad/vydejkas.htm&StartFilter=2&HDOKSTYLE=/*Záporné výdejky - STORNO*/  CASE WHEN HDKUHRADEVAL < 0 THEN dbo.fnVarchar_Concatenate(CHAR(35), ''FF0000'') ELSE NULL END AS MF_ROWSTYLE,&SDOKSTYLE=&WHERE=WHERE IDTYPDOK = 9 and idhdok_vzor = 3485&ORDERBY=ORDER BY CIS_DOK&IDTYPDOK_STAVHDOK=9&vzortext=SVU - sklad 30 - prodej do tuzemska&RelType=Parameters&CINNOST=2. 3. 2. 1&dataaction=last&title=SVU - sklad 30 - prodej do tuzemska"
-<head>
+  classDef largeBlock font-size:24px,padding:30px;
-  <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
+  class A,B,C largeBlock;
-  <title>Vstupní stránka uživatele 1</title>
-</head>
-<body>
-<script src="../eso9supp/LIB/script/UserStartPage.js">
-//odkaz na skript s obecnými funkcemi pro práci s bloky
-</script>
-<script>
-  function drawArrows(e){
-    drawArrowBetweenCanvases('arr1', 'rect1', 'rect2', FROM_BLOCK_RIGHT, TO_BLOCK_LEFT, LINE_TYPE_NORMAL)
-    drawArrowBetweenCanvases('arr2', 'rect2', 'rect3', FROM_BLOCK_RIGHT, TO_BLOCK_LEFT, LINE_TYPE_NORMAL)
-  };
-</script>
-<style>
-  #rect1 { top: 25%; left:10%; }
-  #rect2 { top: 25%; left:40%; }
-  #rect3 { top: 25%; left:70%; }
-  #ESO_BodyRep { background-image: url('./images/eso9_rgb.png'); }
-</style>
-<div class="ESO_BodyRep" id="ESO_BodyRep">
-  <canvas id="arr1"></canvas>
-  <canvas id="arr2"></canvas>
-  <canvas id="rect1"></canvas>
-  <canvas id="rect2"></canvas>
-  <canvas id="rect3"></canvas>
-<%begindetail%>
-  <span id="item1"><% ITEM1 %></span>
-  <span id="item2"><% ITEM2 %></span>
-  <span id="item3"><% ITEM3 %></span>
-  <span id="item1url"><% ITEM1URL %></span>
-  <span id="item2url"><% ITEM2URL %></span>
-  <span id="item3url"><% ITEM3URL %></span>
-<%enddetail%>
-</div>
-</body>
-</html>
 </code>
-Projdeme si nyní celý uvedený kód a zmíníme odlišnosti oproti běžným IDC sestavám tak, jak je známe z ESO9. Jednotlivé body nebudou reflektovat pořadí ve zdrojovém kódu, ale logiku tvorby a zpracování těchto sestav.\\
+Jednotlivé bloky jsou označeny písmeny //A-Z//, prokliky na formuláře s daným typem dokladu jsou pak uvozeny klíčovým slovem //click A-Z//.\\
-  * Odkaz na skriptovací soubor //UserStartPage.js// - zajišťuje vykreslení vlastního grafického obsahu stránky. Musí být uveden v každé .HTX stránce, která zobrazuje diagramy.
-  * HTML TAG //DIV// s CSS třídou (a ID) //ESO_BodyRep// - obsahuje vlastní HTML kód každé IDC sestavy.
-  * Sekce //<%begindetail%>// / //<%enddetail%>// obsahuje všechny datové položky z IDC souboru uzavřené do HTML TAGu //SPAN//. Každý z prvků má kromě svého textu i ID, které je tvořeno názvem datové IDC položky, tj. //ITEMx// nebo //ITEMxURL//. Pokud obsahuje datová položka bloku (ID=//ITEMx//) navíc atribut //data-importance="1"//, bude takový blok vykreslen se zvýrazněným okrajem. V diagramu tak lze zvýraznit nejdůležitější doklady daného procesu.
-  * HTML TAGy //CANVAS// - slouží k vlastnímu vykreslení jednotlivých bloků a šipek, které je spojují. Prvky typu blok mají //ID="recX"//, prvky typu šipka mají //ID="arrX"//. HTX soubor musí obsahovat tolik bloků, kolik je datových prvků typu ITEM v .IDC souboru a tolik šipek, kolik je potřeba pro daný diagram.
-  * Sekce //<style>// - obsahuje vlastní grafické rozmístění bloků v diagramu. Pomocí atributů //TOP// a //LEFT// definuje pozici levého horního okraje bloku v rámci celé stránky. Pozici je třeba zadávat relativně v procentech tak, aby ji bylo možné dynamicky měnit podle aktuální velikosti stránky v prohlížeči. V našem příkladu jsou všechny všechny bloky umístěné v linii čtvrtiny výšky stránky (top: 25%) a rovnoměrně rozloženy na šířku s odstupem 30-ti procent.
-  * Odkaz na obrázek s pozadím stránky - dává autorovi předlohy možnost použít na pozadí logo vlastní firmy namísto standardně použitého loga ESO9. Obrázek se nachází standardně ve složce //IMAGES// v aplikačním webu.
-  * Skript s funkcí //drawArrows// - slouží k vykreslení šipek spojujících jednotlivé bloky. Zatímco bloky se vykreslí automaticky na své pozice dané stylem, šipky je třeba zadat explicitně tak, jak si je autor přeje v diagramu mít. Bez uvedené funkce se v diagramu zobrazí pouze bloky bez spojovacích šipek.
-  * Funkce //drawArrowBetweenCanvases// vykreslí jednu šipku spojující dva bloky. Parametry této funkce jsou:
-    * ID prvku typu //CANVAS// se šipkou, např.//arr1//. Pro každou šipku musí být použit unikátní prvek typu //CANVAS//.
-    * ID prvku typu //CANVAS// s blokem, z něhož šipka vychází, např.//rect1//.
-    * ID prvku typu //CANVAS// s blokem, v němž šipka končí, např.//rect1//.
-    * Strana počátečního bloku, odkud šipka vychází. Parametr může nabývat čtyř hodnot:
-      * //FROM_BLOCK_BOTTOM// - ze spodní hrany bloku
-      * //FROM_BLOCK_TOP// - z horní hrany bloku
-      * //FROM_BLOCK_LEFT// - z levé hrany bloku
-      * //FROM_BLOCK_RIGHT// - z pravé hrany bloku
-    * Strana koncového bloku, kde šipka končí. Parametr může nabývat čtyř hodnot:
-      * //TO_BLOCK_BOTTOM// - do spodní hrany bloku
-      * //TO_BLOCK_TOP// - do horní hrany bloku
-      * //TO_BLOCK_LEFT// - do levé hrany bloku
-      * //TO_BLOCK_RIGHT// - do pravé hrany bloku
-    * Typ čáry šipky. Parametr může nabývat dvou hodnot:
-      * //LINE_TYPE_NORMAL// - normální (plná) čára
-      * //LINE_TYPE_DASHED// - čerchovaná čára
-=== Předloha složitějšího diagramu - soubor .HTX ===
-Pro lepší představu si ukážeme předlohu mírně složitějšího diagramu z {{ :images:diagramyIDC:DiagramyIDC_2.png?linkonly | druhého obrázku}}:\\
-<code>
-<!DOCTYPE HTML>
-<html>
-<head>
-<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
-<title>Vstupní stránka uživatele 2</title>
-</head>
-<body>
-<script src="../eso9supp/LIB/script/UserStartPage.js">
-//odkaz na skript s obecnými funkcemi pro práci s bloky
-</script>
-<script>
-  function drawArrows(e){
-    //šipka 1 - mezi bloky 1-2
-    drawArrowBetweenCanvases('arr1', 'rect1', 'rect2', FROM_BLOCK_BOTTOM, TO_BLOCK_TOP, LINE_TYPE_NORMAL)
-    //šipka 2 - mezi  bloky 2-3
-    drawArrowBetweenCanvases('arr2', 'rect2', 'rect3', FROM_BLOCK_LEFT, TO_BLOCK_TOP, LINE_TYPE_NORMAL)
-    //šipka 3 - viz šipka 2 zrcadlově otočená
-    drawArrowBetweenCanvases('arr3', 'rect2', 'rect6', FROM_BLOCK_RIGHT, TO_BLOCK_TOP, LINE_TYPE_NORMAL)
-    //šipka 4 -  mezi  bloky 3-4
-    drawArrowBetweenCanvases('arr4', 'rect3', 'rect4', FROM_BLOCK_BOTTOM, TO_BLOCK_TOP, LINE_TYPE_NORMAL)
-    //šipka 5 - viz šipka 4 zrcadlově otočené
-    drawArrowBetweenCanvases('arr5', 'rect6', 'rect7', FROM_BLOCK_BOTTOM, TO_BLOCK_TOP, LINE_TYPE_NORMAL)
-    //šipky mezi bloky 4-5 a 7-5
-    drawArrowBetweenCanvases('arr6', 'rect4', 'rect5', FROM_BLOCK_BOTTOM, TO_BLOCK_LEFT, LINE_TYPE_NORMAL)
-    drawArrowBetweenCanvases('arr7', 'rect7', 'rect5', FROM_BLOCK_BOTTOM, TO_BLOCK_RIGHT, LINE_TYPE_NORMAL)
-    //šipky mezi bloky 2-5
-    drawArrowBetweenCanvases('arr8', 'rect2', 'rect5', FROM_BLOCK_BOTTOM, TO_BLOCK_TOP, LINE_TYPE_DASHED)
-    //šipky mezi bloky 2-4
-    drawArrowBetweenCanvases('arr9', 'rect2', 'rect4', FROM_BLOCK_BOTTOM, TO_BLOCK_RIGHT, LINE_TYPE_DASHED)
-  };
-</script>
-<style>
-  #rect1 { top: 10%; left:40%; }
-  #rect2 { top: 25%; left:40%; }
-  #rect3 { top: 40%; left:10%; }
-  #rect4 { top: 55%; left:10%; }
-  #rect5 { top: 70%; left:40%; }
-  #rect6 { top: 40%; left:70%; }
-  #rect7 { top: 55%; left:70%; }
-  #ESO_BodyRep { background-image: url('./images/eso9_rgb.png'); }
-</style>
-<div class="ESO_BodyRep" id="ESO_BodyRep">
-  <canvas id="arr1"></canvas>
-  <canvas id="arr2"></canvas>
-  <canvas id="arr3"></canvas>
-  <canvas id="arr4"></canvas>
-  <canvas id="arr5"></canvas>
-  <canvas id="arr6"></canvas>
-  <canvas id="arr7"></canvas>
-  <canvas id="arr8"></canvas>
-  <canvas id="arr9"></canvas>
-  <canvas id="rect1"></canvas>
-  <canvas id="rect2"></canvas>
-  <canvas id="rect3"></canvas>
-  <canvas id="rect4"></canvas>
-  <canvas id="rect5"></canvas>
-  <canvas id="rect6"></canvas>
-  <canvas id="rect7"></canvas>
-<%begindetail%>
-  <span id="item1"><% ITEM1 %></span>
-  <span id="item2" data-importance="1"><% ITEM2 %></span>
-  <span id="item3"><% ITEM3 %></span>
-  <span id="item4"><% ITEM4 %></span>
-  <span id="item5" data-importance="1"><% ITEM5 %></span>
-  <span id="item6"><% ITEM6 %></span>
-  <span id="item7"><% ITEM7 %></span>
-  <span id="item1url"><% ITEM1URL %></span>
-  <span id="item2url"><% ITEM2URL %></span>
-  <span id="item3url"><% ITEM3URL %></span>
-  <span id="item4url"><% ITEM4URL %></span>
-  <span id="item5url"><% ITEM5URL %></span>
-  <span id="item6url"><% ITEM6URL %></span>
-  <span id="item7url"><% ITEM7URL %></span>
-<%enddetail%>
-</div>
-</body>
-</html>
-</code>