OneCompiler

Front End React JS Our Project

151

Dashboard CSS:

h3{
text-align: center;
color:#51B6E3;

}

.Profile_details{
width: 500px;
height: 200px;
margin-top: 180px;
display: flex;
flex-direction: column;
justify-content: center;
align-items:center;
border: 2px solid black;
background-color: lightblue;
padding: 2px;
display: inline-block;
border-radius: 5px;

}
.maincontainer{
width:100%;
display:flex;
flex-direction: column;
border:2px skyblue;

}

.icont {

height: 100vh;
width: 200vh;
display: flex;
justify-content: space-between;


background-size: cover;
background-position: center;
align-items: center;

}
.mainenrollment{
background-color: white;
font-family: sans-serif;
width: 500px;
margin-top: 100px;

}
.DashboardPage{
background-image: url("../LoginComponents/Image/student.png");
background-size: cover;
width: 100%;
}

Dashboard JS:

// import './Dashboard.css'
// import axios from "axios";
// import { useEffect, useState } from "react";

// const Dashboard = () => {
// const [courses, setCourses] = useState([]);
// const [showcourses,setcourses]=useState(false);

// const ShowCoureses=()=>{
// if(showcourses){
// setcourses(false)
// }else{
// setcourses(true)
// }
// }

// useEffect(() => {
// const subscribedcourses = async () => {
// const token=56
// const id=15

// const res = await axios.get(http://localhost:8081/api/users/${id},{

// auth:{
// username: 'sriram',
// password: 'sree'
// }

// }

// );

// console.log(res);

// const data = res.data;
// console.log(data);
// setCourses(data); // Update state with fetched courses

// };
// subscribedcourses();
// }, []); // Add dependency array to ensure useEffect runs only once

// return (
// <>
// <div className="DashboardPage">
// <div className="maincontainer">
// <div className="header">
// <h3>Welcome to OnlineEducation</h3>
// </div>

// <div className='Profile_details'>
// <h4> Name: {courses.username}</h4>
// <p>Email id: {courses.email}</p>
// <p>Total coureses Enrolled:{courses.enrollments?.length}</p>
// <p>Role: {courses.role}</p>

// </div>

// {showcourses?<div className='mainenrollment'>
// <p>{courses.enrollments?.enrollmentDate}</p>

// </div>:null}
// <div className="courses">
// <button className='enrolledbutton' onClick={ShowCoureses}>Enrolled Courses</button>
// </div>
// </div>

// </div>
// </>
// );
// };

// export default Dashboard;

import { Link } from 'react-router-dom';
import './Dashboard.css';
import axios from 'axios';
import { useEffect, useState } from 'react';

import { useNavigate } from 'react-router-dom';
import Videos from './video';

const Dashboard = ({id,userData,setUserData,showCourses,setShowCourses,videoList,setVideoList}) => {

const navigate=useNavigate()
console.log(videoList)

const toggleCourses = () => {
    setShowCourses(!showCourses);
};

useEffect(() => {
    const fetchUserData = async () => {
        
        // const Id=Number(id)
        // console.log(`http://localhost:8081/api/users/${Id}`)  // User ID
        try {
            const res = await axios.get(`http://localhost:8081/api/users/${id}`, {
                auth: {
                    username: 'sriram',
                    password: 'sree',
                },
            });
            setUserData(res.data); // Update state with user data
            console.log(res.data); // Debugging log
        } catch (error) {
            console.error('Error fetching user data:', error);
        }
    };

    fetchUserData();
}, []);

if (!userData) {
    return <div>Loading...</div>; // Show a loading state while fetching data
}

return (
         
        <div className="DashboardPage">
            <h2 style={{color:"white"}}>Welocme to Online Education</h2>
        <div className="maincontainer">
        <div className='icont'>    
            

            <div className="Profile_details">
                <h4>Name: {userData.username}</h4>
                <p>Email ID: {userData.email}</p>
                <p>Total Courses Enrolled: {userData.enrollments?.length || 0}</p>
                <p>Role: {userData.role}</p>
            </div>

            {showCourses && (
                <div style={{backGound:"white"}} className="mainenrollment">
                    <button onClick={()=>navigate('/')}>Logout</button>
                    <hr></hr>
                    {    userData.enrollments?.length > 0 ? (
                       
                        userData.enrollments.map((enrollment, index) => (

                            <>
                            <div key={index} className="enrollment">
                                <p>Course title: {enrollment?.course.title} </p>
                                <p>Course Content: <Link to={`/Video/${enrollment?.course.description}`}> {enrollment?.course.description}</Link></p>
                                <p>Enrollment Date: {enrollment.enrollmentDate}</p>
                                <p>Status:{enrollment.status}</p>
                                <p>Progress:  {enrollment.progress}</p>
                            </div>
                            <hr></hr></>
                           
                        ))
                    ) : (
                        <p>No enrolled courses found.</p>
                    )}
                </div>
            )}

            <div className="courses">
                <button className="enrolledbutton" onClick={toggleCourses}>
                    {showCourses ? 'Hide Enrolled Courses' : 'Show Enrolled Courses'}
                </button>
            </div>

            <div className='uploaded_videos'>
                
            </div>
        </div>
        </div>
    </div>
  
   
    
);

};

export default Dashboard;

Login CSS:

.login-container {
max-width: 650px;
width: 60vh;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 25px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: white;

}

h2 {
text-align: center;
}

input {
width: 90%;
padding: 20px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
width: 100%;
padding: 10px;
background-color:#2973B2;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #45a049;
}

.link-button {
background: none;
border: none;
color:#2973B2;
text-decoration: underline;
cursor: pointer;
}

.link-button:hover {
color: #388e3c;
}

.error {
color: red;
text-align: center;
}
.header{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

}

.sheader {
align-items: center;
}

.login-page {

height: 100vh;
width: 200vh;
display: flex;
justify-content: center;
background-image: url("../LoginComponents/Image/myimage.jpg");
background-size: cover;
background-position: center;

}

Login JS:

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios'; // Import axios
import './Login.css';

function Login({ id, setid }) {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [msg, setmsg] = useState('');
const navigate = useNavigate();

const handleLogin = async () => {
try {
// Make API call with axios
const response = await axios.post('http://localhost:8081/api/users/login', {
username,
password,
});
const Data = response.data.split(" ");
console.log(Data)

  if (Data[2] === "INSTRUCTOR") {
    setid(Number(Data[3]))

    navigate('/Teacher')

  }
  else {
    setid(Data[3])
    navigate('/Dashboard')
  }



  // Extract role and ID from the response

} catch (error) {
  console.error("Error during login:", error);
  setmsg('Login failed. Please try again.');
}

};

return (
<>
<div className='header'>
<div>
<h1>Online Education</h1>

    <p className='sheader'>
       Enjoy the Learning
    </p>

    
  </div>
  </div>
  <div className='login-page'>

  <div className="login-container">
    <h2>Login</h2>
    <p>{msg}</p>
    <div>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
    </div>
    <div>
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
    </div>
    <button onClick={handleLogin}>Login</button>
    <p>
      Don't have an account?{' '}
      <button onClick={() => navigate('/Register')} className="link-button">
        Register
      </button>
    </p>
    </div>
    
  </div></>

);
}

export default Login;

Register CSS:

.RegisterPage{
max-width: 600px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.namefield, select {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
width: 100%;
padding: 10px;
background-color: #4caf50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #45a049;
}

header {
background-color: #4caf50;
color: white;
padding: 10px;
text-align: center;
}

footer {
background-color: #4caf50;
color: white;
padding: 10px;
text-align: center;
margin-top: auto;
}

Register JS:

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import './Register.css';

function Register(){
const [username,setUsername]=useState("")
const [password,setPassword]=useState("")
const [email,setEmail]=useState("")
const [role,setRole]=useState("")
const [regmsg,setmsg]=useState('')
console.log(username)
console.log(email)
console.log(password)
console.log(role)

const navigate=useNavigate()

const handleRegister=async()=>{

try{
  const res=await axios.post('http://localhost:8081/api/users/register',{
   username:username,password:password,role:role,email:email
    
  })
  const data=await res.data
  setmsg('Registration Successful')
  setTimeout(()=>{
    navigate('/')

  },2000)
 
}catch(e){
  setmsg("please provide valid credentials")
  console.log(e)
}

}

return(
<>
<div className='RegisterPage'>
<div className='namefield'>
<input onChange={(e)=>{setUsername(e.target.value)}} type='text' placeholder='enter name...'></input>
</div>
<div className='emailfield'>
<input onChange={(e)=>{setEmail(e.target.value)}}type='text' placeholder='enter email...'></input>
</div>
<div className='passwordfield'>
<input onChange={(e)=>{setPassword(e.target.value)}} type='text' placeholder='enter password...'></input>
</div>
<div className='select' onChange={(e)=>setRole(e.target.value)}>
<select>
<option>select</option>
<option value='STUDENT'>STUDENT</option>
<option value='INSTRUCTOR'> INSTRUCTOR</option>

  </select>
  <div className='submit'>
  <button onClick={handleRegister}>Register</button>
</div>

 <div>
  <p>{regmsg}</p>
 </div>

</div>
</div>


</>

)
}

export default Register;

Teacher JS:

// import React, { useState } from 'react';
// import { useEffect } from 'react';
// import axios from 'axios';
// import { useNavigate } from 'react-router-dom';

// const Teacher = ({ userData, setUserData, showCourses, setShowCourses, videoList, setVideoList, id, setid }) => {

// const navigate = useNavigate()
// console.log(videoList)

// useEffect(() => {
// const fetchUserData = async () => {
// const Id = Number(id)
// console.log(http://localhost:8081/api/users/${Id})

// try {
// const res = await axios.get(http://localhost:8081/api/users/${Id}, {
// auth: {
// username: 'sriram',
// password: 'sree',
// },
// });
// setUserData(res.data); // Update state with user data
// console.log(res.data); // Debugging log
// } catch (error) {
// console.error('Error fetching user data:', error);
// }
// };
// console.log(id);

// fetchUserData();
// }, []);

// return (

// <div className="DashboardPage">
// <div className="maincontainer">
// <div className="header">
// <h3>Welcome to Online Education</h3>
// </div>

// {userData?.coursesTeaching?.length > 0 && (
// <div className="mainenrollment">
// <hr />
// <div className="card" style={{ width: "18rem" }}>
// <img className="card-img-top" src="..." alt="Card image cap" />
// <div className="card-body">
// <h5 >{userData.username}</h5>
// <p className="card-text">{userData.email}</p>
// <p>{userData.coursesTeaching[0].title}</p>
// <p>{userData.coursesTeaching[0].description}</p>
// </div>
// </div>

// <table className="styled-table">
// <thead >
// <tr>
// <th >Students</th>
// <th >Student Email</th>
// <th >Enrolled Date</th>
// <th >Progress</th>
// </tr>
// </thead>
// <tbody>
// {userData.coursesTeaching?.map((course, index) => {
// return (
// <tr key={index}>
// {course?.enrollments?.map((enrollment) => (
// <tr key={enrollment.id}>
// <td>{enrollment?.student?.username}</td>
// <td>{enrollment?.student?.email}</td>
// <td>{enrollment?.enrollmentDate}</td>
// <td>{enrollment?.progress}</td>
// </tr>
// ))}
// </tr>
// );
// })}
// </tbody>
// </table>
// </div>
// )}

// <div className='uploaded_videos'>

// </div>
// </div>

// </div>

// );
// };

// export default Teacher;

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useNavigate } from 'react-router-dom';

const Teacher = ({ userData, setUserData, showCourses, setShowCourses, videoList, setVideoList, id, setid }) => {
const navigate = useNavigate();
console.log(videoList);

useEffect(() => {
const fetchUserData = async () => {
const Id = Number(id);
console.log(http://localhost:8081/api/users/${Id});

  try {
    const res = await axios.get(`http://localhost:8081/api/users/${Id}`, {
      auth: {
        username: 'sriram',
        password: 'sree',
      },
    });
    setUserData(res.data); // Update state with user data
    console.log(res.data); // Debugging log
  } catch (error) {
    console.error('Error fetching user data:', error);
  }
};
console.log(id);

fetchUserData();

}, []);

return (
<div className="DashboardPage">
<div className="maincontainer">
<div className="header">
<h3>Welcome to Online Education</h3>
</div>

    {userData?.coursesTeaching?.length > 0 && (
      <div className="mainenrollment">
        <hr />
        <div className="card" style={{ width: '18rem' }}>
          <img className="card-img-top" src="..." alt="Card image cap" />
          <div className="card-body">
            <h5>{userData.username}</h5>
            <p className="card-text">{userData.email}</p>
            <p>{userData.coursesTeaching[0].title}</p>
            <p>{userData.coursesTeaching[0].description}</p>
          </div>
        </div>

        <div style={{ marginTop: '20px' }}>
          {userData.coursesTeaching?.map((course, index) => (
            <div key={index} style={{ marginBottom: '20px', padding: '10px', border: '1px solid #ddd', borderRadius: '5px' }}>
              <h4>{course.title}</h4>
              <p>{course.description}</p>

              {course?.enrollments?.map((enrollment) => (
                <div key={enrollment.id} style={{ marginBottom: '15px', padding: '10px', backgroundColor: '#f9f9f9', borderRadius: '5px' }}>
                  <div style={{ marginBottom: '8px' }}>
                    <strong>Student:</strong> {enrollment?.student?.username}
                  </div>
                  <div style={{ marginBottom: '8px' }}>
                    <strong>Email:</strong> {enrollment?.student?.email}
                  </div>
                  <div style={{ marginBottom: '8px' }}>
                    <strong>Enrolled Date:</strong> {enrollment?.enrollmentDate}
                  </div>
                  <div>
                    <strong>Progress:</strong> {enrollment?.progress}
                  </div>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    )}

    <div className="uploaded_videos"></div>
  </div>
</div>

);
};

export default Teacher;

Video JS:

import video1 from './videos/Charged Electroscope Animation.mp4'
import video2 from './videos/Electical Charge.mp4'

export const Videos=[{name:"Charged_Electroscope_Animation",video:video1},
{name:"Electrical_Charge",video:video2}

]

APP CSS:

/* Basic table styling /
.styled-table {
width: 250px;
border-collapse: collapse; / Ensures borders don't double up */
margin: 25px 0;
font-size: 18px;
text-align: left;
}

.styled-table th,
.styled-table td {
padding: 12px 15px;
border: 1px solid #ddd;
/* Light gray border */
}

.styled-table th {
background-color: #4CAF50; /* Green background for header */
color: white;
text-transform: uppercase;
}

.styled-table tr:nth-child(even) {
background-color: #f2f2f2; /* Alternating row colors */
}

.styled-table tr:hover {
background-color: #ddd; /* Highlight row on hover */
}

.styled-table tbody tr:nth-child(odd) {
background-color: #fff; /* White background for odd rows */
}

.styled-table td {
text-align: center;
}

.styled-table th, .styled-table td {
font-family: Arial, sans-serif;
}

.styled-table td:first-child {
text-align: left; /* Align first column to the left */
}