spaceport/webclient/src/InstructorClasses.js

479 lines
12 KiB
JavaScript

import React, { useState, useEffect, useRef } from 'react';
import { Link, useParams } from 'react-router-dom';
import ReactToPrint from 'react-to-print';
import * as Datetime from 'react-datetime';
import 'react-datetime/css/react-datetime.css';
import moment from 'moment-timezone';
import './light.css';
import { Button, Checkbox, Form, Grid, Header, Icon, Label, Message, Table } from 'semantic-ui-react';
import { requester } from './utils.js';
import { MembersDropdown } from './Members.js';
class AttendanceSheet extends React.Component {
render() {
const clazz = this.props.clazz;
const num = clazz.students.filter(x => x.attendance_status !== 'Withdrawn').length;
return (
<div style={{ padding: '3rem', background: 'white', width: '100%', height: '100%' }}>
<Header size='medium'>{clazz.course_data.name} Attendance</Header>
<p>
{moment.utc(clazz.datetime).tz('America/Edmonton').format('llll')}
{num >= 2 ? ', '+num+' students sorted by registration time.' : '.'}
</p>
<Grid stackable padded columns={2}>
<Grid.Column>
<Table collapsing unstackable basic='very'>
{clazz.students
.filter(x => x.attendance_status !== 'Withdrawn')
.slice(0, 15)
.map(x =>
<Table.Row key={x.id}>
<Table.Cell>
<Icon name='square outline' size='large' />
</Table.Cell>
<Table.Cell>
{x.student_name}
</Table.Cell>
</Table.Row>
)
}
</Table>
</Grid.Column>
<Grid.Column>
<Table collapsing unstackable basic='very'>
{clazz.students
.filter(x => x.attendance_status !== 'Withdrawn')
.slice(15)
.map(x =>
<Table.Row key={x.id}>
<Table.Cell>
<Icon name='square outline' size='large' />
</Table.Cell>
<Table.Cell>
{x.student_name}
</Table.Cell>
</Table.Row>
)
}
</Table>
</Grid.Column>
</Grid>
</div>
);
}
}
function AttendanceRow(props) {
const { student, token, refreshClass } = props;
const [error, setError] = useState(false);
const [loading, setLoading] = useState(false);
const handleMark = (newStatus) => {
if (loading) return;
if (student.attendance_status === newStatus) return;
setLoading(newStatus);
const data = { ...student, attendance_status: newStatus };
requester('/training/'+student.id+'/', 'PATCH', token, data)
.then(res => {
refreshClass();
setError(false);
})
.catch(err => {
console.log(err);
setError(true);
});
};
const makeProps = (name) => ({
onClick: () => handleMark(name),
toggle: true,
active: student.attendance_status === name,
loading: loading === name,
});
useEffect(() => {
setLoading(false);
}, [student.attendance_status]);
return (
<div className='attendance-row'>
<p>
<Link to={'/members/'+student.student_id}>{student.student_name}</Link>
{student.attendance_status === 'Waiting for payment' && ' (Waiting for payment)'}:
</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>
);
}
let attendanceOpenCache = false;
export function InstructorClassAttendance(props) {
const { clazz, token, refreshClass, user } = props;
const [open, setOpen] = useState(attendanceOpenCache);
const [input, setInput] = useState({});
const [error, setError] = useState(false);
const [loading, setLoading] = useState(false);
const printRef = useRef();
const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
const handleSubmit = (e) => {
if (loading) return;
setLoading(true);
const data = { ...input, attendance_status: 'Attended', session: clazz.id };
requester('/training/', 'POST', token, data)
.then(res => {
setLoading(false);
setError(false);
refreshClass();
})
.catch(err => {
setLoading(false);
console.log(err);
setError(err.data);
});
};
return (
<div>
<Header size='medium'>Instructor Panel</Header>
{open || clazz.instructor === user.id ?
<div>
<Header size='small'>Student Emails</Header>
{clazz.students.length ?
clazz.students
.filter(x => x.attendance_status !== 'Withdrawn')
.map(x => x.student_email)
.join('; ')
:
<p>No students yet.</p>
}
<Header size='small'>Mark Attendance</Header>
{!!clazz.students.length && <div>
<div style={{ display: 'none' }}>
<AttendanceSheet clazz={clazz} ref={printRef} />
</div>
<ReactToPrint
trigger={() => <Button>Print Attendance Sheet</Button>}
content={() => printRef.current}
/>
</div>}
{clazz.students.length ?
clazz.students.map(x =>
<AttendanceRow key={x.id} student={x} {...props} />
)
:
<p>No students yet.</p>
}
<Header size='small'>Add Student</Header>
<Form onSubmit={handleSubmit}>
<Form.Field error={error.member_id}>
<MembersDropdown
name='member_id'
value={input.member_id}
token={token}
onChange={handleValues}
initial='Find a member'
/>
</Form.Field>
<Form.Button
loading={loading}
error={error.non_field_errors}
disabled={!input.member_id}
>
Submit
</Form.Button>
</Form>
</div>
:
<Button onClick={() => {setOpen(true); attendanceOpenCache = true;}}>
Edit Attendance
</Button>
}
</div>
);
};
function InstructorClassEditor(props) {
const { input, setInput, error, editing, token } = props;
const [editInstructor, setEditInstructor] = useState(false);
const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
const handleChange = (e) => handleValues(e, e.currentTarget);
const handleCheck = (e, v) => setInput({ ...input, [v.name]: v.checked });
const handleDatetime = (v) => setInput({ ...input, datetime: v.utc().format() });
const makeProps = (name) => ({
name: name,
onChange: handleChange,
value: input[name] || '',
error: error[name],
});
return (
<div className='class-editor'>
{editing &&
(editInstructor ?
<>
<Form.Field error={error.instructor_id}>
<label>Instructor (search)</label>
<MembersDropdown
token={token}
{...makeProps('instructor_id')}
onChange={handleValues}
initial={input.instructor_name}
/>
{error.instructor_id && <Label pointing prompt>
{error.instructor_id}
</Label>}
</Form.Field>
<Message info>
<Message.Header>Are you sure?</Message.Header>
<p>Only the new instructor will be able to edit this class.</p>
</Message>
</>
:
<Button
onClick={() => setEditInstructor(true)}
>
Change instructor
</Button>
)
}
<p/>
<Form.Input
label='Cost ($) — 0 for free'
{...makeProps('cost')}
/>
<Form.Input
label='Max Students — Blank for Unlimited'
{...makeProps('max_students')}
/>
<Form.Field>
<label>Time and Date</label>
<Datetime
timeConstraints={{ minutes: { step: 15 } }}
value={ input.datetime ?
moment.utc(input.datetime).tz('America/Edmonton')
:
moment().tz('America/Edmonton').set({ minute: 0 })
}
onChange={handleDatetime}
input={false}
/>
{error.datetime &&
<Label pointing prompt>
{error.datetime}
</Label>
}
</Form.Field>
{editing && <Form.Field>
<label>Is the class cancelled?</label>
<Checkbox
label='Yes'
name='is_cancelled'
onChange={handleCheck}
checked={input.is_cancelled}
/>
</Form.Field>}
</div>
);
}
export function InstructorClassDetail(props) {
const { clazz, setClass, token } = props;
const [open, setOpen] = useState(false);
const [input, setInput] = useState(clazz);
const [error, setError] = useState(false);
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const { id } = useParams();
const handleSubmit = (e) => {
if (loading) return;
setLoading(true);
setSuccess(false);
requester('/sessions/'+id+'/', 'PUT', token, input)
.then(res => {
setSuccess(true);
setLoading(false);
setError(false);
setOpen(false);
setClass(res);
})
.catch(err => {
setLoading(false);
console.log(err);
setError(err.data);
});
};
return (
<div>
<Header size='medium'>Instructor Panel</Header>
{!open && success && <p>Saved!</p>}
{open ?
<Form onSubmit={handleSubmit}>
<Header size='small'>Edit Class</Header>
<InstructorClassEditor editing input={input} setInput={setInput} error={error} token={token} />
<Form.Button loading={loading} error={error.non_field_errors}>
Submit
</Form.Button>
</Form>
:
<Button onClick={() => setOpen(true)}>
Edit Class
</Button>
}
</div>
);
};
export function InstructorClassList(props) {
const { course, setCourse, token } = props;
const [open, setOpen] = useState(false);
const [input, setInput] = useState({ max_students: null });
const [error, setError] = useState(false);
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);
const [classes, setClasses] = useState([]);
const [sameClasses, setSameClasses] = useState(false);
const handleSubmit = (e) => {
if (loading) return;
setLoading(true);
setSuccess(false);
const data = { ...input, course: course.id };
requester('/sessions/', 'POST', token, data)
.then(res => {
setSuccess(res.id);
setInput({ max_students: null });
setLoading(false);
setError(false);
setOpen(false);
setCourse({ ...course, sessions: [ res, ...course.sessions ] });
})
.catch(err => {
setLoading(false);
console.log(err);
setError(err.data);
});
};
useEffect(() => {
requester('/sessions/', 'GET', token)
.then(res => {
setClasses(res.results.filter(x => !x.is_cancelled));
})
.catch(err => {
console.log(err);
});
}, []);
useEffect(() => {
setSameClasses(classes.filter(x =>
moment.utc(x.datetime).tz('America/Edmonton').isSame(input.datetime, 'day')
).sort((a, b) => a.datetime > b.datetime ? 1 : -1));
}, [input.datetime]);
const fillSuggestion = (e) => {
e.preventDefault();
setInput({ ...input, ...course.suggestion });
};
return (
<div>
<Header size='medium'>Instructor Panel</Header>
{!open && success && <p>Added! <Link to={'/classes/'+success}>View the class.</Link></p>}
{open ?
<Grid stackable padded columns={2}>
<Grid.Column>
<Form onSubmit={handleSubmit}>
<Header size='small'>Add a Class</Header>
<p>Documentation: <a href='https://wiki.protospace.ca/Be_a_Course_Instructor' target='_blank' rel='noopener noreferrer'>https://wiki.protospace.ca/Be_a_Course_Instructor</a></p>
{course.suggestion &&
<p><Button onClick={fillSuggestion}>Suggest</Button> based off previous classes.</p>
}
<InstructorClassEditor input={input} setInput={setInput} error={error} token={token} />
<Form.Button loading={loading} error={error.non_field_errors}>
Submit
</Form.Button>
</Form>
</Grid.Column>
<Grid.Column>
{!!input.datetime &&
<div>
<Header size='small'>Upcoming Classes That Day</Header>
{sameClasses.length ?
sameClasses.map(x =>
<p>
{moment.utc(x.datetime).tz('America/Edmonton').format('LT')} {x.course_data.name}
</p>
)
:
<p>None</p>
}
</div>
}
</Grid.Column>
</Grid>
:
<Button onClick={() => setOpen(true)}>
Add a Class
</Button>
}
</div>
);
};