function MainComponent() { const fishSpeciesOptions = [ "Rainbow Trout", "Channel Catfish", "Rohu", "Catla", "Mrigal", "Silver carp", "Big head Carp", "Grass Carp", "Common carp", "Pangasius", "Nile Tilapia" ]; const fishParams = { "Pangasius": { a: 0.364, b: -0.03 }, "Nile Tilapia": { a: 0.179, b: -0.035 }, "Common carp": { a: 0.204, b: -0.051 } }; const calculateResults = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const fishSpecies = formData.get("fishSpecies"); const mass = parseFloat(formData.get("mass")); const temperature = parseFloat(formData.get("temperature")); const sd = parseFloat(formData.get("sd")); const depth = parseFloat(formData.get("depth")); const wind = parseFloat(formData.get("wind")); const saturation = parseFloat(formData.get("saturation")); const doLevel = parseFloat(formData.get("do")); const { a, b } = fishParams[fishSpecies]; const oxygenConsumption = a * Math.pow(mass / 1000, b) * Math.pow(1.024, temperature - 20); const Chl_a = Math.pow(10, 2.33 - 0.94 * Math.log(sd)); const prespr = -1.133 + 0.00381 * sd + 0.0000145 * sd ** 2 + 0.0812 * temperature - 0.000749 * temperature ** 2 - 0.000349 * sd * temperature; const bresp = 0.061 / depth; const reaer = (0.03 * Math.sqrt(wind) - 0.0132 * wind + 0.0015 * wind ** 2) * (saturation - doLevel); const ext = 0.594 * Math.exp(-0.00594 * (300 / 1.42)); const zeu = 4.6 / ext; const ewr = 0.43 * Math.exp(-0.1182 - 0.4892 * zeu / ext); const rad = 1.36 * Chl_a / (Chl_a + depth); const gpp = (1 - zeu / 4.6) * rad * ewr; document.getElementById("oxygenConsumption").textContent = oxygenConsumption.toFixed(3); document.getElementById("prespr").textContent = prespr.toFixed(3); document.getElementById("bresp").textContent = bresp.toFixed(3); document.getElementById("reaer").textContent = reaer.toFixed(3); document.getElementById("gpp").textContent = gpp.toFixed(3); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] mx-auto p-4", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, "Fish Oxygen Consumption Calculator"), /*#__PURE__*/ React.createElement("form", { onSubmit: calculateResults, __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "fishSpecies", className: "block text-[#010101] font-semibold mb-2", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Select Fish species"), /*#__PURE__*/ React.createElement("select", { name: "fishSpecies", id: "fishSpecies", className: "w-full p-2 border border-gray-400 rounded", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, fishSpeciesOptions.map((species)=>/*#__PURE__*/ React.createElement("option", { key: species, value: species, __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, species)))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "mass", className: "block text-[#010101] font-semibold mb-2", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "Mass (grams)"), /*#__PURE__*/ React.createElement("input", { type: "number", step: "any", name: "mass", id: "mass", className: "w-full p-2 border border-gray-400 rounded", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "temperature", className: "block text-[#010101] font-semibold mb-2", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "Temperature (°C)"), /*#__PURE__*/ React.createElement("input", { type: "number", step: "any", name: "temperature", id: "temperature", className: "w-full p-2 border border-gray-400 rounded", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "sd", className: "block text-[#010101] font-semibold mb-2", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "Secchi disk depth (m)"), /*#__PURE__*/ React.createElement("input", { type: "number", step: "any", name: "sd", id: "sd", className: "w-full p-2 border border-gray-400 rounded", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "depth", className: "block text-[#010101] font-semibold mb-2", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "Average pond depth (m)"), /*#__PURE__*/ React.createElement("input", { type: "number", step: "any", name: "depth", id: "depth", className: "w-full p-2 border border-gray-400 rounded", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "wind", className: "block text-[#010101] font-semibold mb-2", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, "Wind velocity (m/s)"), /*#__PURE__*/ React.createElement("input", { type: "number", step: "any", name: "wind", id: "wind", className: "w-full p-2 border border-gray-400 rounded", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "saturation", className: "block text-[#010101] font-semibold mb-2", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "Saturation level (g/m³)"), /*#__PURE__*/ React.createElement("input", { type: "number", step: "any", name: "saturation", id: "saturation", className: "w-full p-2 border border-gray-400 rounded", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "do", className: "block text-[#010101] font-semibold mb-2", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "Existing DO level (g/m³)"), /*#__PURE__*/ React.createElement("input", { type: "number", step: "any", name: "do", id: "do", className: "w-full p-2 border border-gray-400 rounded", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-blue-500 text-white font-semibold rounded", __source: { fileName: "", lineNumber: 96, columnNumber: 9 }, __self: this }, "Calculate")), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, "Results"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 103, columnNumber: 14 }, __self: this }, "Oxygen consumption:"), " ", /*#__PURE__*/ React.createElement("span", { id: "oxygenConsumption", __source: { fileName: "", lineNumber: 103, columnNumber: 51 }, __self: this }, "-"), " g O₂/kg fish/hr"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 104, columnNumber: 14 }, __self: this }, "PRESPR:"), " ", /*#__PURE__*/ React.createElement("span", { id: "prespr", __source: { fileName: "", lineNumber: 104, columnNumber: 39 }, __self: this }, "-"), " g m⁻³ h⁻¹"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 105, columnNumber: 14 }, __self: this }, "BRESP:"), " ", /*#__PURE__*/ React.createElement("span", { id: "bresp", __source: { fileName: "", lineNumber: 105, columnNumber: 38 }, __self: this }, "-"), " g m⁻³ h⁻¹"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 106, columnNumber: 14 }, __self: this }, "REAER:"), " ", /*#__PURE__*/ React.createElement("span", { id: "reaer", __source: { fileName: "", lineNumber: 106, columnNumber: 38 }, __self: this }, "-"), " g m⁻³ h⁻¹"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 107, columnNumber: 14 }, __self: this }, "GPP:"), " ", /*#__PURE__*/ React.createElement("span", { id: "gpp", __source: { fileName: "", lineNumber: 107, columnNumber: 36 }, __self: this }, "-"), " g m⁻³ h⁻¹")))); }