gib/Tech_Tracker_Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mostly Front End & UI fixes

Browse Source
This commit is contained in:
Gabriel Brown
2024-07-20 09:12:29 -05:00
parent 8e02288d3d
commit 5f020bf542
12 changed files with 176 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/ui/TT_Header.tsx
View File

@ -2,12 +2,12 @@ import Image from "next/image";
export default function TT_Header() {
return (
<header className="w-full">
<header className="w-full py-5">
<div className="flex flex-row items-center text-center justify-center p-8">
<Image src="/images/tech_tracker_logo.png"
alt="Tech Tracker Logo" width={100} height={100}
alt="Tech Tracker Logo" width={80} height={80}
/>
<h1 className="text-6xl font-semibold pl-4">
<h1 className="title-text text-6xl font-semibold pl-4">
Tech Tracker
</h1>
</div>

71
src/components/ui/Table.tsx
View File

@ -1,6 +1,6 @@
'use client';
import { useState, useEffect } from 'react';
import { useState, useEffect, useCallback } from 'react';
// Define the Employee interface to match data fetched on the server
interface Employee {
@ -20,6 +20,39 @@ export default function Table({ employees }: { employees: Employee[] }) {
setEmployeeData(employees);
}, [employees]);
const fetchEmployees = useCallback(async (): Promise<Employee[]> => {
const res = await fetch('/api/get_employees', {
method: 'GET',
headers: {
'Authorization': `Bearer ${process.env.API_KEY}`
}
});
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);
});
}, 10000); // Poll every 10 seconds
return () => clearInterval(intervalId); // Clear interval on component unmount
}, [fetchEmployees]);
const handleCheckboxChange = (id: number) => {
setSelectedIds((prevSelected) =>
prevSelected.includes(id)
@ -50,14 +83,10 @@ export default function Table({ employees }: { employees: Employee[] }) {
}
};
const fetchEmployees = async (): Promise<Employee[]> => {
const res = await fetch('/api/get_employees', {
method: 'GET',
headers: {
'Authorization': `Bearer ${process.env.API_KEY}`
}
});
return res.json() as Promise<Employee[]>;
const handleKeyPress = async (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
await handleSubmit();
}
};
const formatTime = (timestamp: Date) => {
@ -73,13 +102,13 @@ export default function Table({ employees }: { employees: Employee[] }) {
return (
<div>
<table className="w-5/6 m-auto text-center border-collapse text-[42px]">
<table className="techtable w-2/3 min-h-[600px] m-auto text-center border-collapse text-[42px]">
<thead className="bg-gradient-to-br from-[#212121] to-[#333333]">
<tr>
<th className="p-5 border border-[#3e4446] text-[48px]" />
<th className="p-2 border border-[#3e4446] text-[48px]">Name</th>
<th className="p-2 border border-[#3e4446] text-[48px]">Status</th>
<th className="p-2 border border-[#3e4446] text-[48px]">Updated At</th>
<th className="tabletitles p-5 border border-[#3e4446] text-[48px]" />
<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>
@ -94,23 +123,27 @@ export default function Table({ employees }: { employees: Employee[] }) {
/>
</td>
<td className="p-1 border border-[#3e4446]">{employee.name}</td>
<td className="p-1 border border-[#3e4446]">{employee.status}</td>
<td className="p-1 border border-[#3e4446]">{formatTime(employee.updatedAt)}</td>
<td className="s-column p-1 border border-[#3e4446]">{employee.status}</td>
<td className="ua-column p-1 border border-[#3e4446]">{formatTime(employee.updatedAt)}</td>
</tr>
))}
</tbody>
</table>
<div className="m-auto flex flex-row items-center justify-center">
<div className="m-auto flex flex-row items-center justify-center py-5">
<input
type="text"
placeholder="New Status"
className="w-1/5 p-2 border-none rounded-md"
className="min-w-[100px] p-3 border-none rounded-xl text-[#111111] md:text-xl"
value={status}
onChange={handleStatusChange}
onKeyDown={handleKeyPress}
/>
<button
type="submit"
className="m-2 px-2 py-5 border-none rounded-md text-center bg-gradient-to-br from-[#484848] to-[#333333]"
className="m-2 p-3 border-none rounded-2xl text-center
font-semibold md:text-xl 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

8
src/components/ui/Techs.tsx Normal file
View File

@ -0,0 +1,8 @@
import { getEmployees } from "~/server/functions";
import Table from "~/components/ui/Table";
export default async function Techs() {
const employees = await getEmployees();
return <Table employees={employees} />;
};

70
src/components/ui/Techs_Table.tsx
View File

@ -1,70 +0,0 @@
//import { auth } from "~/auth";
import { getEmployees } from "~/server/functions";
import Table from "~/components/ui/Table";
//export const dynamic = "force-dynamic";
export default async function Techs_Table() {
const employees = await getEmployees();
return <Table employees={employees} />;
};
//const formatTime = (timestamp: Date) => {
//const date = new Date(timestamp);
//const time = date.toLocaleTimeString("en-US",
//{hour: "numeric", minute: "numeric",});
//const day = date.getDate();
//const month = date.toLocaleString("default", { month: "long" });
//return `${time} - ${month} ${day}`;
//}
//const session = await auth();
//const users_name = session?.user?.name;
//return (
//<div>
//<table className="w-5/6 m-auto text-center border-collapse text-[42px]">
//<thead className="bg-gradient-to-br from-[#121212] to-[#333333]">
//<tr>
//<th className="p-5 border border-[#3e4446] text-[48px]"/>
//<th className="p-2 border border-[#3e4446] text-[48px]">
//Name
//</th>
//<th className="p-2 border border-[#3e4446] text-[48px]">
//Status
//</th>
//<th className="p-2 border border-[#3e4446] text-[48px]">
//Updated At
//</th>
//</tr>
//</thead>
//<tbody>
//{employees.map((employee) => (
//<tr className="even:bg-gradient-to-bl from-[#222222] to-[#323232]" key={employee.id}>
//<td className="p-1 border border-[#3e4446]">
//<input type="checkbox"
//className="m-0 cursor-pointer transform scale-150"
////checked={}
///>
//</td>
//<td className="p-1 border border-[#3e4446]">{employee.name}</td>
//<td className="p-1 border border-[#3e4446]">{employee.status}</td>
//<td className="p-1 border border-[#3e4446]">{formatTime(employee.updatedAt)}</td>
//</tr>
//))}
//</tbody>
//</table>
//<div className="m-auto flex flex-row items-center justify-center">
//<input type="text" placeholder="New Status"
//className="w-1/5 p-2 border-none rounded-xl"
////value={}
///>
//<button type="submit"
//className="m-2 p-3 border-none rounded-2xl text-center bg-gradient-to-br from-[#484848] to-[#333333]"
//>
//Update
//</button>
//</div>
//</div>
//);
//};