better readability

LoV432 · Nov 6, 2023 · 126dd51 · 126dd51
1 parent cea8bfd
commit 126dd51
Show file tree

Hide file tree

Showing 6 changed files with 268 additions and 253 deletions.
diff --git a/app/api/get-connection-logs/route.ts b/app/api/get-connection-logs/route.ts
@@ -1,4 +1,4 @@
-import { allConnectionStatusType } from '@/app/components/dashboard/Dashboard.server';
+import { connectionLogsList } from '@/app/components/dashboard/Dashboard.server';
 import { db } from '@/lib/db';
 
 export async function GET(request: Request) {
@@ -7,10 +7,10 @@ export async function GET(request: Request) {
 
 	if (!daysParam || daysParam === '' || isNaN(parseInt(daysParam))) {
 		const yesterday = Date.now() - 86400000;
-		const allConnectionStatus = db
+		const requestedConnectionLogs = db
 			.prepare('SELECT * FROM connectionlogs WHERE time > ? ORDER BY id DESC')
-			.all(yesterday) as allConnectionStatusType;
-		return new Response(JSON.stringify(allConnectionStatus), {
+			.all(yesterday) as connectionLogsList;
+		return new Response(JSON.stringify(requestedConnectionLogs), {
 			status: 200,
 			headers: {
 				'Content-Type': 'application/json'
@@ -21,11 +21,11 @@ export async function GET(request: Request) {
 	const days = parseInt(daysParam);
 	const daysInEpoch = days * 86400000;
 	const daysToSearch = Date.now() - daysInEpoch;
-	const allConnectionStatus = db
+	const requestedConnectionLogs = db
 		.prepare(`SELECT * FROM connectionlogs WHERE time > ? ORDER BY id DESC`)
-		.all(daysToSearch) as allConnectionStatusType;
+		.all(daysToSearch) as connectionLogsList;
 
-	return new Response(JSON.stringify(allConnectionStatus), {
+	return new Response(JSON.stringify(requestedConnectionLogs), {
 		status: 200,
 		headers: {
 			'Content-Type': 'application/json'

diff --git a/app/components/dashboard/ConnectionLogsListModal.client.tsx b/app/components/dashboard/ConnectionLogsListModal.client.tsx
@@ -0,0 +1,99 @@
+import { connectionLogsListToHumanFormat } from '@/lib/logs-list-to-human-format';
+import { useState, useEffect } from 'react';
+import { connectionLogsList } from './Dashboard.server';
+
+export default function ConnectionLogsListModal({
+	toggleConnectionLogsListModal,
+	connectionLogsListModalRef
+}: {
+	toggleConnectionLogsListModal: () => void;
+	connectionLogsListModalRef: React.RefObject<HTMLDialogElement>;
+}) {
+	const [days, setDays] = useState(1);
+	return (
+		<dialog ref={connectionLogsListModalRef} className="modal">
+			<div className="modal-box bg-zinc-900">
+				<h3 className="pb-5 text-lg font-bold">Connection Logs</h3>
+				<p className="pb-5">Number of days to show: {days}</p>
+				<input
+					type="range"
+					min="0"
+					max="7"
+					className="range range-secondary"
+					value={days}
+					onChange={(e) => setDays(parseInt(e.target.value))}
+				/>
+				<ConnectionLogsList days={days} />
+				<button
+					onClick={toggleConnectionLogsListModal}
+					className="btn btn-circle btn-ghost btn-sm absolute right-2 top-2"
+				>
+					✕
+				</button>
+			</div>
+			<div className="modal-backdrop bg-zinc-700 opacity-30">
+				<button onClick={toggleConnectionLogsListModal}>close</button>
+			</div>
+		</dialog>
+	);
+}
+
+function ConnectionLogsList({ days }: { days: number }) {
+	const [connectionLogsListBody, setConnectionLogsListBody] = useState<
+		JSX.Element[]
+	>([]);
+	const [humanReadableDisconnectedTime, setHumanReadableDisconnectedTime] =
+		useState('');
+	let listBody: JSX.Element[] = [];
+
+	async function updateLogsList(days: number) {
+		const connectionLogsList = (await (
+			await fetch(`/api/get-connection-logs?days=${days}`)
+		).json()) as connectionLogsList;
+		connectionLogsList.forEach((status) => {
+			listBody.push(
+				<tr className="border-slate-300 border-opacity-30" key={status.id}>
+					<th>{status.id}</th>
+					<td className="font-semibold">
+						{status.status === 'connected' ? 'Connected' : 'Disconnected'}
+					</td>
+					<td className="font-semibold">
+						{new Date(status.time).toLocaleString('en-US', {
+							day: '2-digit',
+							month: 'short',
+							hour: 'numeric',
+							minute: '2-digit',
+							second: '2-digit'
+						})}
+					</td>
+				</tr>
+			);
+		});
+		setConnectionLogsListBody(listBody);
+		setHumanReadableDisconnectedTime(
+			connectionLogsListToHumanFormat(connectionLogsList, days)
+		);
+	}
+	useEffect(() => {
+		updateLogsList(days);
+	}, [days]);
+	return (
+		<div className="overflow-x-auto">
+			{humanReadableDisconnectedTime !== 'No Disconnects' ? (
+				<div className="badge badge-error h-fit gap-2">
+					{humanReadableDisconnectedTime}
+				</div>
+			) : null}
+			<table className="table">
+				<thead className="text-slate-300 ">
+					<tr className="border-slate-300 border-opacity-30">
+						<th>ID</th>
+						<th>Status</th>
+						<th>Time</th>
+					</tr>
+				</thead>
+				<tbody>{connectionLogsListBody}</tbody>
+			</table>
+		</div>
+	);
+}
diff --git a/app/components/dashboard/Dashboard.server.tsx b/app/components/dashboard/Dashboard.server.tsx
@@ -5,31 +5,30 @@ import DashboardCardTotalDisconnectTime from './DashboardCardTotalDisconnectTime
 import SpeedMeter from './SpeedMeter.client';
 import { getUptime } from '@/lib/get-uptime';
 
-export type allConnectionStatusType = {
+export type connectionLogsList = {
 	id: number;
 	status: string;
 	time: number;
 }[];
 export default function Dashboard() {
 	let now = Date.now();
 	let yesterday = now - 86400000;
-	let isWithinTimeFrame = true;
-	let allConnectionStatus = db
+	let allConnectionLogsFromServer = db
 		.prepare('SELECT * FROM connectionlogs WHERE time > ? ORDER BY id DESC')
-		.all(yesterday) as allConnectionStatusType;
-	if (allConnectionStatus.length === 0) {
-		allConnectionStatus = db
+		.all(yesterday) as connectionLogsList;
+	if (allConnectionLogsFromServer.length === 0) {
+		allConnectionLogsFromServer = db
 			.prepare('SELECT * FROM connectionlogs ORDER BY id DESC LIMIT 1')
-			.all() as allConnectionStatusType;
-		isWithinTimeFrame = false;
+			.all() as connectionLogsList;
 	}
 	return (
 		<>
 			<DashboardCardNetWork />
-			<DashboardCardCurrentStatus allConnectionStatus={allConnectionStatus} />
+			<DashboardCardCurrentStatus
+				allConnectionStatus={allConnectionLogsFromServer}
+			/>
 			<DashboardCardTotalDisconnectTime
-				allConnectionStatus={allConnectionStatus}
-				isWithinTimeFrame={isWithinTimeFrame}
+				allConnectionLogs={allConnectionLogsFromServer}
 			/>
 		</>
 	);

diff --git a/app/components/dashboard/DashboardCardCurrentStatus.client.tsx b/app/components/dashboard/DashboardCardCurrentStatus.client.tsx
@@ -1,11 +1,11 @@
 'use client';
 import DashboardCardBase from './DashboardBase.server';
-import { allConnectionStatusType } from './Dashboard.server';
+import { connectionLogsList } from './Dashboard.server';
 import { useEffect, useMemo, useState } from 'react';
 export function DashboardCardCurrentStatus({
 	allConnectionStatus
 }: {
-	allConnectionStatus: allConnectionStatusType;
+	allConnectionStatus: connectionLogsList;
 }) {
 	const [isConnected, setIsConnected] = useState(false);
 	let lastStatus = allConnectionStatus[0];
@@ -29,7 +29,7 @@ export function DashboardCardCurrentStatus({
 	);
 }
 
-function returnStatusBool(status: allConnectionStatusType[0]) {
+function returnStatusBool(status: connectionLogsList[0]) {
 	if (!status) {
 		return false;
 	} else {