function MainComponent() { const [additionalInputs, setAdditionalInputs] = React.useState([]); const K = { Pangasius: 0.8, "Nile Tilapia": 1.0, "Indian major carp": 0.9, "Chinese carp": 0.85, "Pabda catfish": 0.7, "Shingi catfish": 0.65, "Koi climbing perch": 0.8, Shrimp: 1.2 }; const AR = { surface: 1.0, paddle: 1.0, double: 1.0, impeller: 1.0, fountain: 1.0 }; const E = AR; const C = AR; const toggleAdditionalInputs = (value)=>{ setAdditionalInputs([]); if (value === "Diffused aeration") { setAdditionalInputs([ { name: "airflow-rate", label: "Airflow Rate (m³/h)", type: "number" }, { name: "number-of-diffusers", label: "Number of Diffusers", type: "number" } ]); } else if ([ "Surface aeration", "Paddle wheel aeration", "Double speed aeration", "Impeller aeration", "Fountain aeration" ].includes(value)) { setAdditionalInputs([ { name: "horse-power", label: "Horse Power (HP)", type: "number" } ]); } }; const calculateFishPopulation = ()=>{ const waterArea = parseFloat(document.getElementById('water-area').value); const waterDepth = parseFloat(document.getElementById('water-depth').value); const secchiDepth = parseFloat(document.getElementById('secchi-depth').value); const fishSize = parseFloat(document.getElementById('fish-size').value); const fishSpecies = document.getElementById('fish-species').value; const aerationSystem = document.getElementById('aeration-system').value; if (isNaN(waterArea) || isNaN(waterDepth) || isNaN(secchiDepth) || isNaN(fishSize)) { alert('Please fill in all fields with valid numbers.'); return; } const pondVolume = waterArea * waterDepth; const F_species = K[fishSpecies]; let maxFishDensity; if (aerationSystem === "None") { maxFishDensity = F_species; } else if (aerationSystem === "Diffused aeration") { const airflowRate = parseFloat(document.getElementById('airflow-rate').value); const numberOfDiffusers = parseFloat(document.getElementById('number-of-diffusers').value); if (isNaN(airflowRate) || isNaN(numberOfDiffusers)) { alert('Please fill in all additional input fields with valid numbers.'); return; } maxFishDensity = F_species * (1 + airflowRate * numberOfDiffusers); } else { const horsePower = parseFloat(document.getElementById('horse-power').value); if (isNaN(horsePower)) { alert('Please fill in all additional input fields with valid numbers.'); return; } maxFishDensity = F_species * (1 + horsePower * AR.surface * E.surface * C.surface); } const fishPerCubicMeter = maxFishDensity / (secchiDepth + 0.1); const totalFish = fishPerCubicMeter * pondVolume; document.getElementById('fish-density').innerText = `Fish per Cubic Meter: ${fishPerCubicMeter.toFixed(2)}`; document.getElementById('total-fish').innerText = `Total Fish in Pond: ${totalFish.toFixed(0)}`; }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f4f4f4] p-5", __source: { fileName: "", lineNumber: 76, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[600px] mx-auto bg-white p-5 rounded-xl shadow-md", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center font-arial", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, "Fish Population Calculator"), /*#__PURE__*/ React.createElement("form", { id: "calculator-form", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "water-area", className: "block mb-1 mt-2 font-arial", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "Water Area (m²):"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "water-area", name: "water-area", className: "w-full p-2 border rounded-md mb-5 font-arial", required: true, __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "water-depth", className: "block mb-1 font-arial", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "Water Depth (m):"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "water-depth", name: "water-depth", step: "0.01", className: "w-full p-2 border rounded-md mb-5 font-arial", required: true, __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "secchi-depth", className: "block mb-1 font-arial", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "Secchi Disc Depth (m):"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "secchi-depth", name: "secchi-depth", step: "0.01", className: "w-full p-2 border rounded-md mb-5 font-arial", required: true, __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "fish-size", className: "block mb-1 font-arial", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "Fish Size (g):"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "fish-size", name: "fish-size", className: "w-full p-2 border rounded-md mb-5 font-arial", required: true, __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "fish-species", className: "block mb-1 font-arial", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, "Select Species:"), /*#__PURE__*/ React.createElement("select", { id: "fish-species", name: "fish-species", className: "w-full p-2 border rounded-md mb-5 font-arial", required: true, __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "Pangasius", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, "Pangasius"), /*#__PURE__*/ React.createElement("option", { value: "Nile Tilapia", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, "Nile Tilapia"), /*#__PURE__*/ React.createElement("option", { value: "Indian major carp", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, "Indian major carp"), /*#__PURE__*/ React.createElement("option", { value: "Chinese carp", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, "Chinese carp"), /*#__PURE__*/ React.createElement("option", { value: "Pabda catfish", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, "Pabda catfish"), /*#__PURE__*/ React.createElement("option", { value: "Shingi catfish", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "Shingi catfish"), /*#__PURE__*/ React.createElement("option", { value: "Koi climbing perch", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, "Koi climbing perch"), /*#__PURE__*/ React.createElement("option", { value: "Shrimp", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, "Shrimp")), /*#__PURE__*/ React.createElement("label", { htmlFor: "aeration-system", className: "block mb-1 font-arial", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, "Aeration System:"), /*#__PURE__*/ React.createElement("select", { id: "aeration-system", name: "aeration-system", className: "w-full p-2 border rounded-md mb-5 font-arial", required: true, onChange: (e)=>toggleAdditionalInputs(e.target.value), __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "None", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, "None"), /*#__PURE__*/ React.createElement("option", { value: "Diffused aeration", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, "Diffused aeration"), /*#__PURE__*/ React.createElement("option", { value: "Surface aeration", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, "Surface aeration"), /*#__PURE__*/ React.createElement("option", { value: "Paddle wheel aeration", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, "Paddle wheel aeration"), /*#__PURE__*/ React.createElement("option", { value: "Double speed aeration", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, "Double speed aeration"), /*#__PURE__*/ React.createElement("option", { value: "Impeller aeration", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, "Impeller aeration"), /*#__PURE__*/ React.createElement("option", { value: "Fountain aeration", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, "Fountain aeration")), additionalInputs.map((input)=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("label", { htmlFor: input.name, className: "block mb-1 font-arial", __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this }, input.label, ":"), /*#__PURE__*/ React.createElement("input", { type: input.type, id: input.name, name: input.name, className: "w-full p-2 border rounded-md mb-5 font-arial", required: true, __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { type: "button", className: "w-full p-2 bg-[#28a745] text-white rounded-md font-arial", onClick: calculateFishPopulation, __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, "Calculate")), /*#__PURE__*/ React.createElement("div", { className: "result text-center mt-5 font-arial", id: "fish-density", __source: { fileName: "", lineNumber: 127, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "result text-center mt-1 font-arial", id: "total-fish", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }))); }