Skip to content
This repository was archived by the owner on Jan 14, 2025. It is now read-only.

R1.2.0 #42

Merged
merged 4 commits into from
Aug 22, 2024
Merged

R1.2.0 #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cb1d219
beta1.2.0
sitthadara Aug 19, 2024
4437a60
kkaidow
KKaiow Aug 19, 2024
1732c4a
v1.2.0
sitthadara Aug 22, 2024
f3dafd2
v1.2.0
sitthadara Aug 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 19 additions & 3 deletions src/src/pages/PF/AssignList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,14 +105,14 @@ function AssignList() {
<h5>{ClassInfo['ClassID']} {ClassInfo['ClassName']} {ClassInfo['ClassYear']}</h5>
<h6>Instructor: {ClassInfo['Instructor']}</h6>
</div>
<button type="button" className="btn btn-secondary" onClick={() => navigate("/StudentList")} style={{ marginLeft: 40 + 'em' }}>Student lists</button>
{/* <button type="button" className="btn btn-secondary" onClick={() => navigate("/StudentList")} style={{ marginLeft: 40 + 'em' }}>Student lists</button> */}
</div>
)}

<br></br>
<div className="card" style={{ marginLeft: 10 + 'em', marginRight: 10 + 'em' }}>
<div className="card-header">
<div className="row" style={{marginBottom:"-5px"}}>
{/* <div className="row" style={{marginBottom:"-5px"}}>
<div className="col">
<h5 style={{ display: 'inline-block' }}>Assignments</h5>
<span style={{ margin: '0 10px' }}></span>
Expand All @@ -121,14 +121,30 @@ function AssignList() {
<div className="col-md-1">
<button type="button" onClick={() => navigate("/")} className="btn btn-primary float-end">Back</button>
</div>
</div> */}
<div className="row" style={{marginBottom:"-5px"}}>
<div className="col">
<ul className="nav nav-tabs card-header-tabs">
<li className="nav-item">
<button className="nav-link active">Assignments</button>
</li>
<li className="nav-item">
<button className="nav-link link" onClick={() => navigate("/StudentList")} >Student List</button>
</li>
<button style={{marginLeft: "1.5rem"}} className="btn btn-outline-secondary" type="button" id="button-addon2" onClick={() => navigate("/AssignCreate")} >+ New</button>
</ul>
</div>
<div className="col-md-2">
<button className="btn btn-primary float-end" type="button" style={{marginLeft:"20px"}} onClick={() => navigate("/")}>Back</button>
</div>
</div>
</div>
<div className="card-body" style={{ overflowY: 'scroll' }}>
<div>
{assignmentsData && ((assignmentsData.length !== 0) && (
assignmentsData.map(assign => {
return (
<div key={assign["LID"]} className='card' style={{ marginBottom: '2rem' }} onClick={() => handleRedirect(assign["LID"])}>
<div key={assign["LID"]} className='card' style={{ marginBottom: '0.5rem' }} onClick={() => handleRedirect(assign["LID"])}>
<button style={{ fontSize: '1.2rem', height:'4rem'}} className="fw-bold ">
<div className='row'>
<div className='col-2' style={{textAlign: 'Left'}}>
Expand Down
51 changes: 49 additions & 2 deletions src/src/pages/PF/Home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ function HomePF() {

const [Email,] = useState(Cookies.get('Email'));
const [courses, setCourses] = useState(null);
const [classes, setClasses] = useState(null);
const [expanded, setExpanded] = useState(false);
const [ready, setReady] = useState(null);
const [expandedYear, setExpandedYear] = useState(null);
Expand Down Expand Up @@ -46,9 +47,24 @@ function HomePF() {
}
});
const data = await response.json();
const sortedCourses = Object.fromEntries(Object.entries(data).sort((a, b) => b[0].localeCompare(a[0])));

var sortedCourses = Object.fromEntries(Object.entries(data).sort((a, b) => b[0].localeCompare(a[0])));
setCourses(sortedCourses);
if(Object.keys(sortedCourses).length > 0) setExpandedYear(Object.keys(sortedCourses)[0])

const classResponse = await fetch(`${host}/ST/class/classes`, {
method: "GET",
credentials: "include",
headers: {
"Content-type": "application/json; charset=UTF-8",
"Access-Control-Allow-Origin": "*",
"X-CSRF-TOKEN": Cookies.get("csrf_token")
}
});
const classData = await classResponse.json();
sortedCourses = Object.fromEntries(Object.entries(classData).sort((a, b) => b[0].localeCompare(a[0])));
setClasses(sortedCourses);

} catch (error) {
console.error('Error fetching class data:', error);
}
Expand Down Expand Up @@ -205,7 +221,38 @@ function HomePF() {
</main>
) : (
"")}

{(classes && Object.keys(classes).length > 0) && ready ? (
<div>
<br></br>
{/* วนลูปเพื่อแสดง container แยกตามปีการศึกษา */}
{Object.entries(classes).map(([year, classes], i) => (
<div key={year} className="container-lg mb-3 bg-light" style={{ padding: '10px' }}>
<h5 className='unselectable' onClick={() => toggleYear(year)} style={{ cursor: 'pointer' }}>
{expandedYear === year ? <ChevronDown /> : <ChevronRight />} {year} (Student view)
</h5>

{expandedYear === year && (
<div className="row row-cols-1 row-cols-md-5 g-2">
{/* วนลูปเพื่อแสดงข้อมูลคอร์สในแต่ละปีการศึกษา */}
{classes.map((course) => (
<div className="card" style={{width: '200px', marginLeft: "10px", marginRight: "10px"}} key={course.ClassID}>
<img className="card-img-top w-100 d-block" src={course.Thumbnail ? `${host}/Thumbnail/` + course.Thumbnail : "https://cdn-icons-png.flaticon.com/512/3643/3643327.png"} style={{ width: '190px', height: '190px', paddingTop: '5px', borderRadius: '5px'}} alt="..."/>
<div className="card-body">
<h4 className="card-title">{course.ClassName}</h4>
<p className="card-text">ID: {course.ClassID}</p>
<button className="btn btn-primary" type="button" onClick={() => {sessionStorage.setItem("classId", course.ID); sessionStorage.setItem("Email", Email); navigate("/Class");}}>
View course
</button>
</div>
</div>
))}
</div>
)}
</div>
))}
</div>
) : (null)}
</div>
)
}
Expand Down
117 changes: 113 additions & 4 deletions src/src/pages/PF/StudentList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
import Navbar from '../../components/Navbar';
import { useNavigate } from 'react-router-dom';
import Cookies from 'js-cookie';
// import {PencilSquare} from 'react-bootstrap-icons'

const host = `${process.env.REACT_APP_HOST}`

Expand All @@ -16,7 +17,9 @@ function StudentList() {

const [ClassInfo, setClassInfo] = useState({});


const [showModal, setShowModal] = useState(false);
const [isEdit, setIsEdit] = useState(false);

// const [Email,] = useState(sessionStorage.getItem("Email"));
const [classId,] = useState(sessionStorage.getItem("classId"));

Expand Down Expand Up @@ -125,6 +128,32 @@ function StudentList() {
}
}

const handleEditStudent = async (toEdit) => {
setShowModal(true);
setIsEdit(true);
}

const handleAddStudent = async () => {
setShowModal(true);
setIsEdit(false)
}

const UpdateStudent = async () => {

}

const RemoveStudent = async () => {

}

const AddStudent = async () => {

}

const handleCloseModal = () => {
setShowModal(false);
};

return (
<div>
<Navbar />
Expand All @@ -137,23 +166,39 @@ function StudentList() {
<h5>{ClassInfo['ClassID']} {ClassInfo['ClassName']} {ClassInfo['ClassYear']}</h5>
<h6>Instructor: {ClassInfo['Instructor']}</h6>
</div>
<button type="button" className="btn btn-secondary" style={{ marginLeft: '40em' }} onClick={handleExport}>Export</button>
</div>
<br />
<div className="card" style={{ marginLeft: '10em', marginRight: '10em', maxHeight: "70vh"}}>
<div className="card-header">
<div className="row" style={{marginBottom:"-5px"}}>
{/* <div className="row" style={{marginBottom:"-5px"}}>
<div className='col'>
<h5>Student Name List</h5>
</div>
<div className='col-md-2'>
<button type="button" className="btn btn-primary float-end" onClick={() => navigate("/AssignList")}>Back</button>
</div>
</div> */}
<div className="row" style={{marginBottom:"-5px"}}>
<div className="col">
<ul className="nav nav-tabs card-header-tabs">
<li className="nav-item">
<button className="nav-link link" onClick={() => navigate("/AssignList")}>Assignments</button>
</li>
<li className="nav-item">
<button className="nav-link active">Student List</button>
</li>
{/* <button style={{marginLeft: "1.5rem"}} className="btn btn-outline-success" type="button" id="button-addon2" onClick={() => handleAddStudent()} >+ Add</button> */}
</ul>
</div>
<div className="col-md-2">
<button className="btn btn-primary float-end" type="button" style={{marginLeft:"20px"}} onClick={() => navigate("/")}>Back</button>
<button className="btn btn-secondary float-end" type="button" style={{ marginLeft: '20px' }} onClick={handleExport}>Export</button>
</div>
</div>
</div>
<div className="card-body" style={{ overflowY: 'scroll' }}>
{/* Search input */}
<form className="d-flex">
<form className="d-flex" style={{marginBottom: "8px"}}>
<input className="form-control me-2" type="search" placeholder="Search ID or Name" aria-label="Search" onChange={handleSearch} />
</form>
<b>Section: </b>
Expand Down Expand Up @@ -184,6 +229,7 @@ function StudentList() {
<th scope="col" className="col-1 text-center">Section</th>
<th scope="col" className="col-1 text-center">Group</th>
<th scope="col" className="col-1 text-center">Score</th>
{/* <th scope="col" className="col-1 text-center">Edit</th> */}
</tr>
</thead>
<tbody>
Expand All @@ -200,6 +246,7 @@ function StudentList() {
<td className='text-center'>{element["Section"]}</td>
<td className='text-center'>{element["Group"]}</td>
<td className='text-center'>{element["Score"]}/{element["MaxScore"]}</td>
{/* <td className='text-center'><button type="button" className="btn btn-warning" onClick={() => {handleEditStudent(element)}}><PencilSquare/></button></td> */}
</tr>
))
) : (
Expand All @@ -216,6 +263,68 @@ function StudentList() {
<br />
</div>
</div>
<div className={`modal fade ${showModal ? 'show' : ''}`} tabIndex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" style={{ display: showModal ? 'block' : 'none' }}>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel"> {isEdit ? "Edit" : "Add"} </h5>
<button type="button" className="btn-close" onClick={handleCloseModal} aria-label="Close"></button>
</div>
<div className="modal-body">
{isEdit ? (<form>
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="text" class="form-control" id="nameEdit" placeholder="Enter name"/>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Section</label>
<input type="text" class="form-control" id="sectionEdit" placeholder="Enter section"/>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Group</label>
<input type="text" class="form-control" id="groupEdit" placeholder="Enter group"/>
</div>
</form>
) : (<form>
<div class="form-group">
<label for="exampleInputEmail1">Stundent ID</label>
<input type="text" class="form-control" id="studentIdAdd" placeholder="Enter student"/>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="text" class="form-control" id="nameAdd" placeholder="Enter name"/>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Section</label>
<input type="text" class="form-control" id="sectionAdd" placeholder="Enter section"/>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Group</label>
<input type="text" class="form-control" id="groupAdd" placeholder="Enter group"/>
</div>
</form>
)}
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" style={{justifyContent: "flex-start"}} onClick={handleCloseModal}>
Cancel
</button>
{isEdit ? (
<button type="button" className="btn btn-secondary" style={{justifyContent: "flex-start"}} onClick={handleCloseModal}>
Remove
</button>
):(
""
)}
<button type="button" className="btn btn-secondary" style={{justifyContent: "flex-start"}} onClick={handleCloseModal}>
Save
</button>


</div>
</div>
</div>
</div>
</div>
);
}
Expand Down
13 changes: 7 additions & 6 deletions src/src/pages/ST/Home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ function HomeST() {
const [userData, setUserData] = useState(null);
const [courses, setCourses] = useState(null);
const [classes, setClasses] = useState(null);
const [expandedYear, setExpandedYear] = useState(null);
const [expandedYear, setExpandedYear] = useState();
const [ready, setReady] = useState(null);

const [Email,] = useState(Cookies.get('Email'));
Expand Down Expand Up @@ -50,6 +50,7 @@ function HomeST() {
const classData = await classResponse.json();
const sortedCourses = Object.fromEntries(Object.entries(classData).sort((a, b) => b[0].localeCompare(a[0])));
setClasses(sortedCourses);
if(Object.keys(sortedCourses).length > 0) setExpandedYear(Object.keys(sortedCourses)[0])
}
} catch (error) {
console.error('Error fetching data:', error);
Expand All @@ -69,7 +70,6 @@ function HomeST() {
});
const data = await response.json();
const sortedCourses = Object.fromEntries(Object.entries(data).sort((a, b) => b[0].localeCompare(a[0])));

setCourses(sortedCourses);
} catch (error) {
console.error('Error fetching class data:', error);
Expand All @@ -96,7 +96,8 @@ function HomeST() {
<Navbar userData={userData}/>
<br />
</div>
{courses && ready ? (
{(courses && ready) ? (
Object.keys(courses).length !== 0 ? (
<main>
<div>
<br></br>
Expand Down Expand Up @@ -133,13 +134,13 @@ function HomeST() {
</div>
</div>
</main>
) : (null)}
) : (null)) : (null)}

{(classes && Object.keys(classes).length > 0) && ready ? (
<div>
<br></br>
{/* วนลูปเพื่อแสดง container แยกตามปีการศึกษา */}
{Object.entries(classes).map(([year, classes]) => (
{Object.entries(classes).map(([year, classes], i) => (
<div key={year} className="container-lg mb-3 bg-light" style={{ padding: '10px' }}>
<h5 className='unselectable' onClick={() => toggleYear(year)} style={{ cursor: 'pointer' }}>
{expandedYear === year ? <ChevronDown /> : <ChevronRight />} {year}
Expand All @@ -148,7 +149,7 @@ function HomeST() {
{expandedYear === year && (
<div className="row row-cols-1 row-cols-md-5 g-2">
{/* วนลูปเพื่อแสดงข้อมูลคอร์สในแต่ละปีการศึกษา */}
{classes.map(course => (
{classes.map((course) => (
<div className="card" style={{width: '200px', marginLeft: "10px", marginRight: "10px"}} key={course.ClassID}>
<img className="card-img-top w-100 d-block" src={course.Thumbnail ? `${host}/Thumbnail/` + course.Thumbnail : "https://cdn-icons-png.flaticon.com/512/3643/3643327.png"} style={{ width: '190px', height: '190px', paddingTop: '5px', borderRadius: '5px'}} alt="..."/>
<div className="card-body">
Expand Down
3 changes: 2 additions & 1 deletion src/src/test/test-callback.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@ function Callback() {
"Access-Control-Allow-Origin": "*"
},
body: JSON.stringify({
'email': Email
'email': Email,
'role': Role ? 2 : 1
})
})
const Data = await response.json()
Expand Down
Loading