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 { 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 Devices from "./pages/DeviceList";
import Extend from "./pages/ExtendWirelessNetwork";
@ -31,8 +35,17 @@ function Index() {
"10.0.0.6",
"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(
"Example 2.4GHz Network",
);
@ -46,6 +59,8 @@ function Index() {
const [selectedModeButton, setSelectedModeButton] = useState(0);
const [routerName, setRouterName] = useState("");
const navigate = useNavigate();
useEffect(() => {
@ -57,6 +72,12 @@ function Index() {
setDevicesOnline(deviceNames.length);
}, [loginState, navigate, setLoggedUser, deviceNames]);
useEffect(() => {
if (!wifiNames[connected]) return setRouterName("Not Connnected");
setRouterName(wifiNames[connected]);
}, [connected]);
return (
<>
<Navbar LoggedUser={loggedUser} />
@ -65,10 +86,13 @@ function Index() {
path="/"
element={
<Dashboard
RouterName={routerName}
TwoGExtendedName={twoGExtendedName}
FiveGExtendedName={fiveGExtendedName}
DevicesOnline={devicesOnline}
routerName={routerName}
twoGExtendedName={twoGExtendedName}
fiveGExtendedName={fiveGExtendedName}
devicesOnline={devicesOnline}
wifiSignals={wifiSignals}
wifiSignalImages={wifiSignalImages}
connected={connected}
/>
}
/>
@ -93,6 +117,9 @@ function Index() {
setExtendedMode={setExtenderMode}
connected={connected}
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 '../styles/Dashboard.css'
import Globe from '../assets/globe.png'
import Arrow from '../assets/arrow.png'
import Router from '../assets/router.png'
import Signal from '../assets/signal.png'
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 Extender from '../assets/extender.png'
import Device from '../assets/device.png'
import Gear from '../assets/gear.png'
import { Link } from "react-router-dom";
import "../styles/Dashboard.css";
import Globe from "../assets/globe.png";
import Arrow from "../assets/arrow.png";
import Router from "../assets/router.png";
import Signal from "../assets/signal.png";
import HighSignal from "../assets/high_signal.png";
import Extender from "../assets/extender.png";
import Device from "../assets/device.png";
import Gear from "../assets/gear.png";
interface Props {
RouterName: string;
TwoGExtendedName: string;
FiveGExtendedName: string;
DevicesOnline: number;
routerName: string;
twoGExtendedName: string;
fiveGExtendedName: string;
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 (
<>
<header id="dashboardHeader">
<ul className="dashboardList">
<li>
<img src={ Globe } className="listIcons" />
<img src={Globe} className="listIcons" />
<h2>Internet</h2>
</li>
<li>
<img src={ Arrow } className="arrow" />
<img src={Arrow} className="arrow" />
</li>
<li>
<img src={ Router } className="listIcons" />
<img src={Router} className="listIcons" />
<h2>Router</h2>
<p>{ RouterName }</p>
<p>{routerName}</p>
</li>
<li>
<img src= { MediumSignal } className="signal" />
<img
src={
connected === -1
? Signal
: wifiSignalImages[wifiSignals[connected] - 1]
}
className="signal"
/>
</li>
<li>
<img src= { Extender } className="listIcons" />
<img src={Extender} className="listIcons" />
<h2>Extender</h2>
<p>{ TwoGExtendedName }</p>
<p>{ FiveGExtendedName }</p>
<p>{twoGExtendedName}</p>
<p>{fiveGExtendedName}</p>
</li>
<li>
<img src= { HighSignal } className="signal" />
<img src={HighSignal} className="signal" />
</li>
<li>
<img src={ Device } className="listIcons" />
<img src={Device} className="listIcons" />
<h2>Devices</h2>
</li>
</ul>
@ -58,28 +73,28 @@ function Dashboard({ RouterName, TwoGExtendedName, FiveGExtendedName, DevicesOnl
<ul className="dashboardList">
<Link to="/devices">
<li>
<img src={ Device } />
<img src={Device} />
<h2>Device List</h2>
<p>{ DevicesOnline } Devices Online</p>
<p>{devicesOnline} Devices Online</p>
</li>
</Link>
<Link to="/extend">
<li>
<img src={ Globe } />
<img src={Globe} />
<h2>Extend Network</h2>
<p>Amplify Network</p>
</li>
</Link>
<Link to="/wireless">
<li>
<img src={ Signal } />
<img src={Signal} />
<h2>Wireless Settings</h2>
<p>Set Extender Network Up</p>
</li>
</Link>
<Link to="/settings">
<li>
<img src={ Gear } />
<img src={Gear} />
<h2>System Settings</h2>
<p>Change Extender Settings</p>
</li>
@ -87,7 +102,7 @@ function Dashboard({ RouterName, TwoGExtendedName, FiveGExtendedName, DevicesOnl
</ul>
</nav>
</>
)
);
}
export default Dashboard
export default Dashboard;

20
src/pages/ExtendWirelessNetwork.tsx
View file

@ -1,8 +1,4 @@
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";
interface Props {
@ -12,6 +8,9 @@ interface Props {
setExtendedMode: Dispatch<SetStateAction<boolean>>;
connected: number;
setConnected: Dispatch<SetStateAction<number>>;
wifiNames: string[];
wifiSignals: number[];
wifiSignalImages: string[];
}
function ExtendWirelessNetwork({
@ -21,18 +20,11 @@ function ExtendWirelessNetwork({
setExtendedMode,
connected,
setConnected,
wifiNames,
wifiSignals,
wifiSignalImages,
}: Props) {
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 (
<div id="extendNetwork">

61
src/pages/Login.tsx
View file

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

114
src/styles/Dashboard.css
View file

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