feat: rozdělení nastavení do 2 sloupců
CI / Generate TypeScript types (push) Successful in 10s
CI / Server unit tests (push) Successful in 27s
CI / Build server (push) Successful in 29s
CI / Build client (push) Successful in 41s
CI / Playwright E2E tests (push) Successful in 2m24s
CI / Build and push Docker image (push) Successful in 47s
CI / Notify (push) Successful in 2s
CI / Generate TypeScript types (push) Successful in 10s
CI / Server unit tests (push) Successful in 27s
CI / Build server (push) Successful in 29s
CI / Build client (push) Successful in 41s
CI / Playwright E2E tests (push) Successful in 2m24s
CI / Build and push Docker image (push) Successful in 47s
CI / Notify (push) Successful in 2s
This commit is contained in:
1 file changed
+171
-165
@@ -1,5 +1,5 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Modal, Button, Form } from "react-bootstrap"
|
||||
import { Modal, Button, Form, Row, Col } from "react-bootstrap"
|
||||
import { useSettings, ThemePreference, StyleTheme, STYLE_THEMES } from "../../context/settings";
|
||||
import { NotificationSettings, UdalostEnum, getNotificationSettings, updateNotificationSettings } from "../../../../types";
|
||||
import { useAuth } from "../../context/auth";
|
||||
@@ -92,187 +92,193 @@ export default function SettingsModal({ isOpen, onClose, onSave }: Readonly<Prop
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal show={isOpen} onHide={onClose} size="lg">
|
||||
<Modal show={isOpen} onHide={onClose} size="xl">
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title><h2>Nastavení</h2></Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<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.Label>Barevný motiv</Form.Label>
|
||||
<Form.Select ref={themeRef} defaultValue={settings?.themePreference}>
|
||||
<option value="system">Podle systému</option>
|
||||
<option value="light">Světlý</option>
|
||||
<option value="dark">Tmavý</option>
|
||||
</Form.Select>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Check
|
||||
id="showButterfliesCheckbox"
|
||||
ref={showButterfliesRef}
|
||||
type="checkbox"
|
||||
label="Zobrazit motýlky"
|
||||
defaultChecked={settings?.showButterflies ?? true}
|
||||
/>
|
||||
<Form.Text className="text-muted">
|
||||
Po vypnutí se poletující motýlci ani minihra nebudou vůbec zobrazovat.
|
||||
</Form.Text>
|
||||
</Form.Group>
|
||||
{/* Na širších obrazovkách rozdělení do dvou sloupců, na užších pod sebou */}
|
||||
<Row className="gx-5">
|
||||
<Col lg={6}>
|
||||
<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.Label>Barevný motiv</Form.Label>
|
||||
<Form.Select ref={themeRef} defaultValue={settings?.themePreference}>
|
||||
<option value="system">Podle systému</option>
|
||||
<option value="light">Světlý</option>
|
||||
<option value="dark">Tmavý</option>
|
||||
</Form.Select>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Check
|
||||
id="showButterfliesCheckbox"
|
||||
ref={showButterfliesRef}
|
||||
type="checkbox"
|
||||
label="Zobrazit motýlky"
|
||||
defaultChecked={settings?.showButterflies ?? true}
|
||||
/>
|
||||
<Form.Text className="text-muted">
|
||||
Po vypnutí se poletující motýlci ani minihra nebudou vůbec zobrazovat.
|
||||
</Form.Text>
|
||||
</Form.Group>
|
||||
|
||||
<hr />
|
||||
<hr />
|
||||
|
||||
<h4>Obecné</h4>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Check
|
||||
id="hideSoupsCheckbox"
|
||||
ref={hideSoupsRef}
|
||||
type="checkbox"
|
||||
label="Skrýt polévky"
|
||||
defaultChecked={settings?.hideSoups}
|
||||
title="V nabídkách nebudou zobrazovány polévky. Tato funkce je experimentální."
|
||||
/>
|
||||
<Form.Text className="text-muted">
|
||||
Experimentální funkce - zejména u TechTower bývá problém polévky spolehlivě rozeznat.
|
||||
</Form.Text>
|
||||
</Form.Group>
|
||||
<h4>Obecné</h4>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Check
|
||||
id="hideSoupsCheckbox"
|
||||
ref={hideSoupsRef}
|
||||
type="checkbox"
|
||||
label="Skrýt polévky"
|
||||
defaultChecked={settings?.hideSoups}
|
||||
title="V nabídkách nebudou zobrazovány polévky. Tato funkce je experimentální."
|
||||
/>
|
||||
<Form.Text className="text-muted">
|
||||
Experimentální funkce - zejména u TechTower bývá problém polévky spolehlivě rozeznat.
|
||||
</Form.Text>
|
||||
</Form.Group>
|
||||
|
||||
<hr />
|
||||
<hr />
|
||||
|
||||
<h4>Notifikace</h4>
|
||||
<p>
|
||||
Nastavením notifikací budete dostávat upozornění o událostech (např. "Jdeme na oběd") přímo do vámi zvoleného komunikačního kanálu.
|
||||
</p>
|
||||
<h4>Bankovní účet</h4>
|
||||
<p>
|
||||
Nastavením čísla účtu umožníte automatické generování QR kódů pro úhradu za vámi provedené objednávky v rámci Pizza day.
|
||||
</p>
|
||||
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>Připomínka výběru oběda</Form.Label>
|
||||
<Form.Control
|
||||
ref={reminderTimeRef}
|
||||
type="time"
|
||||
defaultValue={notifSettings.reminderTime ?? ''}
|
||||
key={notifSettings.reminderTime ?? 'reminder-empty'}
|
||||
/>
|
||||
<Form.Text className="text-muted">
|
||||
V zadaný čas vám přijde push notifikace, pokud nemáte zvolenou možnost stravování. Nechte prázdné pro vypnutí.
|
||||
</Form.Text>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>Číslo účtu</Form.Label>
|
||||
<Form.Control
|
||||
ref={bankAccountRef}
|
||||
type="text"
|
||||
placeholder="123456-1234567890/1234"
|
||||
defaultValue={settings?.bankAccount}
|
||||
onKeyDown={e => e.stopPropagation()}
|
||||
/>
|
||||
<Form.Text className="text-muted">
|
||||
Pokud vaše číslo účtu neobsahuje předčíslí, je možné ho zcela vynechat.
|
||||
</Form.Text>
|
||||
</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.Label>Název příjemce</Form.Label>
|
||||
<Form.Control
|
||||
ref={nameRef}
|
||||
type="text"
|
||||
placeholder="Jan Novák"
|
||||
defaultValue={settings?.holderName}
|
||||
onKeyDown={e => e.stopPropagation()}
|
||||
/>
|
||||
<Form.Text className="text-muted">
|
||||
Jméno majitele účtu pro QR platbu.
|
||||
</Form.Text>
|
||||
</Form.Group>
|
||||
</Col>
|
||||
<Col lg={6}>
|
||||
<hr className="d-lg-none" />
|
||||
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>ntfy téma (topic)</Form.Label>
|
||||
<Form.Control
|
||||
ref={ntfyTopicRef}
|
||||
type="text"
|
||||
placeholder="moje-tema"
|
||||
defaultValue={notifSettings.ntfyTopic}
|
||||
key={notifSettings.ntfyTopic ?? 'ntfy-empty'}
|
||||
onKeyDown={e => e.stopPropagation()}
|
||||
/>
|
||||
<Form.Text className="text-muted">
|
||||
Téma pro ntfy push notifikace. Nechte prázdné pro vypnutí.
|
||||
</Form.Text>
|
||||
</Form.Group>
|
||||
<h4>Notifikace</h4>
|
||||
<p>
|
||||
Nastavením notifikací budete dostávat upozornění o událostech (např. "Jdeme na oběd") přímo do vámi zvoleného komunikačního kanálu.
|
||||
</p>
|
||||
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>Discord webhook URL</Form.Label>
|
||||
<Form.Control
|
||||
ref={discordWebhookRef}
|
||||
type="text"
|
||||
placeholder="https://discord.com/api/webhooks/..."
|
||||
defaultValue={notifSettings.discordWebhookUrl}
|
||||
key={notifSettings.discordWebhookUrl ?? 'discord-empty'}
|
||||
onKeyDown={e => e.stopPropagation()}
|
||||
/>
|
||||
<Form.Text className="text-muted">
|
||||
URL webhooku Discord kanálu. Nechte prázdné pro vypnutí.
|
||||
</Form.Text>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>Připomínka výběru oběda</Form.Label>
|
||||
<Form.Control
|
||||
ref={reminderTimeRef}
|
||||
type="time"
|
||||
defaultValue={notifSettings.reminderTime ?? ''}
|
||||
key={notifSettings.reminderTime ?? 'reminder-empty'}
|
||||
/>
|
||||
<Form.Text className="text-muted">
|
||||
V zadaný čas vám přijde push notifikace, pokud nemáte zvolenou možnost stravování. Nechte prázdné pro vypnutí.
|
||||
</Form.Text>
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>MS Teams webhook URL</Form.Label>
|
||||
<Form.Control
|
||||
ref={teamsWebhookRef}
|
||||
type="text"
|
||||
placeholder="https://outlook.office.com/webhook/..."
|
||||
defaultValue={notifSettings.teamsWebhookUrl}
|
||||
key={notifSettings.teamsWebhookUrl ?? 'teams-empty'}
|
||||
onKeyDown={e => e.stopPropagation()}
|
||||
/>
|
||||
<Form.Text className="text-muted">
|
||||
URL webhooku MS Teams kanálu. Nechte prázdné pro vypnutí.
|
||||
</Form.Text>
|
||||
</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.Label>Události k odběru</Form.Label>
|
||||
{Object.values(UdalostEnum).map(event => (
|
||||
<Form.Check
|
||||
key={event}
|
||||
id={`notif-event-${event}`}
|
||||
type="checkbox"
|
||||
label={event}
|
||||
checked={enabledEvents.includes(event)}
|
||||
onChange={() => toggleEvent(event)}
|
||||
/>
|
||||
))}
|
||||
<Form.Text className="text-muted">
|
||||
Zvolte události, o kterých chcete být notifikováni. Notifikace jsou odesílány pouze uživatelům se stejnou zvolenou lokalitou.
|
||||
</Form.Text>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>ntfy téma (topic)</Form.Label>
|
||||
<Form.Control
|
||||
ref={ntfyTopicRef}
|
||||
type="text"
|
||||
placeholder="moje-tema"
|
||||
defaultValue={notifSettings.ntfyTopic}
|
||||
key={notifSettings.ntfyTopic ?? 'ntfy-empty'}
|
||||
onKeyDown={e => e.stopPropagation()}
|
||||
/>
|
||||
<Form.Text className="text-muted">
|
||||
Téma pro ntfy push notifikace. Nechte prázdné pro vypnutí.
|
||||
</Form.Text>
|
||||
</Form.Group>
|
||||
|
||||
<hr />
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>Discord webhook URL</Form.Label>
|
||||
<Form.Control
|
||||
ref={discordWebhookRef}
|
||||
type="text"
|
||||
placeholder="https://discord.com/api/webhooks/..."
|
||||
defaultValue={notifSettings.discordWebhookUrl}
|
||||
key={notifSettings.discordWebhookUrl ?? 'discord-empty'}
|
||||
onKeyDown={e => e.stopPropagation()}
|
||||
/>
|
||||
<Form.Text className="text-muted">
|
||||
URL webhooku Discord kanálu. Nechte prázdné pro vypnutí.
|
||||
</Form.Text>
|
||||
</Form.Group>
|
||||
|
||||
<h4>Bankovní účet</h4>
|
||||
<p>
|
||||
Nastavením čísla účtu umožníte automatické generování QR kódů pro úhradu za vámi provedené objednávky v rámci Pizza day.
|
||||
</p>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>MS Teams webhook URL</Form.Label>
|
||||
<Form.Control
|
||||
ref={teamsWebhookRef}
|
||||
type="text"
|
||||
placeholder="https://outlook.office.com/webhook/..."
|
||||
defaultValue={notifSettings.teamsWebhookUrl}
|
||||
key={notifSettings.teamsWebhookUrl ?? 'teams-empty'}
|
||||
onKeyDown={e => e.stopPropagation()}
|
||||
/>
|
||||
<Form.Text className="text-muted">
|
||||
URL webhooku MS Teams kanálu. Nechte prázdné pro vypnutí.
|
||||
</Form.Text>
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>Číslo účtu</Form.Label>
|
||||
<Form.Control
|
||||
ref={bankAccountRef}
|
||||
type="text"
|
||||
placeholder="123456-1234567890/1234"
|
||||
defaultValue={settings?.bankAccount}
|
||||
onKeyDown={e => e.stopPropagation()}
|
||||
/>
|
||||
<Form.Text className="text-muted">
|
||||
Pokud vaše číslo účtu neobsahuje předčíslí, je možné ho zcela vynechat.
|
||||
</Form.Text>
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>Název příjemce</Form.Label>
|
||||
<Form.Control
|
||||
ref={nameRef}
|
||||
type="text"
|
||||
placeholder="Jan Novák"
|
||||
defaultValue={settings?.holderName}
|
||||
onKeyDown={e => e.stopPropagation()}
|
||||
/>
|
||||
<Form.Text className="text-muted">
|
||||
Jméno majitele účtu pro QR platbu.
|
||||
</Form.Text>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-3">
|
||||
<Form.Label>Události k odběru</Form.Label>
|
||||
{Object.values(UdalostEnum).map(event => (
|
||||
<Form.Check
|
||||
key={event}
|
||||
id={`notif-event-${event}`}
|
||||
type="checkbox"
|
||||
label={event}
|
||||
checked={enabledEvents.includes(event)}
|
||||
onChange={() => toggleEvent(event)}
|
||||
/>
|
||||
))}
|
||||
<Form.Text className="text-muted">
|
||||
Zvolte události, o kterých chcete být notifikováni. Notifikace jsou odesílány pouze uživatelům se stejnou zvolenou lokalitou.
|
||||
</Form.Text>
|
||||
</Form.Group>
|
||||
</Col>
|
||||
</Row>
|
||||
</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<Button variant="secondary" onClick={onClose}>
|
||||
|
||||
Reference in new issue
Block a user