function UserRegistrationForm({ title, onRegister }) { const handleRegistration = ()=>{ const name = document.querySelector('input[name="reg_name"]').value; const password = document.querySelector('input[name="reg_password"]').value; onRegister(name, password); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("input", { type: "text", name: "reg_name", placeholder: "Name", className: "border p-2 mb-2", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "password", name: "reg_password", placeholder: "Password", className: "border p-2 mb-2", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleRegistration, className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, "Register")); } function UserRegistrationFormStory() { const handleRegister = (name, password)=>{ console.log("Registering", { name, password }); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(UserRegistrationForm, { title: "Register", onRegister: handleRegister, __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this })); } function MainComponent() { const [loggedIn, setLoggedIn] = React.useState(false); const [currentUser, setCurrentUser] = React.useState(null); const [workloads, setWorkloads] = React.useState([]); const [editingWorkload, setEditingWorkload] = React.useState(null); const handleRegister = async (name, password)=>{ await fetch('/api/db/workingdatabase', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `users` (`name`, `password`) VALUES (?, ?)", values: [ name, password ] }) }); }; const handleLogin = async (name, password)=>{ const response = await fetch('/api/db/workingdatabase', { method: 'POST', body: JSON.stringify({ query: 'SELECT * FROM `users` WHERE `name` = ? AND `password` = ?', values: [ name, password ] }) }); const user = await response.json(); if (user.length > 0) { setLoggedIn(true); setCurrentUser(user[0]); fetchWorkloads(); } }; const fetchWorkloads = async ()=>{ const response = await fetch('/api/db/workingdatabase', { method: 'POST', body: JSON.stringify({ query: 'SELECT * FROM `workloads`' }) }); const data = await response.json(); setWorkloads(data); }; const handleWorkloadSubmit = async (startTime, endTime, taskCodes)=>{ await fetch('/api/db/workingdatabase', { method: 'POST', body: JSON.stringify({ query: "INSERT INTO `workloads` (`start_time`, `end_time`, `task_code_1`, `task_code_2`, `task_code_3`) VALUES (?, ?, ?, ?, ?)", values: [ startTime, endTime, taskCodes[0], taskCodes[1], taskCodes[2] ] }) }); fetchWorkloads(); }; const handleWorkloadEdit = async (id, startTime, endTime, taskCodes)=>{ await fetch('/api/db/workingdatabase', { method: 'POST', body: JSON.stringify({ query: "UPDATE `workloads` SET `start_time` = ?, `end_time` = ?, `task_code_1` = ?, `task_code_2` = ?, `task_code_3` = ? WHERE `id` = ?", values: [ startTime, endTime, taskCodes[0], taskCodes[1], taskCodes[2], id ] }) }); fetchWorkloads(); setEditingWorkload(null); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, !loggedIn ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(UserRegistrationForm, { title: "Register", onRegister: handleRegister, __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(UserRegistrationForm, { title: "Login", onRegister: handleLogin, __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this })) : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "Workload Tracker"), /*#__PURE__*/ React.createElement(WorkloadForm, { onSubmit: handleWorkloadSubmit, __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(WorkloadList, { workloads: workloads, setEditingWorkload: setEditingWorkload, __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }), editingWorkload && /*#__PURE__*/ React.createElement(WorkloadEditForm, { workload: editingWorkload, onSubmit: handleWorkloadEdit, __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }))); } function WorkloadForm({ onSubmit }) { const [startTime, setStartTime] = React.useState(''); const [endTime, setEndTime] = React.useState(''); const [taskCodes, setTaskCodes] = React.useState([ '', '', '' ]); const handleTaskCodeChange = (index, value)=>{ const updatedTaskCodes = [ ...taskCodes ]; updatedTaskCodes[index] = value; setTaskCodes(updatedTaskCodes); }; const handleSubmit = ()=>{ onSubmit(startTime, endTime, taskCodes); }; return /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 110, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "start_time", type: "datetime-local", value: startTime, onChange: (e)=>setStartTime(e.target.value), className: "border p-2 mb-2", __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "end_time", type: "datetime-local", value: endTime, onChange: (e)=>setEndTime(e.target.value), className: "border p-2 mb-2", __source: { fileName: "", lineNumber: 112, columnNumber: 7 }, __self: this }), taskCodes.map((code, index)=>/*#__PURE__*/ React.createElement("input", { key: index, type: "text", value: code, onChange: (e)=>handleTaskCodeChange(index, e.target.value), className: "border p-2 mb-2", placeholder: `Task Code ${index + 1}`, __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }, "Submit")); } function WorkloadList({ workloads, setEditingWorkload }) { return /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 123, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 124, columnNumber: 7 }, __self: this }, "Workload List"), workloads.map((workload)=>/*#__PURE__*/ React.createElement("div", { key: workload.id, className: "border p-2 mb-2", __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 127, columnNumber: 16 }, __self: this }, "Start Time:"), " ", workload.start_time), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 128, columnNumber: 16 }, __self: this }, "End Time:"), " ", workload.end_time), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 129, columnNumber: 16 }, __self: this }, "Task Codes:"), " ", workload.task_code_1, ", ", workload.task_code_2, ", ", workload.task_code_3), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setEditingWorkload(workload), className: "bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded mt-2", __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, "Edit")))); } function WorkloadEditForm({ workload, onSubmit }) { const [startTime, setStartTime] = React.useState(workload.start_time); const [endTime, setEndTime] = React.useState(workload.end_time); const [taskCodes, setTaskCodes] = React.useState([ workload.task_code_1, workload.task_code_2, workload.task_code_3 ]); const handleTaskCodeChange = (index, value)=>{ const updatedTaskCodes = [ ...taskCodes ]; updatedTaskCodes[index] = value; setTaskCodes(updatedTaskCodes); }; const handleSubmit = ()=>{ onSubmit(workload.id, startTime, endTime, taskCodes); }; return /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 157, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "edit_start_time", type: "datetime-local", value: startTime, onChange: (e)=>setStartTime(e.target.value), className: "border p-2 mb-2", __source: { fileName: "", lineNumber: 158, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "edit_end_time", type: "datetime-local", value: endTime, onChange: (e)=>setEndTime(e.target.value), className: "border p-2 mb-2", __source: { fileName: "", lineNumber: 159, columnNumber: 7 }, __self: this }), taskCodes.map((code, index)=>/*#__PURE__*/ React.createElement("input", { key: index, type: "text", value: code, onChange: (e)=>handleTaskCodeChange(index, e.target.value), className: "border p-2 mb-2", placeholder: `Task Code ${index + 1}`, __source: { fileName: "", lineNumber: 161, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 163, columnNumber: 7 }, __self: this }, "Save")); }