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

Tweaked minor things, Started on Wireless Settings

Browse source
This commit is contained in:
Patrick Hatsune 2024-08-13 22:34:06 -07:00
parent 539a483bde
commit cd46caf94a
Signed by: keyemail
GPG key ID: 6FD1A0FDB0D914C2
9 changed files with 307 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/Index.tsx
View file

@ -7,8 +7,8 @@ import HighSignal from "./assets/high_signal.png";
import Dashboard from "./pages/Dashboard";
import Devices from "./pages/DeviceList";
import Extend from "./pages/ExtendWirelessNetwork";
import WirelessSettings from "./pages/SystemSettings";
import SystemSettings from "./pages/WirelessSettings";
import WirelessSettings from "./pages/WirelessSettings";
import SystemSettings from "./pages/SystemSettings";
import Login from "./pages/Login";
import Register from "./pages/Register";
import Navbar from "./components/Navbar";
@ -52,6 +52,9 @@ function Index() {
const [fiveGExtendedName, setFiveGExtendedName] = useState(
"Example 5GHz Network",
);
const [fiveGExtendedPassword, setFiveGExtendedPassword] = useState("123");
const [twoGExtendedPassword, setTwoGExtendedPassword] = useState("123");
const [devicesOnline, setDevicesOnline] = useState(0);
const [extenderMode, setExtenderMode] = useState(false);
@ -80,7 +83,7 @@ function Index() {
return (
<>
<Navbar LoggedUser={loggedUser} />
<Navbar loggedUser={loggedUser} />
<Routes>
<Route
path="/"
@ -112,7 +115,7 @@ function Index() {
element={
<Extend
selectedModeButton={selectedModeButton}
setSelecModeButton={setSelectedModeButton}
setSelectModeButton={setSelectedModeButton}
extendedMode={extenderMode}
setExtendedMode={setExtenderMode}
connected={connected}
@ -123,7 +126,21 @@ function Index() {
/>
}
/>
<Route path="/wireless" element={<WirelessSettings />} />
<Route
path="/wireless"
element={
<WirelessSettings
fiveGExtenderName={fiveGExtendedName}
twoGExtendedName={twoGExtendedName}
setFiveGExtendedName={setFiveGExtendedName}
setTwoGExtendedName={setTwoGExtendedName}
fiveGExtendedPassword={fiveGExtendedPassword}
twoGExtendedPassword={twoGExtendedPassword}
setFiveGExtendedPassword={setFiveGExtendedPassword}
setTwoGExtendedPassword={setTwoGExtendedPassword}
/>
}
/>
<Route path="/settings" element={<SystemSettings />} />
<Route
path="/login"

8
src/components/Navbar.tsx
View file

@ -1,14 +1,14 @@
interface Props {
LoggedUser: string;
loggedUser: string;
}
function Navbar({ LoggedUser }: Props) {
function Navbar({ loggedUser }: Props) {
return (
<nav id="topNav">
<h1>Wifi Extender Hub</h1>
<p>{ LoggedUser }</p>
<p>{loggedUser}</p>
</nav>
)
);
}
export default Navbar;

2
src/pages/DeviceList.tsx
View file

@ -22,7 +22,7 @@ function DeviceList({ deviceNames, deviceIPs, setDevice, setDeviceIP }: Props) {
};
return (
<div id="deviceList">
<div className="panel">
<h2>Device list</h2>
{deviceNames.length === 0 && <p>No devices are connected.</p>}
<ul id="devices">

8
src/pages/ExtendWirelessNetwork.tsx
View file

@ -3,7 +3,7 @@ import "../styles/ExtendWirelessNetwork.css";
interface Props {
selectedModeButton: number;
setSelecModeButton: Dispatch<SetStateAction<number>>;
setSelectModeButton: Dispatch<SetStateAction<number>>;
extendedMode: boolean;
setExtendedMode: Dispatch<SetStateAction<boolean>>;
connected: number;
@ -15,7 +15,7 @@ interface Props {
function ExtendWirelessNetwork({
selectedModeButton,
setSelecModeButton,
setSelectModeButton,
extendedMode,
setExtendedMode,
connected,
@ -27,14 +27,14 @@ function ExtendWirelessNetwork({
const buttons = ["AP Mode", "Extend Mode"];
return (
<div id="extendNetwork">
<div className="panel">
<h2>Extend Network</h2>
<div id="modeButton">
{buttons.map((button, index) => (
<button
className={selectedModeButton === index ? "modeButonActive" : ""}
onClick={() => {
setSelecModeButton(index);
setSelectModeButton(index);
setExtendedMode(buttons[index] === "Extend Mode");
}}
>

80
src/pages/WirelessSettings.tsx
View file

@ -1,5 +1,79 @@
function WirelessName() {
return <p>Wireless Name</p>;
import { useState, Dispatch, SetStateAction } from "react";
import "../styles/WirelessSettings.css";
interface Props {
fiveGExtenderName: string;
twoGExtendedName: string;
setFiveGExtendedName: Dispatch<SetStateAction<string>>;
setTwoGExtendedName: Dispatch<SetStateAction<string>>;
fiveGExtendedPassword: string;
twoGExtendedPassword: string;
setFiveGExtendedPassword: Dispatch<SetStateAction<string>>;
setTwoGExtendedPassword: Dispatch<SetStateAction<string>>;
}
export default WirelessName;
function WirelessSettings({
fiveGExtenderName,
twoGExtendedName,
setFiveGExtendedName,
setTwoGExtendedName,
fiveGExtendedPassword,
twoGExtendedPassword,
setFiveGExtendedPassword,
setTwoGExtendedPassword,
}: Props) {
const buttons = ["5GHz Network", "2.4GHz Network"];
const [selectedButton, setSelectedButton] = useState(0);
return (
<div className="panel">
<h2>Wireless Settings</h2>
<div id="modeButton">
{buttons.map((button, index) => (
<button
className={selectedButton === index ? "modeButonActive" : ""}
onClick={() => {
setSelectedButton(index);
}}
>
{button}
</button>
))}
</div>
<div id="networkSettings">
{selectedButton === 0 ? (
<>
<h3>5GHz Settings</h3>
<div>
<h4>Wireless Name</h4>
<input type="text" defaultValue={fiveGExtenderName}></input>
<h4>Wireless Password</h4>
<input
type="password"
defaultValue={fiveGExtendedPassword}
></input>
</div>
<button style={{ marginTop: "20px" }}>Sudmit</button>
</>
) : (
<>
<h3>2.4GHz Settings</h3>
<div>
<h4>Wireless Name</h4>
<input type="text" defaultValue={twoGExtendedName}></input>
<h4>Wireless Password</h4>
<input
type="password"
defaultValue={twoGExtendedPassword}
></input>
</div>
<button style={{ marginTop: "20px" }}>Sudmit</button>
</>
)}
</div>
</div>
);
}
export default WirelessSettings;

14
src/styles/DeviceList.css
View file

@ -1,17 +1,3 @@
#deviceList {
background-color: var(--bg-color-alt);
margin-top: 20px;
border-radius: 20px;
padding: 20px;
height: calc(100% - 50px);
overflow: scroll;
h2 {
font-size: 2.5rem;
text-align: center;
}
}
#devices {
list-style: none;
display: flex;

13
src/styles/ExtendWirelessNetwork.css
View file

@ -1,15 +1,4 @@
#extendNetwork {
background-color: var(--bg-color-alt);
margin-top: 20px;
border-radius: 20px;
padding: 20px;
height: calc(100% - 50px);
overflow: scroll;
h2 {
font-size: 2.5rem;
text-align: center;
}
.panel {
button {
background-color: #071436;
color: white;

16
src/styles/Main.css
View file

@ -24,7 +24,7 @@ body {
background-color: #071935;
color: #fff;
padding: 20px;
font-family: 'Poppins', sans-serif;
font-family: "Poppins", sans-serif;
height: 100vh;
}
@ -53,3 +53,17 @@ a {
justify-content: center;
height: calc(100% - 40px);
}
.panel {
background-color: var(--bg-color-alt);
margin-top: 20px;
border-radius: 20px;
padding: 20px;
height: calc(100% - 50px);
overflow: scroll;
h2 {
font-size: 2.5rem;
text-align: center;
}
}

89
src/styles/WirelessSettings.css
View file

@ -0,0 +1,89 @@
.panel {
button {
background-color: #071436;
color: white;
border: none;
cursor: pointer;
height: 50px;
width: 100px;
border-radius: 10px;
transition: 0.3s background-color;
}
button:hover {
background-color: #0069ff;
}
#modeButton {
margin-top: 20px;
display: flex;
justify-content: center;
gap: 20px;
}
#APMode {
margin-top: 60px;
font-size: 2rem;
text-align: center;
}
.modeButonActive {
background-color: #0069ff;
}
}
#networkSettings {
display: flex;
flex-direction: column;
align-items: center;
h3 {
font-size: 2rem;
text-align: center;
margin-top: 60px;
}
div {
display: flex;
flex-direction: column;
margin-top: 20px;
max-width: 360px;
font-weight: normal;
margin-top: 20px;
gap: 5px;
h2 {
font-size: 1.5rem;
font-weight: normal;
color: #ffffffd5;
}
input {
color: #ffffffb4;
border: none;
background-color: #071436;
height: 40px;
width: 360px;
border-radius: 10px;
padding: 5px;
font-size: 1rem;
}
p {
font-size: 0.8rem;
color: #ffffffd5;
max-width: fit-content;
}
a {
color: #008cff;
}
button {
background-color: #071436;
border: none;
color: #fff;
margin-top: 20px;
height: 50px;
width: 100%;
border-radius: 10px;
font-size: 1.3rem;
cursor: pointer;
transition: 0.3s background-color;
}
button:hover {
background-color: #0069ff;
}
}
}