feat: connected devices indicator

app/components/boundaries/ConnectedDevices/ConnectedDevicesBoundarie.client.tsx

@@ -0,0 +1,27 @@
+'use client';
+import { useSetAtom, atom } from 'jotai';
+import { useEffect, useMemo } from 'react';
+import { getConnectedDevices } from '@/lib/get-connected-devices';
+export const allConnectedDevices = atom<Array<string>>([]);
+
+export default function ConnectedDevicesWrapper({
+	children,
+	connectedDevices: connectedDevices
+}: {
+	children: React.ReactNode;
+	connectedDevices: string[];
+}) {
+	const setConnectedDevices = useSetAtom(allConnectedDevices);
+	useMemo(() => {
+		setConnectedDevices(connectedDevices);
+	}, []);
+	useEffect(() => {
+		setInterval(() => {
+			getConnectedDevices().then((connectedDevices) => {
+				if ('error' in connectedDevices) return;
+				setConnectedDevices(connectedDevices);
+			});
+		}, 5000);
+	});
+	return <>{children}</>;
+}

app/components/boundaries/ConnectedDevices/ConnectedDevicesBoundarie.server.tsx

@@ -0,0 +1,21 @@
+import { getConnectedDevices } from '@/lib/get-connected-devices';
+import ConnectedDevicesWrapper from './ConnectedDevicesBoundarie.client';
+
+export default async function ConnectedDevicesBoundarie({
+	children
+}: {
+	children: React.ReactNode;
+}) {
+	const connectedDevices = await getConnectedDevices();
+	if ('error' in connectedDevices)
+		return (
+			<ConnectedDevicesWrapper connectedDevices={[]}>
+				{children}
+			</ConnectedDevicesWrapper>
+		);
+	return (
+		<ConnectedDevicesWrapper connectedDevices={connectedDevices}>
+			{children}
+		</ConnectedDevicesWrapper>
+	);
+}

app/components/user-cards/UserCard.client.tsx

@@ -13,12 +13,15 @@ import {
 	unblockDevice as unblockUser
 } from '@/lib/block-user-script.server';
 import { allBlockedDevices as allBlockedDevicesState } from '../boundaries/BlockedDevices/BlockedDevicesBoundarie.client';
+import { allConnectedDevices as allConnectedDevicesState } from '../boundaries/ConnectedDevices/ConnectedDevicesBoundarie.client';
 export default function UserCard({ user }: { user: userReturnType }) {
 	const [localUpdateTime, setLocalUpdateTime] = useState('');
 	const [showDetails, setShowDetails] = useState(false);
 	const [showToast, setShowToast] = useState(false);
 	const allBlockedDevices = useAtomValue(allBlockedDevicesState);
 	const isBlocked = allBlockedDevices.includes(user.mac_address);
+	const allConnectedDevices = useAtomValue(allConnectedDevicesState);
+	const isConnected = allConnectedDevices.includes(user.mac_address);
 
 	function copyText(text: string) {
 		// TODO: This whole copy/toast logic is duplicate of DashboardCardCurrentStatus.client.tsx. Find a way to merge?
@@ -45,6 +48,11 @@ export default function UserCard({ user }: { user: userReturnType }) {
 			<div
 				className={`card card-side m-5 h-fit w-full bg-zinc-900 p-2 shadow-xl last:mb-[7rem] sm:w-[300px] ${isBlocked ? 'text-error' : ''}`}
 			>
+				<div className="absolute right-0 top-0">
+					{isConnected && (
+						<span className="badge indicator-item badge-success badge-sm absolute -right-1 -top-1"></span>
+					)}
+				</div>
 				<UserSpeed ip={user.ip} />
 				<figure className="relative flex w-1/4 items-center justify-center overflow-visible px-1 py-4">
 					<DropDown

app/page.tsx

@@ -2,6 +2,7 @@ import Dashboard from './components/dashboard/Dashboard.server';
 import UserCards from './components/user-cards/UserCards.server';
 import SpeedBoundarie from './components/boundaries/SpeedBoundarie.client';
 import BlockedDevicesBoundarie from './components/boundaries/BlockedDevices/BlockedDevicesBoundarie.server';
+import ConnectedDevicesBoundarie from './components/boundaries/ConnectedDevices/ConnectedDevicesBoundarie.server';
 import { Provider } from 'jotai';
 export const dynamic = 'force-dynamic';
 export default function Home() {
@@ -14,9 +15,11 @@ export default function Home() {
 							<Dashboard />
 						</div>
 						<div className="flex flex-row flex-wrap justify-evenly">
-							<BlockedDevicesBoundarie>
-								<UserCards />
-							</BlockedDevicesBoundarie>
+							<ConnectedDevicesBoundarie>
+								<BlockedDevicesBoundarie>
+									<UserCards />
+								</BlockedDevicesBoundarie>
+							</ConnectedDevicesBoundarie>
 						</div>
 					</SpeedBoundarie>
 				</Provider>

lib/get-connected-devices.tsx

@@ -0,0 +1,60 @@
+'use server';
+import { getToken } from './get-token';
+
+type connectedDeviceResponseType = {
+	id: number;
+	result?: [0, { stdout: string }?];
+};
+
+export async function getConnectedDevices() {
+	let token = (await getToken()) as string;
+	let getConnectedDevicesResponse = await getConnectedDevicesRequest(token);
+	if (
+		!getConnectedDevicesResponse.result ||
+		!getConnectedDevicesResponse.result[1]
+	) {
+		let newToken = await getToken(true);
+		if (!newToken) {
+			console.log('getConnectedDevices: Token not found');
+			return { error: 'Token not found' };
+		}
+		getConnectedDevicesResponse = await getConnectedDevicesRequest(newToken);
+		if (
+			!getConnectedDevicesResponse.result ||
+			!getConnectedDevicesResponse.result[1]
+		) {
+			console.log('getConnectedDevices: Something went wrong');
+			return { error: 'Something went wrong' };
+		}
+	}
+	const connectedDevicesSplit =
+		getConnectedDevicesResponse.result[1].stdout.split('\n');
+	let connectedDevices = connectedDevicesSplit
+		.map((device) => {
+			if (!device) return;
+			const deviceSplit = device.split(' ');
+			return deviceSplit[4];
+		})
+		.filter((device) => device !== undefined) as string[];
+	return connectedDevices;
+}
+
+async function getConnectedDevicesRequest(token: string) {
+	let requestBody = {
+		jsonrpc: '2.0',
+		id: 1,
+		method: 'call',
+		params: [token, 'file', 'exec', { command: '/etc/neigh-probe' }]
+	};
+
+	let makeRequest = await fetch(`${process.env.ROUTER_URL}/ubus`, {
+		method: 'POST',
+		body: JSON.stringify(requestBody),
+		headers: {
+			'Content-Type': 'application/json'
+		},
+		cache: 'no-cache'
+	});
+
+	return (await makeRequest.json()) as connectedDeviceResponseType;
+}

router_setup.sh

@@ -89,7 +89,8 @@ json_content='{
         "/etc/wrtbwmon-update": ["exec"],
         "/proc/uptime": ["read"],
         "/etc/pppoe-status": ["exec"],
-        "/etc/block-device": ["exec"]
+        "/etc/block-device": ["exec"],
+        "/etc/neigh-probe": ["exec"]
       }
     }
   }
@@ -150,6 +151,19 @@ echo "Script created /etc/wrtbwmon-update"
 #############################
 
 
+# Create connected device script
+#############################
+content=$(cat <<'END_SCRIPT'
+#!/bin/sh
+
+ip -4 neigh show nud reachable nud stale nud permanent nud delay
+END_SCRIPT
+)
+echo "$content" > /etc/neigh-probe
+chmod 755 /etc/neigh-probe
+echo "Script created /etc/neigh-probe"
+#############################
+
 
 # Create user block script
 #############################