arav/appointment_to_examiner
1
0
Fork 0
forked from CSI-KJSCE/appointment_to_examiner
Code Pull Requests Activity

Faculty and Course Forms

Browse Source
This commit is contained in:
Harshitha Shetty
2024-12-04 03:54:40 +05:30
parent e9b57359f1
commit 2f0597cb1e
14 changed files with 325 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
client/package-lock.json generated
View File

@@ -18,8 +18,8 @@
"react": "^18.2.0",
"react-bootstrap": "^2.10.2",
"react-dom": "^18.2.0",
"react-icons": "^5.0.1",
"react-router-dom": "^6.22.3",
"react-icons": "^5.4.0",
"react-router-dom": "^6.28.0",
"react-scripts": "5.0.1",
"react-toastify": "^10.0.5",
"web-vitals": "^2.1.4"
@@ -3446,9 +3446,9 @@
}
},
"node_modules/@remix-run/router": {
"version": "1.15.3",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
"integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
"version": "1.21.0",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz",
"integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==",
"engines": {
"node": ">=14.0.0"
}
@@ -15474,9 +15474,9 @@
"integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
},
"node_modules/react-icons": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
"integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==",
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz",
"integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==",
"peerDependencies": {
"react": "*"
}
@@ -15500,11 +15500,11 @@
}
},
"node_modules/react-router": {
"version": "6.22.3",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
"integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
"version": "6.28.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz",
"integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==",
"dependencies": {
"@remix-run/router": "1.15.3"
"@remix-run/router": "1.21.0"
},
"engines": {
"node": ">=14.0.0"
@@ -15514,12 +15514,12 @@
}
},
"node_modules/react-router-dom": {
"version": "6.22.3",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
"integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
"version": "6.28.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz",
"integrity": "sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==",
"dependencies": {
"@remix-run/router": "1.15.3",
"react-router": "6.22.3"
"@remix-run/router": "1.21.0",
"react-router": "6.28.0"
},
"engines": {
"node": ">=14.0.0"

4
client/package.json
View File

@@ -13,8 +13,8 @@
"react": "^18.2.0",
"react-bootstrap": "^2.10.2",
"react-dom": "^18.2.0",
"react-icons": "^5.0.1",
"react-router-dom": "^6.22.3",
"react-icons": "^5.4.0",
"react-router-dom": "^6.28.0",
"react-scripts": "5.0.1",
"react-toastify": "^10.0.5",
"web-vitals": "^2.1.4"

32
client/src/App.js
View File

@@ -1,4 +1,7 @@
import {BrowserRouter as Router , Route , Routes } from "react-router-dom";
import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import CourseForm from "./Pages/CourseForm";
import FacultyForm from "./Pages/FacultyForm";
import './App.css';
import Welcome from "./Pages/Welcome"
import AuthPage from "./Pages/Login";
@@ -7,21 +10,24 @@ import ForgetPwPage from "./Pages/ForgetPw";
import ResetPwPage from "./Pages/ResetPw";
import FilterPage from "./Pages/FilterPage";
import WelcomeWithFilter from "./Pages/WelcomeWithFilter";
import "react-toastify/dist/ReactToastify.css";
import "react-toastify/dist/ReactToastify.css";
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Welcome />}></Route>
<Route path="/Welcom" element={<WelcomeWithFilter />} />
<Route path="/AuthpPage" element={<AuthPage />}></Route>
<Route path="/Home" element={<HomePage />}></Route>
<Route path="/ForgetPw" element={<ForgetPwPage />}></Route>
<Route path="/ResetPw/:token" element={<ResetPwPage />}></Route>
<Route path="/Filter" element={<FilterPage />} />
</Routes>
</Router>
<Router>
{/* <Navbar /> */}
<Routes>
<Route path="/" element={<AuthPage />}></Route>
<Route path="/course-form/:id" element={<CourseForm />} />
<Route path="/faculty-form/:id" element={<FacultyForm />} />
<Route path="/Welcom" element={<WelcomeWithFilter />} />
<Route path="/AuthPage" element={<AuthPage />}></Route>
<Route path="/Home" element={<HomePage />}></Route>
<Route path="/ForgetPw" element={<ForgetPwPage />}></Route>
<Route path="/ResetPw/:token" element={<ResetPwPage />}></Route>
<Route path="/Filter" element={<FilterPage />} />
</Routes>
</Router>
);
}

64
client/src/Pages/CourseForm.css Normal file
View File

@@ -0,0 +1,64 @@
/* General form container styling */
.form-container {
max-width: 600px;
margin: 30px auto;
padding: 20px;
background-color: #f4f4f9;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
font-size: 24px;
color: #333;
margin-bottom: 20px;
}
form {
display: flex;
flex-direction: column;
gap: 20px;
}
label {
font-size: 16px;
color: #333;
margin-bottom: 5px;
}
input {
padding: 12px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
}
input:focus {
outline: none;
border-color: #4caf50;
box-shadow: 0 0 5px rgba(0, 192, 0, 0.2);
}
button {
padding: 12px;
font-size: 16px;
background-color: #4caf50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
box-sizing: border-box;
}
button:hover {
background-color: #45a049;
}
button:focus {
outline: none;
}

31
client/src/Pages/CourseForm.jsx Normal file
View File

@@ -0,0 +1,31 @@
// CourseForm.js
import React from "react";
import { useParams } from "react-router-dom";
import "./CourseForm.css";
const CourseForm = () => {
const { id } = useParams(); // Get the course ID from the URL params
return (
<div className="form-container">
<h2>Course Info</h2>
<form>
<label>
Course ID:
<input type="text" value={id} readOnly />
</label>
<label>
Course Name:
<input type="text" placeholder="Enter course name" />
</label>
<label>
Status:
<input type="text" placeholder="Enter course status" />
</label>
<button type="submit">Submit</button>
</form>
</div>
);
};
export default CourseForm;

64
client/src/Pages/FacultyForm.css Normal file
View File

@@ -0,0 +1,64 @@
/* General form container styling */
.form-container {
max-width: 600px;
margin: 30px auto;
padding: 20px;
background-color: #f4f4f9;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
font-size: 24px;
color: #333;
margin-bottom: 20px;
}
form {
display: flex;
flex-direction: column;
gap: 20px;
}
label {
font-size: 16px;
color: #333;
margin-bottom: 5px;
}
input {
padding: 12px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
}
input:focus {
outline: none;
border-color: #4caf50;
box-shadow: 0 0 5px rgba(0, 192, 0, 0.2);
}
button {
padding: 12px;
font-size: 16px;
background-color: #4caf50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
box-sizing: border-box;
}
button:hover {
background-color: #45a049;
}
button:focus {
outline: none;
}

31
client/src/Pages/FacultyForm.jsx Normal file
View File

@@ -0,0 +1,31 @@
// FacultyForm.js
import React from "react";
import { useParams } from "react-router-dom";
import "./FacultyForm.css";
const FacultyForm = () => {
const { id } = useParams(); // Get the faculty ID from the URL params
return (
<div className="form-container">
<h2>Faculty Info</h2>
<form>
<label>
Faculty ID:
<input type="text" value={id} readOnly />
</label>
<label>
Faculty Name:
<input type="text" placeholder="Enter faculty name" />
</label>
<label>
Department:
<input type="text" placeholder="Enter department" />
</label>
<button type="submit">Submit</button>
</form>
</div>
);
};
export default FacultyForm;

2
client/src/Pages/FilterPage.jsx
View File

@@ -22,7 +22,7 @@ const FilterPage = ({ onApplyFilter }) => {
alert("Please select either 'Course' or 'Faculty' before applying the filter.");
return;
}
onApplyFilter(); // Trigger the table display
onApplyFilter(selectedOption); // Pass the selected option to the parent
};
const handleSelectOption = (option) => {

2
client/src/Pages/Login.jsx
View File

@@ -70,7 +70,7 @@ function AuthPage() {
user.profilePicture = gravatarUrl;
localStorage.setItem("user", JSON.stringify(user));
window.location.href = "/Home";
window.location.href = "/Welcom";
} catch (error) {
console.error("Authentication error:", error);
if (

26
client/src/Pages/Navbar.css
View File

@@ -0,0 +1,26 @@
/* Navbar Container */
.navbar {
background-color: #800000; /* Maroon background */
height: 60px; /* Navbar height */
width: 100%; /* Full width */
display: flex; /* Flexbox for alignment */
justify-content: flex-end; /* Align items to the right */
align-items: center; /* Center vertically */
padding: 0 20px; /* Horizontal padding for spacing */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
position: fixed; /* Fix the navbar to the top */
top: 0;
z-index: 1000; /* Place above other elements */
}
/* User Icon */
.user-icon {
font-size: 30px; /* Icon size */
color: #fff; /* White color for the icon */
cursor: pointer; /* Pointer cursor on hover */
transition: color 0.3s ease-in-out; /* Smooth hover effect */
}
.user-icon:hover {
color: #ffcccc; /* Light pink on hover */
}

15
client/src/Pages/Navbar.jsx
View File

@@ -0,0 +1,15 @@
import React from "react";
import { FaUserCircle } from "react-icons/fa";
import "./Navbar.css"; // Navbar-specific styles
const Navbar = () => {
return (
<header className="navbar">
<div className="navbar-container">
<FaUserCircle className="user-icon" />
</div>
</header>
);
};
export default Navbar;

2
client/src/Pages/Welcom.jsx
View File

@@ -13,7 +13,7 @@ const Welcom = () => {
<div className="welcom-container">
<div className="welcom-message">
<h1>Welcome, John Doe</h1>
<p>You’re signed in as DEC/EIC</p>
<p>You're signed in as DEC/EIC</p>
</div>
<button className="next-button" onClick={goToFilterPage}>
Proceed

58
client/src/Pages/WelcomeWithFilter.jsx
View File

@@ -1,16 +1,30 @@
import React, { useState } from "react";
import { useNavigate } from "react-router-dom"; // Import useNavigate for navigation
import FilterPage from "./FilterPage";
import Navbar from "./Navbar";
import "./WelcomeWithFilter.css";
const WelcomeWithFilter = () => {
const [showTable, setShowTable] = useState(false); // State to toggle between table and welcome content
const [selectedOption, setSelectedOption] = useState(null); // State for selected filter option
const navigate = useNavigate(); // Hook for navigation
const handleApplyFilter = () => {
setShowTable(true); // Show table and replace the welcome content
const handleApplyFilter = (option) => {
setSelectedOption(option); // Update the selected option
};
const handleRowClick = (type, id) => {
if (type === "Faculty") {
navigate(`/faculty-form/${id}`); // Navigate to Faculty form page
} else if (type === "Course") {
navigate(`/course-form/${id}`); // Navigate to Course form page
}
};
return (
<div className="welcome-with-filter-container">
{/* Navbar */}
<Navbar />
{/* Filter Section */}
<div className="filter-section">
<FilterPage onApplyFilter={handleApplyFilter} />
@@ -18,20 +32,48 @@ const WelcomeWithFilter = () => {
{/* Lower Section */}
<div className="welcome-section">
{showTable ? (
// Show the table when 'Apply Filter' is clicked
{selectedOption === "Faculty" ? (
// Show the faculty table
<div className="table-container">
<table>
<thead>
<tr>
<th>Faculty ID</th>
<th>Faculty Name</th>
<th>Department</th>
</tr>
</thead>
<tbody>
{Array.from({ length: 5 }).map((_, index) => (
<tr
key={index}
onClick={() => handleRowClick("Faculty", index + 1)} // Pass type and id on row click
>
<td>FAC-{index + 1}</td>
<td>Faculty {index + 1}</td>
<td>Department {index + 1}</td>
</tr>
))}
</tbody>
</table>
</div>
) : selectedOption === "Course" ? (
// Show the course table
<div className="table-container">
<table>
<thead>
<tr>
<th>Course ID</th>
<th>Course Name</th>
<th>Availability</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{Array.from({ length: 10 }).map((_, index) => (
<tr key={index}>
<tr
key={index}
onClick={() => handleRowClick("Course", index + 1)} // Pass type and id on row click
>
<td>Course-{index + 1}</td>
<td>Sample Course</td>
<td>Available</td>
@@ -41,7 +83,7 @@ const WelcomeWithFilter = () => {
</table>
</div>
) : (
// Show the welcome content by default
// Default welcome content
<div className="welcome-content">
<div className="welcome-message">
<h1>Welcome, John Doe</h1>

2
server/server.js
View File

@@ -86,7 +86,7 @@ app.get(
"/auth/google/callback",
passport.authenticate("google", { failureRedirect: "/" }),
function (req, res) {
res.redirect("http://localhost:3000/Home");
res.redirect("http://localhost:3000/Welcom");
}
);