Skip to content

Commit 36b8725

Browse files
OGALEXIOGALEXI
authored
Merge pull request #79 from usingbrain/main
pull in changes
2 parents c940725 + 51c6ad3 commit 36b8725

12 files changed

Lines changed: 164 additions & 33 deletions

File tree

‎client/src/App.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import AddForm from './Components/TeacherDashboard/AddForm';
1515
import QrView from './Components/QrView/QrView';
1616
import Overview from './Components/Calendar/Overview';
1717
import SessionHistory from './Components/Calendar/SessionHistory';
18+
import StudentHistory from './Components/Calendar/StudentHistory';
1819

1920
const client = createClient({
2021
url: 'http://localhost:4000/graphql',
@@ -45,6 +46,10 @@ function App() {
4546
path="/homepage/classes/:courseId/:sessionId"
4647
element={<SessionHistory />}
4748
></Route>
49+
<Route
50+
path="/homepage/classes/:courseId/student/:studentId"
51+
element={<StudentHistory />}
52+
></Route>
4853
</Route>
4954
</Route>
5055
<Route>

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

Lines changed: 71 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,77 @@
11
import React from 'react';
2+
import { useIndividualAttendanceQuery } from '../../generated/graphql';
3+
import { useParams } from 'react-router';
4+
import { ReactComponent as CheckBoxChecked } from '../../Assets/chekcbox-checked.svg';
5+
import { ReactComponent as CheckBoxCrossed } from '../../Assets/chekcbox-cross.svg';
6+
import moment from 'moment';
27

38
const StudentHistory: React.FC = () => {
4-
return <div></div>;
9+
const courseId = Number(useParams().courseId);
10+
const studentId = Number(useParams().studentId);
11+
const [{ fetching, data, error }] = useIndividualAttendanceQuery({
12+
variables: { courseId, studentId },
13+
});
14+
15+
if (fetching) {
16+
} // TODO handle fetching
17+
if (error) {
18+
} // TODO handle error
19+
20+
const indivHistory = data?.getIndividualAttendance?.data; // returns {attended, date}
21+
22+
if (indivHistory) {
23+
return (
24+
<div className=" flex flex-row flex-wrap w-5/6 justify-start ">
25+
{indivHistory.map((session) => {
26+
const date = new Date(Number(session!.date));
27+
const UTCdate = date.toUTCString();
28+
29+
return (
30+
<div className="flex flex-col justify-center p-4 items-center">
31+
{session!.attended ? (
32+
<CheckBoxChecked className="w-10 h-10" />
33+
) : (
34+
<CheckBoxCrossed className="w-10 h-10" />
35+
)}
36+
<p>{moment(UTCdate).format('L')}</p>
37+
</div>
38+
);
39+
})}
40+
</div>
41+
);
42+
}
43+
return <p>This student has no history of attendance</p>;
544
};
645

746
export default StudentHistory;
47+
48+
// return (
49+
// <div>
50+
// {!!studentsAttended &&
51+
// studentList?.map((student) => {
52+
// if (
53+
// studentsAttended.some(
54+
// (attendee) => attendee?.email === student?.email
55+
// )
56+
// ) {
57+
// return <CheckBoxChecked className="w-10 h-10" />;
58+
// }
59+
// return <CheckBoxCrossed className="w-10 h-10" />;
60+
// })}
61+
// </div>
62+
// );
63+
64+
// if (session) {
65+
// const date = new Date(Number(session.createdAt));
66+
// const UTCdate = date.toUTCString();
67+
// return (
68+
// <div className="w-26 p-2 md:w-32 text-center border-2 border-black m-1 hover:bg-green-xlight">
69+
// <Link to={`/homepage/classes/${courseId}/${session.id}`}>
70+
// <div>
71+
// <h5 className="text-lg sm:text-xl">{session.attendance}</h5>
72+
// <p className="text-sm sm:text-md">{moment(UTCdate).format('L')}</p>
73+
// </div>
74+
// </Link>
75+
// </div>
76+
// );
77+
// }

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,7 @@ const headerStyle =
1212
'bg-black text-white flex flex-row justify-between items-center content-center p-8 h-20 mb-4 text-3xl';
1313
const attendanceStyle =
1414
'flex justify-center bg-black py-4 rounded-sm text-lg w-1/3 text-white mb-4 h-16';
15-
const listHeader =
16-
'w-1/2 bg-green p-2 text-white text-lg rounded-t-sm h-16';
15+
const listHeader = 'w-1/2 bg-green p-2 text-white text-lg rounded-t-sm h-16';
1716

1817
const ClassView: React.FC = () => {
1918
const dispatch = useDispatch();
@@ -45,8 +44,10 @@ const ClassView: React.FC = () => {
4544
<article className="flex flex-col px-10">
4645
<div className="flex flex-row justify-around w-full">
4746
<div className={listHeader}>
48-
Students{' '}
49-
{history && `assigned to this course: ${students.length}`}
47+
<p>
48+
Students{' '}
49+
{history && `assigned to this course: ${students.length}`}
50+
</p>
5051
</div>
5152
<Link to={link} className={attendanceStyle}>
5253
<h3

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
import { useNavigate } from 'react-router';
3+
4+
interface Props {
5+
courseId: number;
6+
studentId: number;
7+
name: string;
8+
lastname: string;
9+
}
10+
11+
const StudentElementHistory: React.FC<Props> = ({
12+
name,
13+
lastname,
14+
courseId,
15+
studentId,
16+
}) => {
17+
const navigate = useNavigate();
18+
19+
return (
20+
<div
21+
className="flex justify-center place-items-center h-10"
22+
onClick={() =>
23+
navigate(`/homepage/classes/${courseId}/student/${studentId}`)
24+
}
25+
>
26+
<h3>{lastname}</h3>
27+
<h3>{name}</h3>
28+
</div>
29+
);
30+
};
31+
32+
export default StudentElementHistory;

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

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Session from '../../Types/session';
99
import socketIOClient from 'socket.io-client';
1010
import CheckboxListSession from './CheckboxListSession';
1111
import CheckboxListHistory from '../Calendar/CheckboxListHistory';
12+
import StudentElementHistory from './StudentElementHistory';
1213
const ENDPOINT = 'http://localhost:4000';
1314

1415
const listStyle = 'flex flex-col justify-start items-start shadow-bottom';
@@ -57,15 +58,27 @@ const StudentsList: React.FC<{ courseId: number }> = ({ courseId }) => {
5758
return (
5859
<div className={listStyle}>
5960
{students?.length ? (
60-
<div className='flex flex-row w-full justify-between'>
61+
<div className="flex flex-row w-full justify-between">
6162
<div className="flex flex-col">
6263
{students.map((student) => {
6364
return (
64-
<StudentElement
65-
key={student!.email}
66-
name={student!.name}
67-
lastname={student!.lastname}
68-
/>
65+
<div>
66+
{!history ? (
67+
<StudentElement
68+
key={student!.email}
69+
name={student!.name}
70+
lastname={student!.lastname}
71+
/>
72+
) : (
73+
<StudentElementHistory
74+
key={student!.email}
75+
name={student!.name}
76+
lastname={student!.lastname}
77+
studentId={student!.id}
78+
courseId={courseId}
79+
/>
80+
)}
81+
</div>
6982
);
7083
})}
7184
</div>

‎client/src/Components/TeacherDashboard/AddForm.tsx‎

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import Course from '../../Types/course';
99
import Lottie from 'react-lottie';
1010
import animationData from '../../Assets/addclass2.json';
1111

12-
const popUpStyle = "bg-green-light w-1/2 lg:w-2/3 h-1/2 mt-32 shadow-2xl text-white p-4";
13-
const lottieStyle = "invisible md:visible w-0 h-0 md:w-1/2 md:h-1/2 m-auto mb-16";
12+
const popUpStyle = 'w-full h-1/2 text-white pb-8';
13+
const lottieStyle = 'invisible md:visible w-0 h-0 md:w-4/12 md:h-auto';
1414

1515
const AddForm: React.FC = () => {
1616
const [title, setTitle] = useState('');
@@ -27,7 +27,7 @@ const AddForm: React.FC = () => {
2727
loop: true,
2828
autoplay: true,
2929
animationData: animationData,
30-
rendererSettings: {}
30+
rendererSettings: {},
3131
};
3232

3333
useEffect(() => {
@@ -53,36 +53,41 @@ const AddForm: React.FC = () => {
5353
dispatch(setForm(open));
5454
}
5555
return (
56-
<div className="w-full h-screen flex justify-center flex-row">
56+
<div className='h-full w-1/2 flex justify-center flex-row border-4 mx-auto mt-16'>
5757
<section className={popUpStyle}>
58-
<section className="flex flex-row justify-between">
59-
<h1 className="md:text-2xl text-md sm:text-lg">Add new class.</h1>
60-
<Link to="/homepage" className="flex mb-4">
58+
<section className='flex flex-row justify-between items-center bg-black p-8 h-20 mb-4 text-3xl'>
59+
<h1 className='font-bold md:text-3xl text-xl'>Add new class.</h1>
60+
<Link to='/homepage'>
6161
<button
6262
onClick={() => {
6363
dispatch(setForm(open));
6464
}}
6565
>
66-
<CloseBtn className="w-10 h-10" />
66+
<CloseBtn className='w-10 h-10' />
6767
</button>
6868
</Link>
6969
</section>
70-
<article className="md:h-3/4 w-full justify-center p-0 h-0">
70+
<article className='flex flex-col md:h-3/4 w-full justify-center items-center p-0 h-0'>
7171
<div className={lottieStyle}>
72-
<Lottie options={defaultOptions}
73-
height={200}
74-
width={'100%'}
75-
/>
72+
<Lottie options={defaultOptions} height={'100%'} width={'100%'} />
7673
</div>
77-
<form onSubmit={(e) => handleSubmit(e)} className="flex flex-row items-center w-full shadow-xl">
74+
<form
75+
onSubmit={(e) => handleSubmit(e)}
76+
className='flex flex-row items-center w-7/12 border-4 border-green'
77+
>
7878
<input
79-
className="h-14 w-full sm:w-full text-black rounded-l-sm"
80-
type="text"
79+
className='h-14 w-full sm:w-full text-2xl text-black px-6 focus:outline-none'
80+
type='text'
8181
value={title}
82-
placeholder="Input class title."
82+
placeholder='Input class title.'
8383
onChange={(e) => setTitle(e.target.value)}
8484
/>
85-
<button type="submit" className="bg-green text-white text-lg lg:text-2xl sm:text-xl w-4/12 lg:w-2/12 h-14 rounded-r-sm">Add</button>
85+
<button
86+
type='submit'
87+
className='bg-green text-white text-lg lg:text-2xl sm:text-xl w-5/12 lg:w-3/12 h-14'
88+
>
89+
Add
90+
</button>
8691
</form>
8792
</article>
8893
</section>

‎client/src/generated/graphql.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,7 @@ export type SessionResponse = {
220220
export type Student = {
221221
__typename?: 'Student';
222222
email: Scalars['String'];
223+
id: Scalars['Int'];
223224
lastname: Scalars['String'];
224225
name: Scalars['String'];
225226
};
@@ -299,7 +300,7 @@ export type AssignedStudentsQueryVariables = Exact<{
299300
}>;
300301

301302

302-
export type AssignedStudentsQuery = { __typename?: 'Query', getAssignedStudents: { __typename?: 'AssignedStudentsResponse', error?: string | null | undefined, data?: Array<{ __typename?: 'Student', name: string, lastname: string, email: string } | null | undefined> | null | undefined } };
303+
export type AssignedStudentsQuery = { __typename?: 'Query', getAssignedStudents: { __typename?: 'AssignedStudentsResponse', error?: string | null | undefined, data?: Array<{ __typename?: 'Student', id: number, name: string, lastname: string, email: string } | null | undefined> | null | undefined } };
303304

304305
export type CourseOverviewQueryVariables = Exact<{
305306
courseId: Scalars['Int'];
@@ -474,6 +475,7 @@ export const AssignedStudentsDocument = gql`
474475
getAssignedStudents(courseId: $courseId) {
475476
error
476477
data {
478+
id
477479
name
478480
lastname
479481
email

‎client/src/graphql/queries/assignedStudents.graphql‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ query AssignedStudents($courseId: Int!) {
22
getAssignedStudents(courseId: $courseId) {
33
error
44
data {
5+
id
56
name
67
lastname
78
email

‎client/tailwind.config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ module.exports = {
2121
DEFAULT: '#FFFFFF',
2222
},
2323
grey: {
24-
DEFAULT: '#535353',
25-
light: '#B4B4B4'
24+
DEFAULT: '#333333',
25+
light: '#B4B4B4',
2626
},
2727
black: {
2828
DEFAULT: '#000000',

‎server/dist/graphql/assignedCourseModule.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)