You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
502 lines
12 KiB
502 lines
12 KiB
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, randomString } 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('Try-again')}> |
|
Try-again |
|
</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 [progress, setProgress] = useState([]); |
|
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 request_id = randomString(); |
|
const getStatus = () => { |
|
requester('/stats/progress/?request_id='+request_id, 'GET') |
|
.then(res => { |
|
setProgress(res); |
|
}) |
|
.catch(err => { |
|
console.log(err); |
|
}); |
|
}; |
|
const interval = setInterval(getStatus, 500); |
|
|
|
const data = { ...input, course: course.id, request_id: request_id }; |
|
requester('/sessions/', 'POST', token, data) |
|
.then(res => { |
|
clearInterval(interval); |
|
setSuccess(res.id); |
|
setInput({ max_students: null }); |
|
setLoading(false); |
|
setError(false); |
|
setOpen(false); |
|
setCourse({ ...course, sessions: [ res, ...course.sessions ] }); |
|
}) |
|
.catch(err => { |
|
clearInterval(interval); |
|
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} /> |
|
|
|
<p> |
|
{progress.map(x => <>{x}<br /></>)} |
|
</p> |
|
|
|
<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> |
|
); |
|
};
|
|
|