function MainComponent() { const handleSubmit = (e)=>{ e.preventDefault(); const speciesConstants = { Pangasius: { a: 0.364, b: -0.03 }, "Indian Major Carp": { a: 0.283, b: -0.041 }, "Chinese Carp": { a: 0.325, b: -0.03 }, "Nile Tilapia": { a: 0.179, b: -0.035 }, "Pabda Catfish": { a: 0.354, b: -0.0411 }, "Shingi Catfish": { a: 0.297, b: -0.0219 }, "Koi Climbing perch": { a: 0.126, b: -0.048 }, "Common carp": { a: 0.204, b: -0.051 } }; const species = e.target['fish-species'].value; const fishMass = parseFloat(e.target['fish-mass'].value, 10); const waterTemp = parseFloat(e.target['water-temp'].value, 10); const secchiDepth = parseFloat(e.target['secchi-depth'].value, 10); const pondDepth = parseFloat(e.target['pond-depth'].value, 10); const windVelocity = parseFloat(e.target['wind-velocity'].value, 10); const saturation = parseFloat(e.target['saturation'].value, 10); const { a, b } = speciesConstants[species]; const oxygenConsumptionRate = a * Math.pow(fishMass / 1000, b) * Math.pow(1.024, waterTemp - 20); const SD = secchiDepth; const T = waterTemp; const PRESPR = -1.133 + 0.00381 * SD + 0.0000145 * SD ** 2 + 0.0812 * T - 0.000749 * T ** 2 - 0.000349 * SD * T; const Chl_a = Math.pow(10, 2.33 - 0.94 * Math.log(SD)); const BRESP = 0.061 / pondDepth; const WIND = windVelocity; const REAER = (0.03 * Math.sqrt(WIND) - 0.0132 * WIND + 0.0015 * WIND ** 2) * (saturation - 9); document.getElementById("oxygen-consumption-rate").innerText = oxygenConsumptionRate.toFixed(4); document.getElementById("prespr").innerText = PRESPR.toFixed(4); document.getElementById("chl-a").innerText = Chl_a.toFixed(4); document.getElementById("bresp").innerText = BRESP.toFixed(4); document.getElementById("reaer").innerText = REAER.toFixed(4); }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 max-w-3xl mx-auto bg-white rounded-xl shadow-md space-y-4", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, "Fish Oxygen Consumption Calculator"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid gap-4 sm:grid-cols-2", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto mb-2", htmlFor: "fish-species", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "Select Fish Species"), /*#__PURE__*/ React.createElement("select", { name: "fish-species", id: "fish-species", className: "w-full px-3 py-2 border rounded-md font-roboto", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "Rohu", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "Rohu"), /*#__PURE__*/ React.createElement("option", { value: "Catla", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, "Catla"), /*#__PURE__*/ React.createElement("option", { value: "Mrigal", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, "Mrigal"), /*#__PURE__*/ React.createElement("option", { value: "Silver carp", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, "Silver carp"), /*#__PURE__*/ React.createElement("option", { value: "Big head Carp", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, "Big head Carp"), /*#__PURE__*/ React.createElement("option", { value: "Grass Carp", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, "Grass Carp"), /*#__PURE__*/ React.createElement("option", { value: "Common carp", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, "Common carp"), /*#__PURE__*/ React.createElement("option", { value: "Pangasius", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, "Pangasius"), /*#__PURE__*/ React.createElement("option", { value: "Nile Tilapia", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "Nile Tilapia"), /*#__PURE__*/ React.createElement("option", { value: "Pabda catfish", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, "Pabda catfish"), /*#__PURE__*/ React.createElement("option", { value: "Shingi catfish", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, "Shingi catfish"), /*#__PURE__*/ React.createElement("option", { value: "Koi climbing perch", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, "Koi climbing perch"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto mb-2", htmlFor: "fish-mass", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "Fish Mass (grams)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "fish-mass", id: "fish-mass", step: "0.01", className: "w-full px-3 py-2 border rounded-md font-roboto", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto mb-2", htmlFor: "water-temp", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "Water Temperature (°C)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "water-temp", id: "water-temp", step: "0.01", className: "w-full px-3 py-2 border rounded-md font-roboto", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto mb-2", htmlFor: "secchi-depth", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "Secchi Disk Depth (m)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "secchi-depth", id: "secchi-depth", step: "0.01", className: "w-full px-3 py-2 border rounded-md font-roboto", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto mb-2", htmlFor: "pond-depth", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "Average Pond Depth (m)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "pond-depth", id: "pond-depth", step: "0.01", className: "w-full px-3 py-2 border rounded-md font-roboto", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto mb-2", htmlFor: "wind-velocity", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "Wind Velocity (m/s)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "wind-velocity", id: "wind-velocity", step: "0.01", className: "w-full px-3 py-2 border rounded-md font-roboto", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto mb-2", htmlFor: "saturation", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "Saturation Level"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "saturation", id: "saturation", step: "0.01", className: "w-full px-3 py-2 border rounded-md font-roboto", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full px-4 py-2 bg-blue-500 text-white font-roboto rounded-md hover:bg-blue-700", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, "Calculate")))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto bold", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, "Results"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4 rounded-md space-y-2", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, "Oxygen Consumption Rate: ", /*#__PURE__*/ React.createElement("span", { id: "oxygen-consumption-rate", __source: { fileName: "", lineNumber: 100, columnNumber: 63 }, __self: this }), " g O2/kg fish/hr"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, "PRESPR: ", /*#__PURE__*/ React.createElement("span", { id: "prespr", __source: { fileName: "", lineNumber: 101, columnNumber: 46 }, __self: this }), " g m^-3 h^-1"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, "Chl-a: ", /*#__PURE__*/ React.createElement("span", { id: "chl-a", __source: { fileName: "", lineNumber: 102, columnNumber: 45 }, __self: this }), " μg/L"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, "BRESP: ", /*#__PURE__*/ React.createElement("span", { id: "bresp", __source: { fileName: "", lineNumber: 103, columnNumber: 45 }, __self: this }), " g m^-3 h^-1"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, "REAER: ", /*#__PURE__*/ React.createElement("span", { id: "reaer", __source: { fileName: "", lineNumber: 104, columnNumber: 45 }, __self: this }), " g m^-3 h^-1"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, "GPP: ", /*#__PURE__*/ React.createElement("span", { id: "gpp", __source: { fileName: "", lineNumber: 105, columnNumber: 43 }, __self: this }), " g m^-3 h^-1")))); }