Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #89 from Capstone-Projects-2024-Spring/BP-215-Add-…
…WiFi-Menu-to-Settings-Page Added Wifi Menu to New JS GUI and Page Switching
- Loading branch information
Showing
11 changed files
with
448 additions
and
34 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,39 @@ | ||
| import React, { useState, useEffect } from "react"; | ||
| import React, { useState } from "react"; | ||
| import { GlobalStyles } from "./components/styles/Global"; | ||
| import NavBar from "./components/NavBar.jsx"; | ||
|
|
||
| import { ThemeProvider } from "styled-components"; | ||
| import { dark } from "./components/styles/Theme.styled.jsx"; | ||
|
|
||
| import HomePage from "./components/HomePage.jsx"; | ||
| import CommunityPage from "./components/CommunityPage.jsx"; | ||
| import ClassroomPage from "./components/ClassroomPage.jsx"; | ||
| import SettingsPage from "./components/SettingsPage.jsx"; // Import SettingsPage component | ||
|
|
||
| import { Layout } from './components/styles/Layout.styled.jsx' | ||
|
|
||
| function App() { | ||
| const [selectedTheme, setSelectedTheme] = useState(dark); | ||
| const [currentPage, setCurrentPage] = useState('home'); | ||
|
|
||
| const handleNavButtonClick = (page) => { | ||
| setCurrentPage(page); | ||
| }; | ||
|
|
||
| return ( | ||
| <ThemeProvider theme={selectedTheme}> | ||
| <div className="App"> | ||
| <GlobalStyles /> | ||
|
|
||
| <Layout> | ||
| <NavBar></NavBar> | ||
| <HomePage></HomePage> | ||
| <NavBar onPageChange={handleNavButtonClick} /> | ||
| {currentPage === 'home' && <HomePage />} | ||
| {currentPage === 'community' && <CommunityPage />} | ||
| {currentPage === 'classroom' && <ClassroomPage />} | ||
| {currentPage === 'settings' && <SettingsPage />} | ||
| </Layout> | ||
| </div> | ||
| </ThemeProvider> | ||
| ) | ||
| ); | ||
| } | ||
|
|
||
| export default App | ||
| export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import { HomePageContainer } from "./styles/HomePage.styled" | ||
|
|
||
| export default function HomePage() { | ||
| return ( | ||
| <HomePageContainer> | ||
| Classroom Page | ||
| </HomePageContainer> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import { HomePageContainer } from "./styles/HomePage.styled" | ||
|
|
||
| export default function HomePage() { | ||
| return ( | ||
| <HomePageContainer> | ||
| Community Page | ||
| </HomePageContainer> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,52 @@ | ||
| import { HomePageContainer } from "./styles/HomePage.styled" | ||
| import { NewGameIcon, PlayIcon } from "./Icons" | ||
| import { GalleryContainer, GameIcon, GameInfoContainer, HomePageContainer, GameMetaData, GameActionButtonsContainer, GameActionButton, GameActionButtonBackground, GameActionButtonForeground ,MetaDataText, MetaDataTitle} from "./styles/HomePage.styled" | ||
|
|
||
| export default function HomePage() { | ||
|
|
||
| let gameNames = ["Mario Kart", "Legend of Zelda", "PacMan", "Tetris", "Pokemon"]; | ||
|
|
||
| return ( | ||
| <HomePageContainer> | ||
| Hello | ||
|
|
||
| <GalleryContainer> | ||
|
|
||
| <GameIcon tabIndex={2}> | ||
| <NewGameIcon /> | ||
| </GameIcon> | ||
|
|
||
| {gameNames.map((game, index)=>{ | ||
| return( | ||
| <GameIcon tabIndex={2}>{game}</GameIcon> | ||
| ) | ||
|
|
||
| })} | ||
|
|
||
|
|
||
|
|
||
| </GalleryContainer> | ||
|
|
||
| <GameInfoContainer> | ||
| <GameMetaData> | ||
| <MetaDataTitle><span>Super Mario</span></MetaDataTitle> | ||
| <MetaDataText> Author: </MetaDataText> | ||
| <MetaDataText> Last Updated: </MetaDataText> | ||
|
|
||
| </GameMetaData> | ||
|
|
||
| <GameActionButtonsContainer> | ||
| <GameActionButton> | ||
| <GameActionButtonForeground> | ||
| <PlayIcon/> | ||
| </GameActionButtonForeground> | ||
|
|
||
| <GameActionButtonBackground></GameActionButtonBackground> | ||
|
|
||
| </GameActionButton> | ||
|
|
||
| </GameActionButtonsContainer> | ||
|
|
||
| </GameInfoContainer> | ||
|
|
||
| </HomePageContainer> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,42 @@ | ||
| import {ClassroomIcon, CommunityIcon, HomeIcon, SettingsIcon} from "./Icons"; | ||
| import { NavButtonsContainer, NavBarContainer, NavButton, StatusIconsContainer } from "./styles/NavBar.styled"; | ||
| import React, { useState } from 'react'; | ||
| import { NavButtonsContainer, NavBarContainer, NavButton } from "./styles/NavBar.styled"; | ||
| import { ClassroomIcon, CommunityIcon, HomeIcon, SettingsIcon } from "./Icons"; | ||
|
|
||
| const navIcons = { | ||
| home: HomeIcon, | ||
| community: CommunityIcon, | ||
| classroom: ClassroomIcon, | ||
| settings: SettingsIcon, | ||
| }; | ||
|
|
||
| const NavBar = ({ onPageChange }) => { | ||
| const [activePage, setActivePage] = useState('home'); | ||
|
|
||
| const handleButtonClick = (page) => { | ||
| setActivePage(page); | ||
| onPageChange(page); | ||
| }; | ||
|
|
||
| export default function NavBar() { | ||
| return ( | ||
| <NavBarContainer> | ||
| <NavButtonsContainer> | ||
| <NavButton tabIndex={1}> | ||
| <HomeIcon/> | ||
| </NavButton> | ||
| <NavButton tabIndex={2}> | ||
| <CommunityIcon/> | ||
| </NavButton> | ||
| <NavButton tabIndex={3}> | ||
| <ClassroomIcon/> | ||
| </NavButton> | ||
| <NavButton tabIndex={4}> | ||
| <SettingsIcon/> | ||
| </NavButton> | ||
| {Object.keys(navIcons).map((page) => { | ||
| const Icon = navIcons[page]; | ||
| return ( | ||
| <NavButton | ||
| key={page} | ||
| active={activePage === page} | ||
| onClick={() => handleButtonClick(page)} | ||
| tabIndex={1} | ||
| > | ||
| <Icon /> | ||
| </NavButton> | ||
| ); | ||
| })} | ||
| </NavButtonsContainer> | ||
| <StatusIconsContainer> | ||
|
|
||
| </StatusIconsContainer> | ||
| {/* StatusIconsContainer can be added here */} | ||
| </NavBarContainer> | ||
| ) | ||
| } | ||
| ); | ||
| }; | ||
|
|
||
| export default NavBar; |
40 changes: 40 additions & 0 deletions
40
home/webapp/src/components/Settings/NetworkSettingsPage.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import React, { useState } from "react"; | ||
| import * as Styled from "../styles/Settings.styled"; | ||
|
|
||
| export default function NetworkSettingsPage() { | ||
| let currentNetwork = "Applebaum's Network"; | ||
| let networksList = ["tusecurewireless", "eduroam", "Stacy's iPhone", "xfinitywifi"]; | ||
| const [connectedNetwork, setConnectedNetwork] = useState("✔ "+currentNetwork); | ||
| const [wifiNetworks, setWifiNetworks] = useState(networksList); | ||
|
|
||
| const handleDisconnectButtonClick = () => { | ||
| // Implement connect/disconnect logic here | ||
| }; | ||
|
|
||
| const handleRefreshButtonClick = () => { | ||
| // Implement refresh logic here | ||
| }; | ||
|
|
||
| const renderWifiContent = () => { | ||
| return ( | ||
| <Styled.NetworksList> | ||
| {wifiNetworks.map((network, index) => ( | ||
| <Styled.NetworkButton>{network}</Styled.NetworkButton> | ||
| ))} | ||
| </Styled.NetworksList> | ||
| ); | ||
| }; | ||
|
|
||
| return (<Styled.NetworkSettingsPageContainer> | ||
| <Styled.NetworkActionBar> | ||
| <Styled.ConnectedNetwork>{connectedNetwork}</Styled.ConnectedNetwork> | ||
| <Styled.DisconnectButton onClick={handleDisconnectButtonClick}> | ||
| Disconnect | ||
| </Styled.DisconnectButton> | ||
| <Styled.RefreshButton onClick={handleRefreshButtonClick}> | ||
| ↻ | ||
| </Styled.RefreshButton> | ||
| </Styled.NetworkActionBar> | ||
| {renderWifiContent()} | ||
| </Styled.NetworkSettingsPageContainer>) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import React, { useState } from "react"; | ||
| import * as Styled from "./styles/Settings.styled"; | ||
| import NetworkSettingsPage from "./Settings/NetworkSettingsPage"; | ||
|
|
||
| const SettingsPage = () => { | ||
| const [activeButton, setActiveButton] = useState("WiFi"); | ||
|
|
||
| return ( | ||
| <Styled.SettingsPageContainer> | ||
| <Styled.SideMenu> | ||
| <Styled.Button | ||
| active={activeButton === "WiFi"} | ||
| onClick={() => {setActiveButton("WiFi")}} | ||
| tabIndex="2" | ||
| > | ||
| Wi-Fi | ||
| </Styled.Button> | ||
| {/* Add more buttons as needed */} | ||
| <Styled.Button | ||
| active={activeButton === "Sound"} | ||
| onClick={() => setActiveButton("Sound")} | ||
| tabIndex="2" | ||
| > | ||
| Sound | ||
| </Styled.Button> | ||
| <Styled.Button | ||
| active={activeButton === "Profile"} | ||
| onClick={() => setActiveButton("Profile")} | ||
| tabIndex="2" | ||
| > | ||
| Profile | ||
| </Styled.Button> | ||
| <Styled.Button | ||
| active={activeButton === "Class"} | ||
| onClick={() => setActiveButton("Class")} | ||
| tabIndex="2" | ||
| > | ||
| Class | ||
| </Styled.Button> | ||
| </Styled.SideMenu> | ||
|
|
||
| {activeButton === "WiFi" && (<NetworkSettingsPage/>)} | ||
|
|
||
|
|
||
| </Styled.SettingsPageContainer> | ||
| ); | ||
| }; | ||
|
|
||
| export default SettingsPage; |
Oops, something went wrong.