function MainComponent() { const [results, setResults] = React.useState({ ocr: "--", fresp: "--", prespr: "--", bresp: "--", reaer: "--", gpp: "--", chlA: "--" }); const constants = { pangasius: { a: 0.364, b: -0.03 }, indianMajorCarp: { a: 0.283, b: -0.041 }, chineseCarp: { a: 0.325, b: -0.03 }, nileTilapia: { a: 0.179, b: -0.035 }, pabdaCatfish: { a: 0.354, b: -0.0411 }, shingiCatfish: { a: 0.297, b: -0.0219 }, koiClimbingPerch: { a: 0.126, b: -0.048 }, commonCarp: { a: 0.204, b: -0.051 } }; const handleSubmit = (e)=>{ e.preventDefault(); const form = new FormData(e.target); const species = form.get("species"); const fishMass = parseFloat(form.get("fishMass")); const waterTemp = parseFloat(form.get("waterTemp")); const vol = parseFloat(form.get("vol")); const secchiDiskDepth = parseFloat(form.get("secchiDiskDepth")); const pondDepth = parseFloat(form.get("pondDepth")); const windVelocity = parseFloat(form.get("windVelocity")); const satLevel = parseFloat(form.get("satLevel")); const doLevel = parseFloat(form.get("doLevel")); //Calculate OCR let ocr = "--"; if ([ "pangasius", "indianMajorCarp", "chineseCarp", "pabdaCatfish", "shingiCatfish", "koiClimbingPerch" ].includes(species) && fishMass <= 1000) { const { a, b } = constants[species]; ocr = a * Math.pow(fishMass / 1000, b) * Math.pow(1.024, waterTemp - 20); } //Calculate U F R E S P const U_FRESP = Math.pow(10, -0.999 - 0.000957 * fishMass + 0.0000006 * fishMass * fishMass + 0.0327 * waterTemp - 0.000087 * waterTemp * waterTemp + 0.000003 * fishMass * waterTemp); //Calculate FRESP const fishBiomass = fishMass / vol; const FRESP = fishBiomass * U_FRESP / vol; //Calculate PRESPR const PRESPR = -1.133 + 0.00381 * secchiDiskDepth + 0.0000145 * secchiDiskDepth * secchiDiskDepth + 0.0812 * waterTemp - 0.000749 * waterTemp * waterTemp - 0.000349 * secchiDiskDepth * waterTemp; //Calculate BRESP const BRESP = 0.061 / pondDepth; //Calculate REAER const REAER = (0.03 * Math.sqrt(windVelocity) - 0.0132 * windVelocity + 0.0015 * windVelocity * windVelocity) * (satLevel - doLevel); //Calculate Chl-a const ChlA = Math.pow(10, 2.33 - 0.94 * Math.log(secchiDiskDepth)); //Calculate GPP const EXT_W = 0.594 * Math.exp(-0.00594 * 440); const EXT = EXT_W + 0.0604 * Math.pow(ChlA, 0.7546); const ZEU = 4.6 / EXT; const ZMAX = 4.6 / EXT_W; const PMAX = 0.448 * 1361 * ZEU; // With I0,toa = 1361 W/m^2 const PHAR = 0.43 * PMAX; const GPP = (1 - ZEU / ZMAX) * PMAX * PHAR; setResults({ ocr: ocr.toFixed(2), fresp: FRESP.toFixed(2), prespr: PRESPR.toFixed(2), bresp: BRESP.toFixed(2), reaer: REAER.toFixed(2), gpp: GPP.toFixed(2), chlA: ChlA.toFixed(2) }); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 flex flex-col gap-6", __source: { fileName: "", lineNumber: 83, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, "Fish Oxygen Calculator"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col gap-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "species", className: "font-roboto", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "Fish Species"), /*#__PURE__*/ React.createElement("select", { name: "species", id: "species", className: "p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "pangasius", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "Pangasius"), /*#__PURE__*/ React.createElement("option", { value: "indianMajorCarp", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "Indian Major Carp"), /*#__PURE__*/ React.createElement("option", { value: "chineseCarp", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "Chinese Carp"), /*#__PURE__*/ React.createElement("option", { value: "nileTilapia", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "Nile Tilapia"), /*#__PURE__*/ React.createElement("option", { value: "pabdaCatfish", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, "Pabda Catfish"), /*#__PURE__*/ React.createElement("option", { value: "shingiCatfish", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, "Shingi Catfish"), /*#__PURE__*/ React.createElement("option", { value: "koiClimbingPerch", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, "Koi Climbing Perch"), /*#__PURE__*/ React.createElement("option", { value: "commonCarp", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, "Common Carp"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "fishMass", className: "font-roboto", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, "Fish Mass (grams)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "fishMass", id: "fishMass", className: "p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "waterTemp", className: "font-roboto", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, "Water Temperature (°C)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "waterTemp", id: "waterTemp", className: "p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "vol", className: "font-roboto", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, "Water Volume per Unit Area of Pond (m³)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "vol", id: "vol", className: "p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "secchiDiskDepth", className: "font-roboto", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, "Secchi Disk Depth (m)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "secchiDiskDepth", id: "secchiDiskDepth", className: "p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "pondDepth", className: "font-roboto", __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }, "Average Pond Depth (m)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "pondDepth", id: "pondDepth", className: "p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "windVelocity", className: "font-roboto", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, "Wind Velocity (m/s)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "windVelocity", id: "windVelocity", className: "p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 123, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "satLevel", className: "font-roboto", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, "Saturation Level at Given Temperature"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "satLevel", id: "satLevel", className: "p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 127, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "doLevel", className: "font-roboto", __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this }, "Existing DO Level in Pond (mg/l)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "doLevel", id: "doLevel", className: "p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-blue-500 text-white rounded-md font-roboto", __source: { fileName: "", lineNumber: 131, columnNumber: 9 }, __self: this }, "Calculate")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 133, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 134, columnNumber: 9 }, __self: this }, "Results"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 135, columnNumber: 9 }, __self: this }, "OCR: ", results.ocr, " g O2 per kg fish per hour"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 136, columnNumber: 9 }, __self: this }, "FRESP: ", results.fresp, " g m^-3 h^-1"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 137, columnNumber: 9 }, __self: this }, "PRESPR: ", results.prespr, " g m^-3 h^-1"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 138, columnNumber: 9 }, __self: this }, "BRESP: ", results.bresp, " g m^-3 h^-1"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }, "REAER: ", results.reaer, " g m^-3 h^-1"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 140, columnNumber: 9 }, __self: this }, "GPP: ", results.gpp, " g m^-3 h^-1"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 141, columnNumber: 9 }, __self: this }, "Chl-a: ", results.chlA, " μg/L"))); }