Skip to content
Snippets Groups Projects
Commit ef1c2068 authored by fhurtado14's avatar fhurtado14
Browse files

Merge branch 'create-frontend-pages' into 'main'

Set up routing for major pages.

See merge request !9
parents 8de930d9 03337d3b
No related branches found
No related tags found
1 merge request!9Set up routing for major pages.
Showing with 253 additions and 17 deletions
......@@ -69,3 +69,59 @@
- if any value is not given (example: graduation date for a person who did not graduate), leave that value as null in the
request to the backend server
request body for update person:
{
personInfo: { -- note: pass ALL of the info here, even if it is not updated. Ex: if person only updates their nickname, still send their firstName, lastName, etc. in the request
firstName: string (not null)
lastName: string (not null)
middleName: string
suffix: string
maidenName: string
nickName: string
techAlumniChapter: string
classYear: int (not null)
gradYear: int
gradSemester: int
gender: string (accepted values: male. female, other)
}
degrees: [ -- note: include ONLY the degrees that should be updated
{
peopleDegreeId: int, -- this is not present in createPerson, will need this.
degreeType: string
degreeYear: int (not null),
degreeDescription: string (max 255 chars)
degreeDepartment: string,
degreeCollege: string,
},
....
],
addresses: [ -- note: include ONLY the addresses that should be updated
{
address1: string (not null),
address2: string, -- not sure if we need this
city: string (not null),
state: string (not null),
country: string (not null),
zipCode: int,
preferredAddress: boolean
},
{
** ADD ANOTHER ADDRESS HERE IF NECESSARY
}
],
contacts: [
{
contactNumber: string --> i guess this can be a phone nunber, email, etc.
contactType: string --> need to define list: phone, email, ....
preferredContact: boolean
},
..... more contacts if needed
],
involvements: [
involvement1: string,
involvement2: string ,
.... more if needed
]
}
......@@ -10,15 +10,30 @@ import {
import Home from "./components/Home/Home";
import Login from "./components/Login/Login";
import PracticeHome from "./components/APITest/PracticeHome";
import Navbar from "./components/NavBar/Navbar";
import AdminHome from "./components/AdminHome/AdminHome";
import ApplicationActivity from "./components/ApplicationActivity/ApplicationActivity";
import EditUsers from "./components/EditUsers/EditUsers";
import ViewUsers from "./components/ViewUsers/ViewUsers";
import CreateUsers from "./components/CreateUsers/CreateUsers";
import MyProfile from "./components/MyProfile/MyProfile";
function App() {
return (
<Router>
<div className="App">
å
<Navbar />
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/home" element={<Home />} />
<Route path="/practice" element={<PracticeHome />} />
<Route path="/admin" element={<AdminHome />} />
<Route path="/app-activity" element={<ApplicationActivity />} />
<Route path="/edit-users" element={<EditUsers />} />
<Route path="/view-users" element={<ViewUsers />} />
<Route path="/create-users" element={<CreateUsers />} />
<Route path="/my-profile" element={<MyProfile />} />
</Routes>
</div>
</Router>
......
......@@ -3,6 +3,8 @@ import { useNavigate } from "react-router-dom";
import "./AdminHome.css";
function AdminHome() {
const navigate = useNavigate();
const [isSidebarOpen, setSidebarOpen] = useState(true);
const toggleSidebar = () => {
......@@ -12,14 +14,14 @@ function AdminHome() {
return (
<div className="admin-page">
{/* Navbar */}
<nav className="navbar">
{/* <nav className="navbar">
<div className="navbar-links">
<a href="#">Home</a>
<a href="#">Browse</a>
<a href="#">Search</a>
<a href="#">Messages</a>
</div>
</nav>
</nav> */}
{/* Main content wrapper */}
<div className="main-content">
......@@ -30,9 +32,15 @@ function AdminHome() {
</button>
{isSidebarOpen && (
<ul className="sidebar-menu">
<li><a href="#">Account Settings</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">More...</a></li>
<li>
<a href="#">Account Settings</a>
</li>
<li>
<a href="#">Privacy Policy</a>
</li>
<li>
<a href="#">More...</a>
</li>
</ul>
)}
</div>
......@@ -41,20 +49,32 @@ function AdminHome() {
<div className="content">
<h1>Welcome to Admin Page</h1>
<div className="dashboard">
<div className="dashboard-item" onClick={() => console.log("Viewing Users")}>
<div
className="dashboard-item"
onClick={() => navigate("/view-users")}
>
<span>View Users</span>
</div>
<div className="dashboard-item" onClick={() => console.log("Editing Users")}>
<span>Edit Users</span>
<div
className="dashboard-item"
onClick={() => navigate("/edit-users")}
>
<span>Edit/Delete Users</span>
</div>
<div className="dashboard-item" onClick={() => console.log("Deleting Users")}>
<span>Delete Users</span>
<div
className="dashboard-item"
onClick={() => navigate("/create-users")}
>
<span>Create Users</span>
</div>
<div className="dashboard-item">
<input type="file" onChange={() => console.log("CSV Uploaded")} />
<span>Upload CSV</span>
</div>
<div className="dashboard-item" onClick={() => console.log("Tracking Page Visits")}>
<div
className="dashboard-item"
onClick={() => navigate("/app-activity")}
>
<span>Track Application Activity</span>
</div>
</div>
......
import React from "react";
const ApplicationActivity = () => {
return (
<section>
<h2> Page to view application activity</h2>
<p>
{" "}
Here we will show login/logout activity as well as database changes
</p>
</section>
);
};
export default ApplicationActivity;
import React from "react";
const CreateUsers = () => {
return (
<section>
<h2>
{" "}
Create user's page. Here we will give option to create a single user or
do a file upload
</h2>
</section>
);
};
export default CreateUsers;
import React from "react";
const EditUsers = () => {
return (
<section>
<h2> Edit users page</h2>
<p>
{" "}
Need to first search users by name, then pick the user you want and go
to a page where you can edit their details
</p>
<p> I think that delete users should also be included in here too</p>
</section>
);
};
export default EditUsers;
......@@ -107,24 +107,24 @@ function Home() {
</div>
<div className="selection-section">
<div className="button-container">
<div className="button-wrapper">
{/* <div className="button-wrapper">
<button className="action-button">
<img src={logo} width={70} alt="Browse" className="icon" />
</button>
<span>Browse</span>
</div>
<div className="button-wrapper">
</div> */}
{/* <div className="button-wrapper">
<button className="action-button">
<img src={logo} alt="Search" className="icon" />
</button>
<span>Search</span>
</div>
<div className="button-wrapper">
</div> */}
{/* <div className="button-wrapper">
<button className="action-button">
<img src={logo} alt="Message" className="icon" />
</button>
<span>Message</span>
</div>
</div> */}
</div>
</div>
</>
......
import React from "react";
const MyProfile = () => {
return (
<section>
<h2> MyProfile page</h2>
<p> Users can view and edit their profile info here</p>
</section>
);
};
export default MyProfile;
import React from "react";
import { Link } from "react-router-dom";
import styles from "./NavbarStyles.module.css";
const Navbar = () => {
return (
<nav className={styles.navbar}>
<ul className={styles.navList}>
<li>
<Link to="/home"> Home </Link>
</li>
<li>
<Link to="/search"> Search </Link>
</li>
<li>
<Link to="/admin"> Admin </Link>
</li>
<li>
<Link to="/my-profile"> My Profile </Link>
</li>
</ul>
</nav>
);
};
export default Navbar;
/* Navbar container */
.navbar {
width: 100%;
background: linear-gradient(to right, red, orange);
height: 60px;
display: flex;
justify-content: center;
align-items: center;
}
/* Navbar links container */
.navList {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
}
/* Navbar links */
.navList li a {
margin: 0 80px; /* Increase margin to space out links */
color: white;
text-decoration: none;
font-size: 20px;
position: relative;
transition: color 0.3s;
}
/* Hover effect for navbar links */
.navList li a:hover {
color: rgb(13, 28, 84); /* Changes text color on hover */
}
/* Underline effect on hover */
.navList li a::after {
content: "";
position: absolute;
width: 0;
height: 2px;
left: 0;
bottom: -5px;
background-color: rgb(0, 47, 255); /* Underline color */
transition: width 0.3s;
}
.navList li a:hover::after {
width: 100%; /* Expands underline on hover */
}
import React from "react";
const ViewUsers = () => {
return (
<section>
<h2> view users page</h2>
</section>
);
};
export default ViewUsers;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment