141 lines
5.6 KiB
TypeScript
141 lines
5.6 KiB
TypeScript
import { useRef, useState } from "react";
|
|
import { Modal, Button, Row, Col } from "react-bootstrap"
|
|
|
|
type Props = {
|
|
isOpen: boolean,
|
|
onClose: () => void,
|
|
}
|
|
|
|
type Result = {
|
|
pizza1?: {
|
|
diameter?: number,
|
|
area?: number,
|
|
pricePerM?: number,
|
|
},
|
|
pizza2?: {
|
|
diameter?: number,
|
|
area?: number,
|
|
pricePerM?: number,
|
|
}
|
|
choice?: number,
|
|
ratio?: number,
|
|
diameterDiff?: number,
|
|
}
|
|
|
|
/** Modální dialog pro výpočet výhodnosti pizzy. */
|
|
export default function PizzaCalculatorModal({ isOpen, onClose }: Readonly<Props>) {
|
|
const diameter1Ref = useRef<HTMLInputElement>(null);
|
|
const price1Ref = useRef<HTMLInputElement>(null);
|
|
const diameter2Ref = useRef<HTMLInputElement>(null);
|
|
const price2Ref = useRef<HTMLInputElement>(null);
|
|
|
|
const [result, setResult] = useState<Result | null>(null);
|
|
|
|
const recalculate = () => {
|
|
const r: Result = { ...result }
|
|
|
|
// 1. pizza
|
|
if (diameter1Ref.current?.value) {
|
|
const diameter1 = parseInt(diameter1Ref.current?.value);
|
|
if (!r.pizza1) {
|
|
r.pizza1 = {};
|
|
}
|
|
if (diameter1 && diameter1 > 0) {
|
|
r.pizza1.diameter = diameter1;
|
|
r.pizza1.area = Math.PI * Math.pow(diameter1 / 2, 2);
|
|
if (price1Ref.current?.value) {
|
|
const price1 = parseInt(price1Ref.current?.value);
|
|
if (price1) {
|
|
r.pizza1.pricePerM = price1 / r.pizza1.area;
|
|
} else {
|
|
r.pizza1.pricePerM = undefined;
|
|
}
|
|
}
|
|
} else {
|
|
r.pizza1.area = undefined;
|
|
}
|
|
}
|
|
|
|
// 2. pizza
|
|
if (diameter2Ref.current?.value) {
|
|
const diameter2 = parseInt(diameter2Ref.current?.value);
|
|
if (!r.pizza2) {
|
|
r.pizza2 = {};
|
|
}
|
|
if (diameter2 && diameter2 > 0) {
|
|
r.pizza2.diameter = diameter2;
|
|
r.pizza2.area = Math.PI * Math.pow(diameter2 / 2, 2);
|
|
if (price2Ref.current?.value) {
|
|
const price2 = parseInt(price2Ref.current?.value);
|
|
if (price2) {
|
|
r.pizza2.pricePerM = price2 / r.pizza2.area;
|
|
} else {
|
|
r.pizza2.pricePerM = undefined;
|
|
}
|
|
}
|
|
} else {
|
|
r.pizza2.area = undefined;
|
|
}
|
|
}
|
|
|
|
// Srovnání
|
|
if (r.pizza1?.pricePerM && r.pizza2?.pricePerM && r.pizza1.diameter && r.pizza2.diameter) {
|
|
r.choice = r.pizza1.pricePerM < r.pizza2.pricePerM ? 1 : 2;
|
|
const bigger = r.pizza1.pricePerM > r.pizza2.pricePerM ? r.pizza1.pricePerM : r.pizza2.pricePerM;
|
|
const smaller = r.pizza1.pricePerM < r.pizza2.pricePerM ? r.pizza1.pricePerM : r.pizza2.pricePerM;
|
|
r.ratio = (bigger / smaller) - 1;
|
|
r.diameterDiff = Math.abs(r.pizza1.diameter - r.pizza2.diameter);
|
|
} else {
|
|
r.choice = undefined;
|
|
r.ratio = undefined;
|
|
r.diameterDiff = undefined;
|
|
}
|
|
setResult(r);
|
|
}
|
|
|
|
const close = () => {
|
|
setResult(null);
|
|
onClose();
|
|
}
|
|
|
|
return <Modal show={isOpen} onHide={onClose}>
|
|
<Modal.Header closeButton>
|
|
<Modal.Title>Pizza kalkulačka</Modal.Title>
|
|
</Modal.Header>
|
|
<Modal.Body>
|
|
<p>Zadejte parametry pizzy pro jejich srovnání.</p>
|
|
<Row>
|
|
<Col size="6">
|
|
<input className="mb-3" ref={diameter1Ref} type="number" step="1" min="1" placeholder="Průměr 1. pizzy (cm)" onChange={recalculate} onKeyDown={e => e.stopPropagation()} />
|
|
</Col>
|
|
<Col size="6">
|
|
<input className="mb-3" ref={diameter2Ref} type="number" step="1" min="1" placeholder="Průměr 2. pizzy (cm)" onChange={recalculate} onKeyDown={e => e.stopPropagation()} />
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col size="6">
|
|
<input className="mb-3" ref={price1Ref} type="number" min="1" placeholder="Cena 1. pizzy (Kč)" onChange={recalculate} onKeyDown={e => e.stopPropagation()} />
|
|
</Col>
|
|
<Col size="6">
|
|
<input className="mb-3" ref={price2Ref} type="number" min="1" placeholder="Cena 2. pizzy (Kč)" onChange={recalculate} onKeyDown={e => e.stopPropagation()} />
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col size="6">
|
|
{result?.pizza1?.area && <p>Plocha: <b>{Math.round(result.pizza1.area * 10) / 10}</b> cm²</p>}
|
|
{result?.pizza1?.pricePerM && <p>Cena za m²: <b>{Math.round(result.pizza1.pricePerM * 1000000) / 100}</b> Kč</p>}
|
|
</Col>
|
|
<Col size="6">
|
|
{result?.pizza2?.area && <p>Plocha: <b>{Math.round(result.pizza2.area * 10) / 10}</b> cm²</p>}
|
|
{result?.pizza2?.pricePerM && <p>Cena za m²: <b>{Math.round(result.pizza2.pricePerM * 1000000) / 100}</b> Kč</p>}
|
|
</Col>
|
|
</Row>
|
|
{(result?.choice && result?.ratio && result?.ratio > 0 && result?.diameterDiff != null && <p><b>{result.choice}. pizza</b> je zhruba o <b>{Math.round(result.ratio * 1000) / 10}%</b> výhodnější než {result.choice === 1 ? "2" : "1"}. pizza.</p>) || ''}
|
|
</Modal.Body>
|
|
<Modal.Footer>
|
|
<Button variant="primary" onClick={close}>
|
|
Zavřít
|
|
</Button>
|
|
</Modal.Footer>
|
|
</Modal>
|
|
} |