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

Started on dashboard, new icons

Browse source
This commit is contained in:
Patrick Hatsune 2024-08-04 10:11:04 -07:00
parent 865917f8b5
commit 956ab13ff9
Signed by: keyemail
GPG key ID: 6FD1A0FDB0D914C2
21 changed files with 159 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="./logo.ico"/> <link rel="icon" type="image/x-icon" href="src/assets/logo.png"/>
<title>Wifi Extender</title> <title>Wifi Extender</title>
</head> </head>
<body> <body>

9
src/Index.tsx
View file

@ -12,7 +12,12 @@ import './styles/Main.css'
function Index() { function Index() {
let [loginState, setLoginState] = useState(false); let [loginState, setLoginState] = useState(false);
let [loggedUser, setLoggedUser] = useState('') let [loggedUser, setLoggedUser] = useState('');
let [routerName, setRoutername] = useState('Example Router');
let [twoGExtendedName, settwoGExtendedName] = useState('Example 2G Network');
let [fiveGExtendedName, setFiveGExtendedName] = useState('Example 5G Network');
let [devicesOnline, setDevicesOnline] = useState(0)
const navigate = useNavigate(); const navigate = useNavigate();
@ -30,7 +35,7 @@ function Index() {
<p>{ loginState }</p> <p>{ loginState }</p>
<Navbar LoggedUser={ loggedUser } /> <Navbar LoggedUser={ loggedUser } />
<Routes> <Routes>
<Route path="/" element={<Dashboard />} /> <Route path="/" element={<Dashboard RouterName={ routerName } TwoGExtendedName={ twoGExtendedName } FiveGExtendedName={ fiveGExtendedName } DevicesOnline={ devicesOnline } />} />
<Route path="/devices" element={<Devices />} /> <Route path="/devices" element={<Devices />} />
<Route path="/extend" element={<Extend />} /> <Route path="/extend" element={<Extend />} />
<Route path="/wireless" element={<WirelessSettings />} /> <Route path="/wireless" element={<WirelessSettings />} />

BIN
src/assets/arrow.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
src/assets/device.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
src/assets/extender.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
src/assets/gear.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
src/assets/globe.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 95 KiB

BIN
src/assets/high_signal.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
src/assets/logo.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/low_signal.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 66 KiB

BIN
src/assets/medium_signal.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
src/assets/router.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
src/assets/signal.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
src/assets/very_low_signal.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 56 KiB

2
src/components/Navbar.tsx
View file

@ -4,7 +4,7 @@ interface Props {
function Navbar({ LoggedUser }: Props) { function Navbar({ LoggedUser }: Props) {
return ( return (
<nav> <nav id="topNav">
<h1>Wifi Extender Hub</h1> <h1>Wifi Extender Hub</h1>
<p>{ LoggedUser }</p> <p>{ LoggedUser }</p>
</nav> </nav>

79
src/pages/Dashboard.tsx
View file

@ -1,7 +1,82 @@
function Dashboard() { 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 Devices from '../assets/device.png'
import Gear from '../assets/gear.png'
interface Props {
RouterName: string;
TwoGExtendedName: string;
FiveGExtendedName: string;
DevicesOnline: number;
}
function Dashboard({ RouterName, TwoGExtendedName, FiveGExtendedName, DevicesOnline }: Props) {
return ( return (
<> <>
<a href="/wireless"><p>hi</p></a> <header>
<ul>
<li>
<img src={ Globe } className="listIcons" />
<h2>Internet</h2>
</li>
<li>
<img src={ Arrow } className="arrow" />
</li>
<li>
<img src={ Router } className="listIcons" />
<h2>Router</h2>
<p>{ RouterName }</p>
</li>
<li>
<img src= { MediumSignal } className="signal" />
</li>
<li>
<img src= { Extender } className="listIcons" />
<h2>Extender</h2>
<p>{ TwoGExtendedName }</p>
<p>{ FiveGExtendedName }</p>
</li>
<li>
<img src= { HighSignal } className="signal" />
</li>
<li>
<img src={ Devices } className="listIcons" />
<h2>Devices</h2>
</li>
</ul>
</header>
<nav id="lowerNav">
<ul>
<li>
<img src={ Devices } />
<h2>Device List</h2>
<p>{ DevicesOnline } Devices Online</p>
</li>
<li>
<img src={ Globe } />
<h2>Extend Network</h2>
<p>Amplify Network</p>
</li>
<li>
<img src={ Signal } />
<h2>Wireless Settings</h2>
<p>Set Extender Network Up</p>
</li>
<li>
<img src={ Gear } />
<h2>System Settings</h2>
<p>Change Extender Settings</p>
</li>
</ul>
</nav>
</> </>
) )
} }

2
src/pages/Login.tsx
View file

@ -16,6 +16,8 @@ function Login({ setLogin, setUser }: Props) {
let [usernameError, setUsernameError] = useState(false); let [usernameError, setUsernameError] = useState(false);
let [passwordError, setPasswordError] = useState(false); let [passwordError, setPasswordError] = useState(false);
setUser('');
const handleLogin = (e: React.FormEvent) => { const handleLogin = (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();

0
src/pages/ResetInstructions.tsx Normal file
View file

67
src/styles/Dashboard.css Normal file
View file

@ -0,0 +1,67 @@
header {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
height: fit-content;
background-color: #071e42;
margin-top: 20px;
border-radius: 20px;
padding: 90px 20px;
}
ul {
display: flex;
align-items: center;
gap: 20px;
}
li {
display: inherit;
flex-direction: column;
text-align: center;
list-style: none;
img {
user-select: none;
pointer-events: none;
}
.listIcons {
max-height: 160px;
}
.arrow {
max-height: 60px;
}
.signal {
max-height: 90px;
}
}
#lowerNav {
margin-top: 20px;
ul {
justify-content: space-around;
}
li{
padding: 40px;
background-color: #071e42;
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;
}
}

2
src/styles/Login.css
View file

@ -60,7 +60,7 @@ form {
max-width: fit-content; max-width: fit-content;
} }
a { a {
color: cyan; color: #008cff;
} }
button { button {
background-color: #071436; background-color: #071436;

2
src/styles/Main.css
View file

@ -28,7 +28,7 @@ a {
text-decoration: none; text-decoration: none;
} }
nav { #topNav {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;