web: adapt to the backend refactoring
- Implements the new data model. - TODO: tests and everything. Co-Authored-by: iGor milhit <igor@milhit.ch>main
parent
cd99b31e0a
commit
c728ca57ef
GPG Key ID:
692D97C3D0228A99
269
web/src/App.jsx
269
web/src/App.jsx
|
|
@ -1,73 +1,228 @@
|
||||||
import { useState } from 'react';
|
import { useState } from "react";
|
||||||
import './App.css';
|
import "./App.css";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [data, setData] = useState(null);
|
const [formData, setFormData] = useState({
|
||||||
|
total_flour: "",
|
||||||
|
hydration: "",
|
||||||
|
sourdough_percentage: "",
|
||||||
|
sourdough_flour_parts: "1",
|
||||||
|
sourdough_water_parts: "1",
|
||||||
|
salt: "",
|
||||||
|
});
|
||||||
|
|
||||||
async function handleSubmit(e) {
|
const [result, setResult] = useState(null);
|
||||||
e.preventDefault();
|
const [loading, setLoading] = useState(false);
|
||||||
const form = new FormData(e.target);
|
const [error, setError] = useState(null);
|
||||||
const body = {
|
|
||||||
flour: Number(form.get('flour')),
|
const handleChange = (e) => {
|
||||||
hydration: Number(form.get('hydration')),
|
const { name, value } = e.target;
|
||||||
sourdough_hydration: Number(form.get('sourdough_hydration')),
|
setFormData((prev) => ({
|
||||||
salt_percent: Number(form.get('salt_percent')),
|
...prev,
|
||||||
sourdough_percent: Number(form.get('sourdough_percent'))
|
[name]: value,
|
||||||
|
}));
|
||||||
};
|
};
|
||||||
|
|
||||||
const res = await fetch('http://localhost:8000/calculate', {
|
const handleSubmit = async (e) => {
|
||||||
method: 'POST',
|
e.preventDefault();
|
||||||
headers: { 'Content-Type': 'application/json' },
|
setLoading(true);
|
||||||
body: JSON.stringify(body)
|
setError(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
// Transform form data to API format
|
||||||
|
const apiData = {
|
||||||
|
total_flour: parseFloat(formData.total_flour),
|
||||||
|
hydration: parseFloat(formData.hydration),
|
||||||
|
sourdough_percentage: parseFloat(formData.sourdough_percentage),
|
||||||
|
sourdough_ratio: {
|
||||||
|
flour_parts: parseFloat(formData.sourdough_flour_parts),
|
||||||
|
water_parts: parseFloat(formData.sourdough_water_parts),
|
||||||
|
},
|
||||||
|
salt: parseFloat(formData.salt),
|
||||||
|
};
|
||||||
|
|
||||||
|
const response = await fetch("http://localhost:8000/calculate", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify(apiData),
|
||||||
});
|
});
|
||||||
const json = await res.json();
|
|
||||||
setData(json);
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json();
|
||||||
|
throw new Error(
|
||||||
|
errorData.detail || `HTTP error! status: ${response.status}`
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
setResult(data);
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.message);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section>
|
<div className="container">
|
||||||
<h1>Calculateur de quantités</h1>
|
<h1>Bread Dough Calculator</h1>
|
||||||
<p>
|
|
||||||
Calcule les quantités de farine, levain, eau et sel sur la base des
|
|
||||||
informations renseignées dans le formulaire.
|
|
||||||
</p>
|
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
<label>
|
<div className="form-group">
|
||||||
Farine (g) :
|
<label htmlFor="total_flour">Total Flour (g):</label>
|
||||||
<input name="flour" type="number" defaultValue={500} />
|
<input
|
||||||
</label>
|
type="number"
|
||||||
<label>
|
id="total_flour"
|
||||||
Hydratation (%) :
|
name="total_flour"
|
||||||
<input name="hydration" type="number" defaultValue={60} />
|
value={formData.total_flour}
|
||||||
</label>
|
onChange={handleChange}
|
||||||
<label>
|
min="1"
|
||||||
Hydratation du levain (%) :
|
step="1"
|
||||||
<input name="sourdough_hydration" type="number"
|
required
|
||||||
defaultValue={50} />
|
/>
|
||||||
</label>
|
</div>
|
||||||
<label>
|
|
||||||
Sel (%) :
|
<div className="form-group">
|
||||||
<input name="salt_percent" type="number" defaultValue={1.6} />
|
<label htmlFor="hydration">Hydration (%):</label>
|
||||||
</label>
|
<input
|
||||||
<label>
|
type="number"
|
||||||
Levain (%) :
|
id="hydration"
|
||||||
<input name="sourdough_percent" type="number" defaultValue={20} />
|
name="hydration"
|
||||||
</label>
|
value={formData.hydration}
|
||||||
<button type="submit">Calculer</button>
|
onChange={handleChange}
|
||||||
|
min="50"
|
||||||
|
max="100"
|
||||||
|
step="0.1"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-group">
|
||||||
|
<label htmlFor="sourdough_percentage">Sourdough (% of flour):</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
id="sourdough_percentage"
|
||||||
|
name="sourdough_percentage"
|
||||||
|
value={formData.sourdough_percentage}
|
||||||
|
onChange={handleChange}
|
||||||
|
min="0"
|
||||||
|
max="50"
|
||||||
|
step="0.1"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<fieldset className="ratio-fieldset">
|
||||||
|
<legend>Sourdough Ratio (Flour:Water)</legend>
|
||||||
|
|
||||||
|
<div className="form-group">
|
||||||
|
<label htmlFor="sourdough_flour_parts">Flour parts:</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
id="sourdough_flour_parts"
|
||||||
|
name="sourdough_flour_parts"
|
||||||
|
value={formData.sourdough_flour_parts}
|
||||||
|
onChange={handleChange}
|
||||||
|
min="0.1"
|
||||||
|
step="0.1"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-group">
|
||||||
|
<label htmlFor="sourdough_water_parts">Water parts:</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
id="sourdough_water_parts"
|
||||||
|
name="sourdough_water_parts"
|
||||||
|
value={formData.sourdough_water_parts}
|
||||||
|
onChange={handleChange}
|
||||||
|
min="0.1"
|
||||||
|
step="0.1"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<div className="form-group">
|
||||||
|
<label htmlFor="salt">Salt (% of flour):</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
id="salt"
|
||||||
|
name="salt"
|
||||||
|
value={formData.salt}
|
||||||
|
onChange={handleChange}
|
||||||
|
min="0"
|
||||||
|
max="5"
|
||||||
|
step="0.1"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" disabled={loading}>
|
||||||
|
{loading ? "Calculating..." : "Calculate"}
|
||||||
|
</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
{data && (
|
{error && (
|
||||||
<section>
|
<div className="error">
|
||||||
<h2>Quantités pour ton pâton</h2>
|
<h2>Error</h2>
|
||||||
<ul>
|
<p>{error}</p>
|
||||||
<li>Farine : {data.flour} g</li>
|
</div>
|
||||||
<li>Eau : {data.water} g</li>
|
|
||||||
<li>Levain : {data.sourdough} g</li>
|
|
||||||
<li>Sel : {data.salt} g</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
)}
|
)}
|
||||||
</section>
|
|
||||||
|
{result && (
|
||||||
|
<div className="results">
|
||||||
|
<h2>Ingredients to Add</h2>
|
||||||
|
<div className="result-grid">
|
||||||
|
<div className="result-item">
|
||||||
|
<span className="label">Flour:</span>
|
||||||
|
<span className="value">{result.ingredients_to_add.flour}g</span>
|
||||||
|
</div>
|
||||||
|
<div className="result-item">
|
||||||
|
<span className="label">Water:</span>
|
||||||
|
<span className="value">{result.ingredients_to_add.water}g</span>
|
||||||
|
</div>
|
||||||
|
<div className="result-item">
|
||||||
|
<span className="label">Sourdough:</span>
|
||||||
|
<span className="value">
|
||||||
|
{result.ingredients_to_add.sourdough}g
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="result-item">
|
||||||
|
<span className="label">Salt:</span>
|
||||||
|
<span className="value">{result.ingredients_to_add.salt}g</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3>Recipe Details</h3>
|
||||||
|
<div className="result-grid">
|
||||||
|
<div className="result-item">
|
||||||
|
<span className="label">Total flour:</span>
|
||||||
|
<span className="value">{result.details.total_flour}g</span>
|
||||||
|
</div>
|
||||||
|
<div className="result-item">
|
||||||
|
<span className="label">Total water:</span>
|
||||||
|
<span className="value">{result.details.total_water}g</span>
|
||||||
|
</div>
|
||||||
|
<div className="result-item">
|
||||||
|
<span className="label">Flour in sourdough:</span>
|
||||||
|
<span className="value">
|
||||||
|
{result.details.flour_in_sourdough}g
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="result-item">
|
||||||
|
<span className="label">Water in sourdough:</span>
|
||||||
|
<span className="value">
|
||||||
|
{result.details.water_in_sourdough}g
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue