Add UI for class sign up and attendance
This commit is contained in:
parent
57407be11e
commit
b6573f1d72
|
@ -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 TransactionSerializer(serializers.ModelSerializer):
|
||||||
class Meta:
|
class Meta:
|
||||||
model = models.Transaction
|
model = models.Transaction
|
||||||
|
@ -229,10 +212,18 @@ class TransactionSerializer(serializers.ModelSerializer):
|
||||||
class TrainingSerializer(serializers.ModelSerializer):
|
class TrainingSerializer(serializers.ModelSerializer):
|
||||||
attendance_status = serializers.ChoiceField(['waiting for payment', 'withdrawn', 'rescheduled', 'no-show', 'attended', 'confirmed'])
|
attendance_status = serializers.ChoiceField(['waiting for payment', 'withdrawn', 'rescheduled', 'no-show', 'attended', 'confirmed'])
|
||||||
session = serializers.PrimaryKeyRelatedField(queryset=models.Session.objects.all())
|
session = serializers.PrimaryKeyRelatedField(queryset=models.Session.objects.all())
|
||||||
|
student_name = serializers.SerializerMethodField()
|
||||||
class Meta:
|
class Meta:
|
||||||
model = models.Training
|
model = models.Training
|
||||||
fields = '__all__'
|
fields = '__all__'
|
||||||
read_only_fields = ['user', 'sign_up_date', 'paid_date', 'member_id']
|
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):
|
class StudentTrainingSerializer(TrainingSerializer):
|
||||||
attendance_status = serializers.ChoiceField(['waiting for payment', 'withdrawn'])
|
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):
|
class RegistrationSerializer(RegisterSerializer):
|
||||||
first_name = serializers.CharField(max_length=32)
|
first_name = serializers.CharField(max_length=32)
|
||||||
last_name = serializers.CharField(max_length=32)
|
last_name = serializers.CharField(max_length=32)
|
||||||
|
|
|
@ -154,7 +154,7 @@ function App() {
|
||||||
</Route>
|
</Route>
|
||||||
|
|
||||||
<Route path='/classes/:id'>
|
<Route path='/classes/:id'>
|
||||||
<ClassDetail token={token} user={user} />
|
<ClassDetail token={token} user={user} setUserCache={setUserCache} />
|
||||||
</Route>
|
</Route>
|
||||||
<Route path='/classes'>
|
<Route path='/classes'>
|
||||||
<Classes token={token} />
|
<Classes token={token} />
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
|
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
|
||||||
import './light.css';
|
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 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 { NotFound, PleaseLogin } from './Misc.js';
|
||||||
import { InstructorClassDetail } from './InstructorClasses.js';
|
import { InstructorClassDetail, InstructorClassAttendance } from './InstructorClasses.js';
|
||||||
|
|
||||||
function ClassTable(props) {
|
function ClassTable(props) {
|
||||||
const { classes } = props;
|
const { classes } = props;
|
||||||
|
@ -66,7 +66,6 @@ export function Classes(props) {
|
||||||
return (
|
return (
|
||||||
<Container>
|
<Container>
|
||||||
<Header size='large'>Class List</Header>
|
<Header size='large'>Class List</Header>
|
||||||
|
|
||||||
<Header size='medium'>Upcoming</Header>
|
<Header size='medium'>Upcoming</Header>
|
||||||
{classes ?
|
{classes ?
|
||||||
<ClassTable classes={classes.filter(x => x.datetime > now)} />
|
<ClassTable classes={classes.filter(x => x.datetime > now)} />
|
||||||
|
@ -87,8 +86,9 @@ export function Classes(props) {
|
||||||
export function ClassDetail(props) {
|
export function ClassDetail(props) {
|
||||||
const [clazz, setClass] = useState(false);
|
const [clazz, setClass] = useState(false);
|
||||||
const [error, setError] = useState(false);
|
const [error, setError] = useState(false);
|
||||||
const { token, user } = props;
|
const { token, user, setUserCache } = props;
|
||||||
const { id } = useParams();
|
const { id } = useParams();
|
||||||
|
const userTraining = user.training.find(x => x.session.id == id);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
requester('/sessions/'+id+'/', 'GET', token)
|
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 (
|
return (
|
||||||
<Container>
|
<Container>
|
||||||
{!error ?
|
{!error ?
|
||||||
|
@ -150,6 +186,37 @@ export function ClassDetail(props) {
|
||||||
</BasicTable>
|
</BasicTable>
|
||||||
|
|
||||||
<Header size='medium'>Attendance</Header>
|
<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>
|
</div>
|
||||||
:
|
:
|
||||||
<p>Loading...</p>
|
<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 { 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';
|
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) {
|
function InstructorClassEditor(props) {
|
||||||
const { input, setInput, error, editing } = props;
|
const { input, setInput, error, editing } = props;
|
||||||
|
|
||||||
|
|
|
@ -27,14 +27,12 @@ export function Training(props) {
|
||||||
<Table.Body>
|
<Table.Body>
|
||||||
{user.training.map((x, i) =>
|
{user.training.map((x, i) =>
|
||||||
<Table.Row key={i}>
|
<Table.Row key={i}>
|
||||||
<Table.Cell>
|
<Table.Cell>{x.session.course_name}</Table.Cell>
|
||||||
<Link to={'/courses/'+x.session.course.id}>{x.session.course.name}</Link>
|
|
||||||
</Table.Cell>
|
|
||||||
<Table.Cell>
|
<Table.Cell>
|
||||||
<Link to={'/classes/'+x.session.id}>{moment(x.session.datetime).format('MMMM Do YYYY')}</Link>
|
<Link to={'/classes/'+x.session.id}>{moment(x.session.datetime).format('MMMM Do YYYY')}</Link>
|
||||||
</Table.Cell>
|
</Table.Cell>
|
||||||
<Table.Cell>{x.attendance_status}</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.Row>
|
||||||
)}
|
)}
|
||||||
</Table.Body>
|
</Table.Body>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user