# flbInit - Integrace do webů
Jednou z možností jak integrovat zdroje a akce do webových stránek poskytovatele je využití předdefinovaných javascriptových komponent, které obsahují potřebnou funkčnost pro koncové zákazníky. Tyto komponenty poskytovatel umístí na libovolné místo do svých stránek a veškerá funkčnost je potom automaticky zajištěna.
JavaScriptové komponenty lze upravovat
* vzhledově pomocí specifického CSS, které je schopné předefinovat defaultní CSS, které dodáváme s JavaScript komponentami
* funkčně pomocí parametrů v rámci JSON konfigurace jednotlivých FlexBook JavaScript komponent a nebo v rámci FlexBook backofficu, kde je také možné ovlivnit funkcionalitu i způsob zobrazení
### **Integrační postup**
FlexBookové JavaScriptové komponenty jsou založeny na komponentách JQuery rozšířených o FlexBook funkcionalitu. Z toho důvodu je potřeba před použitím vložit následující JQuery a FlexBook JavaScriptové knihovny a kaskádové styly. Integrátor si velmi pravděpodobně připojí i svůj CSS soubor, kterým customizuje vzhled HTML výstupu z FlexBookových JavaScript komponent.
```
```
Dále je nutné inicializovat komponenty pro daného poskytovatele voláním funkce flbInit.
```
flbInit(
'https://www.flexbook.cz/ajax.php',
kod_poskytovatele,
[array of FlexBook Components],
{ globalní parametry }
);
```
***Pozn.: Pro integraci lze použít jak protokol HTTP, tak zabezpečený protokol HTTPS. Pro produkční nasazení doporučujeme používat zabezpečený protokol HTTPS.***
První parametr (string) je URL FlexBook API endpointu.
Druhý parametr (number) je kód FlexBook poskytovatelem který lze zjistit v administračním rozhraní rezervačního systému FlexBook.
Třetí parametr (array of JSONs) je pole FlexBook komponent, které může obsahovat libovolný počet FlexBook komponent (flbProfile, flbReservationList, flbEventList, flbResourceList, flbEventDetail, flbResourceDetail, flbResourceCalendar, apod.) včetně jejich specifické parametrizace.
Čtvrtý parametr (JSON) je volitelný a může obsahovat default parametry pro jednotlivé typy FlexBook komponent. Parametry komponent tudíž nemusí být explicitně specifikovány v rámci třetího parametru u definice jednotlivých konkrétních instancí FlexBook komponent, lze tedy hromadně zadat default parametry všem GUI komponentám definovaným v rámci třetího parametru funkce flbInit. V rámci čtvrtého parametru je možné kromě všech FlexBook koomponent použít navíc JSON parametry **flbEnvironment** a **flbAll**.
* **flbAll** - parametr, kterým se definují defaultní parametry všech FlexBook komponent použitých v rámci flbInit
* Příklad nastavení anglického jazyka pro všechny komponenty v rámci flbInit
* flbAll: { language: 'en' }
* **flbEnvironment** - parametr, kterým je možné nastavovat chování celého FlexBook front-end prostředí
* debug: \[0,1] ... true/false
*Příklad inicializace a hromadné parametrizace a vyrendrování FlexBook komponent:*
```
PROFILE
RESOURCE LIST
EVENT LIST
```
V rámci inicializace komponent je tedy možné předefinovat parametry jednotlivých FlexBook komponent a to v JSON formátu. Výstup těchto komponent se pak automaticky vyrendruje do place holderů (DIVů) ve vašich HTML stránkách. Placeholder se definuje pomocí id Vašeho DIVu. Každá FlexBooková komponenta má tedy takovýto formát ...
```
type: 'flbComponent',
placeHolder: 'flexbook_component',
params: {
component-param: 'param-value',
},
```
**Placeholder** je ID DIVu v HTML kódu, do kterého se bude komponenta renderovat. Bez tohoto parametru se komponenta nezobrazí na Vaší HTML stránce.
**Params** jsou parametry předané ve formátu JSON. Parametry jsou volitelné a zadávají se v následujícím JSON formátu
```
{
parameter1 : value,
parameter2 : value
}
```
### **Parametry dostupné ve všech JavaScriptových FlexBook komponentách**
Parametry dostupné ve všech FlexBook komponentách jsou
* **language:** možnost volby jazykové verze textů v komponentě - aktuálně podporované hodnoty jsou
* 'cz' - Český jazyk
* 'en' - Anglický jazyk
* **format**: format, který lze použít pro vlastní nastavení formátování výstupních dat:
* formátovat lze tyto typy výstupních dat datetime, date, time
* formát se specifikuje obdobně funkci date v jazyce PHP
* formátovací znaky
* j - den v měsíci 1,2,3, až 31
* d - dvouciferný den v měsíci 01 až 31
* n - měsíc v roce 1,2,3, ... až 12
* m - dvouciferný měsíc v roce 01 až 12
* M - třípísmený měsíc v roce Led až Pro
* H - dvouciferná hodina ve 24 hodinovém módu 00 až 23
* h - dvouciferná hodina ve 12 hodinovém módu 01 až 12
* i - dvouciferná minuta 00 až 59
* s - dvouciferná vteřina 00 až 59
* l - den v týdnu Pondělí až Neděle
* D - třípísmený den v týdnu Pon až Ned
* příklad: flbProfile('f\_4', { format: { datetime: 'd.M H:i' }});
* všechny datové typy datetime budou vypadat takto: 21.May 16:00
### **Parametry dostupné ve flbEnvironment**
Parametry dostupné v rámci **flbEnvironment** ve čtvrtém parametru **flbInit**.
* **debug mod:** v případě zapnutého debug modu, se debug hlášky zapisují do JavaScript konzole. Použití debug modu je uvedeno v příkladu výše. Podporované hodnoty jsou:
* 0 (disabled) - default
* 1 (enabled)
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://flexbook.gitbook.io/integracni-manual/javascript-komponenty/pouziti-preddedinovanych-javascript-komponent.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.