Add UI for class sign up and attendance

master
Tanner Collin 4 years ago
parent 57407be11e
commit b6573f1d72
  1. 43
      apiserver/apiserver/api/serializers.py
  2. 2
      webclient/src/App.js
  3. 79
      webclient/src/Classes.js
  4. 77
      webclient/src/InstructorClasses.js
  5. 6
      webclient/src/Training.js

@ -202,23 +202,6 @@ class CardSerializer(serializers.ModelSerializer):
class UserTrainingSerializer(serializers.ModelSerializer):
class Meta:
model = models.Training
exclude = ['user']
depth = 2
class UserSerializer(serializers.ModelSerializer):
training = UserTrainingSerializer(many=True)
member = MemberSerializer()
class Meta:
model = User
fields = ['id', 'username', 'member', 'transactions', 'cards', 'training', 'is_staff']
depth = 1
class TransactionSerializer(serializers.ModelSerializer):
class Meta:
model = models.Transaction
@ -229,10 +212,18 @@ class TransactionSerializer(serializers.ModelSerializer):
class TrainingSerializer(serializers.ModelSerializer):
attendance_status = serializers.ChoiceField(['waiting for payment', 'withdrawn', 'rescheduled', 'no-show', 'attended', 'confirmed'])
session = serializers.PrimaryKeyRelatedField(queryset=models.Session.objects.all())
student_name = serializers.SerializerMethodField()
class Meta:
model = models.Training
fields = '__all__'
read_only_fields = ['user', 'sign_up_date', 'paid_date', 'member_id']
def get_student_name(self, obj):
if obj.user:
member = obj.user.member
else:
member = models.Member.objects.get(id=obj.member_id)
return member.preferred_name + ' ' + member.last_name
class StudentTrainingSerializer(TrainingSerializer):
attendance_status = serializers.ChoiceField(['waiting for payment', 'withdrawn'])
@ -281,6 +272,24 @@ class CourseDetailSerializer(serializers.ModelSerializer):
class UserTrainingSerializer(serializers.ModelSerializer):
session = SessionListSerializer()
class Meta:
model = models.Training
exclude = ['user']
depth = 2
class UserSerializer(serializers.ModelSerializer):
training = UserTrainingSerializer(many=True)
member = MemberSerializer()
class Meta:
model = User
fields = ['id', 'username', 'member', 'transactions', 'cards', 'training', 'is_staff']
depth = 1
class RegistrationSerializer(RegisterSerializer):
first_name = serializers.CharField(max_length=32)
last_name = serializers.CharField(max_length=32)

@ -154,7 +154,7 @@ function App() {
</Route>
<Route path='/classes/:id'>
<ClassDetail token={token} user={user} />
<ClassDetail token={token} user={user} setUserCache={setUserCache} />
</Route>
<Route path='/classes'>
<Classes token={token} />

@ -1,11 +1,11 @@
import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
import './light.css';
import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
import { Button, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
import moment from 'moment';
import { isInstructor, BasicTable, requester } from './utils.js';
import { isAdmin, isInstructor, BasicTable, requester } from './utils.js';
import { NotFound, PleaseLogin } from './Misc.js';
import { InstructorClassDetail } from './InstructorClasses.js';
import { InstructorClassDetail, InstructorClassAttendance } from './InstructorClasses.js';
function ClassTable(props) {
const { classes } = props;
@ -66,8 +66,7 @@ export function Classes(props) {
return (
<Container>
<Header size='large'>Class List</Header>
<Header size='medium'>Upcoming</Header>
<Header size='medium'>Upcoming</Header>
{classes ?
<ClassTable classes={classes.filter(x => x.datetime > now)} />
:
@ -87,8 +86,9 @@ export function Classes(props) {
export function ClassDetail(props) {
const [clazz, setClass] = useState(false);
const [error, setError] = useState(false);
const { token, user } = props;
const { token, user, setUserCache } = props;
const { id } = useParams();
const userTraining = user.training.find(x => x.session.id == id);
useEffect(() => {
requester('/sessions/'+id+'/', 'GET', token)
@ -101,6 +101,42 @@ export function ClassDetail(props) {
});
}, []);
const handleSignup = () => {
const data = { attendance_status: 'waiting for payment', session: id };
requester('/training/', 'POST', token, data)
.then(res => {
// bad code:
const newClass = { ...clazz, student_count: clazz.student_count+1 };
setUserCache({ ...user, training: [...user.training, {...res, session: newClass }] });
setClass(newClass);
})
.catch(err => {
console.log(err);
setError(true);
});
};
const handleToggle = (newStatus) => {
const data = { attendance_status: newStatus, session: id };
requester('/training/'+userTraining.id+'/', 'PUT', token, data)
.then(res => {
// bad code:
const studentChange = newStatus === 'withdrawn' ? -1 : 1
const newClass = { ...clazz, student_count: clazz.student_count + studentChange };
const trainingIndex = user.training.indexOf(userTraining);
const newTraining = user.training;
newTraining[trainingIndex] = {...res, session: newClass };
setUserCache({ ...user, training: newTraining });
setClass(newClass);
})
.catch(err => {
console.log(err);
setError(true);
});
};
// TODO: calculate yesterday and lock signups
return (
<Container>
{!error ?
@ -150,6 +186,37 @@ export function ClassDetail(props) {
</BasicTable>
<Header size='medium'>Attendance</Header>
{(isAdmin(user) || clazz.instructor === user.id) &&
<Segment padded>
<InstructorClassAttendance clazz={clazz} {...props} />
</Segment>
}
{clazz.instructor != user.id &&
(userTraining ?
<div>
<p>Status: {userTraining.attendance_status}</p>
{userTraining.attendance_status === 'withdrawn' ?
<Button onClick={() => handleToggle('waiting for payment')}>
Sign back up
</Button>
:
<Button onClick={() => handleToggle('withdrawn')}>
Withdraw from Class
</Button>
}
</div>
:
((clazz.max_students && clazz.student_count >= clazz.max_students) ?
<p>The course is full.</p>
:
<Button onClick={handleSignup}>
Sign me up!
</Button>
)
)
}
</div>
:
<p>Loading...</p>

@ -7,6 +7,83 @@ import './light.css';
import { Button, Container, Checkbox, Divider, Dropdown, Form, Grid, Header, Icon, Image, Label, Menu, Message, Segment, Table } from 'semantic-ui-react';
import { BasicTable, staticUrl, requester } from './utils.js';
function AttendanceRow(props) {
const { student, token } = props;
const [training, setTraining] = useState(student);
const [error, setError] = useState(false);
const handleMark = (newStatus) => {
const data = { attendance_status: newStatus };
requester('/training/'+training.id+'/', 'PATCH', token, data)
.then(res => {
setTraining(res);
setError(false);
})
.catch(err => {
console.log(err);
setError(true);
});
};
// 'withdrawn', 'rescheduled', 'no-show', 'attended', 'confirmed'
const makeProps = (name) => ({
onClick: () => handleMark(name),
toggle: true,
active: training.attendance_status === name,
});
return (
<div>
<p>{training.student_name}:</p>
<Button {...makeProps('withdrawn')}>
Withdrawn
</Button>
<Button {...makeProps('confirmed')}>
Confirmed
</Button>
<Button {...makeProps('rescheduled')}>
Rescheduled
</Button>
<Button {...makeProps('no-show')}>
No-show
</Button>
<Button {...makeProps('attended')}>
Attended
</Button>
{error && <p>Error: something went wrong!</p>}
</div>
);
}
export function InstructorClassAttendance(props) {
const { clazz, token } = props;
const [error, setError] = useState(false);
return (
<div>
<Header size='medium'>Instructor Panel</Header>
<Header size='small'>Mark Attendance</Header>
{clazz.students.length ?
clazz.students.map((x, i) =>
<p><AttendanceRow key={i} student={x} {...props} /></p>
)
:
<p>No students yet.</p>
}
</div>
);
};
function InstructorClassEditor(props) {
const { input, setInput, error, editing } = props;

@ -27,14 +27,12 @@ export function Training(props) {
<Table.Body>
{user.training.map((x, i) =>
<Table.Row key={i}>
<Table.Cell>
<Link to={'/courses/'+x.session.course.id}>{x.session.course.name}</Link>
</Table.Cell>
<Table.Cell>{x.session.course_name}</Table.Cell>
<Table.Cell>
<Link to={'/classes/'+x.session.id}>{moment(x.session.datetime).format('MMMM Do YYYY')}</Link>
</Table.Cell>
<Table.Cell>{x.attendance_status}</Table.Cell>
<Table.Cell>{x.session.old_instructor}</Table.Cell>
<Table.Cell>{x.session.instructor_name}</Table.Cell>
</Table.Row>
)}
</Table.Body>

Loading…
Cancel
Save