-
);
-
}
-
-
-export default LoginPage;
+export default LoginPage;
\ No newline at end of file
diff --git a/unispace/src/SchedulePage.js b/unispace/src/SchedulePage.js
index 6301c23..6a1834e 100644
--- a/unispace/src/SchedulePage.js
+++ b/unispace/src/SchedulePage.js
@@ -1,50 +1,227 @@
-import React from "react";
-import './index.css'; // Styles for this page
-import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
+import React, { useState, useEffect } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import './schedule.css';
+import './styles.css';
function SchedulePage() {
+ const navigate = useNavigate();
+ const [formData, setFormData] = useState({
+ classroomId: '',
+ startTime: '',
+ endTime: ''
+ });
+ const [reservations, setReservations] = useState([]);
+ const [classrooms, setClassrooms] = useState([]);
+ const [error, setError] = useState('');
+ const [success, setSuccess] = useState('');
+
+ // Fetch classrooms and reservations on mount
+ useEffect(() => {
+ fetchData();
+ }, []);
+
+ const fetchData = async () => {
+ await fetchClassrooms();
+ await fetchReservations();
+ };
+
+ const fetchClassrooms = async () => {
+ try {
+ const response = await fetch('http://localhost:9000/api/classrooms', {
+ headers: {
+ 'Authorization': `Bearer ${localStorage.getItem('token')}`
+ }
+ });
+ const data = await response.json();
+ if (response.ok) {
+ setClassrooms(data);
+ } else {
+ throw new Error(data.error || 'Failed to fetch classrooms');
+ }
+ } catch (err) {
+ setError(err.message);
+ }
+ };
+
+ const fetchReservations = async () => {
+ try {
+ const response = await fetch('http://localhost:9000/api/reservations', {
+ headers: {
+ 'Authorization': `Bearer ${localStorage.getItem('token')}`
+ }
+ });
+ const data = await response.json();
+ if (response.ok) {
+ setReservations(data);
+ } else {
+ throw new Error(data.error || 'Failed to fetch reservations');
+ }
+ } catch (err) {
+ setError(err.message);
+ }
+ };
+
+ // Handle input changes
+ const handleChange = (e) => {
+ setFormData({
+ ...formData,
+ [e.target.name]: e.target.value
+ });
+ };
+
+ // Handle form submission
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setError('');
+ setSuccess('');
+
+ if (!formData.startTime || !formData.endTime) {
+ setError('Please provide both start and end times');
+ return;
+ }
+
+ const payload = {
+ classroomId: parseInt(formData.classroomId),
+ startTime: formData.startTime,
+ endTime: formData.endTime
+ };
+
+ try {
+ const response = await fetch('http://localhost:9000/api/reservations', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': `Bearer ${localStorage.getItem('token')}`
+ },
+ body: JSON.stringify(payload)
+ });
+
+ const data = await response.json();
+
+ if (!response.ok) {
+ throw new Error(data.error || 'Reservation failed');
+ }
+
+ setSuccess('Reservation successful!');
+ setFormData({ classroomId: '', startTime: '', endTime: '' });
+ await fetchReservations();
+ } catch (err) {
+ setError(err.message || 'An error occurred during reservation');
+ }
+ };
+
+ // Handle reservation deletion
+ const handleDelete = async (id) => {
+ const confirmDelete = window.confirm('Are you sure you want to delete this reservation?');
+ if (!confirmDelete) return;
+
+ try {
+ const response = await fetch(`http://localhost:9000/api/reservations/${id}`, {
+ method: 'DELETE',
+ headers: {
+ 'Authorization': `Bearer ${localStorage.getItem('token')}`
+ }
+ });
+
+ const data = await response.json();
+
+ if (!response.ok) {
+ throw new Error(data.error || 'Failed to delete reservation');
+ }
+
+ setSuccess('Reservation deleted successfully!');
+ await fetchReservations();
+ } catch (err) {
+ setError(err.message || 'An error occurred during deletion');
+ }
+ };
+
return (
+
+ - Home
+ - Class Status
+ - Class Queue
+
+
+
-
-
-
E-Block 002
+
+
+
Class Queue
-
Class is reserved from 9:00am to 11:00am
+ {reservations.length > 0 ? (
+
+ {reservations.map((reservation) => (
+ -
+ {reservation.classroom.name}: {new Date(reservation.startTime).toLocaleString()} to {new Date(reservation.endTime).toLocaleString()}
+
+
+ ))}
+
+ ) : (
+
No reservations found.
+ )}
+
-
+
);
}
diff --git a/unispace/src/SignupPage.js b/unispace/src/SignupPage.js
index c401dca..c630a3f 100644
--- a/unispace/src/SignupPage.js
+++ b/unispace/src/SignupPage.js
@@ -1,29 +1,116 @@
-import React from 'react';
-//import { useNavigate } from 'react-router-dom';
-import { Link } from 'react-router-dom';
+import React, { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
import './SignupPage.css';
-import './styles.css'; // Import index.css
+import './styles.css';
import Bubbles from './Bubbles.js';
function SignupPage() {
- //const navigate = useNavigate();
+ const navigate = useNavigate();
+ const [formData, setFormData] = useState({
+ username: '',
+ email: '',
+ name: '',
+ password: '',
+ role: 'STUDENT' // Default role
+ });
+ const [error, setError] = useState('');
+ const [success, setSuccess] = useState('');
+
+ // Handle input changes
+ const handleChange = (e) => {
+ setFormData({
+ ...formData,
+ [e.target.name]: e.target.value
+ });
+ };
+
+ // Handle form submission
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setError('');
+ setSuccess('');
+
+ try {
+ const response = await fetch('http://localhost:9000/api/signup', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify(formData)
+ });
+
+ const data = await response.json();
+
+ if (!response.ok) {
+ throw new Error(data.error || 'Signup failed');
+ }
+
+ // Success: Show message and navigate to login
+ setSuccess('Signup successful! Redirecting to login...');
+ setTimeout(() => {
+ navigate('/');
+ }, 2000); // Redirect after 2 seconds
+ } catch (err) {
+ setError(err.message || 'An error occurred during signup');
+ }
+ };
+
return (
-
-
{/* Use the Bubbles component here */}
+