Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
f8cfdf70f1 |
@@ -22,7 +22,7 @@ jobs:
|
|||||||
|
|
||||||
- uses: actions/setup-node@v4
|
- uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
node-version: "26"
|
node-version: "22"
|
||||||
|
|
||||||
- run: corepack enable
|
- run: corepack enable
|
||||||
|
|
||||||
@@ -49,7 +49,7 @@ jobs:
|
|||||||
|
|
||||||
- uses: actions/setup-node@v4
|
- uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
node-version: "26"
|
node-version: "22"
|
||||||
|
|
||||||
- run: corepack enable
|
- run: corepack enable
|
||||||
|
|
||||||
@@ -71,7 +71,7 @@ jobs:
|
|||||||
|
|
||||||
- uses: actions/setup-node@v4
|
- uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
node-version: "26"
|
node-version: "22"
|
||||||
|
|
||||||
- run: corepack enable
|
- run: corepack enable
|
||||||
|
|
||||||
@@ -100,7 +100,7 @@ jobs:
|
|||||||
|
|
||||||
- uses: actions/setup-node@v4
|
- uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
node-version: "26"
|
node-version: "22"
|
||||||
|
|
||||||
- run: corepack enable
|
- run: corepack enable
|
||||||
|
|
||||||
@@ -187,7 +187,7 @@ jobs:
|
|||||||
|
|
||||||
- uses: actions/setup-node@v4
|
- uses: actions/setup-node@v4
|
||||||
with:
|
with:
|
||||||
node-version: "26"
|
node-version: "22"
|
||||||
|
|
||||||
- run: corepack enable
|
- run: corepack enable
|
||||||
|
|
||||||
@@ -215,8 +215,7 @@ jobs:
|
|||||||
- uses: docker/build-push-action@v5
|
- uses: docker/build-push-action@v5
|
||||||
with:
|
with:
|
||||||
context: .
|
context: .
|
||||||
file: Dockerfile
|
file: Dockerfile-Woodpecker
|
||||||
target: runner-prebuilt
|
|
||||||
platforms: linux/amd64
|
platforms: linux/amd64
|
||||||
push: true
|
push: true
|
||||||
tags: ${{ secrets.REPO_URL }}/${{ secrets.REPO_NAME }}:latest
|
tags: ${{ secrets.REPO_URL }}/${{ secrets.REPO_NAME }}:latest
|
||||||
|
|||||||
@@ -4,7 +4,3 @@ types/gen
|
|||||||
.mcp.json
|
.mcp.json
|
||||||
.claude/settings.local.json
|
.claude/settings.local.json
|
||||||
server/public/
|
server/public/
|
||||||
.claude/*.lock
|
|
||||||
.claude/worktrees
|
|
||||||
.playwright-mcp
|
|
||||||
.idea/
|
|
||||||
|
|||||||
@@ -1,32 +0,0 @@
|
|||||||
{
|
|
||||||
"version": "0.2.0",
|
|
||||||
"configurations": [
|
|
||||||
{
|
|
||||||
"name": "Server (ts-node, debug)",
|
|
||||||
"type": "node",
|
|
||||||
"request": "launch",
|
|
||||||
"cwd": "${workspaceFolder}/server",
|
|
||||||
"runtimeArgs": ["-r", "ts-node/register"],
|
|
||||||
"program": "${workspaceFolder}/server/src/index.ts",
|
|
||||||
"env": { "NODE_ENV": "development" },
|
|
||||||
"console": "integratedTerminal",
|
|
||||||
"skipFiles": ["<node_internals>/**"],
|
|
||||||
"preLaunchTask": "types: openapi-ts"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Client (vite + Edge)",
|
|
||||||
"type": "msedge",
|
|
||||||
"request": "launch",
|
|
||||||
"url": "http://localhost:3000",
|
|
||||||
"webRoot": "${workspaceFolder}/client",
|
|
||||||
"preLaunchTask": "client: vite"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"compounds": [
|
|
||||||
{
|
|
||||||
"name": "Dev: server + client",
|
|
||||||
"configurations": ["Server (ts-node, debug)", "Client (vite + Edge)"],
|
|
||||||
"stopAll": true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@@ -1,67 +0,0 @@
|
|||||||
{
|
|
||||||
"version": "2.0.0",
|
|
||||||
"tasks": [
|
|
||||||
{
|
|
||||||
"label": "types: openapi-ts",
|
|
||||||
"type": "shell",
|
|
||||||
"command": "yarn openapi-ts",
|
|
||||||
"options": {
|
|
||||||
"cwd": "${workspaceFolder}/types"
|
|
||||||
},
|
|
||||||
"presentation": {
|
|
||||||
"reveal": "silent",
|
|
||||||
"panel": "dedicated"
|
|
||||||
},
|
|
||||||
"problemMatcher": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "server: startReload",
|
|
||||||
"type": "shell",
|
|
||||||
"command": "yarn startReload",
|
|
||||||
"options": {
|
|
||||||
"cwd": "${workspaceFolder}/server",
|
|
||||||
"env": {
|
|
||||||
"NODE_ENV": "development"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"isBackground": true,
|
|
||||||
"presentation": {
|
|
||||||
"reveal": "always",
|
|
||||||
"panel": "dedicated",
|
|
||||||
"group": "dev"
|
|
||||||
},
|
|
||||||
"problemMatcher": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "client: vite",
|
|
||||||
"type": "shell",
|
|
||||||
"command": "yarn start",
|
|
||||||
"options": {
|
|
||||||
"cwd": "${workspaceFolder}/client"
|
|
||||||
},
|
|
||||||
"isBackground": true,
|
|
||||||
"presentation": {
|
|
||||||
"reveal": "always",
|
|
||||||
"panel": "dedicated",
|
|
||||||
"group": "dev"
|
|
||||||
},
|
|
||||||
"problemMatcher": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "dev: server+client",
|
|
||||||
"dependsOn": [
|
|
||||||
"server: startReload",
|
|
||||||
"client: vite"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"label": "dev: all",
|
|
||||||
"dependsOrder": "sequence",
|
|
||||||
"dependsOn": [
|
|
||||||
"types: openapi-ts",
|
|
||||||
"dev: server+client"
|
|
||||||
],
|
|
||||||
"problemMatcher": []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@@ -12,12 +12,9 @@ Luncher is a lunch management app for teams — daily restaurant menus, food ord
|
|||||||
types/ → Shared OpenAPI-generated TypeScript types (source of truth: types/api.yml)
|
types/ → Shared OpenAPI-generated TypeScript types (source of truth: types/api.yml)
|
||||||
server/ → Express 5 backend (Node.js 22, ts-node)
|
server/ → Express 5 backend (Node.js 22, ts-node)
|
||||||
client/ → React 19 frontend (Vite 7, React Bootstrap)
|
client/ → React 19 frontend (Vite 7, React Bootstrap)
|
||||||
e2e/ → Playwright E2E tests (separate package)
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Each of the four directories has its own `package.json`. Package manager: **Yarn Classic**.
|
Each directory has its own `package.json` and `tsconfig.json`. Package manager: **Yarn Classic**.
|
||||||
|
|
||||||
Deployment files at repo root: `Dockerfile` (multi-stage, dva runner targety: výchozí `runner` pro lokální build, `runner-prebuilt` pro CI s předem sestavenými artefakty), `compose.yml`, `compose-traefik.yml`.
|
|
||||||
|
|
||||||
## Development Commands
|
## Development Commands
|
||||||
|
|
||||||
@@ -26,7 +23,6 @@ Deployment files at repo root: `Dockerfile` (multi-stage, dva runner targety: v
|
|||||||
cd types && yarn install && yarn openapi-ts # Generate API types first
|
cd types && yarn install && yarn openapi-ts # Generate API types first
|
||||||
cd ../server && yarn install
|
cd ../server && yarn install
|
||||||
cd ../client && yarn install
|
cd ../client && yarn install
|
||||||
cd ../e2e && yarn install
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Running dev environment
|
### Running dev environment
|
||||||
@@ -48,30 +44,11 @@ cd client && yarn build # tsc --noEmit + vite build → client/dist
|
|||||||
|
|
||||||
### Tests
|
### Tests
|
||||||
```bash
|
```bash
|
||||||
# Server unit tests (Jest)
|
cd server && yarn test # Jest (tests in server/src/tests/)
|
||||||
cd server && yarn test # All tests in server/src/tests/
|
cd server && yarn test dates # Run one test file
|
||||||
cd server && yarn test dates # Run one file by name
|
cd server && yarn test -t "name" # Run by test name pattern
|
||||||
cd server && yarn test -t "name" # Run by test name pattern
|
|
||||||
|
|
||||||
# E2E (Playwright) — requires prebuilt server
|
|
||||||
cd server && yarn build
|
|
||||||
cd e2e && yarn test # chromium + firefox, baseURL 127.0.0.1:3001
|
|
||||||
cd e2e && yarn test:ui # interactive UI mode
|
|
||||||
cd e2e && yarn report # open last HTML report
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Jest setup (`server/src/tests/setupEnv.ts`) forces `STORAGE=memory`, deletes `MOCK_DATA`, and sets a fixed `JWT_SECRET`. Playwright auto-starts the prebuilt server and authenticates via the `remote-user: e2e-user` trusted-header path; locally uses `STORAGE=json` + `MOCK_DATA=true`, CI uses `STORAGE=redis`.
|
|
||||||
|
|
||||||
### CI pipeline
|
|
||||||
Gitea Actions — `.gitea/workflows/ci.yaml` (no `.github/` equivalent):
|
|
||||||
|
|
||||||
1. `generate-types` — runs `yarn openapi-ts`, uploads artifact
|
|
||||||
2. `server-test` — Jest
|
|
||||||
3. `server-build` + `client-build` — parallel tsc/vite builds
|
|
||||||
4. `e2e` — Playwright in `mcr.microsoft.com/playwright:v1.59.1-jammy` with a Redis service container; only Firefox installed in CI
|
|
||||||
5. `docker-build` — master branch only, uses `Dockerfile` with `--target runner-prebuilt` (skládá image z artefaktů `server-build` + `client-build`)
|
|
||||||
6. `notify` — Discord + ntfy webhooks
|
|
||||||
|
|
||||||
### Formatting
|
### Formatting
|
||||||
Prettier is installed in `client/` (devDependency only, no script or config) — invoke via `yarn prettier <path>` with defaults.
|
Prettier is installed in `client/` (devDependency only, no script or config) — invoke via `yarn prettier <path>` with defaults.
|
||||||
|
|
||||||
@@ -86,11 +63,10 @@ Prettier is installed in `client/` (devDependency only, no script or config) —
|
|||||||
|
|
||||||
### Server (server/src/)
|
### Server (server/src/)
|
||||||
- **Entry:** `index.ts` — Express app + Socket.io setup
|
- **Entry:** `index.ts` — Express app + Socket.io setup
|
||||||
- **Routes:** `routes/` — 9 modular Express route handlers (food, pizzaDay, voting, notifications, qr, stats, easterEgg, dev, changelog)
|
- **Routes:** `routes/` — modular Express route handlers (food, pizzaDay, voting, notifications, qr, stats, easterEgg, dev)
|
||||||
- **Services:** domain logic files at root level (`service.ts`, `pizza.ts`, `restaurants.ts`, `chefie.ts`, `voting.ts`, `stats.ts`, `qr.ts`, `notifikace.ts`)
|
- **Services:** domain logic files at root level (`service.ts`, `pizza.ts`, `restaurants.ts`, `chefie.ts`, `voting.ts`, `stats.ts`, `qr.ts`, `notifikace.ts`)
|
||||||
- **Helpers:** `mock.ts` (fake menu data for `MOCK_DATA=true`), `pushReminder.ts` (push notification reminders), `utils.ts` (shared utilities)
|
|
||||||
- **Auth:** `auth.ts` — JWT + optional trusted-header authentication
|
- **Auth:** `auth.ts` — JWT + optional trusted-header authentication
|
||||||
- **Storage:** `storage/index.ts` factory selects implementation; backends: `json.ts` (file-based, dev), `redis.ts` (production), `memory.ts` (tests). Data keyed by date (YYYY-MM-DD).
|
- **Storage:** `storage/StorageInterface.ts` defines the interface; implementations in `storage/json.ts` (file-based, dev) and `storage/redis.ts` (production). Data keyed by date (YYYY-MM-DD).
|
||||||
- **Restaurant scrapers:** Cheerio-based HTML parsing for daily menus from multiple restaurants
|
- **Restaurant scrapers:** Cheerio-based HTML parsing for daily menus from multiple restaurants
|
||||||
- **Pizza Chefie integration:** `chefie.ts` scrapes pizzachefie.cz for Pizza day menus and salads (only active when a Pizza day is open)
|
- **Pizza Chefie integration:** `chefie.ts` scrapes pizzachefie.cz for Pizza day menus and salads (only active when a Pizza day is open)
|
||||||
- **WebSocket:** `websocket.ts` — Socket.io for real-time client updates
|
- **WebSocket:** `websocket.ts` — Socket.io for real-time client updates
|
||||||
@@ -98,12 +74,10 @@ Prettier is installed in `client/` (devDependency only, no script or config) —
|
|||||||
- **Config:** `.env.development` / `.env.production` (see `.env.template` for all options)
|
- **Config:** `.env.development` / `.env.production` (see `.env.template` for all options)
|
||||||
|
|
||||||
### Client (client/src/)
|
### Client (client/src/)
|
||||||
- **Entry:** `index.tsx` → `App.tsx` → `AppRoutes.tsx`; `Login.tsx` is the auth screen; `FallingLeaves.tsx` is a seasonal visual effect
|
- **Entry:** `index.tsx` → `App.tsx` → `AppRoutes.tsx`
|
||||||
- **Pages:** `pages/` (StatsPage)
|
- **Pages:** `pages/` (StatsPage)
|
||||||
- **Components:** `components/` (Header, Footer, Loader, PizzaOrderList, PizzaOrderRow, and modals in `components/modals/`)
|
- **Components:** `components/` (Header, Footer, Loader, modals/, PizzaOrderList, PizzaOrderRow)
|
||||||
- **Context providers:** `context/` — `auth.tsx`, `settings.tsx`, `socket.js`, `eggs.tsx` (note: `socket.js` is the only non-TSX context file)
|
- **Context providers:** `context/` — AuthContext, SettingsContext, SocketContext, EasterEggContext
|
||||||
- **Hooks:** `hooks/` (`usePushReminder.ts`)
|
|
||||||
- **Utils:** `utils/` (`parsePrice.ts`)
|
|
||||||
- **Styling:** Bootstrap 5 + React Bootstrap + custom SCSS files (co-located with components)
|
- **Styling:** Bootstrap 5 + React Bootstrap + custom SCSS files (co-located with components)
|
||||||
- **API calls:** use OpenAPI-generated SDK from `types/gen/`
|
- **API calls:** use OpenAPI-generated SDK from `types/gen/`
|
||||||
- **Routing:** React Router DOM v7
|
- **Routing:** React Router DOM v7
|
||||||
@@ -117,7 +91,7 @@ Prettier is installed in `client/` (devDependency only, no script or config) —
|
|||||||
## Environment
|
## Environment
|
||||||
|
|
||||||
- **Server env files:** `server/.env.development`, `server/.env.production` (see `server/.env.template`)
|
- **Server env files:** `server/.env.development`, `server/.env.production` (see `server/.env.template`)
|
||||||
- Key vars: `JWT_SECRET`, `STORAGE` (json/redis/memory), `MOCK_DATA`, `REDIS_HOST`, `REDIS_PORT`
|
- Key vars: `JWT_SECRET`, `STORAGE` (json/redis), `MOCK_DATA`, `REDIS_HOST`, `REDIS_PORT`
|
||||||
- **Docker:** multi-stage Dockerfile, `compose.yml` for app + Redis. Timezone: Europe/Prague.
|
- **Docker:** multi-stage Dockerfile, `compose.yml` for app + Redis. Timezone: Europe/Prague.
|
||||||
|
|
||||||
## Conventions
|
## Conventions
|
||||||
@@ -125,22 +99,4 @@ Prettier is installed in `client/` (devDependency only, no script or config) —
|
|||||||
- Czech naming for domain variables and UI strings; English for infrastructure code
|
- Czech naming for domain variables and UI strings; English for infrastructure code
|
||||||
- TypeScript strict mode in both client and server
|
- TypeScript strict mode in both client and server
|
||||||
- Server module resolution: Node16; Client: ESNext/bundler
|
- Server module resolution: Node16; Client: ESNext/bundler
|
||||||
- `TODO.md` tracks open bugs and roadmap items — worth scanning before starting non-trivial work
|
- `TODO.md` tracks open bugs and roadmap items — worth scanning before starting non-trivial work
|
||||||
|
|
||||||
## Changelog (user-facing "What's new")
|
|
||||||
|
|
||||||
When you add or change a user-visible feature, you MUST also record it in `server/changelogs/` so users see it via the in-app changelog (served by `server/src/routes/changelogRoutes.ts`, sorted newest-first with a `?since=` filter).
|
|
||||||
|
|
||||||
Steps:
|
|
||||||
|
|
||||||
1. Create or open the file for today's date: `server/changelogs/YYYY-MM-DD.json` (use today's date; one file per day).
|
|
||||||
2. The file content is a **JSON array of Czech strings**, one short user-facing sentence per change. Example:
|
|
||||||
```json
|
|
||||||
[
|
|
||||||
"Proklik na nabídku podniku ze stránky objednávek",
|
|
||||||
"Možnost přidat URL pro sledování stavu doručení pro Bolt Food"
|
|
||||||
]
|
|
||||||
```
|
|
||||||
3. If a file for today already exists, append your entry to its array instead of creating a new file.
|
|
||||||
4. Write entries in Czech, phrased for end users (describe the benefit, not the implementation). Skip purely internal/refactor changes that users won't notice.
|
|
||||||
5. The route caches files in memory at read time, so a server restart is needed to pick up new/changed changelogs in a running dev instance.
|
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
ARG NODE_VERSION="node:26-alpine"
|
ARG NODE_VERSION="node:22-alpine"
|
||||||
|
|
||||||
# ─── Builder ──────────────────────────────────────────────────────────────────
|
# Builder
|
||||||
FROM ${NODE_VERSION} AS builder
|
FROM ${NODE_VERSION} AS builder
|
||||||
|
|
||||||
WORKDIR /build
|
WORKDIR /build
|
||||||
@@ -62,9 +62,8 @@ RUN yarn build
|
|||||||
WORKDIR /build/client
|
WORKDIR /build/client
|
||||||
RUN yarn build
|
RUN yarn build
|
||||||
|
|
||||||
# ─── Runner base ──────────────────────────────────────────────────────────────
|
# Runner
|
||||||
# Společný základ pro oba runner targety – nastaví prostředí a metadata běhu.
|
FROM ${NODE_VERSION}
|
||||||
FROM ${NODE_VERSION} AS runner-base
|
|
||||||
|
|
||||||
RUN apk add --no-cache tzdata
|
RUN apk add --no-cache tzdata
|
||||||
ENV TZ=Europe/Prague \
|
ENV TZ=Europe/Prague \
|
||||||
@@ -73,17 +72,6 @@ ENV TZ=Europe/Prague \
|
|||||||
|
|
||||||
WORKDIR /app
|
WORKDIR /app
|
||||||
|
|
||||||
# Export /data/db.json do složky /data
|
|
||||||
VOLUME ["/data"]
|
|
||||||
|
|
||||||
EXPOSE 3001
|
|
||||||
|
|
||||||
CMD [ "node", "./server/src/index.js" ]
|
|
||||||
|
|
||||||
# ─── Runner (default) ─────────────────────────────────────────────────────────
|
|
||||||
# Použití: docker build . (lokální sestavení – vše se buildí uvnitř image)
|
|
||||||
FROM runner-base AS runner
|
|
||||||
|
|
||||||
# Vykopírování sestaveného serveru
|
# Vykopírování sestaveného serveru
|
||||||
COPY --from=builder /build/server/node_modules ./server/node_modules
|
COPY --from=builder /build/server/node_modules ./server/node_modules
|
||||||
COPY --from=builder /build/server/dist ./
|
COPY --from=builder /build/server/dist ./
|
||||||
@@ -97,25 +85,12 @@ COPY /server/.env.production ./server
|
|||||||
# Zkopírování changelogů (seznamu novinek)
|
# Zkopírování changelogů (seznamu novinek)
|
||||||
COPY /server/changelogs ./server/changelogs
|
COPY /server/changelogs ./server/changelogs
|
||||||
|
|
||||||
# Zkopírování konfigurace easter eggů
|
# Zkopírování konfigurace easter eggů a changelogů
|
||||||
RUN if [ -f ./server/.easter-eggs.json ]; then cp ./server/.easter-eggs.json ./server/; fi
|
RUN if [ -f ./server/.easter-eggs.json ]; then cp ./server/.easter-eggs.json ./server/; fi
|
||||||
|
|
||||||
# ─── Runner (prebuilt) ────────────────────────────────────────────────────────
|
# Export /data/db.json do složky /data
|
||||||
# Použití: docker build --target runner-prebuilt .
|
VOLUME ["/data"]
|
||||||
# Očekává předem sestavené artefakty v build kontextu (server/dist,
|
|
||||||
# client/dist, server/node_modules) – využívá Gitea Actions, kde se
|
|
||||||
# server i klient buildí v separátních jobech a sem se jen kopírují.
|
|
||||||
FROM runner-base AS runner-prebuilt
|
|
||||||
|
|
||||||
# Vykopírování sestaveného serveru
|
EXPOSE 3000
|
||||||
COPY ./server/node_modules ./server/node_modules
|
|
||||||
COPY ./server/dist ./
|
|
||||||
|
|
||||||
# Vykopírování sestaveného klienta
|
CMD [ "node", "./server/src/index.js" ]
|
||||||
COPY ./client/dist ./public
|
|
||||||
|
|
||||||
# Zkopírování changelogů (seznamu novinek)
|
|
||||||
COPY ./server/changelogs ./server/changelogs
|
|
||||||
|
|
||||||
# Zkopírování konfigurace easter eggů
|
|
||||||
RUN if [ -f ./server/.easter-eggs.json ]; then cp ./server/.easter-eggs.json ./server/; fi
|
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
ARG NODE_VERSION="node:22-alpine"
|
||||||
|
|
||||||
|
FROM ${NODE_VERSION}
|
||||||
|
|
||||||
|
RUN apk add --no-cache tzdata
|
||||||
|
ENV TZ=Europe/Prague \
|
||||||
|
LC_ALL=cs_CZ.UTF-8 \
|
||||||
|
NODE_ENV=production
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
# Vykopírování sestaveného serveru
|
||||||
|
COPY ./server/node_modules ./server/node_modules
|
||||||
|
COPY ./server/dist ./
|
||||||
|
# TODO tohle není dobře, má to být součástí serveru
|
||||||
|
# COPY ./server/resources ./resources
|
||||||
|
|
||||||
|
# Vykopírování sestaveného klienta
|
||||||
|
COPY ./client/dist ./public
|
||||||
|
|
||||||
|
# Zkopírování changelogů (seznamu novinek)
|
||||||
|
COPY ./server/changelogs ./server/changelogs
|
||||||
|
|
||||||
|
# Zkopírování konfigurace easter eggů a changelogů
|
||||||
|
RUN if [ -f ./server/.easter-eggs.json ]; then cp ./server/.easter-eggs.json ./server/; fi \
|
||||||
|
&& if [ -d ./server/changelogs ]; then cp -r ./server/changelogs ./server/changelogs; fi
|
||||||
|
|
||||||
|
EXPOSE 3000
|
||||||
|
|
||||||
|
CMD [ "node", "./server/src/index.js" ]
|
||||||
@@ -1,44 +1,39 @@
|
|||||||
# TODO
|
# TODO
|
||||||
|
- [ ] HTTP_REMOTE_TRUSTED_IPS se nikde nevalidují, hlavičky jsou přijímány odkudkoli
|
||||||
## HA / multi-replica follow-ups
|
- [ ] V případě zapnutí přihlašování přes trusted headers nefunguje standardní přihlášení (nevrátí žádnou odpověď)
|
||||||
- [ ] `foodRoutes.ts` per-pod rate limiter (`rateLimits` map) — s více replikami může uživatel překročit limit ~N× rychleji; přesunout do Redis (např. `INCR` + `EXPIRE`)
|
- [ ] Nemělo by se jít dostat na přihlašovací formulář (měla by tam být nanejvýš hláška nebo přesměrování)
|
||||||
- [ ] `easterEggRoutes.ts` — náhodně generované URL easter eggů jsou per-pod; URL funguje pouze na podu, který ji vygeneroval; zvážit deterministické seedy nebo sdílení přes Redis
|
- [ ] Možnost úhrady celé útraty jednou osobou
|
||||||
- [ ] `service.ts` — komplexní víceúrovňové funkce (`addChoice`, `removeChoiceIfPresent`) provádějí více po sobě jdoucích zápisů do stejného Redis klíče; pro plnou atomicitu je potřeba per-klíčový distribuovaný zámek (Redlock nebo `SET NX EX`) nebo sloučení logiky do jednoho `updateData` volání
|
|
||||||
- [X] HTTP_REMOTE_TRUSTED_IPS se nikde nevalidují, hlavičky jsou přijímány odkudkoli — kontroluje se skutečná adresa spojení (trustedHeaders.ts)
|
|
||||||
- [X] V případě zapnutí přihlašování přes trusted headers nefunguje standardní přihlášení (nevrátí žádnou odpověď)
|
|
||||||
- [X] Nemělo by se jít dostat na přihlašovací formulář (měla by tam být nanejvýš hláška nebo přesměrování)
|
|
||||||
- [X] Možnost úhrady celé útraty jednou osobou
|
|
||||||
- Základní myšlenka: jedna osoba uhradí celou útratu (v zájmu rychlosti odbavení), ostatním se automaticky vygeneruje QR kód, kterým následně uhradí svoji část útraty
|
- Základní myšlenka: jedna osoba uhradí celou útratu (v zájmu rychlosti odbavení), ostatním se automaticky vygeneruje QR kód, kterým následně uhradí svoji část útraty
|
||||||
- Obecně to bude problém např. pokud si někdo objedná něco navíc (pití apod.)
|
- Obecně to bude problém např. pokud si někdo objedná něco navíc (pití apod.)
|
||||||
- [X] Tlačítko "Uhradit" u každého řádku podniku - platí ten, kdo kliknul
|
- [ ] Tlačítko "Uhradit" u každého řádku podniku - platí ten, kdo kliknul
|
||||||
- [X] Zobrazeno bude pouze, pokud má daný uživatel nastaveno číslo účtu
|
- [ ] Zobrazeno bude pouze, pokud má daný uživatel nastaveno číslo účtu
|
||||||
- [X] Dialog pro zadání spropitného, které se následně rozpočte rovnoměrně všem strávníkům
|
- [ ] Dialog pro zadání spropitného, které se následně rozpočte rovnoměrně všem strávníkům
|
||||||
- [X] Generování a zobrazení QR kódů ostatním strávníkům
|
- [ ] Generování a zobrazení QR kódů ostatním strávníkům
|
||||||
- [X] Umožnit u každého strávníka připočíst vlastní částku (např. za pití)
|
- [ ] Umožnit u každého strávníka připočíst vlastní částku (např. za pití)
|
||||||
- [X] Umožnit (např. zaškrtávátky) vybrat, za koho bude zaplaceno (pokud někdo bude platit zvlášť)
|
- [ ] Umožnit (např. zaškrtávátky) vybrat, za koho bude zaplaceno (pokud někdo bude platit zvlášť)
|
||||||
- [X] Podpora pro notifikace v externích systémech (Gotify, Discord, MS Teams)
|
- [ ] Podpora pro notifikace v externích systémech (Gotify, Discord, MS Teams)
|
||||||
- [X] Umožnit zadat URL/tokeny uživatelem — ntfy, Discord, MS Teams (Gotify jen globálně na serveru)
|
- [ ] Umožnit zadat URL/tokeny uživatelem
|
||||||
- [X] Umožnit uživatelsky konfigurovat typy notifikací, které se budou odesílat
|
- [ ] Umožnit uživatelsky konfigurovat typy notifikací, které se budou odesílat
|
||||||
- [X] Zavést notifikace typu "Jdeme na oběd"
|
- [ ] Zavést notifikace typu "Jdeme na oběd"
|
||||||
- [X] Notifikaci dostanou pouze uživatelé, kteří mají vybranou stejnou lokalitu
|
- [ ] Notifikaci dostanou pouze uživatelé, kteří mají vybranou stejnou lokalitu
|
||||||
- [X] Vylepšit parsery restaurací
|
- [ ] Vylepšit parsery restaurací
|
||||||
- [X] Sladovnická
|
- [ ] Sladovnická
|
||||||
- [X] Zbytečná prvotní validace indexu, datum konkrétního dne je i v samotné tabulce s jídly, viz TODO v parseru — parser mapuje dny přímo, TODO v parseru už není
|
- [ ] Zbytečná prvotní validace indexu, datum konkrétního dne je i v samotné tabulce s jídly, viz TODO v parseru
|
||||||
- [X] U Motlíků — odpadá, podnik už v aplikaci není
|
- [ ] U Motlíků
|
||||||
- [X] Validovat, že vstupní datum je zahrnuto v rozsahu uvedeném nad tabulkou (např. '12.6.-16.6.')
|
- [ ] Validovat, že vstupní datum je zahrnuto v rozsahu uvedeném nad tabulkou (např. '12.6.-16.6.')
|
||||||
- [X] Jídelní lístek se stahuje jednou každý den, teoreticky by stačilo jednou týdně (za předpokladu, že se během týdne nemění)
|
- [ ] Jídelní lístek se stahuje jednou každý den, teoreticky by stačilo jednou týdně (za předpokladu, že se během týdne nemění)
|
||||||
- [X] TechTower
|
- [ ] TechTower
|
||||||
- [X] Validovat, že vstupní datum je zahrnuto v rozsahu uvedeném nad tabulkou (typicky 'Obědy 12. 6. - 16. 6. 2023 (každý den vždy i obědový bufet)') — finalizeTechTower, StaleWeekError
|
- [ ] Validovat, že vstupní datum je zahrnuto v rozsahu uvedeném nad tabulkou (typicky 'Obědy 12. 6. - 16. 6. 2023 (každý den vždy i obědový bufet)')
|
||||||
- [X] Jídelní lístek se stahuje v rámci prvního požadavku daný den, ale často se jídelní lístek na stránkách aktualizuje až v průběhu pondělního dopoledne a ten zobrazený je proto neaktuální — zastaralé menu se po TTL stahuje znovu
|
- [ ] Jídelní lístek se stahuje v rámci prvního požadavku daný den, ale často se jídelní lístek na stránkách aktualizuje až v průběhu pondělního dopoledne a ten zobrazený je proto neaktuální
|
||||||
- Stránka neposílá hlavičku o času poslední modifikace, takže o to se nelze opřít
|
- Stránka neposílá hlavičku o času poslední modifikace, takže o to se nelze opřít
|
||||||
- Nevím aktuálně jak řešit jinak, než častějším scrapováním celé stránky
|
- Nevím aktuálně jak řešit jinak, než častějším scrapováním celé stránky
|
||||||
- [X] Někdy jsou v názvech jídel přebytečné mezery kolem čárek ( , )
|
- [X] Někdy jsou v názvech jídel přebytečné mezery kolem čárek ( , )
|
||||||
- [X] Nasazení nové verze v Docker smaže veškerá data (protože data.json není vystrčený ven z kontejneru) — data jsou v Redis s volume /data
|
- [ ] Nasazení nové verze v Docker smaže veškerá data (protože data.json není vystrčený ven z kontejneru)
|
||||||
- [X] Zavést složku /data
|
- [ ] Zavést složku /data
|
||||||
- [ ] Mazat z databáze data z minulosti, aktuálně je to k ničemu
|
- [ ] Mazat z databáze data z minulosti, aktuálně je to k ničemu
|
||||||
- [X] Skripty pro snadné spuštění vývoje na Windows (ekvivalent ./run_dev.sh) — run_dev.ps1
|
- [ ] Skripty pro snadné spuštění vývoje na Windows (ekvivalent ./run_dev.sh)
|
||||||
- [ ] Implementovat Pizza day
|
- [ ] Implementovat Pizza day
|
||||||
- [X] Zobrazit upozornění před smazáním/zamknutím/odemknutím pizza day
|
- [ ] Zobrazit upozornění před smazáním/zamknutím/odemknutím pizza day
|
||||||
- [ ] Pizzy se samy budou při naklikání přidávat do košíku
|
- [ ] Pizzy se samy budou při naklikání přidávat do košíku
|
||||||
- [ ] Nutno nejprve vyřešit předávání PHPSESSIONID cookie na pizzachefie.cz pomocí fetch()
|
- [ ] Nutno nejprve vyřešit předávání PHPSESSIONID cookie na pizzachefie.cz pomocí fetch()
|
||||||
- [ ] Ceny krabic za pizzu jsou napevno v kódu - problém, pokud se někdy změní
|
- [ ] Ceny krabic za pizzu jsou napevno v kódu - problém, pokud se někdy změní
|
||||||
|
|||||||
@@ -9,9 +9,6 @@
|
|||||||
<meta name="description" content="Moderní webová aplikace pro lepší správu obědových preferencí" />
|
<meta name="description" content="Moderní webová aplikace pro lepší správu obědových preferencí" />
|
||||||
<link rel="apple-touch-icon" href="/logo192.png" />
|
<link rel="apple-touch-icon" href="/logo192.png" />
|
||||||
<link rel="manifest" href="/manifest.json" />
|
<link rel="manifest" href="/manifest.json" />
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;800&family=Nunito:wght@600;800;900&display=swap" rel="stylesheet" />
|
|
||||||
<title>Luncher</title>
|
<title>Luncher</title>
|
||||||
<script>
|
<script>
|
||||||
(function() {
|
(function() {
|
||||||
@@ -27,8 +24,6 @@
|
|||||||
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||||
}
|
}
|
||||||
document.documentElement.setAttribute('data-bs-theme', theme);
|
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||||
var style = localStorage.getItem('style_theme');
|
|
||||||
document.documentElement.setAttribute('data-luncher-theme', style === 'umamusume' ? 'umamusume' : 'simple');
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
// Fallback pokud localStorage není dostupný
|
// Fallback pokud localStorage není dostupný
|
||||||
document.documentElement.setAttribute('data-bs-theme', 'light');
|
document.documentElement.setAttribute('data-bs-theme', 'light');
|
||||||
|
|||||||
@@ -10,7 +10,6 @@
|
|||||||
"@fortawesome/free-regular-svg-icons": "^7.1.0",
|
"@fortawesome/free-regular-svg-icons": "^7.1.0",
|
||||||
"@fortawesome/free-solid-svg-icons": "^7.1.0",
|
"@fortawesome/free-solid-svg-icons": "^7.1.0",
|
||||||
"@fortawesome/react-fontawesome": "^3.1.0",
|
"@fortawesome/react-fontawesome": "^3.1.0",
|
||||||
"@sentry/react": "^10.65.0",
|
|
||||||
"@types/jest": "^30.0.0",
|
"@types/jest": "^30.0.0",
|
||||||
"@types/node": "^24.10.0",
|
"@types/node": "^24.10.0",
|
||||||
"@types/react": "^19.2.2",
|
"@types/react": "^19.2.2",
|
||||||
@@ -19,7 +18,6 @@
|
|||||||
"bootstrap": "^5.3.8",
|
"bootstrap": "^5.3.8",
|
||||||
"react": "^19.2.0",
|
"react": "^19.2.0",
|
||||||
"react-bootstrap": "^2.10.10",
|
"react-bootstrap": "^2.10.10",
|
||||||
"react-datepicker": "^9.1.0",
|
|
||||||
"react-dom": "^19.2.0",
|
"react-dom": "^19.2.0",
|
||||||
"react-jwt": "^1.3.0",
|
"react-jwt": "^1.3.0",
|
||||||
"react-modal": "^3.16.3",
|
"react-modal": "^3.16.3",
|
||||||
|
|||||||
@@ -1,18 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
|
||||||
<!-- Netopýr (čelem doprava; JS natáčí dle směru letu) -->
|
|
||||||
<g fill="#2B2733" stroke="#15121A" stroke-width="1.5" stroke-linejoin="round">
|
|
||||||
<!-- křídla -->
|
|
||||||
<path d="M50,52 C34,30 18,30 6,40 C16,42 18,52 14,62 C24,54 34,52 44,58 Z"/>
|
|
||||||
<path d="M50,52 C66,30 82,30 94,40 C84,42 82,52 86,62 C76,54 66,52 56,58 Z"/>
|
|
||||||
<!-- tělo -->
|
|
||||||
<ellipse cx="50" cy="56" rx="9" ry="13"/>
|
|
||||||
<!-- uši -->
|
|
||||||
<path d="M44,44 L40,32 L48,42 Z"/>
|
|
||||||
<path d="M56,44 L60,32 L52,42 Z"/>
|
|
||||||
</g>
|
|
||||||
<!-- oči -->
|
|
||||||
<g fill="#F5C518">
|
|
||||||
<circle cx="46" cy="50" r="1.8"/>
|
|
||||||
<circle cx="54" cy="50" r="1.8"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 716 B |
@@ -1,26 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
|
||||||
<!-- Vosa letící doprava (JS překlápí podle směru) -->
|
|
||||||
<!-- křídla -->
|
|
||||||
<g fill="#DDEEFF" stroke="#9BB6CC" stroke-width="1" opacity="0.85">
|
|
||||||
<ellipse cx="46" cy="30" rx="14" ry="8" transform="rotate(-18 46 30)"/>
|
|
||||||
<ellipse cx="58" cy="32" rx="11" ry="6" transform="rotate(-8 58 32)"/>
|
|
||||||
</g>
|
|
||||||
<!-- žihadlo -->
|
|
||||||
<path fill="#3A2E00" d="M18,50 L6,50 L18,46 Z"/>
|
|
||||||
<!-- tělo -->
|
|
||||||
<g stroke="#3A2E00" stroke-width="1.4" stroke-linejoin="round">
|
|
||||||
<ellipse cx="46" cy="50" rx="30" ry="16" fill="#F5C518"/>
|
|
||||||
<!-- pruhy -->
|
|
||||||
<path fill="#2B2200" stroke="none" d="M34,36 q6,14 0,28 q-8,-2 -10,-14 q2,-12 10,-14 z"/>
|
|
||||||
<path fill="#2B2200" stroke="none" d="M50,35 q6,15 0,30 q-8,-3 -8,-15 q0,-12 8,-15 z"/>
|
|
||||||
<!-- hlava -->
|
|
||||||
<circle cx="72" cy="50" r="10" fill="#2B2200"/>
|
|
||||||
</g>
|
|
||||||
<!-- oko a tykadla -->
|
|
||||||
<circle fill="#FFFFFF" cx="75" cy="47" r="2.4"/>
|
|
||||||
<circle fill="#20313F" cx="75.6" cy="47" r="1.2"/>
|
|
||||||
<g stroke="#2B2200" stroke-width="1.2" fill="none" stroke-linecap="round">
|
|
||||||
<path d="M78,42 C84,36 88,36 90,38"/>
|
|
||||||
<path d="M80,44 C86,40 90,41 92,43"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.2 KiB |
@@ -1,18 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
|
||||||
<!-- Pták letící doprava (JS překlápí podle směru) -->
|
|
||||||
<g stroke="#3A4A5A" stroke-width="1.5" stroke-linejoin="round">
|
|
||||||
<!-- ocas -->
|
|
||||||
<path fill="#5C6B7A" d="M18,52 L4,44 L6,56 L2,64 L18,60 Z"/>
|
|
||||||
<!-- tělo -->
|
|
||||||
<path fill="#6E7F90" d="M16,58 C24,44 44,40 64,46 C74,49 82,54 84,56 C78,62 66,66 52,66 C36,66 22,64 16,58 Z"/>
|
|
||||||
<!-- křídlo (nahoru) -->
|
|
||||||
<path fill="#55636F" d="M40,52 C46,30 60,24 70,26 C64,38 58,48 54,56 C50,58 44,57 40,52 Z"/>
|
|
||||||
<!-- hlava -->
|
|
||||||
<circle fill="#6E7F90" cx="78" cy="50" r="12"/>
|
|
||||||
</g>
|
|
||||||
<!-- zobák -->
|
|
||||||
<path fill="#F6A21E" stroke="#B9740A" stroke-width="1" stroke-linejoin="round" d="M88,48 L98,50 L88,54 Z"/>
|
|
||||||
<!-- oko -->
|
|
||||||
<circle fill="#20313F" cx="82" cy="47" r="2.2"/>
|
|
||||||
<circle fill="#FFFFFF" cx="82.8" cy="46.3" r="0.7"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 898 B |
@@ -1,24 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
|
||||||
<g stroke="#1B3F73" stroke-width="1.5" stroke-linejoin="round">
|
|
||||||
<path fill="#4A8FE7" d="M48,32 C30,10 8,14 8,34 C8,50 30,52 48,50 Z"/>
|
|
||||||
<path fill="#4A8FE7" d="M52,32 C70,10 92,14 92,34 C92,50 70,52 52,50 Z"/>
|
|
||||||
<path fill="#4A8FE7" d="M47,50 C34,54 16,58 18,74 C20,86 40,84 47,66 Z"/>
|
|
||||||
<path fill="#4A8FE7" d="M53,50 C66,54 84,58 82,74 C80,86 60,84 53,66 Z"/>
|
|
||||||
</g>
|
|
||||||
<g fill="#BBD7FF" stroke="none">
|
|
||||||
<circle cx="20" cy="30" r="4"/>
|
|
||||||
<circle cx="80" cy="30" r="4"/>
|
|
||||||
<circle cx="30" cy="70" r="3"/>
|
|
||||||
<circle cx="70" cy="70" r="3"/>
|
|
||||||
</g>
|
|
||||||
<g stroke="#17233B" stroke-width="1.6" fill="none" stroke-linecap="round">
|
|
||||||
<path d="M49,28 C44,18 40,14 36,11"/>
|
|
||||||
<path d="M51,28 C56,18 60,14 64,11"/>
|
|
||||||
</g>
|
|
||||||
<g fill="#17233B" stroke="none">
|
|
||||||
<circle cx="36" cy="11" r="1.8"/>
|
|
||||||
<circle cx="64" cy="11" r="1.8"/>
|
|
||||||
<rect x="47.5" y="24" width="5" height="52" rx="2.5"/>
|
|
||||||
<circle cx="50" cy="24" r="4.5"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -1,66 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
|
||||||
<defs>
|
|
||||||
<radialGradient id="goldGlow" cx="0.5" cy="0.5" r="0.55">
|
|
||||||
<stop offset="0%" stop-color="#FFF6C8" stop-opacity="0.9"/>
|
|
||||||
<stop offset="55%" stop-color="#FFD24A" stop-opacity="0.35"/>
|
|
||||||
<stop offset="100%" stop-color="#FFD24A" stop-opacity="0"/>
|
|
||||||
</radialGradient>
|
|
||||||
<linearGradient id="goldWing" x1="0" y1="0" x2="0.7" y2="1">
|
|
||||||
<stop offset="0%" stop-color="#FFFBE6"/>
|
|
||||||
<stop offset="35%" stop-color="#FFDE6A"/>
|
|
||||||
<stop offset="70%" stop-color="#F5B617"/>
|
|
||||||
<stop offset="100%" stop-color="#C97B00"/>
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient id="goldSheen" x1="0" y1="0" x2="1" y2="1">
|
|
||||||
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.9"/>
|
|
||||||
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="0"/>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
|
|
||||||
<!-- Zářivá aura -->
|
|
||||||
<circle cx="50" cy="48" r="48" fill="url(#goldGlow)"/>
|
|
||||||
|
|
||||||
<!-- Křídla -->
|
|
||||||
<g stroke="#8A5A00" stroke-width="1.6" stroke-linejoin="round">
|
|
||||||
<path fill="url(#goldWing)" d="M48,32 C30,8 6,12 6,34 C6,52 30,54 48,50 Z"/>
|
|
||||||
<path fill="url(#goldWing)" d="M52,32 C70,8 94,12 94,34 C94,52 70,54 52,50 Z"/>
|
|
||||||
<path fill="url(#goldWing)" d="M47,50 C33,54 14,58 16,76 C18,89 41,86 47,66 Z"/>
|
|
||||||
<path fill="url(#goldWing)" d="M53,50 C67,54 86,58 84,76 C82,89 59,86 53,66 Z"/>
|
|
||||||
</g>
|
|
||||||
|
|
||||||
<!-- Drahokamové body na křídlech -->
|
|
||||||
<g fill="#FFF8D8" stroke="#E8B23A" stroke-width="0.6">
|
|
||||||
<circle cx="20" cy="30" r="4.5"/>
|
|
||||||
<circle cx="80" cy="30" r="4.5"/>
|
|
||||||
<circle cx="29" cy="72" r="3.5"/>
|
|
||||||
<circle cx="71" cy="72" r="3.5"/>
|
|
||||||
</g>
|
|
||||||
<g fill="#B8860B">
|
|
||||||
<circle cx="20" cy="30" r="1.6"/>
|
|
||||||
<circle cx="80" cy="30" r="1.6"/>
|
|
||||||
</g>
|
|
||||||
|
|
||||||
<!-- Lesklý přeliv přes horní křídla -->
|
|
||||||
<path fill="url(#goldSheen)" opacity="0.55" d="M48,33 C34,15 16,17 12,31 C24,26 40,27 48,40 Z"/>
|
|
||||||
|
|
||||||
<!-- Tykadla -->
|
|
||||||
<g stroke="#6A4A00" stroke-width="1.6" fill="none" stroke-linecap="round">
|
|
||||||
<path d="M49,28 C44,17 40,13 36,10"/>
|
|
||||||
<path d="M51,28 C56,17 60,13 64,10"/>
|
|
||||||
</g>
|
|
||||||
|
|
||||||
<!-- Tělo -->
|
|
||||||
<g fill="#5A3E00" stroke="none">
|
|
||||||
<circle cx="36" cy="10" r="2"/>
|
|
||||||
<circle cx="64" cy="10" r="2"/>
|
|
||||||
<rect x="47" y="24" width="6" height="52" rx="3"/>
|
|
||||||
<circle cx="50" cy="24" r="5"/>
|
|
||||||
</g>
|
|
||||||
|
|
||||||
<!-- Jiskry -->
|
|
||||||
<g fill="#FFFFFF">
|
|
||||||
<path d="M50 2 l1.4 3.4 l3.4 1.4 l-3.4 1.4 l-1.4 3.4 l-1.4 -3.4 l-3.4 -1.4 l3.4 -1.4 z"/>
|
|
||||||
<path d="M90 20 l1 2.6 l2.6 1 l-2.6 1 l-1 2.6 l-1 -2.6 l-2.6 -1 l2.6 -1 z" opacity="0.85"/>
|
|
||||||
<path d="M12 66 l0.9 2.3 l2.3 0.9 l-2.3 0.9 l-0.9 2.3 l-0.9 -2.3 l-2.3 -0.9 l2.3 -0.9 z" opacity="0.8"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.6 KiB |
@@ -1,34 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="mothWing" x1="0" y1="0" x2="0.6" y2="1">
|
|
||||||
<stop offset="0%" stop-color="#5A5560"/>
|
|
||||||
<stop offset="60%" stop-color="#3A3540"/>
|
|
||||||
<stop offset="100%" stop-color="#211E26"/>
|
|
||||||
</linearGradient>
|
|
||||||
</defs>
|
|
||||||
<g stroke="#15121A" stroke-width="1.5" stroke-linejoin="round">
|
|
||||||
<path fill="url(#mothWing)" d="M48,34 C32,16 10,20 10,36 C10,50 30,50 48,48 Z"/>
|
|
||||||
<path fill="url(#mothWing)" d="M52,34 C68,16 90,20 90,36 C90,50 70,50 52,48 Z"/>
|
|
||||||
<path fill="url(#mothWing)" d="M47,49 C35,52 20,56 22,70 C24,80 42,78 47,62 Z"/>
|
|
||||||
<path fill="url(#mothWing)" d="M53,49 C65,52 80,56 78,70 C76,80 58,78 53,62 Z"/>
|
|
||||||
</g>
|
|
||||||
<!-- zlověstné oční skvrny -->
|
|
||||||
<g fill="#C9302C" stroke="#3a0d0b" stroke-width="1">
|
|
||||||
<circle cx="24" cy="34" r="4"/>
|
|
||||||
<circle cx="76" cy="34" r="4"/>
|
|
||||||
</g>
|
|
||||||
<g fill="#1a0605">
|
|
||||||
<circle cx="24" cy="34" r="1.6"/>
|
|
||||||
<circle cx="76" cy="34" r="1.6"/>
|
|
||||||
</g>
|
|
||||||
<!-- huňatá tykadla -->
|
|
||||||
<g stroke="#15121A" stroke-width="1.8" fill="none" stroke-linecap="round">
|
|
||||||
<path d="M49,30 C44,20 39,16 34,14"/>
|
|
||||||
<path d="M51,30 C56,20 61,16 66,14"/>
|
|
||||||
</g>
|
|
||||||
<!-- tělo -->
|
|
||||||
<g fill="#15121A" stroke="none">
|
|
||||||
<rect x="47" y="26" width="6" height="46" rx="3"/>
|
|
||||||
<circle cx="50" cy="26" r="5"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.3 KiB |
@@ -1,79 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 100 100"
|
|
||||||
width="100"
|
|
||||||
height="100">
|
|
||||||
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="netFillGold" x1="0" y1="0" x2="0.4" y2="1">
|
|
||||||
<stop offset="0%" stop-color="#FFF3C4" stop-opacity="0.28"/>
|
|
||||||
<stop offset="100%" stop-color="#F0C24A" stop-opacity="0.12"/>
|
|
||||||
</linearGradient>
|
|
||||||
|
|
||||||
<clipPath id="netBagClipGold">
|
|
||||||
<path d="
|
|
||||||
M 36 8
|
|
||||||
C 21 8, 9 20, 9 35
|
|
||||||
C 9 51, 13 70, 19 84
|
|
||||||
C 22 92, 27 94, 31 87
|
|
||||||
C 40 72, 54 51, 63 35
|
|
||||||
C 63 20, 51 8, 36 8
|
|
||||||
Z"/>
|
|
||||||
</clipPath>
|
|
||||||
</defs>
|
|
||||||
|
|
||||||
<!-- Síťový vak za obručí -->
|
|
||||||
<path d="
|
|
||||||
M 36 8
|
|
||||||
C 21 8, 9 20, 9 35
|
|
||||||
C 9 51, 13 70, 19 84
|
|
||||||
C 22 92, 27 94, 31 87
|
|
||||||
C 40 72, 54 51, 63 35
|
|
||||||
C 63 20, 51 8, 36 8
|
|
||||||
Z"
|
|
||||||
fill="url(#netFillGold)"
|
|
||||||
stroke="#E8B23A"
|
|
||||||
stroke-width="1"
|
|
||||||
opacity="0.85"/>
|
|
||||||
|
|
||||||
<!-- Výplet síťky -->
|
|
||||||
<g clip-path="url(#netBagClipGold)"
|
|
||||||
fill="none"
|
|
||||||
stroke="#E8B23A"
|
|
||||||
stroke-width="0.8"
|
|
||||||
opacity="0.7"
|
|
||||||
stroke-linecap="round">
|
|
||||||
<path d="M 16 17 C 15 42, 19 69, 25 90"/>
|
|
||||||
<path d="M 25 10 C 23 39, 24 69, 25 90"/>
|
|
||||||
<path d="M 36 8 C 34 39, 30 69, 25 90"/>
|
|
||||||
<path d="M 47 10 C 44 40, 36 70, 25 90"/>
|
|
||||||
<path d="M 56 18 C 51 44, 41 72, 25 90"/>
|
|
||||||
<path d="M 62 30 C 55 51, 43 75, 25 90"/>
|
|
||||||
<path d="M 9 29 C 13 49, 18 72, 25 90"/>
|
|
||||||
<path d="M 10 42 C 14 60, 19 78, 25 90"/>
|
|
||||||
<path d="M 16 17 C 28 22, 45 22, 56 18"/>
|
|
||||||
<path d="M 10 28 C 25 34, 47 34, 62 29"/>
|
|
||||||
<path d="M 9 40 C 25 46, 45 47, 59 42"/>
|
|
||||||
<path d="M 11 52 C 24 58, 41 59, 53 54"/>
|
|
||||||
<path d="M 13 64 C 24 69, 36 70, 45 66"/>
|
|
||||||
<path d="M 16 75 C 24 79, 31 80, 38 77"/>
|
|
||||||
<path d="M 20 84 C 24 87, 28 87, 32 84"/>
|
|
||||||
</g>
|
|
||||||
|
|
||||||
<!-- Rukojeť -->
|
|
||||||
<line x1="57" y1="57" x2="93" y2="93" stroke="#8B5A2B" stroke-width="6" stroke-linecap="round"/>
|
|
||||||
<line x1="57" y1="57" x2="93" y2="93" stroke="#A9713A" stroke-width="3" stroke-linecap="round"/>
|
|
||||||
|
|
||||||
<!-- Kovové napojení rukojeti -->
|
|
||||||
<line x1="56" y1="55" x2="61" y2="61" stroke="#B8860B" stroke-width="6" stroke-linecap="round"/>
|
|
||||||
<line x1="56" y1="55" x2="61" y2="61" stroke="#FFE79A" stroke-width="2.5" stroke-linecap="round"/>
|
|
||||||
|
|
||||||
<!-- Zlatá obruč -->
|
|
||||||
<circle cx="36" cy="35" r="27" fill="none" stroke="#C8891A" stroke-width="4.5"/>
|
|
||||||
<circle cx="36" cy="35" r="27" fill="none" stroke="#FFD24A" stroke-width="2"/>
|
|
||||||
|
|
||||||
<!-- Třpytky -->
|
|
||||||
<g fill="#FFF7D6" stroke="none">
|
|
||||||
<path d="M 33 6 l 1.2 3 l 3 1.2 l -3 1.2 l -1.2 3 l -1.2 -3 l -3 -1.2 l 3 -1.2 z"/>
|
|
||||||
<path d="M 60 40 l 1 2.4 l 2.4 1 l -2.4 1 l -1 2.4 l -1 -2.4 l -2.4 -1 l 2.4 -1 z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.7 KiB |
@@ -1,74 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 100 100"
|
|
||||||
width="100"
|
|
||||||
height="100">
|
|
||||||
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="netFillTorn" x1="0" y1="0" x2="0.4" y2="1">
|
|
||||||
<stop offset="0%" stop-color="#E4EDF5" stop-opacity="0.14"/>
|
|
||||||
<stop offset="100%" stop-color="#B9C4CF" stop-opacity="0.06"/>
|
|
||||||
</linearGradient>
|
|
||||||
|
|
||||||
<!-- Vak s vyříznutou dírou uprostřed -->
|
|
||||||
<clipPath id="netBagClipTorn">
|
|
||||||
<path d="
|
|
||||||
M 36 8 C 21 8, 9 20, 9 35 C 9 51, 13 70, 19 84
|
|
||||||
C 22 92, 27 94, 31 87 C 40 72, 54 51, 63 35 C 63 20, 51 8, 36 8 Z
|
|
||||||
M 27 40 C 20 44, 22 55, 30 58 C 38 61, 46 54, 43 46 C 41 40, 33 37, 27 40 Z"
|
|
||||||
clip-rule="evenodd"/>
|
|
||||||
</clipPath>
|
|
||||||
</defs>
|
|
||||||
|
|
||||||
<!-- Síťový vak (s dírou) -->
|
|
||||||
<path d="
|
|
||||||
M 36 8 C 21 8, 9 20, 9 35 C 9 51, 13 70, 19 84
|
|
||||||
C 22 92, 27 94, 31 87 C 40 72, 54 51, 63 35 C 63 20, 51 8, 36 8 Z
|
|
||||||
M 27 40 C 20 44, 22 55, 30 58 C 38 61, 46 54, 43 46 C 41 40, 33 37, 27 40 Z"
|
|
||||||
fill="url(#netFillTorn)"
|
|
||||||
stroke="#AEBBC8"
|
|
||||||
stroke-width="1"
|
|
||||||
opacity="0.7"
|
|
||||||
fill-rule="evenodd"/>
|
|
||||||
|
|
||||||
<!-- Výplet síťky (oříznutý dírou) -->
|
|
||||||
<g clip-path="url(#netBagClipTorn)"
|
|
||||||
fill="none"
|
|
||||||
stroke="#AEBBC8"
|
|
||||||
stroke-width="0.8"
|
|
||||||
opacity="0.55"
|
|
||||||
stroke-linecap="round">
|
|
||||||
<path d="M 16 17 C 15 42, 19 69, 25 90"/>
|
|
||||||
<path d="M 25 10 C 23 39, 24 69, 25 90"/>
|
|
||||||
<path d="M 36 8 C 34 39, 30 69, 25 90"/>
|
|
||||||
<path d="M 47 10 C 44 40, 36 70, 25 90"/>
|
|
||||||
<path d="M 56 18 C 51 44, 41 72, 25 90"/>
|
|
||||||
<path d="M 62 30 C 55 51, 43 75, 25 90"/>
|
|
||||||
<path d="M 9 29 C 13 49, 18 72, 25 90"/>
|
|
||||||
<path d="M 10 42 C 14 60, 19 78, 25 90"/>
|
|
||||||
<path d="M 16 17 C 28 22, 45 22, 56 18"/>
|
|
||||||
<path d="M 13 64 C 24 69, 36 70, 45 66"/>
|
|
||||||
<path d="M 16 75 C 24 79, 31 80, 38 77"/>
|
|
||||||
<path d="M 20 84 C 24 87, 28 87, 32 84"/>
|
|
||||||
</g>
|
|
||||||
|
|
||||||
<!-- Roztřepená vlákna kolem díry -->
|
|
||||||
<g stroke="#9AA7B4" stroke-width="0.8" fill="none" stroke-linecap="round" opacity="0.8">
|
|
||||||
<path d="M 27 40 l -3 -2"/>
|
|
||||||
<path d="M 43 46 l 3 -1"/>
|
|
||||||
<path d="M 30 58 l -1 3"/>
|
|
||||||
<path d="M 38 52 l 3 2"/>
|
|
||||||
<path d="M 24 49 l -3 1"/>
|
|
||||||
</g>
|
|
||||||
|
|
||||||
<!-- Rukojeť -->
|
|
||||||
<line x1="57" y1="57" x2="93" y2="93" stroke="#8B5A2B" stroke-width="6" stroke-linecap="round"/>
|
|
||||||
<line x1="57" y1="57" x2="93" y2="93" stroke="#A9713A" stroke-width="3" stroke-linecap="round"/>
|
|
||||||
|
|
||||||
<!-- Kovové napojení rukojeti -->
|
|
||||||
<line x1="56" y1="55" x2="61" y2="61" stroke="#71808E" stroke-width="6" stroke-linecap="round"/>
|
|
||||||
<line x1="56" y1="55" x2="61" y2="61" stroke="#B8C4CF" stroke-width="2.5" stroke-linecap="round"/>
|
|
||||||
|
|
||||||
<!-- Obruč -->
|
|
||||||
<circle cx="36" cy="35" r="27" fill="none" stroke="#7A8896" stroke-width="4.5"/>
|
|
||||||
<circle cx="36" cy="35" r="27" fill="none" stroke="#AEBBC8" stroke-width="2"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.9 KiB |
@@ -1,106 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 100 100"
|
|
||||||
width="100"
|
|
||||||
height="100">
|
|
||||||
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="netFill" x1="0" y1="0" x2="0.4" y2="1">
|
|
||||||
<stop offset="0%" stop-color="#E4EDF5" stop-opacity="0.18"/>
|
|
||||||
<stop offset="100%" stop-color="#B9C4CF" stop-opacity="0.08"/>
|
|
||||||
</linearGradient>
|
|
||||||
|
|
||||||
<!-- Celý tvar síťového vaku -->
|
|
||||||
<clipPath id="netBagClip">
|
|
||||||
<path d="
|
|
||||||
M 36 8
|
|
||||||
C 21 8, 9 20, 9 35
|
|
||||||
C 9 51, 13 70, 19 84
|
|
||||||
C 22 92, 27 94, 31 87
|
|
||||||
C 40 72, 54 51, 63 35
|
|
||||||
C 63 20, 51 8, 36 8
|
|
||||||
Z"/>
|
|
||||||
</clipPath>
|
|
||||||
</defs>
|
|
||||||
|
|
||||||
<!-- Síťový vak za obručí -->
|
|
||||||
<path d="
|
|
||||||
M 36 8
|
|
||||||
C 21 8, 9 20, 9 35
|
|
||||||
C 9 51, 13 70, 19 84
|
|
||||||
C 22 92, 27 94, 31 87
|
|
||||||
C 40 72, 54 51, 63 35
|
|
||||||
C 63 20, 51 8, 36 8
|
|
||||||
Z"
|
|
||||||
fill="url(#netFill)"
|
|
||||||
stroke="#AEBBC8"
|
|
||||||
stroke-width="1"
|
|
||||||
opacity="0.7"/>
|
|
||||||
|
|
||||||
<!-- Výplet síťky -->
|
|
||||||
<g clip-path="url(#netBagClip)"
|
|
||||||
fill="none"
|
|
||||||
stroke="#AEBBC8"
|
|
||||||
stroke-width="0.8"
|
|
||||||
opacity="0.6"
|
|
||||||
stroke-linecap="round">
|
|
||||||
|
|
||||||
<!-- Vlákna začínající na horní a boční obruči -->
|
|
||||||
<path d="M 16 17 C 15 42, 19 69, 25 90"/>
|
|
||||||
<path d="M 25 10 C 23 39, 24 69, 25 90"/>
|
|
||||||
<path d="M 36 8 C 34 39, 30 69, 25 90"/>
|
|
||||||
<path d="M 47 10 C 44 40, 36 70, 25 90"/>
|
|
||||||
<path d="M 56 18 C 51 44, 41 72, 25 90"/>
|
|
||||||
<path d="M 62 30 C 55 51, 43 75, 25 90"/>
|
|
||||||
|
|
||||||
<!-- Vlákna od levého okraje obruče -->
|
|
||||||
<path d="M 9 29 C 13 49, 18 72, 25 90"/>
|
|
||||||
<path d="M 10 42 C 14 60, 19 78, 25 90"/>
|
|
||||||
|
|
||||||
<!-- Příčná oka -->
|
|
||||||
<path d="M 16 17 C 28 22, 45 22, 56 18"/>
|
|
||||||
<path d="M 10 28 C 25 34, 47 34, 62 29"/>
|
|
||||||
<path d="M 9 40 C 25 46, 45 47, 59 42"/>
|
|
||||||
<path d="M 11 52 C 24 58, 41 59, 53 54"/>
|
|
||||||
<path d="M 13 64 C 24 69, 36 70, 45 66"/>
|
|
||||||
<path d="M 16 75 C 24 79, 31 80, 38 77"/>
|
|
||||||
<path d="M 20 84 C 24 87, 28 87, 32 84"/>
|
|
||||||
</g>
|
|
||||||
|
|
||||||
<!-- Rukojeť -->
|
|
||||||
<line x1="57" y1="57"
|
|
||||||
x2="93" y2="93"
|
|
||||||
stroke="#8B5A2B"
|
|
||||||
stroke-width="6"
|
|
||||||
stroke-linecap="round"/>
|
|
||||||
|
|
||||||
<line x1="57" y1="57"
|
|
||||||
x2="93" y2="93"
|
|
||||||
stroke="#A9713A"
|
|
||||||
stroke-width="3"
|
|
||||||
stroke-linecap="round"/>
|
|
||||||
|
|
||||||
<!-- Kovové napojení rukojeti -->
|
|
||||||
<line x1="56" y1="55"
|
|
||||||
x2="61" y2="61"
|
|
||||||
stroke="#71808E"
|
|
||||||
stroke-width="6"
|
|
||||||
stroke-linecap="round"/>
|
|
||||||
|
|
||||||
<line x1="56" y1="55"
|
|
||||||
x2="61" y2="61"
|
|
||||||
stroke="#B8C4CF"
|
|
||||||
stroke-width="2.5"
|
|
||||||
stroke-linecap="round"/>
|
|
||||||
|
|
||||||
<!-- Hlavní obruč – nezměněná -->
|
|
||||||
<circle cx="36" cy="35" r="27"
|
|
||||||
fill="none"
|
|
||||||
stroke="#7A8896"
|
|
||||||
stroke-width="4.5"/>
|
|
||||||
|
|
||||||
<circle cx="36" cy="35" r="27"
|
|
||||||
fill="none"
|
|
||||||
stroke="#AEBBC8"
|
|
||||||
stroke-width="2"/>
|
|
||||||
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.9 KiB |
@@ -1,24 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
|
||||||
<g stroke="#7A3B00" stroke-width="1.5" stroke-linejoin="round">
|
|
||||||
<path fill="#F59E1E" d="M48,32 C30,10 8,14 8,34 C8,50 30,52 48,50 Z"/>
|
|
||||||
<path fill="#F59E1E" d="M52,32 C70,10 92,14 92,34 C92,50 70,52 52,50 Z"/>
|
|
||||||
<path fill="#F59E1E" d="M47,50 C34,54 16,58 18,74 C20,86 40,84 47,66 Z"/>
|
|
||||||
<path fill="#F59E1E" d="M53,50 C66,54 84,58 82,74 C80,86 60,84 53,66 Z"/>
|
|
||||||
</g>
|
|
||||||
<g fill="#FFE0A3" stroke="none">
|
|
||||||
<circle cx="20" cy="30" r="4"/>
|
|
||||||
<circle cx="80" cy="30" r="4"/>
|
|
||||||
<circle cx="30" cy="70" r="3"/>
|
|
||||||
<circle cx="70" cy="70" r="3"/>
|
|
||||||
</g>
|
|
||||||
<g stroke="#2B1A0B" stroke-width="1.6" fill="none" stroke-linecap="round">
|
|
||||||
<path d="M49,28 C44,18 40,14 36,11"/>
|
|
||||||
<path d="M51,28 C56,18 60,14 64,11"/>
|
|
||||||
</g>
|
|
||||||
<g fill="#2B1A0B" stroke="none">
|
|
||||||
<circle cx="36" cy="11" r="1.8"/>
|
|
||||||
<circle cx="64" cy="11" r="1.8"/>
|
|
||||||
<rect x="47.5" y="24" width="5" height="52" rx="2.5"/>
|
|
||||||
<circle cx="50" cy="24" r="4.5"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -1,24 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
|
||||||
<g stroke="#8A2255" stroke-width="1.5" stroke-linejoin="round">
|
|
||||||
<path fill="#F06B9B" d="M48,32 C30,10 8,14 8,34 C8,50 30,52 48,50 Z"/>
|
|
||||||
<path fill="#F06B9B" d="M52,32 C70,10 92,14 92,34 C92,50 70,52 52,50 Z"/>
|
|
||||||
<path fill="#F06B9B" d="M47,50 C34,54 16,58 18,74 C20,86 40,84 47,66 Z"/>
|
|
||||||
<path fill="#F06B9B" d="M53,50 C66,54 84,58 82,74 C80,86 60,84 53,66 Z"/>
|
|
||||||
</g>
|
|
||||||
<g fill="#FFD1E3" stroke="none">
|
|
||||||
<circle cx="20" cy="30" r="4"/>
|
|
||||||
<circle cx="80" cy="30" r="4"/>
|
|
||||||
<circle cx="30" cy="70" r="3"/>
|
|
||||||
<circle cx="70" cy="70" r="3"/>
|
|
||||||
</g>
|
|
||||||
<g stroke="#3B0E24" stroke-width="1.6" fill="none" stroke-linecap="round">
|
|
||||||
<path d="M49,28 C44,18 40,14 36,11"/>
|
|
||||||
<path d="M51,28 C56,18 60,14 64,11"/>
|
|
||||||
</g>
|
|
||||||
<g fill="#3B0E24" stroke="none">
|
|
||||||
<circle cx="36" cy="11" r="1.8"/>
|
|
||||||
<circle cx="64" cy="11" r="1.8"/>
|
|
||||||
<rect x="47.5" y="24" width="5" height="52" rx="2.5"/>
|
|
||||||
<circle cx="50" cy="24" r="4.5"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -1,24 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
|
||||||
<g stroke="#8A6D00" stroke-width="1.5" stroke-linejoin="round">
|
|
||||||
<path fill="#FFD23F" d="M48,32 C30,10 8,14 8,34 C8,50 30,52 48,50 Z"/>
|
|
||||||
<path fill="#FFD23F" d="M52,32 C70,10 92,14 92,34 C92,50 70,52 52,50 Z"/>
|
|
||||||
<path fill="#FFD23F" d="M47,50 C34,54 16,58 18,74 C20,86 40,84 47,66 Z"/>
|
|
||||||
<path fill="#FFD23F" d="M53,50 C66,54 84,58 82,74 C80,86 60,84 53,66 Z"/>
|
|
||||||
</g>
|
|
||||||
<g fill="#FFF3C4" stroke="none">
|
|
||||||
<circle cx="20" cy="30" r="4"/>
|
|
||||||
<circle cx="80" cy="30" r="4"/>
|
|
||||||
<circle cx="30" cy="70" r="3"/>
|
|
||||||
<circle cx="70" cy="70" r="3"/>
|
|
||||||
</g>
|
|
||||||
<g stroke="#3A2E00" stroke-width="1.6" fill="none" stroke-linecap="round">
|
|
||||||
<path d="M49,28 C44,18 40,14 36,11"/>
|
|
||||||
<path d="M51,28 C56,18 60,14 64,11"/>
|
|
||||||
</g>
|
|
||||||
<g fill="#3A2E00" stroke="none">
|
|
||||||
<circle cx="36" cy="11" r="1.8"/>
|
|
||||||
<circle cx="64" cy="11" r="1.8"/>
|
|
||||||
<rect x="47.5" y="24" width="5" height="52" rx="2.5"/>
|
|
||||||
<circle cx="50" cy="24" r="4.5"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -1,22 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
|
||||||
<defs>
|
|
||||||
<radialGradient id="coinFace" cx="0.4" cy="0.35" r="0.75">
|
|
||||||
<stop offset="0%" stop-color="#FFE9A3"/>
|
|
||||||
<stop offset="60%" stop-color="#FFCB3D"/>
|
|
||||||
<stop offset="100%" stop-color="#E0A200"/>
|
|
||||||
</radialGradient>
|
|
||||||
</defs>
|
|
||||||
<circle cx="50" cy="50" r="42" fill="#C88A12"/>
|
|
||||||
<circle cx="50" cy="50" r="38" fill="url(#coinFace)" stroke="#F2D774" stroke-width="2"/>
|
|
||||||
<circle cx="50" cy="50" r="30" fill="none" stroke="#B8860B" stroke-width="2" opacity="0.6"/>
|
|
||||||
<!-- stylizovaný motýlek na minci -->
|
|
||||||
<g fill="#B8860B" opacity="0.85">
|
|
||||||
<path d="M50,42 C42,32 30,34 30,44 C30,52 42,52 50,50 Z"/>
|
|
||||||
<path d="M50,42 C58,32 70,34 70,44 C70,52 58,52 50,50 Z"/>
|
|
||||||
<path d="M49,50 C42,52 34,56 36,64 C38,70 48,66 49,58 Z"/>
|
|
||||||
<path d="M51,50 C58,52 66,56 64,64 C62,70 52,66 51,58 Z"/>
|
|
||||||
<rect x="48.5" y="40" width="3" height="26" rx="1.5"/>
|
|
||||||
</g>
|
|
||||||
<!-- lesk -->
|
|
||||||
<path d="M 30 30 C 38 24, 50 24, 58 28" fill="none" stroke="#FFF7DC" stroke-width="3" stroke-linecap="round" opacity="0.7"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,27 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
|
|
||||||
<!-- vlákno -->
|
|
||||||
<line x1="50" y1="0" x2="50" y2="30" stroke="#8A8A8A" stroke-width="1.5"/>
|
|
||||||
<g stroke="#15121A" stroke-width="3" fill="none" stroke-linecap="round">
|
|
||||||
<!-- nohy -->
|
|
||||||
<path d="M40,52 C24,44 18,52 12,46"/>
|
|
||||||
<path d="M40,58 C24,58 16,66 10,64"/>
|
|
||||||
<path d="M40,64 C26,70 20,80 12,82"/>
|
|
||||||
<path d="M40,70 C30,80 28,90 22,94"/>
|
|
||||||
<path d="M60,52 C76,44 82,52 88,46"/>
|
|
||||||
<path d="M60,58 C76,58 84,66 90,64"/>
|
|
||||||
<path d="M60,64 C74,70 80,80 88,82"/>
|
|
||||||
<path d="M60,70 C70,80 72,90 78,94"/>
|
|
||||||
</g>
|
|
||||||
<!-- tělo -->
|
|
||||||
<g stroke="#15121A" stroke-width="1.5">
|
|
||||||
<ellipse cx="50" cy="46" rx="11" ry="9" fill="#2B2733"/>
|
|
||||||
<ellipse cx="50" cy="64" rx="15" ry="16" fill="#211E26"/>
|
|
||||||
<!-- přesýpací hodiny (varovná značka) -->
|
|
||||||
<path d="M50,58 l5,6 l-5,6 l-5,-6 z" fill="#C9302C" stroke="none"/>
|
|
||||||
</g>
|
|
||||||
<!-- oči -->
|
|
||||||
<g fill="#F5C518">
|
|
||||||
<circle cx="46" cy="44" r="1.6"/>
|
|
||||||
<circle cx="54" cy="44" r="1.6"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -1,4 +1,4 @@
|
|||||||
// Service Worker pro Web Push notifikace (připomínka výběru oběda, doručení objednávky)
|
// Service Worker pro Web Push notifikace (připomínka výběru oběda)
|
||||||
|
|
||||||
self.addEventListener('push', (event) => {
|
self.addEventListener('push', (event) => {
|
||||||
const data = event.data?.json() ?? { title: 'Luncher', body: 'Ještě nemáte zvolený oběd!' };
|
const data = event.data?.json() ?? { title: 'Luncher', body: 'Ještě nemáte zvolený oběd!' };
|
||||||
@@ -6,12 +6,10 @@ self.addEventListener('push', (event) => {
|
|||||||
self.registration.showNotification(data.title, {
|
self.registration.showNotification(data.title, {
|
||||||
body: data.body,
|
body: data.body,
|
||||||
icon: '/favicon.ico',
|
icon: '/favicon.ico',
|
||||||
tag: data.tag ?? 'lunch-reminder',
|
tag: 'lunch-reminder',
|
||||||
data: { login: data.login, token: data.token, url: data.url },
|
actions: [
|
||||||
// Token posílá jen připomínka oběda — ostatní notifikace tlačítko nemají.
|
{ action: 'neobedvam', title: 'Mám vlastní/neobědvám' },
|
||||||
actions: data.token
|
],
|
||||||
? [{ action: 'neobedvam', title: 'Mám vlastní/neobědvám' }]
|
|
||||||
: [],
|
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
@@ -20,29 +18,29 @@ self.addEventListener('notificationclick', (event) => {
|
|||||||
event.notification.close();
|
event.notification.close();
|
||||||
|
|
||||||
if (event.action === 'neobedvam') {
|
if (event.action === 'neobedvam') {
|
||||||
const { login, token } = event.notification.data ?? {};
|
event.waitUntil(
|
||||||
if (login && token) {
|
self.registration.pushManager.getSubscription().then((subscription) => {
|
||||||
event.waitUntil(
|
if (!subscription) return;
|
||||||
fetch('/api/notifications/push/quickChoice', {
|
return fetch('/api/notifications/push/quickChoice', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: { 'Content-Type': 'application/json' },
|
headers: { 'Content-Type': 'application/json' },
|
||||||
body: JSON.stringify({ login, token }),
|
body: JSON.stringify({ endpoint: subscription.endpoint }),
|
||||||
})
|
});
|
||||||
);
|
})
|
||||||
}
|
);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const url = event.notification.data?.url ?? '/';
|
|
||||||
event.waitUntil(
|
event.waitUntil(
|
||||||
self.clients.matchAll({ type: 'window' }).then((clientList) => {
|
self.clients.matchAll({ type: 'window' }).then((clientList) => {
|
||||||
|
// Pokud je již otevřené okno, zaostříme na něj
|
||||||
for (const client of clientList) {
|
for (const client of clientList) {
|
||||||
if (client.url.includes(self.location.origin) && 'focus' in client) {
|
if (client.url.includes(self.location.origin) && 'focus' in client) {
|
||||||
if ('navigate' in client) client.navigate(url).catch(() => {});
|
|
||||||
return client.focus();
|
return client.focus();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return self.clients.openWindow(url);
|
// Jinak otevřeme nové
|
||||||
|
return self.clients.openWindow('/');
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -226,7 +226,6 @@ body {
|
|||||||
&:hover svg {
|
&:hover svg {
|
||||||
transform: rotate(15deg);
|
transform: rotate(15deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// ============================================
|
// ============================================
|
||||||
@@ -279,105 +278,6 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Varianta navigace mezi dny na stránce objednávání – šipky kolem date pickeru
|
|
||||||
.order-day-navigator {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
gap: 16px;
|
|
||||||
|
|
||||||
// react-datepicker obaluje input do wrapperu – necháme ho zabrat jen potřebnou šířku
|
|
||||||
.react-datepicker-wrapper {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.order-date-input {
|
|
||||||
width: 160px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Zvýraznění dnů, ve kterých existuje alespoň jedna objednávka – tečka pod číslem dne
|
|
||||||
.react-datepicker__day.luncher-order-day {
|
|
||||||
position: relative;
|
|
||||||
font-weight: 700;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
bottom: 2px;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 5px;
|
|
||||||
height: 5px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: var(--luncher-primary, #0d6efd);
|
|
||||||
}
|
|
||||||
|
|
||||||
// U vybraného dne (tmavé pozadí) je tečka světlá, aby byla vidět
|
|
||||||
&.react-datepicker__day--selected::after,
|
|
||||||
&.react-datepicker__day--keyboard-selected::after {
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Vybraný den používá akcentovou barvu aplikace (v obou režimech), místo výchozí modré
|
|
||||||
.react-datepicker__day--selected,
|
|
||||||
.react-datepicker__day--keyboard-selected {
|
|
||||||
background-color: var(--luncher-primary);
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--luncher-primary-hover);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tmavý režim kalendáře (react-datepicker) – navázáno na CSS proměnné motivu
|
|
||||||
[data-bs-theme="dark"] {
|
|
||||||
.react-datepicker {
|
|
||||||
background-color: var(--luncher-bg-card);
|
|
||||||
border-color: var(--luncher-border);
|
|
||||||
color: var(--luncher-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-datepicker__header {
|
|
||||||
background-color: var(--luncher-bg-hover);
|
|
||||||
border-bottom-color: var(--luncher-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-datepicker__current-month,
|
|
||||||
.react-datepicker__day-name,
|
|
||||||
.react-datepicker__day,
|
|
||||||
.react-datepicker-year-header {
|
|
||||||
color: var(--luncher-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-datepicker__day:hover,
|
|
||||||
.react-datepicker__month-text:hover {
|
|
||||||
background-color: var(--luncher-bg-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-datepicker__day--today {
|
|
||||||
color: var(--luncher-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.react-datepicker__day--disabled,
|
|
||||||
.react-datepicker__day--outside-month {
|
|
||||||
color: var(--luncher-text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Šipky pro přepínání měsíců
|
|
||||||
.react-datepicker__navigation-icon::before {
|
|
||||||
border-color: var(--luncher-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Špička popoveru (SVG) míří do hlavičky – sladíme barvy.
|
|
||||||
// !important kvůli vyšší specificitě knihovního pravidla [data-placement].
|
|
||||||
.react-datepicker__triangle {
|
|
||||||
fill: var(--luncher-bg-hover) !important;
|
|
||||||
color: var(--luncher-bg-hover) !important;
|
|
||||||
stroke: var(--luncher-border) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============================================
|
// ============================================
|
||||||
// FOOD TABLES - CARD STYLE
|
// FOOD TABLES - CARD STYLE
|
||||||
// ============================================
|
// ============================================
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import React, { useContext, useEffect, useMemo, useRef, useState, useCallback } from 'react';
|
import React, { useContext, useEffect, useMemo, useRef, useState, useCallback } from 'react';
|
||||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||||
import { EVENT_DISCONNECT, EVENT_MESSAGE, EVENT_PENDING_QR, SocketContext } from './context/socket';
|
import { EVENT_DISCONNECT, EVENT_MESSAGE, SocketContext } from './context/socket';
|
||||||
import { useAuth } from './context/auth';
|
import { useAuth } from './context/auth';
|
||||||
import Login from './Login';
|
import Login from './Login';
|
||||||
import { Alert, Button, Col, Form, Row, Table } from 'react-bootstrap';
|
import { Alert, Button, Col, Form, Row, Table } from 'react-bootstrap';
|
||||||
@@ -10,21 +10,16 @@ import PizzaOrderList from './components/PizzaOrderList';
|
|||||||
import SelectSearch, { SelectedOptionValue, SelectSearchOption } from 'react-select-search';
|
import SelectSearch, { SelectedOptionValue, SelectSearchOption } from 'react-select-search';
|
||||||
import 'react-select-search/style.css';
|
import 'react-select-search/style.css';
|
||||||
import './App.scss';
|
import './App.scss';
|
||||||
import './themes/umamusume.scss';
|
|
||||||
import { faCircleCheck, faNoteSticky, faTrashCan, faComment } from '@fortawesome/free-regular-svg-icons';
|
import { faCircleCheck, faNoteSticky, faTrashCan, faComment } from '@fortawesome/free-regular-svg-icons';
|
||||||
import { useSettings } from './context/settings';
|
import { useSettings } from './context/settings';
|
||||||
import Footer from './components/Footer';
|
import Footer from './components/Footer';
|
||||||
import { faArrowUpRightFromSquare, faBasketShopping, faChainBroken, faChevronLeft, faChevronRight, faDharmachakra, faGear, faMoneyBillTransfer, faSatelliteDish, faSearch, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
|
import { faBasketShopping, faChainBroken, faChevronLeft, faChevronRight, faGear, faMoneyBillTransfer, faSatelliteDish, faSearch, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
import Loader from './components/Loader';
|
import Loader from './components/Loader';
|
||||||
import { getHumanDateTime, isInTheFuture } from './Utils';
|
import { getHumanDateTime, isInTheFuture, formatDateString } from './Utils';
|
||||||
import NoteModal from './components/modals/NoteModal';
|
import NoteModal from './components/modals/NoteModal';
|
||||||
import PayForAllModal from './components/modals/PayForAllModal';
|
import PayForAllModal from './components/modals/PayForAllModal';
|
||||||
import SpinWheelModal, { WheelPick } from './components/modals/SpinWheelModal';
|
|
||||||
import EaterBadge from './components/EaterBadge';
|
|
||||||
import PendingPayments from './components/PendingPayments';
|
|
||||||
import { useEasterEgg } from './context/eggs';
|
import { useEasterEgg } from './context/eggs';
|
||||||
import { ClientData, Food, MealSlot, PendingQr, PizzaOrder, DepartureTime, PizzaDayState, Restaurant, RestaurantDayMenu, RestaurantDayMenuMap, LunchChoice, LocationLunchChoicesMap, UserLunchChoice, PizzaVariant, getData, getEasterEggImage, addPizza, removePizza, updatePizzaDayNote, createPizzaDay, deletePizzaDay, lockPizzaDay, unlockPizzaDay, finishOrder, finishDelivery, addChoice, jdemeObed, removeChoices, removeChoice, updateNote, changeDepartureTime, setBuyer, generateQr } from '../../types';
|
import { ClientData, Food, PizzaOrder, DepartureTime, PizzaDayState, Restaurant, RestaurantDayMenu, RestaurantDayMenuMap, LunchChoice, LocationLunchChoicesMap, UserLunchChoice, PizzaVariant, getData, getEasterEggImage, addPizza, removePizza, updatePizzaDayNote, createPizzaDay, deletePizzaDay, lockPizzaDay, unlockPizzaDay, finishOrder, finishDelivery, addChoice, jdemeObed, removeChoices, removeChoice, updateNote, changeDepartureTime, setBuyer, dismissQr, generateQr } from '../../types';
|
||||||
import { getLunchChoiceName } from './enums';
|
import { getLunchChoiceName } from './enums';
|
||||||
// import FallingLeaves, { LEAF_PRESETS, LEAF_COLOR_THEMES } from './FallingLeaves';
|
// import FallingLeaves, { LEAF_PRESETS, LEAF_COLOR_THEMES } from './FallingLeaves';
|
||||||
// import './FallingLeaves.scss';
|
// import './FallingLeaves.scss';
|
||||||
@@ -64,17 +59,14 @@ const EASTER_EGG_DEFAULT_DURATION = 0.75;
|
|||||||
function App() {
|
function App() {
|
||||||
const auth = useAuth();
|
const auth = useAuth();
|
||||||
const settings = useSettings();
|
const settings = useSettings();
|
||||||
const navigate = useNavigate();
|
|
||||||
const [easterEgg, _] = useEasterEgg(auth);
|
const [easterEgg, _] = useEasterEgg(auth);
|
||||||
const socket = useContext(SocketContext);
|
const [isConnected, setIsConnected] = useState<boolean>(false);
|
||||||
// Socket je singleton mimo React, takže při návratu v historii prohlížeče (remount
|
|
||||||
// komponenty) už žádný "connect" event nepřijde - stav proto inicializujeme z něj
|
|
||||||
const [isConnected, setIsConnected] = useState<boolean>(() => socket.connected);
|
|
||||||
const [data, setData] = useState<ClientData>();
|
const [data, setData] = useState<ClientData>();
|
||||||
const [food, setFood] = useState<RestaurantDayMenuMap>();
|
const [food, setFood] = useState<RestaurantDayMenuMap>();
|
||||||
const [myOrder, setMyOrder] = useState<PizzaOrder>();
|
const [myOrder, setMyOrder] = useState<PizzaOrder>();
|
||||||
const [foodChoiceList, setFoodChoiceList] = useState<Food[]>();
|
const [foodChoiceList, setFoodChoiceList] = useState<Food[]>();
|
||||||
const [closed, setClosed] = useState<boolean>(false);
|
const [closed, setClosed] = useState<boolean>(false);
|
||||||
|
const socket = useContext(SocketContext);
|
||||||
const choiceRef = useRef<HTMLSelectElement>(null);
|
const choiceRef = useRef<HTMLSelectElement>(null);
|
||||||
const foodChoiceRef = useRef<HTMLSelectElement>(null);
|
const foodChoiceRef = useRef<HTMLSelectElement>(null);
|
||||||
const departureChoiceRef = useRef<HTMLSelectElement>(null);
|
const departureChoiceRef = useRef<HTMLSelectElement>(null);
|
||||||
@@ -84,7 +76,6 @@ function App() {
|
|||||||
const [loadingPizzaDay, setLoadingPizzaDay] = useState<boolean>(false);
|
const [loadingPizzaDay, setLoadingPizzaDay] = useState<boolean>(false);
|
||||||
const [noteModalOpen, setNoteModalOpen] = useState<boolean>(false);
|
const [noteModalOpen, setNoteModalOpen] = useState<boolean>(false);
|
||||||
const [payForAllLocationKey, setPayForAllLocationKey] = useState<LunchChoice | null>(null);
|
const [payForAllLocationKey, setPayForAllLocationKey] = useState<LunchChoice | null>(null);
|
||||||
const [spinWheelOpen, setSpinWheelOpen] = useState<boolean>(false);
|
|
||||||
const [eggImage, setEggImage] = useState<Blob>();
|
const [eggImage, setEggImage] = useState<Blob>();
|
||||||
const eggRef = useRef<HTMLImageElement>(null);
|
const eggRef = useRef<HTMLImageElement>(null);
|
||||||
// Prazvláštní workaround, aby socket.io listener viděl aktuální hodnotu
|
// Prazvláštní workaround, aby socket.io listener viděl aktuální hodnotu
|
||||||
@@ -127,8 +118,6 @@ function App() {
|
|||||||
|
|
||||||
// Registrace socket eventů
|
// Registrace socket eventů
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// Srovnání se skutečným stavem socketu (mohl se změnit mezi renderem a efektem)
|
|
||||||
setIsConnected(socket.connected);
|
|
||||||
socket.on(EVENT_CONNECT, () => {
|
socket.on(EVENT_CONNECT, () => {
|
||||||
setIsConnected(true);
|
setIsConnected(true);
|
||||||
});
|
});
|
||||||
@@ -137,46 +126,19 @@ function App() {
|
|||||||
});
|
});
|
||||||
socket.on(EVENT_MESSAGE, (newData: ClientData) => {
|
socket.on(EVENT_MESSAGE, (newData: ClientData) => {
|
||||||
// console.log("Přijata nová data ze socketu", newData);
|
// console.log("Přijata nová data ze socketu", newData);
|
||||||
if (newData.slot === MealSlot.EXTRA) return;
|
|
||||||
// Aktualizujeme pouze, pokud jsme dostali data pro den, který máme aktuálně zobrazený
|
// Aktualizujeme pouze, pokud jsme dostali data pro den, který máme aktuálně zobrazený
|
||||||
if (dayIndexRef.current == null || newData.dayIndex === dayIndexRef.current) {
|
if (dayIndexRef.current == null || newData.dayIndex === dayIndexRef.current) {
|
||||||
setData(newData);
|
setData(newData);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
socket.on(EVENT_PENDING_QR, (pendingQr: PendingQr) => {
|
|
||||||
setData(prev => prev ? { ...prev, pendingQrs: [...(prev.pendingQrs ?? []), pendingQr] } : prev);
|
|
||||||
});
|
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
socket.off(EVENT_CONNECT);
|
socket.off(EVENT_CONNECT);
|
||||||
socket.off(EVENT_DISCONNECT);
|
socket.off(EVENT_DISCONNECT);
|
||||||
socket.off(EVENT_MESSAGE);
|
socket.off(EVENT_MESSAGE);
|
||||||
socket.off(EVENT_PENDING_QR);
|
|
||||||
}
|
}
|
||||||
}, [socket]);
|
}, [socket]);
|
||||||
|
|
||||||
// Připojení do osobní socket místnosti po přihlášení
|
|
||||||
useEffect(() => {
|
|
||||||
if (auth?.login) {
|
|
||||||
socket.emit('join', auth.login);
|
|
||||||
}
|
|
||||||
}, [auth?.login, socket]);
|
|
||||||
|
|
||||||
// Po znovupřipojení socketu znovu vstoupit do místnosti a obnovit data
|
|
||||||
useEffect(() => {
|
|
||||||
const onReconnect = () => {
|
|
||||||
if (auth?.login) socket.emit('join', auth.login);
|
|
||||||
getData({ query: { dayIndex: dayIndexRef.current } }).then(response => {
|
|
||||||
if (response.data) {
|
|
||||||
setData(response.data);
|
|
||||||
setFood(response.data.menus);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
socket.io.on('reconnect', onReconnect);
|
|
||||||
return () => { socket.io.off('reconnect', onReconnect); };
|
|
||||||
}, [socket, auth?.login]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!auth?.login || !data?.choices) {
|
if (!auth?.login || !data?.choices) {
|
||||||
return
|
return
|
||||||
@@ -412,24 +374,6 @@ function App() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Převzetí výsledku kola štěstí — podnik s menu vybere i jídlo, rozvoz se zapíše do poznámky
|
|
||||||
const handleWheelPick = async (pick: WheelPick) => {
|
|
||||||
if (!auth?.login) return;
|
|
||||||
try {
|
|
||||||
if (pick.kind === 'menu') {
|
|
||||||
await addChoice({ body: { locationKey: pick.restaurant, foodIndex: pick.foodIndex, dayIndex } });
|
|
||||||
} else {
|
|
||||||
await addChoice({ body: { locationKey: LunchChoice.OBJEDNAVAM, dayIndex } });
|
|
||||||
// Server přijímá poznámku max. 70 znaků
|
|
||||||
const note = pick.dish ? `${pick.store}: ${pick.dish}` : pick.store;
|
|
||||||
await updateNote({ body: { note: note.length > 70 ? note.slice(0, 69) + '…' : note, dayIndex } });
|
|
||||||
}
|
|
||||||
await tryAutoSelectDepartureTime();
|
|
||||||
} catch (error: any) {
|
|
||||||
alert(`Chyba při změně volby: ${error.message || error}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const saveNote = async (note?: string) => {
|
const saveNote = async (note?: string) => {
|
||||||
if (auth?.login) {
|
if (auth?.login) {
|
||||||
await updateNote({ body: { note, dayIndex } });
|
await updateNote({ body: { note, dayIndex } });
|
||||||
@@ -493,7 +437,7 @@ function App() {
|
|||||||
data.pizzaList?.forEach((pizza, index) => {
|
data.pizzaList?.forEach((pizza, index) => {
|
||||||
const group: SelectSearchOption = { name: pizza.name, type: "group", items: [] }
|
const group: SelectSearchOption = { name: pizza.name, type: "group", items: [] }
|
||||||
pizza.sizes.forEach((size, sizeIndex) => {
|
pizza.sizes.forEach((size, sizeIndex) => {
|
||||||
const name = `${size.size} (${size.price / 100} Kč)`;
|
const name = `${size.size} (${size.price} Kč)`;
|
||||||
const value = `pizza|${index}|${sizeIndex}`;
|
const value = `pizza|${index}|${sizeIndex}`;
|
||||||
group.items?.push({ name, value });
|
group.items?.push({ name, value });
|
||||||
})
|
})
|
||||||
@@ -502,7 +446,7 @@ function App() {
|
|||||||
if (data.salatList?.length) {
|
if (data.salatList?.length) {
|
||||||
const salatGroup: SelectSearchOption = { name: "Saláty", type: "group", items: [] }
|
const salatGroup: SelectSearchOption = { name: "Saláty", type: "group", items: [] }
|
||||||
data.salatList.forEach((salat, index) => {
|
data.salatList.forEach((salat, index) => {
|
||||||
salatGroup.items?.push({ name: `${salat.name} (${salat.price / 100} Kč)`, value: `salat|${index}` });
|
salatGroup.items?.push({ name: `${salat.name} (${salat.price} Kč)`, value: `salat|${index}` });
|
||||||
});
|
});
|
||||||
suggestions.push(salatGroup);
|
suggestions.push(salatGroup);
|
||||||
}
|
}
|
||||||
@@ -539,7 +483,7 @@ function App() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const handleChangeDepartureTime = async (event: React.ChangeEvent<HTMLSelectElement>) => {
|
const handleChangeDepartureTime = async (event: React.ChangeEvent<HTMLSelectElement>) => {
|
||||||
if (choiceRef.current?.value) {
|
if (foodChoiceList?.length && choiceRef.current?.value) {
|
||||||
await changeDepartureTime({ body: { time: event.target.value as DepartureTime, dayIndex } });
|
await changeDepartureTime({ body: { time: event.target.value as DepartureTime, dayIndex } });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -554,8 +498,7 @@ function App() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleDayChange = async (requestedIndex: number) => {
|
const handleDayChange = async (dayIndex: number) => {
|
||||||
const dayIndex = Math.max(0, Math.min(4, requestedIndex));
|
|
||||||
setDayIndex(dayIndex);
|
setDayIndex(dayIndex);
|
||||||
dayIndexRef.current = dayIndex;
|
dayIndexRef.current = dayIndex;
|
||||||
if (choiceRef?.current?.value) {
|
if (choiceRef?.current?.value) {
|
||||||
@@ -741,15 +684,15 @@ function App() {
|
|||||||
{locationPickCount >= 2 && auth.login && loginObject[auth.login] !== undefined
|
{locationPickCount >= 2 && auth.login && loginObject[auth.login] !== undefined
|
||||||
&& locationKey !== LunchChoice.PIZZA && locationKey !== LunchChoice.NEOBEDVAM && locationKey !== LunchChoice.ROZHODUJI
|
&& locationKey !== LunchChoice.PIZZA && locationKey !== LunchChoice.NEOBEDVAM && locationKey !== LunchChoice.ROZHODUJI
|
||||||
&& settings?.bankAccount && settings?.holderName && (
|
&& settings?.bankAccount && settings?.holderName && (
|
||||||
<span title='Zaplatit za všechny a vygenerovat QR kódy ostatním' className="ms-2">
|
<span title='Zaplatit za všechny a vygenerovat QR kódy ostatním' className="ms-2">
|
||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
icon={faMoneyBillTransfer}
|
icon={faMoneyBillTransfer}
|
||||||
onClick={() => setPayForAllLocationKey(locationKey)}
|
onClick={() => setPayForAllLocationKey(locationKey)}
|
||||||
className='action-icon'
|
className='action-icon'
|
||||||
style={{ cursor: 'pointer' }}
|
style={{ cursor: 'pointer' }}
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</td>
|
</td>
|
||||||
<td className='p-0'>
|
<td className='p-0'>
|
||||||
<Table className="nested-table">
|
<Table className="nested-table">
|
||||||
@@ -767,7 +710,6 @@ function App() {
|
|||||||
{trusted && <span className='trusted-icon' title='Uživatel ověřený doménovým přihlášením'>
|
{trusted && <span className='trusted-icon' title='Uživatel ověřený doménovým přihlášením'>
|
||||||
<FontAwesomeIcon icon={faCircleCheck} style={{ cursor: "help" }} />
|
<FontAwesomeIcon icon={faCircleCheck} style={{ cursor: "help" }} />
|
||||||
</span>}
|
</span>}
|
||||||
<EaterBadge items={userChoices?.length ?? 0} />
|
|
||||||
<strong>{login}</strong>
|
<strong>{login}</strong>
|
||||||
{userPayload.departureTime && <small className="ms-2" style={{ color: 'var(--luncher-text-muted)' }}>({userPayload.departureTime})</small>}
|
{userPayload.departureTime && <small className="ms-2" style={{ color: 'var(--luncher-text-muted)' }}>({userPayload.departureTime})</small>}
|
||||||
{userPayload.note && <span className="ms-2" style={{ fontSize: 'small', color: 'var(--luncher-text-secondary)' }}>({userPayload.note})</span>}
|
{userPayload.note && <span className="ms-2" style={{ fontSize: 'small', color: 'var(--luncher-text-secondary)' }}>({userPayload.note})</span>}
|
||||||
@@ -778,9 +720,6 @@ function App() {
|
|||||||
markAsBuyer();
|
markAsBuyer();
|
||||||
}} icon={faBasketShopping} className={isBuyer ? 'buyer-icon' : 'action-icon'} style={{ cursor: 'pointer' }} />
|
}} icon={faBasketShopping} className={isBuyer ? 'buyer-icon' : 'action-icon'} style={{ cursor: 'pointer' }} />
|
||||||
</span>}
|
</span>}
|
||||||
{login === auth.login && locationKey === LunchChoice.OBJEDNAVAM && <span title='Přejít na stránku objednávek'>
|
|
||||||
<FontAwesomeIcon onClick={() => navigate('/objednani')} icon={faArrowUpRightFromSquare} className='action-icon' style={{ cursor: 'pointer' }} />
|
|
||||||
</span>}
|
|
||||||
{login !== auth.login && locationKey === LunchChoice.OBJEDNAVAM && isBuyer && <span title='Objednávající'>
|
{login !== auth.login && locationKey === LunchChoice.OBJEDNAVAM && isBuyer && <span title='Objednávající'>
|
||||||
<FontAwesomeIcon onClick={() => {
|
<FontAwesomeIcon onClick={() => {
|
||||||
copyNote(userPayload.note!);
|
copyNote(userPayload.note!);
|
||||||
@@ -791,9 +730,6 @@ function App() {
|
|||||||
copyNote(userPayload.note!);
|
copyNote(userPayload.note!);
|
||||||
}} className='action-icon' icon={faComment} />
|
}} className='action-icon' icon={faComment} />
|
||||||
</span>}
|
</span>}
|
||||||
{login === auth.login && canChangeChoice && locationKey === LunchChoice.ROZHODUJI && <span title='Roztočit kolo štěstí'>
|
|
||||||
<FontAwesomeIcon onClick={() => setSpinWheelOpen(true)} className='action-icon spin-wheel-icon' icon={faDharmachakra} />
|
|
||||||
</span>}
|
|
||||||
{login === auth.login && canChangeChoice && <span title='Upravit poznámku'>
|
{login === auth.login && canChangeChoice && <span title='Upravit poznámku'>
|
||||||
<FontAwesomeIcon onClick={() => {
|
<FontAwesomeIcon onClick={() => {
|
||||||
setNoteModalOpen(true);
|
setNoteModalOpen(true);
|
||||||
@@ -808,11 +744,9 @@ function App() {
|
|||||||
</div>
|
</div>
|
||||||
{userChoices && userChoices.length > 0 && food && (
|
{userChoices && userChoices.length > 0 && food && (
|
||||||
<div className="food-choices">
|
<div className="food-choices">
|
||||||
{userChoices
|
{userChoices.map(foodIndex => {
|
||||||
.filter(foodIndex => food[key as Restaurant]?.food?.[foodIndex] != null)
|
|
||||||
.map(foodIndex => {
|
|
||||||
const restaurantKey = key as Restaurant;
|
const restaurantKey = key as Restaurant;
|
||||||
const foodName = food[restaurantKey]?.food?.[foodIndex]?.name;
|
const foodName = food[restaurantKey]?.food?.[foodIndex].name;
|
||||||
return <div key={foodIndex} className="food-choice-item">
|
return <div key={foodIndex} className="food-choice-item">
|
||||||
<span className="food-choice-name">{foodName}</span>
|
<span className="food-choice-name">{foodName}</span>
|
||||||
{login === auth.login && canChangeChoice &&
|
{login === auth.login && canChangeChoice &&
|
||||||
@@ -935,21 +869,48 @@ function App() {
|
|||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
<PizzaOrderList state={data.pizzaDay.state!} orders={data.pizzaDay.orders!} onDelete={handlePizzaDelete} creator={data.pizzaDay.creator!} />
|
<PizzaOrderList state={data.pizzaDay.state!} orders={data.pizzaDay.orders!} onDelete={handlePizzaDelete} creator={data.pizzaDay.creator!} />
|
||||||
|
{
|
||||||
|
data.pizzaDay.state === PizzaDayState.DELIVERED && myOrder?.hasQr && (() => {
|
||||||
|
const pizzaQr = data.pendingQrs?.find(qr => qr.creator === data.pizzaDay?.creator);
|
||||||
|
return pizzaQr ? (
|
||||||
|
<div className='qr-code'>
|
||||||
|
<h3>QR platba</h3>
|
||||||
|
<img src={`/api/qr?login=${auth.login}&id=${pizzaQr.id}`} alt='QR kód' />
|
||||||
|
</div>
|
||||||
|
) : null;
|
||||||
|
})()
|
||||||
|
}
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<PendingPayments
|
{data.pendingQrs && data.pendingQrs.length > 0 &&
|
||||||
pendingQrs={data.pendingQrs}
|
<div className='pizza-section fade-in mt-4'>
|
||||||
login={auth.login}
|
<h3>Nevyřízené platby</h3>
|
||||||
onDismissed={async () => {
|
<p>Máte neuhrazené platby.</p>
|
||||||
const response = await getData({ query: { dayIndex } });
|
{data.pendingQrs.map(qr => (
|
||||||
if (response.data) {
|
<div key={qr.id} className='qr-code mb-3'>
|
||||||
setData(response.data);
|
<p>
|
||||||
}
|
<strong>{formatDateString(qr.date)}</strong> — {qr.creator} ({qr.totalPrice} Kč)
|
||||||
}}
|
{qr.purpose && <><br /><span className="text-muted">{qr.purpose}</span></>}
|
||||||
/>
|
</p>
|
||||||
|
<img src={`/api/qr?login=${auth.login}&id=${qr.id}`} alt='QR kód' />
|
||||||
|
<div className='mt-2'>
|
||||||
|
<Button variant="success" onClick={async () => {
|
||||||
|
await dismissQr({ body: { id: qr.id } });
|
||||||
|
const response = await getData({ query: { dayIndex } });
|
||||||
|
if (response.data) {
|
||||||
|
setData(response.data);
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
Zaplatil jsem
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
</>
|
</>
|
||||||
</div>
|
</div>
|
||||||
{/* <FallingLeaves
|
{/* <FallingLeaves
|
||||||
@@ -957,7 +918,6 @@ function App() {
|
|||||||
leafVariants={LEAF_COLOR_THEMES.AUTUMN}
|
leafVariants={LEAF_COLOR_THEMES.AUTUMN}
|
||||||
/> */}
|
/> */}
|
||||||
<Footer />
|
<Footer />
|
||||||
{spinWheelOpen && <SpinWheelModal isOpen onClose={() => setSpinWheelOpen(false)} menus={food} onPick={handleWheelPick} />}
|
|
||||||
<NoteModal isOpen={noteModalOpen} onClose={() => setNoteModalOpen(false)} onSave={saveNote} />
|
<NoteModal isOpen={noteModalOpen} onClose={() => setNoteModalOpen(false)} onSave={saveNote} />
|
||||||
{payForAllLocationKey && data && (
|
{payForAllLocationKey && data && (
|
||||||
<PayForAllModal
|
<PayForAllModal
|
||||||
|
|||||||
@@ -1,40 +1,29 @@
|
|||||||
import { Routes, Route } from "react-router-dom";
|
import { Routes, Route } from "react-router-dom";
|
||||||
import { ProvideSettings } from "./context/settings";
|
import { ProvideSettings } from "./context/settings";
|
||||||
import FlyingButterflies, { BUTTERFLY_PRESETS } from "./FlyingButterflies";
|
// import Snowfall from "react-snowfall";
|
||||||
import "./FlyingButterflies.scss";
|
import { SnowOverlay } from 'react-snow-overlay';
|
||||||
import { ToastContainer } from "react-toastify";
|
import { ToastContainer } from "react-toastify";
|
||||||
import { SocketContext, socket } from "./context/socket";
|
import { SocketContext, socket } from "./context/socket";
|
||||||
import StatsPage from "./pages/StatsPage";
|
import StatsPage from "./pages/StatsPage";
|
||||||
import OrderGroupsPage from "./pages/OrderGroupsPage";
|
|
||||||
import SuggestionsPage from "./pages/SuggestionsPage";
|
|
||||||
import App from "./App";
|
import App from "./App";
|
||||||
|
|
||||||
export const STATS_URL = '/stats';
|
export const STATS_URL = '/stats';
|
||||||
export const OBJEDNANI_URL = '/objednani';
|
|
||||||
export const NAVRHY_URL = '/navrhy';
|
|
||||||
|
|
||||||
export default function AppRoutes() {
|
export default function AppRoutes() {
|
||||||
return (
|
return (
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path={STATS_URL} element={<StatsPage />} />
|
<Route path={STATS_URL} element={<StatsPage />} />
|
||||||
<Route path={NAVRHY_URL} element={
|
|
||||||
<ProvideSettings>
|
|
||||||
<SuggestionsPage />
|
|
||||||
</ProvideSettings>
|
|
||||||
} />
|
|
||||||
<Route path={OBJEDNANI_URL} element={
|
|
||||||
<ProvideSettings>
|
|
||||||
<SocketContext.Provider value={socket}>
|
|
||||||
<OrderGroupsPage />
|
|
||||||
<ToastContainer />
|
|
||||||
</SocketContext.Provider>
|
|
||||||
</ProvideSettings>
|
|
||||||
} />
|
|
||||||
<Route path="/" element={
|
<Route path="/" element={
|
||||||
<ProvideSettings>
|
<ProvideSettings>
|
||||||
<SocketContext.Provider value={socket}>
|
<SocketContext.Provider value={socket}>
|
||||||
<>
|
<>
|
||||||
<FlyingButterflies numButterflies={BUTTERFLY_PRESETS.NORMAL} />
|
{/* <Snowfall style={{
|
||||||
|
zIndex: 2,
|
||||||
|
position: 'fixed',
|
||||||
|
width: '100vw',
|
||||||
|
height: '100vh'
|
||||||
|
}} /> */}
|
||||||
|
<SnowOverlay color={'rgba(240, 240, 240, 0.9)'} disabledOnSingleCpuDevices={true} />
|
||||||
<App />
|
<App />
|
||||||
</>
|
</>
|
||||||
<ToastContainer />
|
<ToastContainer />
|
||||||
|
|||||||
@@ -1,749 +0,0 @@
|
|||||||
.flying-butterflies {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 2;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
// V režimu hraní herní vrstva zachytává kliknutí, aby se nedalo omylem
|
|
||||||
// překliknout do objednávek. V režimu objednávání propouští vše dál (none).
|
|
||||||
&.playing {
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Přepínač režimu hraní / objednávání
|
|
||||||
.butterfly-mode-toggle {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 16px;
|
|
||||||
right: 16px;
|
|
||||||
z-index: 7;
|
|
||||||
pointer-events: auto;
|
|
||||||
padding: 8px 14px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: rgba(33, 37, 41, 0.88);
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
transition: background 0.15s ease, transform 0.08s ease;
|
|
||||||
|
|
||||||
&:hover { background: rgba(33, 37, 41, 1); }
|
|
||||||
&:active { transform: scale(0.96); }
|
|
||||||
|
|
||||||
&.playing {
|
|
||||||
background: #2f9e44;
|
|
||||||
&:hover { background: #2b8a3e; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Vrstva herních prvků (síťka, škůdci, pavučina) – skrývá se v režimu objednávání
|
|
||||||
.butterfly-game-layer {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-scene {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
// Vnější element – pozici a natočení nastavuje JS přes transform
|
|
||||||
> div {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 34px;
|
|
||||||
height: 34px;
|
|
||||||
will-change: transform;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Vnitřní element se sprite motýla – máchá křídly (scaleX kolem svislé osy těla)
|
|
||||||
.butterfly-sprite {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
background-size: contain;
|
|
||||||
animation: butterfly-flap 0.45s ease-in-out infinite;
|
|
||||||
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
|
|
||||||
|
|
||||||
// Vzácný zlatý motýl – WOW: silná pulzující zlatá záře + duhový nádech
|
|
||||||
&.golden {
|
|
||||||
animation:
|
|
||||||
butterfly-flap 0.35s ease-in-out infinite,
|
|
||||||
butterfly-golden-glow 1.4s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes butterfly-golden-glow {
|
|
||||||
0%,
|
|
||||||
100% {
|
|
||||||
filter:
|
|
||||||
saturate(1.15) hue-rotate(0deg)
|
|
||||||
drop-shadow(0 0 5px rgba(255, 215, 80, 0.85))
|
|
||||||
drop-shadow(0 0 10px rgba(255, 180, 40, 0.55))
|
|
||||||
drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
filter:
|
|
||||||
saturate(1.4) hue-rotate(-16deg)
|
|
||||||
drop-shadow(0 0 13px rgba(255, 235, 130, 1))
|
|
||||||
drop-shadow(0 0 24px rgba(255, 190, 50, 0.95))
|
|
||||||
drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes butterfly-flap {
|
|
||||||
0%,
|
|
||||||
100% {
|
|
||||||
transform: scaleX(1);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: scaleX(0.35);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Korunovaný motýl (anti-bot inspekce) – nepřehlédnutelná duhová záře
|
|
||||||
.butterfly-sprite.royal {
|
|
||||||
animation: butterfly-flap 0.35s ease-in-out infinite, butterfly-royal-glow 0.9s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes butterfly-royal-glow {
|
|
||||||
0%, 100% {
|
|
||||||
filter: drop-shadow(0 0 8px rgba(255, 215, 80, 1)) drop-shadow(0 0 16px rgba(120, 200, 255, 0.8));
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
filter: drop-shadow(0 0 16px rgba(255, 120, 220, 1)) drop-shadow(0 0 28px rgba(120, 255, 160, 0.9));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Černá můra – zlověstný tmavý nádech
|
|
||||||
.butterfly-sprite.moth {
|
|
||||||
filter: drop-shadow(0 0 4px rgba(120, 60, 160, 0.6)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
|
|
||||||
animation: butterfly-flap 0.5s ease-in-out infinite, butterfly-moth-pulse 1.6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes butterfly-moth-pulse {
|
|
||||||
0%, 100% { filter: drop-shadow(0 0 4px rgba(120, 60, 160, 0.5)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); }
|
|
||||||
50% { filter: drop-shadow(0 0 9px rgba(150, 40, 40, 0.8)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4)); }
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Havěť (ptáci a vosy) ----------------------------------------------------
|
|
||||||
|
|
||||||
.butterfly-critter {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
background-size: contain;
|
|
||||||
pointer-events: none;
|
|
||||||
will-change: transform;
|
|
||||||
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
|
|
||||||
z-index: 3;
|
|
||||||
|
|
||||||
// Vosa jde zaklikat (plácačka)
|
|
||||||
&.wasp {
|
|
||||||
pointer-events: auto;
|
|
||||||
cursor: crosshair;
|
|
||||||
touch-action: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Netopýr jde zahnat klikáním
|
|
||||||
&.bat {
|
|
||||||
pointer-events: auto;
|
|
||||||
cursor: crosshair;
|
|
||||||
touch-action: none;
|
|
||||||
z-index: 5;
|
|
||||||
filter: drop-shadow(0 0 6px rgba(60, 40, 90, 0.8));
|
|
||||||
}
|
|
||||||
|
|
||||||
&.hit {
|
|
||||||
animation: butterfly-stalker-hit 0.18s ease-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Pavučina přes síťku – blokuje chytání, dokud ji hráč nestrhne
|
|
||||||
.butterfly-web {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 120px;
|
|
||||||
height: 120px;
|
|
||||||
background-image: url(/spider.svg);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
background-size: contain;
|
|
||||||
pointer-events: auto;
|
|
||||||
cursor: crosshair;
|
|
||||||
touch-action: none;
|
|
||||||
z-index: 6;
|
|
||||||
opacity: 0.9;
|
|
||||||
filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
|
|
||||||
|
|
||||||
&.hit {
|
|
||||||
animation: butterfly-stalker-hit 0.15s ease-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Síťka na chytání --------------------------------------------------------
|
|
||||||
|
|
||||||
.butterfly-net {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
background-size: contain;
|
|
||||||
pointer-events: auto;
|
|
||||||
cursor: grab;
|
|
||||||
z-index: 4;
|
|
||||||
will-change: transform;
|
|
||||||
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
|
|
||||||
transition: filter 0.15s ease;
|
|
||||||
touch-action: none;
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
&.grabbed {
|
|
||||||
cursor: grabbing;
|
|
||||||
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Prémiová (zlatá) síťka – zlatá záře a jemný pulz
|
|
||||||
&.premium {
|
|
||||||
filter: drop-shadow(0 0 8px rgba(255, 200, 60, 0.85)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
|
|
||||||
animation: butterfly-net-glow 1.3s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Protržená síťka – nedá se chytat
|
|
||||||
&.torn {
|
|
||||||
cursor: not-allowed;
|
|
||||||
opacity: 0.9;
|
|
||||||
filter: drop-shadow(0 2px 3px rgba(150, 30, 30, 0.35));
|
|
||||||
}
|
|
||||||
|
|
||||||
&.catch-pop {
|
|
||||||
animation: butterfly-net-pop 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.stung {
|
|
||||||
animation: butterfly-net-stung 0.4s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Záblesk při chycení černé můry (chyba)
|
|
||||||
&.moth-hit {
|
|
||||||
animation: butterfly-net-moth 0.4s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Omráčená síťka (po žihnutí vosou) – po celou dobu, kdy nejde chytat.
|
|
||||||
// Má přednost před grabbed kurzorem.
|
|
||||||
&.stunned {
|
|
||||||
cursor: not-allowed !important;
|
|
||||||
animation: butterfly-net-dizzy 0.9s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Zešednutí + červený nádech, ať je jasné, že síťka teď nechytá.
|
|
||||||
// NEanimujeme transform (ten řídí JS inline) – jen filter.
|
|
||||||
@keyframes butterfly-net-dizzy {
|
|
||||||
0%,
|
|
||||||
100% {
|
|
||||||
filter: grayscale(0.7) brightness(0.85) drop-shadow(0 0 5px rgba(217, 72, 15, 0.55));
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
filter: grayscale(0.85) brightness(0.8) drop-shadow(0 0 9px rgba(217, 72, 15, 0.8));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes butterfly-net-pop {
|
|
||||||
0% {
|
|
||||||
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)) brightness(1);
|
|
||||||
}
|
|
||||||
40% {
|
|
||||||
filter: drop-shadow(0 2px 8px rgba(120, 200, 120, 0.7)) brightness(1.25);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)) brightness(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes butterfly-net-glow {
|
|
||||||
0%,
|
|
||||||
100% {
|
|
||||||
filter: drop-shadow(0 0 6px rgba(255, 200, 60, 0.6)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
filter: drop-shadow(0 0 12px rgba(255, 220, 100, 1)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Pozn.: NEanimujeme transform – ten nastavuje JS inline (poloha síťky).
|
|
||||||
// Žihnutí vosou proto naznačíme jen červeným zábleskem filtru.
|
|
||||||
@keyframes butterfly-net-stung {
|
|
||||||
0%,
|
|
||||||
100% {
|
|
||||||
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)) brightness(1);
|
|
||||||
}
|
|
||||||
30% {
|
|
||||||
filter: drop-shadow(0 0 8px rgba(217, 72, 15, 0.85)) brightness(1.1) hue-rotate(-15deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Prchavé texty (chycení, protržení, žihnutí)
|
|
||||||
.butterfly-catch-fx,
|
|
||||||
.butterfly-tear-fx,
|
|
||||||
.butterfly-sting-fx {
|
|
||||||
position: fixed;
|
|
||||||
margin: -12px 0 0 10px;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 5;
|
|
||||||
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
|
|
||||||
animation: butterfly-catch-float 0.8s ease-out forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-catch-fx {
|
|
||||||
color: #2f9e44;
|
|
||||||
|
|
||||||
&.golden {
|
|
||||||
color: #e0a200;
|
|
||||||
font-size: 1.35rem;
|
|
||||||
text-shadow: 0 0 6px rgba(255, 220, 100, 0.9), 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.moth {
|
|
||||||
color: #c92a2a;
|
|
||||||
font-size: 1.35rem;
|
|
||||||
text-shadow: 0 0 6px rgba(120, 40, 160, 0.7), 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes butterfly-net-moth {
|
|
||||||
0%, 100% { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)) brightness(1); }
|
|
||||||
30% { filter: drop-shadow(0 0 9px rgba(150, 40, 160, 0.9)) brightness(0.8); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-tear-fx {
|
|
||||||
color: #c92a2a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-sting-fx {
|
|
||||||
color: #d9480f;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes butterfly-catch-float {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(0) scale(0.9);
|
|
||||||
}
|
|
||||||
20% {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(-6px) scale(1);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(-40px) scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- HUD: počítadlo, mince, úroveň, kombo, hlášky ----------------------------
|
|
||||||
|
|
||||||
.butterfly-hud {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 16px;
|
|
||||||
left: 16px;
|
|
||||||
z-index: 5;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 6px;
|
|
||||||
// HUD sám o sobě neblokuje klikání; interaktivní je jen tlačítko opravy
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-shop-open {
|
|
||||||
pointer-events: auto;
|
|
||||||
align-self: flex-start;
|
|
||||||
padding: 6px 12px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: #f59e1e;
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
|
||||||
transition: background 0.15s ease, transform 0.08s ease;
|
|
||||||
|
|
||||||
&:hover { background: #e8890a; }
|
|
||||||
&:active { transform: scale(0.96); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-counter {
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
padding: 8px 12px;
|
|
||||||
background: rgba(255, 255, 255, 0.88);
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
||||||
border-radius: 14px;
|
|
||||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
||||||
backdrop-filter: blur(4px);
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
color: #333;
|
|
||||||
user-select: none;
|
|
||||||
pointer-events: auto;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: box-shadow 0.15s ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.bump {
|
|
||||||
animation: butterfly-counter-bump 0.3s ease-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-counter-row {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-counter-icon,
|
|
||||||
.butterfly-coin-icon {
|
|
||||||
display: inline-block;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
background-size: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-counter-icon {
|
|
||||||
background-image: url(/butterfly-orange.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-coin-icon {
|
|
||||||
background-image: url(/coin.svg);
|
|
||||||
margin-left: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-counter-value {
|
|
||||||
min-width: 1ch;
|
|
||||||
text-align: center;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-level {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-level-title {
|
|
||||||
font-size: 0.72rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #6b5b2e;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
max-width: 180px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-progress {
|
|
||||||
width: 100%;
|
|
||||||
height: 5px;
|
|
||||||
background: rgba(0, 0, 0, 0.1);
|
|
||||||
border-radius: 999px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-progress-bar {
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(90deg, #ffcb3d, #e0a200);
|
|
||||||
border-radius: 999px;
|
|
||||||
transition: width 0.4s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-pests {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-pest {
|
|
||||||
color: #868e96;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
|
|
||||||
&.warn {
|
|
||||||
color: #d9480f;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.ok {
|
|
||||||
color: #2f9e44;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-torn-note {
|
|
||||||
margin-top: 4px;
|
|
||||||
font-size: 0.76rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #c92a2a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-action-btn {
|
|
||||||
margin-top: 4px;
|
|
||||||
padding: 5px 10px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: #1c7ed6;
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 0.82rem;
|
|
||||||
cursor: pointer;
|
|
||||||
pointer-events: auto;
|
|
||||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
|
||||||
transition: background 0.15s ease, transform 0.1s ease;
|
|
||||||
|
|
||||||
&:hover:not(:disabled) {
|
|
||||||
background: #1971c2;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active:not(:disabled) {
|
|
||||||
transform: scale(0.96);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
background: #adb5bd;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.danger {
|
|
||||||
background: #c92a2a;
|
|
||||||
|
|
||||||
&:hover:not(:disabled) {
|
|
||||||
background: #e03131;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Bossové (zloděj / housenka) ---------------------------------------------
|
|
||||||
|
|
||||||
.butterfly-stalker {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 56px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
pointer-events: auto;
|
|
||||||
cursor: crosshair;
|
|
||||||
user-select: none;
|
|
||||||
touch-action: none;
|
|
||||||
z-index: 6;
|
|
||||||
will-change: transform;
|
|
||||||
|
|
||||||
&.hit .stalker-emoji {
|
|
||||||
animation: butterfly-stalker-hit 0.18s ease-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.stalker-emoji {
|
|
||||||
font-size: 44px;
|
|
||||||
line-height: 1;
|
|
||||||
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
|
|
||||||
}
|
|
||||||
|
|
||||||
.stalker-hp {
|
|
||||||
width: 46px;
|
|
||||||
height: 6px;
|
|
||||||
margin-bottom: 3px;
|
|
||||||
background: rgba(0, 0, 0, 0.25);
|
|
||||||
border-radius: 999px;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.stalker-hp-inner {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
background: linear-gradient(90deg, #ff6b6b, #c92a2a);
|
|
||||||
border-radius: 999px;
|
|
||||||
transition: width 0.1s linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes butterfly-stalker-hit {
|
|
||||||
0% { transform: scale(1) rotate(0); }
|
|
||||||
50% { transform: scale(0.82) rotate(-8deg); filter: brightness(1.6); }
|
|
||||||
100% { transform: scale(1) rotate(0); }
|
|
||||||
}
|
|
||||||
|
|
||||||
// Efekt při plácnutí vosy
|
|
||||||
.butterfly-swat-fx {
|
|
||||||
position: fixed;
|
|
||||||
margin: -14px 0 0 -6px;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 5;
|
|
||||||
animation: butterfly-catch-float 0.8s ease-out forwards;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-combo {
|
|
||||||
padding: 4px 10px;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: rgba(224, 162, 0, 0.92);
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 800;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
|
||||||
animation: butterfly-counter-bump 0.3s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-flash {
|
|
||||||
max-width: 260px;
|
|
||||||
padding: 8px 12px;
|
|
||||||
border-radius: 12px;
|
|
||||||
background: rgba(33, 37, 41, 0.92);
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
line-height: 1.25;
|
|
||||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
|
|
||||||
animation: butterfly-flash-in 0.25s ease-out;
|
|
||||||
pointer-events: auto;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes butterfly-flash-in {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(6px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes butterfly-counter-bump {
|
|
||||||
0% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
40% {
|
|
||||||
transform: scale(1.18);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Ohleduplnost k uživatelům, kteří nechtějí pohyb
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
|
||||||
.butterfly-sprite,
|
|
||||||
.butterfly-sprite.golden {
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-net.catch-pop,
|
|
||||||
.butterfly-net.premium,
|
|
||||||
.butterfly-net.stung,
|
|
||||||
.butterfly-net.stunned,
|
|
||||||
.butterfly-counter.bump,
|
|
||||||
.butterfly-combo {
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Bez animace aspoň staticky ukážeme, že síťka je omráčená
|
|
||||||
.butterfly-net.stunned {
|
|
||||||
filter: grayscale(0.8) brightness(0.82) drop-shadow(0 0 6px rgba(217, 72, 15, 0.7));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Zlatý motýl bez animace aspoň staticky září
|
|
||||||
.butterfly-sprite.golden {
|
|
||||||
filter: saturate(1.3) drop-shadow(0 0 8px rgba(255, 215, 80, 0.95)) drop-shadow(0 0 16px rgba(255, 190, 50, 0.7));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Anti-bot inspekce a vězení ---------------------------------------------
|
|
||||||
|
|
||||||
.butterfly-inspection {
|
|
||||||
position: fixed;
|
|
||||||
top: 16px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
z-index: 8;
|
|
||||||
pointer-events: none;
|
|
||||||
max-width: 92vw;
|
|
||||||
padding: 10px 16px;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: rgba(28, 126, 214, 0.95);
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
|
|
||||||
animation: butterfly-flash-in 0.25s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-jail {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
z-index: 6;
|
|
||||||
pointer-events: none;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Svislé mříže přes celou obrazovku
|
|
||||||
.butterfly-jail-bars {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background:
|
|
||||||
repeating-linear-gradient(
|
|
||||||
90deg,
|
|
||||||
rgba(20, 22, 28, 0.92) 0px,
|
|
||||||
rgba(20, 22, 28, 0.92) 14px,
|
|
||||||
rgba(20, 22, 28, 0) 14px,
|
|
||||||
rgba(20, 22, 28, 0) 70px
|
|
||||||
);
|
|
||||||
box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-jail-note {
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
padding: 22px 26px;
|
|
||||||
border-radius: 16px;
|
|
||||||
background: rgba(255, 255, 255, 0.94);
|
|
||||||
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
|
|
||||||
max-width: 90vw;
|
|
||||||
|
|
||||||
.jail-emoji { font-size: 2.4rem; }
|
|
||||||
.jail-title { font-weight: 800; font-size: 1.2rem; color: #c92a2a; margin-top: 4px; }
|
|
||||||
.jail-sub { margin-top: 6px; font-size: 0.95rem; color: #333; font-variant-numeric: tabular-nums; }
|
|
||||||
.jail-hint { margin-top: 8px; font-size: 0.8rem; color: #868e96; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
|
||||||
.butterfly-sprite.royal { animation: none; }
|
|
||||||
}
|
|
||||||
@@ -87,13 +87,3 @@
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-card > .hint {
|
|
||||||
color: var(--luncher-text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-error {
|
|
||||||
color: var(--luncher-danger);
|
|
||||||
line-height: 1.5;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,37 +1,29 @@
|
|||||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
import React, { useCallback, useEffect, useRef } from 'react';
|
||||||
import { Button } from 'react-bootstrap';
|
import { Button } from 'react-bootstrap';
|
||||||
import { useAuth } from './context/auth';
|
import { useAuth } from './context/auth';
|
||||||
import { login } from '../../types';
|
import { login } from '../../types';
|
||||||
import { useAppConfig } from './hooks/useGroupLimits';
|
|
||||||
import './Login.css';
|
import './Login.css';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Přihlášení. Podle konfigurace serveru buď přihlásí uživatele automaticky přes důvěryhodné
|
* Formulář pro prvotní zadání přihlašovacího jména.
|
||||||
* hlavičky z proxy (bez formuláře), nebo zobrazí formulář pro zadání jména. Když se konfigurace
|
|
||||||
* nenačte, zkusí nejprve přihlášení „naprázdno" a jinak zobrazí formulář (původní chování).
|
|
||||||
*/
|
*/
|
||||||
export default function Login() {
|
export default function Login() {
|
||||||
const auth = useAuth();
|
const auth = useAuth();
|
||||||
const { loaded, trustedHeaders } = useAppConfig();
|
|
||||||
const loginRef = useRef<HTMLInputElement>(null);
|
const loginRef = useRef<HTMLInputElement>(null);
|
||||||
const [trustedError, setTrustedError] = useState<string>();
|
|
||||||
const [attempt, setAttempt] = useState(0);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!auth || auth.login || !loaded || trustedHeaders === false) return;
|
if (auth && !auth.login) {
|
||||||
// Přihlášení přes hlavičky z proxy (případně pokus „naprázdno", pokud nevíme, jak server přihlašuje)
|
// Vyzkoušíme přihlášení "naprázdno", pokud projde, přihlásili nás trusted headers
|
||||||
setTrustedError(undefined);
|
login().then(response => {
|
||||||
login().then(response => {
|
const token = response.data;
|
||||||
const token = response.data;
|
if (token) {
|
||||||
if (token) {
|
auth?.setToken(token as unknown as string); // TODO vyřešit, API definice je špatně, je to skutečně string
|
||||||
auth.setToken(token as unknown as string); // TODO vyřešit, API definice je špatně, je to skutečně string
|
}
|
||||||
} else if (trustedHeaders) {
|
}).catch(error => {
|
||||||
setTrustedError((response.error as any)?.error ?? 'Přihlášení přes proxy se nezdařilo.');
|
// nezajímá nás
|
||||||
}
|
});
|
||||||
}).catch(() => {
|
}
|
||||||
if (trustedHeaders) setTrustedError('Server je nedostupný. Zkuste to prosím za chvíli.');
|
}, [auth]);
|
||||||
});
|
|
||||||
}, [auth, loaded, trustedHeaders, attempt]);
|
|
||||||
|
|
||||||
const doLogin = useCallback(async () => {
|
const doLogin = useCallback(async () => {
|
||||||
const length = loginRef?.current?.value.length && loginRef.current.value.replaceAll(/\s/g, '').length
|
const length = loginRef?.current?.value.length && loginRef.current.value.replaceAll(/\s/g, '').length
|
||||||
@@ -43,60 +35,36 @@ export default function Login() {
|
|||||||
}
|
}
|
||||||
}, [auth]);
|
}, [auth]);
|
||||||
|
|
||||||
if (auth?.login) {
|
if (!auth?.login) {
|
||||||
return <div>Neplatný stav</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
const header = <>
|
|
||||||
<h1 className='login-logo'>Luncher</h1>
|
|
||||||
<p className='login-subtitle'>Aplikace pro profesionální management obědů</p>
|
|
||||||
</>;
|
|
||||||
|
|
||||||
// Přihlašuje proxy — formulář se jménem nedává smysl
|
|
||||||
if (!loaded || trustedHeaders) {
|
|
||||||
return (
|
return (
|
||||||
<div className='login-page'>
|
<div className='login-page'>
|
||||||
<div className='login-card'>
|
<div className='login-card'>
|
||||||
{header}
|
<h1 className='login-logo'>Luncher</h1>
|
||||||
{trustedError ? (
|
<p className='login-subtitle'>Aplikace pro profesionální management obědů</p>
|
||||||
<div className='login-form'>
|
<div className='login-form'>
|
||||||
<p className='login-error'>{trustedError}</p>
|
<div>
|
||||||
<Button onClick={() => setAttempt(a => a + 1)}>Zkusit znovu</Button>
|
<label htmlFor="login-input">Zobrazované jméno</label>
|
||||||
|
<input
|
||||||
|
id="login-input"
|
||||||
|
ref={loginRef}
|
||||||
|
type='text'
|
||||||
|
placeholder="Např. Jan Novák"
|
||||||
|
onKeyDown={event => {
|
||||||
|
if (event.key === 'Enter') {
|
||||||
|
doLogin()
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<p className='hint'>
|
||||||
|
Zadejte jméno nebo přezdívku, pod kterou vás kolegové snadno identifikují.
|
||||||
|
Jméno je možné kdykoli změnit.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
<Button onClick={doLogin}>Pokračovat</Button>
|
||||||
<p className='hint'>Přihlašuji…</p>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
return <div>Neplatný stav</div>
|
||||||
return (
|
|
||||||
<div className='login-page'>
|
|
||||||
<div className='login-card'>
|
|
||||||
{header}
|
|
||||||
<div className='login-form'>
|
|
||||||
<div>
|
|
||||||
<label htmlFor="login-input">Zobrazované jméno</label>
|
|
||||||
<input
|
|
||||||
id="login-input"
|
|
||||||
ref={loginRef}
|
|
||||||
type='text'
|
|
||||||
placeholder="Např. Jan Novák"
|
|
||||||
onKeyDown={event => {
|
|
||||||
if (event.key === 'Enter') {
|
|
||||||
doLogin()
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<p className='hint'>
|
|
||||||
Zadejte jméno nebo přezdívku, pod kterou vás kolegové snadno identifikují.
|
|
||||||
Jméno je možné kdykoli změnit.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<Button onClick={doLogin}>Pokračovat</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -109,17 +109,4 @@ export function getHumanDate(date: Date) {
|
|||||||
export function formatDateString(dateString: string): string {
|
export function formatDateString(dateString: string): string {
|
||||||
const [year, month, day] = dateString.split('-');
|
const [year, month, day] = dateString.split('-');
|
||||||
return `${day}.${month}.${year}`;
|
return `${day}.${month}.${year}`;
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Očistí zprávu (účel platby) pro QR platbu – musí odpovídat serverové logice (qr.ts):
|
|
||||||
* transliteruje diakritiku na základní písmena (š→s, č→c, ...), odstraní znaky mimo
|
|
||||||
* ISO 8859-1 a hvězdičku (oddělovač polí v QR platbě) a ořízne na max. 60 znaků.
|
|
||||||
*/
|
|
||||||
export function sanitizeQrMessage(message: string): string {
|
|
||||||
const sanitized = message
|
|
||||||
.normalize('NFD').replace(/[\u0300-\u036f]/g, '') // diakritika → základní písmeno
|
|
||||||
.replace(/[^\x00-\xff]/g, '') // znaky mimo ISO 8859-1
|
|
||||||
.replace(/\*/g, ''); // '*' je v QR platbě oddělovač
|
|
||||||
return sanitized.length > 60 ? sanitized.substring(0, 60) : sanitized;
|
|
||||||
}
|
}
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
// Kulatý portrét postavy vedle jména strávníka s více jídly (styl Umamusume)
|
|
||||||
.eater-badge {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
object-fit: cover;
|
|
||||||
flex: none;
|
|
||||||
margin-right: 6px;
|
|
||||||
vertical-align: middle;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 2px solid #fff;
|
|
||||||
box-shadow: 0 0 0 2px #ff6fa3;
|
|
||||||
cursor: help;
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: scale(2);
|
|
||||||
position: relative;
|
|
||||||
z-index: 5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Odznak a jméno drží na jednom řádku (úzký sloupec „Člen" na stránce objednávek)
|
|
||||||
.user-info:has(.eater-badge) {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
@@ -1,41 +0,0 @@
|
|||||||
import { useEffect, useState } from "react";
|
|
||||||
import { OverlayTrigger, Tooltip } from "react-bootstrap";
|
|
||||||
import { useSettings } from "../context/settings";
|
|
||||||
import { UmaCharacter, loadUmaCharacters } from "../utils/umaCharacters";
|
|
||||||
import "./EaterBadge.scss";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Úrovně „jedlíka" podle počtu jídel: Special Week sní hodně, Oguri Cap ještě víc.
|
|
||||||
* Seřazeno od nejvyšší úrovně.
|
|
||||||
*/
|
|
||||||
const LEVELS = [
|
|
||||||
{ minItems: 3, character: 'Oguri Cap', title: 'Úroveň Oguri Cap — bezedný žaludek' },
|
|
||||||
{ minItems: 2, character: 'Special Week', title: 'Úroveň Special Week — pořádný apetit' },
|
|
||||||
];
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
/** Počet jídel/položek, které si strávník vybral či objednal */
|
|
||||||
items: number,
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Odznak s postavou Umamusume u strávníků s více jídly — jen ve stylu Umamusume. */
|
|
||||||
export default function EaterBadge({ items }: Readonly<Props>) {
|
|
||||||
const isUma = useSettings()?.styleTheme === 'umamusume';
|
|
||||||
const [characters, setCharacters] = useState<UmaCharacter[]>([]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (isUma) loadUmaCharacters().then(setCharacters);
|
|
||||||
}, [isUma]);
|
|
||||||
|
|
||||||
const level = LEVELS.find(l => items >= l.minItems);
|
|
||||||
const character = level && characters.find(c => c.name === level.character);
|
|
||||||
// Malý odznak potřebuje obličej — portrét (icon), případně kulatý obrázek postavy
|
|
||||||
const src = character?.icon ?? (character?.round ? character.images[0] : undefined);
|
|
||||||
if (!isUma || !level || !src) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<OverlayTrigger placement="top" overlay={<Tooltip>{level.title} ({items} jídla)</Tooltip>}>
|
|
||||||
<img src={src} alt={level.character} className="eater-badge" />
|
|
||||||
</OverlayTrigger>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -3,15 +3,15 @@ import { Navbar, Nav, NavDropdown, Modal, Button } from "react-bootstrap";
|
|||||||
import { useAuth } from "../context/auth";
|
import { useAuth } from "../context/auth";
|
||||||
import SettingsModal from "./modals/SettingsModal";
|
import SettingsModal from "./modals/SettingsModal";
|
||||||
import { useSettings, ThemePreference } from "../context/settings";
|
import { useSettings, ThemePreference } from "../context/settings";
|
||||||
import HuePicker from "./HuePicker";
|
import FeaturesVotingModal from "./modals/FeaturesVotingModal";
|
||||||
import PizzaCalculatorModal from "./modals/PizzaCalculatorModal";
|
import PizzaCalculatorModal from "./modals/PizzaCalculatorModal";
|
||||||
import RefreshMenuModal from "./modals/RefreshMenuModal";
|
import RefreshMenuModal from "./modals/RefreshMenuModal";
|
||||||
import GenerateQrModal from "./modals/GenerateQrModal";
|
import GenerateQrModal from "./modals/GenerateQrModal";
|
||||||
import GenerateMockDataModal from "./modals/GenerateMockDataModal";
|
import GenerateMockDataModal from "./modals/GenerateMockDataModal";
|
||||||
import ClearMockDataModal from "./modals/ClearMockDataModal";
|
import ClearMockDataModal from "./modals/ClearMockDataModal";
|
||||||
import { useNavigate } from "react-router";
|
import { useNavigate } from "react-router";
|
||||||
import { STATS_URL, OBJEDNANI_URL, NAVRHY_URL } from "../AppRoutes";
|
import { STATS_URL } from "../AppRoutes";
|
||||||
import { LunchChoices, getChangelogs } from "../../../types";
|
import { FeatureRequest, getVotes, updateVote, LunchChoices, getChangelogs } from "../../../types";
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
|
import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
|
||||||
import { formatDateString } from "../Utils";
|
import { formatDateString } from "../Utils";
|
||||||
@@ -30,6 +30,7 @@ export default function Header({ choices, dayIndex }: Props) {
|
|||||||
const settings = useSettings();
|
const settings = useSettings();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [settingsModalOpen, setSettingsModalOpen] = useState<boolean>(false);
|
const [settingsModalOpen, setSettingsModalOpen] = useState<boolean>(false);
|
||||||
|
const [votingModalOpen, setVotingModalOpen] = useState<boolean>(false);
|
||||||
const [pizzaModalOpen, setPizzaModalOpen] = useState<boolean>(false);
|
const [pizzaModalOpen, setPizzaModalOpen] = useState<boolean>(false);
|
||||||
const [refreshMenuModalOpen, setRefreshMenuModalOpen] = useState<boolean>(false);
|
const [refreshMenuModalOpen, setRefreshMenuModalOpen] = useState<boolean>(false);
|
||||||
const [changelogModalOpen, setChangelogModalOpen] = useState<boolean>(false);
|
const [changelogModalOpen, setChangelogModalOpen] = useState<boolean>(false);
|
||||||
@@ -37,8 +38,35 @@ export default function Header({ choices, dayIndex }: Props) {
|
|||||||
const [qrModalOpen, setQrModalOpen] = useState<boolean>(false);
|
const [qrModalOpen, setQrModalOpen] = useState<boolean>(false);
|
||||||
const [generateMockModalOpen, setGenerateMockModalOpen] = useState<boolean>(false);
|
const [generateMockModalOpen, setGenerateMockModalOpen] = useState<boolean>(false);
|
||||||
const [clearMockModalOpen, setClearMockModalOpen] = useState<boolean>(false);
|
const [clearMockModalOpen, setClearMockModalOpen] = useState<boolean>(false);
|
||||||
|
const [featureVotes, setFeatureVotes] = useState<FeatureRequest[] | undefined>([]);
|
||||||
|
|
||||||
const effectiveDark = settings?.effectiveDark ?? false;
|
// Zjistíme aktuální efektivní téma (pro zobrazení správné ikony)
|
||||||
|
const [effectiveTheme, setEffectiveTheme] = useState<'light' | 'dark'>('light');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const updateEffectiveTheme = () => {
|
||||||
|
if (settings?.themePreference === 'system') {
|
||||||
|
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||||
|
setEffectiveTheme(isDark ? 'dark' : 'light');
|
||||||
|
} else {
|
||||||
|
setEffectiveTheme(settings?.themePreference || 'light');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
updateEffectiveTheme();
|
||||||
|
|
||||||
|
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||||
|
mediaQuery.addEventListener('change', updateEffectiveTheme);
|
||||||
|
return () => mediaQuery.removeEventListener('change', updateEffectiveTheme);
|
||||||
|
}, [settings?.themePreference]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (auth?.login) {
|
||||||
|
getVotes().then(response => {
|
||||||
|
setFeatureVotes(response.data);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}, [auth?.login]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!auth?.login) return;
|
if (!auth?.login) return;
|
||||||
@@ -57,6 +85,10 @@ export default function Header({ choices, dayIndex }: Props) {
|
|||||||
setSettingsModalOpen(false);
|
setSettingsModalOpen(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const closeVotingModal = () => {
|
||||||
|
setVotingModalOpen(false);
|
||||||
|
}
|
||||||
|
|
||||||
const closePizzaModal = () => {
|
const closePizzaModal = () => {
|
||||||
setPizzaModalOpen(false);
|
setPizzaModalOpen(false);
|
||||||
}
|
}
|
||||||
@@ -77,10 +109,9 @@ export default function Header({ choices, dayIndex }: Props) {
|
|||||||
setQrModalOpen(true);
|
setQrModalOpen(true);
|
||||||
}
|
}
|
||||||
|
|
||||||
const isUmamusume = settings?.styleTheme === 'umamusume';
|
|
||||||
|
|
||||||
const toggleTheme = () => {
|
const toggleTheme = () => {
|
||||||
const newTheme: ThemePreference = effectiveDark ? 'light' : 'dark';
|
// Přepínáme mezi light a dark (ignorujeme system pro jednoduchost)
|
||||||
|
const newTheme: ThemePreference = effectiveTheme === 'dark' ? 'light' : 'dark';
|
||||||
settings?.setThemePreference(newTheme);
|
settings?.setThemePreference(newTheme);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -145,6 +176,17 @@ export default function Header({ choices, dayIndex }: Props) {
|
|||||||
closeSettingsModal();
|
closeSettingsModal();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const saveFeatureVote = async (option: FeatureRequest, active: boolean) => {
|
||||||
|
await updateVote({ body: { option, active } });
|
||||||
|
const votes = [...featureVotes || []];
|
||||||
|
if (active) {
|
||||||
|
votes.push(option);
|
||||||
|
} else {
|
||||||
|
votes.splice(votes.indexOf(option), 1);
|
||||||
|
}
|
||||||
|
setFeatureVotes(votes);
|
||||||
|
}
|
||||||
|
|
||||||
return <Navbar variant='dark' expand="lg">
|
return <Navbar variant='dark' expand="lg">
|
||||||
<Navbar.Brand href="/">Luncher</Navbar.Brand>
|
<Navbar.Brand href="/">Luncher</Navbar.Brand>
|
||||||
<Navbar.Toggle aria-controls="basic-navbar-nav" />
|
<Navbar.Toggle aria-controls="basic-navbar-nav" />
|
||||||
@@ -153,24 +195,18 @@ export default function Header({ choices, dayIndex }: Props) {
|
|||||||
<button
|
<button
|
||||||
className="theme-toggle"
|
className="theme-toggle"
|
||||||
onClick={toggleTheme}
|
onClick={toggleTheme}
|
||||||
title={effectiveDark ? 'Přepnout na světlý režim' : 'Přepnout na tmavý režim'}
|
title={effectiveTheme === 'dark' ? 'Přepnout na světlý režim' : 'Přepnout na tmavý režim'}
|
||||||
aria-label="Přepnout světlý/tmavý režim"
|
aria-label="Přepnout barevný motiv"
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon icon={effectiveDark ? faSun : faMoon} />
|
<FontAwesomeIcon icon={effectiveTheme === 'dark' ? faSun : faMoon} />
|
||||||
</button>
|
</button>
|
||||||
{!isUmamusume && <HuePicker
|
|
||||||
accentHue={settings?.accentHue ?? 142}
|
|
||||||
isDark={effectiveDark}
|
|
||||||
onChange={hue => settings?.setAccentHue(hue)}
|
|
||||||
/>}
|
|
||||||
<NavDropdown align="end" title={auth?.login} id="basic-nav-dropdown">
|
<NavDropdown align="end" title={auth?.login} id="basic-nav-dropdown">
|
||||||
<NavDropdown.Item onClick={() => setSettingsModalOpen(true)}>Nastavení</NavDropdown.Item>
|
<NavDropdown.Item onClick={() => setSettingsModalOpen(true)}>Nastavení</NavDropdown.Item>
|
||||||
<NavDropdown.Item onClick={() => setRefreshMenuModalOpen(true)}>Přenačtení menu</NavDropdown.Item>
|
<NavDropdown.Item onClick={() => setRefreshMenuModalOpen(true)}>Přenačtení menu</NavDropdown.Item>
|
||||||
<NavDropdown.Item onClick={() => navigate(NAVRHY_URL)}>Návrhy na vylepšení</NavDropdown.Item>
|
<NavDropdown.Item onClick={() => setVotingModalOpen(true)}>Hlasovat o nových funkcích</NavDropdown.Item>
|
||||||
<NavDropdown.Item onClick={() => setPizzaModalOpen(true)}>Pizza kalkulačka</NavDropdown.Item>
|
<NavDropdown.Item onClick={() => setPizzaModalOpen(true)}>Pizza kalkulačka</NavDropdown.Item>
|
||||||
<NavDropdown.Item onClick={handleQrMenuClick}>Generování QR kódů</NavDropdown.Item>
|
<NavDropdown.Item onClick={handleQrMenuClick}>Generování QR kódů</NavDropdown.Item>
|
||||||
<NavDropdown.Item onClick={() => navigate(STATS_URL)}>Statistiky</NavDropdown.Item>
|
<NavDropdown.Item onClick={() => navigate(STATS_URL)}>Statistiky</NavDropdown.Item>
|
||||||
<NavDropdown.Item onClick={() => navigate(OBJEDNANI_URL)}>Objednání</NavDropdown.Item>
|
|
||||||
<NavDropdown.Item onClick={() => {
|
<NavDropdown.Item onClick={() => {
|
||||||
getChangelogs().then(response => {
|
getChangelogs().then(response => {
|
||||||
const entries = response.data ?? {};
|
const entries = response.data ?? {};
|
||||||
@@ -186,7 +222,7 @@ export default function Header({ choices, dayIndex }: Props) {
|
|||||||
<>
|
<>
|
||||||
<NavDropdown.Divider />
|
<NavDropdown.Divider />
|
||||||
<NavDropdown.Item onClick={() => setGenerateMockModalOpen(true)}>🔧 Generovat mock data</NavDropdown.Item>
|
<NavDropdown.Item onClick={() => setGenerateMockModalOpen(true)}>🔧 Generovat mock data</NavDropdown.Item>
|
||||||
<NavDropdown.Item onClick={() => setClearMockModalOpen(true)}>🔧 Smazat mock data</NavDropdown.Item>
|
<NavDropdown.Item onClick={() => setClearMockModalOpen(true)}>🔧 Smazat data dne</NavDropdown.Item>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<NavDropdown.Divider />
|
<NavDropdown.Divider />
|
||||||
@@ -196,6 +232,7 @@ export default function Header({ choices, dayIndex }: Props) {
|
|||||||
</Navbar.Collapse>
|
</Navbar.Collapse>
|
||||||
<SettingsModal isOpen={settingsModalOpen} onClose={closeSettingsModal} onSave={saveSettings} />
|
<SettingsModal isOpen={settingsModalOpen} onClose={closeSettingsModal} onSave={saveSettings} />
|
||||||
<RefreshMenuModal isOpen={refreshMenuModalOpen} onClose={closeRefreshMenuModal} />
|
<RefreshMenuModal isOpen={refreshMenuModalOpen} onClose={closeRefreshMenuModal} />
|
||||||
|
<FeaturesVotingModal isOpen={votingModalOpen} onClose={closeVotingModal} onChange={saveFeatureVote} initialValues={featureVotes} />
|
||||||
<PizzaCalculatorModal isOpen={pizzaModalOpen} onClose={closePizzaModal} />
|
<PizzaCalculatorModal isOpen={pizzaModalOpen} onClose={closePizzaModal} />
|
||||||
{choices && settings?.bankAccount && settings?.holderName && (
|
{choices && settings?.bankAccount && settings?.holderName && (
|
||||||
<GenerateQrModal
|
<GenerateQrModal
|
||||||
|
|||||||
@@ -1,141 +0,0 @@
|
|||||||
.hue-picker-dropdown {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.dropdown-toggle {
|
|
||||||
background: transparent !important;
|
|
||||||
border: none !important;
|
|
||||||
color: var(--luncher-navbar-text) !important;
|
|
||||||
padding: 8px 12px;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: var(--luncher-radius-sm);
|
|
||||||
transition: var(--luncher-transition);
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: rgba(255, 255, 255, 0.1) !important;
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: none;
|
|
||||||
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hue-picker-panel {
|
|
||||||
padding: 0 !important;
|
|
||||||
min-width: 240px;
|
|
||||||
|
|
||||||
.hue-picker-inner {
|
|
||||||
padding: 14px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hue-picker-label {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
color: var(--luncher-text-secondary);
|
|
||||||
margin-bottom: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hue-slider {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
width: 100%;
|
|
||||||
height: 12px;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: linear-gradient(
|
|
||||||
to right,
|
|
||||||
hsl(0 70% 50%), hsl(30 70% 50%), hsl(60 70% 50%), hsl(90 70% 50%),
|
|
||||||
hsl(120 70% 50%), hsl(150 70% 50%), hsl(180 70% 50%), hsl(210 70% 50%),
|
|
||||||
hsl(240 70% 50%), hsl(270 70% 50%), hsl(300 70% 50%), hsl(330 70% 50%), hsl(360 70% 50%)
|
|
||||||
);
|
|
||||||
outline: none;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-bottom: 14px;
|
|
||||||
|
|
||||||
&::-webkit-slider-thumb {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: white;
|
|
||||||
border: 2px solid rgba(0, 0, 0, 0.25);
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
|
|
||||||
transition: transform 0.15s ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: scale(1.15);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-moz-range-thumb {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: white;
|
|
||||||
border: 2px solid rgba(0, 0, 0, 0.25);
|
|
||||||
cursor: pointer;
|
|
||||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hue-presets {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
margin-bottom: 14px;
|
|
||||||
|
|
||||||
.hue-swatch {
|
|
||||||
width: 26px;
|
|
||||||
height: 26px;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 2px solid transparent;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0;
|
|
||||||
transition: transform 0.15s ease, border-color 0.15s ease;
|
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: scale(1.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
border-color: var(--luncher-text);
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hue-preview {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
padding-top: 4px;
|
|
||||||
border-top: 1px solid var(--luncher-border);
|
|
||||||
|
|
||||||
.hue-preview-chip {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: var(--luncher-radius-sm);
|
|
||||||
flex-shrink: 0;
|
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
||||||
transition: background 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
color: var(--luncher-text-secondary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,71 +0,0 @@
|
|||||||
import { Dropdown } from 'react-bootstrap';
|
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
||||||
import { faPalette } from '@fortawesome/free-solid-svg-icons';
|
|
||||||
import './HuePicker.scss';
|
|
||||||
|
|
||||||
const PRESETS = [
|
|
||||||
{ hue: 142, label: 'Zelená' },
|
|
||||||
{ hue: 217, label: 'Modrá' },
|
|
||||||
{ hue: 263, label: 'Fialová' },
|
|
||||||
{ hue: 0, label: 'Červená' },
|
|
||||||
{ hue: 28, label: 'Oranžová' },
|
|
||||||
{ hue: 340, label: 'Růžová' },
|
|
||||||
];
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
accentHue: number;
|
|
||||||
isDark: boolean;
|
|
||||||
onChange: (hue: number) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
function swatchColor(hue: number, isDark: boolean): string {
|
|
||||||
return `hsl(${hue} 70% ${isDark ? 55 : 38}%)`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function HuePicker({ accentHue, isDark, onChange }: Props) {
|
|
||||||
return (
|
|
||||||
<Dropdown align="end" autoClose="outside" className="hue-picker-dropdown">
|
|
||||||
<Dropdown.Toggle
|
|
||||||
as="button"
|
|
||||||
className="theme-toggle"
|
|
||||||
aria-label="Barva zvýraznění"
|
|
||||||
title="Barva zvýraznění"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon icon={faPalette} />
|
|
||||||
</Dropdown.Toggle>
|
|
||||||
<Dropdown.Menu className="hue-picker-panel">
|
|
||||||
<div className="hue-picker-inner">
|
|
||||||
<div className="hue-picker-label">Barva zvýraznění</div>
|
|
||||||
<input
|
|
||||||
type="range"
|
|
||||||
min={0}
|
|
||||||
max={360}
|
|
||||||
value={accentHue}
|
|
||||||
onChange={e => onChange(parseInt(e.target.value, 10))}
|
|
||||||
className="hue-slider"
|
|
||||||
aria-label="Odstín barvy zvýraznění"
|
|
||||||
/>
|
|
||||||
<div className="hue-presets">
|
|
||||||
{PRESETS.map(p => (
|
|
||||||
<button
|
|
||||||
key={p.hue}
|
|
||||||
className={`hue-swatch${accentHue === p.hue ? ' active' : ''}`}
|
|
||||||
style={{ background: swatchColor(p.hue, isDark) }}
|
|
||||||
title={p.label}
|
|
||||||
onClick={() => onChange(p.hue)}
|
|
||||||
aria-label={p.label}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className="hue-preview">
|
|
||||||
<div
|
|
||||||
className="hue-preview-chip"
|
|
||||||
style={{ background: swatchColor(accentHue, isDark) }}
|
|
||||||
/>
|
|
||||||
<span>Aktuální barva zvýraznění</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Dropdown.Menu>
|
|
||||||
</Dropdown>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,117 +0,0 @@
|
|||||||
// Kompaktní výběr z nabídky podniku v tabulce skupinové objednávky
|
|
||||||
.menu-hint-cell {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2px;
|
|
||||||
min-width: 200px;
|
|
||||||
|
|
||||||
.select-search-container {
|
|
||||||
// Barvy knihovny napojené na témata aplikace (jinak bílé pozadí i v tmavém režimu)
|
|
||||||
--select-search-background: var(--luncher-bg-card);
|
|
||||||
--select-search-border: var(--luncher-border);
|
|
||||||
--select-search-text: var(--luncher-text);
|
|
||||||
--select-search-subtle-text: var(--luncher-text-muted);
|
|
||||||
--select-search-highlight: var(--luncher-bg-hover);
|
|
||||||
--select-search-selected: var(--luncher-primary);
|
|
||||||
--select-search-inverted-text: #fff;
|
|
||||||
--select-search-font: inherit;
|
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.select-search-input {
|
|
||||||
height: 32px;
|
|
||||||
padding: 0 12px;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
border-width: 1px;
|
|
||||||
background: var(--luncher-bg);
|
|
||||||
color: var(--luncher-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Seznam přes okraje tabulky/karty (jinak by ho karta ořízla)
|
|
||||||
.select-search-select {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 20;
|
|
||||||
left: 0;
|
|
||||||
min-width: 320px;
|
|
||||||
max-height: 320px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-search-options, .select-search-group ul {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-search-option {
|
|
||||||
height: auto;
|
|
||||||
padding: 6px 12px;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
background: transparent;
|
|
||||||
color: var(--luncher-text);
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Jídlo na limitu kusů — nejde přidat
|
|
||||||
.select-search-option:disabled {
|
|
||||||
opacity: 0.45;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-search-group-header {
|
|
||||||
padding: 4px 12px;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-hint-items {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 4px;
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-hint-item {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
padding: 1px 4px 1px 8px;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: var(--luncher-bg-hover);
|
|
||||||
border: 1px solid var(--luncher-border);
|
|
||||||
font-size: 0.75rem;
|
|
||||||
line-height: 1.4;
|
|
||||||
|
|
||||||
small {
|
|
||||||
color: var(--luncher-text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
border: none;
|
|
||||||
background: none;
|
|
||||||
padding: 0 4px;
|
|
||||||
color: var(--luncher-text-muted);
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--luncher-danger);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-hint-price {
|
|
||||||
cursor: help;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-hint-use {
|
|
||||||
margin-left: 6px;
|
|
||||||
padding: 0;
|
|
||||||
border: none;
|
|
||||||
background: none;
|
|
||||||
color: var(--luncher-primary);
|
|
||||||
font-weight: 700;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,120 +0,0 @@
|
|||||||
import { useMemo } from "react";
|
|
||||||
import { OverlayTrigger, Tooltip } from "react-bootstrap";
|
|
||||||
import SelectSearch, { SelectedOptionValue, SelectSearchOption } from "react-select-search";
|
|
||||||
import { StoreMenuDish } from "../../../types";
|
|
||||||
import { countNoteItems, matchNoteToMenu, noteItemQuantity, splitNoteItems } from "../utils/menuMatch";
|
|
||||||
import { useGroupLimits } from "../hooks/useGroupLimits";
|
|
||||||
import "./MenuHintCell.scss";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
/** Celá nabídka podniku (stažená z Bolt Food/Wolt), undefined = načítá se / není */
|
|
||||||
menu?: StoreMenuDish[],
|
|
||||||
note?: string,
|
|
||||||
/** Zadaná částka člena v haléřích */
|
|
||||||
amount?: number,
|
|
||||||
canEdit: boolean,
|
|
||||||
onPick: (dish: StoreMenuDish) => void,
|
|
||||||
onUsePrice: (priceKc: number) => void,
|
|
||||||
/** Odebere jeden kus položky poznámky na daném indexu (a odečte její cenu) */
|
|
||||||
onRemoveItem: (index: number) => void,
|
|
||||||
};
|
|
||||||
|
|
||||||
const formatDish = (d: StoreMenuDish) => d.price != null ? `${d.name} (${d.price} Kč)` : d.name;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Buňka „Z nabídky" ve skupinové objednávce: výběr položky ze stažené nabídky podniku
|
|
||||||
* (doplní poznámku i částku) a kontrola ceny rozpoznané z poznámky proti zadané částce.
|
|
||||||
*/
|
|
||||||
export default function MenuHintCell({ menu, note, amount, canEdit, onPick, onUsePrice, onRemoveItem }: Readonly<Props>) {
|
|
||||||
const { maxItemQuantity, maxItems } = useGroupLimits();
|
|
||||||
const options = useMemo<SelectSearchOption[]>(() => {
|
|
||||||
if (!menu?.length) return [];
|
|
||||||
const groups = new Map<string, SelectSearchOption[]>();
|
|
||||||
menu.forEach((d, index) => {
|
|
||||||
const category = d.category || 'Ostatní';
|
|
||||||
if (!groups.has(category)) groups.set(category, []);
|
|
||||||
// Jídlo, kterého už je v objednávce maximum kusů, nejde přidat znovu
|
|
||||||
const atLimit = noteItemQuantity(note, d.name, menu) >= maxItemQuantity;
|
|
||||||
groups.get(category)!.push({ name: atLimit ? `${formatDish(d)} — max ${maxItemQuantity} ks` : formatDish(d), value: String(index), disabled: atLimit });
|
|
||||||
});
|
|
||||||
return [...groups.entries()].map(([name, items]) => ({ name, type: 'group', items }));
|
|
||||||
}, [menu, note, maxItemQuantity]);
|
|
||||||
const itemLimitReached = useMemo(() => countNoteItems(note, menu ?? []) >= maxItems, [note, menu, maxItems]);
|
|
||||||
|
|
||||||
const match = useMemo(() => menu ? matchNoteToMenu(note, menu) : undefined, [menu, note]);
|
|
||||||
const items = useMemo(() => splitNoteItems(note, menu), [note, menu]);
|
|
||||||
|
|
||||||
if (!menu?.length) {
|
|
||||||
return <small className="text-muted">—</small>;
|
|
||||||
}
|
|
||||||
|
|
||||||
const menuPrice = match?.total;
|
|
||||||
const differs = menuPrice != null && amount != null && Math.round(menuPrice * 100) !== amount;
|
|
||||||
const unmatched = match?.parts.filter(p => !p.dish).map(p => p.text) ?? [];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="menu-hint-cell">
|
|
||||||
{canEdit && itemLimitReached && (
|
|
||||||
<small className="text-muted">Dosažen limit {maxItems} položek — nejdřív něco odeber (×).</small>
|
|
||||||
)}
|
|
||||||
{canEdit && !itemLimitReached && (
|
|
||||||
<SelectSearch
|
|
||||||
search
|
|
||||||
options={options}
|
|
||||||
placeholder="Přidat z nabídky…"
|
|
||||||
value=""
|
|
||||||
onBlur={() => { }}
|
|
||||||
onFocus={() => { }}
|
|
||||||
onChange={(value: SelectedOptionValue | SelectedOptionValue[]) => {
|
|
||||||
const dish = menu[Number(value)];
|
|
||||||
if (dish) onPick(dish);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{canEdit && items.length > 0 && (
|
|
||||||
<div className="menu-hint-items">
|
|
||||||
{items.map((text, i) => {
|
|
||||||
// Rozpoznaná položka ze stejného rozdělení poznámky — kvůli ceně na čipu
|
|
||||||
const part = match && match.parts.length === items.length ? match.parts[i] : undefined;
|
|
||||||
const price = part?.dish?.price;
|
|
||||||
const quantity = part?.quantity ?? 1;
|
|
||||||
return (
|
|
||||||
<span key={`${i}-${text}`} className="menu-hint-item">
|
|
||||||
{text}{price != null && <small> {quantity > 1 ? `${quantity}× ${price} = ${quantity * price}` : price} Kč</small>}
|
|
||||||
<button type="button" onClick={() => onRemoveItem(i)} title={`Odebrat 1× ${text}`} aria-label={`Odebrat ${text}`}>×</button>
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{match && (
|
|
||||||
<OverlayTrigger
|
|
||||||
placement="top"
|
|
||||||
overlay={
|
|
||||||
<Tooltip>
|
|
||||||
{match.parts.map((p, i) => (
|
|
||||||
<div key={i}>
|
|
||||||
{p.dish
|
|
||||||
? `${p.quantity > 1 ? `${p.quantity}× ` : ''}${formatDish(p.dish)}`
|
|
||||||
: `„${p.text}" — v nabídce nenalezeno`}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</Tooltip>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<small className={`menu-hint-price ${differs ? 'text-warning' : 'text-muted'}`}>
|
|
||||||
{menuPrice != null
|
|
||||||
? <>Dle nabídky: <strong>{menuPrice} Kč</strong></>
|
|
||||||
: <>Nalezeno {match.parts.length - unmatched.length}/{match.parts.length} položek</>}
|
|
||||||
{differs && canEdit && (
|
|
||||||
<button type="button" className="menu-hint-use" onClick={() => onUsePrice(menuPrice!)}
|
|
||||||
title="Nastavit částku podle ceny v nabídce">
|
|
||||||
použít
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</small>
|
|
||||||
</OverlayTrigger>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,71 +0,0 @@
|
|||||||
.tracking-progress {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
max-width: 400px;
|
|
||||||
|
|
||||||
.tracking-step {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
flex: 1;
|
|
||||||
min-width: 64px;
|
|
||||||
|
|
||||||
.tracking-dot {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: var(--luncher-border, #ced4da);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tracking-label {
|
|
||||||
margin-top: 2px;
|
|
||||||
font-size: 0.7em;
|
|
||||||
color: var(--luncher-text-muted, #6c757d);
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Spojnice k předchozímu kroku – vede od středu této tečky doleva ke středu předchozí.
|
|
||||||
// Tečka má průměr 12px, takže její střed je 6px od levého okraje segmentu.
|
|
||||||
&:not(:first-child)::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 5px;
|
|
||||||
left: calc(6px - 100%);
|
|
||||||
width: 100%;
|
|
||||||
height: 2px;
|
|
||||||
background: var(--luncher-border, #ced4da);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.done {
|
|
||||||
.tracking-dot {
|
|
||||||
background: var(--bs-success, #198754);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:first-child)::before {
|
|
||||||
background: var(--bs-success, #198754);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active .tracking-label {
|
|
||||||
font-weight: 600;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Pulzování aktivního kroku, dokud sledování běží
|
|
||||||
&.live .tracking-step.active .tracking-dot {
|
|
||||||
animation: tracking-pulse 2s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes tracking-pulse {
|
|
||||||
0%, 100% {
|
|
||||||
box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.5);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
box-shadow: 0 0 0 5px rgba(25, 135, 84, 0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,153 +0,0 @@
|
|||||||
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
|
|
||||||
import { TrackingProvider } from '../../../types';
|
|
||||||
import './OrderProgress.scss';
|
|
||||||
|
|
||||||
const STEPS = ['Přijato', 'Příprava', 'Vyzvedávání', 'Na cestě', 'Doručeno'];
|
|
||||||
|
|
||||||
/** Lidský název rozvozové služby do tooltipu. */
|
|
||||||
export const PROVIDER_LABEL: Record<TrackingProvider, string> = {
|
|
||||||
bolt: 'Bolt Food',
|
|
||||||
wolt: 'Wolt',
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Známé stavy objednávky z Bolt API → index kroku ve stepperu.
|
|
||||||
* Pozor: waiting_delivery znamená "jídlo čeká v podniku na vyzvednutí",
|
|
||||||
* nikoli "na cestě" — tu signalizuje až stav kurýra (picked_up apod.).
|
|
||||||
* Krok „Vyzvedávání" je vyhrazen pro kombinaci „kurýr u podniku + jídlo hotové"
|
|
||||||
* (viz logika níže), samotný order_state ho neudělí — jinak bychom hlásili
|
|
||||||
* vyzvedávání i když se ještě peče (chování, na které si Bolt sám občas stěžuje).
|
|
||||||
*/
|
|
||||||
const BOLT_STATE_TO_STEP: Record<string, number> = {
|
|
||||||
created: 0,
|
|
||||||
pending: 0,
|
|
||||||
waiting_acceptance: 0,
|
|
||||||
accepted: 0,
|
|
||||||
waiting_preparation: 0,
|
|
||||||
preparing: 1,
|
|
||||||
waiting_delivery: 1,
|
|
||||||
ready_for_pickup: 1,
|
|
||||||
waiting_courier: 1,
|
|
||||||
waiting_pickup: 1,
|
|
||||||
picked_up: 3,
|
|
||||||
in_delivery: 3,
|
|
||||||
delivering: 3,
|
|
||||||
heading_to_client: 3,
|
|
||||||
delivered: 4,
|
|
||||||
finished: 4,
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Stavy kurýra z Bolt API → index kroku. Kurýr u podniku ještě neznamená "na cestě". */
|
|
||||||
const BOLT_COURIER_STATE_TO_STEP: Record<string, number> = {
|
|
||||||
matched: 0,
|
|
||||||
accepted: 0,
|
|
||||||
heading_to_provider: 1,
|
|
||||||
arrived_to_provider: 1,
|
|
||||||
picked_up: 3,
|
|
||||||
heading_to_client: 3,
|
|
||||||
delivering: 3,
|
|
||||||
arrived_to_client: 3,
|
|
||||||
delivered: 4,
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Známé stavy objednávky z Wolt tracking API → index kroku ve stepperu.
|
|
||||||
* Pozor: Wolt hlásí stav podniku, ne rozvozu — "ready" (jídlo hotové) zůstává
|
|
||||||
* i celou dobu, co kurýr objednávku veze. Kroky „Vyzvedávání" a „Na cestě" proto
|
|
||||||
* neurčuje status, ale odvozený stav kurýra (viz trackingProviders.ts).
|
|
||||||
*/
|
|
||||||
const WOLT_STATE_TO_STEP: Record<string, number> = {
|
|
||||||
received: 0,
|
|
||||||
acknowledged: 0,
|
|
||||||
confirmed: 0,
|
|
||||||
waiting: 0,
|
|
||||||
production: 1,
|
|
||||||
preparing: 1,
|
|
||||||
ready: 1,
|
|
||||||
picked_up: 3,
|
|
||||||
transport: 3,
|
|
||||||
delivering: 3,
|
|
||||||
delivered: 4,
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Popis odvozeného stavu kurýra u Woltu do tooltipu. */
|
|
||||||
const WOLT_COURIER_INFO: Record<string, string> = {
|
|
||||||
assigned: 'kurýr přiřazen',
|
|
||||||
delivering: 'kurýr veze objednávku',
|
|
||||||
delivering_other: 'kurýr veze objednávku, ale nejdřív doručuje jinou',
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Stavy, ve kterých už jídlo čeká připravené na kurýra. */
|
|
||||||
const PICKUP_READY_STATES: Record<TrackingProvider, Set<string>> = {
|
|
||||||
bolt: new Set(['waiting_delivery', 'ready_for_pickup', 'waiting_courier', 'waiting_pickup']),
|
|
||||||
wolt: new Set(['ready']),
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Neznámé stavy se mapují heuristicky podle klíčových slov. */
|
|
||||||
function stepForOrderState(provider: TrackingProvider, state: string): number | 'cancelled' {
|
|
||||||
const s = state.toLowerCase();
|
|
||||||
const known = provider === 'wolt' ? WOLT_STATE_TO_STEP : BOLT_STATE_TO_STEP;
|
|
||||||
if (s in known) return known[s];
|
|
||||||
if (/cancel|reject|fail/.test(s)) return 'cancelled';
|
|
||||||
if (/delivered|finished/.test(s)) return 4;
|
|
||||||
if (/accept|pending|created|received/.test(s)) return 0;
|
|
||||||
if (/^waiting|prepar|ready|cook|production/.test(s)) return 1;
|
|
||||||
if (/picked|delivering|heading_to_client|transport/.test(s)) return 3;
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
function stepForCourierState(provider: TrackingProvider, state?: string): number {
|
|
||||||
if (!state) return 0;
|
|
||||||
const s = state.toLowerCase();
|
|
||||||
// Wolt má jen odvozené stavy: 'assigned' o kroku nic neříká, 'delivering'
|
|
||||||
// i 'delivering_other' znamenají, že kurýr naši objednávku už veze
|
|
||||||
if (provider === 'wolt') return s.startsWith('delivering') ? 3 : 0;
|
|
||||||
if (s in BOLT_COURIER_STATE_TO_STEP) return BOLT_COURIER_STATE_TO_STEP[s];
|
|
||||||
if (/picked|client|delivering|transport/.test(s)) return 3;
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
/** Rozvozová služba, ze které stav pochází */
|
|
||||||
provider: TrackingProvider;
|
|
||||||
/** Raw stav objednávky (Bolt order_state, Wolt status) */
|
|
||||||
state: string;
|
|
||||||
/** Raw stav kurýra (Bolt courier.state, Wolt 'assigned') */
|
|
||||||
courierState?: string;
|
|
||||||
/** Zda sledování stále běží (skupina má trackingCode) */
|
|
||||||
tracking: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Mini progress stepper se stavem objednávky u rozvozové služby. */
|
|
||||||
export default function OrderProgress({ provider, state, courierState, tracking }: Props) {
|
|
||||||
const label = PROVIDER_LABEL[provider] ?? provider;
|
|
||||||
const orderStep = stepForOrderState(provider, state);
|
|
||||||
if (orderStep === 'cancelled') {
|
|
||||||
return <small className="text-danger">Objednávka {label} byla zrušena</small>;
|
|
||||||
}
|
|
||||||
// Stav kurýra může krok jen zpřesnit dopředu (např. waiting_delivery + picked_up → Na cestě)
|
|
||||||
let step = Math.max(orderStep, stepForCourierState(provider, courierState));
|
|
||||||
// Vyzvedávání = kurýr u podniku a jídlo skutečně hotové. Sám arrived_to_provider
|
|
||||||
// (bez toho, že by jídlo bylo hotové) nestačí — viz komentář u BOLT_STATE_TO_STEP.
|
|
||||||
const courierAtProvider = provider === 'wolt'
|
|
||||||
? !!courierState
|
|
||||||
: courierState?.toLowerCase() === 'arrived_to_provider';
|
|
||||||
const foodReadyForPickup = PICKUP_READY_STATES[provider]?.has(state.toLowerCase());
|
|
||||||
if (step < 3 && courierAtProvider && foodReadyForPickup) step = 2;
|
|
||||||
const courierInfo = provider === 'wolt'
|
|
||||||
? WOLT_COURIER_INFO[courierState ?? ''] ?? 'kurýr přiřazen'
|
|
||||||
: `kurýr: ${courierState}`;
|
|
||||||
const rawInfo = courierState ? `${state} / ${courierInfo}` : state;
|
|
||||||
return (
|
|
||||||
<OverlayTrigger overlay={<Tooltip>Stav z {label}: {rawInfo}</Tooltip>}>
|
|
||||||
<div className={`tracking-progress${tracking && step < 4 ? ' live' : ''}`}>
|
|
||||||
{STEPS.map((stepLabel, i) => (
|
|
||||||
<div key={stepLabel} className={`tracking-step${i <= step ? ' done' : ''}${i === step ? ' active' : ''}`}>
|
|
||||||
<div className="tracking-dot" />
|
|
||||||
<div className="tracking-label">{stepLabel}</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</OverlayTrigger>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,102 +0,0 @@
|
|||||||
import { useEffect, useRef, useState } from 'react';
|
|
||||||
import { Button, Modal } from 'react-bootstrap';
|
|
||||||
import { PendingQr, dismissQr } from '../../../types';
|
|
||||||
import { formatDateString } from '../Utils';
|
|
||||||
import ConfirmModal from './modals/ConfirmModal';
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
pendingQrs?: PendingQr[];
|
|
||||||
login?: string;
|
|
||||||
// Zavolá se po úspěšném potvrzení platby, aby si rodič mohl znovu načíst data
|
|
||||||
onDismissed?: () => void | Promise<void>;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Sekce "Nevyřízené platby" – zobrazí QR kódy neuhrazených plateb přihlášeného uživatele
|
|
||||||
// včetně tlačítka "Zaplatil jsem" a potvrzovacího dialogu. Sdíleno hlavní stránkou i stránkou objednávek.
|
|
||||||
// Při příchodu nových nevyřízených plateb se navíc automaticky otevře modální dialog,
|
|
||||||
// aby si uživatel QR kódů určitě všiml (často si jich nevšimnou, protože sekce je dole na stránce).
|
|
||||||
export default function PendingPayments({ pendingQrs, login, onDismissed }: Readonly<Props>) {
|
|
||||||
const [dismissQrId, setDismissQrId] = useState<string | null>(null);
|
|
||||||
const [modalOpen, setModalOpen] = useState(false);
|
|
||||||
|
|
||||||
// ID QR kódů, pro které už byl v rámci tohoto načtení stránky automaticky zobrazen
|
|
||||||
// modální dialog. Drží se jen v paměti (ne v sessionStorage), takže se při každém
|
|
||||||
// ručním přenačtení stránky vynuluje a dialog se znovu otevře, dokud uživatel platby
|
|
||||||
// neuhradí. Zároveň se nepřekrývá při pouhém obnovení dat či příchodu už zobrazeného QR.
|
|
||||||
const autoShownQrIds = useRef<Set<string>>(new Set());
|
|
||||||
|
|
||||||
const qrIdsKey = (pendingQrs ?? []).map(qr => qr.id).join(',');
|
|
||||||
|
|
||||||
// Automaticky otevřeme modální dialog, jakmile přijdou nové (dosud nezobrazené) platby.
|
|
||||||
useEffect(() => {
|
|
||||||
const ids = (pendingQrs ?? []).map(qr => qr.id);
|
|
||||||
if (ids.length === 0) return;
|
|
||||||
const unseen = ids.filter(id => !autoShownQrIds.current.has(id));
|
|
||||||
if (unseen.length > 0) {
|
|
||||||
setModalOpen(true);
|
|
||||||
unseen.forEach(id => autoShownQrIds.current.add(id));
|
|
||||||
}
|
|
||||||
}, [qrIdsKey, pendingQrs]);
|
|
||||||
|
|
||||||
if (!pendingQrs || pendingQrs.length === 0) return null;
|
|
||||||
|
|
||||||
// Vykreslení jednoho QR kódu i s tlačítkem "Zaplatil jsem" – sdíleno sekcí i modálem.
|
|
||||||
const renderQr = (qr: PendingQr) => (
|
|
||||||
<div key={qr.id} className='qr-code mb-3'>
|
|
||||||
<p>
|
|
||||||
<strong>{formatDateString(qr.date)}</strong> — {qr.creator} ({qr.totalPrice / 100} Kč)
|
|
||||||
{qr.purpose && <><br /><span className="text-muted">{qr.purpose}</span></>}
|
|
||||||
</p>
|
|
||||||
<img src={`/api/qr?login=${login}&id=${qr.id}`} alt='QR kód' />
|
|
||||||
<div className='mt-2'>
|
|
||||||
<Button variant="success" onClick={() => setDismissQrId(qr.id)}>
|
|
||||||
Zaplatil jsem
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className='pizza-section fade-in mt-4'>
|
|
||||||
<h3>Nevyřízené platby</h3>
|
|
||||||
<p>
|
|
||||||
Máte neuhrazené platby.{' '}
|
|
||||||
<Button variant="link" className="p-0 align-baseline" onClick={() => setModalOpen(true)}>
|
|
||||||
Zobrazit QR kódy
|
|
||||||
</Button>
|
|
||||||
</p>
|
|
||||||
{pendingQrs.map(renderQr)}
|
|
||||||
</div>
|
|
||||||
<Modal show={modalOpen} onHide={() => setModalOpen(false)} centered scrollable>
|
|
||||||
<Modal.Header closeButton>
|
|
||||||
<Modal.Title>Nevyřízené platby</Modal.Title>
|
|
||||||
</Modal.Header>
|
|
||||||
<Modal.Body>
|
|
||||||
<p>Máte neuhrazené platby. Naskenujte QR kód pro zaplacení.</p>
|
|
||||||
{pendingQrs.map(renderQr)}
|
|
||||||
</Modal.Body>
|
|
||||||
<Modal.Footer>
|
|
||||||
<Button variant="secondary" onClick={() => setModalOpen(false)}>
|
|
||||||
Zavřít
|
|
||||||
</Button>
|
|
||||||
</Modal.Footer>
|
|
||||||
</Modal>
|
|
||||||
<ConfirmModal
|
|
||||||
isOpen={dismissQrId !== null}
|
|
||||||
title="Potvrzení platby"
|
|
||||||
message="Opravdu jste zaplatili? QR kód bude odstraněn."
|
|
||||||
confirmLabel="Zaplatil jsem"
|
|
||||||
confirmVariant="success"
|
|
||||||
onClose={() => setDismissQrId(null)}
|
|
||||||
onConfirm={async () => {
|
|
||||||
if (!dismissQrId) return;
|
|
||||||
const id = dismissQrId;
|
|
||||||
setDismissQrId(null);
|
|
||||||
await dismissQr({ body: { id } });
|
|
||||||
await onDismissed?.();
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -48,7 +48,7 @@ export default function PizzaOrderList({ state, orders, onDelete, creator }: Rea
|
|||||||
borderTop: '2px solid var(--luncher-border)'
|
borderTop: '2px solid var(--luncher-border)'
|
||||||
}}>
|
}}>
|
||||||
<td colSpan={4} style={{ padding: '16px 20px', border: 'none' }}>Celkem</td>
|
<td colSpan={4} style={{ padding: '16px 20px', border: 'none' }}>Celkem</td>
|
||||||
<td style={{ padding: '16px 20px', border: 'none', textAlign: 'right', color: 'var(--luncher-primary)' }}>{`${total / 100} Kč`}</td>
|
<td style={{ padding: '16px 20px', border: 'none', textAlign: 'right', color: 'var(--luncher-primary)' }}>{`${total} Kč`}</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</Table>
|
</Table>
|
||||||
|
|||||||
@@ -26,7 +26,7 @@ export default function PizzaOrderRow({ creator, order, state, onDelete, onFeeMo
|
|||||||
<td>{order.customer}</td>
|
<td>{order.customer}</td>
|
||||||
<td>{order.pizzaList!.map<React.ReactNode>(pizzaOrder =>
|
<td>{order.pizzaList!.map<React.ReactNode>(pizzaOrder =>
|
||||||
<span key={pizzaOrder.name}>
|
<span key={pizzaOrder.name}>
|
||||||
{`${pizzaOrder.name}, ${pizzaOrder.size} (${pizzaOrder.price / 100} Kč)`}
|
{`${pizzaOrder.name}, ${pizzaOrder.size} (${pizzaOrder.price} Kč)`}
|
||||||
{auth?.login === order.customer && state === PizzaDayState.CREATED &&
|
{auth?.login === order.customer && state === PizzaDayState.CREATED &&
|
||||||
<span title='Odstranit'>
|
<span title='Odstranit'>
|
||||||
<FontAwesomeIcon onClick={() => {
|
<FontAwesomeIcon onClick={() => {
|
||||||
@@ -38,10 +38,10 @@ export default function PizzaOrderRow({ creator, order, state, onDelete, onFeeMo
|
|||||||
.reduce((prev, curr, index) => [prev, <br key={`br-${index}`} />, curr])}
|
.reduce((prev, curr, index) => [prev, <br key={`br-${index}`} />, curr])}
|
||||||
</td>
|
</td>
|
||||||
<td style={{ maxWidth: "200px" }}>{order.note ?? '-'}</td>
|
<td style={{ maxWidth: "200px" }}>{order.note ?? '-'}</td>
|
||||||
<td style={{ maxWidth: "200px" }}>{order.fee?.price ? `${order.fee.price / 100} Kč${order.fee.text ? ` (${order.fee.text})` : ''}` : '-'}</td>
|
<td style={{ maxWidth: "200px" }}>{order.fee?.price ? `${order.fee.price} Kč${order.fee.text ? ` (${order.fee.text})` : ''}` : '-'}</td>
|
||||||
<td>
|
<td>
|
||||||
{order.totalPrice / 100} Kč{auth?.login === creator && state === PizzaDayState.CREATED && <span title='Nastavit příplatek'><FontAwesomeIcon onClick={() => { setIsFeeModalOpen(true) }} className='action-icon' icon={faMoneyBill1} /></span>}
|
{order.totalPrice} Kč{auth?.login === creator && state === PizzaDayState.CREATED && <span title='Nastavit příplatek'><FontAwesomeIcon onClick={() => { setIsFeeModalOpen(true) }} className='action-icon' icon={faMoneyBill1} /></span>}
|
||||||
</td>
|
</td>
|
||||||
<PizzaAdditionalFeeModal customerName={order.customer} isOpen={isFeeModalOpen} onClose={() => setIsFeeModalOpen(false)} onSave={saveFees} initialValues={{ text: order.fee?.text, price: order.fee?.price != null ? String(order.fee.price / 100) : undefined }} />
|
<PizzaAdditionalFeeModal customerName={order.customer} isOpen={isFeeModalOpen} onClose={() => setIsFeeModalOpen(false)} onSave={saveFees} initialValues={{ text: order.fee?.text, price: order.fee?.price?.toString() }} />
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
@@ -1,57 +0,0 @@
|
|||||||
.price-history {
|
|
||||||
margin: 4px 0 8px;
|
|
||||||
padding: 8px 10px;
|
|
||||||
max-height: 260px;
|
|
||||||
overflow-y: auto;
|
|
||||||
border-left: 3px solid var(--luncher-border);
|
|
||||||
font-size: 0.8rem;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
margin: 2px 0 6px;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
padding: 1px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price-tag {
|
|
||||||
display: inline-block;
|
|
||||||
min-width: 72px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price-up .price-tag { color: var(--luncher-danger); }
|
|
||||||
.price-down .price-tag { color: var(--luncher-success); }
|
|
||||||
.price-new .price-tag { color: var(--luncher-primary); }
|
|
||||||
.price-removed { color: var(--luncher-text-muted); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.price-history-entry + .price-history-entry {
|
|
||||||
margin-top: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price-history-tabs {
|
|
||||||
display: inline-flex;
|
|
||||||
gap: 2px;
|
|
||||||
padding: 2px;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: var(--luncher-bg-hover);
|
|
||||||
|
|
||||||
button {
|
|
||||||
border: none;
|
|
||||||
background: none;
|
|
||||||
border-radius: 999px;
|
|
||||||
padding: 2px 10px;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--luncher-text-secondary);
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background: var(--luncher-bg-card);
|
|
||||||
color: var(--luncher-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,112 +0,0 @@
|
|||||||
import { useEffect, useMemo, useState } from "react";
|
|
||||||
import { getStoreMenuHistory, StoreMenuProvider, StorePriceChange, StorePriceHistoryEntry } from "../../../types";
|
|
||||||
import { getHumanDateTime } from "../Utils";
|
|
||||||
import { computeSinceStart, plural, SinceStart } from "../utils/priceHistory";
|
|
||||||
import "./PriceHistory.scss";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
store: string,
|
|
||||||
provider: StoreMenuProvider,
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Popis jedné změny: zdražení/zlevnění s rozdílem, nová nebo odebraná položka. */
|
|
||||||
function ChangeRow({ change }: Readonly<{ change: StorePriceChange }>) {
|
|
||||||
const { name, before, after } = change;
|
|
||||||
if (before == null && after != null) {
|
|
||||||
return <li className="price-new"><span className="price-tag">nové</span> {name} <strong>{after} Kč</strong></li>;
|
|
||||||
}
|
|
||||||
if (after == null) {
|
|
||||||
return <li className="price-removed"><span className="price-tag">odebráno</span> <s>{name}</s>{before != null && <> ({before} Kč)</>}</li>;
|
|
||||||
}
|
|
||||||
const diff = after - (before ?? after);
|
|
||||||
const up = diff > 0;
|
|
||||||
return (
|
|
||||||
<li className={up ? 'price-up' : 'price-down'}>
|
|
||||||
<span className="price-tag">{up ? '▲' : '▼'} {up ? '+' : ''}{diff} Kč</span> {name}: {before} → <strong>{after} Kč</strong>
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function EntryRow({ entry }: Readonly<{ entry: StorePriceHistoryEntry }>) {
|
|
||||||
const when = getHumanDateTime(new Date(entry.at));
|
|
||||||
if (entry.initial) {
|
|
||||||
return <div className="price-history-entry"><small className="text-muted">{when} — první stažení ({plural(entry.itemCount ?? 0, 'položka', 'položky', 'položek')})</small></div>;
|
|
||||||
}
|
|
||||||
const ups = entry.changes.filter(c => c.before != null && c.after != null && c.after > c.before).length;
|
|
||||||
const downs = entry.changes.filter(c => c.before != null && c.after != null && c.after < c.before).length;
|
|
||||||
return (
|
|
||||||
<div className="price-history-entry">
|
|
||||||
<small className="text-muted">
|
|
||||||
{when} — {plural(entry.changes.length, 'změna', 'změny', 'změn')}{ups > 0 && `, ${ups}× zdražení`}{downs > 0 && `, ${downs}× zlevnění`}
|
|
||||||
</small>
|
|
||||||
<ul>{entry.changes.map((c, i) => <ChangeRow key={i} change={c} />)}</ul>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function SinceStartView({ summary }: Readonly<{ summary: SinceStart }>) {
|
|
||||||
const { since, changed, added, removed } = summary;
|
|
||||||
if (changed.length + added.length + removed.length === 0) {
|
|
||||||
return <small className="text-muted">Od {getHumanDateTime(new Date(since))} beze změn.</small>;
|
|
||||||
}
|
|
||||||
const ups = changed.filter(c => c.current > c.start).length;
|
|
||||||
const avgPct = changed.length
|
|
||||||
? changed.reduce((sum, c) => sum + (c.current - c.start) / c.start * 100, 0) / changed.length
|
|
||||||
: 0;
|
|
||||||
return (
|
|
||||||
<div className="price-history-entry">
|
|
||||||
<small className="text-muted">
|
|
||||||
Od {getHumanDateTime(new Date(since))}: {plural(changed.length, 'změna ceny', 'změny cen', 'změn cen')} ({ups}× zdražení, {changed.length - ups}× zlevnění)
|
|
||||||
{changed.length > 0 && `, průměrně ${avgPct > 0 ? '+' : ''}${avgPct.toFixed(1)} %`}
|
|
||||||
{added.length > 0 && `, ${plural(added.length, 'nová položka', 'nové položky', 'nových položek')}`}{removed.length > 0 && `, ${plural(removed.length, 'odebraná', 'odebrané', 'odebraných')}`}
|
|
||||||
</small>
|
|
||||||
<ul>
|
|
||||||
{changed.map(c => {
|
|
||||||
const diff = c.current - c.start;
|
|
||||||
const up = diff > 0;
|
|
||||||
return (
|
|
||||||
<li key={c.name} className={up ? 'price-up' : 'price-down'}>
|
|
||||||
<span className="price-tag">{up ? '▲' : '▼'} {up ? '+' : ''}{diff} Kč</span> {c.name}: {c.start} → <strong>{c.current} Kč</strong>
|
|
||||||
<small className="text-muted"> ({up ? '+' : ''}{(diff / c.start * 100).toFixed(0)} %)</small>
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
{added.map(a => <li key={`+${a.name}`} className="price-new"><span className="price-tag">nové</span> {a.name}{a.price != null && <> <strong>{a.price} Kč</strong></>}</li>)}
|
|
||||||
{removed.map(r => <li key={`-${r.name}`} className="price-removed"><span className="price-tag">odebráno</span> <s>{r.name}</s>{r.price != null && <> ({r.price} Kč)</>}</li>)}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Historie cen nabídky obchodu u jedné služby (verze z jednotlivých stažení, nejnovější nahoře). */
|
|
||||||
export default function PriceHistory({ store, provider }: Readonly<Props>) {
|
|
||||||
const [entries, setEntries] = useState<StorePriceHistoryEntry[]>();
|
|
||||||
const [view, setView] = useState<'versions' | 'since'>('versions');
|
|
||||||
const summary = useMemo(() => entries ? computeSinceStart(entries) : undefined, [entries]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
getStoreMenuHistory({ query: { name: store } })
|
|
||||||
.then(r => setEntries(r.data?.providers.find(p => p.provider === provider)?.entries ?? []))
|
|
||||||
.catch(() => setEntries([]));
|
|
||||||
}, [store, provider]);
|
|
||||||
|
|
||||||
if (!entries) return <small className="text-muted">Načítám historii…</small>;
|
|
||||||
if (entries.length === 0) return <small className="text-muted">Historie cen zatím není — vznikne s prvním stažením nabídky.</small>;
|
|
||||||
const hasChanges = entries.some(e => e.changes.length > 0);
|
|
||||||
return (
|
|
||||||
<div className="price-history">
|
|
||||||
{hasChanges && (
|
|
||||||
<div className="price-history-tabs">
|
|
||||||
<button type="button" className={view === 'versions' ? 'active' : ''} onClick={() => setView('versions')}>Po verzích</button>
|
|
||||||
<button type="button" className={view === 'since' ? 'active' : ''} onClick={() => setView('since')}>Od začátku</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{view === 'since' && summary
|
|
||||||
? <SinceStartView summary={summary} />
|
|
||||||
: entries.map(e => <EntryRow key={e.at} entry={e} />)}
|
|
||||||
{entries.length === 1 && entries[0].initial && (
|
|
||||||
<small className="text-muted d-block mt-1">Změny se objeví po dalším stažení (↻).</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,163 +0,0 @@
|
|||||||
.wheel-confetti {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
z-index: 2000; // nad modalem (bootstrap 1055)
|
|
||||||
pointer-events: none;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
> span {
|
|
||||||
position: absolute;
|
|
||||||
will-change: transform, opacity;
|
|
||||||
animation-fill-mode: both;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Vrh: rychle vzhůru do vrcholu (zpomalení), pak volný pád (zrychlení)
|
|
||||||
@keyframes confetti-throw {
|
|
||||||
0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.4); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
|
|
||||||
6% { opacity: 1; }
|
|
||||||
38% { transform: translate3d(var(--x1), var(--y1), 0) rotate(var(--r1)) scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
|
|
||||||
88% { opacity: 1; }
|
|
||||||
100% { transform: translate3d(var(--x2), var(--y2), 0) rotate(var(--r2)) scale(1); opacity: 0; }
|
|
||||||
}
|
|
||||||
|
|
||||||
// Déšť: plynulý pád shora s mírným houpáním
|
|
||||||
@keyframes confetti-rain {
|
|
||||||
0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; animation-timing-function: ease-in-out; }
|
|
||||||
8% { opacity: 1; }
|
|
||||||
40% { transform: translate3d(var(--x1), var(--y1), 0) rotate(var(--r1)); animation-timing-function: ease-in; }
|
|
||||||
88% { opacity: 1; }
|
|
||||||
100% { transform: translate3d(var(--x2), var(--y2), 0) rotate(var(--r2)); opacity: 0; }
|
|
||||||
}
|
|
||||||
|
|
||||||
// Samolepky Umamusume — stín pro čitelnost na libovolném pozadí
|
|
||||||
.confetti-uma {
|
|
||||||
filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.2));
|
|
||||||
}
|
|
||||||
|
|
||||||
.confetti-uma-emoji {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.confetti-uma-badge {
|
|
||||||
padding: 4px 14px;
|
|
||||||
border-radius: 999px;
|
|
||||||
border: 3px solid #fff;
|
|
||||||
color: #fff;
|
|
||||||
font-family: 'M PLUS Rounded 1c', 'Nunito', sans-serif;
|
|
||||||
font-weight: 900;
|
|
||||||
font-size: 1.15rem;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-shadow: 0 2px 0 rgb(0 0 0 / 0.2);
|
|
||||||
box-shadow: 0 4px 0 rgb(0 0 0 / 0.15);
|
|
||||||
}
|
|
||||||
|
|
||||||
.confetti-uma-img img {
|
|
||||||
width: 92px;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Portréty (bez průhlednosti) jako kulaté samolepky s barevným lemem
|
|
||||||
.confetti-uma-img.round img,
|
|
||||||
.confetti-uma-voice img.round {
|
|
||||||
width: 84px;
|
|
||||||
height: 84px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 50%;
|
|
||||||
border: 4px solid #fff;
|
|
||||||
box-shadow: 0 0 0 3px #ff6fa3, 0 4px 8px rgb(0 0 0 / 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.confetti-uma-voice img.round {
|
|
||||||
width: 96px;
|
|
||||||
height: 96px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.confetti-uma-banner {
|
|
||||||
position: absolute;
|
|
||||||
top: 38%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
padding: 12px 48px;
|
|
||||||
font-family: 'M PLUS Rounded 1c', 'Nunito', sans-serif;
|
|
||||||
font-weight: 900;
|
|
||||||
font-size: clamp(2rem, 7vw, 4rem);
|
|
||||||
color: #fff;
|
|
||||||
background: linear-gradient(90deg, #e84d86, #ff6fa3);
|
|
||||||
clip-path: polygon(24px 0, 100% 0, calc(100% - 24px) 100%, 0 100%);
|
|
||||||
text-shadow: 0 3px 0 rgb(0 0 0 / 0.2);
|
|
||||||
border-top: 5px solid #ffc531;
|
|
||||||
border-bottom: 5px solid #ffc531;
|
|
||||||
animation: uma-banner 1.8s cubic-bezier(0.2, 1.4, 0.4, 1) both;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes uma-banner {
|
|
||||||
0% { transform: translate(-150%, -50%) skewX(-12deg); opacity: 0; }
|
|
||||||
25% { transform: translate(-50%, -50%) skewX(-12deg); opacity: 1; }
|
|
||||||
75% { transform: translate(-50%, -50%) skewX(-12deg) scale(1.04); opacity: 1; }
|
|
||||||
100% { transform: translate(60%, -50%) skewX(-12deg); opacity: 0; }
|
|
||||||
}
|
|
||||||
|
|
||||||
// „Hláška" postavy při finálním výsledku
|
|
||||||
.confetti-uma-voice {
|
|
||||||
position: absolute;
|
|
||||||
left: 16px;
|
|
||||||
bottom: 16px;
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-end;
|
|
||||||
gap: 8px;
|
|
||||||
max-width: min(460px, calc(100vw - 32px));
|
|
||||||
animation: uma-voice 4.6s ease both;
|
|
||||||
|
|
||||||
img {
|
|
||||||
flex: none;
|
|
||||||
width: 110px;
|
|
||||||
height: auto;
|
|
||||||
filter: drop-shadow(0 4px 6px rgb(0 0 0 / 0.3));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.confetti-uma-bubble {
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
padding: 12px 16px;
|
|
||||||
background: #fff;
|
|
||||||
color: #1d3322;
|
|
||||||
border: 3px solid #ff6fa3;
|
|
||||||
border-radius: 18px;
|
|
||||||
box-shadow: 0 4px 0 #e84d86;
|
|
||||||
font-family: 'M PLUS Rounded 1c', 'Nunito', sans-serif;
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
font-weight: 800;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
line-height: 1.35;
|
|
||||||
}
|
|
||||||
|
|
||||||
small {
|
|
||||||
display: block;
|
|
||||||
margin-top: 4px;
|
|
||||||
color: #e84d86;
|
|
||||||
font-weight: 800;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ocásek bubliny směrem k postavě
|
|
||||||
&::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: -14px;
|
|
||||||
bottom: 14px;
|
|
||||||
border: 8px solid transparent;
|
|
||||||
border-right: 10px solid #ff6fa3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes uma-voice {
|
|
||||||
0% { opacity: 0; transform: translateY(40px) scale(0.8); }
|
|
||||||
10% { opacity: 1; transform: translateY(0) scale(1.03); }
|
|
||||||
15% { transform: translateY(0) scale(1); }
|
|
||||||
85% { opacity: 1; transform: translateY(0); }
|
|
||||||
100% { opacity: 0; transform: translateY(20px); }
|
|
||||||
}
|
|
||||||
@@ -1,178 +0,0 @@
|
|||||||
import { useEffect, useMemo, useState } from "react";
|
|
||||||
import { createPortal } from "react-dom";
|
|
||||||
import { StyleTheme } from "../context/settings";
|
|
||||||
import { UmaCharacter, loadUmaCharacters } from "../utils/umaCharacters";
|
|
||||||
import "./WheelConfetti.scss";
|
|
||||||
|
|
||||||
type WheelTheme = StyleTheme;
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
theme: WheelTheme,
|
|
||||||
/** Mění se s každým výsledkem — nová hodnota spustí novou salvu. */
|
|
||||||
burstKey: number,
|
|
||||||
/** Velká salva (finální výsledek) vs. menší (mezivýsledek). */
|
|
||||||
big?: boolean,
|
|
||||||
};
|
|
||||||
|
|
||||||
type UmaImage = { src: string, round: boolean };
|
|
||||||
|
|
||||||
const SIMPLE_COLORS = ['#16a34a', '#0ea5e9', '#f59e0b', '#8b5cf6', '#ec4899', '#14b8a6', '#ef4444'];
|
|
||||||
const UMA_EMOJI = ['🐴', '🏇', '🥕', '🏆', '🌸', '✨', '⭐', '🍙', '🎀', '🥇'];
|
|
||||||
// Hlášky z fandomu Umamusume (Umapyoi Densetsu, Teio step, hachimī, Golshi, Oguri „okawari"...)
|
|
||||||
const UMA_BADGES = ['1着!', 'Umazing!', 'Umapyoi!', 'Teio step!', 'Hachimī~', 'Golshi approves', 'Okawari!', 'Pakapaka~', 'ウマい!'];
|
|
||||||
const UMA_BADGE_COLORS = ['#ff6fa3', '#2e9a3a', '#43b8f0', '#f2a91a'];
|
|
||||||
const DURATION_MS = 6400;
|
|
||||||
|
|
||||||
const rand = (min: number, max: number) => min + Math.random() * (max - min);
|
|
||||||
const pick = <T,>(list: T[]) => list[Math.floor(Math.random() * list.length)];
|
|
||||||
|
|
||||||
type Piece = { id: number, style: React.CSSProperties, content: React.ReactNode, className: string };
|
|
||||||
|
|
||||||
type Launch = 'cannon-left' | 'cannon-right' | 'burst' | 'rain';
|
|
||||||
|
|
||||||
const LAUNCHES: Launch[] = ['cannon-left', 'cannon-left', 'cannon-right', 'cannon-right', 'burst', 'rain'];
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Výchozí pozice a dráha jednoho kousku: děla z dolních rohů střílí šikmo vzhůru,
|
|
||||||
* „výbuch" se rozletí ze středu a déšť padá opožděně shora. Kousek nejprve vyletí
|
|
||||||
* do vrcholu (--x1/--y1) a pak dopadne mimo obrazovku (--x2/--y2).
|
|
||||||
*/
|
|
||||||
function launchStyle(launch: Launch): React.CSSProperties {
|
|
||||||
let left: number, top: number, x1: number, y1: number, x2: number, y2: number, delay: number;
|
|
||||||
switch (launch) {
|
|
||||||
case 'cannon-left':
|
|
||||||
case 'cannon-right': {
|
|
||||||
const dir = launch === 'cannon-left' ? 1 : -1;
|
|
||||||
left = launch === 'cannon-left' ? rand(-3, 3) : rand(97, 103);
|
|
||||||
top = rand(88, 100);
|
|
||||||
x1 = dir * rand(12, 62);
|
|
||||||
y1 = -rand(45, 88);
|
|
||||||
x2 = x1 + dir * rand(6, 22);
|
|
||||||
y2 = rand(12, 25);
|
|
||||||
delay = rand(0, 450);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case 'burst': {
|
|
||||||
const angle = rand(0, Math.PI * 2);
|
|
||||||
const radius = rand(18, 48);
|
|
||||||
left = 50;
|
|
||||||
top = 42;
|
|
||||||
x1 = Math.cos(angle) * radius;
|
|
||||||
y1 = Math.sin(angle) * radius * 0.8 - rand(5, 15);
|
|
||||||
x2 = x1 * 1.35;
|
|
||||||
y2 = rand(70, 85);
|
|
||||||
delay = rand(0, 250);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
default: {
|
|
||||||
left = rand(0, 100);
|
|
||||||
top = -12;
|
|
||||||
x1 = rand(-8, 8);
|
|
||||||
y1 = rand(35, 55);
|
|
||||||
x2 = x1 + rand(-10, 10);
|
|
||||||
y2 = rand(115, 125);
|
|
||||||
delay = rand(400, 1800);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const spin = rand(180, 720) * (Math.random() < 0.5 ? -1 : 1);
|
|
||||||
return {
|
|
||||||
left: `${left}vw`,
|
|
||||||
top: `${top}vh`,
|
|
||||||
animationName: launch === 'rain' ? 'confetti-rain' : 'confetti-throw',
|
|
||||||
animationDelay: `${delay}ms`,
|
|
||||||
animationDuration: `${rand(2600, 3900)}ms`,
|
|
||||||
['--x1' as any]: `${x1}vw`,
|
|
||||||
['--y1' as any]: `${y1}vh`,
|
|
||||||
['--x2' as any]: `${x2}vw`,
|
|
||||||
['--y2' as any]: `${y2}vh`,
|
|
||||||
['--r1' as any]: `${spin * 0.4}deg`,
|
|
||||||
['--r2' as any]: `${spin}deg`,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function buildPieces(theme: WheelTheme, big: boolean, images: UmaImage[]): Piece[] {
|
|
||||||
if (theme === 'simple') {
|
|
||||||
const count = big ? 170 : 80;
|
|
||||||
return Array.from({ length: count }, (_, id) => ({
|
|
||||||
id,
|
|
||||||
className: 'confetti-paper',
|
|
||||||
content: null,
|
|
||||||
style: {
|
|
||||||
...launchStyle(pick(LAUNCHES)),
|
|
||||||
width: `${rand(6, 11)}px`,
|
|
||||||
height: `${rand(10, 18)}px`,
|
|
||||||
background: pick(SIMPLE_COLORS),
|
|
||||||
borderRadius: Math.random() < 0.3 ? '50%' : '2px',
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
const count = big ? 50 : 24;
|
|
||||||
return Array.from({ length: count }, (_, id) => {
|
|
||||||
const roll = Math.random();
|
|
||||||
// Samolepky se tolik netočí, ať jsou čitelné
|
|
||||||
const base: React.CSSProperties = {
|
|
||||||
...launchStyle(pick(LAUNCHES)),
|
|
||||||
['--r1' as any]: `${rand(-25, 25)}deg`,
|
|
||||||
['--r2' as any]: `${rand(-40, 40)}deg`,
|
|
||||||
};
|
|
||||||
if (images.length && roll < 0.45) {
|
|
||||||
const image = pick(images);
|
|
||||||
return { id, className: `confetti-uma confetti-uma-img${image.round ? ' round' : ''}`, style: base,
|
|
||||||
content: <img src={image.src} alt="" loading="eager" /> };
|
|
||||||
}
|
|
||||||
if (roll < 0.7) {
|
|
||||||
return { id, className: 'confetti-uma confetti-uma-badge', content: pick(UMA_BADGES),
|
|
||||||
style: { ...base, background: pick(UMA_BADGE_COLORS) } };
|
|
||||||
}
|
|
||||||
return { id, className: 'confetti-uma confetti-uma-emoji', style: { ...base, fontSize: `${rand(28, 52)}px` }, content: pick(UMA_EMOJI) };
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Salva konfet po výsledku kola štěstí, ve vzhledu podle zvoleného stylu. */
|
|
||||||
export default function WheelConfetti({ theme, burstKey, big = false }: Readonly<Props>) {
|
|
||||||
const [characters, setCharacters] = useState<UmaCharacter[]>([]);
|
|
||||||
const [active, setActive] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (theme === 'umamusume') loadUmaCharacters().then(setCharacters);
|
|
||||||
}, [theme]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!burstKey) return;
|
|
||||||
setActive(true);
|
|
||||||
const t = setTimeout(() => setActive(false), DURATION_MS + 900);
|
|
||||||
return () => clearTimeout(t);
|
|
||||||
}, [burstKey]);
|
|
||||||
|
|
||||||
const pieces = useMemo(
|
|
||||||
() => buildPieces(theme, big, characters.flatMap(c => c.images.map(src => ({ src, round: !!c.round })))),
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
[burstKey],
|
|
||||||
);
|
|
||||||
|
|
||||||
// Při finálním výsledku „promluví" náhodná postava svou hláškou
|
|
||||||
const speaker = useMemo(() => {
|
|
||||||
const withQuote = characters.filter(c => c.quote);
|
|
||||||
return theme === 'umamusume' && big && withQuote.length ? pick(withQuote) : undefined;
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [burstKey]);
|
|
||||||
|
|
||||||
if (!active || window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return null;
|
|
||||||
|
|
||||||
return createPortal(
|
|
||||||
<div className={`wheel-confetti wheel-confetti-${theme}`} key={burstKey} aria-hidden>
|
|
||||||
{theme === 'umamusume' && big && <div className="confetti-uma-banner">🏆 1着 🏆</div>}
|
|
||||||
{pieces.map(p => <span key={p.id} className={p.className} style={p.style}>{p.content}</span>)}
|
|
||||||
{speaker && (
|
|
||||||
<div className="confetti-uma-voice">
|
|
||||||
<img src={pick(speaker.images)} alt="" className={speaker.round ? 'round' : undefined} />
|
|
||||||
<div className="confetti-uma-bubble">
|
|
||||||
<p>„{speaker.quote}"</p>
|
|
||||||
<small>— {speaker.name}</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>,
|
|
||||||
document.body,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,79 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import { Modal, Button, Form } from "react-bootstrap";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
isOpen: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
onSubmit: (title: string, description: string) => Promise<void>;
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Modální dialog pro přidání nového návrhu na vylepšení. */
|
|
||||||
export default function AddSuggestionModal({ isOpen, onClose, onSubmit }: Readonly<Props>) {
|
|
||||||
const [title, setTitle] = useState("");
|
|
||||||
const [description, setDescription] = useState("");
|
|
||||||
const [submitting, setSubmitting] = useState(false);
|
|
||||||
|
|
||||||
const reset = () => {
|
|
||||||
setTitle("");
|
|
||||||
setDescription("");
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
reset();
|
|
||||||
onClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = async () => {
|
|
||||||
if (!title.trim() || !description.trim()) return;
|
|
||||||
setSubmitting(true);
|
|
||||||
try {
|
|
||||||
await onSubmit(title.trim(), description.trim());
|
|
||||||
reset();
|
|
||||||
onClose();
|
|
||||||
} finally {
|
|
||||||
setSubmitting(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal show={isOpen} onHide={handleClose} size="lg">
|
|
||||||
<Modal.Header closeButton>
|
|
||||||
<Modal.Title><h2>Nový návrh na vylepšení</h2></Modal.Title>
|
|
||||||
</Modal.Header>
|
|
||||||
<Modal.Body>
|
|
||||||
<Form.Group className="mb-3">
|
|
||||||
<Form.Label>Název</Form.Label>
|
|
||||||
<Form.Control
|
|
||||||
type="text"
|
|
||||||
placeholder="Stručný název návrhu"
|
|
||||||
value={title}
|
|
||||||
maxLength={120}
|
|
||||||
onChange={e => setTitle(e.target.value)}
|
|
||||||
onKeyDown={e => e.stopPropagation()}
|
|
||||||
autoFocus
|
|
||||||
/>
|
|
||||||
<Form.Text className="text-muted">Krátký, výstižný název navrhované úpravy.</Form.Text>
|
|
||||||
</Form.Group>
|
|
||||||
<Form.Group className="mb-3">
|
|
||||||
<Form.Label>Popis</Form.Label>
|
|
||||||
<Form.Control
|
|
||||||
as="textarea"
|
|
||||||
rows={5}
|
|
||||||
placeholder="Detailní popis navrhované úpravy, řešení apod."
|
|
||||||
value={description}
|
|
||||||
onChange={e => setDescription(e.target.value)}
|
|
||||||
onKeyDown={e => e.stopPropagation()}
|
|
||||||
/>
|
|
||||||
</Form.Group>
|
|
||||||
</Modal.Body>
|
|
||||||
<Modal.Footer>
|
|
||||||
<Button variant="secondary" onClick={handleClose}>
|
|
||||||
Storno
|
|
||||||
</Button>
|
|
||||||
<Button onClick={handleSubmit} disabled={submitting || !title.trim() || !description.trim()}>
|
|
||||||
Přidat
|
|
||||||
</Button>
|
|
||||||
</Modal.Footer>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,174 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import { Modal, Button, Form, Alert, Badge } from "react-bootstrap";
|
|
||||||
import {
|
|
||||||
OrderGroup,
|
|
||||||
simulateBoltTracking, advanceBoltTracking, setBoltTrackingState,
|
|
||||||
pollBoltTracking, stopBoltTrackingSimulation,
|
|
||||||
} from "../../../../types";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
isOpen: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
group: OrderGroup;
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Nabídka stavů pro ruční nastavení (odpovídá mapování v OrderProgress). */
|
|
||||||
const STATE_OPTIONS: { key: string; label: string; order_state: string; courier_state?: string }[] = [
|
|
||||||
{ key: 'accepted', label: 'Přijato', order_state: 'accepted' },
|
|
||||||
{ key: 'preparing', label: 'Příprava', order_state: 'preparing' },
|
|
||||||
{ key: 'waiting_delivery', label: 'Příprava (čeká na vyzvednutí)', order_state: 'waiting_delivery' },
|
|
||||||
{ key: 'pickup', label: 'Vyzvedávání', order_state: 'waiting_delivery', courier_state: 'arrived_to_provider' },
|
|
||||||
{ key: 'in_delivery', label: 'Na cestě', order_state: 'in_delivery', courier_state: 'heading_to_client' },
|
|
||||||
{ key: 'delivered', label: 'Doručeno', order_state: 'delivered' },
|
|
||||||
{ key: 'cancelled', label: 'Zrušeno', order_state: 'cancelled' },
|
|
||||||
];
|
|
||||||
|
|
||||||
/** Modální dialog pro simulaci sledování Bolt objednávky (pouze DEV). */
|
|
||||||
export default function BoltSimulationModal({ isOpen, onClose, group }: Readonly<Props>) {
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [info, setInfo] = useState<string | null>(null);
|
|
||||||
const [manualKey, setManualKey] = useState<string>('preparing');
|
|
||||||
|
|
||||||
const running = !!group.trackingCode;
|
|
||||||
|
|
||||||
/** Obecný runner — spustí akci, ošetří chybu a krátce zobrazí výsledek. */
|
|
||||||
const run = async (action: () => Promise<{ error?: unknown }>, okMsg: string) => {
|
|
||||||
setError(null);
|
|
||||||
setInfo(null);
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const response = await action();
|
|
||||||
if (response.error) {
|
|
||||||
setError((response.error as any)?.error || 'Akce simulace selhala');
|
|
||||||
} else {
|
|
||||||
setInfo(okMsg);
|
|
||||||
}
|
|
||||||
} catch (e: any) {
|
|
||||||
setError(e?.message || 'Akce simulace selhala');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleStart = () => run(
|
|
||||||
() => simulateBoltTracking({ body: { groupId: group.id } }),
|
|
||||||
'Simulace spuštěna — objednávka přijata.',
|
|
||||||
);
|
|
||||||
const handleAdvance = () => run(
|
|
||||||
() => advanceBoltTracking({ body: { groupId: group.id } }),
|
|
||||||
'Posunuto na další krok.',
|
|
||||||
);
|
|
||||||
const handleSetState = () => {
|
|
||||||
const opt = STATE_OPTIONS.find(o => o.key === manualKey);
|
|
||||||
if (!opt) return;
|
|
||||||
return run(
|
|
||||||
() => setBoltTrackingState({
|
|
||||||
body: {
|
|
||||||
groupId: group.id,
|
|
||||||
order_state: opt.order_state,
|
|
||||||
courier_state: opt.courier_state,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
`Stav nastaven na „${opt.label}".`,
|
|
||||||
);
|
|
||||||
};
|
|
||||||
const handlePoll = () => run(
|
|
||||||
() => pollBoltTracking(),
|
|
||||||
'Scheduler spuštěn (poll proběhl).',
|
|
||||||
);
|
|
||||||
const handleStop = () => run(
|
|
||||||
() => stopBoltTrackingSimulation({ body: { groupId: group.id } }),
|
|
||||||
'Simulace ukončena.',
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
setError(null);
|
|
||||||
setInfo(null);
|
|
||||||
onClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal show={isOpen} onHide={handleClose}>
|
|
||||||
<Modal.Header closeButton>
|
|
||||||
<Modal.Title><h2>Simulace sledování Bolt</h2></Modal.Title>
|
|
||||||
</Modal.Header>
|
|
||||||
<Modal.Body>
|
|
||||||
<Alert variant="warning">
|
|
||||||
<strong>DEV režim</strong> – simuluje sledování objednávky Bolt pro skupinu{' '}
|
|
||||||
<strong>{group.name}</strong> bez reálné objednávky.
|
|
||||||
</Alert>
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<Alert variant="danger" onClose={() => setError(null)} dismissible>
|
|
||||||
{error}
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
{info && (
|
|
||||||
<Alert variant="success" onClose={() => setInfo(null)} dismissible>
|
|
||||||
{info}
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<p className="mb-2">
|
|
||||||
Stav simulace:{' '}
|
|
||||||
{running
|
|
||||||
? <Badge bg="success">běží{group.trackingOrderState ? ` — ${group.trackingOrderState}` : ''}</Badge>
|
|
||||||
: <Badge bg="secondary">neběží</Badge>}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{!running ? (
|
|
||||||
<p className="text-muted">
|
|
||||||
Spuštěním se skupina přepne do stavu „Objednáno", přiřadí se simulovaný
|
|
||||||
sledovací token a provede se první poll (stav „Přijato").
|
|
||||||
</p>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<p className="text-muted">
|
|
||||||
Krokuj objednávku tlačítkem <strong>Další krok</strong> (Přijato → Příprava →
|
|
||||||
Vyzvedávání → Na cestě → Doručeno) nebo nastav konkrétní stav ručně:
|
|
||||||
</p>
|
|
||||||
<Form.Group className="mb-3 d-flex gap-2 align-items-end">
|
|
||||||
<div className="flex-grow-1">
|
|
||||||
<Form.Label>Konkrétní stav</Form.Label>
|
|
||||||
<Form.Select
|
|
||||||
value={manualKey}
|
|
||||||
onChange={e => setManualKey(e.target.value)}
|
|
||||||
>
|
|
||||||
{STATE_OPTIONS.map(o => (
|
|
||||||
<option key={o.key} value={o.key}>{o.label}</option>
|
|
||||||
))}
|
|
||||||
</Form.Select>
|
|
||||||
</div>
|
|
||||||
<Button variant="outline-primary" onClick={handleSetState} disabled={loading}>
|
|
||||||
Nastavit
|
|
||||||
</Button>
|
|
||||||
</Form.Group>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Modal.Body>
|
|
||||||
<Modal.Footer className="d-flex flex-wrap gap-2">
|
|
||||||
{!running ? (
|
|
||||||
<Button variant="primary" onClick={handleStart} disabled={loading}>
|
|
||||||
{loading ? 'Spouštím…' : 'Spustit simulaci'}
|
|
||||||
</Button>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Button variant="success" onClick={handleAdvance} disabled={loading}>
|
|
||||||
Další krok
|
|
||||||
</Button>
|
|
||||||
<Button variant="outline-secondary" onClick={handlePoll} disabled={loading}>
|
|
||||||
Aktualizovat teď
|
|
||||||
</Button>
|
|
||||||
<Button variant="outline-danger" onClick={handleStop} disabled={loading}>
|
|
||||||
Ukončit simulaci
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<Button variant="secondary" onClick={handleClose} disabled={loading}>
|
|
||||||
Zavřít
|
|
||||||
</Button>
|
|
||||||
</Modal.Footer>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,142 +0,0 @@
|
|||||||
.butterfly-mystats {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
padding: 12px;
|
|
||||||
border-radius: 12px;
|
|
||||||
background: linear-gradient(135deg, rgba(255, 203, 61, 0.16), rgba(224, 162, 0, 0.08));
|
|
||||||
border: 1px solid rgba(224, 162, 0, 0.35);
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-mystats-title {
|
|
||||||
font-weight: 700;
|
|
||||||
color: #6b5b2e;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-mystats-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
|
|
||||||
gap: 8px;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.v {
|
|
||||||
font-size: 1.3rem;
|
|
||||||
font-weight: 800;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
line-height: 1.1;
|
|
||||||
|
|
||||||
&.gold {
|
|
||||||
color: #e0a200;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.l {
|
|
||||||
font-size: 0.72rem;
|
|
||||||
color: #6c757d;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-leaderboard-heading {
|
|
||||||
font-weight: 700;
|
|
||||||
margin: 12px 0 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-achievements {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-achievement {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
padding: 6px 8px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: rgba(0, 0, 0, 0.04);
|
|
||||||
font-size: 0.78rem;
|
|
||||||
opacity: 0.55;
|
|
||||||
filter: grayscale(1);
|
|
||||||
|
|
||||||
&.unlocked {
|
|
||||||
opacity: 1;
|
|
||||||
filter: none;
|
|
||||||
background: rgba(255, 203, 61, 0.18);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ach-icon { flex: 0 0 auto; }
|
|
||||||
.ach-title {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-leaderboard {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-leaderboard-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
padding: 8px 10px;
|
|
||||||
border-radius: 10px;
|
|
||||||
background: rgba(0, 0, 0, 0.03);
|
|
||||||
|
|
||||||
&.me {
|
|
||||||
background: rgba(255, 203, 61, 0.22);
|
|
||||||
border: 1px solid rgba(224, 162, 0, 0.5);
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-leaderboard-rank {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
width: 28px;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 700;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-leaderboard-name {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
min-width: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-leaderboard-title {
|
|
||||||
font-size: 0.72rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #6b5b2e;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-leaderboard-stats {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-leaderboard-golden {
|
|
||||||
color: #e0a200;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
@@ -1,111 +0,0 @@
|
|||||||
import { useEffect, useState } from "react";
|
|
||||||
import { Modal } from "react-bootstrap";
|
|
||||||
import {
|
|
||||||
ButterflyLeaderboardEntry, ButterflyStats, ButterflyAchievement,
|
|
||||||
getButterflyLeaderboard, getButterflyAchievements,
|
|
||||||
} from "../../../../types";
|
|
||||||
import { useAuth } from "../../context/auth";
|
|
||||||
import "./ButterflyLeaderboardModal.scss";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
isOpen: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
myStats?: ButterflyStats;
|
|
||||||
};
|
|
||||||
|
|
||||||
const MEDALS = ['🥇', '🥈', '🥉'];
|
|
||||||
|
|
||||||
/** Modální dialog s osobními statistikami, achievementy a týmovým žebříčkem. */
|
|
||||||
export default function ButterflyLeaderboardModal({ isOpen, onClose, myStats }: Readonly<Props>) {
|
|
||||||
const auth = useAuth();
|
|
||||||
const [entries, setEntries] = useState<ButterflyLeaderboardEntry[]>();
|
|
||||||
const [achievements, setAchievements] = useState<ButterflyAchievement[]>();
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isOpen) return;
|
|
||||||
let cancelled = false;
|
|
||||||
setLoading(true);
|
|
||||||
Promise.all([
|
|
||||||
getButterflyLeaderboard({ query: { limit: 20 } }).then(r => r.data ?? []).catch(() => []),
|
|
||||||
getButterflyAchievements().then(r => r.data ?? []).catch(() => []),
|
|
||||||
]).then(([lb, ach]) => {
|
|
||||||
if (cancelled) return;
|
|
||||||
setEntries(lb);
|
|
||||||
setAchievements(ach);
|
|
||||||
}).finally(() => { if (!cancelled) setLoading(false); });
|
|
||||||
return () => { cancelled = true; };
|
|
||||||
}, [isOpen]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal show={isOpen} onHide={onClose} centered>
|
|
||||||
<Modal.Header closeButton>
|
|
||||||
<Modal.Title>🦋 Chytání motýlků</Modal.Title>
|
|
||||||
</Modal.Header>
|
|
||||||
<Modal.Body>
|
|
||||||
{myStats && (
|
|
||||||
<div className="butterfly-mystats">
|
|
||||||
<div className="butterfly-mystats-title">
|
|
||||||
{myStats.level}. {myStats.title}
|
|
||||||
</div>
|
|
||||||
<div className="butterfly-mystats-grid">
|
|
||||||
<div><span className="v">{myStats.caught}</span><span className="l">🦋 chyceno</span></div>
|
|
||||||
<div><span className="v gold">{myStats.goldenCaught}</span><span className="l">✨ zlatých</span></div>
|
|
||||||
<div><span className="v">{myStats.coins}</span><span className="l">🪙 mincí</span></div>
|
|
||||||
<div><span className="v">{myStats.waspsKilled}</span><span className="l">🪰 vos zabito</span></div>
|
|
||||||
<div><span className="v">{myStats.birdsScared}</span><span className="l">🦅 vyplašeno</span></div>
|
|
||||||
<div><span className="v">{myStats.thievesDefeated}</span><span className="l">🦹 zlodějů</span></div>
|
|
||||||
<div><span className="v">{myStats.caterpillarsDefeated}</span><span className="l">🐛 housenek</span></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{achievements && achievements.length > 0 && (
|
|
||||||
<>
|
|
||||||
<h6 className="butterfly-leaderboard-heading">Odznaky</h6>
|
|
||||||
<div className="butterfly-achievements">
|
|
||||||
{achievements.map(a => (
|
|
||||||
<div
|
|
||||||
key={a.id}
|
|
||||||
className={a.unlocked ? 'butterfly-achievement unlocked' : 'butterfly-achievement'}
|
|
||||||
title={a.description}
|
|
||||||
>
|
|
||||||
<span className="ach-icon">{a.unlocked ? '🏅' : '🔒'}</span>
|
|
||||||
<span className="ach-title">{a.title}</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<h6 className="butterfly-leaderboard-heading">Žebříček týmu</h6>
|
|
||||||
{loading && <p className="text-center text-muted mb-0">Načítám žebříček…</p>}
|
|
||||||
{!loading && entries && entries.length === 0 && (
|
|
||||||
<p className="text-center text-muted mb-0">Zatím nikdo nic nechytil. Buď první!</p>
|
|
||||||
)}
|
|
||||||
{!loading && entries && entries.length > 0 && (
|
|
||||||
<ol className="butterfly-leaderboard">
|
|
||||||
{entries.map((e, i) => (
|
|
||||||
<li
|
|
||||||
key={e.login}
|
|
||||||
className={e.login === auth?.login ? 'butterfly-leaderboard-row me' : 'butterfly-leaderboard-row'}
|
|
||||||
>
|
|
||||||
<span className="butterfly-leaderboard-rank">{MEDALS[i] ?? `${i + 1}.`}</span>
|
|
||||||
<span className="butterfly-leaderboard-name" title={e.title}>
|
|
||||||
{e.login}
|
|
||||||
<span className="butterfly-leaderboard-title">{e.level}. {e.title}</span>
|
|
||||||
</span>
|
|
||||||
<span className="butterfly-leaderboard-stats">
|
|
||||||
<span className="butterfly-leaderboard-caught">{e.caught} 🦋</span>
|
|
||||||
{e.goldenCaught > 0 && (
|
|
||||||
<span className="butterfly-leaderboard-golden">{e.goldenCaught} ✨</span>
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ol>
|
|
||||||
)}
|
|
||||||
</Modal.Body>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,106 +0,0 @@
|
|||||||
.shop-balance {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #e0a200;
|
|
||||||
margin-left: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shop-heading {
|
|
||||||
font-weight: 700;
|
|
||||||
margin: 14px 0 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-shop-daily {
|
|
||||||
padding: 10px 12px;
|
|
||||||
border-radius: 12px;
|
|
||||||
background: rgba(28, 126, 214, 0.12);
|
|
||||||
border: 1px solid rgba(28, 126, 214, 0.35);
|
|
||||||
margin-bottom: 12px;
|
|
||||||
|
|
||||||
.daily-title {
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.daily-bar {
|
|
||||||
height: 8px;
|
|
||||||
background: rgba(0, 0, 0, 0.1);
|
|
||||||
border-radius: 999px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.daily-bar-inner {
|
|
||||||
height: 100%;
|
|
||||||
background: linear-gradient(90deg, #4dabf7, #1c7ed6);
|
|
||||||
border-radius: 999px;
|
|
||||||
transition: width 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.daily-status {
|
|
||||||
margin-top: 5px;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
color: #495057;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-shop-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.butterfly-shop-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 10px;
|
|
||||||
padding: 10px 12px;
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
||||||
border-radius: 10px;
|
|
||||||
background: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
text-align: left;
|
|
||||||
transition: background 0.12s ease, transform 0.08s ease;
|
|
||||||
|
|
||||||
&:hover:not(:disabled) {
|
|
||||||
background: #f1f3f5;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active:not(:disabled) {
|
|
||||||
transform: scale(0.99);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shop-item-label {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shop-item-lvl {
|
|
||||||
display: inline;
|
|
||||||
color: #1c7ed6;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shop-item-desc {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 0.74rem;
|
|
||||||
color: #868e96;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shop-item-cost {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
font-weight: 800;
|
|
||||||
font-variant-numeric: tabular-nums;
|
|
||||||
color: #e0a200;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,113 +0,0 @@
|
|||||||
import { Modal } from "react-bootstrap";
|
|
||||||
import { ButterflyStats } from "../../../../types";
|
|
||||||
import "./ButterflyShopModal.scss";
|
|
||||||
|
|
||||||
type UpgradeId = 'net' | 'scarecrow' | 'reinforced';
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
isOpen: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
stats?: ButterflyStats;
|
|
||||||
onBuyPremium: () => void;
|
|
||||||
onWaspSpray: () => void;
|
|
||||||
onRepellent: () => void;
|
|
||||||
onBuyInsurance: () => void;
|
|
||||||
onBuyUpgrade: (item: UpgradeId) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
// Zrcadlí serverové hodnoty (server/src/butterflies.ts)
|
|
||||||
const PREMIUM_BUY_COST = 40;
|
|
||||||
const WASP_SPRAY_COST = 25;
|
|
||||||
const REPELLENT_COST = 70;
|
|
||||||
const INSURANCE_COST = 50;
|
|
||||||
const UPGRADE_BASE: Record<UpgradeId, number> = { net: 100, scarecrow: 120, reinforced: 150 };
|
|
||||||
const UPGRADE_MAX: Record<UpgradeId, number> = { net: 5, scarecrow: 4, reinforced: 3 };
|
|
||||||
const UPGRADE_META: Record<UpgradeId, { icon: string; title: string; desc: string }> = {
|
|
||||||
net: { icon: '🥅', title: 'Větší síťka', desc: 'Zvětší dosah chytání' },
|
|
||||||
scarecrow: { icon: '🐦⬛', title: 'Strašák', desc: 'Ptáci přibývají pomaleji' },
|
|
||||||
reinforced: { icon: '🧵', title: 'Zpevněná síťka', desc: 'Rychlejší samo-zašití' },
|
|
||||||
};
|
|
||||||
|
|
||||||
function upgradeCost(item: UpgradeId, level: number): number {
|
|
||||||
return UPGRADE_BASE[item] * Math.pow(2, level);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Obchod: spotřební pomůcky a trvalá vylepšení za mince. */
|
|
||||||
export default function ButterflyShopModal({
|
|
||||||
isOpen, onClose, stats, onBuyPremium, onWaspSpray, onRepellent, onBuyInsurance, onBuyUpgrade,
|
|
||||||
}: Readonly<Props>) {
|
|
||||||
const coins = stats?.coins ?? 0;
|
|
||||||
const insuranceActive = !!stats && stats.insuranceUntil > Date.now();
|
|
||||||
|
|
||||||
const consumable = (label: string, cost: number, onBuy: () => void, extra?: string) => (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="butterfly-shop-item"
|
|
||||||
onClick={onBuy}
|
|
||||||
disabled={coins < cost}
|
|
||||||
>
|
|
||||||
<span className="shop-item-label">{label}{extra ? ` ${extra}` : ''}</span>
|
|
||||||
<span className="shop-item-cost">{cost} 🪙</span>
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal show={isOpen} onHide={onClose} centered>
|
|
||||||
<Modal.Header closeButton>
|
|
||||||
<Modal.Title>🛒 Obchod <span className="shop-balance">{coins} 🪙</span></Modal.Title>
|
|
||||||
</Modal.Header>
|
|
||||||
<Modal.Body>
|
|
||||||
{stats?.daily && (
|
|
||||||
<div className="butterfly-shop-daily">
|
|
||||||
<div className="daily-title">🎯 Denní úkol: {stats.daily.title}</div>
|
|
||||||
<div className="daily-bar">
|
|
||||||
<div
|
|
||||||
className="daily-bar-inner"
|
|
||||||
style={{ width: `${Math.min(100, Math.round((stats.daily.progress / stats.daily.target) * 100))}%` }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="daily-status">
|
|
||||||
{stats.daily.done
|
|
||||||
? `✅ Splněno (+${stats.daily.reward} 🪙)`
|
|
||||||
: `${stats.daily.progress}/${stats.daily.target} · odměna ${stats.daily.reward} 🪙`}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<h6 className="shop-heading">Pomůcky</h6>
|
|
||||||
<div className="butterfly-shop-list">
|
|
||||||
{consumable('🪄 Prémiová síťka (60 s)', PREMIUM_BUY_COST, onBuyPremium)}
|
|
||||||
{consumable('💨 Vosí sprej (vyhubí vosy)', WASP_SPRAY_COST, onWaspSpray)}
|
|
||||||
{consumable('🦅🚫 Plašič ptáků', REPELLENT_COST, onRepellent)}
|
|
||||||
{consumable('🛡️ Pojistka proti zloději', INSURANCE_COST, onBuyInsurance, insuranceActive ? '(aktivní)' : '')}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h6 className="shop-heading">Trvalá vylepšení</h6>
|
|
||||||
<div className="butterfly-shop-list">
|
|
||||||
{(Object.keys(UPGRADE_META) as UpgradeId[]).map(item => {
|
|
||||||
const level = stats?.upgrades?.[item] ?? 0;
|
|
||||||
const max = UPGRADE_MAX[item];
|
|
||||||
const maxed = level >= max;
|
|
||||||
const cost = upgradeCost(item, level);
|
|
||||||
const meta = UPGRADE_META[item];
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
key={item}
|
|
||||||
type="button"
|
|
||||||
className="butterfly-shop-item upgrade"
|
|
||||||
onClick={() => onBuyUpgrade(item)}
|
|
||||||
disabled={maxed || coins < cost}
|
|
||||||
>
|
|
||||||
<span className="shop-item-label">
|
|
||||||
{meta.icon} {meta.title} <span className="shop-item-lvl">{level}/{max}</span>
|
|
||||||
<span className="shop-item-desc">{meta.desc}</span>
|
|
||||||
</span>
|
|
||||||
<span className="shop-item-cost">{maxed ? 'MAX' : `${cost} 🪙`}</span>
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</Modal.Body>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { Modal, Button, Form, Alert } from "react-bootstrap";
|
import { Modal, Button, Alert } from "react-bootstrap";
|
||||||
import { clearMockData, DayIndex } from "../../../../types";
|
import { clearMockData, DayIndex } from "../../../../types";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
@@ -10,28 +10,20 @@ type Props = {
|
|||||||
|
|
||||||
const DAY_NAMES = ['Pondělí', 'Úterý', 'Středa', 'Čtvrtek', 'Pátek'];
|
const DAY_NAMES = ['Pondělí', 'Úterý', 'Středa', 'Čtvrtek', 'Pátek'];
|
||||||
|
|
||||||
/** Hodnota v selectu dne pro smazání dat celého týdne. */
|
|
||||||
const WHOLE_WEEK = 'week';
|
|
||||||
|
|
||||||
/** Modální dialog pro smazání mock dat (pouze DEV). */
|
/** Modální dialog pro smazání mock dat (pouze DEV). */
|
||||||
export default function ClearMockDataModal({ isOpen, onClose, currentDayIndex }: Readonly<Props>) {
|
export default function ClearMockDataModal({ isOpen, onClose, currentDayIndex }: Readonly<Props>) {
|
||||||
const [daySelection, setDaySelection] = useState<string>(currentDayIndex !== undefined ? String(currentDayIndex) : '');
|
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
const [success, setSuccess] = useState(false);
|
const [success, setSuccess] = useState(false);
|
||||||
|
|
||||||
const wholeWeek = daySelection === WHOLE_WEEK;
|
|
||||||
|
|
||||||
const handleClear = async () => {
|
const handleClear = async () => {
|
||||||
setError(null);
|
setError(null);
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const body: any = {};
|
const body: any = {};
|
||||||
if (wholeWeek) {
|
if (currentDayIndex !== undefined) {
|
||||||
body.wholeWeek = true;
|
body.dayIndex = currentDayIndex as DayIndex;
|
||||||
} else if (daySelection !== '') {
|
|
||||||
body.dayIndex = parseInt(daySelection, 10) as DayIndex;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const response = await clearMockData({ body });
|
const response = await clearMockData({ body });
|
||||||
@@ -57,20 +49,12 @@ export default function ClearMockDataModal({ isOpen, onClose, currentDayIndex }:
|
|||||||
onClose();
|
onClose();
|
||||||
};
|
};
|
||||||
|
|
||||||
// Popis rozsahu mazání pro potvrzovací otázku
|
const dayName = currentDayIndex !== undefined ? DAY_NAMES[currentDayIndex] : 'aktuální den';
|
||||||
let scopeLabel: string;
|
|
||||||
if (wholeWeek) {
|
|
||||||
scopeLabel = 'celý týden (pondělí až pátek)';
|
|
||||||
} else if (daySelection !== '') {
|
|
||||||
scopeLabel = DAY_NAMES[parseInt(daySelection, 10)];
|
|
||||||
} else {
|
|
||||||
scopeLabel = 'aktuální den';
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal show={isOpen} onHide={handleClose}>
|
<Modal show={isOpen} onHide={handleClose}>
|
||||||
<Modal.Header closeButton>
|
<Modal.Header closeButton>
|
||||||
<Modal.Title><h2>Smazat mock data</h2></Modal.Title>
|
<Modal.Title><h2>Smazat data</h2></Modal.Title>
|
||||||
</Modal.Header>
|
</Modal.Header>
|
||||||
<Modal.Body>
|
<Modal.Body>
|
||||||
{success ? (
|
{success ? (
|
||||||
@@ -89,22 +73,8 @@ export default function ClearMockDataModal({ isOpen, onClose, currentDayIndex }:
|
|||||||
</Alert>
|
</Alert>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<Form.Group className="mb-3">
|
|
||||||
<Form.Label>Den</Form.Label>
|
|
||||||
<Form.Select
|
|
||||||
value={daySelection}
|
|
||||||
onChange={e => setDaySelection(e.target.value)}
|
|
||||||
>
|
|
||||||
<option value="">Aktuální den</option>
|
|
||||||
{DAY_NAMES.map((name, index) => (
|
|
||||||
<option key={index} value={index}>{name}</option>
|
|
||||||
))}
|
|
||||||
<option value={WHOLE_WEEK}>Celý týden</option>
|
|
||||||
</Form.Select>
|
|
||||||
</Form.Group>
|
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Opravdu chcete smazat všechny volby stravování pro <strong>{scopeLabel}</strong>?
|
Opravdu chcete smazat všechny volby stravování pro <strong>{dayName}</strong>?
|
||||||
</p>
|
</p>
|
||||||
<p className="text-muted">
|
<p className="text-muted">
|
||||||
Tato akce je nevratná.
|
Tato akce je nevratná.
|
||||||
|
|||||||
@@ -1,26 +0,0 @@
|
|||||||
import { Modal, Button } from "react-bootstrap";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
isOpen: boolean;
|
|
||||||
title: string;
|
|
||||||
message: string;
|
|
||||||
confirmLabel?: string;
|
|
||||||
confirmVariant?: string;
|
|
||||||
onConfirm: () => void;
|
|
||||||
onClose: () => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function ConfirmModal({ isOpen, title, message, confirmLabel = "Potvrdit", confirmVariant = "primary", onConfirm, onClose }: Readonly<Props>) {
|
|
||||||
return (
|
|
||||||
<Modal show={isOpen} onHide={onClose}>
|
|
||||||
<Modal.Header closeButton>
|
|
||||||
<Modal.Title>{title}</Modal.Title>
|
|
||||||
</Modal.Header>
|
|
||||||
<Modal.Body>{message}</Modal.Body>
|
|
||||||
<Modal.Footer>
|
|
||||||
<Button variant="secondary" onClick={onClose}>Zrušit</Button>
|
|
||||||
<Button variant={confirmVariant} onClick={onConfirm}>{confirmLabel}</Button>
|
|
||||||
</Modal.Footer>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,193 +0,0 @@
|
|||||||
import { useState, useEffect } from "react";
|
|
||||||
import { Modal, Button, Form, Table, Alert } from "react-bootstrap";
|
|
||||||
import { updateGroupFees, OrderGroup, OrderGroupMember } from "../../../../types";
|
|
||||||
import { computeFeeShare, computeMemberTotal, countActiveMembers, isActiveMember } from "../../utils/groupFees";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
isOpen: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
group: OrderGroup;
|
|
||||||
onSaved: (data: any) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
function parseHal(s: string): number {
|
|
||||||
const n = parseFloat(s.replace(',', '.'));
|
|
||||||
return isNaN(n) || n < 0 ? 0 : Math.round(n * 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
function parsePercent(s: string): number {
|
|
||||||
const n = parseFloat(s.replace(',', '.'));
|
|
||||||
return isNaN(n) || n < 0 ? 0 : Math.round(n);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function EditGroupFeesModal({ isOpen, onClose, group, onSaved }: Readonly<Props>) {
|
|
||||||
const [fees, setFees] = useState('');
|
|
||||||
const [shipping, setShipping] = useState('');
|
|
||||||
const [tip, setTip] = useState('');
|
|
||||||
const [discountType, setDiscountType] = useState<'percent' | 'fixed'>('percent');
|
|
||||||
const [discountValue, setDiscountValue] = useState('');
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isOpen) return;
|
|
||||||
setFees(group.fees ? String(group.fees / 100) : '');
|
|
||||||
setShipping(group.shipping ? String(group.shipping / 100) : '');
|
|
||||||
setTip(group.tip ? String(group.tip / 100) : '');
|
|
||||||
setDiscountType((group.discountType as 'percent' | 'fixed') ?? 'percent');
|
|
||||||
setDiscountValue(group.discountValue
|
|
||||||
? ((group.discountType as string) === 'fixed' ? String(group.discountValue / 100) : String(group.discountValue))
|
|
||||||
: '');
|
|
||||||
setError(null);
|
|
||||||
}, [isOpen, group]);
|
|
||||||
|
|
||||||
const memberEntries = Object.entries(group.members) as [string, OrderGroupMember][];
|
|
||||||
// Poplatky se dělí jen mezi aktivní strávníky (kdo si reálně něco objednal).
|
|
||||||
const activeCount = countActiveMembers(group.members);
|
|
||||||
|
|
||||||
const feesNum = parseHal(fees);
|
|
||||||
const shippingNum = parseHal(shipping);
|
|
||||||
const tipNum = parseHal(tip);
|
|
||||||
const discountNum = discountType === 'percent' ? parsePercent(discountValue) : parseHal(discountValue);
|
|
||||||
const totalFees = feesNum + shippingNum + tipNum;
|
|
||||||
const feeShare = computeFeeShare(totalFees, activeCount);
|
|
||||||
const feeParams = { totalFees, discountType, discountValue: discountNum };
|
|
||||||
|
|
||||||
const handleSave = async () => {
|
|
||||||
setError(null);
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const res = await updateGroupFees({
|
|
||||||
body: {
|
|
||||||
id: group.id,
|
|
||||||
fees: feesNum,
|
|
||||||
shipping: shippingNum,
|
|
||||||
tip: tipNum,
|
|
||||||
discountType: discountNum > 0 ? discountType : undefined,
|
|
||||||
discountValue: discountNum > 0 ? discountNum : undefined,
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (res.error) {
|
|
||||||
setError((res.error as any).error || 'Nastala chyba');
|
|
||||||
} else {
|
|
||||||
onSaved(res.data);
|
|
||||||
onClose();
|
|
||||||
}
|
|
||||||
} catch (e: any) {
|
|
||||||
setError(e.message || 'Nastala chyba');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal show={isOpen} onHide={onClose} size="lg">
|
|
||||||
<Modal.Header closeButton>
|
|
||||||
<Modal.Title><h2>Poplatky skupiny — {group.name}</h2></Modal.Title>
|
|
||||||
</Modal.Header>
|
|
||||||
<Modal.Body>
|
|
||||||
{error && (
|
|
||||||
<Alert variant="danger" onClose={() => setError(null)} dismissible>{error}</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="d-flex gap-3 flex-wrap mb-3">
|
|
||||||
<Form.Group>
|
|
||||||
<Form.Label>Poplatky (Kč)</Form.Label>
|
|
||||||
<Form.Control
|
|
||||||
type="number" min={0} step={0.01}
|
|
||||||
value={fees} onChange={e => setFees(e.target.value)}
|
|
||||||
placeholder="0" style={{ width: 110 }}
|
|
||||||
onKeyDown={e => e.stopPropagation()}
|
|
||||||
/>
|
|
||||||
</Form.Group>
|
|
||||||
<Form.Group>
|
|
||||||
<Form.Label>Doprava (Kč)</Form.Label>
|
|
||||||
<Form.Control
|
|
||||||
type="number" min={0} step={0.01}
|
|
||||||
value={shipping} onChange={e => setShipping(e.target.value)}
|
|
||||||
placeholder="0" style={{ width: 110 }}
|
|
||||||
onKeyDown={e => e.stopPropagation()}
|
|
||||||
/>
|
|
||||||
</Form.Group>
|
|
||||||
<Form.Group>
|
|
||||||
<Form.Label>Spropitné (Kč)</Form.Label>
|
|
||||||
<Form.Control
|
|
||||||
type="number" min={0} step={0.01}
|
|
||||||
value={tip} onChange={e => setTip(e.target.value)}
|
|
||||||
placeholder="0" style={{ width: 110 }}
|
|
||||||
onKeyDown={e => e.stopPropagation()}
|
|
||||||
/>
|
|
||||||
</Form.Group>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="d-flex gap-3 align-items-end flex-wrap mb-3">
|
|
||||||
<Form.Group>
|
|
||||||
<Form.Label>Sleva</Form.Label>
|
|
||||||
<div className="d-flex gap-2 align-items-center">
|
|
||||||
<Form.Select
|
|
||||||
value={discountType}
|
|
||||||
onChange={e => setDiscountType(e.target.value as 'percent' | 'fixed')}
|
|
||||||
style={{ width: 160 }}
|
|
||||||
>
|
|
||||||
<option value="percent">Procentuální (%)</option>
|
|
||||||
<option value="fixed">Pevná částka (Kč)</option>
|
|
||||||
</Form.Select>
|
|
||||||
<Form.Control
|
|
||||||
type="number" min={0} step={discountType === 'percent' ? 1 : 0.01}
|
|
||||||
value={discountValue} onChange={e => setDiscountValue(e.target.value)}
|
|
||||||
placeholder="0" style={{ width: 100 }}
|
|
||||||
onKeyDown={e => e.stopPropagation()}
|
|
||||||
/>
|
|
||||||
<span className="text-muted">{discountType === 'percent' ? '%' : 'Kč'}</span>
|
|
||||||
</div>
|
|
||||||
</Form.Group>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
<h6>Náhled celkových částek ({activeCount} {activeCount === 1 ? 'strávník' : 'strávníků'} s objednávkou, {feeShare > 0 ? `poplatek ${feeShare / 100} Kč/os.` : 'bez poplatku'})</h6>
|
|
||||||
<Table size="sm" bordered>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Člen</th>
|
|
||||||
<th className="text-end">Základ</th>
|
|
||||||
<th className="text-end">Příplatek</th>
|
|
||||||
<th className="text-end">Poplatek</th>
|
|
||||||
<th className="text-end">Sleva</th>
|
|
||||||
<th className="text-end fw-bold">Celkem</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{memberEntries.map(([login, member]) => {
|
|
||||||
const base = member.amount ?? 0;
|
|
||||||
const surcharge = member.surchargeAmount ?? 0;
|
|
||||||
const active = isActiveMember(member);
|
|
||||||
const total = computeMemberTotal(member, feeParams, feeShare, activeCount);
|
|
||||||
// Sleva i poplatek se týkají jen aktivních strávníků.
|
|
||||||
const discount = active && discountNum > 0
|
|
||||||
? (discountType === 'percent'
|
|
||||||
? Math.round((base + surcharge) * discountNum / 100)
|
|
||||||
: Math.round(discountNum / activeCount))
|
|
||||||
: 0;
|
|
||||||
return (
|
|
||||||
<tr key={login} className={active ? '' : 'text-muted'}>
|
|
||||||
<td><strong>{login}</strong>{!active && <small className="ms-1">(jen objednává)</small>}</td>
|
|
||||||
<td className="text-end">{base > 0 ? `${base / 100} Kč` : '—'}</td>
|
|
||||||
<td className="text-end">{surcharge > 0 ? `${surcharge / 100} Kč` : '—'}</td>
|
|
||||||
<td className="text-end">{active && feeShare > 0 ? `${feeShare / 100} Kč` : '—'}</td>
|
|
||||||
<td className="text-end text-danger">{discount > 0 ? `-${discount / 100} Kč` : '—'}</td>
|
|
||||||
<td className="text-end fw-bold">{total > 0 ? `${total / 100} Kč` : '—'}</td>
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</tbody>
|
|
||||||
</Table>
|
|
||||||
</Modal.Body>
|
|
||||||
<Modal.Footer>
|
|
||||||
<Button variant="secondary" onClick={onClose} disabled={loading}>Storno</Button>
|
|
||||||
<Button variant="primary" onClick={handleSave} disabled={loading}>
|
|
||||||
{loading ? 'Ukládám...' : 'Uložit'}
|
|
||||||
</Button>
|
|
||||||
</Modal.Footer>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
import { Modal, Button, Form } from "react-bootstrap"
|
||||||
|
import { FeatureRequest } from "../../../../types";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
isOpen: boolean,
|
||||||
|
onClose: () => void,
|
||||||
|
onChange: (option: FeatureRequest, active: boolean) => void,
|
||||||
|
initialValues?: FeatureRequest[],
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Modální dialog pro hlasování o nových funkcích. */
|
||||||
|
export default function FeaturesVotingModal({ isOpen, onClose, onChange, initialValues }: Readonly<Props>) {
|
||||||
|
|
||||||
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
onChange(e.currentTarget.value as FeatureRequest, e.currentTarget.checked);
|
||||||
|
}
|
||||||
|
|
||||||
|
return <Modal show={isOpen} onHide={onClose} size="lg">
|
||||||
|
<Modal.Header closeButton>
|
||||||
|
<Modal.Title>
|
||||||
|
Hlasujte pro nové funkce
|
||||||
|
<p style={{ fontSize: '12px' }}>Je možno vybrat maximálně 4 možnosti</p>
|
||||||
|
</Modal.Title>
|
||||||
|
</Modal.Header>
|
||||||
|
<Modal.Body>
|
||||||
|
{(Object.keys(FeatureRequest) as Array<keyof typeof FeatureRequest>).map(key => {
|
||||||
|
return <Form.Check
|
||||||
|
key={key}
|
||||||
|
type='checkbox'
|
||||||
|
id={key}
|
||||||
|
label={FeatureRequest[key]}
|
||||||
|
onChange={handleChange}
|
||||||
|
value={key}
|
||||||
|
defaultChecked={initialValues?.includes(key as FeatureRequest)}
|
||||||
|
/>
|
||||||
|
})}
|
||||||
|
<p className="mt-3" style={{ fontSize: '12px' }}>Něco jiného? Dejte vědět.</p>
|
||||||
|
</Modal.Body>
|
||||||
|
<Modal.Footer>
|
||||||
|
<Button variant="primary" onClick={onClose}>
|
||||||
|
Zavřít
|
||||||
|
</Button>
|
||||||
|
</Modal.Footer>
|
||||||
|
</Modal>
|
||||||
|
}
|
||||||
@@ -10,18 +10,13 @@ type Props = {
|
|||||||
|
|
||||||
const DAY_NAMES = ['Pondělí', 'Úterý', 'Středa', 'Čtvrtek', 'Pátek'];
|
const DAY_NAMES = ['Pondělí', 'Úterý', 'Středa', 'Čtvrtek', 'Pátek'];
|
||||||
|
|
||||||
/** Hodnota v selectu dne pro generování napříč celým týdnem. */
|
|
||||||
const WHOLE_WEEK = 'week';
|
|
||||||
|
|
||||||
/** Modální dialog pro generování mock dat (pouze DEV). */
|
/** Modální dialog pro generování mock dat (pouze DEV). */
|
||||||
export default function GenerateMockDataModal({ isOpen, onClose, currentDayIndex }: Readonly<Props>) {
|
export default function GenerateMockDataModal({ isOpen, onClose, currentDayIndex }: Readonly<Props>) {
|
||||||
const [daySelection, setDaySelection] = useState<string>(currentDayIndex !== undefined ? String(currentDayIndex) : '');
|
const [dayIndex, setDayIndex] = useState<number | undefined>(currentDayIndex);
|
||||||
const [count, setCount] = useState<string>('');
|
const [count, setCount] = useState<string>('');
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
const [success, setSuccess] = useState<string | null>(null);
|
const [success, setSuccess] = useState(false);
|
||||||
|
|
||||||
const wholeWeek = daySelection === WHOLE_WEEK;
|
|
||||||
|
|
||||||
const handleGenerate = async () => {
|
const handleGenerate = async () => {
|
||||||
setError(null);
|
setError(null);
|
||||||
@@ -29,10 +24,8 @@ export default function GenerateMockDataModal({ isOpen, onClose, currentDayIndex
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
const body: any = {};
|
const body: any = {};
|
||||||
if (wholeWeek) {
|
if (dayIndex !== undefined) {
|
||||||
body.wholeWeek = true;
|
body.dayIndex = dayIndex as DayIndex;
|
||||||
} else if (daySelection !== '') {
|
|
||||||
body.dayIndex = parseInt(daySelection, 10) as DayIndex;
|
|
||||||
}
|
}
|
||||||
if (count && count.trim() !== '') {
|
if (count && count.trim() !== '') {
|
||||||
const countNum = parseInt(count, 10);
|
const countNum = parseInt(count, 10);
|
||||||
@@ -48,13 +41,10 @@ export default function GenerateMockDataModal({ isOpen, onClose, currentDayIndex
|
|||||||
if (response.error) {
|
if (response.error) {
|
||||||
setError((response.error as any).error || 'Nastala chyba při generování dat');
|
setError((response.error as any).error || 'Nastala chyba při generování dat');
|
||||||
} else {
|
} else {
|
||||||
const total = (response.data as any)?.count;
|
setSuccess(true);
|
||||||
setSuccess(wholeWeek
|
|
||||||
? `Mock data byla vygenerována pro celý týden (celkem ${total} záznamů).`
|
|
||||||
: 'Mock data byla úspěšně vygenerována!');
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
onClose();
|
onClose();
|
||||||
setSuccess(null);
|
setSuccess(false);
|
||||||
setCount('');
|
setCount('');
|
||||||
}, 1500);
|
}, 1500);
|
||||||
}
|
}
|
||||||
@@ -67,7 +57,7 @@ export default function GenerateMockDataModal({ isOpen, onClose, currentDayIndex
|
|||||||
|
|
||||||
const handleClose = () => {
|
const handleClose = () => {
|
||||||
setError(null);
|
setError(null);
|
||||||
setSuccess(null);
|
setSuccess(false);
|
||||||
setCount('');
|
setCount('');
|
||||||
onClose();
|
onClose();
|
||||||
};
|
};
|
||||||
@@ -80,7 +70,7 @@ export default function GenerateMockDataModal({ isOpen, onClose, currentDayIndex
|
|||||||
<Modal.Body>
|
<Modal.Body>
|
||||||
{success ? (
|
{success ? (
|
||||||
<Alert variant="success">
|
<Alert variant="success">
|
||||||
{success}
|
Mock data byla úspěšně vygenerována!
|
||||||
</Alert>
|
</Alert>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
@@ -97,14 +87,13 @@ export default function GenerateMockDataModal({ isOpen, onClose, currentDayIndex
|
|||||||
<Form.Group className="mb-3">
|
<Form.Group className="mb-3">
|
||||||
<Form.Label>Den</Form.Label>
|
<Form.Label>Den</Form.Label>
|
||||||
<Form.Select
|
<Form.Select
|
||||||
value={daySelection}
|
value={dayIndex ?? ''}
|
||||||
onChange={e => setDaySelection(e.target.value)}
|
onChange={e => setDayIndex(e.target.value === '' ? undefined : parseInt(e.target.value, 10))}
|
||||||
>
|
>
|
||||||
<option value="">Aktuální den</option>
|
<option value="">Aktuální den</option>
|
||||||
{DAY_NAMES.map((name, index) => (
|
{DAY_NAMES.map((name, index) => (
|
||||||
<option key={index} value={index}>{name}</option>
|
<option key={index} value={index}>{name}</option>
|
||||||
))}
|
))}
|
||||||
<option value={WHOLE_WEEK}>Celý týden</option>
|
|
||||||
</Form.Select>
|
</Form.Select>
|
||||||
<Form.Text className="text-muted">
|
<Form.Text className="text-muted">
|
||||||
Pokud není vybráno, použije se aktuální den.
|
Pokud není vybráno, použije se aktuální den.
|
||||||
@@ -123,9 +112,7 @@ export default function GenerateMockDataModal({ isOpen, onClose, currentDayIndex
|
|||||||
onKeyDown={e => e.stopPropagation()}
|
onKeyDown={e => e.stopPropagation()}
|
||||||
/>
|
/>
|
||||||
<Form.Text className="text-muted">
|
<Form.Text className="text-muted">
|
||||||
{wholeWeek
|
Pokud není zadáno, vybere se náhodný počet 5-20.
|
||||||
? 'Zadaný počet se vygeneruje pro každý den týdne. Pokud není zadáno, vybere se pro každý den náhodný počet 5-20.'
|
|
||||||
: 'Pokud není zadáno, vybere se náhodný počet 5-20.'}
|
|
||||||
</Form.Text>
|
</Form.Text>
|
||||||
</Form.Group>
|
</Form.Group>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -1,175 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import { Modal, Button, Form, Alert } from "react-bootstrap";
|
|
||||||
import { generateMockOrders } from "../../../../types";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
isOpen: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
/** Příznak, zda je pro dnešní den založena alespoň jedna skupina objednávky. */
|
|
||||||
hasGroups: boolean;
|
|
||||||
/** Příznak, zda je nadefinován alespoň jeden obchod (bez něj nelze generovat). */
|
|
||||||
hasStores: boolean;
|
|
||||||
};
|
|
||||||
|
|
||||||
const DEFAULT_COUNT = '3';
|
|
||||||
const DEFAULT_MIN_AMOUNT = '100';
|
|
||||||
const DEFAULT_MAX_AMOUNT = '1000';
|
|
||||||
|
|
||||||
/** Vybere český tvar slova podle počtu (1 osoba / 2 osoby / 5 osob). */
|
|
||||||
function plural(count: number, one: string, few: string, many: string): string {
|
|
||||||
if (count === 1) return one;
|
|
||||||
if (count >= 2 && count <= 4) return few;
|
|
||||||
return many;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Modální dialog pro generování mock dat sekce Objednání (pouze DEV). */
|
|
||||||
export default function GenerateMockOrdersModal({ isOpen, onClose, hasGroups, hasStores }: Readonly<Props>) {
|
|
||||||
const [count, setCount] = useState<string>(DEFAULT_COUNT);
|
|
||||||
const [minAmount, setMinAmount] = useState<string>(DEFAULT_MIN_AMOUNT);
|
|
||||||
const [maxAmount, setMaxAmount] = useState<string>(DEFAULT_MAX_AMOUNT);
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [success, setSuccess] = useState<string | null>(null);
|
|
||||||
|
|
||||||
const handleGenerate = async () => {
|
|
||||||
setError(null);
|
|
||||||
|
|
||||||
const countNum = parseInt(count, 10);
|
|
||||||
if (isNaN(countNum) || countNum < 1 || countNum > 50) {
|
|
||||||
setError('Počet osob musí být číslo mezi 1 a 50');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const minNum = parseInt(minAmount, 10);
|
|
||||||
const maxNum = parseInt(maxAmount, 10);
|
|
||||||
if (isNaN(minNum) || isNaN(maxNum) || minNum < 0 || maxNum < minNum) {
|
|
||||||
setError('Zadejte platný rozsah částek (od ≤ do)');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const response = await generateMockOrders({
|
|
||||||
body: { count: countNum, minAmount: minNum, maxAmount: maxNum },
|
|
||||||
});
|
|
||||||
if (response.error) {
|
|
||||||
setError((response.error as any).error || 'Nastala chyba při generování dat');
|
|
||||||
} else {
|
|
||||||
const groups = response.data?.groups ?? [];
|
|
||||||
const total = response.data?.count ?? 0;
|
|
||||||
const created = groups.find(g => g.created);
|
|
||||||
setSuccess(
|
|
||||||
`Doplněno: ${total} ${plural(total, 'osoba', 'osoby', 'osob')}`
|
|
||||||
+ ` / ${groups.length} ${plural(groups.length, 'skupina', 'skupiny', 'skupin')}`
|
|
||||||
+ (created ? ` (skupina „${created.name}“ byla nově založena).` : '.')
|
|
||||||
);
|
|
||||||
setTimeout(() => {
|
|
||||||
onClose();
|
|
||||||
setSuccess(null);
|
|
||||||
}, 2000);
|
|
||||||
}
|
|
||||||
} catch (e: any) {
|
|
||||||
setError(e.message || 'Nastala chyba při generování dat');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClose = () => {
|
|
||||||
setError(null);
|
|
||||||
setSuccess(null);
|
|
||||||
onClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal show={isOpen} onHide={handleClose}>
|
|
||||||
<Modal.Header closeButton>
|
|
||||||
<Modal.Title><h2>Generovat mock objednávky</h2></Modal.Title>
|
|
||||||
</Modal.Header>
|
|
||||||
<Modal.Body>
|
|
||||||
{success ? (
|
|
||||||
<Alert variant="success">{success}</Alert>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Alert variant="warning">
|
|
||||||
<strong>DEV režim</strong> - Tato funkce je dostupná pouze ve vývojovém prostředí.
|
|
||||||
Data se generují vždy jen pro aktuální den.
|
|
||||||
</Alert>
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<Alert variant="danger" onClose={() => setError(null)} dismissible>
|
|
||||||
{error}
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{hasStores ? (
|
|
||||||
<>
|
|
||||||
<Form.Group className="mb-3">
|
|
||||||
<Form.Label>Počet osob</Form.Label>
|
|
||||||
<Form.Control
|
|
||||||
type="number"
|
|
||||||
value={count}
|
|
||||||
onChange={e => setCount(e.target.value)}
|
|
||||||
min={1}
|
|
||||||
max={50}
|
|
||||||
onKeyDown={e => e.stopPropagation()}
|
|
||||||
/>
|
|
||||||
<Form.Text className="text-muted">
|
|
||||||
{hasGroups
|
|
||||||
? 'Zadaný počet osob se doplní do každé existující skupiny.'
|
|
||||||
: 'Není založena žádná skupina — jedna se založí z náhodně vybraného obchodu a doplní se do ní zadaný počet osob.'}
|
|
||||||
</Form.Text>
|
|
||||||
</Form.Group>
|
|
||||||
|
|
||||||
<Form.Group className="mb-3">
|
|
||||||
<Form.Label>Rozsah částek (Kč)</Form.Label>
|
|
||||||
<div className="d-flex gap-2 align-items-center">
|
|
||||||
<Form.Control
|
|
||||||
type="number"
|
|
||||||
value={minAmount}
|
|
||||||
onChange={e => setMinAmount(e.target.value)}
|
|
||||||
min={0}
|
|
||||||
onKeyDown={e => e.stopPropagation()}
|
|
||||||
/>
|
|
||||||
<span>—</span>
|
|
||||||
<Form.Control
|
|
||||||
type="number"
|
|
||||||
value={maxAmount}
|
|
||||||
onChange={e => setMaxAmount(e.target.value)}
|
|
||||||
min={0}
|
|
||||||
onKeyDown={e => e.stopPropagation()}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Form.Text className="text-muted">
|
|
||||||
Každé osobě se nastaví náhodná částka z tohoto rozmezí a do poznámky náhodné jídlo.
|
|
||||||
</Form.Text>
|
|
||||||
</Form.Group>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<p className="text-muted mb-0">
|
|
||||||
Není nadefinován žádný obchod — mock objednávky nelze vygenerovat.
|
|
||||||
Nejprve přidejte obchod ve správě obchodů.
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Modal.Body>
|
|
||||||
<Modal.Footer>
|
|
||||||
{!success && (
|
|
||||||
<>
|
|
||||||
<Button variant="secondary" onClick={handleClose} disabled={loading}>
|
|
||||||
Storno
|
|
||||||
</Button>
|
|
||||||
<Button variant="primary" onClick={handleGenerate} disabled={loading || !hasStores}>
|
|
||||||
{loading ? 'Generuji...' : 'Generovat'}
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{success && (
|
|
||||||
<Button variant="secondary" onClick={handleClose}>
|
|
||||||
Zavřít
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</Modal.Footer>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -33,7 +33,9 @@ function parseAmount(s: string): number | null {
|
|||||||
if (!s || s.trim().length === 0) return null;
|
if (!s || s.trim().length === 0) return null;
|
||||||
const n = parseFloat(s);
|
const n = parseFloat(s);
|
||||||
if (isNaN(n) || n < 0) return null;
|
if (isNaN(n) || n < 0) return null;
|
||||||
return Math.round(n * 100);
|
const parts = s.split('.');
|
||||||
|
if (parts.length === 2 && parts[1].length > 2) return null;
|
||||||
|
return Math.round(n * 100) / 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function PayForAllModal({ isOpen, onClose, locationName, locationChoices, menu, payerLogin, bankAccount, bankAccountHolder }: Readonly<Props>) {
|
export default function PayForAllModal({ isOpen, onClose, locationName, locationChoices, menu, payerLogin, bankAccount, bankAccountHolder }: Readonly<Props>) {
|
||||||
@@ -53,11 +55,11 @@ export default function PayForAllModal({ isOpen, onClose, locationName, location
|
|||||||
let baseAmountParseFailed = false;
|
let baseAmountParseFailed = false;
|
||||||
if (menu) {
|
if (menu) {
|
||||||
for (const idx of selectedFoods) {
|
for (const idx of selectedFoods) {
|
||||||
const priceKc = parsePriceCzk(menu.food?.[idx]?.price);
|
const price = parsePriceCzk(menu.food?.[idx]?.price);
|
||||||
if (priceKc === null) {
|
if (price === null) {
|
||||||
baseAmountParseFailed = true;
|
baseAmountParseFailed = true;
|
||||||
} else {
|
} else {
|
||||||
baseAmount += Math.round(priceKc * 100);
|
baseAmount += price;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -82,19 +84,13 @@ export default function PayForAllModal({ isOpen, onClose, locationName, location
|
|||||||
if (includedDiners.length === 0) return 0;
|
if (includedDiners.length === 0) return 0;
|
||||||
const tip = parseAmount(tipTotal);
|
const tip = parseAmount(tipTotal);
|
||||||
if (tip === null || tip === 0) return 0;
|
if (tip === null || tip === 0) return 0;
|
||||||
const totalPeople = includedDiners.length + 1;
|
return Math.round((tip / includedDiners.length) * 100) / 100;
|
||||||
return Math.round(tip / totalPeople);
|
|
||||||
})();
|
|
||||||
const payerTipShare = (() => {
|
|
||||||
const tip = parseAmount(tipTotal);
|
|
||||||
if (!tip) return 0;
|
|
||||||
return tip - tipPerPerson * includedDiners.length;
|
|
||||||
})();
|
})();
|
||||||
|
|
||||||
const getTotal = (d: DinerEntry): number => {
|
const getTotal = (d: DinerEntry): number => {
|
||||||
const surcharge = parseAmount(d.surchargeAmount) ?? 0;
|
const surcharge = parseAmount(d.surchargeAmount) ?? 0;
|
||||||
const tip = d.login === payerLogin ? payerTipShare : tipPerPerson;
|
const tip = d.included && d.login !== payerLogin ? tipPerPerson : 0;
|
||||||
return d.baseAmount + surcharge + tip;
|
return Math.round((d.baseAmount + surcharge + tip) * 100) / 100;
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleInclude = useCallback((login: string, checked: boolean) => {
|
const handleInclude = useCallback((login: string, checked: boolean) => {
|
||||||
@@ -120,6 +116,11 @@ export default function PayForAllModal({ isOpen, onClose, locationName, location
|
|||||||
setError(`Celková částka pro ${d.login} musí být kladná`);
|
setError(`Celková částka pro ${d.login} musí být kladná`);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
const amountStr = total.toString();
|
||||||
|
if (amountStr.includes('.') && amountStr.split('.')[1].length > 2) {
|
||||||
|
setError(`Částka pro ${d.login} má více než 2 desetinná místa`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
const foods = d.selectedFoods.map(i => menu?.food?.[i]?.name).filter(Boolean).join(', ');
|
const foods = d.selectedFoods.map(i => menu?.food?.[i]?.name).filter(Boolean).join(', ');
|
||||||
const purposeBase = `Oběd ${locationName}${foods ? ` — ${foods}` : ''}`;
|
const purposeBase = `Oběd ${locationName}${foods ? ` — ${foods}` : ''}`;
|
||||||
recipients.push({
|
recipients.push({
|
||||||
@@ -166,7 +167,7 @@ export default function PayForAllModal({ isOpen, onClose, locationName, location
|
|||||||
</Alert>
|
</Alert>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<p>Zaplatili jste za skupinu v restauraci. Nastavte příplatky a společné poplatky, poté vygenerujte QR kódy pro ostatní.</p>
|
<p>Zaplatili jste za skupinu v restauraci. Nastavte příplatky a dýško, poté vygenerujte QR kódy pro ostatní.</p>
|
||||||
|
|
||||||
{!hasMenu && (
|
{!hasMenu && (
|
||||||
<Alert variant="info">
|
<Alert variant="info">
|
||||||
@@ -193,7 +194,7 @@ export default function PayForAllModal({ isOpen, onClose, locationName, location
|
|||||||
<th>Strávník</th>
|
<th>Strávník</th>
|
||||||
<th>Jídla</th>
|
<th>Jídla</th>
|
||||||
<th style={{ width: 220 }}>Příplatek</th>
|
<th style={{ width: 220 }}>Příplatek</th>
|
||||||
<th style={{ width: 90 }}>Poplatek</th>
|
<th style={{ width: 90 }}>Dýško</th>
|
||||||
<th style={{ width: 90 }}>Celkem</th>
|
<th style={{ width: 90 }}>Celkem</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
@@ -219,38 +220,40 @@ export default function PayForAllModal({ isOpen, onClose, locationName, location
|
|||||||
<td>
|
<td>
|
||||||
<small>
|
<small>
|
||||||
{foodNames || <span className="text-muted">—</span>}
|
{foodNames || <span className="text-muted">—</span>}
|
||||||
{hasMenu && d.baseAmount > 0 && <span className="text-muted"> ({d.baseAmount / 100} Kč)</span>}
|
{hasMenu && d.baseAmount > 0 && <span className="text-muted"> ({d.baseAmount} Kč)</span>}
|
||||||
{d.baseAmountParseFailed && <span className="text-warning"> ⚠</span>}
|
{d.baseAmountParseFailed && <span className="text-warning"> ⚠</span>}
|
||||||
</small>
|
</small>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div className="d-flex gap-1">
|
{!isPayer && (
|
||||||
<Form.Control
|
<div className="d-flex gap-1">
|
||||||
type="text"
|
<Form.Control
|
||||||
placeholder="popis"
|
type="text"
|
||||||
value={d.surchargeText}
|
placeholder="popis"
|
||||||
onChange={e => handleSurchargeText(d.login, e.target.value)}
|
value={d.surchargeText}
|
||||||
disabled={!isPayer && !d.included}
|
onChange={e => handleSurchargeText(d.login, e.target.value)}
|
||||||
size="sm"
|
disabled={!d.included}
|
||||||
onKeyDown={e => e.stopPropagation()}
|
size="sm"
|
||||||
/>
|
onKeyDown={e => e.stopPropagation()}
|
||||||
<Form.Control
|
/>
|
||||||
type="text"
|
<Form.Control
|
||||||
placeholder="Kč"
|
type="text"
|
||||||
value={d.surchargeAmount}
|
placeholder="Kč"
|
||||||
onChange={e => handleSurchargeAmount(d.login, e.target.value)}
|
value={d.surchargeAmount}
|
||||||
disabled={!isPayer && !d.included}
|
onChange={e => handleSurchargeAmount(d.login, e.target.value)}
|
||||||
size="sm"
|
disabled={!d.included}
|
||||||
style={{ width: 70 }}
|
size="sm"
|
||||||
onKeyDown={e => e.stopPropagation()}
|
style={{ width: 70 }}
|
||||||
/>
|
onKeyDown={e => e.stopPropagation()}
|
||||||
</div>
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</td>
|
</td>
|
||||||
<td className="text-end">
|
<td className="text-end">
|
||||||
{(() => { const s = isPayer ? payerTipShare : tipPerPerson; return s > 0 ? `${s / 100} Kč` : '—'; })()}
|
{!isPayer && d.included ? `${tipPerPerson} Kč` : '—'}
|
||||||
</td>
|
</td>
|
||||||
<td className="text-end fw-bold">
|
<td className="text-end fw-bold">
|
||||||
{`${total / 100} Kč`}
|
{!isPayer ? `${total} Kč` : '—'}
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
);
|
);
|
||||||
@@ -259,7 +262,7 @@ export default function PayForAllModal({ isOpen, onClose, locationName, location
|
|||||||
</Table>
|
</Table>
|
||||||
|
|
||||||
<div className="d-flex align-items-center gap-2 mt-2">
|
<div className="d-flex align-items-center gap-2 mt-2">
|
||||||
<label className="mb-0 text-nowrap">Poplatky celkem (Kč):</label>
|
<label className="mb-0 text-nowrap">Dýško celkem (Kč):</label>
|
||||||
<Form.Control
|
<Form.Control
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="0"
|
placeholder="0"
|
||||||
@@ -271,7 +274,7 @@ export default function PayForAllModal({ isOpen, onClose, locationName, location
|
|||||||
/>
|
/>
|
||||||
<small className="text-muted">
|
<small className="text-muted">
|
||||||
{includedDiners.length > 0 && tipPerPerson > 0
|
{includedDiners.length > 0 && tipPerPerson > 0
|
||||||
? `(${tipPerPerson / 100} Kč / osoba)`
|
? `(${tipPerPerson} Kč / osoba)`
|
||||||
: ''}
|
: ''}
|
||||||
</small>
|
</small>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,228 +0,0 @@
|
|||||||
import { useState, useEffect } from "react";
|
|
||||||
import { Modal, Button, Form, Table, Alert } from "react-bootstrap";
|
|
||||||
import { generateQr, GroupState, OrderGroup, OrderGroupMember, QrRecipient } from "../../../../types";
|
|
||||||
import { sanitizeQrMessage } from "../../Utils";
|
|
||||||
import { computeFeeShare, computeMemberTotal, countActiveMembers, isActiveMember } from "../../utils/groupFees";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
isOpen: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
onSuccess?: () => void;
|
|
||||||
group: OrderGroup;
|
|
||||||
payerLogin: string;
|
|
||||||
bankAccount: string;
|
|
||||||
bankAccountHolder: string;
|
|
||||||
groupId?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
type DinerEntry = {
|
|
||||||
login: string;
|
|
||||||
member: OrderGroupMember;
|
|
||||||
included: boolean;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function PayForGroupModal({ isOpen, onClose, onSuccess, group, payerLogin, bankAccount, bankAccountHolder, groupId }: Readonly<Props>) {
|
|
||||||
const [diners, setDiners] = useState<DinerEntry[]>([]);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [success, setSuccess] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isOpen) return;
|
|
||||||
const entries: DinerEntry[] = (Object.entries(group.members) as [string, OrderGroupMember][]).map(([login, member]) => ({
|
|
||||||
login,
|
|
||||||
member,
|
|
||||||
// Standardně zahrnout všechny, kdo nejsou plátce a něco si objednali.
|
|
||||||
included: login !== payerLogin && isActiveMember(member),
|
|
||||||
}));
|
|
||||||
setDiners(entries);
|
|
||||||
setError(null);
|
|
||||||
setSuccess(false);
|
|
||||||
}, [isOpen, group, payerLogin]);
|
|
||||||
|
|
||||||
const fees = group.fees ?? 0;
|
|
||||||
const shipping = group.shipping ?? 0;
|
|
||||||
const tip = group.tip ?? 0;
|
|
||||||
const totalFees = fees + shipping + tip;
|
|
||||||
// Poplatky se dělí jen mezi aktivní strávníky (kdo si reálně něco objednal).
|
|
||||||
const activeCount = countActiveMembers(group.members);
|
|
||||||
const feeShare = computeFeeShare(totalFees, activeCount);
|
|
||||||
const feeParams = { totalFees, discountType: group.discountType, discountValue: group.discountValue ?? 0 };
|
|
||||||
|
|
||||||
const getMemberTotal = (entry: DinerEntry): number =>
|
|
||||||
computeMemberTotal(entry.member, feeParams, feeShare, activeCount);
|
|
||||||
|
|
||||||
const includedNonPayers = diners.filter(d => d.included && d.login !== payerLogin);
|
|
||||||
|
|
||||||
const handleInclude = (login: string, checked: boolean) => {
|
|
||||||
setDiners(prev => prev.map(d => d.login === login ? { ...d, included: checked } : d));
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleGenerate = async () => {
|
|
||||||
setError(null);
|
|
||||||
const recipients: QrRecipient[] = [];
|
|
||||||
|
|
||||||
for (const d of diners) {
|
|
||||||
if (!d.included || d.login === payerLogin) continue;
|
|
||||||
const total = getMemberTotal(d);
|
|
||||||
if (total <= 0) {
|
|
||||||
setError(`Celková částka pro ${d.login} musí být kladná`);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const note = d.member.note?.trim();
|
|
||||||
recipients.push({
|
|
||||||
login: d.login,
|
|
||||||
purpose: sanitizeQrMessage(note || `Objednávka ${group.name}`),
|
|
||||||
amount: total,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (recipients.length === 0) {
|
|
||||||
setError("Nebyl vybrán žádný příjemce");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const response = await generateQr({
|
|
||||||
body: { recipients, bankAccount, bankAccountHolder, ...(groupId ? { groupId } : {}) },
|
|
||||||
});
|
|
||||||
if (response.error) {
|
|
||||||
setError((response.error as any).error || 'Nastala chyba při generování QR kódů');
|
|
||||||
} else {
|
|
||||||
setSuccess(true);
|
|
||||||
onSuccess?.();
|
|
||||||
setTimeout(() => onClose(), 2000);
|
|
||||||
}
|
|
||||||
} catch (e: any) {
|
|
||||||
setError(e.message || 'Nastala chyba při generování QR kódů');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const hasFees = totalFees > 0;
|
|
||||||
// Generování QR je poslední krok objednávky — server skupinu zároveň překlopí do stavu Doručeno
|
|
||||||
const willBeMarkedDelivered = group.state !== GroupState.DELIVERED;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal show={isOpen} onHide={onClose} size="lg">
|
|
||||||
<Modal.Header closeButton>
|
|
||||||
<Modal.Title><h2>Generovat QR — {group.name}</h2></Modal.Title>
|
|
||||||
</Modal.Header>
|
|
||||||
<Modal.Body>
|
|
||||||
{success ? (
|
|
||||||
<Alert variant="success">
|
|
||||||
QR kódy byly úspěšně vygenerovány! Uživatelé je uvidí v sekci „Nevyřízené platby".
|
|
||||||
</Alert>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{willBeMarkedDelivered && (
|
|
||||||
<Alert variant="info">
|
|
||||||
Objednávka není ve stavu <strong>Doručeno</strong> — vygenerováním QR kódů se do tohoto stavu automaticky přepne.
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<p>Zaplatili jste za skupinu. Vyberte, komu vygenerovat QR kód k úhradě.</p>
|
|
||||||
|
|
||||||
{error && (
|
|
||||||
<Alert variant="danger" onClose={() => setError(null)} dismissible>
|
|
||||||
{error}
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{hasFees && (
|
|
||||||
<div className="d-flex gap-3 mb-2 text-muted" style={{ fontSize: '0.9em' }}>
|
|
||||||
{fees > 0 && <span>Poplatky: <strong>{fees / 100} Kč</strong></span>}
|
|
||||||
{shipping > 0 && <span>Doprava: <strong>{shipping / 100} Kč</strong></span>}
|
|
||||||
{tip > 0 && <span>Spropitné: <strong>{tip / 100} Kč</strong></span>}
|
|
||||||
<span>→ {feeShare / 100} Kč/os.</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{group.discountValue != null && group.discountValue > 0 && (
|
|
||||||
<div className="mb-2 text-success" style={{ fontSize: '0.9em' }}>
|
|
||||||
Sleva: {group.discountType === 'percent' ? `${group.discountValue}%` : `${group.discountValue / 100} Kč`}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Table striped bordered hover responsive size="sm">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th style={{ width: 40 }}></th>
|
|
||||||
<th>Člen</th>
|
|
||||||
<th style={{ width: 90 }} className="text-end">Základ</th>
|
|
||||||
<th style={{ width: 90 }} className="text-end">Příplatek</th>
|
|
||||||
{hasFees && <th style={{ width: 90 }} className="text-end">Poplatek</th>}
|
|
||||||
<th style={{ width: 90 }} className="text-end fw-bold">Celkem</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{diners.map(d => {
|
|
||||||
const isPayer = d.login === payerLogin;
|
|
||||||
const active = isActiveMember(d.member);
|
|
||||||
const total = getMemberTotal(d);
|
|
||||||
const surcharge = d.member.surchargeAmount ?? 0;
|
|
||||||
return (
|
|
||||||
<tr key={d.login} className={(!d.included && !isPayer) || !active ? 'text-muted' : ''}>
|
|
||||||
<td className="text-center">
|
|
||||||
{isPayer ? (
|
|
||||||
<small className="text-muted">plátce</small>
|
|
||||||
) : !active ? (
|
|
||||||
<small className="text-muted">jen objednává</small>
|
|
||||||
) : (
|
|
||||||
<Form.Check
|
|
||||||
type="checkbox"
|
|
||||||
checked={d.included}
|
|
||||||
onChange={e => handleInclude(d.login, e.target.checked)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<strong>{d.login}</strong>
|
|
||||||
{d.member.surchargeText && (
|
|
||||||
<small className="text-muted ms-1">({d.member.surchargeText})</small>
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
<td className="text-end">
|
|
||||||
{(d.member.amount ?? 0) > 0 ? `${d.member.amount! / 100} Kč` : <span className="text-muted">—</span>}
|
|
||||||
</td>
|
|
||||||
<td className="text-end">
|
|
||||||
{surcharge > 0 ? `${surcharge / 100} Kč` : <span className="text-muted">—</span>}
|
|
||||||
</td>
|
|
||||||
{hasFees && (
|
|
||||||
<td className="text-end">
|
|
||||||
{active && feeShare > 0 ? `${feeShare / 100} Kč` : '—'}
|
|
||||||
</td>
|
|
||||||
)}
|
|
||||||
<td className="text-end fw-bold">
|
|
||||||
{total > 0 ? `${total / 100} Kč` : <span className="text-muted">—</span>}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</tbody>
|
|
||||||
</Table>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Modal.Body>
|
|
||||||
<Modal.Footer>
|
|
||||||
{!success && (
|
|
||||||
<>
|
|
||||||
<span className="me-auto text-muted">Příjemci: {includedNonPayers.length}</span>
|
|
||||||
<Button variant="secondary" onClick={onClose} disabled={loading}>Storno</Button>
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
onClick={handleGenerate}
|
|
||||||
disabled={loading || includedNonPayers.length === 0}
|
|
||||||
>
|
|
||||||
{loading ? 'Generuji...' : 'Vygenerovat QR'}
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{success && (
|
|
||||||
<Button variant="secondary" onClick={onClose}>Zavřít</Button>
|
|
||||||
)}
|
|
||||||
</Modal.Footer>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -15,12 +15,12 @@ export default function PizzaAdditionalFeeModal({ customerName, isOpen, onClose,
|
|||||||
const priceRef = useRef<HTMLInputElement>(null);
|
const priceRef = useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
const doSubmit = () => {
|
const doSubmit = () => {
|
||||||
onSave(customerName, textRef.current?.value, Math.round(Number.parseFloat(priceRef.current?.value ?? "0") * 100));
|
onSave(customerName, textRef.current?.value, Number.parseInt(priceRef.current?.value ?? "0"));
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||||
if (e.key === 'Enter') {
|
if (e.key === 'Enter') {
|
||||||
onSave(customerName, textRef.current?.value, Math.round(Number.parseFloat(priceRef.current?.value ?? "0") * 100));
|
onSave(customerName, textRef.current?.value, Number.parseInt(priceRef.current?.value ?? "0"));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { useEffect, useRef, useState } from "react";
|
import { useEffect, useRef, useState } from "react";
|
||||||
import { Modal, Button, Form } from "react-bootstrap"
|
import { Modal, Button, Form } from "react-bootstrap"
|
||||||
import { useSettings, ThemePreference, StyleTheme, STYLE_THEMES } from "../../context/settings";
|
import { useSettings, ThemePreference } from "../../context/settings";
|
||||||
import { NotificationSettings, UdalostEnum, getNotificationSettings, updateNotificationSettings } from "../../../../types";
|
import { NotificationSettings, UdalostEnum, getNotificationSettings, updateNotificationSettings } from "../../../../types";
|
||||||
import { useAuth } from "../../context/auth";
|
import { useAuth } from "../../context/auth";
|
||||||
import { subscribeToPush, unsubscribeFromPush } from "../../hooks/usePushReminder";
|
import { subscribeToPush, unsubscribeFromPush } from "../../hooks/usePushReminder";
|
||||||
@@ -19,10 +19,8 @@ export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Prop
|
|||||||
const nameRef = useRef<HTMLInputElement>(null);
|
const nameRef = useRef<HTMLInputElement>(null);
|
||||||
const hideSoupsRef = useRef<HTMLInputElement>(null);
|
const hideSoupsRef = useRef<HTMLInputElement>(null);
|
||||||
const themeRef = useRef<HTMLSelectElement>(null);
|
const themeRef = useRef<HTMLSelectElement>(null);
|
||||||
const styleThemeRef = useRef<HTMLSelectElement>(null);
|
|
||||||
|
|
||||||
const reminderTimeRef = useRef<HTMLInputElement>(null);
|
const reminderTimeRef = useRef<HTMLInputElement>(null);
|
||||||
const boltDeliveredRef = useRef<HTMLInputElement>(null);
|
|
||||||
const ntfyTopicRef = useRef<HTMLInputElement>(null);
|
const ntfyTopicRef = useRef<HTMLInputElement>(null);
|
||||||
const discordWebhookRef = useRef<HTMLInputElement>(null);
|
const discordWebhookRef = useRef<HTMLInputElement>(null);
|
||||||
const teamsWebhookRef = useRef<HTMLInputElement>(null);
|
const teamsWebhookRef = useRef<HTMLInputElement>(null);
|
||||||
@@ -49,36 +47,26 @@ export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Prop
|
|||||||
const handleSave = async () => {
|
const handleSave = async () => {
|
||||||
const newReminderTime = reminderTimeRef.current?.value || undefined;
|
const newReminderTime = reminderTimeRef.current?.value || undefined;
|
||||||
const oldReminderTime = notifSettings.reminderTime;
|
const oldReminderTime = notifSettings.reminderTime;
|
||||||
const newBoltDelivered = boltDeliveredRef.current?.checked ?? false;
|
|
||||||
const oldBoltDelivered = notifSettings.boltDeliveredPush ?? false;
|
|
||||||
|
|
||||||
// Uložení notifikačních nastavení na server
|
// Uložení notifikačních nastavení na server
|
||||||
const newSettings: NotificationSettings = {
|
await updateNotificationSettings({
|
||||||
ntfyTopic: ntfyTopicRef.current?.value || undefined,
|
body: {
|
||||||
discordWebhookUrl: discordWebhookRef.current?.value || undefined,
|
ntfyTopic: ntfyTopicRef.current?.value || undefined,
|
||||||
teamsWebhookUrl: teamsWebhookRef.current?.value || undefined,
|
discordWebhookUrl: discordWebhookRef.current?.value || undefined,
|
||||||
enabledEvents,
|
teamsWebhookUrl: teamsWebhookRef.current?.value || undefined,
|
||||||
reminderTime: newReminderTime,
|
enabledEvents,
|
||||||
boltDeliveredPush: newBoltDelivered,
|
reminderTime: newReminderTime,
|
||||||
};
|
}
|
||||||
await updateNotificationSettings({ body: newSettings }).catch(() => {});
|
}).catch(() => {});
|
||||||
setNotifSettings(newSettings);
|
|
||||||
|
|
||||||
// Správa push subscription — drží ji naživu kterákoli z push funkcí.
|
// Správa push subscription pro připomínky
|
||||||
// Záměrně bez await: subscribeToPush si vyžádá oprávnění prohlížeče a modal
|
if (newReminderTime && newReminderTime !== oldReminderTime) {
|
||||||
// by na tu dobu zůstal otevřený.
|
|
||||||
const wantsPush = !!newReminderTime || newBoltDelivered;
|
|
||||||
const hadPush = !!oldReminderTime || oldBoltDelivered;
|
|
||||||
if (wantsPush && (newReminderTime !== oldReminderTime || newBoltDelivered !== oldBoltDelivered)) {
|
|
||||||
subscribeToPush(newReminderTime);
|
subscribeToPush(newReminderTime);
|
||||||
} else if (!wantsPush && hadPush) {
|
} else if (!newReminderTime && oldReminderTime) {
|
||||||
unsubscribeFromPush();
|
unsubscribeFromPush();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Uložení ostatních nastavení (localStorage)
|
// Uložení ostatních nastavení (localStorage)
|
||||||
if (styleThemeRef.current?.value) {
|
|
||||||
settings?.setStyleTheme(styleThemeRef.current.value as StyleTheme);
|
|
||||||
}
|
|
||||||
onSave(
|
onSave(
|
||||||
bankAccountRef.current?.value,
|
bankAccountRef.current?.value,
|
||||||
nameRef.current?.value,
|
nameRef.current?.value,
|
||||||
@@ -94,12 +82,6 @@ export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Prop
|
|||||||
</Modal.Header>
|
</Modal.Header>
|
||||||
<Modal.Body>
|
<Modal.Body>
|
||||||
<h4>Vzhled</h4>
|
<h4>Vzhled</h4>
|
||||||
<Form.Group className="mb-3">
|
|
||||||
<Form.Label>Styl</Form.Label>
|
|
||||||
<Form.Select ref={styleThemeRef} defaultValue={settings?.styleTheme}>
|
|
||||||
{STYLE_THEMES.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
|
|
||||||
</Form.Select>
|
|
||||||
</Form.Group>
|
|
||||||
<Form.Group className="mb-3">
|
<Form.Group className="mb-3">
|
||||||
<Form.Label>Barevný motiv</Form.Label>
|
<Form.Label>Barevný motiv</Form.Label>
|
||||||
<Form.Select ref={themeRef} defaultValue={settings?.themePreference}>
|
<Form.Select ref={themeRef} defaultValue={settings?.themePreference}>
|
||||||
@@ -146,21 +128,6 @@ export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Prop
|
|||||||
</Form.Text>
|
</Form.Text>
|
||||||
</Form.Group>
|
</Form.Group>
|
||||||
|
|
||||||
<Form.Group className="mb-3">
|
|
||||||
<Form.Check
|
|
||||||
id="boltDeliveredCheckbox"
|
|
||||||
ref={boltDeliveredRef}
|
|
||||||
type="checkbox"
|
|
||||||
label="Upozornění na doručení objednávky (Bolt Food / Wolt)"
|
|
||||||
defaultChecked={notifSettings.boltDeliveredPush ?? false}
|
|
||||||
key={`bolt-delivered-${notifSettings.boltDeliveredPush ?? false}`}
|
|
||||||
/>
|
|
||||||
<Form.Text className="text-muted">
|
|
||||||
Až bude sledovaná skupinová objednávka doručena, přijde vám push notifikace.
|
|
||||||
Zakladateli skupiny se neposílá — ten dostane upozornění přímo z aplikace rozvozové služby.
|
|
||||||
</Form.Text>
|
|
||||||
</Form.Group>
|
|
||||||
|
|
||||||
<Form.Group className="mb-3">
|
<Form.Group className="mb-3">
|
||||||
<Form.Label>ntfy téma (topic)</Form.Label>
|
<Form.Label>ntfy téma (topic)</Form.Label>
|
||||||
<Form.Control
|
<Form.Control
|
||||||
|
|||||||
@@ -1,546 +0,0 @@
|
|||||||
// Barvy výsečí — jednoduchý styl odvozuje odstíny od primární barvy,
|
|
||||||
// styl Umamusume je přebíjí vlastní paletou (viz níže)
|
|
||||||
:root {
|
|
||||||
--wheel-c0: var(--luncher-primary);
|
|
||||||
--wheel-c1: #0ea5e9;
|
|
||||||
--wheel-c2: #f59e0b;
|
|
||||||
--wheel-c3: #8b5cf6;
|
|
||||||
--wheel-c4: #ec4899;
|
|
||||||
--wheel-c5: #14b8a6;
|
|
||||||
--wheel-label: #ffffff;
|
|
||||||
--wheel-rim: var(--luncher-text);
|
|
||||||
--wheel-hub: var(--luncher-bg-card);
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-wheel-modal {
|
|
||||||
.spin-steps {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
font-weight: 700;
|
|
||||||
|
|
||||||
span {
|
|
||||||
padding: 4px 12px;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: var(--luncher-bg-hover);
|
|
||||||
color: var(--luncher-text-muted);
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background: var(--luncher-primary);
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.done {
|
|
||||||
background: var(--luncher-primary-light);
|
|
||||||
color: var(--luncher-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-source-info {
|
|
||||||
align-self: center;
|
|
||||||
margin-left: 4px;
|
|
||||||
color: var(--luncher-text-muted);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-steps {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Přepínač zdroje jako segmentovaná „pilulka"
|
|
||||||
.spin-source {
|
|
||||||
display: inline-flex;
|
|
||||||
gap: 2px;
|
|
||||||
padding: 3px;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: var(--luncher-bg-hover);
|
|
||||||
|
|
||||||
> .btn {
|
|
||||||
padding: 6px 16px;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
border: none !important;
|
|
||||||
border-radius: 999px !important;
|
|
||||||
box-shadow: none !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
transform: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .btn-outline-primary {
|
|
||||||
background: transparent;
|
|
||||||
color: var(--luncher-text-secondary);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: var(--luncher-bg-card);
|
|
||||||
color: var(--luncher-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-layout {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: minmax(0, 1fr) 240px;
|
|
||||||
gap: 20px;
|
|
||||||
align-items: start;
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
grid-template-columns: minmax(0, 1fr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-wheel-column {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-empty {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 380px;
|
|
||||||
aspect-ratio: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
padding: 24px;
|
|
||||||
border: 2px dashed var(--luncher-border);
|
|
||||||
border-radius: 50%;
|
|
||||||
color: var(--luncher-text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-result {
|
|
||||||
min-height: 1.6em;
|
|
||||||
font-size: 1.15rem;
|
|
||||||
text-align: center;
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(6px);
|
|
||||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
||||||
|
|
||||||
&.visible {
|
|
||||||
opacity: 1;
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
small {
|
|
||||||
color: var(--luncher-text-muted);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-actions {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 8px;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-button {
|
|
||||||
min-width: 160px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-options {
|
|
||||||
border: 1px solid var(--luncher-border);
|
|
||||||
border-radius: var(--luncher-radius);
|
|
||||||
background: var(--luncher-bg);
|
|
||||||
max-height: 440px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
min-width: 0;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 4px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 4px 6px;
|
|
||||||
border-radius: var(--luncher-radius-sm);
|
|
||||||
font-size: 0.85rem;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: var(--luncher-bg-hover);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-options-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 8px 10px;
|
|
||||||
border-bottom: 1px solid var(--luncher-border);
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-restore {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: var(--luncher-primary);
|
|
||||||
font-size: 0.8rem;
|
|
||||||
font-weight: 600;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-dot {
|
|
||||||
flex: none;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-option-label {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-option-kind {
|
|
||||||
color: var(--luncher-text-muted);
|
|
||||||
font-size: 0.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-remove {
|
|
||||||
flex: none;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
color: var(--luncher-text-muted);
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
|
|
||||||
&:hover:not(:disabled) {
|
|
||||||
color: var(--luncher-danger);
|
|
||||||
background: var(--luncher-bg-hover);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-wheel {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 380px;
|
|
||||||
aspect-ratio: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-wheel-svg {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: block;
|
|
||||||
filter: drop-shadow(0 6px 12px rgb(0 0 0 / 0.18));
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-wheel-pointer {
|
|
||||||
position: absolute;
|
|
||||||
top: -6px;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
z-index: 2;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-left: 14px solid transparent;
|
|
||||||
border-right: 14px solid transparent;
|
|
||||||
border-top: 26px solid var(--luncher-danger);
|
|
||||||
filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.3));
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-wheel-rim {
|
|
||||||
fill: var(--wheel-rim);
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-wheel-hub {
|
|
||||||
fill: var(--wheel-hub);
|
|
||||||
stroke: var(--wheel-rim);
|
|
||||||
stroke-width: 4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-seg {
|
|
||||||
stroke: var(--wheel-hub);
|
|
||||||
stroke-width: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-seg-label {
|
|
||||||
fill: var(--wheel-label);
|
|
||||||
font-weight: 700;
|
|
||||||
pointer-events: none;
|
|
||||||
paint-order: stroke;
|
|
||||||
stroke: rgb(0 0 0 / 0.25);
|
|
||||||
stroke-width: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@for $i from 0 through 5 {
|
|
||||||
.spin-seg-#{$i} {
|
|
||||||
fill: var(--wheel-c#{$i});
|
|
||||||
background: var(--wheel-c#{$i});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
|
||||||
.spin-wheel-svg {
|
|
||||||
transition-duration: 0.6s !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-wheel-modal .modal-header {
|
|
||||||
gap: 12px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.modal-title {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============================================
|
|
||||||
// STYL UMAMUSUME kola štěstí (dle stylu zvoleného v nastavení).
|
|
||||||
// Trávník dostihové dráhy, růžové a nebeské akcenty, zlaté lemy,
|
|
||||||
// zaoblené tučné písmo a „herní" tlačítka s vystouplým spodkem.
|
|
||||||
// ============================================
|
|
||||||
.spin-wheel-modal.spin-theme-umamusume {
|
|
||||||
--uma-font: 'M PLUS Rounded 1c', 'Nunito', 'Inter', sans-serif;
|
|
||||||
--uma-turf: #5cc23d;
|
|
||||||
--uma-turf-deep: #2e9a3a;
|
|
||||||
--uma-turf-shadow: #1f7a2c;
|
|
||||||
--uma-pink: #ff6fa3;
|
|
||||||
--uma-pink-deep: #e84d86;
|
|
||||||
--uma-gold: #ffc531;
|
|
||||||
--uma-panel: #f4fbef;
|
|
||||||
--uma-border: #c6ebb2;
|
|
||||||
--uma-text: #1d3322;
|
|
||||||
--wheel-c0: var(--uma-turf);
|
|
||||||
--wheel-c1: var(--uma-pink);
|
|
||||||
--wheel-c2: #43b8f0;
|
|
||||||
--wheel-c3: #f2a91a;
|
|
||||||
--wheel-c4: #a078f0;
|
|
||||||
--wheel-c5: #ff8a3d;
|
|
||||||
--wheel-rim: var(--uma-gold);
|
|
||||||
--wheel-hub: #ffffff;
|
|
||||||
|
|
||||||
font-family: var(--uma-font);
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
border: 4px solid var(--uma-border);
|
|
||||||
border-radius: 22px;
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: #fff;
|
|
||||||
background-image: repeating-linear-gradient(135deg, rgb(92 194 61 / 0.06) 0 16px, transparent 16px 32px);
|
|
||||||
color: var(--uma-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
background:
|
|
||||||
repeating-linear-gradient(115deg, rgb(255 255 255 / 0.13) 0 12px, transparent 12px 24px),
|
|
||||||
linear-gradient(90deg, var(--uma-turf-deep), var(--uma-turf));
|
|
||||||
border-bottom: 4px solid var(--uma-gold);
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
color: #fff;
|
|
||||||
font-family: var(--uma-font);
|
|
||||||
font-weight: 800;
|
|
||||||
text-shadow: 0 2px 0 var(--uma-turf-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-close {
|
|
||||||
filter: invert(1) grayscale(1) brightness(2);
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-footer {
|
|
||||||
border-top: 3px dashed var(--uma-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-steps span {
|
|
||||||
font-family: var(--uma-font);
|
|
||||||
background: #e7f3e0;
|
|
||||||
color: #7c9a82;
|
|
||||||
clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
|
|
||||||
border-radius: 0;
|
|
||||||
padding: 4px 18px;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background: linear-gradient(90deg, var(--uma-pink-deep), var(--uma-pink));
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.done {
|
|
||||||
background: var(--uma-turf);
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
font-family: var(--uma-font);
|
|
||||||
font-weight: 800;
|
|
||||||
border-radius: 999px;
|
|
||||||
transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.2s ease;
|
|
||||||
|
|
||||||
&:active:not(:disabled) {
|
|
||||||
transform: translateY(3px);
|
|
||||||
box-shadow: 0 1px 0 var(--uma-btn-shadow, transparent);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
--uma-btn-shadow: var(--uma-turf-shadow);
|
|
||||||
background: linear-gradient(180deg, #7ad85a, var(--uma-turf-deep));
|
|
||||||
box-shadow: 0 4px 0 var(--uma-turf-shadow);
|
|
||||||
color: #fff;
|
|
||||||
text-shadow: 0 1px 0 rgb(0 0 0 / 0.2);
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
background: #b9cbbd;
|
|
||||||
box-shadow: 0 4px 0 #97aa9b;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-button {
|
|
||||||
--uma-btn-shadow: #b8335f;
|
|
||||||
background: linear-gradient(180deg, #ff8db5, var(--uma-pink-deep));
|
|
||||||
box-shadow: 0 5px 0 #b8335f;
|
|
||||||
font-size: 1.15rem;
|
|
||||||
padding: 12px 36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-outline-primary {
|
|
||||||
--uma-btn-shadow: var(--uma-border);
|
|
||||||
background: #fff;
|
|
||||||
border: 2px solid var(--uma-turf);
|
|
||||||
color: var(--uma-turf-deep);
|
|
||||||
box-shadow: 0 4px 0 var(--uma-border);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: #eaf8e2;
|
|
||||||
color: var(--uma-turf-deep);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
--uma-btn-shadow: #d4ddd6;
|
|
||||||
background: #fff;
|
|
||||||
border: 2px solid #d4ddd6;
|
|
||||||
color: var(--uma-text);
|
|
||||||
box-shadow: 0 4px 0 #d4ddd6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-source {
|
|
||||||
background: #e7f3e0;
|
|
||||||
|
|
||||||
> .btn-primary {
|
|
||||||
background: linear-gradient(180deg, #7ad85a, var(--uma-turf-deep));
|
|
||||||
box-shadow: 0 2px 0 var(--uma-turf-shadow) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .btn-outline-primary {
|
|
||||||
background: transparent;
|
|
||||||
color: var(--uma-turf-deep);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-result {
|
|
||||||
font-weight: 800;
|
|
||||||
|
|
||||||
strong {
|
|
||||||
color: var(--uma-pink-deep);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-options {
|
|
||||||
background: var(--uma-panel);
|
|
||||||
border: 3px solid var(--uma-border);
|
|
||||||
border-radius: 16px;
|
|
||||||
|
|
||||||
li:hover {
|
|
||||||
background: #fff0f6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-options-header {
|
|
||||||
border-bottom: 3px solid var(--uma-border);
|
|
||||||
color: var(--uma-turf-deep);
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-empty {
|
|
||||||
border-color: var(--uma-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-wheel-pointer {
|
|
||||||
border-top-color: var(--uma-pink-deep);
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-seg {
|
|
||||||
stroke: #fff;
|
|
||||||
stroke-width: 2.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-seg-label {
|
|
||||||
font-family: var(--uma-font);
|
|
||||||
font-weight: 800;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tmavý režim — noční dostih pod reflektory
|
|
||||||
[data-bs-theme="dark"] .spin-wheel-modal.spin-theme-umamusume {
|
|
||||||
--uma-panel: #19223d;
|
|
||||||
--uma-border: #2c3a66;
|
|
||||||
--uma-text: #f3f6ff;
|
|
||||||
--wheel-hub: #19223d;
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
background-color: #10172b;
|
|
||||||
background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.03) 0 16px, transparent 16px 32px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-steps span:not(.active):not(.done) {
|
|
||||||
background: #222d4f;
|
|
||||||
color: #7d89ad;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-outline-primary, .btn-secondary {
|
|
||||||
background: #19223d;
|
|
||||||
color: #f3f6ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-source {
|
|
||||||
background: #222d4f;
|
|
||||||
|
|
||||||
> .btn-outline-primary {
|
|
||||||
background: transparent;
|
|
||||||
color: #b8c2e0;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: #19223d;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.spin-options li:hover {
|
|
||||||
background: #2a2344;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Ikona kola se při najetí pootočí
|
|
||||||
.spin-wheel-icon {
|
|
||||||
transition: transform 0.4s ease !important;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: rotate(180deg) scale(1.15) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,407 +0,0 @@
|
|||||||
import { useEffect, useMemo, useRef, useState } from "react";
|
|
||||||
import { Modal, Button, ButtonGroup } from "react-bootstrap";
|
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
||||||
import { faXmark, faRotateLeft } from "@fortawesome/free-solid-svg-icons";
|
|
||||||
import { Restaurant, RestaurantDayMenuMap, Store, StoreMenu, StoreMenuSource, getStoreMenu, listStores } from "../../../../types";
|
|
||||||
import { getLunchChoiceName } from "../../enums";
|
|
||||||
import WheelConfetti from "../WheelConfetti";
|
|
||||||
import { useSettings } from "../../context/settings";
|
|
||||||
import "./SpinWheelModal.scss";
|
|
||||||
|
|
||||||
/** Výsledek kola štěstí — buď jídlo z dnešního menu podniku, nebo jídlo z rozvozu. */
|
|
||||||
export type WheelPick =
|
|
||||||
| { kind: 'menu', restaurant: Restaurant, foodIndex?: number, foodName?: string }
|
|
||||||
| { kind: 'store', store: string, dish?: string };
|
|
||||||
|
|
||||||
type Source = 'all' | 'menu' | 'store';
|
|
||||||
|
|
||||||
type Place = {
|
|
||||||
id: string,
|
|
||||||
label: string,
|
|
||||||
kind: 'menu' | 'store',
|
|
||||||
restaurant?: Restaurant,
|
|
||||||
/** Jídla dnešního menu; u rozvozu se nabídka dotahuje až při druhém kole. */
|
|
||||||
dishes: Dish[],
|
|
||||||
};
|
|
||||||
|
|
||||||
type Dish = { name: string, index?: number, price?: string };
|
|
||||||
|
|
||||||
const SOURCE_LABELS: Record<StoreMenuSource, string> = {
|
|
||||||
bolt: 'Nabídka z Bolt Food',
|
|
||||||
wolt: 'Nabídka z Wolt',
|
|
||||||
history: 'Nabídku se nepodařilo stáhnout — jídla z historie objednávek',
|
|
||||||
none: 'Nabídku se nepodařilo stáhnout',
|
|
||||||
};
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
isOpen: boolean,
|
|
||||||
onClose: () => void,
|
|
||||||
menus?: RestaurantDayMenuMap,
|
|
||||||
onPick: (pick: WheelPick) => Promise<void>,
|
|
||||||
};
|
|
||||||
|
|
||||||
const SPIN_MS = 4800;
|
|
||||||
const WHEEL_SIZE = 360;
|
|
||||||
const RADIUS = WHEEL_SIZE / 2 - 6;
|
|
||||||
const SEGMENT_COLORS = 6;
|
|
||||||
const MAX_LABELED_SEGMENTS = 40;
|
|
||||||
/** Točit má smysl až od dvou možností — jediná zbylá se vybere rovnou. */
|
|
||||||
const MIN_SPIN_ITEMS = 2;
|
|
||||||
|
|
||||||
/** Kryptograficky náhodný index v rozsahu 0..n-1 (bez modulo zkreslení to u malých n nevadí). */
|
|
||||||
function randomIndex(n: number): number {
|
|
||||||
const buf = new Uint32Array(1);
|
|
||||||
crypto.getRandomValues(buf);
|
|
||||||
return buf[0] % n;
|
|
||||||
}
|
|
||||||
|
|
||||||
function truncate(text: string, max: number): string {
|
|
||||||
return text.length > max ? text.slice(0, max - 1) + '…' : text;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Bod na kružnici; úhel ve stupních měřený od „12 hodin" po směru hodinových ručiček. */
|
|
||||||
function polar(angle: number, r: number) {
|
|
||||||
const rad = (angle - 90) * Math.PI / 180;
|
|
||||||
return { x: WHEEL_SIZE / 2 + r * Math.cos(rad), y: WHEEL_SIZE / 2 + r * Math.sin(rad) };
|
|
||||||
}
|
|
||||||
|
|
||||||
function segmentPath(start: number, end: number): string {
|
|
||||||
const c = WHEEL_SIZE / 2;
|
|
||||||
if (end - start >= 360) {
|
|
||||||
return `M ${c} ${c - RADIUS} A ${RADIUS} ${RADIUS} 0 1 1 ${c - 0.01} ${c - RADIUS} Z`;
|
|
||||||
}
|
|
||||||
const a = polar(start, RADIUS);
|
|
||||||
const b = polar(end, RADIUS);
|
|
||||||
const large = end - start > 180 ? 1 : 0;
|
|
||||||
return `M ${c} ${c} L ${a.x} ${a.y} A ${RADIUS} ${RADIUS} 0 ${large} 1 ${b.x} ${b.y} Z`;
|
|
||||||
}
|
|
||||||
|
|
||||||
type WheelProps = {
|
|
||||||
labels: string[],
|
|
||||||
rotation: number,
|
|
||||||
spinning: boolean,
|
|
||||||
onSpinEnd: () => void,
|
|
||||||
};
|
|
||||||
|
|
||||||
function Wheel({ labels, rotation, spinning, onSpinEnd }: Readonly<WheelProps>) {
|
|
||||||
const n = labels.length;
|
|
||||||
const angle = 360 / Math.max(n, 1);
|
|
||||||
const fontSize = n > 24 ? 8.5 : n > 14 ? 10 : n > 8 ? 12 : 14;
|
|
||||||
const maxChars = n > 24 ? 26 : n > 14 ? 24 : 20;
|
|
||||||
// U velkých nabídek jsou popisky nečitelné — názvy jsou v seznamu vedle kola
|
|
||||||
const showLabels = n <= MAX_LABELED_SEGMENTS;
|
|
||||||
return (
|
|
||||||
<div className="spin-wheel">
|
|
||||||
<div className="spin-wheel-pointer" aria-hidden />
|
|
||||||
<svg
|
|
||||||
viewBox={`0 0 ${WHEEL_SIZE} ${WHEEL_SIZE}`}
|
|
||||||
className="spin-wheel-svg"
|
|
||||||
style={{
|
|
||||||
transform: `rotate(${rotation}deg)`,
|
|
||||||
transition: spinning ? `transform ${SPIN_MS}ms cubic-bezier(0.12, 0.72, 0.16, 1)` : 'none',
|
|
||||||
}}
|
|
||||||
onTransitionEnd={e => { if (e.propertyName === 'transform') onSpinEnd(); }}
|
|
||||||
role="img"
|
|
||||||
aria-label={`Kolo s ${n} možnostmi`}
|
|
||||||
>
|
|
||||||
<circle cx={WHEEL_SIZE / 2} cy={WHEEL_SIZE / 2} r={RADIUS + 4} className="spin-wheel-rim" />
|
|
||||||
{labels.map((label, i) => {
|
|
||||||
const start = i * angle;
|
|
||||||
const mid = start + angle / 2;
|
|
||||||
return (
|
|
||||||
<g key={`${i}-${label}`}>
|
|
||||||
<path d={segmentPath(start, start + angle)} className={`spin-seg spin-seg-${i % SEGMENT_COLORS}`} />
|
|
||||||
{showLabels && <text
|
|
||||||
x={WHEEL_SIZE / 2 + 34}
|
|
||||||
y={WHEEL_SIZE / 2}
|
|
||||||
transform={`rotate(${mid - 90} ${WHEEL_SIZE / 2} ${WHEEL_SIZE / 2})`}
|
|
||||||
dominantBaseline="middle"
|
|
||||||
fontSize={fontSize}
|
|
||||||
className="spin-seg-label"
|
|
||||||
>
|
|
||||||
{truncate(label, maxChars)}
|
|
||||||
</text>}
|
|
||||||
</g>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
<circle cx={WHEEL_SIZE / 2} cy={WHEEL_SIZE / 2} r={26} className="spin-wheel-hub" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Kolo štěstí pro nerozhodnuté: první kolo vybere podnik (dnešní menu nebo rozvoz),
|
|
||||||
* druhé kolo jídlo z něj (bez polévek). Možnosti lze z kola průběžně vyřazovat.
|
|
||||||
*/
|
|
||||||
export default function SpinWheelModal({ isOpen, onClose, menus, onPick }: Readonly<Props>) {
|
|
||||||
const [stores, setStores] = useState<Store[]>();
|
|
||||||
const [storeMenus, setStoreMenus] = useState<Record<string, StoreMenu | 'loading' | 'error'>>({});
|
|
||||||
const [source, setSource] = useState<Source>('all');
|
|
||||||
const [excludedPlaces, setExcludedPlaces] = useState<Set<string>>(new Set());
|
|
||||||
const [excludedDishes, setExcludedDishes] = useState<Set<string>>(new Set());
|
|
||||||
const [place, setPlace] = useState<Place>();
|
|
||||||
const [dish, setDish] = useState<Dish>();
|
|
||||||
const [phase, setPhase] = useState<'place' | 'dish'>('place');
|
|
||||||
const [rotation, setRotation] = useState(0);
|
|
||||||
const [spinning, setSpinning] = useState(false);
|
|
||||||
const [saving, setSaving] = useState(false);
|
|
||||||
const [respinRequested, setRespinRequested] = useState(false);
|
|
||||||
const theme = useSettings()?.styleTheme ?? 'simple';
|
|
||||||
const [confetti, setConfetti] = useState<{ key: number, big: boolean }>({ key: 0, big: false });
|
|
||||||
const pendingResult = useRef<number>(undefined);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (isOpen && !stores) {
|
|
||||||
listStores().then(r => setStores(r.data ?? [])).catch(() => setStores([]));
|
|
||||||
}
|
|
||||||
}, [isOpen, stores]);
|
|
||||||
|
|
||||||
const allPlaces = useMemo<Place[]>(() => {
|
|
||||||
const result: Place[] = [];
|
|
||||||
for (const key of Object.keys(Restaurant) as Restaurant[]) {
|
|
||||||
const menu = menus?.[key];
|
|
||||||
if (!menu || menu.closed || !menu.food?.length) continue;
|
|
||||||
const dishes = menu.food
|
|
||||||
.map((f, index) => ({ name: f.name, index, price: f.price, isSoup: f.isSoup }))
|
|
||||||
.filter(f => !f.isSoup)
|
|
||||||
.map(({ name, index, price }) => ({ name, index, price }));
|
|
||||||
result.push({ id: `menu:${key}`, label: getLunchChoiceName(key), kind: 'menu', restaurant: key, dishes });
|
|
||||||
}
|
|
||||||
for (const s of stores ?? []) {
|
|
||||||
result.push({ id: `store:${s.name}`, label: s.name, kind: 'store', dishes: [] });
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
}, [menus, stores]);
|
|
||||||
|
|
||||||
const storeMenu = place?.kind === 'store' ? storeMenus[place.label] : undefined;
|
|
||||||
const allDishes = useMemo<Dish[]>(() => {
|
|
||||||
if (place?.kind !== 'store') return place?.dishes ?? [];
|
|
||||||
if (!storeMenu || typeof storeMenu === 'string') return [];
|
|
||||||
return storeMenu.dishes
|
|
||||||
.filter(d => d.isMain !== false)
|
|
||||||
.map(d => ({ name: d.name, price: d.price != null ? `${d.price} Kč` : undefined }));
|
|
||||||
}, [place, storeMenu]);
|
|
||||||
|
|
||||||
const places = useMemo(
|
|
||||||
() => allPlaces.filter(p => (source === 'all' || p.kind === source) && !excludedPlaces.has(p.id)),
|
|
||||||
[allPlaces, source, excludedPlaces],
|
|
||||||
);
|
|
||||||
const dishes = useMemo(
|
|
||||||
() => allDishes.filter(d => !excludedDishes.has(`${place?.id}|${d.name}`)),
|
|
||||||
[place, allDishes, excludedDishes],
|
|
||||||
);
|
|
||||||
|
|
||||||
const wheelItems = phase === 'place' ? places.map(p => p.label) : dishes.map(d => d.name);
|
|
||||||
const result = phase === 'place' ? place : dish;
|
|
||||||
|
|
||||||
const resetWheel = () => {
|
|
||||||
setSpinning(false);
|
|
||||||
setRotation(r => r % 360);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Zbyla jediná možnost — není co losovat, vybere se rovnou (lze pokračovat dál / převzít)
|
|
||||||
const onlyOne = wheelItems.length === 1;
|
|
||||||
useEffect(() => {
|
|
||||||
if (spinning || !onlyOne) return;
|
|
||||||
if (phase === 'place' && place?.id !== places[0].id) setPlace(places[0]);
|
|
||||||
else if (phase === 'dish' && dish?.name !== dishes[0].name) setDish(dishes[0]);
|
|
||||||
}, [onlyOne, phase, places, dishes, spinning, place?.id, dish?.name]);
|
|
||||||
|
|
||||||
const spin = () => {
|
|
||||||
const n = wheelItems.length;
|
|
||||||
if (n < MIN_SPIN_ITEMS || spinning) return;
|
|
||||||
const index = randomIndex(n);
|
|
||||||
const angle = 360 / n;
|
|
||||||
const jitter = (Math.random() - 0.5) * angle * 0.6;
|
|
||||||
const target = 360 - (index * angle + angle / 2) + jitter;
|
|
||||||
const turns = 5 + randomIndex(3);
|
|
||||||
pendingResult.current = index;
|
|
||||||
if (phase === 'place') setPlace(undefined); else setDish(undefined);
|
|
||||||
setSpinning(true);
|
|
||||||
setRotation(r => r - (r % 360) + turns * 360 + ((target % 360) + 360) % 360);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSpinEnd = () => {
|
|
||||||
const index = pendingResult.current;
|
|
||||||
if (index == null) return;
|
|
||||||
pendingResult.current = undefined;
|
|
||||||
setSpinning(false);
|
|
||||||
if (phase === 'place') setPlace(places[index]);
|
|
||||||
else setDish(dishes[index]);
|
|
||||||
setConfetti(c => ({ key: c.key + 1, big: phase === 'dish' }));
|
|
||||||
};
|
|
||||||
|
|
||||||
const goToDishes = () => {
|
|
||||||
if (place?.kind === 'store' && (!storeMenus[place.label] || storeMenus[place.label] === 'error')) {
|
|
||||||
const name = place.label;
|
|
||||||
setStoreMenus(prev => ({ ...prev, [name]: 'loading' }));
|
|
||||||
getStoreMenu({ query: { name } })
|
|
||||||
.then(r => setStoreMenus(prev => ({ ...prev, [name]: r.data ?? 'error' })))
|
|
||||||
.catch(() => setStoreMenus(prev => ({ ...prev, [name]: 'error' })));
|
|
||||||
}
|
|
||||||
setDish(undefined);
|
|
||||||
setPhase('dish');
|
|
||||||
resetWheel();
|
|
||||||
};
|
|
||||||
|
|
||||||
const backToPlaces = () => {
|
|
||||||
setDish(undefined);
|
|
||||||
setPlace(undefined);
|
|
||||||
setPhase('place');
|
|
||||||
resetWheel();
|
|
||||||
};
|
|
||||||
|
|
||||||
const removeOption = (i: number) => {
|
|
||||||
if (spinning) return;
|
|
||||||
if (phase === 'place') {
|
|
||||||
const p = places[i];
|
|
||||||
setExcludedPlaces(prev => new Set(prev).add(p.id));
|
|
||||||
if (place?.id === p.id) setPlace(undefined);
|
|
||||||
} else if (place) {
|
|
||||||
const d = dishes[i];
|
|
||||||
setExcludedDishes(prev => new Set(prev).add(`${place.id}|${d.name}`));
|
|
||||||
if (dish?.name === d.name) setDish(undefined);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const removeResultAndRespin = () => {
|
|
||||||
const i = phase === 'place' ? places.findIndex(p => p.id === place?.id) : dishes.findIndex(d => d.name === dish?.name);
|
|
||||||
if (i < 0) return;
|
|
||||||
removeOption(i);
|
|
||||||
setRespinRequested(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Po vyřazení se kolo překreslí s menším počtem výsečí — roztočíme ho až nad novými daty
|
|
||||||
useEffect(() => {
|
|
||||||
if (respinRequested) {
|
|
||||||
setRespinRequested(false);
|
|
||||||
spin();
|
|
||||||
}
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [respinRequested]);
|
|
||||||
|
|
||||||
const restoreAll = () => {
|
|
||||||
if (phase === 'place') setExcludedPlaces(new Set());
|
|
||||||
else if (place) setExcludedDishes(prev => new Set([...prev].filter(k => !k.startsWith(`${place.id}|`))));
|
|
||||||
};
|
|
||||||
|
|
||||||
const accept = async () => {
|
|
||||||
if (!place) return;
|
|
||||||
setSaving(true);
|
|
||||||
try {
|
|
||||||
if (place.kind === 'menu') {
|
|
||||||
await onPick({ kind: 'menu', restaurant: place.restaurant!, foodIndex: dish?.index, foodName: dish?.name });
|
|
||||||
} else {
|
|
||||||
await onPick({ kind: 'store', store: place.label, dish: dish?.name });
|
|
||||||
}
|
|
||||||
onClose();
|
|
||||||
} finally {
|
|
||||||
setSaving(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const excludedCount = phase === 'place'
|
|
||||||
? allPlaces.filter(p => (source === 'all' || p.kind === source) && excludedPlaces.has(p.id)).length
|
|
||||||
: allDishes.length - dishes.length;
|
|
||||||
const menuLoading = phase === 'dish' && storeMenu === 'loading';
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal show={isOpen} onHide={onClose} size="lg" className={`spin-wheel-modal spin-theme-${theme}`}>
|
|
||||||
<Modal.Header closeButton>
|
|
||||||
<Modal.Title>
|
|
||||||
<h2>{phase === 'place' ? 'Kolo štěstí: kam?' : `Kolo štěstí: co v ${place?.label}?`}</h2>
|
|
||||||
</Modal.Title>
|
|
||||||
</Modal.Header>
|
|
||||||
<WheelConfetti theme={theme} burstKey={confetti.key} big={confetti.big} />
|
|
||||||
<Modal.Body>
|
|
||||||
<div className="spin-steps">
|
|
||||||
<span className={phase === 'place' ? 'active' : 'done'}>1. Podnik</span>
|
|
||||||
<span className={phase === 'dish' ? 'active' : ''}>2. Jídlo</span>
|
|
||||||
{phase === 'dish' && storeMenu && typeof storeMenu !== 'string' && (
|
|
||||||
<small className="spin-source-info">{SOURCE_LABELS[storeMenu.source]}</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{phase === 'place' && (
|
|
||||||
<ButtonGroup className="spin-source mb-3" aria-label="Zdroj podniků">
|
|
||||||
{([['all', 'Vše'], ['menu', 'Dnešní menu'], ['store', 'Rozvoz']] as [Source, string][]).map(([value, label]) => (
|
|
||||||
<Button key={value} variant={source === value ? 'primary' : 'outline-primary'} disabled={spinning}
|
|
||||||
onClick={() => { setSource(value); setPlace(undefined); }}>
|
|
||||||
{label}
|
|
||||||
</Button>
|
|
||||||
))}
|
|
||||||
</ButtonGroup>
|
|
||||||
)}
|
|
||||||
<div className="spin-layout">
|
|
||||||
<div className="spin-wheel-column">
|
|
||||||
{(phase === 'place' && !stores) || menuLoading ? (
|
|
||||||
<div className="spin-empty">{menuLoading ? 'Stahuji nabídku podniku…' : 'Načítám podniky…'}</div>
|
|
||||||
) : wheelItems.length === 0 ? (
|
|
||||||
<div className="spin-empty">
|
|
||||||
{phase === 'dish'
|
|
||||||
? 'Tady nemáme žádná jídla k točení — vyber si na místě.'
|
|
||||||
: 'Na kole nezbyla žádná možnost.'}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<Wheel labels={wheelItems} rotation={rotation} spinning={spinning} onSpinEnd={handleSpinEnd} />
|
|
||||||
)}
|
|
||||||
<div className={`spin-result${result ? ' visible' : ''}`} aria-live="polite">
|
|
||||||
{result && (phase === 'place'
|
|
||||||
? <>{onlyOne ? 'Zbývá jediná možnost' : 'Padlo'}: <strong>{place!.label}</strong> <small>({place!.kind === 'menu' ? 'dnešní menu' : 'rozvoz'})</small></>
|
|
||||||
: <>{onlyOne ? 'Zbývá jediné jídlo' : 'Padlo'}: <strong>{dish!.name}</strong>{dish!.price && <small> ({dish!.price})</small>}</>)}
|
|
||||||
</div>
|
|
||||||
<div className="spin-actions">
|
|
||||||
<Button onClick={spin} disabled={spinning || wheelItems.length < MIN_SPIN_ITEMS} className="spin-button"
|
|
||||||
title={wheelItems.length < MIN_SPIN_ITEMS ? 'Na kole musí být aspoň 2 možnosti' : undefined}>
|
|
||||||
{spinning ? 'Točí se…' : result && !onlyOne ? 'Točit znovu' : 'Roztočit!'}
|
|
||||||
</Button>
|
|
||||||
{result && !spinning && wheelItems.length > 1 && (
|
|
||||||
<Button variant="outline-primary" onClick={removeResultAndRespin}>Vyřadit a točit znovu</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{onlyOne && (
|
|
||||||
<small className="text-muted">Na kole musí být aspoň 2 možnosti — vrať nějaké vyřazené, nebo pokračuj s touto.</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="spin-options">
|
|
||||||
<div className="spin-options-header">
|
|
||||||
<span>Na kole ({wheelItems.length})</span>
|
|
||||||
{excludedCount > 0 && (
|
|
||||||
<button className="spin-restore" onClick={restoreAll} disabled={spinning} title="Vrátit vyřazené možnosti">
|
|
||||||
<FontAwesomeIcon icon={faRotateLeft} /> Vrátit {excludedCount}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<ul>
|
|
||||||
{wheelItems.map((label, i) => (
|
|
||||||
<li key={`${i}-${label}`}>
|
|
||||||
<span className={`spin-dot spin-seg-${i % SEGMENT_COLORS}`} />
|
|
||||||
<span className="spin-option-label" title={label}>{label}</span>
|
|
||||||
{phase === 'place'
|
|
||||||
? <small className="spin-option-kind">{places[i].kind === 'menu' ? 'menu' : 'rozvoz'}</small>
|
|
||||||
: dishes[i].price && <small className="spin-option-kind">{dishes[i].price}</small>}
|
|
||||||
<button className="spin-remove" onClick={() => removeOption(i)} disabled={spinning}
|
|
||||||
title={`Vyřadit z kola: ${label}`} aria-label={`Vyřadit ${label}`}>
|
|
||||||
<FontAwesomeIcon icon={faXmark} />
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Modal.Body>
|
|
||||||
<Modal.Footer>
|
|
||||||
{phase === 'dish' && <Button variant="secondary" onClick={backToPlaces} disabled={spinning}>Zpět na podniky</Button>}
|
|
||||||
{phase === 'place' && place && !spinning && (
|
|
||||||
<Button variant="outline-primary" onClick={accept} disabled={saving}>Beru jen podnik</Button>
|
|
||||||
)}
|
|
||||||
{phase === 'place' && place && !spinning && (
|
|
||||||
<Button onClick={goToDishes}>Dál: točit jídlo</Button>
|
|
||||||
)}
|
|
||||||
{phase === 'dish' && !spinning && (dish || dishes.length === 0) && (
|
|
||||||
<Button onClick={accept} disabled={saving}>{dish ? 'Beru to!' : 'Beru podnik'}</Button>
|
|
||||||
)}
|
|
||||||
</Modal.Footer>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,386 +0,0 @@
|
|||||||
import { useEffect, useState } from "react";
|
|
||||||
import { Modal, Button, Form, ListGroup, Alert, OverlayTrigger, Tooltip } from "react-bootstrap";
|
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
||||||
import { faTrashCan } from "@fortawesome/free-regular-svg-icons";
|
|
||||||
import { faArrowsRotate, faPen, faPlus, faUpRightFromSquare, faXmark } from "@fortawesome/free-solid-svg-icons";
|
|
||||||
import { addStore, deleteStore, updateStore, getStoreMenuStatus, refreshStoreMenu, Store, StoreMenuProvider, StoreScrapeInfo, StoreScrapeStatus } from "../../../../types";
|
|
||||||
import { getHumanDateTime } from "../../Utils";
|
|
||||||
import PriceHistory from "../PriceHistory";
|
|
||||||
import { useAppConfig } from "../../hooks/useGroupLimits";
|
|
||||||
import { getStoreUrls, storeUrlLabel } from "../../utils/storeUrls";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
isOpen: boolean;
|
|
||||||
onClose: () => void;
|
|
||||||
stores: Store[];
|
|
||||||
onStoresChanged: (stores: Store[]) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Rozpracovaná editace obchodu — původní název slouží k jeho identifikaci na serveru. */
|
|
||||||
type EditState = {
|
|
||||||
originalName: string;
|
|
||||||
name: string;
|
|
||||||
urls: string[];
|
|
||||||
};
|
|
||||||
|
|
||||||
const PROVIDER_LABELS: Record<StoreMenuProvider, string> = { bolt: 'Bolt Food', wolt: 'Wolt' };
|
|
||||||
|
|
||||||
/** Krátký popis stavu stahování nabídky od jedné služby. */
|
|
||||||
function describeScrape(p: StoreScrapeStatus): { text: string, className: string, title?: string } {
|
|
||||||
const when = (iso?: string) => iso ? getHumanDateTime(new Date(iso)) : '';
|
|
||||||
switch (p.state) {
|
|
||||||
case 'ok':
|
|
||||||
return { text: `${p.dishCount} hlavních jídel (${when(p.lastSuccessAt)})${p.lastError ? ` · poslední obnovení selhalo: ${p.lastError}` : ''}`, className: 'text-success' };
|
|
||||||
case 'failed':
|
|
||||||
return { text: `selhalo ${p.failures}× (${when(p.lastAttemptAt)}): ${p.lastError ?? ''} · zkusí se znovu`, className: 'text-warning' };
|
|
||||||
case 'blocked':
|
|
||||||
return { text: `zablokováno po ${p.failures} neúspěších (${when(p.lastAttemptAt)}): ${p.lastError ?? ''}`, className: 'text-danger' };
|
|
||||||
default:
|
|
||||||
return { text: 'nestaženo', className: 'text-muted', title: 'Stáhne se automaticky, až bude nabídka potřeba v kole štěstí (a žádná jiná služba ji nemá)' };
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Vstupní pole pro URL nabídek — vždy alespoň jedno prázdné, aby bylo kam psát. */
|
|
||||||
function toUrlInputs(urls: string[]): string[] {
|
|
||||||
return urls.length > 0 ? urls : [''];
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function StoreAdminModal({ isOpen, onClose, stores, onStoresChanged }: Readonly<Props>) {
|
|
||||||
const [newName, setNewName] = useState('');
|
|
||||||
// Jeden podnik může být dostupný přes více dovozových služeb — proto seznam URL
|
|
||||||
const [newUrls, setNewUrls] = useState<string[]>(['']);
|
|
||||||
const [edit, setEdit] = useState<EditState | null>(null);
|
|
||||||
const [heslo, setHeslo] = useState('');
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [error, setError] = useState<string | null>(null);
|
|
||||||
// Server bez admin hesla — správa (přidání/úprava/odebrání/obnovení) nejde, zbývá jen přehled.
|
|
||||||
// undefined = konfigurace nenačtena, chováme se jako dřív (správa zapnutá).
|
|
||||||
const adminEnabled = useAppConfig().storeAdmin !== false;
|
|
||||||
const [scrapeInfo, setScrapeInfo] = useState<Record<string, StoreScrapeInfo>>({});
|
|
||||||
const [refreshing, setRefreshing] = useState<string | null>(null);
|
|
||||||
// Rozbalená historie cen („obchod|služba")
|
|
||||||
const [historyOpen, setHistoryOpen] = useState<string | null>(null);
|
|
||||||
|
|
||||||
// Stav stahování nabídek (Bolt Food/Wolt) — při otevření a po změně seznamu obchodů
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isOpen) return;
|
|
||||||
getStoreMenuStatus().then(res => {
|
|
||||||
setScrapeInfo(Object.fromEntries((res.data ?? []).map(i => [i.store, i])));
|
|
||||||
}).catch(() => { /* stav je jen informativní */ });
|
|
||||||
}, [isOpen, stores]);
|
|
||||||
|
|
||||||
const handleRefreshMenu = async (name: string, provider: StoreMenuProvider) => {
|
|
||||||
setError(null);
|
|
||||||
setRefreshing(`${name}|${provider}`);
|
|
||||||
try {
|
|
||||||
const res = await refreshStoreMenu({ body: { name, provider, heslo } });
|
|
||||||
if (res.data) {
|
|
||||||
setScrapeInfo(prev => ({ ...prev, [name]: res.data! }));
|
|
||||||
}
|
|
||||||
// Znovu načíst případně otevřenou historii (mohla přibýt nová verze)
|
|
||||||
if (historyOpen === `${name}|${provider}`) {
|
|
||||||
setHistoryOpen(null);
|
|
||||||
setTimeout(() => setHistoryOpen(`${name}|${provider}`));
|
|
||||||
}
|
|
||||||
} catch (e: any) {
|
|
||||||
setError(e.message || 'Nastala chyba');
|
|
||||||
} finally {
|
|
||||||
setRefreshing(null);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const addUrlRow = (urls: string[]) => [...urls, ''];
|
|
||||||
|
|
||||||
const removeUrlRow = (urls: string[], index: number) =>
|
|
||||||
urls.length === 1 ? [''] : urls.filter((_, i) => i !== index);
|
|
||||||
|
|
||||||
const setUrlAt = (urls: string[], index: number, value: string) =>
|
|
||||||
urls.map((u, i) => (i === index ? value : u));
|
|
||||||
|
|
||||||
/** Zpracuje odpověď API — vrací true při úspěchu. Chybu z API hlásí globální toaster. */
|
|
||||||
const applyResult = (res: { data?: unknown; error?: unknown }): boolean => {
|
|
||||||
if (res.error) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
if (res.data) {
|
|
||||||
onStoresChanged(res.data as Store[]);
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleAdd = async () => {
|
|
||||||
if (!newName.trim()) return;
|
|
||||||
setError(null);
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const urls = newUrls.map(u => u.trim()).filter(Boolean);
|
|
||||||
const res = await addStore({ body: { name: newName.trim(), urls: urls.length > 0 ? urls : undefined, heslo } });
|
|
||||||
if (applyResult(res)) {
|
|
||||||
setNewName('');
|
|
||||||
setNewUrls(['']);
|
|
||||||
}
|
|
||||||
} catch (e: any) {
|
|
||||||
setError(e.message || 'Nastala chyba');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const startEdit = (store: Store) => {
|
|
||||||
setError(null);
|
|
||||||
setEdit({ originalName: store.name, name: store.name, urls: toUrlInputs(store.urls ?? []) });
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSaveEdit = async () => {
|
|
||||||
if (!edit || !edit.name.trim()) return;
|
|
||||||
setError(null);
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const res = await updateStore({
|
|
||||||
body: {
|
|
||||||
name: edit.originalName,
|
|
||||||
newName: edit.name.trim(),
|
|
||||||
urls: edit.urls.map(u => u.trim()).filter(Boolean),
|
|
||||||
heslo,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
if (applyResult(res)) {
|
|
||||||
setEdit(null);
|
|
||||||
}
|
|
||||||
} catch (e: any) {
|
|
||||||
setError(e.message || 'Nastala chyba');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRemove = async (name: string) => {
|
|
||||||
setError(null);
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const res = await deleteStore({ body: { name, heslo } });
|
|
||||||
if (applyResult(res) && edit?.originalName === name) {
|
|
||||||
setEdit(null);
|
|
||||||
}
|
|
||||||
} catch (e: any) {
|
|
||||||
setError(e.message || 'Nastala chyba');
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Řádky se vstupy pro URL — používá se pro přidání i pro editaci obchodu. */
|
|
||||||
const renderUrlInputs = (urls: string[], onChange: (urls: string[]) => void, onSubmit: () => void) => (
|
|
||||||
<>
|
|
||||||
{urls.map((url, index) => (
|
|
||||||
<div key={index} className="d-flex gap-2 mb-2 align-items-center">
|
|
||||||
<Form.Control
|
|
||||||
type="url"
|
|
||||||
placeholder={index === 0
|
|
||||||
? 'URL na nabídku (volitelné, např. Bolt Food/Wolt)'
|
|
||||||
: 'Další URL na nabídku (jiná dovozová služba)'}
|
|
||||||
value={url}
|
|
||||||
onChange={e => onChange(setUrlAt(urls, index, e.target.value))}
|
|
||||||
onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') onSubmit(); }}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
variant="outline-secondary"
|
|
||||||
onClick={() => onChange(removeUrlRow(urls, index))}
|
|
||||||
disabled={urls.length === 1 && !url}
|
|
||||||
title="Odebrat tuto URL"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon icon={faXmark} />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
<Button variant="link" size="sm" className="p-0" onClick={() => onChange(addUrlRow(urls))}>
|
|
||||||
<FontAwesomeIcon icon={faPlus} className="me-1" />
|
|
||||||
Přidat další URL
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Modal show={isOpen} onHide={onClose} size="lg">
|
|
||||||
<Modal.Header closeButton>
|
|
||||||
<Modal.Title><h2>Správa obchodů</h2></Modal.Title>
|
|
||||||
</Modal.Header>
|
|
||||||
<Modal.Body>
|
|
||||||
{error && (
|
|
||||||
<Alert variant="danger" onClose={() => setError(null)} dismissible>
|
|
||||||
{error}
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!adminEnabled && (
|
|
||||||
<Alert variant="info">
|
|
||||||
Správa obchodů není na tomto serveru zapnutá (chybí <code>ADMIN_PASSWORD</code>).
|
|
||||||
Seznam obchodů, stav nabídek a historii cen lze jen prohlížet.
|
|
||||||
</Alert>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{adminEnabled && <>
|
|
||||||
<Form.Group className="mb-3">
|
|
||||||
<Form.Label>Admin heslo</Form.Label>
|
|
||||||
<Form.Control
|
|
||||||
type="password"
|
|
||||||
placeholder="Heslo"
|
|
||||||
value={heslo}
|
|
||||||
onChange={e => setHeslo(e.target.value)}
|
|
||||||
onKeyDown={e => e.stopPropagation()}
|
|
||||||
/>
|
|
||||||
<Form.Text className="text-muted">
|
|
||||||
Potřeba pro přidání, úpravu a odebrání obchodu i pro obnovení nabídky (<FontAwesomeIcon icon={faArrowsRotate} />).
|
|
||||||
</Form.Text>
|
|
||||||
</Form.Group>
|
|
||||||
|
|
||||||
<hr />
|
|
||||||
<h6>Přidat obchod</h6>
|
|
||||||
<Form.Control
|
|
||||||
className="mb-2"
|
|
||||||
type="text"
|
|
||||||
placeholder="Název obchodu"
|
|
||||||
value={newName}
|
|
||||||
onChange={e => setNewName(e.target.value)}
|
|
||||||
onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleAdd(); }}
|
|
||||||
/>
|
|
||||||
{renderUrlInputs(newUrls, setNewUrls, handleAdd)}
|
|
||||||
<div className="d-flex justify-content-end mb-3">
|
|
||||||
<Button variant="primary" onClick={handleAdd} disabled={loading || !newName.trim() || !heslo}>
|
|
||||||
Přidat
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</>}
|
|
||||||
|
|
||||||
<h6>Aktuální seznam</h6>
|
|
||||||
{stores.length === 0 ? (
|
|
||||||
<p className="text-muted">Žádné obchody v seznamu</p>
|
|
||||||
) : (
|
|
||||||
<ListGroup>
|
|
||||||
{stores.map(s => {
|
|
||||||
const urls = getStoreUrls(s);
|
|
||||||
const isEditing = edit?.originalName === s.name;
|
|
||||||
|
|
||||||
if (isEditing) {
|
|
||||||
return (
|
|
||||||
<ListGroup.Item key={s.name}>
|
|
||||||
<Form.Control
|
|
||||||
className="mb-2"
|
|
||||||
type="text"
|
|
||||||
placeholder="Název obchodu"
|
|
||||||
value={edit.name}
|
|
||||||
onChange={e => setEdit({ ...edit, name: e.target.value })}
|
|
||||||
onKeyDown={e => { e.stopPropagation(); if (e.key === 'Enter') handleSaveEdit(); }}
|
|
||||||
/>
|
|
||||||
{renderUrlInputs(edit.urls, next => setEdit({ ...edit, urls: next }), handleSaveEdit)}
|
|
||||||
<div className="d-flex justify-content-end gap-2 mt-2">
|
|
||||||
<Button variant="secondary" size="sm" onClick={() => setEdit(null)}>
|
|
||||||
Zrušit
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="primary"
|
|
||||||
size="sm"
|
|
||||||
onClick={handleSaveEdit}
|
|
||||||
disabled={loading || !edit.name.trim() || !heslo}
|
|
||||||
>
|
|
||||||
Uložit
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</ListGroup.Item>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ListGroup.Item key={s.name} className="d-flex justify-content-between align-items-start">
|
|
||||||
<div>
|
|
||||||
<div>{s.name}</div>
|
|
||||||
{urls.length > 0 && (
|
|
||||||
<small className="text-muted d-flex flex-wrap gap-2">
|
|
||||||
{urls.map(url => (
|
|
||||||
<a
|
|
||||||
key={url}
|
|
||||||
href={url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
title={url}
|
|
||||||
>
|
|
||||||
{storeUrlLabel(url)}
|
|
||||||
<FontAwesomeIcon icon={faUpRightFromSquare} className="ms-1" />
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</small>
|
|
||||||
)}
|
|
||||||
{scrapeInfo[s.name]?.providers.map(p => {
|
|
||||||
const { text, className, title } = describeScrape(p);
|
|
||||||
const key = `${s.name}|${p.provider}`;
|
|
||||||
return (
|
|
||||||
<div key={p.provider}>
|
|
||||||
<small className="d-flex align-items-baseline gap-2 mt-1">
|
|
||||||
<span className="text-nowrap text-muted">Menu {PROVIDER_LABELS[p.provider]}:</span>
|
|
||||||
<span className={className} title={title}>{text}</span>
|
|
||||||
{/* Zakázané tlačítko nezobrazí tooltip — obalení do span ho zobrazí i bez hesla */}
|
|
||||||
{adminEnabled && <OverlayTrigger
|
|
||||||
placement="top"
|
|
||||||
overlay={
|
|
||||||
<Tooltip>
|
|
||||||
{heslo
|
|
||||||
? `Znovu stáhnout nabídku z ${PROVIDER_LABELS[p.provider]}`
|
|
||||||
: 'Pro obnovení nabídky zadejte nahoře admin heslo'}
|
|
||||||
</Tooltip>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<span className="d-inline-block" style={{ cursor: heslo ? undefined : 'not-allowed' }}>
|
|
||||||
<Button
|
|
||||||
variant="link"
|
|
||||||
size="sm"
|
|
||||||
className="p-0"
|
|
||||||
disabled={!heslo || refreshing != null}
|
|
||||||
style={heslo ? undefined : { pointerEvents: 'none' }}
|
|
||||||
aria-label={`Znovu stáhnout nabídku z ${PROVIDER_LABELS[p.provider]}`}
|
|
||||||
onClick={() => handleRefreshMenu(s.name, p.provider)}
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon icon={faArrowsRotate} spin={refreshing === key} />
|
|
||||||
</Button>
|
|
||||||
</span>
|
|
||||||
</OverlayTrigger>}
|
|
||||||
{p.dishCount > 0 && (
|
|
||||||
<Button variant="link" size="sm" className="p-0 text-nowrap"
|
|
||||||
onClick={() => setHistoryOpen(historyOpen === key ? null : key)}>
|
|
||||||
{historyOpen === key ? 'skrýt historii' : 'historie cen'}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</small>
|
|
||||||
{historyOpen === key && <PriceHistory store={s.name} provider={p.provider} />}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
{adminEnabled && <div className="d-flex gap-3">
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon={faPen}
|
|
||||||
className="action-icon"
|
|
||||||
title="Upravit"
|
|
||||||
onClick={() => startEdit(s)}
|
|
||||||
style={{ cursor: 'pointer' }}
|
|
||||||
/>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon={faTrashCan}
|
|
||||||
className="action-icon"
|
|
||||||
title="Odebrat"
|
|
||||||
onClick={() => handleRemove(s.name)}
|
|
||||||
style={{ cursor: 'pointer' }}
|
|
||||||
/>
|
|
||||||
</div>}
|
|
||||||
</ListGroup.Item>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</ListGroup>
|
|
||||||
)}
|
|
||||||
</Modal.Body>
|
|
||||||
<Modal.Footer>
|
|
||||||
<Button variant="secondary" onClick={onClose}>Zavřít</Button>
|
|
||||||
</Modal.Footer>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
import { Modal, Button } from "react-bootstrap";
|
|
||||||
import { Suggestion } from "../../../../types";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
suggestion?: Suggestion;
|
|
||||||
onClose: () => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Modální dialog zobrazující celý detail návrhu na vylepšení. */
|
|
||||||
export default function SuggestionDetailModal({ suggestion, onClose }: Readonly<Props>) {
|
|
||||||
return (
|
|
||||||
<Modal show={!!suggestion} onHide={onClose} size="lg">
|
|
||||||
<Modal.Header closeButton>
|
|
||||||
<Modal.Title><h2>{suggestion?.title}</h2></Modal.Title>
|
|
||||||
</Modal.Header>
|
|
||||||
<Modal.Body>
|
|
||||||
<p className="text-muted mb-3">
|
|
||||||
Navrhovatel: <strong>{suggestion?.author}</strong> · Hlasy: <strong>{suggestion?.voteScore}</strong>
|
|
||||||
{suggestion?.resolved && <> · <strong>Vyřešeno</strong></>}
|
|
||||||
</p>
|
|
||||||
<p style={{ whiteSpace: "pre-wrap" }}>{suggestion?.description}</p>
|
|
||||||
</Modal.Body>
|
|
||||||
<Modal.Footer>
|
|
||||||
<Button variant="secondary" onClick={onClose}>
|
|
||||||
Zavřít
|
|
||||||
</Button>
|
|
||||||
</Modal.Footer>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -4,34 +4,18 @@ const BANK_ACCOUNT_NUMBER_KEY = 'bank_account_number';
|
|||||||
const BANK_ACCOUNT_HOLDER_KEY = 'bank_account_holder_name';
|
const BANK_ACCOUNT_HOLDER_KEY = 'bank_account_holder_name';
|
||||||
const HIDE_SOUPS_KEY = 'hide_soups';
|
const HIDE_SOUPS_KEY = 'hide_soups';
|
||||||
const THEME_KEY = 'theme_preference';
|
const THEME_KEY = 'theme_preference';
|
||||||
const ACCENT_HUE_KEY = 'accent_hue';
|
|
||||||
const LEGACY_COLOR_THEME_KEY = 'color_theme';
|
|
||||||
const STYLE_THEME_KEY = 'style_theme';
|
|
||||||
|
|
||||||
export type ThemePreference = 'system' | 'light' | 'dark';
|
export type ThemePreference = 'system' | 'light' | 'dark';
|
||||||
|
|
||||||
/** Vizuální styl aplikace (nezávislý na světlém/tmavém režimu). */
|
|
||||||
export type StyleTheme = 'simple' | 'umamusume';
|
|
||||||
|
|
||||||
export const STYLE_THEMES: { value: StyleTheme, label: string }[] = [
|
|
||||||
{ value: 'simple', label: 'Jednoduchý' },
|
|
||||||
{ value: 'umamusume', label: 'Umamusume' },
|
|
||||||
];
|
|
||||||
|
|
||||||
export type SettingsContextProps = {
|
export type SettingsContextProps = {
|
||||||
bankAccount?: string,
|
bankAccount?: string,
|
||||||
holderName?: string,
|
holderName?: string,
|
||||||
hideSoups?: boolean,
|
hideSoups?: boolean,
|
||||||
themePreference: ThemePreference,
|
themePreference: ThemePreference,
|
||||||
accentHue: number,
|
|
||||||
effectiveDark: boolean,
|
|
||||||
styleTheme: StyleTheme,
|
|
||||||
setBankAccountNumber: (accountNumber?: string) => void,
|
setBankAccountNumber: (accountNumber?: string) => void,
|
||||||
setBankAccountHolderName: (holderName?: string) => void,
|
setBankAccountHolderName: (holderName?: string) => void,
|
||||||
setHideSoupsOption: (hideSoups?: boolean) => void,
|
setHideSoupsOption: (hideSoups?: boolean) => void,
|
||||||
setThemePreference: (theme: ThemePreference) => void,
|
setThemePreference: (theme: ThemePreference) => void,
|
||||||
setAccentHue: (hue: number) => void,
|
|
||||||
setStyleTheme: (theme: StyleTheme) => void,
|
|
||||||
}
|
}
|
||||||
|
|
||||||
type ContextProps = {
|
type ContextProps = {
|
||||||
@@ -61,92 +45,11 @@ function getInitialTheme(): ThemePreference {
|
|||||||
return 'system';
|
return 'system';
|
||||||
}
|
}
|
||||||
|
|
||||||
function getInitialStyleTheme(): StyleTheme {
|
|
||||||
try {
|
|
||||||
if (localStorage.getItem(STYLE_THEME_KEY) === 'umamusume') {
|
|
||||||
return 'umamusume';
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// localStorage nedostupný
|
|
||||||
}
|
|
||||||
return 'simple';
|
|
||||||
}
|
|
||||||
|
|
||||||
function getInitialAccentHue(): number {
|
|
||||||
try {
|
|
||||||
const saved = localStorage.getItem(ACCENT_HUE_KEY);
|
|
||||||
if (saved !== null) {
|
|
||||||
const n = parseInt(saved, 10);
|
|
||||||
if (!isNaN(n) && n >= 0 && n <= 360) return n;
|
|
||||||
}
|
|
||||||
// Migrace ze starého string formátu (green/blue/purple)
|
|
||||||
const old = localStorage.getItem(LEGACY_COLOR_THEME_KEY);
|
|
||||||
if (old === 'blue') return 217;
|
|
||||||
if (old === 'purple') return 263;
|
|
||||||
} catch {
|
|
||||||
// localStorage nedostupný
|
|
||||||
}
|
|
||||||
return 142;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Převod HSL na relativní jas dle WCAG (pro výpočet kontrastu s bílým textem)
|
|
||||||
function hslToRelativeLuminance(h: number, s: number, l: number): number {
|
|
||||||
const sn = s / 100, ln = l / 100;
|
|
||||||
const a = sn * Math.min(ln, 1 - ln);
|
|
||||||
const ch = (n: number) => {
|
|
||||||
const k = (n + h / 30) % 12;
|
|
||||||
return ln - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
|
|
||||||
};
|
|
||||||
const toLinear = (c: number) => c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
|
|
||||||
return 0.2126 * toLinear(ch(0)) + 0.7152 * toLinear(ch(8)) + 0.0722 * toLinear(ch(4));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Najde nejnižší světlost, při které má barva dostatečný kontrast s bílým textem (WCAG AA 4.5:1)
|
|
||||||
function adjustedL(hue: number, sat: number, targetL: number): number {
|
|
||||||
let l = targetL;
|
|
||||||
while (l >= 5) {
|
|
||||||
const lum = hslToRelativeLuminance(hue, sat, l);
|
|
||||||
if (1.05 / (lum + 0.05) >= 4.5) return l;
|
|
||||||
l -= 1;
|
|
||||||
}
|
|
||||||
return l;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ACCENT_PROPERTIES = ['--luncher-primary', '--luncher-primary-hover', '--luncher-primary-light', '--luncher-action-icon', '--luncher-success'];
|
|
||||||
|
|
||||||
function clearAccentColors(): void {
|
|
||||||
ACCENT_PROPERTIES.forEach(p => document.documentElement.style.removeProperty(p));
|
|
||||||
}
|
|
||||||
|
|
||||||
function applyAccentColors(hue: number, isDark: boolean): void {
|
|
||||||
const sat = 70;
|
|
||||||
const baseL = adjustedL(hue, sat, isDark ? 55 : 38);
|
|
||||||
const hoverL = isDark ? Math.min(baseL + 10, 80) : Math.max(baseL - 10, 10);
|
|
||||||
const root = document.documentElement;
|
|
||||||
root.style.setProperty('--luncher-primary', `hsl(${hue} ${sat}% ${baseL}%)`);
|
|
||||||
root.style.setProperty('--luncher-primary-hover', `hsl(${hue} ${sat}% ${hoverL}%)`);
|
|
||||||
root.style.setProperty('--luncher-primary-light', isDark
|
|
||||||
? `hsl(${hue} 60% 12%)`
|
|
||||||
: `hsl(${hue} 60% 92%)`);
|
|
||||||
root.style.setProperty('--luncher-action-icon', `hsl(${hue} ${sat}% ${baseL}%)`);
|
|
||||||
root.style.setProperty('--luncher-success', `hsl(${hue} ${sat}% ${baseL}%)`);
|
|
||||||
}
|
|
||||||
|
|
||||||
function useProvideSettings(): SettingsContextProps {
|
function useProvideSettings(): SettingsContextProps {
|
||||||
const [bankAccount, setBankAccount] = useState<string | undefined>();
|
const [bankAccount, setBankAccount] = useState<string | undefined>();
|
||||||
const [holderName, setHolderName] = useState<string | undefined>();
|
const [holderName, setHolderName] = useState<string | undefined>();
|
||||||
const [hideSoups, setHideSoups] = useState<boolean | undefined>();
|
const [hideSoups, setHideSoups] = useState<boolean | undefined>();
|
||||||
const [themePreference, setTheme] = useState<ThemePreference>(getInitialTheme);
|
const [themePreference, setTheme] = useState<ThemePreference>(getInitialTheme);
|
||||||
const [accentHue, setHue] = useState<number>(getInitialAccentHue);
|
|
||||||
const [styleTheme, setStyle] = useState<StyleTheme>(getInitialStyleTheme);
|
|
||||||
const [effectiveDark, setEffectiveDark] = useState<boolean>(() => {
|
|
||||||
try {
|
|
||||||
const pref = localStorage.getItem(THEME_KEY) as ThemePreference | null;
|
|
||||||
if (pref === 'dark') return true;
|
|
||||||
if (pref === 'light') return false;
|
|
||||||
} catch { /* noop */ }
|
|
||||||
return window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
|
|
||||||
});
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const accountNumber = localStorage.getItem(BANK_ACCOUNT_NUMBER_KEY);
|
const accountNumber = localStorage.getItem(BANK_ACCOUNT_NUMBER_KEY);
|
||||||
@@ -192,37 +95,24 @@ function useProvideSettings(): SettingsContextProps {
|
|||||||
}, [themePreference]);
|
}, [themePreference]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const applyTheme = (dark: boolean) => {
|
const applyTheme = (theme: 'light' | 'dark') => {
|
||||||
document.documentElement.setAttribute('data-bs-theme', dark ? 'dark' : 'light');
|
document.documentElement.setAttribute('data-bs-theme', theme);
|
||||||
setEffectiveDark(dark);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
if (themePreference === 'system') {
|
if (themePreference === 'system') {
|
||||||
const mq = window.matchMedia('(prefers-color-scheme: dark)');
|
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||||
applyTheme(mq.matches);
|
applyTheme(mediaQuery.matches ? 'dark' : 'light');
|
||||||
const handler = (e: MediaQueryListEvent) => applyTheme(e.matches);
|
|
||||||
mq.addEventListener('change', handler);
|
const handler = (e: MediaQueryListEvent) => {
|
||||||
return () => mq.removeEventListener('change', handler);
|
applyTheme(e.matches ? 'dark' : 'light');
|
||||||
|
};
|
||||||
|
mediaQuery.addEventListener('change', handler);
|
||||||
|
return () => mediaQuery.removeEventListener('change', handler);
|
||||||
} else {
|
} else {
|
||||||
applyTheme(themePreference === 'dark');
|
applyTheme(themePreference);
|
||||||
}
|
}
|
||||||
}, [themePreference]);
|
}, [themePreference]);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
localStorage.setItem(STYLE_THEME_KEY, styleTheme);
|
|
||||||
document.documentElement.setAttribute('data-luncher-theme', styleTheme);
|
|
||||||
}, [styleTheme]);
|
|
||||||
|
|
||||||
// Aplikuje accent barvy při změně hue nebo přepnutí světlý/tmavý.
|
|
||||||
// Styl Umamusume má vlastní pevnou paletu, accent barvu proto uplatňuje jen jednoduchý styl.
|
|
||||||
useEffect(() => {
|
|
||||||
localStorage.setItem(ACCENT_HUE_KEY, String(accentHue));
|
|
||||||
if (styleTheme === 'simple') {
|
|
||||||
applyAccentColors(accentHue, effectiveDark);
|
|
||||||
} else {
|
|
||||||
clearAccentColors();
|
|
||||||
}
|
|
||||||
}, [accentHue, effectiveDark, styleTheme]);
|
|
||||||
|
|
||||||
function setBankAccountNumber(bankAccount?: string) {
|
function setBankAccountNumber(bankAccount?: string) {
|
||||||
setBankAccount(bankAccount);
|
setBankAccount(bankAccount);
|
||||||
}
|
}
|
||||||
@@ -239,27 +129,14 @@ function useProvideSettings(): SettingsContextProps {
|
|||||||
setTheme(theme);
|
setTheme(theme);
|
||||||
}
|
}
|
||||||
|
|
||||||
function setAccentHue(hue: number) {
|
|
||||||
setHue(hue);
|
|
||||||
}
|
|
||||||
|
|
||||||
function setStyleTheme(theme: StyleTheme) {
|
|
||||||
setStyle(theme);
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
bankAccount,
|
bankAccount,
|
||||||
holderName,
|
holderName,
|
||||||
hideSoups,
|
hideSoups,
|
||||||
themePreference,
|
themePreference,
|
||||||
accentHue,
|
|
||||||
effectiveDark,
|
|
||||||
setBankAccountNumber,
|
setBankAccountNumber,
|
||||||
setBankAccountHolderName,
|
setBankAccountHolderName,
|
||||||
setHideSoupsOption,
|
setHideSoupsOption,
|
||||||
setThemePreference,
|
setThemePreference,
|
||||||
setAccentHue,
|
|
||||||
styleTheme,
|
|
||||||
setStyleTheme,
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,27 +8,13 @@ if (process.env.NODE_ENV === 'development') {
|
|||||||
socketPath = undefined;
|
socketPath = undefined;
|
||||||
} else {
|
} else {
|
||||||
socketUrl = `${globalThis.location.host}`;
|
socketUrl = `${globalThis.location.host}`;
|
||||||
socketPath = '/socket.io';
|
socketPath = `${globalThis.location.pathname}socket.io`;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const socket = socketio.connect(socketUrl, { path: socketPath, transports: ["websocket"] });
|
export const socket = socketio.connect(socketUrl, { path: socketPath, transports: ["websocket"] });
|
||||||
export const SocketContext = React.createContext();
|
export const SocketContext = React.createContext();
|
||||||
|
|
||||||
// Prohlížeče throttlují setTimeout v neaktivních tabech, což zdržuje automatické
|
|
||||||
// znovupřipojení socket.io. Po návratu do tabu nebo focusu okna se připojíme hned.
|
|
||||||
document.addEventListener('visibilitychange', () => {
|
|
||||||
if (document.visibilityState === 'visible' && !socket.connected) {
|
|
||||||
socket.connect();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
window.addEventListener('focus', () => {
|
|
||||||
if (!socket.connected) {
|
|
||||||
socket.connect();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Konstanty websocket eventů, musí odpovídat těm na serveru!
|
// Konstanty websocket eventů, musí odpovídat těm na serveru!
|
||||||
export const EVENT_CONNECT = 'connect';
|
export const EVENT_CONNECT = 'connect';
|
||||||
export const EVENT_DISCONNECT = 'disconnect';
|
export const EVENT_DISCONNECT = 'disconnect';
|
||||||
export const EVENT_MESSAGE = 'message';
|
export const EVENT_MESSAGE = 'message';
|
||||||
export const EVENT_PENDING_QR = 'pendingQr';
|
|
||||||
|
|||||||
@@ -1,256 +0,0 @@
|
|||||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
||||||
import {
|
|
||||||
ButterflyStats,
|
|
||||||
getButterflyStats,
|
|
||||||
catchButterflies,
|
|
||||||
repairNet as repairNetApi,
|
|
||||||
killWasp as killWaspApi,
|
|
||||||
buyRepellent as buyRepellentApi,
|
|
||||||
reportNetTorn as reportTearApi,
|
|
||||||
reportRobbery as reportRobberyApi,
|
|
||||||
defeatThief as defeatThiefApi,
|
|
||||||
reportCaterpillarAte as caterpillarAteApi,
|
|
||||||
defeatCaterpillar as defeatCaterpillarApi,
|
|
||||||
reportMothHit as mothHitApi,
|
|
||||||
reportInspectionFail as inspectionFailApi,
|
|
||||||
buyPremiumNet as buyPremiumApi,
|
|
||||||
buyWaspSpray as waspSprayApi,
|
|
||||||
buyInsurance as buyInsuranceApi,
|
|
||||||
buyUpgrade as buyUpgradeApi,
|
|
||||||
} from '../../../types';
|
|
||||||
|
|
||||||
/** Druhy trvalých vylepšení v obchodě. */
|
|
||||||
export type UpgradeItem = 'net' | 'scarecrow' | 'reinforced';
|
|
||||||
|
|
||||||
/** Výsledek nákupu: úspěch / nedostatek mincí / jiná chyba (např. starý server). */
|
|
||||||
export type BuyResult = 'ok' | 'poor' | 'error';
|
|
||||||
|
|
||||||
/** Jak dlouho se čeká, než se nasbíraná dávka úlovků odešle na server. */
|
|
||||||
const FLUSH_DEBOUNCE_MS = 1500;
|
|
||||||
/** Jak často se přenačte stav ze serveru (kvůli přibývajícím škůdcům). */
|
|
||||||
const POLL_INTERVAL_MS = 30_000;
|
|
||||||
|
|
||||||
/** Událost odměny hlášená scéně po úspěšném odeslání dávky. */
|
|
||||||
export interface RewardEvent {
|
|
||||||
coinsAwarded: number;
|
|
||||||
dailyBonusApplied: boolean;
|
|
||||||
leveledUp: boolean;
|
|
||||||
premiumUnlocked: boolean;
|
|
||||||
newLevel: number;
|
|
||||||
newTitle: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Hook spravující serverovou perzistenci chytání motýlků: načtení stavu, dávkové
|
|
||||||
* odesílání úlovků, hubení vos, plašič ptáků, protržení/opravu síťky, zloděje a
|
|
||||||
* periodické přenačítání (růst škůdců). Server je zdroj pravdy; počítadlo se
|
|
||||||
* zobrazuje jako serverová hodnota + zatím neodeslané úlovky.
|
|
||||||
*/
|
|
||||||
export function useButterflyStats(onReward?: (e: RewardEvent) => void) {
|
|
||||||
const [stats, setStats] = useState<ButterflyStats | undefined>();
|
|
||||||
/** Optimisticky zobrazený přírůstek chycených, který ještě neodešel na server. */
|
|
||||||
const [pendingShown, setPendingShown] = useState(0);
|
|
||||||
/** Živá hodnota mincí pro scénu (aby nečetla zastaralý stav přes closure). */
|
|
||||||
const coinsRef = useRef(0);
|
|
||||||
const pending = useRef({ normal: 0, golden: 0 });
|
|
||||||
const flushTimer = useRef<number | null>(null);
|
|
||||||
const onRewardRef = useRef(onReward);
|
|
||||||
onRewardRef.current = onReward;
|
|
||||||
|
|
||||||
const applyStats = useCallback((incoming: ButterflyStats) => {
|
|
||||||
coinsRef.current = incoming.coins;
|
|
||||||
setStats(incoming);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const flush = useCallback(async () => {
|
|
||||||
if (flushTimer.current) {
|
|
||||||
clearTimeout(flushTimer.current);
|
|
||||||
flushTimer.current = null;
|
|
||||||
}
|
|
||||||
const batch = pending.current;
|
|
||||||
const batchTotal = batch.normal + batch.golden;
|
|
||||||
if (batchTotal === 0) return;
|
|
||||||
pending.current = { normal: 0, golden: 0 };
|
|
||||||
try {
|
|
||||||
const res = await catchButterflies({ body: { normal: batch.normal, golden: batch.golden } });
|
|
||||||
if (res.data) {
|
|
||||||
applyStats(res.data.stats);
|
|
||||||
// Odeslané úlovky už jsou v serverové hodnotě → sundáme je z optimistického přírůstku
|
|
||||||
setPendingShown(p => Math.max(0, p - batchTotal));
|
|
||||||
onRewardRef.current?.({
|
|
||||||
coinsAwarded: res.data.coinsAwarded,
|
|
||||||
dailyBonusApplied: res.data.dailyBonusApplied,
|
|
||||||
leveledUp: res.data.leveledUp,
|
|
||||||
premiumUnlocked: res.data.premiumUnlocked,
|
|
||||||
newLevel: res.data.stats.level,
|
|
||||||
newTitle: res.data.stats.title,
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
setPendingShown(p => Math.max(0, p - batchTotal));
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// Při chybě vrátíme dávku zpět (přírůstek necháme zobrazený)
|
|
||||||
pending.current.normal += batch.normal;
|
|
||||||
pending.current.golden += batch.golden;
|
|
||||||
}
|
|
||||||
}, [applyStats]);
|
|
||||||
|
|
||||||
/** Nahlásí chycení jednoho motýla (optimisticky + naplánuje odeslání dávky). */
|
|
||||||
const reportCatch = useCallback((golden: boolean) => {
|
|
||||||
if (golden) pending.current.golden += 1;
|
|
||||||
else pending.current.normal += 1;
|
|
||||||
setPendingShown(p => p + 1);
|
|
||||||
if (!flushTimer.current) {
|
|
||||||
flushTimer.current = window.setTimeout(() => { void flush(); }, FLUSH_DEBOUNCE_MS);
|
|
||||||
}
|
|
||||||
}, [flush]);
|
|
||||||
|
|
||||||
const repair = useCallback(async (): Promise<boolean> => {
|
|
||||||
try {
|
|
||||||
const res = await repairNetApi();
|
|
||||||
if (res.data) { applyStats(res.data); return true; }
|
|
||||||
return false;
|
|
||||||
} catch { return false; }
|
|
||||||
}, [applyStats]);
|
|
||||||
|
|
||||||
const killWasp = useCallback(async () => {
|
|
||||||
try {
|
|
||||||
const res = await killWaspApi();
|
|
||||||
if (res.data) applyStats(res.data);
|
|
||||||
} catch { /* ignore */ }
|
|
||||||
}, [applyStats]);
|
|
||||||
|
|
||||||
const buyRepellent = useCallback(async (): Promise<BuyResult> => {
|
|
||||||
try {
|
|
||||||
const res = await buyRepellentApi();
|
|
||||||
if (res.data) { applyStats(res.data); return 'ok'; }
|
|
||||||
return res.response?.status === 402 ? 'poor' : 'error';
|
|
||||||
} catch { return 'error'; }
|
|
||||||
}, [applyStats]);
|
|
||||||
|
|
||||||
const reportTear = useCallback(async () => {
|
|
||||||
try {
|
|
||||||
const res = await reportTearApi();
|
|
||||||
if (res.data) applyStats(res.data);
|
|
||||||
} catch { /* ignore */ }
|
|
||||||
}, [applyStats]);
|
|
||||||
|
|
||||||
/** Zloděj se dostal k penězům – server strhne podíl mincí. */
|
|
||||||
const reportRobbery = useCallback(async () => {
|
|
||||||
try {
|
|
||||||
const res = await reportRobberyApi();
|
|
||||||
if (res.data) applyStats(res.data);
|
|
||||||
} catch { /* ignore */ }
|
|
||||||
}, [applyStats]);
|
|
||||||
|
|
||||||
/** Hráč porazil zloděje – odměna a statistika. */
|
|
||||||
const defeatThief = useCallback(async () => {
|
|
||||||
try {
|
|
||||||
const res = await defeatThiefApi();
|
|
||||||
if (res.data) applyStats(res.data);
|
|
||||||
} catch { /* ignore */ }
|
|
||||||
}, [applyStats]);
|
|
||||||
|
|
||||||
/** Housenka se dostala k úlovkům – server sníží počet chycených. */
|
|
||||||
const caterpillarAte = useCallback(async () => {
|
|
||||||
try {
|
|
||||||
const res = await caterpillarAteApi();
|
|
||||||
if (res.data) applyStats(res.data);
|
|
||||||
} catch { /* ignore */ }
|
|
||||||
}, [applyStats]);
|
|
||||||
|
|
||||||
/** Hráč omylem chytil černou můru – server sníží úlovky. */
|
|
||||||
const mothHit = useCallback(async () => {
|
|
||||||
try {
|
|
||||||
const res = await mothHitApi();
|
|
||||||
if (res.data) applyStats(res.data);
|
|
||||||
} catch { /* ignore */ }
|
|
||||||
}, [applyStats]);
|
|
||||||
|
|
||||||
/** Selhání anti-bot inspekce – server počítá selhání a případně udělí ban. */
|
|
||||||
const reportInspectionFail = useCallback(async () => {
|
|
||||||
try {
|
|
||||||
const res = await inspectionFailApi();
|
|
||||||
if (res.data) applyStats(res.data);
|
|
||||||
} catch { /* ignore */ }
|
|
||||||
}, [applyStats]);
|
|
||||||
|
|
||||||
/** Vyhodnotí výsledek nákupu z odpovědi (402 = nedostatek mincí, jinak chyba). */
|
|
||||||
const buyResult = useCallback((res: { data?: unknown; response?: Response }): BuyResult => {
|
|
||||||
if (res.data) { applyStats(res.data as ButterflyStats); return 'ok'; }
|
|
||||||
return res.response?.status === 402 ? 'poor' : 'error';
|
|
||||||
}, [applyStats]);
|
|
||||||
|
|
||||||
/** Obchod: koupě spotřebního předmětu / vylepšení. */
|
|
||||||
const buyPremium = useCallback(async (): Promise<BuyResult> => {
|
|
||||||
try { return buyResult(await buyPremiumApi()); } catch { return 'error'; }
|
|
||||||
}, [buyResult]);
|
|
||||||
const waspSpray = useCallback(async (): Promise<BuyResult> => {
|
|
||||||
try { return buyResult(await waspSprayApi()); } catch { return 'error'; }
|
|
||||||
}, [buyResult]);
|
|
||||||
const buyInsurance = useCallback(async (): Promise<BuyResult> => {
|
|
||||||
try { return buyResult(await buyInsuranceApi()); } catch { return 'error'; }
|
|
||||||
}, [buyResult]);
|
|
||||||
const buyUpgrade = useCallback(async (item: UpgradeItem): Promise<BuyResult> => {
|
|
||||||
try { return buyResult(await buyUpgradeApi({ body: { item } })); } catch { return 'error'; }
|
|
||||||
}, [buyResult]);
|
|
||||||
|
|
||||||
/** Hráč porazil housenku – odměna a statistika. */
|
|
||||||
const defeatCaterpillar = useCallback(async () => {
|
|
||||||
try {
|
|
||||||
const res = await defeatCaterpillarApi();
|
|
||||||
if (res.data) applyStats(res.data);
|
|
||||||
} catch { /* ignore */ }
|
|
||||||
}, [applyStats]);
|
|
||||||
|
|
||||||
const refresh = useCallback(async () => {
|
|
||||||
try {
|
|
||||||
const res = await getButterflyStats();
|
|
||||||
if (res.data) applyStats(res.data);
|
|
||||||
} catch { /* ignore */ }
|
|
||||||
}, [applyStats]);
|
|
||||||
|
|
||||||
// Načtení stavu
|
|
||||||
useEffect(() => {
|
|
||||||
let cancelled = false;
|
|
||||||
(async () => {
|
|
||||||
try {
|
|
||||||
const res = await getButterflyStats();
|
|
||||||
if (!cancelled && res.data) applyStats(res.data);
|
|
||||||
} catch { /* server nedostupný – hra jede dál bez perzistence */ }
|
|
||||||
})();
|
|
||||||
return () => { cancelled = true; };
|
|
||||||
}, [applyStats]);
|
|
||||||
|
|
||||||
// Periodické přenačítání (růst škůdců) + při návratu na záložku
|
|
||||||
useEffect(() => {
|
|
||||||
const id = window.setInterval(() => { void refresh(); }, POLL_INTERVAL_MS);
|
|
||||||
const onVisible = () => { if (document.visibilityState === 'visible') void refresh(); };
|
|
||||||
document.addEventListener('visibilitychange', onVisible);
|
|
||||||
return () => {
|
|
||||||
window.clearInterval(id);
|
|
||||||
document.removeEventListener('visibilitychange', onVisible);
|
|
||||||
};
|
|
||||||
}, [refresh]);
|
|
||||||
|
|
||||||
// Odeslání rozdělané dávky při skrytí/opuštění stránky a při odmontování
|
|
||||||
useEffect(() => {
|
|
||||||
const onVisibility = () => { if (document.visibilityState === 'hidden') void flush(); };
|
|
||||||
const onPageHide = () => { void flush(); };
|
|
||||||
document.addEventListener('visibilitychange', onVisibility);
|
|
||||||
window.addEventListener('pagehide', onPageHide);
|
|
||||||
return () => {
|
|
||||||
document.removeEventListener('visibilitychange', onVisibility);
|
|
||||||
window.removeEventListener('pagehide', onPageHide);
|
|
||||||
void flush();
|
|
||||||
};
|
|
||||||
}, [flush]);
|
|
||||||
|
|
||||||
const displayCaught = (stats?.caught ?? 0) + pendingShown;
|
|
||||||
|
|
||||||
return {
|
|
||||||
stats, displayCaught, coinsRef, reportCatch, repair, killWasp, buyRepellent,
|
|
||||||
reportTear, reportRobbery, defeatThief, caterpillarAte, defeatCaterpillar,
|
|
||||||
mothHit, reportInspectionFail, buyPremium, waspSpray, buyInsurance, buyUpgrade,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
import { useSyncExternalStore } from "react";
|
|
||||||
import { getAppConfig, getGroupLimits, subscribeAppConfig } from "../utils/appConfig";
|
|
||||||
|
|
||||||
/** Aktuální limity skupinových objednávek (překreslí se po načtení konfigurace ze serveru). */
|
|
||||||
export function useGroupLimits() {
|
|
||||||
return useSyncExternalStore(subscribeAppConfig, getGroupLimits);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Celá runtime konfigurace ze serveru (způsob přihlášení, zapnuté funkce, limity). */
|
|
||||||
export function useAppConfig() {
|
|
||||||
return useSyncExternalStore(subscribeAppConfig, getAppConfig);
|
|
||||||
}
|
|
||||||
@@ -27,10 +27,9 @@ async function pushApiFetch(path: string, options: RequestInit = {}): Promise<Re
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Zaregistruje service worker, přihlásí se k push notifikacím
|
* Zaregistruje service worker, přihlásí se k push notifikacím
|
||||||
* a odešle subscription na server. `reminderTime` je volitelný — bez něj
|
* a odešle subscription na server.
|
||||||
* uživatel odebírá jen ostatní push notifikace (např. doručení objednávky).
|
|
||||||
*/
|
*/
|
||||||
export async function subscribeToPush(reminderTime?: string): Promise<boolean> {
|
export async function subscribeToPush(reminderTime: string): Promise<boolean> {
|
||||||
if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
|
if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
|
||||||
console.warn('Push notifikace nejsou v tomto prohlížeči podporovány');
|
console.warn('Push notifikace nejsou v tomto prohlížeči podporovány');
|
||||||
return false;
|
return false;
|
||||||
@@ -76,7 +75,7 @@ export async function subscribeToPush(reminderTime?: string): Promise<boolean> {
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log('Push notifikace: úspěšně přihlášeno', reminderTime ? `(připomínka v ${reminderTime})` : '(bez připomínky oběda)');
|
console.log('Push notifikace: úspěšně přihlášeno k připomínkám v', reminderTime);
|
||||||
return true;
|
return true;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Push notifikace: chyba při registraci', error);
|
console.error('Push notifikace: chyba při registraci', error);
|
||||||
@@ -102,7 +101,7 @@ export async function unsubscribeFromPush(): Promise<void> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
await pushApiFetch('/unsubscribe', { method: 'POST' });
|
await pushApiFetch('/unsubscribe', { method: 'POST' });
|
||||||
console.log('Push notifikace: úspěšně odhlášeno');
|
console.log('Push notifikace: úspěšně odhlášeno z připomínek');
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Push notifikace: chyba při odhlášení', error);
|
console.error('Push notifikace: chyba při odhlášení', error);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,48 +6,20 @@ import './index.css';
|
|||||||
import AppRoutes from './AppRoutes';
|
import AppRoutes from './AppRoutes';
|
||||||
import { BrowserRouter } from 'react-router';
|
import { BrowserRouter } from 'react-router';
|
||||||
import { client } from '../../types/gen/client.gen';
|
import { client } from '../../types/gen/client.gen';
|
||||||
import { getConfig } from '../../types/gen/sdk.gen';
|
|
||||||
import { getToken } from './Utils';
|
import { getToken } from './Utils';
|
||||||
import { toast } from 'react-toastify';
|
import { toast } from 'react-toastify';
|
||||||
import * as Sentry from '@sentry/react';
|
|
||||||
import { setAppConfig } from './utils/appConfig';
|
|
||||||
|
|
||||||
client.setConfig({
|
client.setConfig({
|
||||||
auth: () => getToken(),
|
auth: () => getToken(),
|
||||||
baseUrl: '/api', // openapi-ts si to z nějakého důvodu neumí převzít z api.yml
|
baseUrl: '/api', // openapi-ts si to z nějakého důvodu neumí převzít z api.yml
|
||||||
});
|
});
|
||||||
|
|
||||||
// Sentry se inicializuje až podle runtime konfigurace ze serveru (bez DSN zůstává vypnuté).
|
|
||||||
// Klient je statický build, takže DSN ani limity nejde zapéct při buildu — server je zná z env.
|
|
||||||
getConfig().then(({ data }) => {
|
|
||||||
setAppConfig({
|
|
||||||
loaded: true,
|
|
||||||
trustedHeaders: data?.auth?.trustedHeaders,
|
|
||||||
storeAdmin: data?.features?.storeAdmin,
|
|
||||||
groupLimits: data?.limits?.group,
|
|
||||||
});
|
|
||||||
if (data?.sentry.dsn) {
|
|
||||||
Sentry.init({
|
|
||||||
dsn: data.sentry.dsn,
|
|
||||||
environment: data.sentry.environment,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}).catch(() => {
|
|
||||||
// Config endpoint nedostupný — běžíme bez Sentry, s výchozími limity a původním chováním přihlášení
|
|
||||||
setAppConfig({ loaded: true });
|
|
||||||
});
|
|
||||||
|
|
||||||
// Interceptor na vyhození toasteru při chybě
|
// Interceptor na vyhození toasteru při chybě
|
||||||
client.interceptors.response.use(async response => {
|
client.interceptors.response.use(async response => {
|
||||||
// TODO opravit - login je zatím výjimka, voláme ho "naprázdno" abychom zjistili, zda nás nepřihlásily trusted headers
|
// TODO opravit - login je zatím výjimka, voláme ho "naprázdno" abychom zjistili, zda nás nepřihlásily trusted headers
|
||||||
if (!response.ok && !response.url.includes("/login")) {
|
if (!response.ok && !response.url.includes("/login")) {
|
||||||
// Čteme z klonu, aby tělo odpovědi zůstalo k dispozici i generovanému SDK
|
const json = await response.json();
|
||||||
const json = await response.clone().json();
|
|
||||||
toast.error(json.error, { theme: "colored" });
|
toast.error(json.error, { theme: "colored" });
|
||||||
// Serverové chyby hlásíme do Sentry; 4xx jsou očekávané (chyby uživatele)
|
|
||||||
if (response.status >= 500) {
|
|
||||||
Sentry.captureMessage(`API ${response.status}: ${new URL(response.url).pathname} — ${json.error}`, 'error');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
return response;
|
return response;
|
||||||
});
|
});
|
||||||
@@ -57,18 +29,10 @@ const root = ReactDOM.createRoot(
|
|||||||
);
|
);
|
||||||
root.render(
|
root.render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
<Sentry.ErrorBoundary fallback={
|
<BrowserRouter>
|
||||||
<div className="text-center p-5">
|
<ProvideAuth>
|
||||||
<h4>Něco se pokazilo 😕</h4>
|
<AppRoutes />
|
||||||
<p>Chyba byla nahlášena. Zkuste stránku načíst znovu.</p>
|
</ProvideAuth>
|
||||||
<button className="btn btn-primary" onClick={() => window.location.reload()}>Načíst znovu</button>
|
</BrowserRouter>
|
||||||
</div>
|
|
||||||
}>
|
|
||||||
<BrowserRouter>
|
|
||||||
<ProvideAuth>
|
|
||||||
<AppRoutes />
|
|
||||||
</ProvideAuth>
|
|
||||||
</BrowserRouter>
|
|
||||||
</Sentry.ErrorBoundary>
|
|
||||||
</React.StrictMode>
|
</React.StrictMode>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -46,47 +46,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.export-panel {
|
|
||||||
margin-top: 32px;
|
|
||||||
padding: 24px;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 560px;
|
|
||||||
background: var(--luncher-bg-card);
|
|
||||||
border: 1px solid var(--luncher-border-light);
|
|
||||||
border-radius: var(--luncher-radius-lg);
|
|
||||||
box-shadow: var(--luncher-shadow-sm);
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--luncher-text);
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.export-hint {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: var(--luncher-text-secondary);
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.export-controls {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 12px;
|
|
||||||
|
|
||||||
input {
|
|
||||||
max-width: 180px;
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
max-width: 160px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Chart container
|
// Chart container
|
||||||
.recharts-wrapper {
|
.recharts-wrapper {
|
||||||
background: var(--luncher-bg-card);
|
background: var(--luncher-bg-card);
|
||||||
@@ -130,4 +89,67 @@
|
|||||||
.recharts-cartesian-grid-vertical line {
|
.recharts-cartesian-grid-vertical line {
|
||||||
stroke: var(--luncher-border);
|
stroke: var(--luncher-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.voting-stats-section {
|
||||||
|
margin-top: 48px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 800px;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--luncher-text);
|
||||||
|
margin-bottom: 16px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.voting-stats-table {
|
||||||
|
width: 100%;
|
||||||
|
background: var(--luncher-bg-card);
|
||||||
|
border-radius: var(--luncher-radius-lg);
|
||||||
|
box-shadow: var(--luncher-shadow);
|
||||||
|
border: 1px solid var(--luncher-border-light);
|
||||||
|
overflow: hidden;
|
||||||
|
border-collapse: collapse;
|
||||||
|
|
||||||
|
th {
|
||||||
|
background: var(--luncher-primary);
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 12px 20px;
|
||||||
|
text-align: left;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
text-align: center;
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 12px 20px;
|
||||||
|
border-bottom: 1px solid var(--luncher-border-light);
|
||||||
|
color: var(--luncher-text);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--luncher-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody tr {
|
||||||
|
transition: var(--luncher-transition);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--luncher-bg-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child td {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -4,10 +4,9 @@ import Header from "../components/Header";
|
|||||||
import { useAuth } from "../context/auth";
|
import { useAuth } from "../context/auth";
|
||||||
import Login from "../Login";
|
import Login from "../Login";
|
||||||
import { formatDate, getFirstWorkDayOfWeek, getHumanDate, getLastWorkDayOfWeek } from "../Utils";
|
import { formatDate, getFirstWorkDayOfWeek, getHumanDate, getLastWorkDayOfWeek } from "../Utils";
|
||||||
import { WeeklyStats, LunchChoice, getStats, getStatsExport } from "../../../types";
|
import { WeeklyStats, LunchChoice, VotingStats, FeatureRequest, getStats, getVotingStats } from "../../../types";
|
||||||
import Loader from "../components/Loader";
|
import Loader from "../components/Loader";
|
||||||
import { faChevronLeft, faChevronRight, faGear, faFileExcel, faFileCsv, faFileCode } from "@fortawesome/free-solid-svg-icons";
|
import { faChevronLeft, faChevronRight, faGear } from "@fortawesome/free-solid-svg-icons";
|
||||||
import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
|
|
||||||
import { Legend, Line, LineChart, Tooltip, XAxis, YAxis } from "recharts";
|
import { Legend, Line, LineChart, Tooltip, XAxis, YAxis } from "recharts";
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||||
import { getLunchChoiceName } from "../enums";
|
import { getLunchChoiceName } from "../enums";
|
||||||
@@ -29,35 +28,11 @@ const COLORS = [
|
|||||||
'#7c7c7c',
|
'#7c7c7c',
|
||||||
]
|
]
|
||||||
|
|
||||||
/** Podporované formáty exportu přehledu (viz GET /api/stats/export). */
|
|
||||||
const EXPORT_FORMATS = ['xlsx', 'csv', 'json'] as const;
|
|
||||||
|
|
||||||
type ExportFormat = typeof EXPORT_FORMATS[number];
|
|
||||||
|
|
||||||
const EXPORT_FORMAT_LABELS: Record<ExportFormat, string> = {
|
|
||||||
xlsx: 'Excel (.xlsx)',
|
|
||||||
csv: 'CSV (.csv)',
|
|
||||||
json: 'JSON (.json)',
|
|
||||||
};
|
|
||||||
|
|
||||||
const EXPORT_FORMAT_ICONS: Record<ExportFormat, IconDefinition> = {
|
|
||||||
xlsx: faFileExcel,
|
|
||||||
csv: faFileCsv,
|
|
||||||
json: faFileCode,
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Vrátí měsíc předaného data ve formátu YYYY-MM (hodnota pro input type="month"). */
|
|
||||||
function getMonthValue(date: Date) {
|
|
||||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function StatsPage() {
|
export default function StatsPage() {
|
||||||
const auth = useAuth();
|
const auth = useAuth();
|
||||||
const [dateRange, setDateRange] = useState<Date[]>();
|
const [dateRange, setDateRange] = useState<Date[]>();
|
||||||
const [data, setData] = useState<WeeklyStats>();
|
const [data, setData] = useState<WeeklyStats>();
|
||||||
const [exportMonth, setExportMonth] = useState<string>(() => getMonthValue(new Date()));
|
const [votingStats, setVotingStats] = useState<VotingStats>();
|
||||||
const [exportFormat, setExportFormat] = useState<ExportFormat>('xlsx');
|
|
||||||
const [exporting, setExporting] = useState(false);
|
|
||||||
|
|
||||||
// Prvotní nastavení aktuálního týdne
|
// Prvotní nastavení aktuálního týdne
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -74,36 +49,24 @@ export default function StatsPage() {
|
|||||||
}
|
}
|
||||||
}, [dateRange]);
|
}, [dateRange]);
|
||||||
|
|
||||||
|
// Načtení statistik hlasování
|
||||||
|
useEffect(() => {
|
||||||
|
getVotingStats().then(response => {
|
||||||
|
setVotingStats(response.data);
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const sortedVotingStats = useMemo(() => {
|
||||||
|
if (!votingStats) return [];
|
||||||
|
return Object.entries(votingStats)
|
||||||
|
.sort((a, b) => (b[1] as number) - (a[1] as number));
|
||||||
|
}, [votingStats]);
|
||||||
|
|
||||||
const renderLine = (location: LunchChoice) => {
|
const renderLine = (location: LunchChoice) => {
|
||||||
const index = Object.values(LunchChoice).indexOf(location);
|
const index = Object.values(LunchChoice).indexOf(location);
|
||||||
return <Line key={location} name={getLunchChoiceName(location)} type="monotone" dataKey={data => data.locations[location] ?? 0} stroke={COLORS[index]} strokeWidth={STROKE_WIDTH} />
|
return <Line key={location} name={getLunchChoiceName(location)} type="monotone" dataKey={data => data.locations[location] ?? 0} stroke={COLORS[index]} strokeWidth={STROKE_WIDTH} />
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Stáhne přehled stravování přihlášeného uživatele za vybraný měsíc ve vybraném formátu. */
|
|
||||||
const handleExport = async () => {
|
|
||||||
const [year, month] = exportMonth.split('-').map(Number);
|
|
||||||
if (!year || !month) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
setExporting(true);
|
|
||||||
try {
|
|
||||||
// parseAs 'blob' — odpověď chceme stáhnout tak, jak přišla, bez parsování dle typu
|
|
||||||
const { data: file } = await getStatsExport({ query: { year, month, format: exportFormat }, parseAs: 'blob' });
|
|
||||||
// Chyby řeší globální interceptor (toaster), stahujeme jen při úspěchu
|
|
||||||
if (!(file instanceof Blob)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const url = URL.createObjectURL(file);
|
|
||||||
const link = document.createElement('a');
|
|
||||||
link.href = url;
|
|
||||||
link.download = `luncher-${auth?.login ?? 'prehled'}-${exportMonth}.${exportFormat}`;
|
|
||||||
link.click();
|
|
||||||
URL.revokeObjectURL(url);
|
|
||||||
} finally {
|
|
||||||
setExporting(false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handlePreviousWeek = () => {
|
const handlePreviousWeek = () => {
|
||||||
if (dateRange) {
|
if (dateRange) {
|
||||||
const previousStartDate = new Date(dateRange[0]);
|
const previousStartDate = new Date(dateRange[0]);
|
||||||
@@ -126,8 +89,9 @@ export default function StatsPage() {
|
|||||||
|
|
||||||
const isCurrentOrFutureWeek = useMemo(() => {
|
const isCurrentOrFutureWeek = useMemo(() => {
|
||||||
if (!dateRange) return true;
|
if (!dateRange) return true;
|
||||||
// Porovnáváme jen dny (obě data nesou čas svého vzniku), dopředu jde jít nejvýše na aktuální týden
|
const currentWeekEnd = getLastWorkDayOfWeek(new Date());
|
||||||
return formatDate(dateRange[1]) >= formatDate(getLastWorkDayOfWeek(new Date()));
|
currentWeekEnd.setHours(23, 59, 59, 999);
|
||||||
|
return dateRange[1] >= currentWeekEnd;
|
||||||
}, [dateRange]);
|
}, [dateRange]);
|
||||||
|
|
||||||
const handleKeyDown = useCallback((e: any) => {
|
const handleKeyDown = useCallback((e: any) => {
|
||||||
@@ -178,40 +142,27 @@ export default function StatsPage() {
|
|||||||
<Tooltip />
|
<Tooltip />
|
||||||
<Legend />
|
<Legend />
|
||||||
</LineChart>
|
</LineChart>
|
||||||
<div className="export-panel">
|
{sortedVotingStats.length > 0 && (
|
||||||
<h3>Můj přehled</h3>
|
<div className="voting-stats-section">
|
||||||
<p className="export-hint">
|
<h2>Hlasování o funkcích</h2>
|
||||||
Přehled vašich záznamů za vybraný měsíc — datum, kde jste jedli, vybrané jídlo, poznámka
|
<table className="voting-stats-table">
|
||||||
a u objednávek i částka po slevě.
|
<thead>
|
||||||
</p>
|
<tr>
|
||||||
<div className="export-controls">
|
<th>Funkce</th>
|
||||||
<input
|
<th>Počet hlasů</th>
|
||||||
type="month"
|
</tr>
|
||||||
className="form-control"
|
</thead>
|
||||||
value={exportMonth}
|
<tbody>
|
||||||
max={getMonthValue(new Date())}
|
{sortedVotingStats.map(([feature, count]) => (
|
||||||
onChange={e => setExportMonth(e.target.value)}
|
<tr key={feature}>
|
||||||
/>
|
<td>{FeatureRequest[feature as keyof typeof FeatureRequest] ?? feature}</td>
|
||||||
<select
|
<td>{count as number}</td>
|
||||||
className="form-select"
|
</tr>
|
||||||
value={exportFormat}
|
))}
|
||||||
onChange={e => setExportFormat(e.target.value as ExportFormat)}
|
</tbody>
|
||||||
>
|
</table>
|
||||||
{EXPORT_FORMATS.map(format => (
|
|
||||||
<option key={format} value={format}>{EXPORT_FORMAT_LABELS[format]}</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="btn btn-primary"
|
|
||||||
disabled={exporting || !exportMonth}
|
|
||||||
onClick={handleExport}
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon icon={EXPORT_FORMAT_ICONS[exportFormat]} />{' '}
|
|
||||||
{exporting ? 'Generuji...' : 'Stáhnout přehled'}
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -1,145 +0,0 @@
|
|||||||
.suggestions-page {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
padding: 32px 24px;
|
|
||||||
min-height: calc(100vh - 140px);
|
|
||||||
background: var(--luncher-bg);
|
|
||||||
|
|
||||||
.suggestions-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 24px;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 900px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--luncher-text);
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.suggestions-info {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 900px;
|
|
||||||
margin: 12px 0 24px;
|
|
||||||
color: var(--luncher-text-secondary);
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.suggestions-empty {
|
|
||||||
color: var(--luncher-text-secondary);
|
|
||||||
margin-top: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.resolved-section {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 900px;
|
|
||||||
margin-top: 48px;
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--luncher-text);
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.suggestions-table.resolved {
|
|
||||||
th {
|
|
||||||
background: var(--luncher-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
td.col-score {
|
|
||||||
color: var(--luncher-text-secondary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.suggestions-table {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 900px;
|
|
||||||
background: var(--luncher-bg-card);
|
|
||||||
border-radius: var(--luncher-radius-lg);
|
|
||||||
box-shadow: var(--luncher-shadow);
|
|
||||||
border: 1px solid var(--luncher-border-light);
|
|
||||||
overflow: hidden;
|
|
||||||
border-collapse: collapse;
|
|
||||||
|
|
||||||
th {
|
|
||||||
background: var(--luncher-primary);
|
|
||||||
color: #ffffff;
|
|
||||||
padding: 12px 20px;
|
|
||||||
text-align: left;
|
|
||||||
font-weight: 600;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
padding: 12px 20px;
|
|
||||||
border-bottom: 1px solid var(--luncher-border-light);
|
|
||||||
color: var(--luncher-text);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-score {
|
|
||||||
text-align: center;
|
|
||||||
width: 80px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
td.col-score {
|
|
||||||
color: var(--luncher-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-actions {
|
|
||||||
text-align: center;
|
|
||||||
width: 150px;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody tr {
|
|
||||||
cursor: pointer;
|
|
||||||
transition: var(--luncher-transition);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: var(--luncher-bg-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child td {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.vote-btn {
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 6px 8px;
|
|
||||||
border-radius: var(--luncher-radius-sm, 6px);
|
|
||||||
color: var(--luncher-text-secondary);
|
|
||||||
transition: var(--luncher-transition);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: var(--luncher-bg-hover);
|
|
||||||
color: var(--luncher-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.vote-up.active {
|
|
||||||
color: #2e7d32;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.vote-down.active {
|
|
||||||
color: #c62828;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.delete-btn:hover {
|
|
||||||
color: #c62828;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,187 +0,0 @@
|
|||||||
import { useCallback, useEffect, useState } from "react";
|
|
||||||
import { Button, OverlayTrigger, Tooltip } from "react-bootstrap";
|
|
||||||
import { ToastContainer } from "react-toastify";
|
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
||||||
import { faThumbsUp, faThumbsDown, faTrash, faPlus, faGear } from "@fortawesome/free-solid-svg-icons";
|
|
||||||
import Header from "../components/Header";
|
|
||||||
import Footer from "../components/Footer";
|
|
||||||
import Loader from "../components/Loader";
|
|
||||||
import { useAuth } from "../context/auth";
|
|
||||||
import Login from "../Login";
|
|
||||||
import AddSuggestionModal from "../components/modals/AddSuggestionModal";
|
|
||||||
import SuggestionDetailModal from "../components/modals/SuggestionDetailModal";
|
|
||||||
import {
|
|
||||||
Suggestion,
|
|
||||||
VoteDirection,
|
|
||||||
listSuggestions,
|
|
||||||
addSuggestion,
|
|
||||||
voteSuggestion,
|
|
||||||
deleteSuggestion,
|
|
||||||
} from "../../../types";
|
|
||||||
import "./SuggestionsPage.scss";
|
|
||||||
|
|
||||||
export default function SuggestionsPage() {
|
|
||||||
const auth = useAuth();
|
|
||||||
const [suggestions, setSuggestions] = useState<Suggestion[]>();
|
|
||||||
const [addModalOpen, setAddModalOpen] = useState(false);
|
|
||||||
const [detail, setDetail] = useState<Suggestion>();
|
|
||||||
|
|
||||||
const reload = useCallback(async () => {
|
|
||||||
if (!auth?.login) return;
|
|
||||||
const response = await listSuggestions();
|
|
||||||
setSuggestions(response.data ?? []);
|
|
||||||
}, [auth?.login]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
reload();
|
|
||||||
}, [reload]);
|
|
||||||
|
|
||||||
const handleAdd = async (title: string, description: string) => {
|
|
||||||
const response = await addSuggestion({ body: { title, description } });
|
|
||||||
if (response.data) {
|
|
||||||
setSuggestions(response.data);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleVote = async (id: string, direction: VoteDirection) => {
|
|
||||||
const response = await voteSuggestion({ body: { id, direction } });
|
|
||||||
if (response.data) {
|
|
||||||
setSuggestions(response.data);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDelete = async (suggestion: Suggestion) => {
|
|
||||||
if (!window.confirm(`Opravdu chcete smazat návrh „${suggestion.title}“? Smažou se i všechny jeho hlasy.`)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const response = await deleteSuggestion({ body: { id: suggestion.id } });
|
|
||||||
if (response.data) {
|
|
||||||
setSuggestions(response.data);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Vykreslí jeden řádek tabulky. Vyřešené návrhy jsou read-only (bez hlasování),
|
|
||||||
// ale autor je stále může smazat.
|
|
||||||
const renderRow = (suggestion: Suggestion) => (
|
|
||||||
<OverlayTrigger
|
|
||||||
key={suggestion.id}
|
|
||||||
placement="top"
|
|
||||||
overlay={<Tooltip id={`tooltip-${suggestion.id}`}>{suggestion.description}</Tooltip>}
|
|
||||||
>
|
|
||||||
<tr onClick={() => setDetail(suggestion)}>
|
|
||||||
<td>{suggestion.author}</td>
|
|
||||||
<td>{suggestion.title}</td>
|
|
||||||
<td className="col-score">{suggestion.voteScore}</td>
|
|
||||||
<td className="col-actions" onClick={e => e.stopPropagation()}>
|
|
||||||
{!suggestion.resolved && (
|
|
||||||
<>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={`vote-btn vote-up ${suggestion.myVote === VoteDirection.UP ? "active" : ""}`}
|
|
||||||
title="Hlasovat pro"
|
|
||||||
onClick={() => handleVote(suggestion.id, VoteDirection.UP)}
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon icon={faThumbsUp} />
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={`vote-btn vote-down ${suggestion.myVote === VoteDirection.DOWN ? "active" : ""}`}
|
|
||||||
title="Hlasovat proti"
|
|
||||||
onClick={() => handleVote(suggestion.id, VoteDirection.DOWN)}
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon icon={faThumbsDown} />
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{suggestion.isMine && (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="vote-btn delete-btn"
|
|
||||||
title="Smazat návrh"
|
|
||||||
onClick={() => handleDelete(suggestion)}
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon icon={faTrash} />
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</OverlayTrigger>
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!auth?.login) {
|
|
||||||
return <Login />;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!suggestions) {
|
|
||||||
return <Loader icon={faGear} description={"Načítám návrhy..."} animation={"fa-bounce"} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
const activeSuggestions = suggestions.filter(s => !s.resolved);
|
|
||||||
const resolvedSuggestions = suggestions.filter(s => s.resolved);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Header />
|
|
||||||
<div className="suggestions-page">
|
|
||||||
<div className="suggestions-header">
|
|
||||||
<h1>Návrhy na vylepšení</h1>
|
|
||||||
<Button onClick={() => setAddModalOpen(true)}>
|
|
||||||
<FontAwesomeIcon icon={faPlus} /> Přidat návrh
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<p className="suggestions-info">
|
|
||||||
Zde můžete navrhovat vylepšení aplikace a hlasovat o návrzích ostatních. U každého návrhu je
|
|
||||||
zobrazeno jméno navrhovatele. Jména hlasujících jsou dostupná pouze administrátorům.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
{suggestions.length === 0 ? (
|
|
||||||
<p className="suggestions-empty">Zatím nebyly přidány žádné návrhy. Buďte první!</p>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{activeSuggestions.length > 0 && (
|
|
||||||
<table className="suggestions-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Navrhovatel</th>
|
|
||||||
<th>Název</th>
|
|
||||||
<th className="col-score">Hlasy</th>
|
|
||||||
<th className="col-actions">Akce</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{activeSuggestions.map(renderRow)}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{resolvedSuggestions.length > 0 && (
|
|
||||||
<div className="resolved-section">
|
|
||||||
<h2>Vyřešené návrhy</h2>
|
|
||||||
<p className="suggestions-info">
|
|
||||||
Tyto návrhy již byly zapracovány. Nelze pro ně hlasovat, autor je však může odstranit.
|
|
||||||
</p>
|
|
||||||
<table className="suggestions-table resolved">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Navrhovatel</th>
|
|
||||||
<th>Název</th>
|
|
||||||
<th className="col-score">Hlasy</th>
|
|
||||||
<th className="col-actions">Akce</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{resolvedSuggestions.map(renderRow)}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<Footer />
|
|
||||||
<AddSuggestionModal isOpen={addModalOpen} onClose={() => setAddModalOpen(false)} onSubmit={handleAdd} />
|
|
||||||
<SuggestionDetailModal suggestion={detail} onClose={() => setDetail(undefined)} />
|
|
||||||
<ToastContainer />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,371 +0,0 @@
|
|||||||
// ============================================
|
|
||||||
// STYL "UMAMUSUME" (volitelný, výchozí je jednoduchý styl)
|
|
||||||
// Inspirováno Umamusume: Pretty Derby — trávník dostihové dráhy, růžové
|
|
||||||
// a nebesky modré akcenty, zlaté lemy, zaoblené tučné písmo a „tlačítka z her".
|
|
||||||
// Aktivní, pokud má <html> atribut data-luncher-theme="umamusume".
|
|
||||||
// Jednoduchý styl (data-luncher-theme="simple") zůstává beze změny v App.scss.
|
|
||||||
// ============================================
|
|
||||||
|
|
||||||
$uma: 'html[data-luncher-theme="umamusume"]';
|
|
||||||
|
|
||||||
#{$uma} {
|
|
||||||
--uma-font: 'M PLUS Rounded 1c', 'Nunito', 'Inter', -apple-system, sans-serif;
|
|
||||||
--uma-turf: #5cc23d;
|
|
||||||
--uma-turf-deep: #2e9a3a;
|
|
||||||
--uma-turf-shadow: #1f7a2c;
|
|
||||||
--uma-pink: #ff6fa3;
|
|
||||||
--uma-pink-deep: #e84d86;
|
|
||||||
--uma-sky: #43b8f0;
|
|
||||||
--uma-gold: #ffc531;
|
|
||||||
--uma-card-border: #c6ebb2;
|
|
||||||
--uma-stripe: rgb(92 194 61 / 0.06);
|
|
||||||
|
|
||||||
--luncher-primary: var(--uma-turf-deep);
|
|
||||||
--luncher-primary-hover: #268a31;
|
|
||||||
--luncher-primary-light: #e7f8dc;
|
|
||||||
--luncher-bg: #f4fbef;
|
|
||||||
--luncher-bg-card: #ffffff;
|
|
||||||
--luncher-bg-hover: #eef8e7;
|
|
||||||
--luncher-text: #1d3322;
|
|
||||||
--luncher-text-secondary: #4a6450;
|
|
||||||
--luncher-text-muted: #8aa290;
|
|
||||||
--luncher-border: #d7ecca;
|
|
||||||
--luncher-border-light: #e6f4dc;
|
|
||||||
--luncher-navbar-bg: var(--uma-turf-deep);
|
|
||||||
--luncher-navbar-text: #ffffff;
|
|
||||||
--luncher-action-icon: var(--uma-turf-deep);
|
|
||||||
--luncher-buyer-icon: #f08c00;
|
|
||||||
--luncher-success: var(--uma-turf-deep);
|
|
||||||
--luncher-warning: #f08c00;
|
|
||||||
--luncher-danger: #e8436a;
|
|
||||||
--luncher-radius-sm: 10px;
|
|
||||||
--luncher-radius: 14px;
|
|
||||||
--luncher-radius-lg: 18px;
|
|
||||||
--luncher-radius-xl: 22px;
|
|
||||||
--luncher-shadow: 0 4px 0 rgb(46 154 58 / 0.12), 0 8px 18px -8px rgb(29 51 34 / 0.18);
|
|
||||||
--luncher-shadow-lg: 0 6px 0 rgb(46 154 58 / 0.14), 0 14px 28px -10px rgb(29 51 34 / 0.25);
|
|
||||||
|
|
||||||
|
|
||||||
&[data-bs-theme="dark"] {
|
|
||||||
// Noční dostih pod reflektory
|
|
||||||
--uma-turf: #58c93a;
|
|
||||||
--uma-turf-deep: #3cae3f;
|
|
||||||
--uma-turf-shadow: #1c5e25;
|
|
||||||
--uma-card-border: #2c3a66;
|
|
||||||
--uma-stripe: rgb(255 255 255 / 0.025);
|
|
||||||
|
|
||||||
--luncher-primary: #6fdc4a;
|
|
||||||
--luncher-primary-hover: #8ae86a;
|
|
||||||
--luncher-primary-light: #1d3a24;
|
|
||||||
--luncher-bg: #10172b;
|
|
||||||
--luncher-bg-card: #19223d;
|
|
||||||
--luncher-bg-hover: #222d4f;
|
|
||||||
--luncher-text: #f3f6ff;
|
|
||||||
--luncher-text-secondary: #b8c2e0;
|
|
||||||
--luncher-text-muted: #7d89ad;
|
|
||||||
--luncher-border: #2c3a66;
|
|
||||||
--luncher-border-light: #232e52;
|
|
||||||
--luncher-navbar-bg: #1b6b2c;
|
|
||||||
--luncher-action-icon: #6fdc4a;
|
|
||||||
--luncher-buyer-icon: var(--uma-gold);
|
|
||||||
--luncher-success: #6fdc4a;
|
|
||||||
--luncher-warning: var(--uma-gold);
|
|
||||||
--luncher-danger: #ff6f93;
|
|
||||||
--luncher-shadow: 0 4px 0 rgb(0 0 0 / 0.35), 0 10px 20px -8px rgb(0 0 0 / 0.5);
|
|
||||||
--luncher-shadow-lg: 0 6px 0 rgb(0 0 0 / 0.4), 0 16px 30px -10px rgb(0 0 0 / 0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: var(--uma-font);
|
|
||||||
background-color: var(--luncher-bg);
|
|
||||||
background-image: repeating-linear-gradient(135deg, var(--uma-stripe) 0 18px, transparent 18px 36px);
|
|
||||||
background-attachment: fixed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-container {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3, h4, .navbar-brand, .btn {
|
|
||||||
font-family: var(--uma-font);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------- Navbar: zelený pruh se šikmými proužky a zlatým lemem ----------
|
|
||||||
.navbar {
|
|
||||||
background:
|
|
||||||
repeating-linear-gradient(115deg, rgb(255 255 255 / 0.10) 0 14px, transparent 14px 28px),
|
|
||||||
linear-gradient(90deg, var(--uma-turf-deep), var(--uma-turf)) !important;
|
|
||||||
border-bottom: 4px solid var(--uma-gold);
|
|
||||||
box-shadow: 0 3px 0 rgb(0 0 0 / 0.08);
|
|
||||||
|
|
||||||
.navbar-brand {
|
|
||||||
font-weight: 800;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
text-shadow: 0 2px 0 var(--uma-turf-shadow), 0 0 12px rgb(255 255 255 / 0.25);
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
display: inline-block;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
margin-left: 6px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: var(--uma-pink);
|
|
||||||
box-shadow: 0 0 0 3px rgb(255 255 255 / 0.9);
|
|
||||||
vertical-align: super;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu {
|
|
||||||
border: 2px solid var(--uma-card-border);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------- Titulek dne: šikmá stuha jako název dostihu ----------
|
|
||||||
.day-navigator .title {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 6px 28px;
|
|
||||||
font-weight: 800;
|
|
||||||
font-size: 1.7rem;
|
|
||||||
color: #fff !important;
|
|
||||||
background: linear-gradient(90deg, var(--uma-pink-deep), var(--uma-pink));
|
|
||||||
clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
|
|
||||||
text-shadow: 0 2px 0 rgb(0 0 0 / 0.15);
|
|
||||||
|
|
||||||
&.text-muted {
|
|
||||||
background: linear-gradient(90deg, #8aa290, #a9bfae);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------- Karty podniků ----------
|
|
||||||
.restaurant-card {
|
|
||||||
border: 3px solid var(--uma-card-border);
|
|
||||||
border-radius: var(--luncher-radius-lg);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: translateY(-3px);
|
|
||||||
border-color: var(--uma-turf);
|
|
||||||
}
|
|
||||||
|
|
||||||
.restaurant-header {
|
|
||||||
position: relative;
|
|
||||||
background:
|
|
||||||
repeating-linear-gradient(115deg, rgb(255 255 255 / 0.12) 0 10px, transparent 10px 20px),
|
|
||||||
linear-gradient(90deg, var(--uma-turf-deep), var(--uma-turf));
|
|
||||||
border-bottom: 3px solid var(--uma-gold);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background:
|
|
||||||
repeating-linear-gradient(115deg, rgb(255 255 255 / 0.12) 0 10px, transparent 10px 20px),
|
|
||||||
linear-gradient(90deg, var(--uma-pink-deep), var(--uma-pink));
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-weight: 800;
|
|
||||||
text-shadow: 0 2px 0 rgb(0 0 0 / 0.18);
|
|
||||||
}
|
|
||||||
|
|
||||||
small {
|
|
||||||
color: rgb(255 255 255 / 0.85);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.food-table tbody tr:hover > td {
|
|
||||||
background: #fff0f6;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-bs-theme="dark"] .food-table tbody tr:hover > td {
|
|
||||||
background: #2a2344;
|
|
||||||
}
|
|
||||||
|
|
||||||
.food-price {
|
|
||||||
color: var(--uma-pink-deep);
|
|
||||||
font-weight: 800;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-bs-theme="dark"] .food-price {
|
|
||||||
color: var(--uma-pink);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------- Panely a tabulka voleb ----------
|
|
||||||
.choice-section,
|
|
||||||
.choices-table,
|
|
||||||
.pizza-section,
|
|
||||||
.no-votes {
|
|
||||||
border: 3px solid var(--uma-card-border);
|
|
||||||
border-radius: var(--luncher-radius-lg);
|
|
||||||
box-shadow: var(--luncher-shadow);
|
|
||||||
}
|
|
||||||
|
|
||||||
// <table> s border-collapse: collapse ignoruje border-radius — kulaté rohy jen se „separate"
|
|
||||||
.choices-table {
|
|
||||||
border-collapse: separate;
|
|
||||||
border-spacing: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.choices-table > tbody > tr > td:first-child {
|
|
||||||
background: linear-gradient(90deg, #ffe3ee, #fff3f8);
|
|
||||||
color: var(--uma-pink-deep);
|
|
||||||
font-weight: 800;
|
|
||||||
border-right: 3px solid var(--uma-card-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-bs-theme="dark"] .choices-table > tbody > tr > td:first-child {
|
|
||||||
background: linear-gradient(90deg, #3b2446, #2a2140);
|
|
||||||
color: var(--uma-pink);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Bootstrap karty (skupinové objednávky apod.) a seznamy — stejné zaoblení a lem jako ostatní panely
|
|
||||||
.card {
|
|
||||||
border: 3px solid var(--uma-card-border);
|
|
||||||
border-radius: var(--luncher-radius-lg);
|
|
||||||
box-shadow: var(--luncher-shadow);
|
|
||||||
overflow: hidden;
|
|
||||||
background: var(--luncher-bg-card);
|
|
||||||
|
|
||||||
// Rozbalovací výběr z nabídky nesmí karta oříznout
|
|
||||||
&:has(.select-search-container) {
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .card-header {
|
|
||||||
background: var(--luncher-primary-light);
|
|
||||||
border-bottom: 3px solid var(--uma-card-border);
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
border-radius: calc(var(--luncher-radius-lg) - 3px) calc(var(--luncher-radius-lg) - 3px) 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Průhledná tabulka — rohy pak zaobluje karta sama (i když nesmí ořezávat obsah)
|
|
||||||
.table {
|
|
||||||
--bs-table-bg: transparent;
|
|
||||||
margin-bottom: 0;
|
|
||||||
|
|
||||||
// Spodní linka posledního řádku by přečnívala přes zaoblené rohy
|
|
||||||
> :last-child > tr:last-child > * {
|
|
||||||
border-bottom-width: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-group {
|
|
||||||
border-radius: var(--luncher-radius);
|
|
||||||
overflow: hidden;
|
|
||||||
border: 2px solid var(--uma-card-border);
|
|
||||||
|
|
||||||
> .list-group-item {
|
|
||||||
border-left: none;
|
|
||||||
border-right: none;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-select, .form-control,
|
|
||||||
input[type="text"], input[type="email"], input[type="password"] {
|
|
||||||
border-radius: 999px;
|
|
||||||
border-width: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------- Tlačítka „ze hry": pilulka s vystouplým spodním okrajem ----------
|
|
||||||
.btn {
|
|
||||||
border-radius: 999px;
|
|
||||||
font-weight: 800;
|
|
||||||
letter-spacing: 0.2px;
|
|
||||||
transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.2s ease;
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
transform: translateY(3px) !important;
|
|
||||||
box-shadow: 0 1px 0 var(--uma-btn-shadow, transparent) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
--uma-btn-shadow: var(--uma-turf-shadow);
|
|
||||||
background: linear-gradient(180deg, #7ad85a, var(--uma-turf-deep));
|
|
||||||
box-shadow: 0 4px 0 var(--uma-turf-shadow);
|
|
||||||
text-shadow: 0 1px 0 rgb(0 0 0 / 0.2);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: linear-gradient(180deg, #8be26b, #35a940);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
background: #b9cbbd;
|
|
||||||
box-shadow: 0 4px 0 #97aa9b;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-outline-primary {
|
|
||||||
--uma-btn-shadow: var(--uma-card-border);
|
|
||||||
background: var(--luncher-bg-card);
|
|
||||||
border: 2px solid var(--uma-turf);
|
|
||||||
color: var(--luncher-primary);
|
|
||||||
box-shadow: 0 4px 0 var(--uma-card-border);
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: var(--luncher-primary-light);
|
|
||||||
color: var(--luncher-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-secondary {
|
|
||||||
--uma-btn-shadow: #c9d3cb;
|
|
||||||
background: var(--luncher-bg-card);
|
|
||||||
border: 2px solid var(--luncher-border);
|
|
||||||
box-shadow: 0 4px 0 var(--luncher-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-danger {
|
|
||||||
--uma-btn-shadow: #b3264b;
|
|
||||||
background: linear-gradient(180deg, #ff7f9d, var(--luncher-danger));
|
|
||||||
box-shadow: 0 4px 0 #b3264b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-icon:hover {
|
|
||||||
background: #ffe3ee;
|
|
||||||
color: var(--uma-pink-deep);
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-bs-theme="dark"] .action-icon:hover {
|
|
||||||
background: #3b2446;
|
|
||||||
color: var(--uma-pink);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ---------- Modaly ----------
|
|
||||||
.modal-content {
|
|
||||||
border: 3px solid var(--uma-card-border);
|
|
||||||
border-radius: var(--luncher-radius-xl);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
background:
|
|
||||||
repeating-linear-gradient(115deg, rgb(255 255 255 / 0.12) 0 12px, transparent 12px 24px),
|
|
||||||
linear-gradient(90deg, var(--uma-turf-deep), var(--uma-turf));
|
|
||||||
border-bottom: 3px solid var(--uma-gold);
|
|
||||||
|
|
||||||
.modal-title, .modal-title h2 {
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 800;
|
|
||||||
text-shadow: 0 2px 0 rgb(0 0 0 / 0.18);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-close {
|
|
||||||
filter: invert(1) grayscale(1) brightness(2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
border-top: 4px solid var(--uma-gold);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,53 +0,0 @@
|
|||||||
import type { GroupLimits } from "../../../types";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Výchozí limity skupinových objednávek — stejné jako výchozí hodnoty na serveru
|
|
||||||
* (server/src/limits.ts). Platí do načtení konfigurace nebo když endpoint neodpoví.
|
|
||||||
*/
|
|
||||||
export const DEFAULT_GROUP_LIMITS: GroupLimits = {
|
|
||||||
maxNoteLength: 300,
|
|
||||||
maxSurchargeTextLength: 100,
|
|
||||||
maxNameLength: 100,
|
|
||||||
maxUrlLength: 500,
|
|
||||||
maxAmountKc: 10_000,
|
|
||||||
maxItemQuantity: 10,
|
|
||||||
maxItems: 20,
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Runtime konfigurace ze serveru (GET /api/config). */
|
|
||||||
export type AppRuntimeConfig = {
|
|
||||||
/** Pokus o načtení konfigurace skončil (úspěšně i neúspěšně) */
|
|
||||||
loaded: boolean,
|
|
||||||
/** Přihlášení přes důvěryhodné hlavičky z proxy; undefined = nevíme (konfigurace se nenačetla) */
|
|
||||||
trustedHeaders?: boolean,
|
|
||||||
/** Správa obchodů je zapnutá (server má admin heslo); undefined = nevíme */
|
|
||||||
storeAdmin?: boolean,
|
|
||||||
groupLimits: GroupLimits,
|
|
||||||
};
|
|
||||||
|
|
||||||
let config: AppRuntimeConfig = { loaded: false, groupLimits: DEFAULT_GROUP_LIMITS };
|
|
||||||
const listeners = new Set<() => void>();
|
|
||||||
|
|
||||||
export function getAppConfig(): AppRuntimeConfig {
|
|
||||||
return config;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function getGroupLimits(): GroupLimits {
|
|
||||||
return config.groupLimits;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Uloží konfiguraci ze serveru (chybějící limity doplní výchozími) a upozorní odběratele. */
|
|
||||||
export function setAppConfig(patch: Partial<Omit<AppRuntimeConfig, 'groupLimits'>> & { groupLimits?: Partial<GroupLimits> }): void {
|
|
||||||
const { groupLimits, ...rest } = patch;
|
|
||||||
config = {
|
|
||||||
...config,
|
|
||||||
...rest,
|
|
||||||
groupLimits: groupLimits ? { ...DEFAULT_GROUP_LIMITS, ...groupLimits } : config.groupLimits,
|
|
||||||
};
|
|
||||||
listeners.forEach(l => l());
|
|
||||||
}
|
|
||||||
|
|
||||||
export function subscribeAppConfig(listener: () => void): () => void {
|
|
||||||
listeners.add(listener);
|
|
||||||
return () => listeners.delete(listener);
|
|
||||||
}
|
|
||||||
@@ -1,67 +0,0 @@
|
|||||||
import { OrderGroup, OrderGroupMember } from "../../../types";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Pomocné funkce pro výpočet částek ve skupinových objednávkách.
|
|
||||||
*
|
|
||||||
* Klíčové pravidlo: poplatky (balné + doprava + spropitné) se rozpočítávají
|
|
||||||
* pouze mezi "aktivní" strávníky — tedy ty, kteří si reálně něco objednali.
|
|
||||||
* Kdo si nic neobjedná (typicky objednávající, který nakupuje jen pro ostatní),
|
|
||||||
* neplatí nic a nezapočítává se mu ani poměrná část poplatků.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/** Parametry poplatků a slevy potřebné k výpočtu částky člena. */
|
|
||||||
export type GroupFeeParams = {
|
|
||||||
/** Celkové poplatky skupiny v haléřích (balné + doprava + spropitné). */
|
|
||||||
totalFees: number;
|
|
||||||
/** Typ slevy ('percent' = procenta, 'fixed' = pevná částka v haléřích). */
|
|
||||||
discountType?: string;
|
|
||||||
/** Hodnota slevy — procenta, nebo pevná částka v haléřích dle discountType. */
|
|
||||||
discountValue?: number;
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Vrátí true, pokud si člen něco objednal (má kladnou částku nebo příplatek). */
|
|
||||||
export function isActiveMember(member: OrderGroupMember): boolean {
|
|
||||||
return (member.amount ?? 0) + (member.surchargeAmount ?? 0) > 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Počet aktivních strávníků — jen mezi ně se dělí poplatky. */
|
|
||||||
export function countActiveMembers(members: OrderGroup["members"]): number {
|
|
||||||
return Object.values(members).filter(isActiveMember).length;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Celkové poplatky skupiny (balné + doprava + spropitné) v haléřích. */
|
|
||||||
export function totalGroupFees(group: OrderGroup): number {
|
|
||||||
return (group.fees ?? 0) + (group.shipping ?? 0) + (group.tip ?? 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Poměrná část poplatků na jednoho aktivního strávníka v haléřích. */
|
|
||||||
export function computeFeeShare(totalFees: number, activeCount: number): number {
|
|
||||||
return activeCount > 0 ? Math.round(totalFees / activeCount) : 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Celková částka, kterou má člen zaplatit (v haléřích).
|
|
||||||
* Neaktivní člen (nic si neobjednal) platí 0 — nepodílí se ani na poplatcích.
|
|
||||||
*
|
|
||||||
* @param member člen skupiny
|
|
||||||
* @param params poplatky a sleva
|
|
||||||
* @param feeShare poměrná část poplatků na osobu (viz computeFeeShare)
|
|
||||||
* @param activeCount počet aktivních strávníků (dělitel pevné slevy)
|
|
||||||
*/
|
|
||||||
export function computeMemberTotal(
|
|
||||||
member: OrderGroupMember,
|
|
||||||
params: GroupFeeParams,
|
|
||||||
feeShare: number,
|
|
||||||
activeCount: number,
|
|
||||||
): number {
|
|
||||||
if (!isActiveMember(member)) return 0;
|
|
||||||
const base = member.amount ?? 0;
|
|
||||||
const surcharge = member.surchargeAmount ?? 0;
|
|
||||||
const discountValue = params.discountValue ?? 0;
|
|
||||||
const discount = discountValue > 0
|
|
||||||
? (params.discountType === 'percent'
|
|
||||||
? Math.round((base + surcharge) * discountValue / 100)
|
|
||||||
: Math.round(discountValue / activeCount))
|
|
||||||
: 0;
|
|
||||||
return base + surcharge + feeShare - discount;
|
|
||||||
}
|
|
||||||
@@ -1,147 +0,0 @@
|
|||||||
import type { GroupLimits, StoreMenuDish } from "../../../types";
|
|
||||||
import { getGroupLimits } from "./appConfig";
|
|
||||||
|
|
||||||
/** Normalizace pro porovnání: malá písmena, bez diakritiky, emoji, čísel položek („28." / „13A.") a interpunkce. */
|
|
||||||
export function normalizeDishName(text: string): string {
|
|
||||||
return text
|
|
||||||
.normalize('NFD')
|
|
||||||
.replace(/[\u0300-\u036f]/g, '')
|
|
||||||
.toLowerCase()
|
|
||||||
.replace(/^\s*\*?\s*\d+[a-z]?\s*[.)]\s*/, '')
|
|
||||||
.replace(/[^a-z0-9]+/g, ' ')
|
|
||||||
.trim();
|
|
||||||
}
|
|
||||||
|
|
||||||
export type MatchedPart = {
|
|
||||||
/** Původní text části poznámky */
|
|
||||||
text: string,
|
|
||||||
quantity: number,
|
|
||||||
dish?: StoreMenuDish,
|
|
||||||
};
|
|
||||||
|
|
||||||
export type NoteMatch = {
|
|
||||||
parts: MatchedPart[],
|
|
||||||
/** Cena v Kč dle nabídky — jen pokud byly nalezeny všechny části a mají cenu */
|
|
||||||
total?: number,
|
|
||||||
};
|
|
||||||
|
|
||||||
/** Množství zapsané jako „2x burger", „2 × burger" nebo „burger 2x". */
|
|
||||||
function parseQuantity(text: string): { quantity: number, rest: string } {
|
|
||||||
const prefix = text.match(/^\s*(\d+)\s*[x×]\s*(.+)$/i);
|
|
||||||
if (prefix) return { quantity: Number(prefix[1]), rest: prefix[2] };
|
|
||||||
const suffix = text.match(/^(.+?)\s*[x×]?\s*(\d+)\s*[x×]\s*$/i);
|
|
||||||
if (suffix) return { quantity: Number(suffix[2]), rest: suffix[1] };
|
|
||||||
return { quantity: 1, rest: text };
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Najde položku nabídky k textu — přesná shoda, jinak nejbližší položka obsahující text (či naopak). */
|
|
||||||
function findDish(text: string, dishes: { dish: StoreMenuDish, norm: string }[]): StoreMenuDish | undefined {
|
|
||||||
const norm = normalizeDishName(text);
|
|
||||||
if (norm.length < 3) return undefined;
|
|
||||||
const exact = dishes.find(d => d.norm === norm);
|
|
||||||
if (exact) return exact.dish;
|
|
||||||
const candidates = dishes.filter(d => d.norm.length >= 3 && (d.norm.includes(norm) || norm.includes(d.norm)));
|
|
||||||
// Nejbližší délkou = nejspecifičtější shoda („Kebab" vs. „Kebab box s hranolky")
|
|
||||||
candidates.sort((a, b) => Math.abs(a.norm.length - norm.length) - Math.abs(b.norm.length - norm.length));
|
|
||||||
return candidates[0]?.dish;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Rozpozná v poznámce člena objednávky položky z nabídky podniku („Twister speciál + 2x Hranolky")
|
|
||||||
* a spočítá jejich cenu. Nejprve zkusí celou poznámku (názvy jídel mohou obsahovat „+").
|
|
||||||
*/
|
|
||||||
export function matchNoteToMenu(note: string | undefined, menu: StoreMenuDish[]): NoteMatch | undefined {
|
|
||||||
if (!note?.trim() || menu.length === 0) return undefined;
|
|
||||||
const dishes = menu.map(dish => ({ dish, norm: normalizeDishName(dish.name) }));
|
|
||||||
const parts: MatchedPart[] = splitNoteItems(note, menu).map(text => {
|
|
||||||
const exact = dishes.find(d => d.norm === normalizeDishName(text));
|
|
||||||
if (exact) return { text, quantity: 1, dish: exact.dish };
|
|
||||||
const { quantity, rest } = parseQuantity(text);
|
|
||||||
return { text, quantity, dish: findDish(rest, dishes) };
|
|
||||||
});
|
|
||||||
if (!parts.some(p => p.dish)) return undefined;
|
|
||||||
const complete = parts.every(p => p.dish?.price != null);
|
|
||||||
return {
|
|
||||||
parts,
|
|
||||||
total: complete ? parts.reduce((sum, p) => sum + p.dish!.price! * p.quantity, 0) : undefined,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Počet položek v poznámce objednávky — části oddělené „+", včetně množství („2x Hranolky" = 2). */
|
|
||||||
export function countNoteItems(note: string | undefined, menu: StoreMenuDish[] = []): number {
|
|
||||||
return splitNoteItems(note, menu).reduce((sum, part) => sum + parseQuantity(part).quantity, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Části poznámky oddělené „+" (tak, jak je uživatel zapsal). Pokud celá poznámka
|
|
||||||
* odpovídá jednomu jídlu z nabídky (název může obsahovat „+"), je to jediná položka.
|
|
||||||
*/
|
|
||||||
export function splitNoteItems(note: string | undefined, menu: StoreMenuDish[] = []): string[] {
|
|
||||||
const tokens = (note ?? '').split('+').map(p => p.trim()).filter(Boolean);
|
|
||||||
if (menu.length === 0 || tokens.length < 2) return tokens;
|
|
||||||
const names = new Set(menu.map(d => normalizeDishName(d.name)));
|
|
||||||
const isDish = (text: string) => names.has(normalizeDishName(text)) || names.has(normalizeDishName(parseQuantity(text).rest));
|
|
||||||
// Sousední části, které dohromady tvoří název jídla s „+" („Stripsy 6 Ks + Coleslaw"), spojíme zpět
|
|
||||||
const result: string[] = [];
|
|
||||||
for (let i = 0; i < tokens.length;) {
|
|
||||||
let j = tokens.length;
|
|
||||||
while (j > i + 1 && !isDish(tokens.slice(i, j).join(' + '))) j--;
|
|
||||||
result.push(tokens.slice(i, j).join(' + '));
|
|
||||||
i = j;
|
|
||||||
}
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Odebere z poznámky jeden kus položky na daném indexu: „2x Hranolky" → „Hranolky",
|
|
||||||
* jinak celou část. Vrátí novou poznámku a cenu odebraného kusu dle nabídky (Kč), je-li známa.
|
|
||||||
*/
|
|
||||||
export function removeNoteItem(note: string | undefined, index: number, menu: StoreMenuDish[]): { note: string, removedPrice?: number } {
|
|
||||||
const parts = splitNoteItems(note, menu);
|
|
||||||
const part = parts[index];
|
|
||||||
if (part == null) return { note: note ?? '' };
|
|
||||||
const { quantity, rest } = parseQuantity(part);
|
|
||||||
const dishes = menu.map(dish => ({ dish, norm: normalizeDishName(dish.name) }));
|
|
||||||
const dish = dishes.find(d => d.norm === normalizeDishName(part))?.dish ?? findDish(rest, dishes);
|
|
||||||
if (quantity > 2) parts[index] = `${quantity - 1}x ${rest.trim()}`;
|
|
||||||
else if (quantity === 2) parts[index] = rest.trim();
|
|
||||||
else parts.splice(index, 1);
|
|
||||||
return { note: parts.join(' + '), removedPrice: dish?.price };
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Přidá do poznámky jeden kus jídla. Pokud už v poznámce je (i s počtem, např. „2x Hranolky"),
|
|
||||||
* zvýší jeho počet („Hranolky" → „2x Hranolky"), jinak ho připojí za „+".
|
|
||||||
*/
|
|
||||||
export function addNoteItem(note: string | undefined, dishName: string, menu: StoreMenuDish[] = []): string {
|
|
||||||
const parts = splitNoteItems(note, menu);
|
|
||||||
const target = normalizeDishName(dishName);
|
|
||||||
const index = parts.findIndex(p => normalizeDishName(p) === target || normalizeDishName(parseQuantity(p).rest) === target);
|
|
||||||
if (index < 0) return [...parts, dishName].join(' + ');
|
|
||||||
const existing = normalizeDishName(parts[index]) === target ? { quantity: 1, rest: parts[index] } : parseQuantity(parts[index]);
|
|
||||||
parts[index] = `${existing.quantity + 1}x ${existing.rest.trim()}`;
|
|
||||||
return parts.join(' + ');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/** Kolik kusů daného jídla už poznámka obsahuje (0 = není tam). */
|
|
||||||
export function noteItemQuantity(note: string | undefined, dishName: string, menu: StoreMenuDish[] = []): number {
|
|
||||||
const target = normalizeDishName(dishName);
|
|
||||||
const part = splitNoteItems(note, menu).find(p => normalizeDishName(p) === target || normalizeDishName(parseQuantity(p).rest) === target);
|
|
||||||
if (!part) return 0;
|
|
||||||
return normalizeDishName(part) === target ? 1 : parseQuantity(part).quantity;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Vrátí důvod, proč jídlo nejde přidat (limit kusů/položek — pojistky proti překlepům,
|
|
||||||
* hodnoty z konfigurace serveru), jinak undefined.
|
|
||||||
*/
|
|
||||||
export function addItemLimitError(note: string | undefined, dishName: string, menu: StoreMenuDish[] = [], limits: GroupLimits = getGroupLimits()): string | undefined {
|
|
||||||
if (noteItemQuantity(note, dishName, menu) >= limits.maxItemQuantity) {
|
|
||||||
return `Jedné položky lze přidat nejvýše ${limits.maxItemQuantity} kusů`;
|
|
||||||
}
|
|
||||||
if (countNoteItems(note, menu) >= limits.maxItems) {
|
|
||||||
return `Objednávka může mít nejvýše ${limits.maxItems} položek`;
|
|
||||||
}
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
import type { StorePriceHistoryEntry } from "../../../types";
|
|
||||||
|
|
||||||
export type SinceStart = {
|
|
||||||
/** Od kdy se počítá (první známá verze) */
|
|
||||||
since: string,
|
|
||||||
changed: { name: string, start: number, current: number }[],
|
|
||||||
added: { name: string, price?: number }[],
|
|
||||||
removed: { name: string, price?: number }[],
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Souhrn „od začátku": počáteční cena položky = „before" její nejstarší změny,
|
|
||||||
* aktuální = „after" nejnovější. Položka přidaná a později zase odebraná se vynechá.
|
|
||||||
*/
|
|
||||||
export function computeSinceStart(entries: StorePriceHistoryEntry[]): SinceStart | undefined {
|
|
||||||
if (entries.length === 0) return undefined;
|
|
||||||
const chronological = [...entries].reverse();
|
|
||||||
const items = new Map<string, { name: string, start?: number, current?: number, addedLater: boolean, removed: boolean }>();
|
|
||||||
for (const entry of chronological) {
|
|
||||||
for (const c of entry.changes) {
|
|
||||||
const key = c.name.trim().toLowerCase();
|
|
||||||
let item = items.get(key);
|
|
||||||
if (!item) {
|
|
||||||
item = { name: c.name, start: c.before, addedLater: c.before == null, removed: false };
|
|
||||||
items.set(key, item);
|
|
||||||
}
|
|
||||||
item.name = c.name;
|
|
||||||
item.current = c.after;
|
|
||||||
item.removed = c.after == null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const result: SinceStart = { since: chronological[0].at, changed: [], added: [], removed: [] };
|
|
||||||
for (const item of items.values()) {
|
|
||||||
if (item.addedLater && item.removed) continue;
|
|
||||||
if (item.addedLater) result.added.push({ name: item.name, price: item.current });
|
|
||||||
else if (item.removed) result.removed.push({ name: item.name, price: item.start });
|
|
||||||
else if (item.start != null && item.current != null && item.start !== item.current) {
|
|
||||||
result.changed.push({ name: item.name, start: item.start, current: item.current });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Největší změny nahoře
|
|
||||||
result.changed.sort((a, b) => Math.abs(b.current - b.start) - Math.abs(a.current - a.start));
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Český plurál: 1 změna, 2–4 změny, 5+ změn. */
|
|
||||||
export function plural(n: number, one: string, few: string, many: string): string {
|
|
||||||
const form = n === 1 ? one : n >= 2 && n <= 4 ? few : many;
|
|
||||||
return `${n} ${form}`;
|
|
||||||
}
|
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
import { Store } from '../../../types';
|
|
||||||
|
|
||||||
/** Známé dovozové služby — hostname (bez www) → čitelný název pro nabídku. */
|
|
||||||
const KNOWN_SERVICES: { match: string; label: string }[] = [
|
|
||||||
{ match: 'bolt.eu', label: 'Bolt Food' },
|
|
||||||
{ match: 'wolt.com', label: 'Wolt' },
|
|
||||||
{ match: 'foodora.cz', label: 'Foodora' },
|
|
||||||
{ match: 'damejidlo.cz', label: 'Dáme jídlo' },
|
|
||||||
];
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Ověří, že jde o odkaz s protokolem http(s) — jiné protokoly (např. javascript:)
|
|
||||||
* by mohly být zneužity, proto je jako odkaz nezobrazujeme.
|
|
||||||
*/
|
|
||||||
export function isHttpUrl(url?: string): boolean {
|
|
||||||
return !!url && /^https?:\/\//i.test(url);
|
|
||||||
}
|
|
||||||
|
|
||||||
/** Vrátí platné URL na nabídku daného obchodu. */
|
|
||||||
export function getStoreUrls(store?: Store): string[] {
|
|
||||||
return (store?.urls ?? []).filter(isHttpUrl);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Popisek URL pro výběr nabídky — u známých dovozových služeb jejich název,
|
|
||||||
* jinak hostname odkazu (např. "restaurace-u-nas.cz").
|
|
||||||
*/
|
|
||||||
export function storeUrlLabel(url: string): string {
|
|
||||||
let hostname: string;
|
|
||||||
try {
|
|
||||||
hostname = new URL(url).hostname.toLowerCase().replace(/^www\./, '');
|
|
||||||
} catch {
|
|
||||||
return url;
|
|
||||||
}
|
|
||||||
const known = KNOWN_SERVICES.find(s => hostname === s.match || hostname.endsWith(`.${s.match}`));
|
|
||||||
return known ? known.label : hostname;
|
|
||||||
}
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
/** Postavy Umamusume (chibi obrázky / portréty + hláška) — server obrázky cachuje, viz server/src/confetti.ts. */
|
|
||||||
const UMA_CHARACTERS_URL = '/api/confetti/umamusume';
|
|
||||||
|
|
||||||
/** `round` = čtvercový portrét, zobrazí se jako kulatá samolepka (chibi obrázky jsou průhledné). */
|
|
||||||
export type UmaCharacter = { name: string, quote?: string, round?: boolean, images: string[], /** portrét pro malé odznaky */ icon?: string };
|
|
||||||
|
|
||||||
let umaCharactersPromise: Promise<UmaCharacter[]> | undefined;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Načte seznam postav (jednou za běh aplikace). Při chybě vrátí prázdný seznam
|
|
||||||
* a výsledek si nepamatuje — příště se zkusí znovu (např. po restartu serveru).
|
|
||||||
*/
|
|
||||||
export function loadUmaCharacters(): Promise<UmaCharacter[]> {
|
|
||||||
umaCharactersPromise ??= fetch(UMA_CHARACTERS_URL)
|
|
||||||
.then(r => r.ok ? r.json() : [])
|
|
||||||
.then(list => Array.isArray(list) ? list.filter((c: UmaCharacter) => Array.isArray(c?.images)) : [])
|
|
||||||
.catch(() => [])
|
|
||||||
.then((list: UmaCharacter[]) => {
|
|
||||||
if (list.length === 0) umaCharactersPromise = undefined;
|
|
||||||
return list;
|
|
||||||
});
|
|
||||||
return umaCharactersPromise;
|
|
||||||
}
|
|
||||||
@@ -6,13 +6,8 @@ export default defineConfig({
|
|||||||
// depending on your application, base can also be "/"
|
// depending on your application, base can also be "/"
|
||||||
base: '',
|
base: '',
|
||||||
plugins: [react(), viteTsconfigPaths()],
|
plugins: [react(), viteTsconfigPaths()],
|
||||||
build: {
|
|
||||||
// Veřejné sourcemapy, aby Sentry umělo přeložit minifikované stack traces
|
|
||||||
sourcemap: true,
|
|
||||||
},
|
|
||||||
server: {
|
server: {
|
||||||
open: true,
|
open: true,
|
||||||
host: '0.0.0.0',
|
|
||||||
port: 3000,
|
port: 3000,
|
||||||
proxy: {
|
proxy: {
|
||||||
'/api': 'http://localhost:3001',
|
'/api': 'http://localhost:3001',
|
||||||
|
|||||||
@@ -4,10 +4,7 @@ import path from 'path';
|
|||||||
// Use 127.0.0.1 explicitly — on Node.js 18+/Windows, `localhost` may resolve to ::1
|
// Use 127.0.0.1 explicitly — on Node.js 18+/Windows, `localhost` may resolve to ::1
|
||||||
// (IPv6) while the HTTP server only binds to 0.0.0.0 (IPv4), causing the webServer
|
// (IPv6) while the HTTP server only binds to 0.0.0.0 (IPv4), causing the webServer
|
||||||
// readiness poll to time out even though the server is listening.
|
// readiness poll to time out even though the server is listening.
|
||||||
// Port 3099 avoids conflicts with locally running Docker containers on 3001-3003.
|
const BASE_URL = process.env.E2E_BASE_URL ?? 'http://127.0.0.1:3001';
|
||||||
// Override with E2E_PORT env var if needed.
|
|
||||||
const E2E_PORT = process.env.E2E_PORT ?? '3099';
|
|
||||||
const BASE_URL = process.env.E2E_BASE_URL ?? `http://127.0.0.1:${E2E_PORT}`;
|
|
||||||
|
|
||||||
// Server env vars injected for local runs. In CI these are set at the step level.
|
// Server env vars injected for local runs. In CI these are set at the step level.
|
||||||
const serverEnv: Record<string, string> = {
|
const serverEnv: Record<string, string> = {
|
||||||
@@ -18,7 +15,6 @@ const serverEnv: Record<string, string> = {
|
|||||||
HTTP_REMOTE_USER_ENABLED: 'true',
|
HTTP_REMOTE_USER_ENABLED: 'true',
|
||||||
HTTP_REMOTE_USER_HEADER_NAME: 'remote-user',
|
HTTP_REMOTE_USER_HEADER_NAME: 'remote-user',
|
||||||
HTTP_REMOTE_TRUSTED_IPS: process.env.HTTP_REMOTE_TRUSTED_IPS ?? '127.0.0.1,::1,::ffff:127.0.0.1',
|
HTTP_REMOTE_TRUSTED_IPS: process.env.HTTP_REMOTE_TRUSTED_IPS ?? '127.0.0.1,::1,::ffff:127.0.0.1',
|
||||||
PORT: E2E_PORT,
|
|
||||||
};
|
};
|
||||||
if (process.env.REDIS_HOST) {
|
if (process.env.REDIS_HOST) {
|
||||||
serverEnv.REDIS_HOST = process.env.REDIS_HOST;
|
serverEnv.REDIS_HOST = process.env.REDIS_HOST;
|
||||||
@@ -54,7 +50,7 @@ export default defineConfig({
|
|||||||
cwd: path.resolve(__dirname, '../server'),
|
cwd: path.resolve(__dirname, '../server'),
|
||||||
// Poll a dedicated health endpoint — polling '/' can stall in Express 5 when
|
// Poll a dedicated health endpoint — polling '/' can stall in Express 5 when
|
||||||
// server/public/ doesn't exist in the working directory (no finalhandler match).
|
// server/public/ doesn't exist in the working directory (no finalhandler match).
|
||||||
url: `http://127.0.0.1:${E2E_PORT}/api/health`,
|
url: `http://127.0.0.1:3001/api/health`,
|
||||||
timeout: 15_000,
|
timeout: 15_000,
|
||||||
reuseExistingServer: !process.env.CI,
|
reuseExistingServer: !process.env.CI,
|
||||||
env: serverEnv,
|
env: serverEnv,
|
||||||
|
|||||||
@@ -11,14 +11,11 @@ export async function loginViaApi(page: Page, login: string): Promise<void> {
|
|||||||
await page.evaluate((t) => localStorage.setItem('token', t), token);
|
await page.evaluate((t) => localStorage.setItem('token', t), token);
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Vyčistí stav dne pro zadaný dayIndex (0=pondělí…4=pátek) přes dev API.
|
/** Vyčistí stav pizza dne pro zadaný dayIndex (0=pondělí…4=pátek) přes dev API. */
|
||||||
* /api/dev/* vyžaduje JWT – nejdřív získáme token přes /api/login.
|
export async function clearPizzaDay(request: APIRequestContext): Promise<void> {
|
||||||
*/
|
const today = new Date('2025-01-10'); // MOCK_DATA pins to Friday = dayIndex 4
|
||||||
export async function clearDay(request: APIRequestContext, dayIndex = 4): Promise<void> {
|
|
||||||
const loginResp = await request.post('/api/login', { data: {} });
|
|
||||||
const token = await loginResp.json() as string;
|
|
||||||
await request.post('/api/dev/clear', {
|
await request.post('/api/dev/clear', {
|
||||||
headers: { Authorization: `Bearer ${token}` },
|
headers: { 'Content-Type': 'application/json', 'remote-user': 'e2e-user' },
|
||||||
data: { dayIndex },
|
data: { dayIndex: 4 },
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,31 +1,36 @@
|
|||||||
import { test, expect } from '@playwright/test';
|
import { test, expect } from '@playwright/test';
|
||||||
|
|
||||||
// Tento soubor záměrně NEPOUŽÍVÁ výchozí trusted-header — testuje chování přihlašovací stránky.
|
// Tento test záměrně NEPOUŽÍVÁ trusted-header – testuje reálný login formulář.
|
||||||
test.use({ extraHTTPHeaders: {} });
|
test.use({ extraHTTPHeaders: {} });
|
||||||
|
|
||||||
test('při přihlášení přes proxy se formulář nezobrazí — bez hlavičky hláška, opakování s hlavičkou přihlásí', async ({ page }) => {
|
test('uživatel se přihlásí formulářem a uvidí obsah aplikace', async ({ page }) => {
|
||||||
// Server běží s HTTP_REMOTE_USER_ENABLED=true (přihlašuje proxy), takže formulář se jménem
|
// Server běží s HTTP_REMOTE_USER_ENABLED=true, takže POST /api/login vždy vyžaduje
|
||||||
// nemá smysl. Bez hlavičky remote-user se zobrazí hláška s tlačítkem „Zkusit znovu".
|
// hlavičku remote-user. Zachytíme požadavky z formuláře (mají tělo s polem login)
|
||||||
let sendHeader = false;
|
// a přidáme hlavičku; požadavek auto-loginu (bez těla) projde bez hlavičky a selže,
|
||||||
|
// čímž formulář zůstane viditelný.
|
||||||
await page.route('**/api/login', async (route) => {
|
await page.route('**/api/login', async (route) => {
|
||||||
|
const body = route.request().postData();
|
||||||
|
let login: string | undefined;
|
||||||
|
try { login = body ? JSON.parse(body)?.login : undefined; } catch {}
|
||||||
await route.continue({
|
await route.continue({
|
||||||
headers: sendHeader
|
headers: login
|
||||||
? { ...route.request().headers(), 'remote-user': 'testuser' }
|
? { ...route.request().headers(), 'remote-user': login }
|
||||||
: route.request().headers(),
|
: route.request().headers(),
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
await page.goto('/');
|
await page.goto('/');
|
||||||
|
|
||||||
const retry = page.getByRole('button', { name: 'Zkusit znovu' });
|
// Formulář musí být viditelný – auto-login selhal (nepřišla hlavička)
|
||||||
await expect(retry).toBeVisible({ timeout: 10_000 });
|
const loginInput = page.locator('#login-input');
|
||||||
await expect(page.getByText('Přihlášení probíhá přes firemní přihlášení (proxy)')).toBeVisible();
|
await expect(loginInput).toBeVisible({ timeout: 10_000 });
|
||||||
await expect(page.locator('#login-input')).toHaveCount(0);
|
|
||||||
|
|
||||||
// Proxy teď identitu pošle — opakování přihlásí
|
// Vyplnění loginu a odeslání Enterem
|
||||||
sendHeader = true;
|
await loginInput.fill('testuser');
|
||||||
await retry.click();
|
await loginInput.press('Enter');
|
||||||
await expect(retry).not.toBeVisible({ timeout: 10_000 });
|
|
||||||
|
// Po přihlášení musí zmizet login formulář
|
||||||
|
await expect(loginInput).not.toBeVisible({ timeout: 10_000 });
|
||||||
|
|
||||||
// JWT musí být uloženo v localStorage jako 3-dílný token
|
// JWT musí být uloženo v localStorage jako 3-dílný token
|
||||||
const token = await page.evaluate(() => localStorage.getItem('token'));
|
const token = await page.evaluate(() => localStorage.getItem('token'));
|
||||||
|
|||||||
@@ -1,77 +0,0 @@
|
|||||||
import { test, expect } from '@playwright/test';
|
|
||||||
import { loginViaApi } from './helpers';
|
|
||||||
|
|
||||||
const DELIVERY_LABEL = 'Upozornění na doručení objednávky (Bolt Food / Wolt)';
|
|
||||||
|
|
||||||
test.beforeEach(async ({ page }) => {
|
|
||||||
await loginViaApi(page, 'e2e-user');
|
|
||||||
await page.reload();
|
|
||||||
await page.waitForLoadState('networkidle');
|
|
||||||
});
|
|
||||||
|
|
||||||
async function openSettings(page: import('@playwright/test').Page) {
|
|
||||||
await page.locator('#basic-nav-dropdown').click();
|
|
||||||
await page.locator('text=Nastavení').click();
|
|
||||||
await expect(page.locator('.modal-title')).toContainText('Nastavení', { timeout: 5_000 });
|
|
||||||
}
|
|
||||||
|
|
||||||
test('Přepínač doručení objednávky je pod výběrem času připomínky', async ({ page }) => {
|
|
||||||
await openSettings(page);
|
|
||||||
|
|
||||||
const reminderGroup = page.locator('.modal-body .mb-3').filter({ hasText: 'Připomínka výběru oběda' });
|
|
||||||
const deliveryGroup = page.locator('.modal-body .mb-3').filter({ hasText: DELIVERY_LABEL });
|
|
||||||
await expect(reminderGroup).toBeVisible();
|
|
||||||
await expect(deliveryGroup).toBeVisible();
|
|
||||||
|
|
||||||
// Přepínač musí v DOM následovat až za skupinou s časem připomínky
|
|
||||||
const order = await page.evaluate((label) => {
|
|
||||||
const groups = Array.from(document.querySelectorAll('.modal-body .mb-3'));
|
|
||||||
return {
|
|
||||||
reminder: groups.findIndex(g => g.textContent?.includes('Připomínka výběru oběda')),
|
|
||||||
delivery: groups.findIndex(g => g.textContent?.includes(label)),
|
|
||||||
};
|
|
||||||
}, DELIVERY_LABEL);
|
|
||||||
expect(order.reminder).toBeGreaterThanOrEqual(0);
|
|
||||||
expect(order.delivery).toBe(order.reminder + 1);
|
|
||||||
|
|
||||||
// Výchozí stav je vypnuto
|
|
||||||
await expect(page.locator('#boltDeliveredCheckbox')).not.toBeChecked();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('Zapnutí přepínače se uloží na server a přežije znovuotevření', async ({ page }) => {
|
|
||||||
await openSettings(page);
|
|
||||||
await page.locator('#boltDeliveredCheckbox').check();
|
|
||||||
await page.locator('.modal-footer button', { hasText: 'Uložit' }).click();
|
|
||||||
await expect(page.locator('.modal')).not.toBeVisible({ timeout: 5_000 });
|
|
||||||
|
|
||||||
// Server má nastavení uložené
|
|
||||||
const token = await page.evaluate(() => localStorage.getItem('token'));
|
|
||||||
const resp = await page.request.get('/api/notifications/settings', {
|
|
||||||
headers: { Authorization: `Bearer ${token}` },
|
|
||||||
});
|
|
||||||
expect(await resp.json()).toMatchObject({ boltDeliveredPush: true });
|
|
||||||
|
|
||||||
// Po znovunačtení stránky je přepínač stále zapnutý
|
|
||||||
await page.reload();
|
|
||||||
await page.waitForLoadState('networkidle');
|
|
||||||
await openSettings(page);
|
|
||||||
await expect(page.locator('#boltDeliveredCheckbox')).toBeChecked();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('Vypnutí přepínače se uloží zpět', async ({ page }) => {
|
|
||||||
await openSettings(page);
|
|
||||||
await page.locator('#boltDeliveredCheckbox').check();
|
|
||||||
await page.locator('.modal-footer button', { hasText: 'Uložit' }).click();
|
|
||||||
await expect(page.locator('.modal')).not.toBeVisible({ timeout: 5_000 });
|
|
||||||
|
|
||||||
await openSettings(page);
|
|
||||||
await page.locator('#boltDeliveredCheckbox').uncheck();
|
|
||||||
await page.locator('.modal-footer button', { hasText: 'Uložit' }).click();
|
|
||||||
await expect(page.locator('.modal')).not.toBeVisible({ timeout: 5_000 });
|
|
||||||
|
|
||||||
const token = await page.evaluate(() => localStorage.getItem('token'));
|
|
||||||
const resp = await page.request.get('/api/notifications/settings', {
|
|
||||||
headers: { Authorization: `Bearer ${token}` },
|
|
||||||
});
|
|
||||||
expect(await resp.json()).toMatchObject({ boltDeliveredPush: false });
|
|
||||||
});
|
|
||||||
@@ -1,9 +1,10 @@
|
|||||||
import { test, expect } from '@playwright/test';
|
import { test, expect } from '@playwright/test';
|
||||||
import { clearDay } from './helpers';
|
|
||||||
|
|
||||||
test.beforeEach(async ({ page, request }) => {
|
test.beforeEach(async ({ page, request }) => {
|
||||||
// Vyčistíme volby dne, aby testy neovlivnily navzájem
|
// Vyčistíme volby dne, aby testy neovlivnily navzájem
|
||||||
await clearDay(request);
|
await request.post('/api/dev/clear', {
|
||||||
|
data: { dayIndex: 4 },
|
||||||
|
});
|
||||||
await page.goto('/');
|
await page.goto('/');
|
||||||
await page.waitForLoadState('networkidle');
|
await page.waitForLoadState('networkidle');
|
||||||
// Počkáme, až se zobrazí volba stravování
|
// Počkáme, až se zobrazí volba stravování
|
||||||
|
|||||||
@@ -1,12 +1,11 @@
|
|||||||
import { test, expect } from '@playwright/test';
|
import { test, expect } from '@playwright/test';
|
||||||
import { clearDay } from './helpers';
|
|
||||||
|
|
||||||
// Pizza day testy musí běžet sekvenčně (sdílejí stav mock dne)
|
// Pizza day testy musí běžet sekvenčně (sdílejí stav mock dne)
|
||||||
test.describe.serial('pizza day životní cyklus', () => {
|
test.describe.serial('pizza day životní cyklus', () => {
|
||||||
|
|
||||||
test.beforeEach(async ({ request }) => {
|
test.beforeEach(async ({ request }) => {
|
||||||
// Vyčistíme data mock dne před každým testem
|
// Vyčistíme data mock dne před každým testem
|
||||||
await clearDay(request);
|
await request.post('/api/dev/clear', { data: { dayIndex: 4 } });
|
||||||
});
|
});
|
||||||
|
|
||||||
test('zobrazí sekci Pizza Day bez aktivního dne', async ({ page }) => {
|
test('zobrazí sekci Pizza Day bez aktivního dne', async ({ page }) => {
|
||||||
|
|||||||
@@ -1,186 +0,0 @@
|
|||||||
# Kubernetes — Luncher HA
|
|
||||||
|
|
||||||
Manifesty pro nasazení Luncheru na Kubernetes s vysokou dostupností (3 repliky, Redis adapter pro Socket.io, WATCH/MULTI atomické zápisy, graceful shutdown).
|
|
||||||
|
|
||||||
## Prerekvizity
|
|
||||||
|
|
||||||
- kubectl nakonfigurovaný na cílový cluster
|
|
||||||
- `helm` nainstalovaný
|
|
||||||
- Redis Stack image přístupný z clusteru (`redis/redis-stack-server:7.2.0-v14`)
|
|
||||||
- Obraz `luncher:ha-test` načtený do clusteru (viz níže)
|
|
||||||
|
|
||||||
## Lokální kind cluster (testik) — setup
|
|
||||||
|
|
||||||
### 1. Smazat a znovu vytvořit cluster s port mappings
|
|
||||||
|
|
||||||
```powershell
|
|
||||||
$env:KIND_EXPERIMENTAL_PROVIDER = "nerdctl"
|
|
||||||
# Přidat nerdctl do PATH (Rancher Desktop)
|
|
||||||
$env:PATH += ";$env:LOCALAPPDATA\Programs\Rancher Desktop\resources\resources\win32\bin"
|
|
||||||
|
|
||||||
kind delete cluster --name testik
|
|
||||||
kind create cluster --name testik --config k8s/kind/testik.yaml
|
|
||||||
```
|
|
||||||
|
|
||||||
### 2. Sestavit a načíst obraz
|
|
||||||
|
|
||||||
```powershell
|
|
||||||
docker build -t luncher:ha-test .
|
|
||||||
|
|
||||||
# Uložit a načíst přes nerdctl (kind + nerdctl provider)
|
|
||||||
nerdctl save luncher:ha-test -o luncher.tar
|
|
||||||
kind load image-archive luncher.tar --name testik
|
|
||||||
Remove-Item luncher.tar
|
|
||||||
```
|
|
||||||
|
|
||||||
### 3. Nainstalovat Traefik (rke2-traefik)
|
|
||||||
|
|
||||||
> **Prerekvizita (Rancher Desktop):** Pokud Rancher Desktop běží s `kubernetes.options.traefik=true`,
|
|
||||||
> host-switch.exe obsadí port 80 dříve než kind. Vypni traefik v k3s:
|
|
||||||
> ```powershell
|
|
||||||
> rdctl set --kubernetes.options.traefik=false
|
|
||||||
> ```
|
|
||||||
>
|
|
||||||
> **Prerekvizita — inotify limity:** Čtyř-uzlový kind cluster vyčerpá výchozí
|
|
||||||
> `fs.inotify.max_user_instances=128`. kube-proxy pak padá s „too many open files".
|
|
||||||
> Zvyš limit v rancher-desktop WSL2 (přežije restart WSL2, ale ne reboot — přidej do
|
|
||||||
> `/etc/sysctl.d/99-kind.conf` pro trvalost):
|
|
||||||
> ```powershell
|
|
||||||
> wsl -d rancher-desktop -- sysctl -w fs.inotify.max_user_instances=1280
|
|
||||||
> ```
|
|
||||||
|
|
||||||
```powershell
|
|
||||||
# rke2-traefik je v rke2-charts, ne rancher-charts
|
|
||||||
helm repo add rke2-charts https://rke2-charts.rancher.io
|
|
||||||
helm repo update
|
|
||||||
|
|
||||||
# Nejdřív CRD chart, pak samotný chart
|
|
||||||
helm install traefik-crd rke2-charts/rke2-traefik-crd -n kube-system --create-namespace
|
|
||||||
helm install traefik rke2-charts/rke2-traefik -n kube-system `
|
|
||||||
--set "tolerations[0].key=node-role.kubernetes.io/control-plane" `
|
|
||||||
--set "tolerations[0].operator=Exists" `
|
|
||||||
--set "tolerations[0].effect=NoSchedule"
|
|
||||||
```
|
|
||||||
|
|
||||||
Ověř že Traefik DaemonSet běží na control-plane (má hostPort 80):
|
|
||||||
```powershell
|
|
||||||
kubectl get ds -n kube-system traefik-rke2-traefik
|
|
||||||
kubectl get pods -n kube-system -o wide | Select-String traefik
|
|
||||||
```
|
|
||||||
|
|
||||||
### 4. Nainstalovat Reloader
|
|
||||||
|
|
||||||
[stakater/Reloader](https://github.com/stakater/Reloader) sleduje změny Secret a ConfigMap a automaticky spustí rolling restart Deploymentu — odpadá nutnost ručního `kubectl rollout restart` po rotaci `JWT_SECRET` nebo `ADMIN_PASSWORD`.
|
|
||||||
|
|
||||||
Manifest je vendorovaný ve verzi v1.4.16 (`k8s/base/reloader.yaml`). Nasadit do `default` namespace:
|
|
||||||
|
|
||||||
```powershell
|
|
||||||
kubectl apply -f k8s/base/reloader.yaml
|
|
||||||
kubectl rollout status deploy/reloader-reloader
|
|
||||||
```
|
|
||||||
|
|
||||||
Reloader běží cluster-wide díky `ClusterRoleBinding` — nepotřebuje žádnou konfiguraci per-namespace. Deployment Luncheru má anotaci `reloader.stakater.com/auto: "true"`, která říká Reloaderu, ať sleduje všechny Secrety a ConfigMapy odkazované přes `envFrom`.
|
|
||||||
|
|
||||||
### 5. Nasadit Luncher
|
|
||||||
|
|
||||||
```powershell
|
|
||||||
# Namespace + Redis
|
|
||||||
kubectl apply -f k8s/base/namespace.yaml
|
|
||||||
kubectl apply -f k8s/base/redis-statefulset.yaml
|
|
||||||
kubectl apply -f k8s/base/redis-service.yaml
|
|
||||||
|
|
||||||
# Počkat na Redis
|
|
||||||
kubectl rollout status statefulset/redis -n luncher
|
|
||||||
|
|
||||||
# Server secret (nebo použít šablonu server-secret.yaml)
|
|
||||||
kubectl create secret generic luncher-secrets -n luncher `
|
|
||||||
--from-literal=JWT_SECRET=dev-secret-change-me `
|
|
||||||
--from-literal=ADMIN_PASSWORD=admin
|
|
||||||
|
|
||||||
# Server
|
|
||||||
kubectl apply -f k8s/base/server-configmap.yaml
|
|
||||||
kubectl apply -f k8s/base/server-deployment.yaml
|
|
||||||
kubectl apply -f k8s/base/server-service.yaml
|
|
||||||
kubectl apply -f k8s/base/server-pdb.yaml
|
|
||||||
kubectl apply -f k8s/base/ingressroute.yaml
|
|
||||||
|
|
||||||
# Počkat na server
|
|
||||||
kubectl rollout status deploy/luncher -n luncher
|
|
||||||
```
|
|
||||||
|
|
||||||
## Testovací scénáře
|
|
||||||
|
|
||||||
### Baseline
|
|
||||||
|
|
||||||
```powershell
|
|
||||||
kubectl get pods -n luncher -o wide
|
|
||||||
# Ověř: 3 pody na 3 různých worker uzlech, status Running
|
|
||||||
```
|
|
||||||
|
|
||||||
### Rolling update bez výpadku
|
|
||||||
|
|
||||||
V jednom terminálu posílej provoz:
|
|
||||||
```powershell
|
|
||||||
# Nainstaluj hey: go install github.com/rakyll/hey@latest
|
|
||||||
hey -z 60s -c 20 http://luncher.localhost/api/health
|
|
||||||
```
|
|
||||||
|
|
||||||
Ve druhém terminálu spusť rollout:
|
|
||||||
```powershell
|
|
||||||
kubectl rollout restart deploy/luncher -n luncher
|
|
||||||
```
|
|
||||||
|
|
||||||
**Kritérium: 0 non-2xx odpovědí, 0 connection errors.**
|
|
||||||
|
|
||||||
### Node drain
|
|
||||||
|
|
||||||
```powershell
|
|
||||||
kubectl cordon testik-worker2
|
|
||||||
kubectl drain testik-worker2 --ignore-daemonsets --delete-emptydir-data
|
|
||||||
# PDB zabrání souběžnému drainu druhého nodu
|
|
||||||
kubectl get pods -n luncher -o wide # pody se přeplánují
|
|
||||||
kubectl uncordon testik-worker2
|
|
||||||
```
|
|
||||||
|
|
||||||
### Ověření Socket.io cross-pod
|
|
||||||
|
|
||||||
1. Otevři dvě záložky prohlížeče na `http://luncher.localhost`
|
|
||||||
2. Z jednoho podu vyvolej změnu:
|
|
||||||
```powershell
|
|
||||||
kubectl exec -it deploy/luncher -n luncher -- curl -s -X POST localhost:3001/api/...
|
|
||||||
```
|
|
||||||
3. Ověř, že druhá záložka (pravděpodobně jiný pod) obdrží WebSocket event
|
|
||||||
|
|
||||||
### Concurrent write test
|
|
||||||
|
|
||||||
1. Otevři stejnou Pizza day objednávku ve dvou záložkách
|
|
||||||
2. Simuluj souběžné odeslání (otevřít DevTools → síť → odeslat obě požadavky současně)
|
|
||||||
3. Ověř Redis: `kubectl exec -it redis-0 -n luncher -- redis-cli JSON.GET luncher:<datum>`
|
|
||||||
— oba zápisy musí být zachovány (WATCH/MULTI retry)
|
|
||||||
|
|
||||||
### Auto-rollout při změně Secret / ConfigMap
|
|
||||||
|
|
||||||
Reloader automaticky spustí rolling restart, kdykoli se změní `luncher-secrets` nebo `luncher-config`:
|
|
||||||
|
|
||||||
```powershell
|
|
||||||
# Příklad: rotace admin hesla
|
|
||||||
kubectl -n luncher patch secret luncher-secrets --type=merge `
|
|
||||||
-p '{"stringData":{"ADMIN_PASSWORD":"nove-heslo"}}'
|
|
||||||
|
|
||||||
# Reloader detekuje změnu resourceVersion a patchne pod template
|
|
||||||
kubectl rollout status deploy/luncher -n luncher
|
|
||||||
|
|
||||||
# Ověř anotaci přidanou Reloaderem na pod template
|
|
||||||
kubectl get deploy luncher -n luncher -o yaml | Select-String "STAKATER"
|
|
||||||
```
|
|
||||||
|
|
||||||
**Kritérium: pody se automaticky vyrolují bez ručního restartu. PDB zajistí, že alespoň jeden pod zůstane dostupný.**
|
|
||||||
|
|
||||||
## Pořadí aplikace manifestů
|
|
||||||
|
|
||||||
1. `reloader.yaml` (do `default` namespace — musí být před Deployment)
|
|
||||||
2. `namespace.yaml`
|
|
||||||
3. `redis-statefulset.yaml` + `redis-service.yaml`
|
|
||||||
4. `server-configmap.yaml` + `server-secret.yaml`
|
|
||||||
5. `server-deployment.yaml` + `server-service.yaml` + `server-pdb.yaml`
|
|
||||||
6. `ingressroute.yaml`
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
apiVersion: traefik.io/v1alpha1
|
|
||||||
kind: IngressRoute
|
|
||||||
metadata:
|
|
||||||
name: luncher
|
|
||||||
namespace: luncher
|
|
||||||
annotations:
|
|
||||||
kubernetes.io/ingress.class: traefik
|
|
||||||
spec:
|
|
||||||
entryPoints:
|
|
||||||
- web
|
|
||||||
routes:
|
|
||||||
- match: Host(`luncher.localhost`)
|
|
||||||
kind: Rule
|
|
||||||
services:
|
|
||||||
- name: luncher
|
|
||||||
port: 3001
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
apiVersion: v1
|
|
||||||
kind: Namespace
|
|
||||||
metadata:
|
|
||||||
name: luncher
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
apiVersion: v1
|
|
||||||
kind: Service
|
|
||||||
metadata:
|
|
||||||
name: redis
|
|
||||||
namespace: luncher
|
|
||||||
spec:
|
|
||||||
clusterIP: None # headless — StatefulSet pod discovery
|
|
||||||
selector:
|
|
||||||
app: redis
|
|
||||||
ports:
|
|
||||||
- port: 6379
|
|
||||||
targetPort: 6379
|
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
apiVersion: apps/v1
|
|
||||||
kind: StatefulSet
|
|
||||||
metadata:
|
|
||||||
name: redis
|
|
||||||
namespace: luncher
|
|
||||||
spec:
|
|
||||||
serviceName: redis
|
|
||||||
replicas: 1
|
|
||||||
selector:
|
|
||||||
matchLabels:
|
|
||||||
app: redis
|
|
||||||
template:
|
|
||||||
metadata:
|
|
||||||
labels:
|
|
||||||
app: redis
|
|
||||||
spec:
|
|
||||||
containers:
|
|
||||||
- name: redis
|
|
||||||
# Redis Stack je nutný — aplikace používá JSON.GET / JSON.SET (modul RedisJSON)
|
|
||||||
image: redis/redis-stack-server:7.2.0-v14
|
|
||||||
ports:
|
|
||||||
- containerPort: 6379
|
|
||||||
resources:
|
|
||||||
requests:
|
|
||||||
cpu: 100m
|
|
||||||
memory: 128Mi
|
|
||||||
limits:
|
|
||||||
cpu: 500m
|
|
||||||
memory: 512Mi
|
|
||||||
volumeMounts:
|
|
||||||
- name: data
|
|
||||||
mountPath: /data
|
|
||||||
readinessProbe:
|
|
||||||
exec:
|
|
||||||
command: ["redis-cli", "ping"]
|
|
||||||
initialDelaySeconds: 5
|
|
||||||
periodSeconds: 5
|
|
||||||
livenessProbe:
|
|
||||||
exec:
|
|
||||||
command: ["redis-cli", "ping"]
|
|
||||||
initialDelaySeconds: 10
|
|
||||||
periodSeconds: 10
|
|
||||||
volumeClaimTemplates:
|
|
||||||
- metadata:
|
|
||||||
name: data
|
|
||||||
spec:
|
|
||||||
accessModes: ["ReadWriteOnce"]
|
|
||||||
resources:
|
|
||||||
requests:
|
|
||||||
storage: 1Gi
|
|
||||||