Clean up all code
This commit is contained in:
@ -3,15 +3,15 @@ import Image from "next/image";
|
||||
export default function TT_Header() {
|
||||
return (
|
||||
<header className="w-full py-2 pt-6 md:py-5">
|
||||
<div className="flex flex-row items-center text-center sm:justify-center
|
||||
ml-4 sm:ml-0 p-4">
|
||||
<div className="flex flex-row items-center text-center
|
||||
sm:justify-center ml-4 sm:ml-0 p-4">
|
||||
<Image src="/images/tech_tracker_logo.png"
|
||||
alt="Tech Tracker Logo" width={100} height={100}
|
||||
className="max-w-[40px] md:max-w-[120px]"
|
||||
/>
|
||||
<h1 className="title-text text-sm md:text-4xl lg:text-8xl font-bold pl-2 md:pl-12
|
||||
<h1 className="title-text text-sm md:text-4xl lg:text-8xl
|
||||
bg-gradient-to-r from-[#bec8e6] via-[#F0EEE4] to-[#FFF8E7]
|
||||
text-transparent bg-clip-text">
|
||||
font-bold pl-2 md:pl-12 text-transparent bg-clip-text">
|
||||
Tech Tracker
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
@ -19,19 +19,7 @@ export default function Table({ employees }: { employees: Employee[] }) {
|
||||
const [employeeStatus, setStatus] = useState('');
|
||||
const [employeeData, setEmployeeData] = useState(employees);
|
||||
|
||||
useEffect(() => {
|
||||
if (status !== "loading") {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [status]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
// Refresh employee data if needed after state updates
|
||||
setEmployeeData(employees);
|
||||
}, [employees]);
|
||||
|
||||
const fetchEmployees = useCallback(async (): Promise<Employee[]> => {
|
||||
const fetch_employees = useCallback(async (): Promise<Employee[]> => {
|
||||
const res = await fetch('/api/v2/get_employees', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
@ -41,28 +29,39 @@ export default function Table({ employees }: { employees: Employee[] }) {
|
||||
return res.json() as Promise<Employee[]>;
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchAndUpdateEmployees = async () => {
|
||||
const updatedEmployees = await fetchEmployees();
|
||||
setEmployeeData(updatedEmployees);
|
||||
};
|
||||
|
||||
fetchAndUpdateEmployees()
|
||||
.catch((error) => {
|
||||
console.error('Error fetching employees:', error);
|
||||
});
|
||||
|
||||
const intervalId = setInterval(() => {
|
||||
(async () => {
|
||||
await fetchAndUpdateEmployees();
|
||||
})()
|
||||
.catch((error) => {
|
||||
console.error('Error fetching employees:', error);
|
||||
const update_status = async () => {
|
||||
if (!session) {
|
||||
alert("You must be signed in to update status.");
|
||||
return;
|
||||
}
|
||||
// If no employee is selected and status is not empty
|
||||
if (selectedIds.length === 0 && employeeStatus.trim() !== '') {
|
||||
const cur_user = employees.find(employee => employee.name === session.user?.name);
|
||||
if (cur_user) {
|
||||
await fetch('/api/v2/update_status', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${process.env.API_KEY}`
|
||||
},
|
||||
body: JSON.stringify({ employeeIds: [cur_user.id], newStatus: employeeStatus }),
|
||||
});
|
||||
}
|
||||
} else if (employeeStatus.trim() !== '') {
|
||||
await fetch('/api/v2/update_status', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${process.env.API_KEY}`
|
||||
},
|
||||
body: JSON.stringify({ employeeIds: selectedIds, newStatus: employeeStatus }),
|
||||
});
|
||||
}, 10000); // Poll every 10 seconds
|
||||
|
||||
return () => clearInterval(intervalId); // Clear interval on component unmount
|
||||
}, [fetchEmployees]);
|
||||
}
|
||||
const updatedEmployees = await fetch_employees();
|
||||
setEmployeeData(updatedEmployees);
|
||||
setSelectedIds([]);
|
||||
setStatus('');
|
||||
};
|
||||
|
||||
const handleCheckboxChange = (id: number) => {
|
||||
setSelectedIds((prevSelected) =>
|
||||
@ -82,59 +81,18 @@ export default function Table({ employees }: { employees: Employee[] }) {
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedIds.length === employeeData.length && employeeData.length > 0) {
|
||||
setSelectAll(true);
|
||||
} else {
|
||||
setSelectAll(false);
|
||||
}
|
||||
}, [selectedIds, employeeData]);
|
||||
|
||||
const handleStatusChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setStatus(e.target.value);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!session) {
|
||||
alert("You must be signed in to update status.");
|
||||
return;
|
||||
}
|
||||
// If no employee is selected and status is not empty
|
||||
if (selectedIds.length === 0 && employeeStatus.trim() !== '') {
|
||||
const cur_user = employees.find(employee => employee.name === session.user?.name);
|
||||
if (cur_user) {
|
||||
await fetch('/api/v2/update_status', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${process.env.API_KEY}`
|
||||
},
|
||||
body: JSON.stringify({ employeeIds: [cur_user.id], newStatus: employeeStatus }),
|
||||
});
|
||||
}
|
||||
} else if (employeeStatus.trim() !== '') {
|
||||
await fetch('/api/v2/update_status', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${process.env.API_KEY}`
|
||||
},
|
||||
body: JSON.stringify({ employeeIds: selectedIds, newStatus: employeeStatus }),
|
||||
});
|
||||
}
|
||||
// Optionally refresh data on the client-side after update
|
||||
const updatedEmployees = await fetchEmployees();
|
||||
setEmployeeData(updatedEmployees);
|
||||
setSelectedIds([]);
|
||||
setStatus('');
|
||||
};
|
||||
|
||||
const handleKeyPress = async (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
const handleKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === 'Enter') {
|
||||
await handleSubmit();
|
||||
await update_status();
|
||||
// if key is i then focus text input
|
||||
}
|
||||
};
|
||||
|
||||
// Format time for display
|
||||
const formatTime = (timestamp: Date) => {
|
||||
const date = new Date(timestamp);
|
||||
const time = date.toLocaleTimeString('en-US', {
|
||||
@ -145,64 +103,121 @@ const handleSubmit = async () => {
|
||||
const month = date.toLocaleString('default', { month: 'long' });
|
||||
return `${time} - ${month} ${day}`;
|
||||
};
|
||||
|
||||
// Loading bar while we wait for auth
|
||||
useEffect(() => {
|
||||
if (status !== "loading") {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [status]);
|
||||
|
||||
// Refresh employee data if needed after state updates
|
||||
useEffect(() => {
|
||||
setEmployeeData(employees);
|
||||
}, [employees]);
|
||||
|
||||
// Fetch employees from the server every 10 seconds
|
||||
useEffect(() => {
|
||||
const fetchAndUpdateEmployees = async () => {
|
||||
const updatedEmployees = await fetch_employees();
|
||||
setEmployeeData(updatedEmployees);
|
||||
};
|
||||
fetchAndUpdateEmployees()
|
||||
.catch((error) => {
|
||||
console.error('Error fetching employees:', error);
|
||||
});
|
||||
const intervalId = setInterval(() => {
|
||||
(async () => {
|
||||
await fetchAndUpdateEmployees();
|
||||
})()
|
||||
.catch((error) => {
|
||||
console.error('Error fetching employees:', error);
|
||||
});
|
||||
}, 10000); // Poll every 10 seconds
|
||||
|
||||
return () => clearInterval(intervalId); // Clear interval on component unmount
|
||||
}, [fetch_employees]);
|
||||
|
||||
// Handle checkbox changes
|
||||
useEffect(() => {
|
||||
if (selectedIds.length === employeeData.length && employeeData.length > 0) {
|
||||
setSelectAll(true);
|
||||
} else {
|
||||
setSelectAll(false);
|
||||
}
|
||||
}, [selectedIds, employeeData]);
|
||||
|
||||
if (loading) return <Loading interval_amount={3} />;
|
||||
return (
|
||||
<div>
|
||||
<table className="techtable rounded-2xl w-5/6 m-auto text-center text-[42px]">
|
||||
<thead className="bg-gradient-to-b from-[#282828] to-[#383838]">
|
||||
<tr>
|
||||
<th className="tabletitles p-4 border border-[#3e4446] text-[48px]">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="m-0 cursor-pointer transform scale-150"
|
||||
checked={selectAll}
|
||||
onChange={handleSelectAllChange}
|
||||
/>
|
||||
</th>
|
||||
<th className="tabletitles p-2 border border-[#3e4446] text-[48px]">Name</th>
|
||||
<th className="tabletitles p-2 border border-[#3e4446] text-[48px]">Status</th>
|
||||
<th className="tabletitles p-2 border border-[#3e4446] text-[48px]">Updated At</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{employeeData.map((employee) => (
|
||||
<tr className="even:bg-gradient-to-br from-[#272727] to-[#313131]
|
||||
odd:bg-gradient-to-bl odd:from-[#252525] odd:to-[#212125]" key={employee.id}>
|
||||
<td className="p-1 border border-[#3e4446]">
|
||||
else {
|
||||
return (
|
||||
<div>
|
||||
<table className="techtable rounded-2xl w-5/6 m-auto text-center text-[42px]">
|
||||
<thead className="tabletitles border border-[#3e4446]
|
||||
bg-gradient-to-b from-[#282828] to-[#383838] text-[48px]">
|
||||
<tr>
|
||||
<th className="py-3 px-4 border border-[#3e4446]">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="m-0 cursor-pointer transform scale-150"
|
||||
checked={selectedIds.includes(employee.id)}
|
||||
onChange={() => handleCheckboxChange(employee.id)}
|
||||
className="m-auto cursor-pointer transform scale-150"
|
||||
checked={selectAll}
|
||||
onChange={handleSelectAllChange}
|
||||
/>
|
||||
</td>
|
||||
<td className="n-column px-1 md:py-5 border border-[#3e4446]">{employee.name}</td>
|
||||
<td className="s-column px-1 md:py-5 border border-[#3e4446]">{employee.status}</td>
|
||||
<td className="ua-column px-1 md:py-5 border border-[#3e4446]">{formatTime(employee.updatedAt)}</td>
|
||||
</th>
|
||||
<th className="border border-[#3e4446]">Name</th>
|
||||
<th className="border border-[#3e4446]">Status</th>
|
||||
<th className="border border-[#3e4446]">Updated At</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="m-auto flex flex-row items-center justify-center py-5">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="New Status"
|
||||
className="min-w-[120px] lg:min-w-[400px] bg-[#F9F6EE] py-2 px-3 border-none rounded-xl text-[#111111] lg:text-2xl"
|
||||
value={employeeStatus}
|
||||
onChange={handleStatusChange}
|
||||
onKeyDown={handleKeyPress}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="min-w-[100px] lg:min-w-[160px] m-2 p-2 border-none rounded-xl text-center
|
||||
font-semibold lg:text-2xl hover:text-slate-300
|
||||
hover:bg-gradient-to-bl hover:from-[#484848] hover:to-[#333333]
|
||||
bg-gradient-to-br from-[#595959] to-[#444444]"
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
Update
|
||||
</button>
|
||||
</thead>
|
||||
<tbody>
|
||||
{employeeData.map((employee) => (
|
||||
<tr className="even:bg-gradient-to-br from-[#272727] to-[#313131]
|
||||
odd:bg-gradient-to-bl odd:from-[#252525] odd:to-[#212125]"
|
||||
key={employee.id}
|
||||
>
|
||||
<td className="p-1 border border-[#3e4446]">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="m-0 cursor-pointer transform scale-150"
|
||||
checked={selectedIds.includes(employee.id)}
|
||||
onChange={() => handleCheckboxChange(employee.id)}
|
||||
/>
|
||||
</td>
|
||||
<td className="n-column px-1 md:py-5 border border-[#3e4446]">
|
||||
{employee.name}
|
||||
</td>
|
||||
<td className="s-column px-1 md:py-5 border border-[#3e4446]">
|
||||
{employee.status}
|
||||
</td>
|
||||
<td className="ua-column px-1 md:py-5 border border-[#3e4446]">
|
||||
{formatTime(employee.updatedAt)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="m-auto flex flex-row items-center justify-center py-5">
|
||||
<input
|
||||
autoFocus
|
||||
type="text"
|
||||
placeholder="New Status"
|
||||
className="min-w-[120px] lg:min-w-[400px] bg-[#F9F6EE]
|
||||
py-2 px-3 border-none rounded-xl text-[#111111] lg:text-2xl"
|
||||
value={employeeStatus}
|
||||
onChange={handleStatusChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="min-w-[100px] lg:min-w-[160px] m-2 p-2 border-none
|
||||
rounded-xl text-center font-semibold lg:text-2xl hover:text-slate-300
|
||||
hover:bg-gradient-to-bl hover:from-[#484848] hover:to-[#333333]
|
||||
bg-gradient-to-br from-[#595959] to-[#444444]"
|
||||
onClick={update_status}
|
||||
>
|
||||
Update
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user