Marbes/Luncher
5
2
Fork 0
Code Issues 6 Pull Requests Packages Projects Releases Wiki Activity

Funkční generování QR kódů

Browse Source
This commit is contained in:
Martin Berka 2023-06-17 09:32:41 +02:00
parent 45c2f9e264
commit 55b9d1681e
9 changed files with 174 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@ -44,11 +44,12 @@ Aplikace sestává ze tří (čtyř) modulů.
- [x] Implementovat Pizza day
- [x] Umožnit uzamčení objednávek zakladatelem
- [x] Možnost uložení čísla účtu
- [ ] Automatické generování a zobrazení QR kódů
- [ ] https://qr-platba.cz/pro-vyvojare/restful-api/
- [x] Automatické generování a zobrazení QR kódů
- [x] https://qr-platba.cz/pro-vyvojare/restful-api/
- [ ] Zobrazovat celkovou cenu objednávky pod tabulkou objednávek
- [ ] Zobrazit upozornění před smazáním/zamknutím/odemknutím pizza day
- [ ] Umožnit přidat k objednávce poznámku (např. "bez oliv")
- [ ] Negenerovat QR kód pro objednávajícího
- [ ] Předvyplnění poslední vybrané hodnoty občas nefunguje, viz komentář
- [ ] Nasazení nové verze v Docker smaže veškerá data (protože data.json není venku)
- [ ] Vylepšit dokumentaci projektu
@ -59,7 +60,7 @@ Aplikace sestává ze tří (čtyř) modulů.
- [ ] Nutno nejprve vyřešit předávání PHPSESSIONID cookie na pizzachefie.cz pomocí fetch()
- [ ] Přesunout autentizaci na server (JWT?)
- [x] Zavést .env.template a přidat .env do .gitignore
- [ ] Zkrášlit dialog pro vyplnění čísla účtu, vypadá mizerně
- [x] Zkrášlit dialog pro vyplnění čísla účtu, vypadá mizerně
- [ ] Podpora pro notifikace v externích systémech (Gotify, Discord, MS Teams)
- [ ] Skripty pro snadné spuštění vývoje na Windows (ekvivalent ./run_dev.sh)
- [ ] Možnost náhledu na jiné dny v týdnu (např. pomocí šipek)

8
client/src/Api.ts
View File

@ -18,6 +18,10 @@ const api = {
post: <TBody extends BodyInit, TResponse>(url: string, body: TBody) => request<TResponse>(url, { method: 'POST', body, headers: { 'Content-Type': 'application/json' } }),
}
export const getQrUrl = (login: string) => {
return `${getBaseUrl()}/api/qr?login=${login}`;
}
export const getData = async () => {
return await api.get<any>('/api/data');
}
@ -50,8 +54,8 @@ export const finishOrder = async (login) => {
return await api.post<any, any>('/api/finishOrder', JSON.stringify({ login }));
}
export const finishDelivery = async (login) => {
return await api.post<any, any>('/api/finishDelivery', JSON.stringify({ login }));
export const finishDelivery = async (login, bankAccount, bankAccountHolder) => {
return await api.post<any, any>('/api/finishDelivery', JSON.stringify({ login, bankAccount, bankAccountHolder }));
}
export const updateChoice = async (name: string, choice: number | null) => {

4
client/src/App.css
View File

@ -72,3 +72,7 @@
cursor: pointer;
margin-left: 10px;
}
.qr-code {
text-align: center;
}

36
client/src/App.tsx
View File

@ -1,10 +1,10 @@
import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { EVENT_DISCONNECT, EVENT_MESSAGE, SocketContext } from './context/socket';
import { addPizza, createPizzaDay, deletePizzaDay, finishDelivery, finishOrder, getData, getFood, getPizzy, lockPizzaDay, removePizza, unlockPizzaDay, updateChoice } from './Api';
import { addPizza, createPizzaDay, deletePizzaDay, finishDelivery, finishOrder, getData, getFood, getPizzy, getQrUrl, lockPizzaDay, removePizza, unlockPizzaDay, updateChoice } from './Api';
import { useAuth } from './context/auth';
import Login from './Login';
import { Locations, ClientData, Pizza, PizzaOrder, State } from './Types';
import { Locations, ClientData, Pizza, PizzaOrder, State, Order } from './Types';
import { Alert, Button, Col, Form, Row, Table } from 'react-bootstrap';
import Header from './components/Header';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@ -14,16 +14,19 @@ import 'react-select-search/style.css';
import './App.css';
import { SelectSearchOption } from 'react-select-search';
import { faTrashCan } from '@fortawesome/free-regular-svg-icons';
import { useBank } from './context/bank';
const EVENT_CONNECT = "connect"
function App() {
const auth = useAuth();
const bank = useBank();
const [isConnected, setIsConnected] = useState<boolean>(false);
const [data, setData] = useState<ClientData>();
const [food, setFood] = useState<any>();
const [pizzy, setPizzy] = useState<Pizza[]>();
const [myOrder, setMyOrder] = useState<Order>();
const socket = useContext(SocketContext);
const choiceRef = useRef<HTMLSelectElement>(null);
@ -76,6 +79,16 @@ function App() {
}
}, [auth, auth?.login, data?.choices])
// Reference na mojí objednávku
useEffect(() => {
if (data?.pizzaDay?.orders) {
const myOrder = data.pizzaDay.orders.find(o => o.customer === auth?.login);
if (myOrder) {
setMyOrder(myOrder);
}
}
}, [data?.pizzaDay?.orders])
const changeChoice = async (event: React.ChangeEvent<HTMLSelectElement>) => {
const index = Object.values(Locations).indexOf(event.target.value as unknown as Locations);
if (auth?.login) {
@ -183,10 +196,8 @@ function App() {
<Alert variant={'primary'}>
Poslední změny:
<ul>
<li>Žárovka praskla a vyhodila hlavní jistič</li>
<li>Už jsem jí vyměnil</li>
<li>Dobrá práce</li>
<li>Aplikace zatím nic nového neumí</li>
<li>Nová žárovka zatím funguje</li>
<li>Funkční generování a zobrazení QR kódů pro Pizza day</li>
</ul>
</Alert>
<h1 className='title'>Dnes je {data.date}</h1>
@ -288,7 +299,7 @@ function App() {
await lockPizzaDay(auth.login);
}}>Vrátit do "uzamčeno"</Button>
<Button className='danger mb-3' style={{ marginLeft: '20px' }} title="Nastaví stav na 'Doručeno' - koncový stav." onClick={async () => {
await finishDelivery(auth.login);
await finishDelivery(auth.login, bank?.bankAccount, bank?.holderName);
}}>Doručeno</Button>
</div>
}
@ -297,7 +308,7 @@ function App() {
{
data.pizzaDay.state === State.DELIVERED &&
<div>
<p>Pizzy byly doručeny.</p>
<p>Pizzy byly doručeny. Objednávku můžete uhradit pomocí QR kódu níže.</p>
</div>
}
</div>
@ -309,6 +320,15 @@ function App() {
disabled={data.pizzaDay.state !== State.CREATED}
/>
<PizzaOrderList state={data.pizzaDay.state} orders={data.pizzaDay.orders} onDelete={handlePizzaDelete} />
{
data.pizzaDay.state === State.DELIVERED && myOrder &&
<div className='qr-code'>
<h3>QR platba</h3>
<div>Částka: {myOrder.totalPrice} Kč</div>
<img src={getQrUrl(auth.login)} alt='QR kód' />
<p>Generování QR kódů je v experimentální fázi - doporučujeme si překontrolovat údaje před odesláním platby.</p>
</div>
}
</div>
}
</div>

6
server/src/chefie.ts
View File

@ -3,6 +3,7 @@ import os from 'os';
import path from 'path';
import fs from 'fs';
import axios from 'axios';
import { formatDate } from './utils';
type PizzaSize = {
varId: number,
@ -85,10 +86,7 @@ const downloadPizzy = async () => {
export const fetchPizzy = async (): Promise<Pizza[]> => {
const tmpDir = os.tmpdir();
const date_ob = new Date();
const date = ("0" + date_ob.getDate()).slice(-2);
const month = ("0" + (date_ob.getMonth() + 1)).slice(-2);
const year = date_ob.getFullYear();
const dateStr = year + "-" + month + "-" + date;
const dateStr = formatDate(date_ob);
const dataPath = path.join(tmpDir, `chefie-${dateStr}.json`);
if (fs.existsSync(dataPath)) {

15
server/src/index.ts
View File

@ -7,6 +7,7 @@ import { addPizzaOrder, createPizzaDay, deletePizzaDay, finishPizzaDelivery, fin
import dotenv from 'dotenv';
import path from 'path';
import { fetchMenus } from "./restaurants";
import { getQr } from "./qr";
const ENVIRONMENT = process.env.NODE_ENV || 'production'
dotenv.config({ path: path.resolve(__dirname, `../.env.${ENVIRONMENT}`) });
@ -134,7 +135,7 @@ app.post("/api/finishDelivery", (req, res) => {
if (!req.body?.login) {
throw Error("Nebyl předán login");
}
const data = finishPizzaDelivery(req.body.login);
const data = finishPizzaDelivery(req.body.login, req.body.bankAccount, req.body.bankAccountHolder);
io.emit("message", data);
res.status(200).json({});
});
@ -148,6 +149,18 @@ app.post("/api/updateChoice", (req, res) => {
res.status(200).json(data);
});
app.get("/api/qr", (req, res) => {
if (!req.query?.login || typeof req.query.login !== 'string') {
throw Error("Nebyl předán login");
}
const img = getQr(req.query.login);
res.writeHead(200, {
'Content-Type': 'image/png',
'Content-Length': img.length
});
res.end(img);
});
io.on("connection", (socket) => {
console.log(`New client connected: ${socket.id}`);

98
server/src/qr.ts Normal file
View File

@ -0,0 +1,98 @@
import fs from "fs";
import axios from "axios";
import os from "os";
import path from "path";
import crypto from "crypto";
import { formatDate } from "./utils";
const QR_GENERATOR_URL = 'https://api.paylibo.com/paylibo/generator/image';
const COUNTRY_CODE = 'CZ';
const CURRENCY_CODE = 'CZK';
const QR_PIXEL_SIZE = 256;
const tmpDir = os.tmpdir();
/**
* Převede číslo účtu z BBAN do IBAN. Automaticky dopočítá kontrolní číslice.
*
* @param bankAccountNumber číslo účtu ve formátu BBAN (123456-0123456789/0100)
*/
function convertBbanToIban(bankAccountNumber: string): string {
// TODO validovat číslo účtu stejně jako na klientovi, pro případ že sem někdo pošle nesmysl
let prefix: string = '';
let accountNumber: string = bankAccountNumber;
if (bankAccountNumber.indexOf('-') >= 0) {
const split = bankAccountNumber.split('-');
prefix = split[0];
accountNumber = split[1];
}
prefix = prefix.padStart(6, '0');
const split = accountNumber.split('/');
accountNumber = split[0].padStart(10, '0');
const bankCode = split[1].padStart(4, '0');
let iban = `${bankCode}${prefix}${accountNumber}${COUNTRY_CODE}00`;
// Zatím napevno, nemá smysl řešit nic jiného než CZ
iban = iban.replace('C', '12').replace('Z', '35');
const remainder = BigInt(iban) % BigInt(97);
const checkDigits = BigInt(98) - remainder;
iban = `${COUNTRY_CODE}${checkDigits.toString()}${bankCode}${prefix}${accountNumber}`;
if (iban.length !== 24) {
throw Error("Neplatná délka sestaveného IBAN: " + iban.length + ", očekáváno 24");
}
return iban;
}
function createNameHash(customerName: string): string {
return crypto.createHash('md5').update(customerName).digest('hex');
}
function createFilePath(nameHash: string): string {
const fileName = `${formatDate(new Date())}_${nameHash}.png`;
return path.join(tmpDir, fileName);
}
/**
* Vygeneruje, uloží a vrátí unikátní ID obrázku platebního QR kódu s danými parametry.
*
* @param customerName jméno uživatele, pro kterého je QR kód generován
* @param bankAccountNumber číslo cílového bankovního účtu ve formátu BBAN
* @param bankAccountHolder jméno držitele cílového bankovního účtu
* @param amount částka v Kč
* @param message zpráva pro příjemce
* @returns hash, pomocí kterého lze následně získat vygenerovaný obrázek
*/
export async function generateQr(customerName: string, bankAccountNumber: string, bankAccountHolder: string, amount: number, message: string): Promise<string> {
// Zpráva pro příjemce nesmí dle standardu obsahovat '*' a být delší než 60 znaků
if (message.indexOf('*') >= 0) {
message = message.replace('*', '');
}
if (message.length > 60) {
message = message.substring(0, 60);
}
const payload = {
iban: convertBbanToIban(bankAccountNumber),
amount,
currency: CURRENCY_CODE,
message,
recipientName: bankAccountHolder,
branding: false,
compress: false,
size: QR_PIXEL_SIZE,
}
const response = await axios.get(QR_GENERATOR_URL, { responseType: 'stream', params: { ...payload } });
// Použijeme hash, abychom nemuseli řešit nepovolené znaky ve jménu uživatele
const nameHash = createNameHash(customerName);
const imgPath = createFilePath(nameHash);
response.data.pipe(fs.createWriteStream(imgPath));
return nameHash;
}
/**
* Vrátí obrázek s QR kódem, pokud existuje.
*
* @param customerName jméno uživatele
* @returns data obrázku
*/
export function getQr(customerName: string): Buffer {
const imgPath = createFilePath(createNameHash(customerName));
return fs.readFileSync(imgPath);
}

23
server/src/service.ts
View File

@ -1,7 +1,8 @@
import {ClientData, Locations, Order, Pizza, PizzaDayState, PizzaOrder, PizzaSize, UdalostEnum} from "./types";
import {db} from "./database";
import {formatDate, getHumanDate, getIsWeekend} from "./utils";
import {callNotifikace} from "./notifikace";
import { ClientData, Locations, Order, Pizza, PizzaDayState, PizzaOrder, PizzaSize, UdalostEnum } from "./types";
import { db } from "./database";
import { formatDate, getHumanDate, getIsWeekend } from "./utils";
import { callNotifikace } from "./notifikace";
import { generateQr } from "./qr";
/** Vrátí dnešní datum, případně fiktivní datum pro účely vývoje a testování. */
function getToday(): Date {
@ -191,17 +192,18 @@ export function finishPizzaOrder(login: string) {
}
clientData.pizzaDay.state = PizzaDayState.ORDERED;
db.set(today, clientData);
callNotifikace({input:{udalost:UdalostEnum.OBJEDNANA_PIZZA,user:clientData?.pizzaDay?.creator}})
callNotifikace({ input: { udalost: UdalostEnum.OBJEDNANA_PIZZA, user: clientData?.pizzaDay?.creator } })
return clientData;
}
/**
* Nastaví stav pizza day na "pizzy doručeny".
* Vygeneruje QR kódy pro všechny objednatele, pokud objednávající má vyplněné číslo účtu a jméno.
*
* @param login login uživatele
* @returns aktuální data pro uživatele
*/
export function finishPizzaDelivery(login: string) {
export function finishPizzaDelivery(login: string, bankAccount?: string, bankAccountHolder?: string) {
const today = formatDate(getToday());
const clientData: ClientData = db.get(today);
if (!clientData.pizzaDay) {
@ -214,6 +216,15 @@ export function finishPizzaDelivery(login: string) {
throw Error("Pizza day není ve stavu " + PizzaDayState.ORDERED);
}
clientData.pizzaDay.state = PizzaDayState.DELIVERED;
// Vygenerujeme QR kód, pokud k tomu máme data
if (bankAccount?.length && bankAccountHolder?.length) {
for (const order of clientData.pizzaDay.orders) {
let message = order.pizzaList.map(pizza => `Pizza ${pizza.name} (${pizza.size})`).join(', ');
const price = order.pizzaList.map(pizza => pizza.price).reduce((partial, a) => partial + a, 0);
generateQr(order.customer, bankAccount, bankAccountHolder, price, message).then(() => order.hasQr = true);
}
}
db.set(today, clientData);
return clientData;
}

1
server/src/types.ts
View File

@ -33,6 +33,7 @@ export interface Order {
customer: string, // jméno objednatele
pizzaList: PizzaOrder[], // seznam objednaných pizz
totalPrice: number, // celková cena všech objednaných pizz a krabic
hasQr?: boolean, // true, pokud je k objednávce vygenerován QR kód pro platbu
}
/** Stav pizza dne */