React 配方管理

import React, { useState } from "react";

function App() {
  // State management
  const [tanks, setTanks] = useState([]);
  const [totalizers, setTotalizers] = useState([]);
  const [recipes, setRecipes] = useState([]);
  const [selectedRecipe, setSelectedRecipe] = useState(null);
  const [simulationStatus, setSimulationStatus] = useState("");

  // Add a new tank
  const addTank = (name, quantity) => {
    if (name && quantity > 0) {
      setTanks([...tanks, { name, quantity }]);
    } else {
      alert("Veuillez entrer un nom valide et une quantité positive.");
    }
  };

  // Add a new totalizer
  const addTotalizer = (type) => {
    if (type) {
      setTotalizers([...totalizers, { type, status: "Ready" }]);
    } else {
      alert("Veuillez entrer un type de totalizer.");
    }
  };

  // Add a new recipe
  const addRecipe = (name, ingredients) => {
    if (name && ingredients) {
      const parsedIngredients = ingredients.split(",").reduce((acc, item) => {
        const [key, value] = item.split(":");
        acc[key.trim()] = parseFloat(value.trim());
        return acc;
      }, {});
      setRecipes([...recipes, { name, ingredients: parsedIngredients }]);
    } else {
      alert("Veuillez entrer un nom de recette et des ingrédients valides.");
    }
  };

  // Simulate a recipe
  const simulateRecipe = () => {
    if (selectedRecipe !== null) {
      const recipe = recipes[selectedRecipe];
      let canProduce = true;

      for (const ingredient in recipe.ingredients) {
        const requiredQuantity = recipe.ingredients[ingredient];
        const tank = tanks.find((t) => t.name === ingredient);

        if (!tank || tank.quantity < requiredQuantity) {
          canProduce = false;
          setSimulationStatus(`Échec : Pas assez de ${ingredient}.`);
          return;
        }
      }

      if (canProduce) {
        setTanks(
          tanks.map((tank) =>
            recipe.ingredients[tank.name]
              ? { ...tank, quantity: tank.quantity - recipe.ingredients[tank.name] }
              : tank
          )
        );
        setSimulationStatus(`Succès : La recette "${recipe.name}" a été produite.`);
      }
    } else {
      alert("Veuillez sélectionner une recette.");
    }
  };

  return (
    <div style={{ padding: "20px", fontFamily: "Arial" }}>
      <h1>Simulation de Gestion des Recettes</h1>

      {/* Tanks Section */}
      <div style={{ marginBottom: "20px" }}>
        <h2>Tanks</h2>
        <ul>
          {tanks.map((tank, index) => (
            <li key={index}>
              {tank.name} - {tank.quantity} unités
            </li>
          ))}
        </ul>
        <input id="tankName" placeholder="Nom du Tank" />
        <input id="tankQuantity" type="number" placeholder="Quantité" />
        <button
          onClick={() =>
            addTank(
              document.getElementById("tankName").value,
              parseFloat(document.getElementById("tankQuantity").value)
            )
          }
        >
          Ajouter Tank
        </button>
      </div>

      {/* Totalizers Section */}
      <div style={{ marginBottom: "20px" }}>
        <h2>Totalizers</h2>
        <ul>
          {totalizers.map((totalizer, index) => (
            <li key={index}>
              {totalizer.type} - Status: {totalizer.status}
            </li>
          ))}
        </ul>
        <input id="totalizerType" placeholder="Type de Totalizer" />
        <button
          onClick={() =>
            addTotalizer(document.getElementById("totalizerType").value)
          }
        >
          Ajouter Totalizer
        </button>
      </div>

      {/* Recipes Section */}
      <div style={{ marginBottom: "20px" }}>
        <h2>Recettes</h2>
        <ul>
          {recipes.map((recipe, index) => (
            <li key={index}>
              {recipe.name} - Ingrédients:{" "}
              {Object.entries(recipe.ingredients)
                .map(([key, value]) => `${key}: ${value}`)
                .join(", ")}
            </li>
          ))}
        </ul>
        <input id="recipeName" placeholder="Nom de la Recette" />
        <input
          id="recipeIngredients"
          placeholder='Ingrédients (ex: "Cocoa Powder:50,Sugar:30")'
        />
        <button
          onClick={() =>
            addRecipe(
              document.getElementById("recipeName").value,
              document.getElementById("recipeIngredients").value
            )
          }
        >
          Ajouter Recette
        </button>
      </div>

      {/* Simulation Section */}
      <div style={{ marginBottom: "20px" }}>
        <h2>Simulation</h2>
        <select
          onChange={(e) => setSelectedRecipe(e.target.value)}
          defaultValue=""
        >
          <option value="" disabled>
            Sélectionnez une recette
          </option>
          {recipes.map((recipe, index) => (
            <option key={index} value={index}>
              {recipe.name}
            </option>
          ))}
        </select>
        <button onClick={simulateRecipe}>Lancer la Recette</button>
        <p style={{ fontWeight: "bold", color: simulationStatus.includes("Échec") ? "red" : "green" }}>
          {simulationStatus}
        </p>
      </div>
    </div>
  );
}

export default App;