TomLabs Apps
← All applications

KalendarBylinek

Roční kalendář sběru českých bylinek podle částí rostliny.

web bylinky kalendář node postgresql Public Homepage

Kalendář bylinek

SPA appka pro sezónní přehled českých bylinek s hlavním kalendářem ve formě roční tabulky, administrací a PostgreSQL databází.

Co appka umí

  • zobrazuje bylinky vlevo a měsíce nahoře v hlavním kalendáři
  • kreslí barevné úseky pro sběr podle jednotlivých částí rostliny
  • používá jednoduché barevné značky bez písmen v legendě
  • podporuje další sbírané části včetně cibule, oddenku, pupenu, mízy/pryskyřice, stopky a kvetoucí natě
  • každý řádek kalendáře si bere výšku jen pro sběrné linky, které daná bylinka opravdu má
  • umožňuje kliknutím na legendu schovat nebo znovu ukázat konkrétní linky v kalendáři
  • zvýrazňuje měsíc zvolený ve filtru sběru
  • filtruje podle názvu bylinky a sbírané části
  • filtruje bylinky podle toho, zda mají sběr ve zvoleném měsíci
  • drží filtr v kompaktní horní liště nad kalendářem
  • po kliknutí na bylinku otevírá detail sběru jako panel nad kalendářem
  • ukládá data do PostgreSQL přes Node.js API
  • admin sekce má přihlášení a první setup hesla
  • umožňuje přidat, upravit, smazat a resetovat bylinky včetně sbíraných částí, kůry a barvy květu
  • umožňuje přidat bylinky a fotky na dálku přes chráněné API
  • barva květu se ukládá v detailu/editoru a zobrazuje se jako malá značka u názvu bylinky
  • v kalendáři odděluje sbírané části do samostatných linek, aby se úseky nepřekrývaly
  • má přepínač světlého a tmavého režimu; poprvé se řídí nastavením systému a volbu si pamatuje
  • vzhled "Herbář": papírový podklad, jeden zelený akcent, displejové písmo Fraunces ze souborů v app/fonts/ (bez požadavku na cizí server) a střídmé animace, které se vypnou, když má uživatel v systému zapnuté omezení pohybu
  • nad kalendářem ukazuje panel "Co sbírat teď" s aktuálním měsícem, koncem sezóny a tím, co začíná
  • umí vytisknout kalendář na A4 na šířku a stáhnout vyfiltrovaný přehled jako CSV
  • umožňuje označit bylinky jako oblíbené a psát si k nim vlastní poznámky, obojí jen v prohlížeči
  • v admin editoru umí nahrát fotku bylinky a zase ji odebrat

Data jsou orientační pro Česko a střední polohy. Lokálně se termín může posunout podle nadmořské výšky, počasí a konkrétního stanoviště.

Health endpoint

GET /health je bez přihlášení a vrací stav aplikace, verzi a název:

{ "status": "Healthy", "version": "0.21.0", "name": "kalendar-bylinek", "entries": { } }

entries obsahuje kontrolu databáze a zapisovatelnosti složky pro fotky. Nedostupná databáze znamená Unhealthy a HTTP 503, nezapisovatelná složka pro fotky Degraded.

Lokální spuštění

Vyžaduje běžící PostgreSQL a proměnnou DATABASE_URL.

cd BylinkovyKalendar.Swa
npm install
$env:DATABASE_URL="postgres://bylinkovy_kalendar:change-me@127.0.0.1:5432/bylinkovy_kalendar"
$env:HERBAR_SETUP_TOKEN="local-setup-token"
$env:BYLINKY_API_TOKEN="local-api-token"
npm start

Appka poběží na http://127.0.0.1:5010.

Fotky

Přihlášený admin nahraje fotku přímo v editoru bylinky. Endpoint POST /api/assets přijímá multipart pole image (JPG, PNG nebo WebP do 6 MB) a vrací cestu, kterou si formulář uloží do bylinky. Bez přihlášení jde totéž přes vzdálené API níž.

Vzdálené API

Endpoint POST /api/remote/herbs přidá nebo přepíše jednu bylinku podle id. Požadavek musí mít hlavičku Authorization: Bearer <BYLINKY_API_TOKEN> nebo X-Api-Token: <BYLINKY_API_TOKEN>.

{
  "id": "dobromysl",
  "name": "Dobromysl obecná",
  "note": "Sbírá se kvetoucí nať.",
  "flowerColor": "#d58bb5",
  "harvest": [
    { "part": "kvetouci_nat", "months": [7, 8, 9] }
  ]
}

Pro hromadné vložení jde poslat také { "herbs": [ ... ] }.

Fotku lze nahrát přes POST /api/remote/assets jako multipart formulář s polem image. Podporované formáty jsou JPG, PNG a WebP do 6 MB. Odpověď vrátí cestu, například uploads/1700000000000-id-dobromysl.jpg; tu pak ulož do bylinky jako image.

curl.exe -X POST "https://kalendar-bylinek.tomlabs.xyz/api/remote/assets" `
  -H "Authorization: Bearer <BYLINKY_API_TOKEN>" `
  -F "image=@C:\fotky\dobromysl.jpg"

{
  "id": "dobromysl",
  "name": "Dobromysl obecná",
  "image": "uploads/1700000000000-id-dobromysl.jpg",
  "harvest": [
    { "part": "kvetouci_nat", "months": [7, 8, 9] }
  ]
}

Nasazení

Zdroj je na Azure DevOps (tomlabscloud.visualstudio.com/KalendarBylinek) a nasazuje se pipeline azure-pipelines.yml při pushi do main:

  1. Build — npm ci, kontrola syntaxe, kontrola deploy souborů, seed dat a toho, že verze z package.json má sekci v CHANGELOG.md. Pak docker build.
  2. Smoke test — kontejner se spustí proti opravdové PostgreSQL v CI, takže se ověří i založení schématu. Musí odpovědět "status":"Healthy" a servírovat statické soubory.
  3. Deploy — image se uloží (docker save), přenese na VPS a tam ho deploy/deploy-vps.sh načte, nahradí kontejner, aktualizuje nginx a počká na Healthy z /health. Cokoliv jiného než Healthy je neúspěšné nasazení.
  4. Katalog — po úspěšném deployi se do app storu na apps.tomlabs.cz nahraje appstore.json, icon.png, README.md a CHANGELOG.md. Verzi a stav si store čte sám z /health.

Pipeline potřebuje dvě variable groups v projektu:

  • kalendarbylinek-deployment — VPS_SSH_PRIVATE_KEY_B64 (privátní klíč uživatele codexdeploy na VPS, base64) jako secret.
  • appstore-publish — APPSTORE_TOKEN jako secret.

Co běží na VPS

Docker kontejner bylinkovy-kalendar-app za Nginx reverse proxy.

  • produkční doména: https://kalendar-bylinek.tomlabs.xyz/
  • secrets/env: /opt/bylinkovy-kalendar/.env (DATABASE_URL, HERBAR_SETUP_TOKEN, BYLINKY_API_TOKEN) — na serveru, nikdy v repozitáři
  • uploady: /opt/bylinkovy-kalendar/uploads, připojené do kontejneru, takže přežijí deploy
  • lokální port služby: 127.0.0.1:5010

Ručně jde deploy pustit taky: nahraj kalendar-bylinek-image.tar.gz a nginx konfiguraci do /tmp na VPS a spusť tam bash /tmp/deploy-vps.sh.

Verze a release notes

Aktuální verze je v package.json, zobrazuje se v záhlaví aplikace a vrací ji GET /health. Co se v jednotlivých verzích změnilo, je v CHANGELOG.md.

App store

Aplikace je veřejná, takže patří do katalogu na https://apps.tomlabs.cz. Katalogová data jsou v appstore.json, ikona v icon.png; verze a stav se čtou živě z GET /health. Nahrání z pracovní stanice:

pwsh F:RootGITTomLabs.AppStore	oolsPublish-WebApp.ps1 -AppName kalendar-bylinek -Icon icon.png -Token $env:APPSTORE_TOKEN

Changelog

Changelog

Nejnovější verze je nahoře. Popisuje, co se změnilo pro uživatele, ne jednotlivé commity.

0.25.1 — 2026-09-24

Změněno

  • Přepínač motivu má tři polohy: Systém (výchozí, řídí se nastavením systému a přepne se hned, jak se systém přepne), Světlý a Tmavý. Tlačítko ukazuje, která poloha je zvolená. Dřívější volba se jednou zapomene, takže všichni začínají na Systému.

Opraveno

  • Na telefonu se tlačítka v horní liště zalomí pod název místo toho, aby stránku roztáhla do strany.

0.25.0 — 2026-09-23

Přidáno

  • Detail bylinky ukazuje ke každé sbírané části ručně kolorovanou ilustraci ve stylu dobové botanické tabule, spolu s názvem části a měsíci sběru. Všech třináct ilustrací je jeden obrázek použitý jako sprite, takže se stahuje jeden soubor místo třinácti.
  • Kliknutí na název měsíce v záhlaví kalendáře ten měsíc rozevře přes celou tabulku a ostatních jedenáct zajede do úzkých proužků. Druhé kliknutí je vrátí zpět. Rok tak zůstane na očích, ale zvolený měsíc je čitelný.
  • Vlastní bublina s popiskem místo systémového title: ukáže ilustraci sbírané části, název bylinky, část a rozsah měsíců hned, dá se nastylovat a objeví se i při procházení klávesnicí. Zavře ji Esc nebo odjetí myší.

Opraveno

  • Aplikace nastartuje i s nedostupnou databází. Dřív se čekalo na přípravu schématu před spuštěním serveru, takže bez PostgreSQL proces vůbec nenaběhl a GET /health neodpověděl — monitoring nerozeznal spadlý stroj od aplikace bez databáze. Nově server poslouchá hned, hlásí Unhealthy se zvlášť uvedeným stavem databáze a schématu, a přípravu schématu zkouší dál každých 15 sekund, takže se po návratu databáze zotaví bez restartu.
  • Při tisku byly linky sběru prázdné. Prohlížeč ve výchozím nastavení netiskne barvy pozadí a linky jsou obarvené právě pozadím; u prvků, které barvou nesou význam — linky, klíč v legendě, značka barvy květu a zvýrazněný měsíc — je proto tisk barev nově vynucený. Zbytek stránky se tiskne úsporně dál.

Změněno

  • Zmizel mrtvý dev-server.js z kořene repozitáře, zbytek po Azure Static Web Apps.
  • Linky sběru mají kromě barvy i strukturu. Kořen má šikmé šrafy, kůra svislé, oddenek křížové, pupen tečky a semeno je linka šikmo nakrájená na kousky. Hnědé odstíny kořene, kůry, oddenku a pupenu se do té doby pletly dohromady; struktura je navíc čitelná i na černobílém tisku a pro barvoslepé. Stejnou strukturu nese i klíč v legendě.
  • Nať a kvetoucí nať mají nově stejnou barvu, protože je to tatáž část rostliny v jiné fázi. Kvetoucí nať se od ní liší šrafováním, ne barvou.
  • Linky jedné bylinky jsou u sebe. Každá měla vlastní pás roztažený přes celou výšku řádku, kterou určuje jméno bylinky, takže se rozprostřely daleko od sebe; nově mají pevnou výšku pásu a stojí vycentrované pod sebou.
  • Linka po najetí myší na řádek zesílí a pod kurzorem se zvedne ještě víc, aby bylo vidět, čeho se popisek týká.
  • Sloupec s názvem bylinky je v užších oknech širší. Písmo Inter je širší než systémové, pro které byl sloupec původně vyměřený, takže se delší názvy ořezávaly.

0.24.1 — 2026-09-23

Změněno

  • Legenda pod kalendářem je jen barevná úsečka a název, bez obrysu pilulky kolem každé položky. Zároveň zmizelo staré pravidlo, které legendu ještě zarovnávalo doprava a psalo tučně, jak to dělala v původním záhlaví.

0.24.0 — 2026-09-22

Změněno

  • Rozhraní přesně podle návrhu "Herbář". Obsah je ve sloupci 1180 px na střed stránky, karty mají jemný stín a vlásový rámeček, mezi kartami je 18 px.
  • Písma jsou obě v repozitáři a servíruje je aplikace: Inter na rozhraní, Fraunces na nadpisy, roh kalendáře a druhý řádek u bylinky. Žádný požadavek na cizí server.
  • Filtr je jeden řádek — hledání s lupou, sbírané části a oblíbené. Řádek tlačítek s měsíci zmizel; měsíc se filtruje kliknutím na jeho název v záhlaví kalendáře a druhé kliknutí filtr zruší.
  • "Co sbírat teď" je jeden řádek štítků: co se sbírá v tomto měsíci, bylinka v posledním měsíci sběru má čárkovaný obrys a to, co začíná příští měsíc, je jeden štítek na konci, který kalendář přepne na příští měsíc. Nad deset bylinek se zbytek schová za "+N dalších", aby pruh zůstal pruhem.
  • Kalendář: sloupec s názvem 230 px, měsíce od 48 px, řádky vyšší a bez pruhování, mřížka z vlásových linek. Pod názvem bylinky je seznam sbíraných částí kurzívou v patkovém písmu, jak to má návrh.
  • Hvězdička oblíbených se ukáže až při najetí na řádek nebo když je bylinka opravdu oblíbená, takže tabulka je v klidu.
  • Tisk, CSV a Admin jsou v horní liště u přepínače motivu; nadpis nad tabulkou zmizel, protože roh tabulky i pruh sezóny říkají totéž.
  • Legenda je pod kalendářem a je tišší — úsečka a název místo pilulek.
  • Aktivní filtr je obtažený akcentem, ne vyplněný.

0.23.0 — 2026-09-22

Změněno

  • Nový vzhled "Herbář": teplý papírový podklad, jeden zelený akcent a vlásové linky místo výrazného rámování. Řádky kalendáře už nejsou pruhované, oddělují se podbarvením při najetí myší, takže je vidět víc dat a míň mřížky.
  • Displejové písmo Fraunces na nadpisy a záhlaví kalendáře, zbytek rozhraní zůstává na systémovém písmu. Font je uložený v repozitáři a servíruje ho aplikace, takže nikam neodchází žádný požadavek na cizí server.
  • Značka v hlavičce je list, ne písmeno v kolečku, a je doplněná podtitulem.
  • Střídmé animace: obsah stránky se při načtení jednou odspodu vynoří s odstupem mezi kartami, linky sběru se vykreslí zleva doprava s kaskádou po řádcích a částech. Nic se neopakuje, hover a focus mají přechod 160 ms. Při zapnutém "omezit pohyb" v systému se animace vypnou úplně.
  • Tmavá paleta přeladěná do teplejší zelenočerné, aby ladila s papírovým světlým motivem.
  • Tisk nově vypíná i papírový podtisk a všechny animace, aby se list vytiskl ve finálním stavu.

0.22.0 — 2026-09-22

Přidáno

  • Panel "Co sbírat teď" nad kalendářem: co se sbírá v aktuálním měsíci, co má poslední měsíc a co začíná příští měsíc. Kliknutím se otevře detail bylinky, tlačítkem se kalendář přepne na aktuální měsíc.
  • Tisk kalendáře na A4 na šířku. Tiskne se jen tabulka a legenda, vždy na bílém papíře i když je aplikace v tmavém režimu, a schované linky se netisknou.
  • Stažení aktuálně vyfiltrovaného přehledu do CSV (středníky a BOM, aby se rovnou otevřel v českém Excelu). Jeden řádek na bylinku a sbíranou část.
  • Nahrání fotky přímo v admin editoru přes nový endpoint POST /api/assets, s náhledem a možností fotku odebrat. Dřív šlo fotku přidat jen vzdáleným API.
  • Oblíbené bylinky (hvězdička u názvu, filtr "Oblíbené") a vlastní poznámka v detailu bylinky. Obojí zůstává v prohlížeči, do sdílené databáze se neukládá, a poznámka se prohledává spolu s názvem.

Opraveno

  • Nginx propouštěl jen 1 MB, takže nahrání fotky přes 1 MB skončilo chybou 413, přestože aplikace povoluje 6 MB. Limit je nově 8 MB.

Změněno

  • Nasazení jede z Azure DevOps pipeline: build image, smoke test proti opravdové PostgreSQL, přenos image na VPS, spuštění deploy skriptu, kontrola /health přes HTTPS a zápis do katalogu apps.tomlabs.cz. Image se už nestaví na VPS.
  • Běhové prostředí je Node 24; Node 20, na kterém image stál, je po konci podpory.
  • Sloupec s názvem bylinky je širší, aby se vedle názvu vešla hvězdička.
  • Víceřádková pole (poznámka u bylinky) používají stejné písmo jako zbytek rozhraní, ne strojopis, který prohlížeč dává textarea ve výchozím stavu.

0.21.0 — 2026-09-22

Přidáno

  • Přepínač světlého a tmavého režimu v záhlaví. Poprvé se řídí nastavením operačního systému, ruční volba se pamatuje v prohlížeči.
  • Endpoint GET /health bez přihlášení, který vrací stav, verzi a název aplikace včetně kontroly databáze a složky pro fotky.
  • Vlastní ikona aplikace (icon.png, favicon.ico) — list na zeleném kolečku.

Změněno

  • Všechny barvy v rozhraní jsou nově tokeny v :root, takže tmavá paleta je definovaná samostatně a není jen převráceným světlým motivem.
  • Barvy sbíraných částí se berou ze stylů, aby ty nejtmavší (oddenek, stopka) zůstaly čitelné i na tmavém pozadí. Cibule je ve světlém režimu tmavší, dřív na bílém podkladu skoro mizela.

0.20.0 — stav před zavedením changelogu

Kalendář sběru českých bylinek jako roční tabulka: bylinky vlevo, měsíce nahoře, barevné úseky sběru podle částí rostliny, filtry podle názvu, části a měsíce, detail bylinky, admin sekce s přihlášením a vzdálené API pro přidávání bylinek a fotek. Data v PostgreSQL.