Мне надо сделать получение ввода по полям он закидывает данные которые есть и если каких либо не хватает то прости дозаполнить, вот более подробнее об этом:
Сделать выбор от 2 до 4 участков и соответственно столько значений надо в p_ejector дополнять в зависимсости от участков, изначально 2, если неизвестно, p_values всегда 3 элемента, с остальными тоже все фиксировано, пример json для calculate API:
{
"turbine_name": "string",
"valve_drawing": "string",
"valve_id": 0,
"temperature_start": 0,
"t_air": 0,
"count_valves": 0,
"p_ejector": [
0
],
"p_values": [
0
]
}
Так должны выглядеть отправленные данные на API, вот что выдаст в случае успеха
{
"id": 0,
"user_name": "string",
"stock_name": "string",
"turbine_name": "string",
"calc_timestamp": "2024-12-02T22:12:23.306Z",
"input_data": {},
"output_data": {}
}
Потом переходим по схеме такой как когда тыкнули что не требуется перерасчет но уже только с этими значениями
StockInputPage.tsx
import React, { useState, useEffect } from 'react';
import './StockInputPage.css';

type Props = {
  stock: any;
  onSubmit: (data: any) => void;
  initialData?: any; // Добавляем пропс для начальных данных
};

const StockInputPage: React.FC<Props> = ({ stock, onSubmit, initialData }) => {
  const [countParts, setCountParts] = useState(2);

  const [inputData, setInputData] = useState({
    turbine_name: stock.turbine_name || '',
    valve_drawing: stock.valve_drawing || '',
    valve_id: stock.valve_id || '',
    temperature_start: '',
    t_air: '',
    count_valves: countParts,
    p_ejector: Array(countParts).fill(''),
    p_values: Array(3).fill(''),
  });

  useEffect(() => {
    if (initialData) {
      setInputData(initialData);
      setCountParts(initialData.count_valves);
    }
  }, [initialData]);

  const handleInputChange = (e, index = null, arrayName = '') => {
    const { name, value } = e.target;

    if (index !== null && arrayName) {
      setInputData((prevData) => {
        const newValues = [...prevData[arrayName]];
        newValues[index] = value;
        return { ...prevData, [arrayName]: newValues };
      });
    } else {
      setInputData((prevData) => ({ ...prevData, [name]: value }));
    }
  };

  const handleCountPartsChange = (e) => {
    const value = parseInt(e.target.value);
    setCountParts(value);
    setInputData((prevData) => ({
      ...prevData,
      count_valves: value,
      p_ejector: Array(value).fill(''),
    }));
  };

  const handleSubmit = () => {
    console.log('Submitting data:', inputData); // Отладочное сообщение
    onSubmit(inputData);
  };

  return (
    <div className="stock-input-page">
      <h2 className="title">Ввод данных для штока {stock.name}</h2>

      {/* Выбор количества частей */}
      <div className="input-container">
        <label htmlFor="countParts" className="input-label">
          Количество частей (от 2 до 4):
        </label>
        <select
          id="countParts"
          value={countParts}
          onChange={handleCountPartsChange}
          className="stock-input"
        >
          {[2, 3, 4].map((value) => (
            <option key={value} value={value}>
              {value}
            </option>
          ))}
        </select>
      </div>

      {/* Ввод значений для p_ejector */}
      <h3 className="input-label">Введите значения для p_ejector:</h3>
      {inputData.p_ejector.map((value, index) => (
        <input
          key={`p_ejector-${index}`}
          type="number"
          name={`p_ejector-${index}`}
          placeholder={`p_ejector для части ${index + 1}`}
          value={value}
          onChange={(e) => handleInputChange(e, index, 'p_ejector')}
          className="value-input"
        />
      ))}

      {/* Ввод значений для p_values */}
      <h3 className="input-label">Введите значения для p_values (3 элемента):</h3>
      {inputData.p_values.map((value, index) => (
        <input
          key={`p_values-${index}`}
          type="number"
          name={`p_values-${index}`}
          placeholder={`p_value ${index + 1}`}
          value={value}
          onChange={(e) => handleInputChange(e, index, 'p_values')}
          className="value-input"
        />
      ))}

      {/* Остальные параметры */}
      <input
        type="number"
        name="temperature_start"
        placeholder="Начальная температура"
        value={inputData.temperature_start}
        onChange={handleInputChange}
        className="value-input"
      />
      <input
        type="number"
        name="t_air"
        placeholder="Температура воздуха"
        value={inputData.t_air}
        onChange={handleInputChange}
        className="value-input"
      />

      <button className="btn-stock" onClick={handleSubmit}>
        Отправить
      </button>
    </div>
  );
};

export default StockInputPage;

EarlyCalculationPage.tsx
import React, { useEffect } from 'react';
import './EarlyCalculationPage.css';

type Props = {
  stockId: string;
  lastCalculation: any;
  onRecalculate: (recalculate: boolean) => void;
};

const EarlyCalculationPage: React.FC<Props> = ({ stockId, lastCalculation, onRecalculate }) => {
  const gi = lastCalculation?.output_data.Gi || [];
  const pi_in = lastCalculation?.output_data.Pi_in || [];
  const ti = lastCalculation?.output_data.Ti || [];
  const hi = lastCalculation?.output_data.Hi || [];
  const deaeratorProps = lastCalculation?.output_data.deaerator_props || [];
  const ejectorProps = lastCalculation?.output_data.ejector_props || [];
  const inputData = lastCalculation?.input_data || {}; // Входные данные

  // Функция для округления чисел
  const roundNumber = (num: number, decimals: number = 4) => {
    return Math.round(num * Math.pow(10, decimals)) / Math.pow(10, decimals);
  };

  // Вывод входных и выходных данных в консоль для диагностики
  useEffect(() => {
    console.group(`Данные для штока: ${stockId}`);
    console.log('lastCalculation:', lastCalculation);
    console.log('Входные данные:', inputData);
    console.log('Выходные данные:', {
      Gi: gi,
      Pi_in: pi_in,
      Ti: ti,
      Hi: hi,
      deaeratorProps: deaeratorProps,
      ejectorProps: ejectorProps
    });
    console.groupEnd();
  }, [stockId, lastCalculation, inputData, gi, pi_in, ti, hi, deaeratorProps, ejectorProps]);

  return (
    <div className="detected-calculation">
      <h2>Шток {stockId}</h2>
      <h3>Обнаружен предыдущий расчет</h3>

      <h3>Входные данные</h3>
      {Object.keys(inputData).length > 0 ? (
        <table className="results-table">
          <thead>
            <tr>
              {Object.keys(inputData).map((key) => (
                <th key={key}>{key}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            <tr>
              {Object.values(inputData).map((value, index) => (
                <td key={index}>
                  {Array.isArray(value) ? value.join(', ') : value.toString()}
                </td>
              ))}
            </tr>
          </tbody>
        </table>
      ) : (
        <p>Нет доступных входных данных.</p>
      )}

      <h3>Выходные данные</h3>
      {gi.length > 0 ? (
        <table className="calculation-table">
          <thead>
            <tr>
              <th>Gi</th>
              <th>Pi_in</th>
              <th>Ti</th>
              <th>Hi</th>
            </tr>
          </thead>
          <tbody>
            {gi.map((value, index) => (
              <tr key={index}>
                <td>{roundNumber(value)}</td>
                <td>{roundNumber(pi_in[index])}</td>
                <td>{roundNumber(ti[index])}</td>
                <td>{roundNumber(hi[index])}</td>
              </tr>
            ))}
          </tbody>
        </table>
      ) : (
        <p>Нет доступных выходных данных.</p>
      )}

      {/* Отображение ejector_props */}
      <h3>Ejector Properties</h3>
      {ejectorProps.length > 0 ? (
        <table className="calculation-table">
          <thead>
            <tr>
              <th>g</th>
              <th>h</th>
              <th>p</th>
              <th>t</th>
            </tr>
          </thead>
          <tbody>
            {ejectorProps.map((prop, index) => (
              <tr key={index}>
                <td>{roundNumber(prop.g)}</td>
                <td>{roundNumber(prop.h)}</td>
                <td>{roundNumber(prop.p)}</td>
                <td>{roundNumber(prop.t)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      ) : (
        <p>Нет доступных данных для ejector_props.</p>
      )}

      {/* Отображение deaerator_props */}
      <h3>Deaerator Properties</h3>
      {deaeratorProps.length > 0 ? (
        <table className="calculation-table">
          <tbody>
            <tr>
              {deaeratorProps.map((value, index) => (
                <td key={index}>{roundNumber(value)}</td>
              ))}
            </tr>
          </tbody>
        </table>
      ) : (
        <p>Нет доступных данных для deaerator_props.</p>
      )}

      <h3 className="question-before-buttons">Желаете провести перерасчет?</h3>
      <div className="buttons">
        <button onClick={() => onRecalculate(false)} className="btn red">
          Нет
        </button>
        <button onClick={() => onRecalculate(true)} className="btn green">
          Да
        </button>
      </div>
    </div>
  );
};

export default EarlyCalculationPage;

StockSelection.tsx
import React from 'react';
import './StockSelection.css';

type Valve = {
  id: number;
  name: string;
  type: string | null;
  diameter: number | null;
  clearance: number | null;
  countParts: number | null;
  lenPart1: number | null;
  lenPart2: number | null;
  lenPart3: number | null;
  lenPart4: number | null;
  lenPart5: number | null;
  roundRadius: number;
  sectionLengths: (number | null)[];
};

type Props = {
  turbine: any;
  onSelectValve: (valve: Valve) => void;
};

const StockSelection: React.FC<Props> = ({ turbine, onSelectValve }) => {
  const [valves, setValves] = React.useState<Valve[]>([]);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState<string | null>(null);

  React.useEffect(() => {
    const fetchValves = async () => {
      try {
        const response = await fetch(`http://localhost:8000/api/turbines/${turbine.name}/valves`);
        if (!response.ok) {
          throw new Error(`Ошибка загрузки данных. Статус: ${response.status}`);
        }
        const data = await response.json();
        setValves(data.valves);
      } catch (error: any) {
        console.error('Ошибка запроса:', error);
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };
    fetchValves();
  }, [turbine]);

  if (loading) return <div>Загрузка клапанов...</div>;
  if (error) return <div>Ошибка: {error}</div>;

  return (
    <div className="stock-selection">
      <h2 className="title">Выбранная турбина: {turbine.name}</h2>
      <h3 className="title">Выберите шток для расчетов</h3>
      <ul className="stock-list">
        {valves.map((valve) => (
          <li key={valve.id} className="stock-item" onClick={() => onSelectValve(valve)}>
            <p className="stock-name">{valve.name}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default StockSelection;