keyemail/extender-wifi-ui
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Dashboard functions are reactive now, fixed up minor bugs

Browse source
This commit is contained in:
Patrick Hatsune 2024-08-13 18:50:41 -07:00
parent d4dfac656e
commit 539a483bde
Signed by: keyemail
GPG key ID: 6FD1A0FDB0D914C2
5 changed files with 181 additions and 142 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/Index.tsx
View file

@ -1,5 +1,9 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { Routes, Route, useNavigate } from "react-router-dom"; import { Routes, Route, useNavigate } from "react-router-dom";
import VeryLowSignal from "./assets/very_low_signal.png";
import LowSignal from "./assets/low_signal.png";
import MediumSignal from "./assets/medium_signal.png";
import HighSignal from "./assets/high_signal.png";
import Dashboard from "./pages/Dashboard"; import Dashboard from "./pages/Dashboard";
import Devices from "./pages/DeviceList"; import Devices from "./pages/DeviceList";
import Extend from "./pages/ExtendWirelessNetwork"; import Extend from "./pages/ExtendWirelessNetwork";
@ -31,8 +35,17 @@ function Index() {
"10.0.0.6", "10.0.0.6",
"10.0.0.7", "10.0.0.7",
]); ]);
const wifiNames = [
"Home Wifi",
"Neighbors Wifi",
"Grandmas Wifi",
"McDonalds Wifi",
"Starbucks Wifi",
"Hotel Wifi",
];
const wifiSignals = [4, 3, 1, 2, 1, 2];
const wifiSignalImages = [VeryLowSignal, LowSignal, MediumSignal, HighSignal];
const [routerName, setRouterName] = useState("Example Router");
const [twoGExtendedName, setTwoGExtendedName] = useState( const [twoGExtendedName, setTwoGExtendedName] = useState(
"Example 2.4GHz Network", "Example 2.4GHz Network",
); );
@ -46,6 +59,8 @@ function Index() {
const [selectedModeButton, setSelectedModeButton] = useState(0); const [selectedModeButton, setSelectedModeButton] = useState(0);
const [routerName, setRouterName] = useState("");
const navigate = useNavigate(); const navigate = useNavigate();
useEffect(() => { useEffect(() => {
@ -57,6 +72,12 @@ function Index() {
setDevicesOnline(deviceNames.length); setDevicesOnline(deviceNames.length);
}, [loginState, navigate, setLoggedUser, deviceNames]); }, [loginState, navigate, setLoggedUser, deviceNames]);
useEffect(() => {
if (!wifiNames[connected]) return setRouterName("Not Connnected");
setRouterName(wifiNames[connected]);
}, [connected]);
return ( return (
<> <>
<Navbar LoggedUser={loggedUser} /> <Navbar LoggedUser={loggedUser} />
@ -65,10 +86,13 @@ function Index() {
path="/" path="/"
element={ element={
<Dashboard <Dashboard
RouterName={routerName} routerName={routerName}
TwoGExtendedName={twoGExtendedName} twoGExtendedName={twoGExtendedName}
FiveGExtendedName={fiveGExtendedName} fiveGExtendedName={fiveGExtendedName}
DevicesOnline={devicesOnline} devicesOnline={devicesOnline}
wifiSignals={wifiSignals}
wifiSignalImages={wifiSignalImages}
connected={connected}
/> />
} }
/> />
@ -93,6 +117,9 @@ function Index() {
setExtendedMode={setExtenderMode} setExtendedMode={setExtenderMode}
connected={connected} connected={connected}
setConnected={setConnected} setConnected={setConnected}
wifiNames={wifiNames}
wifiSignals={wifiSignals}
wifiSignalImages={wifiSignalImages}
/> />
} }
/> />

85
src/pages/Dashboard.tsx
View file

@ -1,55 +1,70 @@
import { Link } from 'react-router-dom' import { Link } from "react-router-dom";
import '../styles/Dashboard.css' import "../styles/Dashboard.css";
import Globe from '../assets/globe.png' import Globe from "../assets/globe.png";
import Arrow from '../assets/arrow.png' import Arrow from "../assets/arrow.png";
import Router from '../assets/router.png' import Router from "../assets/router.png";
import Signal from '../assets/signal.png' import Signal from "../assets/signal.png";
import VeryLowSignal from '../assets/very_low_signal.png' import HighSignal from "../assets/high_signal.png";
import LowSignal from '../assets/low_signal.png' import Extender from "../assets/extender.png";
import MediumSignal from '../assets/medium_signal.png' import Device from "../assets/device.png";
import HighSignal from '../assets/high_signal.png' import Gear from "../assets/gear.png";
import Extender from '../assets/extender.png'
import Device from '../assets/device.png'
import Gear from '../assets/gear.png'
interface Props { interface Props {
RouterName: string; routerName: string;
TwoGExtendedName: string; twoGExtendedName: string;
FiveGExtendedName: string; fiveGExtendedName: string;
DevicesOnline: number; devicesOnline: number;
connected: number;
wifiSignals: number[];
wifiSignalImages: string[];
} }
function Dashboard({ RouterName, TwoGExtendedName, FiveGExtendedName, DevicesOnline }: Props) { function Dashboard({
routerName,
twoGExtendedName,
fiveGExtendedName,
devicesOnline,
connected,
wifiSignals,
wifiSignalImages,
}: Props) {
return ( return (
<> <>
<header id="dashboardHeader"> <header id="dashboardHeader">
<ul className="dashboardList"> <ul className="dashboardList">
<li> <li>
<img src={ Globe } className="listIcons" /> <img src={Globe} className="listIcons" />
<h2>Internet</h2> <h2>Internet</h2>
</li> </li>
<li> <li>
<img src={ Arrow } className="arrow" /> <img src={Arrow} className="arrow" />
</li> </li>
<li> <li>
<img src={ Router } className="listIcons" /> <img src={Router} className="listIcons" />
<h2>Router</h2> <h2>Router</h2>
<p>{ RouterName }</p> <p>{routerName}</p>
</li> </li>
<li> <li>
<img src= { MediumSignal } className="signal" /> <img
src={
connected === -1
? Signal
: wifiSignalImages[wifiSignals[connected] - 1]
}
className="signal"
/>
</li> </li>
<li> <li>
<img src= { Extender } className="listIcons" /> <img src={Extender} className="listIcons" />
<h2>Extender</h2> <h2>Extender</h2>
<p>{ TwoGExtendedName }</p> <p>{twoGExtendedName}</p>
<p>{ FiveGExtendedName }</p> <p>{fiveGExtendedName}</p>
</li> </li>
<li> <li>
<img src= { HighSignal } className="signal" /> <img src={HighSignal} className="signal" />
</li> </li>
<li> <li>
<img src={ Device } className="listIcons" /> <img src={Device} className="listIcons" />
<h2>Devices</h2> <h2>Devices</h2>
</li> </li>
</ul> </ul>
@ -58,28 +73,28 @@ function Dashboard({ RouterName, TwoGExtendedName, FiveGExtendedName, DevicesOnl
<ul className="dashboardList"> <ul className="dashboardList">
<Link to="/devices"> <Link to="/devices">
<li> <li>
<img src={ Device } /> <img src={Device} />
<h2>Device List</h2> <h2>Device List</h2>
<p>{ DevicesOnline } Devices Online</p> <p>{devicesOnline} Devices Online</p>
</li> </li>
</Link> </Link>
<Link to="/extend"> <Link to="/extend">
<li> <li>
<img src={ Globe } /> <img src={Globe} />
<h2>Extend Network</h2> <h2>Extend Network</h2>
<p>Amplify Network</p> <p>Amplify Network</p>
</li> </li>
</Link> </Link>
<Link to="/wireless"> <Link to="/wireless">
<li> <li>
<img src={ Signal } /> <img src={Signal} />
<h2>Wireless Settings</h2> <h2>Wireless Settings</h2>
<p>Set Extender Network Up</p> <p>Set Extender Network Up</p>
</li> </li>
</Link> </Link>
<Link to="/settings"> <Link to="/settings">
<li> <li>
<img src={ Gear } /> <img src={Gear} />
<h2>System Settings</h2> <h2>System Settings</h2>
<p>Change Extender Settings</p> <p>Change Extender Settings</p>
</li> </li>
@ -87,7 +102,7 @@ function Dashboard({ RouterName, TwoGExtendedName, FiveGExtendedName, DevicesOnl
</ul> </ul>
</nav> </nav>
</> </>
) );
} }
export default Dashboard export default Dashboard;

20
src/pages/ExtendWirelessNetwork.tsx
View file

@ -1,8 +1,4 @@
import { Dispatch, SetStateAction } from "react"; import { Dispatch, SetStateAction } from "react";
import VeryLowSignal from "../assets/very_low_signal.png";
import LowSignal from "../assets/low_signal.png";
import MediumSignal from "../assets/medium_signal.png";
import HighSignal from "../assets/high_signal.png";
import "../styles/ExtendWirelessNetwork.css"; import "../styles/ExtendWirelessNetwork.css";
interface Props { interface Props {
@ -12,6 +8,9 @@ interface Props {
setExtendedMode: Dispatch<SetStateAction<boolean>>; setExtendedMode: Dispatch<SetStateAction<boolean>>;
connected: number; connected: number;
setConnected: Dispatch<SetStateAction<number>>; setConnected: Dispatch<SetStateAction<number>>;
wifiNames: string[];
wifiSignals: number[];
wifiSignalImages: string[];
} }
function ExtendWirelessNetwork({ function ExtendWirelessNetwork({
@ -21,18 +20,11 @@ function ExtendWirelessNetwork({
setExtendedMode, setExtendedMode,
connected, connected,
setConnected, setConnected,
wifiNames,
wifiSignals,
wifiSignalImages,
}: Props) { }: Props) {
const buttons = ["AP Mode", "Extend Mode"]; const buttons = ["AP Mode", "Extend Mode"];
const wifiNames = [
"Wifi 1",
"Wifi 2",
"Wifi 3",
"Wifi 4",
"Wifi 5",
"Wifi 6",
];
const wifiSignals = [4, 3, 1, 2, 1, 2];
const wifiSignalImages = [VeryLowSignal, LowSignal, MediumSignal, HighSignal];
return ( return (
<div id="extendNetwork"> <div id="extendNetwork">

61
src/pages/Login.tsx
View file

@ -1,9 +1,9 @@
import { Dispatch, SetStateAction, useState } from 'react'; import { Dispatch, SetStateAction, useState } from "react";
import { useNavigate, Link } from 'react-router-dom'; import { useNavigate, Link } from "react-router-dom";
import '../styles/Login.css' import "../styles/Login.css";
const usernames = ['root']; const usernames = ["root"];
const passwords = ['123']; const passwords = ["123"];
interface Props { interface Props {
setLogin: Dispatch<SetStateAction<boolean>>; setLogin: Dispatch<SetStateAction<boolean>>;
@ -16,21 +16,26 @@ function Login({ setLogin, setUser }: Props) {
const [usernameError, setUsernameError] = useState(false); const [usernameError, setUsernameError] = useState(false);
const [passwordError, setPasswordError] = useState(false); const [passwordError, setPasswordError] = useState(false);
setUser('Not Logged In'); setUser("Not Logged In");
setLogin(false);
const handleLogin = (e: React.FormEvent) => { const handleLogin = (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
const userElement = document.getElementById('username') as HTMLInputElement | null; const userElement = document.getElementById(
const passwordElement = document.getElementById('password') as HTMLInputElement | null; "username",
) as HTMLInputElement | null;
const passwordElement = document.getElementById(
"password",
) as HTMLInputElement | null;
if(!userElement || !passwordElement) return; if (!userElement || !passwordElement) return;
const user = userElement?.value; const user = userElement?.value;
const password = passwordElement?.value; const password = passwordElement?.value;
for (let i = 0; i < usernames.length; i++) { for (let i = 0; i < usernames.length; i++) {
if(user === usernames[i] && password === passwords[i]) { if (user === usernames[i] && password === passwords[i]) {
setLogin(true); setLogin(true);
setUser(user); setUser(user);
return navigate("/"); return navigate("/");
@ -42,29 +47,29 @@ function Login({ setLogin, setUser }: Props) {
}; };
return ( return (
<div className="center"> <div className="center">
<div id="login"> <div id="login">
<h1>Welcome back!</h1> <h1>Welcome back!</h1>
<p>Enter your username and password.</p> <p>Enter your username and password.</p>
<form> <form>
<h2>Username</h2> <h2>Username</h2>
<input type="text" id="username" /> <input type="text" id="username" />
{ passwordError && {passwordError && <p id="noinput">Wrong username.</p>}
<p id="noinput">Wrong username.</p> }
<h2>Password</h2> <h2>Password</h2>
<input type="password" id="password" /> <input type="password" id="password" />
{ usernameError && {usernameError && <p id="noinput">Wrong password.</p>}
<p id="noinput">Wrong password.</p> }
<p>Forgot password? <Link to="/reset">Reset it</Link></p> <p>
<button onClick={handleLogin}>Login</button> Forgot password? <Link to="/reset">Reset it</Link>
</form> </p>
<button onClick={handleLogin}>Login</button>
</form>
</div>
</div> </div>
</div> );
)
} }
export default Login; export default Login;

120
src/styles/Dashboard.css
View file

@ -1,71 +1,71 @@
#dashboardHeader { #dashboardHeader {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
max-width: 100%; max-width: 100%;
height: fit-content; height: fit-content;
background-color: var(--bg-color-alt); background-color: var(--bg-color-alt);
margin-top: 20px; margin-top: 20px;
border-radius: 20px; border-radius: 20px;
padding: 90px 20px; padding: 90px 20px;
} }
.dashboardList { .dashboardList {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 20px; gap: 20px;
li { li {
display: inherit; display: inherit;
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
list-style: none; list-style: none;
img { img {
user-select: none; user-select: none;
pointer-events: none; pointer-events: none;
}
.listIcons {
max-height: 160px;
width: auto;
}
.arrow {
max-height: 60px;
}
.signal {
max-height: 90px;
}
} }
.listIcons {
max-height: 160px;
}
.arrow {
max-height: 60px;
}
.signal {
max-height: 90px;
}
}
} }
#lowerNav { #lowerNav {
margin-top: 20px; margin-top: 20px;
display: flex;
justify-content: center;
ul {
justify-content: space-around;
max-width: fit-content;
}
li{
display: flex; display: flex;
padding: 40px;
background-color: var(--bg-color-alt);
justify-content: center; justify-content: center;
align-items: center;
border-radius: 20px; ul {
width: 300px; justify-content: space-around;
height: 350px; max-width: fit-content;
transition: 0.3s background-color; }
cursor: pointer; li {
} display: flex;
img { padding: 40px;
margin: 10px; background-color: var(--bg-color-alt);
max-height: 160px; justify-content: center;
aspect-ratio: 1/1; align-items: center;
width: fit-content; border-radius: 20px;
} width: 300px;
li:hover { height: 350px;
background-color: #0069ff; transition: 0.3s background-color;
} cursor: pointer;
} }
img {
margin: 10px;
max-height: 160px;
width: fit-content;
}
li:hover {
background-color: #0069ff;
}
}