Merge pull request #771 from Czechitas-podklady-WEB/768-café-lora-opr…

…ava-zadání

Café Lora: oprava zadání

daweb/js2/cafe-lora-1/cvlekce/ingredience.md

@@ -5,7 +5,7 @@ demand: 3
 context: lekce
 ---
 
-Abychom mohli vytvářet seznam ingrediencí podle dat, každá ingredience musí být také komponenta.
+Abychom mohli vytvářet seznam ingrediencí podle dat, každá ingredience nápoje musí být také komponenta.
 
 1.  Ve složce `components` vytvořte komponentu `Layer`, která očekává `props` v následujícím tvaru.
 

daweb/js2/cafe-lora-1/cvlekce/napoj.md

@@ -7,17 +7,17 @@ context: lekce
 
 V komponentě `Menu` máme příklad tří napojů zatím jako natvrdo vytvořené HTML. Budeme chtít mít každý nápoj v menu jako komponentu. Připravujeme se tím na to, abychom později mohli seznam nápojů zobrazovat stažením dat z API.
 
-Vytvoříme komponentu `Drink`, která zatím nebude mít funkční objednávací tlačítko a nebude ještě správně zobrazovat ingredience. Obojí doplníme později.
+Vytvoříme komponentu `Drink`, která zatím nebude mít funkční objednávací tlačítko a nebude ještě správně zobrazovat ingredience (layers). Obojí doplníme později.
 
 1.  Ve složce `components` vytvořte komponentu `Drink` s `index.jsx` a `style.css`. Do `style.css` přesuňte styly související s komponentou.
-1.  V `index.jsx` vytvořte komponentu `Drink`, která očekává `props` v následujícím tvaru.
+1.  V `index.jsx` vytvořte komponentu `Drink` podle vzoru nápojů z `Menu`. Bude očekávat tyto `props` v následujícím tvaru.
 
     ```jsx
     <Drink
       id={0}
       name="Romano"
       ordered={false}
-      image="https://localhost:4000/assets/cups/romano.png"
+      image="http://localhost:4000/assets/cups/romano.png"
       layers={[
         {
           color: '#fbdf5b',
@@ -31,7 +31,7 @@ Vytvoříme komponentu `Drink`, která zatím nebude mít funkční objednávac
     />
     ```
 
-1.  Komponenta `Drink` zatím nebude využívat vlastnosti `id`, `ordered` ani `layers`. Ingredience zatím nechte tak, jak jsou zobrazené ve stránce se zadáním. Komponentu pro ingredience vytvoříme v následujícím cvičení. Zatím na stránce klidně zobrazte pouze jeden nápoj, ať se moc nenadřete.
-1.  Adresa obrázku, který se má zobrazit, je uložena ve vlastnosti `image`. Tato cesta se použije pro atribut `src` obrázku. Obrázky se vám zatím nebudou zobrazovat – to zprovozníme až později. Pokud chcete obrázky vyzkoušet hned, zprovozněte si dopředu API postupem popsaným v druhé části projektu v úkolu [Zprovoznění API](/vyvoj-webu/daweb/js2/cafe-lora-2/projekt/napoje-api).
+1.  Komponentou `Drink`nahraďte příklad tří nápojů v `Menu`. Zatím na stránce klidně zobrazte pouze jeden nápoj, ať se moc nenadřete. Komponenta zatím nebude využívat vlastnosti `id`, `ordered` ani `layers. Přes props jí předejte pouze `name`a`image`. Data si můžete vymyslet nebo využít příklad výše.
+1.  Adresa obrázku, který se má zobrazit, je uložena ve vlastnosti `image`. Tato cesta se použije pro atribut `src` obrázku uvnitř komponenty `Drink`. Adresa v příkladu nahoře využívá lokální API, takže se vám obrázek zatím nebude zobrazovat – to zprovozníme až později. Pokud chcete obrázky vyzkoušet hned, zprovozněte si dopředu API postupem popsaným v druhé části projektu v úkolu [Zprovoznění API](/vyvoj-webu/daweb/js2/cafe-lora-2/projekt/napoje-api). **Nezapomeňte**, že z API vám přijde pouze relativní cesta souboru, které musí předcházet url adresa, kde běží váš backend server, např. `http://localhost:4000`.
 1.  Tlačítko zatím pouze zobrazte, funkčnost mu přidáme v dalším kroku.
 1.  V této fázi si commitněte kód s užitečně napsanou commit zprávou a pushněte do vzdáleného repozitáře.

daweb/js2/cafe-lora-1/cvlekce/navigace.md

@@ -7,7 +7,7 @@ context: lekce
 
 Jako další úkol rozchodíme zatím nefunkční navigaci a zařídíme, aby se na úzkých displejích navigace zobrazovala po kliknutí na hamburger ikonku.
 
-1. Nejdříve do příslušných komponent přidejte attributy `id` tak, aby odkazy v navigaci po kliknutí přesunuly uživatele na správnou část stránky.
+1. Nejdříve do těch komponent, které odpovídají odkazům v navigaci, přidejte attribut `id`. Atribut vložte přímo na `<section/>` uvnitř dané komponenty. Tím zajistíte, aby odkazy v navigaci po kliknutí přesunuly uživatele na správnou část stránky.
 1. Zobrazování a skrývání navigačního menu uděláme tak, že budeme prvku `.rollout-nav` přidávat nebo odebírat třídu `nav-closed`. V hlavním `index.jsx` (ve složce `pages`) vyberte ikonku `.nav-btn` a připojte k ní posluchač události `click`. Tento posluchač bude přepínat třídu `nav-closed` na prvku `.rollout-nav`. Klikáním na ikonku tak můžeme zobrazovat nebo skrývat navigaci.
-1. Navigaci budeme chtít schovat i po kliknutí na odkaz na nějakou sekci. Připojte tedy další posluchač události přímo na prvek `.rollout-nav`. V posluchači události zařiďte, aby se navigace při kliknutí na libovolnou její položku schovala (tj. prvku `.rollout-nav` přidáte třídu `nav-closed`, obdobně, jako v předchozím kroku při přepínání).
+1. Navigaci budeme chtít schovat i po kliknutí na odkaz uvnitř navigace. Připojte tedy další posluchač události přímo na prvek `.rollout-nav`. V posluchači události zařiďte, aby se navigace při kliknutí na libovolnou její položku schovala (tj. prvku `.rollout-nav` přidáte třídu `nav-closed`, obdobně, jako v předchozím kroku při přepínání).
 1. Jakmile je váš kód funkční, proveďte commit se zodpovědně napsanou zprávou a pushněte do vzdáleného repozitáře.

daweb/js2/cafe-lora-2/cvlekce/napoje-api.md

@@ -7,8 +7,8 @@ context: lekce
 
 V tomto cvičení konečně zobrazíme celou nabídku nápojů, které si stáhneme z API.
 
-1. Nejdříve si naklonujte rezpotiář [cafelora-api](https://github.com/Czechitas-podklady-WEB/cafelora-api), kde najdete připravená data pro jsonhost. Otevřete si repozitář v novém okně VS Code a spusťte `npx jsonhost@latest` (pozor na přidanou část `@latest` – to zajistí, aby se použila nejnovější verze `jsonhost`, která je pro API Café Lóra potřeba).
+1. Nejdříve si naklonujte repozitář [cafelora-api](https://github.com/Czechitas-podklady-WEB/cafelora-api), kde najdete připravená data pro `apidroid`. Otevřete si repozitář v novém okně VS Code a spusťte `npx apidroid@latest` (pozor na přidanou část `@latest` – to zajistí, aby se použila nejnovější verze `apidroid`, která je pro API Café Lóra potřeba).
 1. Prohlédněte si data, která vrací endpoint `/api/drinks`.
 1. Upravte hlavní stránku tak, aby stahovala seznam nápojů z API, zatím stačí do proměnné, kterou vypíšete do konzole.
-1. Komponentě `Menu` přidejte _prop_ s názvem `drinks`, skrz kterou komponentě předáme stažený seznam nápojů. Zobrazte tento seznam uvnitř prvku `drinks-list`.
-1. Vyzkoušejte, že vaše stránka zobrazuje všechny nápoje. Commitněte se srozumitelnou zprávou a pushněte do vzdáleného repozitáře.
+1. Komponentě `Menu` přidejte _prop_ s názvem `drinks`, skrz kterou komponentě předáme stažený seznam nápojů. Zobrazte tento seznam uvnitř prvku `drinks-list` za využití komponenty `Drink`.
+1. Stránka by nyní měla zobrazovat všechny nápoje s daty, které vám přišly z API. Commitněte se srozumitelnou zprávou a pushněte do vzdáleného repozitáře.

daweb/js2/cafe-lora-2/cvlekce/objednavani.md

@@ -7,7 +7,8 @@ context: lekce
 
 1.  Nejdříve si všimněte, že data pro jeden nápoj obsahují vlastnost `ordered`, která udává, zda je nápoj zrovna objednaný či nikoliv. Toto je zároveň _prop_ v komponentě `Drink`. Upravte tuto komponentu tak, aby v závislosti na hodnotě této _prop_ zobrazila na tlačíku text _Objednat_ nebo _Zrušit_.
 1.  Na objednávací tlačítko také přidejte třídu `.order-btn--ordered` v případě, že nápoj je objednaný.
-1.  V hlavním souboru `index.jsx` pověste pomocí `querySelectorAll` posluchač události na každý objednávací formulář v nápojích. Zatím při kliknutí na tlačítko vypište do konzole `id` nápoje, abyste si ověřili, že váš posluchač události pracuje se správným prvkem pole.
+1.  Prop `id` předejte atributu `data-id`, který vložte na `<form>`.
+1.  V hlavním souboru `index.jsx` pověste pomocí `querySelectorAll` posluchač události na každý objednávací formulář v nápojích. Zatím při kliknutí na tlačítko vypište do konzole `id` nápoje, abyste si ověřili, že váš posluchač události pracuje se správným prvkem pole. K `id` se dostanete pomocí vlastnosti `dataset.id`.
 1.  Samotné objednání nápoje provedete pomocí PATCH požadavku na API endpoint `/api/drinks/:id`. Tento požadavek bude mít v těle JSON pole s objektem, tělo požadavku tedy bude vypadat takto:
 
     ```js
@@ -17,4 +18,5 @@ context: lekce
     Proveďte tento požadavek pomocí `fetch` a zkontrolujte, že se vám v konzoli vypíše odpověď od API. Jakmile je váš kód funkční, proveďte refresh stránky, aby se vám zobrazila aktuální data.
 
 1.  Vyzkoušejte si na stránce, že objednávání nápojů funguje.
+1.  Zprovozněte zrušení objednávky. Stačí upravit vlastnost `value` v PATCH požadavku, aby místo `true` posílala opak předchozího stavu nápoje.
 1.  Commitněte váš kód se zodpovědně napsanou commit zprávou a pushněte do vzdáleného repozitáře.

daweb/js2/cafe-lora-2/cvlekce/objednavka-obsah.md

@@ -10,7 +10,7 @@ context: lekce
     {
       id: 7,
       name: 'Romano',
-      image: 'https://localhost:4000/assets/cups/romano.png',
+      image: 'http://localhost:4000/assets/cups/romano.png',
     }
     ```
 1.  Vytvořte také komponentu `OrderItem` s _props_ `name` a `image` představující jednu položku objednávky.