Skip to content

Commit aa211fb

Browse files
usingbrainusingbrain
authored
Merge pull request #100 from usingbrain/main
pulling
2 parents 674927a + f7639d8 commit aa211fb

11 files changed

Lines changed: 81 additions & 65 deletions

File tree

‎client/src/Assets/solo-check.svg‎

Lines changed: 3 additions & 3 deletions
Loading

‎client/src/Assets/solo-cross.svg‎

Lines changed: 3 additions & 3 deletions
Loading

‎client/src/Components/Calendar/CheckboxListHistory.tsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
2-
import { ReactComponent as CheckBoxChecked } from '../../Assets/chekcbox-checked.svg';
3-
import { ReactComponent as CheckBoxCrossed } from '../../Assets/chekcbox-cross.svg';
2+
import { ReactComponent as CheckIcon } from '../../Assets/solo-check.svg';
3+
import { ReactComponent as CrossIcon } from '../../Assets/solo-cross.svg';
44

55
import { useSessionAttendanceQuery } from '../../generated/graphql';
66
import User from '../../Types/user';
@@ -32,9 +32,17 @@ const CheckboxListHistory: React.FC<Props> = ({ studentList }) => {
3232
(attendee) => attendee?.email === student?.email
3333
)
3434
) {
35-
return <CheckBoxChecked className="w-10 h-10" />;
35+
return (
36+
<div className='flex justify-center items-center w-16 h-16'>
37+
<CheckIcon className='w-7 h-7' />
38+
</div>
39+
);
3640
}
37-
return <CheckBoxCrossed className="w-10 h-10" />;
41+
return (
42+
<div className='flex justify-center items-center w-16 h-16'>
43+
<CrossIcon className='w-7 h-7' />
44+
</div>
45+
);
3846
})}
3947
</div>
4048
);

‎client/src/Components/Calendar/Overview.tsx‎

Lines changed: 31 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,9 @@ import { useCourseOverviewQuery } from '../../generated/graphql';
44
//package for date format
55
import moment from 'moment';
66

7-
const overviewStyle =
8-
'flex flex-col m-auto bg-green w-11/12 md:w-10/12 lg:w-9/12 xl:w-7/12 mt-8 h-1/2 lg:h-3/4 px-2 pb-2';
7+
const overviewStyle = 'flex flex-col w-11/12 mt-4 self-center';
98

10-
const historyStyle =
11-
'flex flex-row flex-wrap justify-start bg-white w-full overflow-scroll h-6/7';
9+
const historyStyle = 'grid grid-cols-6 bg-white w-full h-6/7';
1210

1311
const Overview: React.FC = () => {
1412
const courseId = Number(useParams().courseId);
@@ -26,35 +24,35 @@ const Overview: React.FC = () => {
2624

2725
console.log('history: ', history);
2826
return (
29-
<div className="h-screen">
30-
<div className={overviewStyle}>
31-
<article className='flex flex-col justify-center h-full'>
32-
<p className='m-auto text-xl text-white pb-2 h-8 flex'>Attendance</p>
33-
<section className={historyStyle}>
34-
{!!sessions &&
35-
sessions.map((session) => {
36-
if (session) {
37-
const date = new Date(Number(session.createdAt));
38-
const UTCdate = date.toUTCString();
39-
return (
40-
<div className='h-20 p-2 w-32 text-center border-2 border-black m-1 hover:bg-green-xlight'>
41-
<Link to={`/homepage/classes/${courseId}/${session.id}`}>
42-
<div>
43-
<h5 className='text-lg sm:text-xl'>
44-
{session.attendance}
45-
</h5>
46-
<p className='text-sm sm:text-md'>
47-
{moment(UTCdate).format('L')}
48-
</p>
49-
</div>
50-
</Link>
51-
</div>
52-
);
53-
}
54-
})}
55-
</section>
56-
</article>
57-
</div>
27+
<div className={overviewStyle}>
28+
<article className='flex flex-col justify-center h-full'>
29+
<p className='flex justify-center items-center text-4xl bg-green text-white h-16'>
30+
Sessions Attendance
31+
</p>
32+
<section className={historyStyle}>
33+
{!!sessions &&
34+
sessions.map((session) => {
35+
if (session) {
36+
const date = new Date(Number(session.createdAt));
37+
const UTCdate = date.toUTCString();
38+
return (
39+
<div className='flex items-center justify-center h-32 w-32 text-center border-2 border-white hover:border-green'>
40+
<Link to={`/homepage/classes/${courseId}/${session.id}`}>
41+
<div>
42+
<h5 className='font-bold text-6xl text-green'>
43+
{session.attendance}
44+
</h5>
45+
<p className='text-sm sm:text-md text-black'>
46+
{moment(UTCdate).format('L')}
47+
</p>
48+
</div>
49+
</Link>
50+
</div>
51+
);
52+
}
53+
})}
54+
</section>
55+
</article>
5856
</div>
5957
);
6058
};

‎client/src/Components/Calendar/SessionHistory.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import { useParams } from 'react-router';
55
import { useNavigate } from 'react-router-dom';
66
import StudentsList from '../ClassView/StudentsList';
77

8-
const btnStyle = 'flex bg-green text-white p-4 shadow-lg m-auto my-8';
8+
const btnStyle =
9+
'flex justify-center items-center bg-green text-white text-lg p-4 h-16 w-1/3 shadow-lg mb-8 mx-11 self-end';
910

1011
const SessionHistory: React.FC = () => {
1112
const courseId = Number(useParams().courseId);
@@ -19,12 +20,16 @@ const SessionHistory: React.FC = () => {
1920
}
2021

2122
return (
22-
<div>
23-
<footer className="flex justify-center my-4"></footer>
24-
<StudentsList courseId={courseId} />
23+
<div className='flex flex-col'>
2524
<button className={btnStyle} onClick={handleClick}>
2625
Back to history overview
2726
</button>
27+
<div className='w-5/12 self-start ml-8'>
28+
<h2 className='font-bold text-2xl px-8 mb-4'>
29+
Session ADD SESSION DATE TO REDUX:
30+
</h2>
31+
<StudentsList courseId={courseId} />
32+
</div>
2833
</div>
2934
);
3035
};

‎client/src/Components/Calendar/StudentHistory.tsx‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,13 @@ import { useIndividualAttendanceQuery } from '../../generated/graphql';
33
import { useParams } from 'react-router';
44
import { useNavigate } from 'react-router-dom';
55
import { useSelector, useDispatch } from 'react-redux';
6-
import { ReactComponent as CheckBoxChecked } from '../../Assets/chekcbox-checked.svg';
7-
import { ReactComponent as CheckBoxCrossed } from '../../Assets/chekcbox-cross.svg';
6+
import { ReactComponent as CheckIcon } from '../../Assets/solo-check.svg';
7+
import { ReactComponent as CrossIcon } from '../../Assets/solo-cross.svg';
88
import moment from 'moment';
99
import Student from '../../Types/student';
1010

11-
const btnStyle = 'flex bg-green text-white p-4 shadow-lg m-auto my-8';
11+
const btnStyle =
12+
'flex justify-center items-center bg-green text-white text-lg p-4 h-16 w-1/3 shadow-lg mb-8 mx-11 self-end';
1213

1314
const StudentHistory: React.FC = () => {
1415
const navigate = useNavigate();
@@ -46,25 +47,25 @@ const StudentHistory: React.FC = () => {
4647

4748
if (indivHistory) {
4849
return (
49-
<div>
50-
<h1 className="flex justify-center text-lg md:text-xl">
51-
{name} {lastname}
52-
</h1>
50+
<div className='flex flex-col'>
5351
<button className={btnStyle} onClick={handleClick}>
5452
Back to session overview
5553
</button>
56-
<section className="flex justify-center h-1/4 md:h-1/2 lg:h-5/6 xl:h-screen p-4">
57-
<div className=" flex flex-row flex-wrap justify-start bg-white w-11/12 md:h-2/3 lx:w-9/12 overflow-scroll border-green border-8">
54+
<h1 className='font-bold text-5xl px-16 mb-4'>
55+
{name} {lastname}
56+
</h1>
57+
<section className='flex justify-center h-1/4 md:h-1/2 lg:h-5/6 xl:h-screen p-4'>
58+
<div className=' flex flex-row flex-wrap justify-start bg-white w-11/12 md:h-2/3 lx:w-9/12 border-grey border-2'>
5859
{indivHistory.map((session) => {
5960
const date = new Date(Number(session!.date));
6061
const UTCdate = date.toUTCString();
6162

6263
return (
63-
<div className="flex flex-col justify-center w-26 p-2 md:w-32 items-center border-2 border-black m-1 hover:bg-green-xlight">
64+
<div className='flex flex-col justify-center w-26 h-26 p-2 md:w-32 items-center border-2 border-white'>
6465
{session!.attended ? (
65-
<CheckBoxChecked className="w-10 h-10" />
66+
<CheckIcon className='w-10 h-10' />
6667
) : (
67-
<CheckBoxCrossed className="w-10 h-10" />
68+
<CrossIcon className='w-10 h-10' />
6869
)}
6970
<p>{moment(UTCdate).format('L')}</p>
7071
</div>

‎client/src/Components/ClassView/ClassView.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const headerStyle =
1212
const attendanceStyle =
1313
'flex justify-center bg-black py-4 rounded-sm text-lg w-1/3 text-white mb-4 h-16';
1414
const listHeader =
15-
'flex items-center w-1/2 bg-green p-2 px-6 text-white text-lg rounded-t-sm h-16';
15+
'flex items-center w-1/2 p-2 px-6 border-2 text-black text-lg rounded-t-sm h-16';
1616

1717
const ClassView: React.FC = () => {
1818
const dispatch = useDispatch();

‎client/src/Components/ClassView/StudentElement.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ interface Props {
88
const StudentElement: React.FC<Props> = ({ name, lastname }) => {
99
return (
1010
<div className='flex flex-col justify-center h-16'>
11-
<h3 className='mt-2 text-xl'>
11+
<h3 className='text-xl'>
1212
{lastname} {name}
1313
</h3>
1414
</div>

‎client/src/Components/ClassView/StudentElementHistory.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ const StudentElementHistory: React.FC<Props> = ({
3030
}
3131

3232
return (
33-
<button className="flex place-items-center h-10" onClick={handleClick}>
34-
<h3 className="mx-4">
33+
<button className='flex place-items-center h-16' onClick={handleClick}>
34+
<h3 className='text-xl'>
3535
{lastname} {name}
3636
</h3>
3737
</button>

‎client/src/Components/TeacherHomepage/Instruction.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const check = {
5656

5757
const Instruction = () => {
5858
return (
59-
<div className="h-screen flex flex-col items-center">
59+
<div className="flex flex-col items-center">
6060
<h1 className="text-5xl my-8">Quick start</h1>
6161
<Floop el={create} />
6262
<Floop el={register} />

0 commit comments

Comments
 (0)