2020-02-23 00:06:05 +00:00
|
|
|
import React, { useState, useEffect, useRef } from 'react';
|
2022-07-13 03:14:23 +00:00
|
|
|
import { Link, useParams } from 'react-router-dom';
|
2020-02-23 00:06:05 +00:00
|
|
|
import ReactToPrint from 'react-to-print';
|
2020-01-16 01:32:52 +00:00
|
|
|
import * as Datetime from 'react-datetime';
|
|
|
|
import 'react-datetime/css/react-datetime.css';
|
2020-02-24 04:07:18 +00:00
|
|
|
import moment from 'moment-timezone';
|
2020-01-15 05:12:00 +00:00
|
|
|
import './light.css';
|
2022-07-13 03:14:23 +00:00
|
|
|
import { Button, Checkbox, Form, Grid, Header, Icon, Label, Message, Table } from 'semantic-ui-react';
|
2022-09-05 22:01:46 +00:00
|
|
|
import { requester, randomString } from './utils.js';
|
2020-02-16 07:17:44 +00:00
|
|
|
import { MembersDropdown } from './Members.js';
|
2020-01-15 05:12:00 +00:00
|
|
|
|
2020-02-23 00:06:05 +00:00
|
|
|
class AttendanceSheet extends React.Component {
|
|
|
|
render() {
|
|
|
|
const clazz = this.props.clazz;
|
2022-02-03 23:44:31 +00:00
|
|
|
const num = clazz.students.filter(x => x.attendance_status !== 'Withdrawn').length;
|
2020-02-23 00:06:05 +00:00
|
|
|
|
|
|
|
return (
|
2022-02-03 23:38:09 +00:00
|
|
|
<div style={{ padding: '3rem', background: 'white', width: '100%', height: '100%' }}>
|
2021-10-23 07:28:34 +00:00
|
|
|
<Header size='medium'>{clazz.course_data.name} Attendance</Header>
|
2020-02-23 00:06:05 +00:00
|
|
|
<p>
|
2020-02-24 04:07:18 +00:00
|
|
|
{moment.utc(clazz.datetime).tz('America/Edmonton').format('llll')}
|
2020-02-23 00:06:05 +00:00
|
|
|
{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>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-01-16 09:09:45 +00:00
|
|
|
function AttendanceRow(props) {
|
2020-01-18 01:36:53 +00:00
|
|
|
const { student, token, refreshClass } = props;
|
2020-01-16 09:09:45 +00:00
|
|
|
const [error, setError] = useState(false);
|
2020-09-15 19:40:29 +00:00
|
|
|
const [loading, setLoading] = useState(false);
|
2020-01-16 09:09:45 +00:00
|
|
|
|
|
|
|
const handleMark = (newStatus) => {
|
2020-09-15 19:42:09 +00:00
|
|
|
if (loading) return;
|
2022-07-13 03:14:23 +00:00
|
|
|
if (student.attendance_status === newStatus) return;
|
2020-09-15 19:40:29 +00:00
|
|
|
setLoading(newStatus);
|
2020-02-07 01:11:09 +00:00
|
|
|
const data = { ...student, attendance_status: newStatus };
|
|
|
|
requester('/training/'+student.id+'/', 'PATCH', token, data)
|
2020-01-16 09:09:45 +00:00
|
|
|
.then(res => {
|
2020-01-18 01:36:53 +00:00
|
|
|
refreshClass();
|
2020-01-16 09:09:45 +00:00
|
|
|
setError(false);
|
|
|
|
})
|
|
|
|
.catch(err => {
|
|
|
|
console.log(err);
|
|
|
|
setError(true);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
const makeProps = (name) => ({
|
|
|
|
onClick: () => handleMark(name),
|
|
|
|
toggle: true,
|
2020-02-07 01:11:09 +00:00
|
|
|
active: student.attendance_status === name,
|
2020-09-15 19:40:29 +00:00
|
|
|
loading: loading === name,
|
2020-01-16 09:09:45 +00:00
|
|
|
});
|
|
|
|
|
2020-09-15 19:40:29 +00:00
|
|
|
useEffect(() => {
|
|
|
|
setLoading(false);
|
|
|
|
}, [student.attendance_status]);
|
|
|
|
|
2020-01-16 09:09:45 +00:00
|
|
|
return (
|
2020-01-18 07:54:17 +00:00
|
|
|
<div className='attendance-row'>
|
2020-10-05 21:07:08 +00:00
|
|
|
<p>
|
|
|
|
<Link to={'/members/'+student.student_id}>{student.student_name}</Link>
|
|
|
|
{student.attendance_status === 'Waiting for payment' && ' (Waiting for payment)'}:
|
|
|
|
</p>
|
2020-01-16 09:09:45 +00:00
|
|
|
|
2020-02-07 01:11:09 +00:00
|
|
|
<Button {...makeProps('Withdrawn')}>
|
2020-01-16 09:09:45 +00:00
|
|
|
Withdrawn
|
|
|
|
</Button>
|
|
|
|
|
2020-02-07 01:11:09 +00:00
|
|
|
<Button {...makeProps('Confirmed')}>
|
2020-01-16 09:09:45 +00:00
|
|
|
Confirmed
|
|
|
|
</Button>
|
|
|
|
|
2020-02-07 01:11:09 +00:00
|
|
|
<Button {...makeProps('Rescheduled')}>
|
2020-01-16 09:09:45 +00:00
|
|
|
Rescheduled
|
|
|
|
</Button>
|
|
|
|
|
2023-08-15 19:53:29 +00:00
|
|
|
<Button {...makeProps('Try-again')}>
|
|
|
|
Try-again
|
2023-08-14 17:23:07 +00:00
|
|
|
</Button>
|
|
|
|
|
2020-02-07 01:11:09 +00:00
|
|
|
<Button {...makeProps('No-show')}>
|
2020-01-16 09:09:45 +00:00
|
|
|
No-show
|
|
|
|
</Button>
|
|
|
|
|
2020-02-07 01:11:09 +00:00
|
|
|
<Button {...makeProps('Attended')}>
|
2020-01-16 09:09:45 +00:00
|
|
|
Attended
|
|
|
|
</Button>
|
|
|
|
|
|
|
|
{error && <p>Error: something went wrong!</p>}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-10-05 21:13:55 +00:00
|
|
|
let attendanceOpenCache = false;
|
|
|
|
|
2020-01-16 09:09:45 +00:00
|
|
|
export function InstructorClassAttendance(props) {
|
2020-02-21 01:06:19 +00:00
|
|
|
const { clazz, token, refreshClass, user } = props;
|
2020-10-05 21:13:55 +00:00
|
|
|
const [open, setOpen] = useState(attendanceOpenCache);
|
2020-02-16 07:17:44 +00:00
|
|
|
const [input, setInput] = useState({});
|
2020-01-16 09:09:45 +00:00
|
|
|
const [error, setError] = useState(false);
|
2020-02-16 07:17:44 +00:00
|
|
|
const [loading, setLoading] = useState(false);
|
2020-02-23 00:06:05 +00:00
|
|
|
const printRef = useRef();
|
2020-02-16 07:17:44 +00:00
|
|
|
|
|
|
|
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);
|
|
|
|
});
|
|
|
|
};
|
2020-01-16 09:09:45 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<Header size='medium'>Instructor Panel</Header>
|
|
|
|
|
2020-02-21 01:06:19 +00:00
|
|
|
{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>
|
|
|
|
|
2020-02-23 00:06:05 +00:00
|
|
|
{!!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>}
|
|
|
|
|
2020-02-21 01:06:19 +00:00
|
|
|
{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>
|
|
|
|
|
2022-01-30 00:04:44 +00:00
|
|
|
<Form.Button
|
|
|
|
loading={loading}
|
|
|
|
error={error.non_field_errors}
|
|
|
|
disabled={!input.member_id}
|
|
|
|
>
|
2020-02-21 01:06:19 +00:00
|
|
|
Submit
|
|
|
|
</Form.Button>
|
|
|
|
</Form>
|
|
|
|
</div>
|
2020-02-21 00:10:47 +00:00
|
|
|
:
|
2020-10-05 21:13:55 +00:00
|
|
|
<Button onClick={() => {setOpen(true); attendanceOpenCache = true;}}>
|
2020-03-16 04:45:00 +00:00
|
|
|
Edit Attendance
|
2020-02-21 01:06:19 +00:00
|
|
|
</Button>
|
2020-02-21 00:10:47 +00:00
|
|
|
}
|
2020-01-16 09:09:45 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2020-01-16 01:32:52 +00:00
|
|
|
function InstructorClassEditor(props) {
|
2022-05-10 01:07:32 +00:00
|
|
|
const { input, setInput, error, editing, token } = props;
|
|
|
|
const [editInstructor, setEditInstructor] = useState(false);
|
2020-01-15 05:12:00 +00:00
|
|
|
|
|
|
|
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 });
|
2020-01-16 01:32:52 +00:00
|
|
|
const handleDatetime = (v) => setInput({ ...input, datetime: v.utc().format() });
|
2020-01-15 05:12:00 +00:00
|
|
|
|
|
|
|
const makeProps = (name) => ({
|
|
|
|
name: name,
|
|
|
|
onChange: handleChange,
|
|
|
|
value: input[name] || '',
|
|
|
|
error: error[name],
|
|
|
|
});
|
|
|
|
|
|
|
|
return (
|
2020-01-16 01:32:52 +00:00
|
|
|
<div className='class-editor'>
|
2022-05-10 01:07:32 +00:00
|
|
|
{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/>
|
|
|
|
|
2020-01-16 03:00:10 +00:00
|
|
|
<Form.Input
|
2020-02-07 01:11:09 +00:00
|
|
|
label='Cost ($) — 0 for free'
|
2020-01-16 03:00:10 +00:00
|
|
|
{...makeProps('cost')}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<Form.Input
|
|
|
|
label='Max Students — Blank for Unlimited'
|
|
|
|
{...makeProps('max_students')}
|
|
|
|
/>
|
|
|
|
|
2020-01-15 05:12:00 +00:00
|
|
|
<Form.Field>
|
2020-01-16 01:32:52 +00:00
|
|
|
<label>Time and Date</label>
|
|
|
|
<Datetime
|
|
|
|
timeConstraints={{ minutes: { step: 15 } }}
|
2022-03-19 01:19:24 +00:00
|
|
|
value={ input.datetime ?
|
|
|
|
moment.utc(input.datetime).tz('America/Edmonton')
|
|
|
|
:
|
|
|
|
moment().tz('America/Edmonton').set({ minute: 0 })
|
|
|
|
}
|
2020-01-16 01:32:52 +00:00
|
|
|
onChange={handleDatetime}
|
2022-03-16 04:36:15 +00:00
|
|
|
input={false}
|
2020-01-15 05:12:00 +00:00
|
|
|
/>
|
2020-01-16 01:32:52 +00:00
|
|
|
{error.datetime &&
|
2020-01-15 05:12:00 +00:00
|
|
|
<Label pointing prompt>
|
2020-01-16 01:32:52 +00:00
|
|
|
{error.datetime}
|
2020-01-15 05:12:00 +00:00
|
|
|
</Label>
|
|
|
|
}
|
|
|
|
</Form.Field>
|
2020-01-16 01:32:52 +00:00
|
|
|
|
|
|
|
{editing && <Form.Field>
|
|
|
|
<label>Is the class cancelled?</label>
|
|
|
|
<Checkbox
|
|
|
|
label='Yes'
|
|
|
|
name='is_cancelled'
|
|
|
|
onChange={handleCheck}
|
|
|
|
checked={input.is_cancelled}
|
|
|
|
/>
|
|
|
|
</Form.Field>}
|
|
|
|
|
2020-01-15 05:12:00 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-01-16 01:32:52 +00:00
|
|
|
export function InstructorClassDetail(props) {
|
|
|
|
const { clazz, setClass, token } = props;
|
2020-01-15 06:24:38 +00:00
|
|
|
const [open, setOpen] = useState(false);
|
2020-01-16 01:32:52 +00:00
|
|
|
const [input, setInput] = useState(clazz);
|
2020-01-15 05:12:00 +00:00
|
|
|
const [error, setError] = useState(false);
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const [success, setSuccess] = useState(false);
|
2020-01-15 06:24:38 +00:00
|
|
|
const { id } = useParams();
|
2020-01-15 05:12:00 +00:00
|
|
|
|
|
|
|
const handleSubmit = (e) => {
|
2020-02-04 07:18:29 +00:00
|
|
|
if (loading) return;
|
2020-01-15 05:12:00 +00:00
|
|
|
setLoading(true);
|
|
|
|
setSuccess(false);
|
2020-01-16 01:32:52 +00:00
|
|
|
requester('/sessions/'+id+'/', 'PUT', token, input)
|
2020-01-15 05:12:00 +00:00
|
|
|
.then(res => {
|
|
|
|
setSuccess(true);
|
2020-01-15 06:24:38 +00:00
|
|
|
setLoading(false);
|
2020-01-15 05:12:00 +00:00
|
|
|
setError(false);
|
2020-01-15 06:24:38 +00:00
|
|
|
setOpen(false);
|
2020-01-16 01:32:52 +00:00
|
|
|
setClass(res);
|
2020-01-15 05:12:00 +00:00
|
|
|
})
|
|
|
|
.catch(err => {
|
|
|
|
setLoading(false);
|
|
|
|
console.log(err);
|
|
|
|
setError(err.data);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2020-01-15 06:24:38 +00:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<Header size='medium'>Instructor Panel</Header>
|
2020-01-15 05:12:00 +00:00
|
|
|
|
2020-01-15 06:24:38 +00:00
|
|
|
{!open && success && <p>Saved!</p>}
|
2020-01-15 05:12:00 +00:00
|
|
|
|
2020-01-15 06:24:38 +00:00
|
|
|
{open ?
|
2020-01-15 05:12:00 +00:00
|
|
|
<Form onSubmit={handleSubmit}>
|
2020-01-16 01:32:52 +00:00
|
|
|
<Header size='small'>Edit Class</Header>
|
2020-01-15 06:24:38 +00:00
|
|
|
|
2022-05-10 01:07:32 +00:00
|
|
|
<InstructorClassEditor editing input={input} setInput={setInput} error={error} token={token} />
|
2020-01-15 06:24:38 +00:00
|
|
|
|
|
|
|
<Form.Button loading={loading} error={error.non_field_errors}>
|
|
|
|
Submit
|
|
|
|
</Form.Button>
|
2020-01-15 05:12:00 +00:00
|
|
|
</Form>
|
2020-01-15 06:24:38 +00:00
|
|
|
:
|
|
|
|
<Button onClick={() => setOpen(true)}>
|
2020-01-16 01:32:52 +00:00
|
|
|
Edit Class
|
2020-01-15 06:24:38 +00:00
|
|
|
</Button>
|
|
|
|
}
|
|
|
|
</div>
|
2020-01-15 05:12:00 +00:00
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2020-01-16 01:32:52 +00:00
|
|
|
export function InstructorClassList(props) {
|
2020-01-16 06:17:33 +00:00
|
|
|
const { course, setCourse, token } = props;
|
2020-01-15 05:12:00 +00:00
|
|
|
const [open, setOpen] = useState(false);
|
2020-11-20 02:59:01 +00:00
|
|
|
const [input, setInput] = useState({ max_students: null });
|
2020-01-15 05:12:00 +00:00
|
|
|
const [error, setError] = useState(false);
|
2022-09-05 22:01:46 +00:00
|
|
|
const [progress, setProgress] = useState([]);
|
2020-01-15 05:12:00 +00:00
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const [success, setSuccess] = useState(false);
|
2020-03-16 04:45:00 +00:00
|
|
|
const [classes, setClasses] = useState([]);
|
|
|
|
const [sameClasses, setSameClasses] = useState(false);
|
2020-01-15 05:12:00 +00:00
|
|
|
|
|
|
|
const handleSubmit = (e) => {
|
2020-02-04 07:18:29 +00:00
|
|
|
if (loading) return;
|
2020-01-15 05:12:00 +00:00
|
|
|
setLoading(true);
|
|
|
|
setSuccess(false);
|
2022-09-05 22:01:46 +00:00
|
|
|
|
|
|
|
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 };
|
2020-01-16 01:32:52 +00:00
|
|
|
requester('/sessions/', 'POST', token, data)
|
2020-01-15 05:12:00 +00:00
|
|
|
.then(res => {
|
2022-09-05 22:01:46 +00:00
|
|
|
clearInterval(interval);
|
2020-01-15 05:12:00 +00:00
|
|
|
setSuccess(res.id);
|
2022-05-10 00:22:20 +00:00
|
|
|
setInput({ max_students: null });
|
2020-01-15 05:12:00 +00:00
|
|
|
setLoading(false);
|
|
|
|
setError(false);
|
|
|
|
setOpen(false);
|
2020-01-16 01:32:52 +00:00
|
|
|
setCourse({ ...course, sessions: [ res, ...course.sessions ] });
|
2020-01-15 05:12:00 +00:00
|
|
|
})
|
|
|
|
.catch(err => {
|
2022-09-05 22:01:46 +00:00
|
|
|
clearInterval(interval);
|
2020-01-15 05:12:00 +00:00
|
|
|
setLoading(false);
|
|
|
|
console.log(err);
|
|
|
|
setError(err.data);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2020-03-16 04:45:00 +00:00
|
|
|
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')
|
2020-03-16 04:57:20 +00:00
|
|
|
).sort((a, b) => a.datetime > b.datetime ? 1 : -1));
|
2020-03-16 04:45:00 +00:00
|
|
|
}, [input.datetime]);
|
|
|
|
|
2022-07-15 03:21:25 +00:00
|
|
|
const fillSuggestion = (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
setInput({ ...input, ...course.suggestion });
|
|
|
|
};
|
|
|
|
|
2020-01-15 05:12:00 +00:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<Header size='medium'>Instructor Panel</Header>
|
|
|
|
|
2020-01-16 01:32:52 +00:00
|
|
|
{!open && success && <p>Added! <Link to={'/classes/'+success}>View the class.</Link></p>}
|
2020-01-15 05:12:00 +00:00
|
|
|
|
|
|
|
{open ?
|
2020-03-16 04:45:00 +00:00
|
|
|
<Grid stackable padded columns={2}>
|
|
|
|
<Grid.Column>
|
|
|
|
<Form onSubmit={handleSubmit}>
|
|
|
|
<Header size='small'>Add a Class</Header>
|
2020-01-15 05:12:00 +00:00
|
|
|
|
2022-03-26 21:55:43 +00:00
|
|
|
<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>
|
|
|
|
|
2022-07-15 03:21:25 +00:00
|
|
|
{course.suggestion &&
|
|
|
|
<p><Button onClick={fillSuggestion}>Suggest</Button> based off previous classes.</p>
|
|
|
|
}
|
|
|
|
|
2022-05-10 01:07:32 +00:00
|
|
|
<InstructorClassEditor input={input} setInput={setInput} error={error} token={token} />
|
2020-01-15 05:12:00 +00:00
|
|
|
|
2022-09-05 22:01:46 +00:00
|
|
|
<p>
|
|
|
|
{progress.map(x => <>{x}<br /></>)}
|
|
|
|
</p>
|
|
|
|
|
2020-03-16 04:45:00 +00:00
|
|
|
<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>
|
2021-10-23 07:28:34 +00:00
|
|
|
{moment.utc(x.datetime).tz('America/Edmonton').format('LT')} — {x.course_data.name}
|
2020-03-16 04:45:00 +00:00
|
|
|
</p>
|
|
|
|
)
|
|
|
|
:
|
|
|
|
<p>None</p>
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
</Grid.Column>
|
|
|
|
</Grid>
|
2020-01-15 05:12:00 +00:00
|
|
|
:
|
|
|
|
<Button onClick={() => setOpen(true)}>
|
2020-01-16 01:32:52 +00:00
|
|
|
Add a Class
|
2020-01-15 05:12:00 +00:00
|
|
|
</Button>
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
);
|
2023-08-15 19:53:29 +00:00
|
|
|
};
|