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

Clean up all code

Browse Source
This commit is contained in:
Gabriel Brown 2024-07-21 21:12:34 -05:00
parent 017c07a1cf
commit 88f36531b1
10 changed files with 256 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/api/history/route.ts
View File

@ -1,23 +1,25 @@
"use server";
import { NextResponse } from 'next/server';
import { legacyGetHistory } from '~/server/functions';
import { getHistory } from '~/server/functions';
export const GET = async (request: Request) => {
try {
const url = new URL(request.url);
const apiKey = url.searchParams.get('apikey');
const page = Number(url.searchParams.get('page')) || 1;
if (apiKey !== 'zAf4vYVN2pszrK') {
return NextResponse.json({ message: 'Unauthorized' }, { status: 401 });
}
const perPage = 50; // You can adjust the perPage value as needed
const historyData = await legacyGetHistory(page, perPage);
if (apiKey !== process.env.API_KEY)
return NextResponse.json(
{ message: 'Unauthorized' },
{ status: 401 }
);
const perPage = 50;
const historyData = await getHistory(page, perPage);
return NextResponse.json(historyData, { status: 200 });
} catch (error) {
console.error('Error fetching history data:', error);
return NextResponse.json({ message: 'Internal server error' }, { status: 500 });
return NextResponse.json(
{ message: 'Internal server error' },
{ status: 500 }
);
}
};

23
src/app/api/technicians/route.ts
View File

@ -1,6 +1,6 @@
"use server";
import { NextResponse } from 'next/server';
import { legacyGetEmployees } from '~/server/functions';
import { getEmployees } from '~/server/functions';
type Technician = {
name: string;
@ -12,22 +12,25 @@ export const GET = async (request: Request) => {
try {
const url = new URL(request.url);
const apiKey = url.searchParams.get('apikey');
if (apiKey !== 'zAf4vYVN2pszrK') {
return NextResponse.json({ message: 'Unauthorized' }, { status: 401 });
}
const employees = await legacyGetEmployees();
if (apiKey !== process.env.API_KEY)
return NextResponse.json(
{ message: 'Unauthorized' },
{ status: 401 }
);
const employees = await getEmployees();
// Necessary because I haven't updated the iOS app
// yet to expect updatedAt rather than time
const formattedEmployees = employees.map((employee: Technician) => ({
name: employee.name,
status: employee.status,
time: employee.updatedAt
}));
return NextResponse.json(formattedEmployees, { status: 200 });
} catch (error) {
console.error('Error fetching employees:', error);
return NextResponse.json({ message: 'Internal server error' }, { status: 500 });
return NextResponse.json(
{ message: 'Internal server error' },
{ status: 500 }
);
}
};

48
src/app/api/update_technicians/route.ts
View File

@ -1,8 +1,7 @@
"use server";
import { NextResponse } from 'next/server';
import { legacyUpdateEmployeeStatusByName } from '~/server/functions';
import { updateEmployeeStatusByName } from '~/server/functions';
// Define the Technician type directly in the file
interface Technician {
name: string;
status: string;
@ -11,37 +10,42 @@ interface Technician {
// Type guard to check if an object is a Technician
const isTechnician = (technician: unknown): technician is Technician => {
if (typeof technician !== 'object' || technician === null) return false;
return 'name' in technician && typeof (technician as Technician).name === 'string' &&
'status' in technician && typeof (technician as Technician).status === 'string';
return 'name' in technician &&
typeof (technician as Technician).name === 'string' &&
'status' in technician &&
typeof (technician as Technician).status === 'string';
};
export const POST = async (request: Request) => {
try {
const url = new URL(request.url);
const apiKey = url.searchParams.get('apikey');
if (apiKey !== 'zAf4vYVN2pszrK') {
if (apiKey !== process.env.API_KEY)
return NextResponse.json({ message: 'Unauthorized' }, { status: 401 });
}
const body: unknown = await request.json();
// Validate the body and its technicians property
if (typeof body !== 'object' || body === null || !Array.isArray((body as { technicians?: unknown[] }).technicians)) {
return NextResponse.json({ message: 'Invalid input: expecting an array of technicians.' }, { status: 400 });
}
if (typeof body !== 'object' || body === null ||
!Array.isArray((body as { technicians?: unknown[] }).technicians))
return NextResponse.json(
{ message: 'Invalid input: expecting an array of technicians.' },
{ status: 400 }
);
const technicians = (body as { technicians: unknown[] }).technicians;
if (!technicians.every(isTechnician)) {
return NextResponse.json({ message: 'Invalid input: missing name or status for a technician.' }, { status: 400 });
}
await legacyUpdateEmployeeStatusByName(technicians);
return NextResponse.json({ message: 'Technicians updated successfully.' }, { status: 200 });
if (!technicians.every(isTechnician))
return NextResponse.json(
{ message: 'Invalid input: missing name or status for a technician.' },
{ status: 400 }
);
await updateEmployeeStatusByName(technicians);
return NextResponse.json(
{ message: 'Technicians updated successfully.' },
{ status: 200 }
);
} catch (error) {
console.error('Error updating technicians:', error);
return NextResponse.json({ message: 'Internal server error' }, { status: 500 });
return NextResponse.json(
{ message: 'Internal server error' },
{ status: 500 }
);
}
};

1
src/app/api/v2/get_employees/route.ts
View File

@ -1,5 +1,4 @@
"use server";
import { NextResponse } from 'next/server';
import { getEmployees } from '~/server/functions';
import { auth } from '~/auth';

26
src/app/api/v2/update_status/route.ts
View File

@ -12,19 +12,27 @@ type UpdateStatusBody = {
export const POST = async (req: NextRequest) => {
const session = await auth();
if (!session)
return NextResponse.json({ message: 'Unauthorized' }, { status: 401 });
return NextResponse.json(
{ message: 'Unauthorized' },
{ status: 401 }
);
const { employeeIds, newStatus } = await req.json() as UpdateStatusBody;
if (!Array.isArray(employeeIds) || typeof newStatus !== 'string') {
return NextResponse.json({ message: 'Invalid input' }, { status: 400 });
}
if (!Array.isArray(employeeIds) || typeof newStatus !== 'string')
return NextResponse.json(
{ message: 'Invalid input' },
{ status: 400 }
);
try {
await updateEmployeeStatus(employeeIds, newStatus);
return NextResponse.json({ message: 'Status updated successfully' }, { status: 200 });
return NextResponse.json(
{ message: 'Status updated successfully' },
{ status: 200 }
);
} catch (error) {
console.error('Error updating status:', error);
return NextResponse.json({ message: 'Internal server error' }, { status: 500 });
return NextResponse.json(
{ message: 'Internal server error' },
{ status: 500 }
);
}
};

3
src/app/layout.tsx
View File

@ -7,7 +7,8 @@ import Sign_Out from "~/components/auth/Sign_Out";
import { type Metadata } from "next";
export const metadata: Metadata = {
title: "Tech Tracker",
description: "App used by COG IT employees to update their status throughout the day.",
description: "App used by COG IT employees to \
update their status throughout the day.",
icons: [
{
rel: 'icon',

4
src/app/page.tsx
View File

@ -9,8 +9,8 @@ export default async function HomePage() {
return <No_Session />
} else {
return (
<main className="min-h-screen bg-gradient-to-b
from-[#111111] to-[#212325]">
<main className="min-h-screen
bg-gradient-to-b from-[#111111] to-[#212325]">
<TT_Header />
<Techs />
</main>

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

@ -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>

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

@ -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,60 +29,7 @@ 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);
});
}, 10000); // Poll every 10 seconds
return () => clearInterval(intervalId); // Clear interval on component unmount
}, [fetchEmployees]);
const handleCheckboxChange = (id: number) => {
setSelectedIds((prevSelected) =>
prevSelected.includes(id)
? prevSelected.filter((prevId) => prevId !== id)
: [...prevSelected, id]
);
};
const handleSelectAllChange = () => {
setSelectAll(!selectAll);
if (!selectAll) {
const allIds = employees.map((employee) => employee.id);
setSelectedIds(allIds);
} else {
setSelectedIds([]);
}
};
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 () => {
const update_status = async () => {
if (!session) {
alert("You must be signed in to update status.");
return;
@ -122,19 +57,42 @@ const handleSubmit = async () => {
body: JSON.stringify({ employeeIds: selectedIds, newStatus: employeeStatus }),
});
}
// Optionally refresh data on the client-side after update
const updatedEmployees = await fetchEmployees();
const updatedEmployees = await fetch_employees();
setEmployeeData(updatedEmployees);
setSelectedIds([]);
setStatus('');
};
};
const handleKeyPress = async (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
await handleSubmit();
const handleCheckboxChange = (id: number) => {
setSelectedIds((prevSelected) =>
prevSelected.includes(id)
? prevSelected.filter((prevId) => prevId !== id)
: [...prevSelected, id]
);
};
const handleSelectAllChange = () => {
setSelectAll(!selectAll);
if (!selectAll) {
const allIds = employees.map((employee) => employee.id);
setSelectedIds(allIds);
} else {
setSelectedIds([]);
}
};
const handleStatusChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setStatus(e.target.value);
};
const handleKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Enter') {
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,29 +103,77 @@ 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} />;
else {
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]">
<thead className="tabletitles border border-[#3e4446]
bg-gradient-to-b from-[#282828] to-[#383838] text-[48px]">
<tr>
<th className="tabletitles p-4 border border-[#3e4446] text-[48px]">
<th className="py-3 px-4 border border-[#3e4446]">
<input
type="checkbox"
className="m-0 cursor-pointer transform scale-150"
className="m-auto 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>
<th className="border border-[#3e4446]">Name</th>
<th className="border border-[#3e4446]">Status</th>
<th className="border border-[#3e4446]">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}>
odd:bg-gradient-to-bl odd:from-[#252525] odd:to-[#212125]"
key={employee.id}
>
<td className="p-1 border border-[#3e4446]">
<input
type="checkbox"
@ -176,33 +182,42 @@ const handleSubmit = async () => {
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>
<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"
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}
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
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}
onClick={update_status}
>
Update
</button>
</div>
</div>
);
}
}

98
src/server/functions.ts
View File

@ -2,37 +2,29 @@ import "server-only";
import { db } from "~/server/db";
import { sql } from "drizzle-orm";
// Function to Get Employees
export const getEmployees = async () => {
return await db.query.users.findMany({
orderBy: (model, { asc }) => asc(model.id),
});
};
// Uncomment this and change updatedAt below if using localhost and you want correct time.
// I dont know why it is like this.
//const convertToUTC = (date: Date) => {
//return new Date(date.setHours(date.getUTCHours())+ 5);
//};
// Function to Update Employee Status using Raw SQL
export const updateEmployeeStatus = async (employeeIds: string[], newStatus: string) => {
// Update Employee Status uses Raw SQL because Drizzle ORM doesn't support
// update with MySQL
export const updateEmployeeStatus =
async (employeeIds: string[], newStatus: string) => {
try {
// Convert array of ids to a format suitable for SQL query (comma-separated string)
const idList = employeeIds.map(id => parseInt(id, 10));
//const updatedAt = convertToUTC(new Date());
const updatedAt = new Date(); // Do not change for PROD! It acts different on PROD
// Prepare the query using drizzle-orm's template-like syntax for escaping variables
let updatedAt = new Date();
// Not sure why but localhost is off by 5 hours
if (process.env.NODE_ENV === 'development')
updatedAt = new Date(updatedAt.setHours(updatedAt.getUTCHours())+ 5);
const query = sql`
UPDATE users
SET status = ${newStatus}, updatedAt = ${updatedAt}
WHERE id IN ${idList}
`;
// Execute the query
await db.execute(query);
return { success: true };
} catch (error) {
console.error("Error updating employee status:", error);
@ -40,15 +32,32 @@ export const updateEmployeeStatus = async (employeeIds: string[], newStatus: str
}
};
// Legacy Functions for Legacy API for iOS App
// Function to Update Employee Status by Name using Raw SQL
export const updateEmployeeStatusByName =
async (technicians:{ name: string, status: string }[]) => {
try {
for (const technician of technicians) {
const { name, status } = technician;
const query = sql`
UPDATE users
SET status = ${status}, updatedAt = ${new Date()}
WHERE name = ${name}
`;
await db.execute(query);
}
return { success: true };
} catch (error) {
console.error("Error updating employee status by name:", error);
throw new Error("Failed to update status by name");
}
};
// Type definitions
// Type definitions for Paginated History API
interface HistoryEntry {
name: string;
status: string;
time: Date;
}
interface PaginatedHistory {
data: HistoryEntry[];
meta: {
@ -59,25 +68,9 @@ interface PaginatedHistory {
}
}
export const legacyGetEmployees = async () => {
const employees = await db.query.users.findMany({
orderBy: (model, { asc }) => asc(model.id),
});
if (employees.length === 0) {
return [];
}
for (const employee of employees) {
const date = new Date(employee.updatedAt);
employee.updatedAt = date;
}
return employees;
};
// Function to Get History Data with Pagination using Raw SQL
export const legacyGetHistory = async (page: number, perPage: number): Promise<PaginatedHistory> => {
export const getHistory =
async (page: number, perPage: number): Promise<PaginatedHistory> => {
const offset = (page - 1) * perPage;
// Raw SQL queries
const historyQuery = sql`
SELECT u.name, h.status, h.updatedAt
FROM history h
@ -85,31 +78,26 @@ export const legacyGetHistory = async (page: number, perPage: number): Promise<P
ORDER BY h.id DESC
LIMIT ${perPage} OFFSET ${offset}
`;
const countQuery = sql`
SELECT COUNT(*) AS total_count
FROM history
`;
const [historyResults, countResults] = await Promise.all([
db.execute(historyQuery),
db.execute(countQuery),
]);
// Safely cast results
const historyRows = historyResults[0] as unknown as { name: string, status: string, updatedAt: Date }[];
const historyRows = historyResults[0] as unknown as
{ name: string, status: string, updatedAt: Date }[];
const countRow = countResults[0] as unknown as { total_count: number }[];
const totalCount = countRow[0]?.total_count ?? 0;
const totalPages = Math.ceil(totalCount / perPage);
// Format and map results
const formattedResults: HistoryEntry[] = historyRows.map(row => ({
name: row.name,
status: row.status,
time: new Date(row.updatedAt),
}));
return {
data: formattedResults,
meta: {
@ -121,25 +109,3 @@ export const legacyGetHistory = async (page: number, perPage: number): Promise<P
};
};
// Function to Update Employee Status by Name using Raw SQL
export const legacyUpdateEmployeeStatusByName = async (technicians: { name: string, status: string }[]) => {
try {
// Prepare and execute the queries for each technician
for (const technician of technicians) {
const { name, status } = technician;
const utcdate: Date = new Date();
const query = sql`
UPDATE users
SET status = ${status}, updatedAt = ${utcdate}
WHERE name = ${name}
`;
await db.execute(query);
}
return { success: true };
} catch (error) {
console.error("Error updating employee status by name:", error);
throw new Error("Failed to update status by name");
}
};