Implementation instructions
//****************************** // Navbar //****************************** 1. A service megnyitásakor a client letölti a navbar-t a "getnavbar" HTTP kérésben. 2. Az API végigiterál az ozekiconfig mappa PHP állományain, majd a tartalmuk alapján előállítja lentebb ismertetett választ. http://inside.jobs.ozeki.hu/p_7832-admin-console.html 3. A client a válaszból a parser.ts/parse függvény segítségével kinyeri a FormItem listát. 4. A FormItem listát átadva a Navbar komponensnek az kirazolja az elemeket figyelembe véve azok "section" és "order" paramétereit. A navbar elemek kirajzolására azt a komponenst kell használni, ami most is megjeleníti a sidebar elemeket. 5. A navbar-t a sidebar elemek alá kell kirajzolni. Method: POST URL: ?srv=conversation&api=chatcontrolpanel Headers: Content-Type: application/json Ozeki-User: userid Ozeki-Signature: signature Ozeki-Client-Version: 1 POST data: { "timestamp": "2024-08-03 10:07:00", "action": "getnavbar", } Response: { "status": "OK", "errormessage": "", "items": [ { //"visible": true,//ha false, akkor vissza sem kell adni a kérésben "section": "Display", "label": "Labeling", "order": 10, "icon": "/ozekiservices/labeling/attachments/labeling.svg", //"url": "/index.php?api=chatcontrolpanel",//helyette "form" paraméter, ami a kérésben fog szerepelni "form":"labeling", }, ... ], } formgenerator/ navbar/ parser.ts parse(data:any):NavbarItem navbaritem.ts - NavbarItem class: //- visible:bool - section:string - label:string - order:number - icon:string - url:string navbar.tsx Navbar({items, onItemSelected}:{items:NavbarItem[],onItemSelected:(NavbarItem)->void}) //****************************** // Form generator / Render //****************************** 1. A service megnyitásakor a client minden ismert FormItemInputType típushoz (pl. text) beregisztrál egy generator függvényt, ami egy FormItem objektum alapán egy React komponens kirajzol. Ez a komponens tartalmazza a label-t, description-t, valamint magát az input-ot. 2. A form generálását a Form komponens végzi a már ismert generator függvények felhasználásával. A komponens feladata az egy lapra, valamint az egy csoportba tarozó elemek azonosítása, majd azok rendezett kirajzolása a részkomponensek és a generator függvények segítségével. 3. A részkomponenseket (pl. GroupBox, TabPage) külön fájlba kell szervezni. 4. A Form komponens aljára ki kell rajzolni egy "Save changes" gombot. Ez lesz tulajdonképpen a form submit. Hatására egy form data kérést kell küldeni a chatcontrolpanel/updateform API-ra a módosult értékekkel, ami frissíti a releváns config PHP állományokat. Method: POST URL: ?srv=chatcontrolpanel&api=formgenarator Headers: Content-Type: application/json Ozeki-User: userid Ozeki-Signature: signature Ozeki-Client-Version: 1 POST data: { "timestamp": "2024-08-03 10:07:00", "action": "getform", "form":"labeling", } Response: { "status": "OK", "errormessage": "", "items": [ { "id":"brandname" "label": "Brand name", "input": "textbox", "groupbox": "Product", "tabpage": "General", "description": "Please provide a unique brand name.", "value": "Ozeki", }, ... ], } formgenerator/ form/ items/ formitemtext.tsx formitemnumber.tsx formitemcheckbox.tsx fromitem.ts - FormItem class: - id:string - label:string - input:FromItemInputType - groupbox:string - tabpage:string - description:string? - value:any formitemgenerator.tsx registergenerator(type:FormItemInputType,generator:(item:FormItem)->JSX) generate(item:FromItem):JSX form.tsx Form({items, onSubmit}:{items:FormItem[],onSubmit:(items:FromItem[])->void}) //****************************** // Form generator / Update //****************************** //****************************** // Draft //****************************** http://inside.jobs.ozeki.hu/p_7832-admin-console.html