2020-01-15 05:12:00 +00:00
|
|
|
import React, { useState, useEffect } from 'react';
|
|
|
|
import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
|
2020-01-16 01:32:52 +00:00
|
|
|
import * as Datetime from 'react-datetime';
|
|
|
|
import 'react-datetime/css/react-datetime.css';
|
|
|
|
import moment from 'moment';
|
2020-01-15 05:12:00 +00:00
|
|
|
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';
|
|
|
|
|
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 [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);
|
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);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
// 'withdrawn', 'rescheduled', 'no-show', 'attended', 'confirmed'
|
|
|
|
|
|
|
|
const makeProps = (name) => ({
|
|
|
|
onClick: () => handleMark(name),
|
|
|
|
toggle: true,
|
|
|
|
active: training.attendance_status === name,
|
|
|
|
});
|
|
|
|
|
|
|
|
return (
|
2020-01-18 07:54:17 +00:00
|
|
|
<div className='attendance-row'>
|
2020-01-16 09:09:45 +00:00
|
|
|
<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 ?
|
2020-01-18 01:36:53 +00:00
|
|
|
clazz.students.map(x =>
|
2020-01-18 07:54:17 +00:00
|
|
|
<AttendanceRow key={x.id} student={x} {...props} />
|
2020-01-16 09:09:45 +00:00
|
|
|
)
|
|
|
|
:
|
|
|
|
<p>No students yet.</p>
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2020-01-16 01:32:52 +00:00
|
|
|
function InstructorClassEditor(props) {
|
|
|
|
const { input, setInput, error, editing } = props;
|
2020-01-15 05:12:00 +00:00
|
|
|
|
|
|
|
const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
|
|
|
|
const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] });
|
|
|
|
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'>
|
2020-01-16 03:00:10 +00:00
|
|
|
<Form.Input
|
|
|
|
label='Cost ($)'
|
|
|
|
{...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 } }}
|
|
|
|
value={ input.datetime ? moment.utc(input.datetime).local() : (new Date()).setMinutes(0) }
|
|
|
|
onChange={handleDatetime}
|
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) => {
|
|
|
|
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
|
|
|
|
2020-01-16 01:32:52 +00:00
|
|
|
<InstructorClassEditor editing input={input} setInput={setInput} error={error} />
|
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);
|
|
|
|
const [input, setInput] = useState({});
|
|
|
|
const [error, setError] = useState(false);
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const [success, setSuccess] = useState(false);
|
|
|
|
|
|
|
|
const handleSubmit = (e) => {
|
|
|
|
setLoading(true);
|
|
|
|
setSuccess(false);
|
2020-01-16 06:17:33 +00:00
|
|
|
const data = { ...input, course: course.id };
|
2020-01-16 01:32:52 +00:00
|
|
|
requester('/sessions/', 'POST', token, data)
|
2020-01-15 05:12:00 +00:00
|
|
|
.then(res => {
|
|
|
|
setSuccess(res.id);
|
|
|
|
setInput({});
|
|
|
|
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 => {
|
|
|
|
setLoading(false);
|
|
|
|
console.log(err);
|
|
|
|
setError(err.data);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
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 ?
|
|
|
|
<Form onSubmit={handleSubmit}>
|
2020-01-16 01:32:52 +00:00
|
|
|
<Header size='small'>Add a Class</Header>
|
2020-01-15 05:12:00 +00:00
|
|
|
|
2020-01-16 01:32:52 +00:00
|
|
|
<InstructorClassEditor input={input} setInput={setInput} error={error} />
|
2020-01-15 05:12:00 +00:00
|
|
|
|
|
|
|
<Form.Button loading={loading} error={error.non_field_errors}>
|
|
|
|
Submit
|
|
|
|
</Form.Button>
|
|
|
|
</Form>
|
|
|
|
:
|
|
|
|
<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>
|
|
|
|
);
|
|
|
|
};
|