Add UI for instructors to add and edit classes

apiserver/apiserver/api/models.py

@@ -73,6 +73,7 @@ class Session(models.Model):
     old_instructor = models.TextField(blank=True, null=True)
     datetime = models.DateTimeField(blank=True, null=True)
     cost = models.DecimalField(max_digits=5, decimal_places=2)
+    max_students = models.IntegerField(blank=True, null=True)
 
 class Training(models.Model):
     user = models.ForeignKey(User, related_name='training', blank=True, null=True, on_delete=models.SET_NULL)

apiserver/apiserver/api/serializers.py

@@ -236,6 +236,7 @@ class SessionSerializer(serializers.ModelSerializer):
     class Meta:
         model = models.Session
         fields = '__all__'
+        read_only_fields = ['old_instructor']
     def get_student_count(self, obj):
         return len(obj.students.all())
     def get_course_name(self, obj):

webclient/package.json

@@ -8,6 +8,7 @@
 		"@testing-library/user-event": "^7.1.2",
 		"moment": "^2.24.0",
 		"react": "^16.12.0",
+		"react-datetime": "^2.16.3",
 		"react-dom": "^16.12.0",
 		"react-quill": "^1.3.3",
 		"react-router-dom": "^5.1.2",

webclient/src/App.js

@@ -147,14 +147,14 @@ function App() {
 						</Route>
 
 						<Route path='/courses/:id'>
-							<CourseDetail token={token} />
+							<CourseDetail token={token} user={user} />
 						</Route>
 						<Route path='/courses'>
 							<Courses token={token} user={user} />
 						</Route>
 
 						<Route path='/classes/:id'>
-							<ClassDetail token={token} />
+							<ClassDetail token={token} user={user} />
 						</Route>
 						<Route path='/classes'>
 							<Classes token={token} />

webclient/src/Classes.js

@@ -3,8 +3,9 @@ import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-r
 import './light.css';
 import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
 import moment from 'moment';
-import { BasicTable, requester } from './utils.js';
+import { isInstructor, BasicTable, requester } from './utils.js';
 import { NotFound, PleaseLogin } from './Misc.js';
+import { InstructorClassDetail } from './InstructorClasses.js';
 
 function ClassTable(props) {
 	const { classes } = props;
@@ -86,7 +87,7 @@ export function Classes(props) {
 export function ClassDetail(props) {
 	const [clazz, setClass] = useState(false);
 	const [error, setError] = useState(false);
-	const { token } = props;
+	const { token, user } = props;
 	const { id } = useParams();
 
 	useEffect(() => {
@@ -107,6 +108,10 @@ export function ClassDetail(props) {
 					<div>
 						<Header size='large'>Class Details</Header>
 
+						{isInstructor(user) && <Segment padded>
+							<InstructorClassDetail clazz={clazz} setClass={setClass} {...props} />
+						</Segment>}
+
 						<BasicTable>
 							<Table.Body>
 								<Table.Row>

webclient/src/Courses.js

@@ -5,7 +5,8 @@ import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Me
 import moment from 'moment';
 import { isInstructor, requester } from './utils.js';
 import { NotFound, PleaseLogin } from './Misc.js';
-import { InstructorCourseList, InstructorCourseDetail } from './Instructor.js';
+import { InstructorCourseList, InstructorCourseDetail } from './InstructorCourses.js';
+import { InstructorClassList } from './InstructorClasses.js';
 
 export function Courses(props) {
 	const [courses, setCourses] = useState(false);
@@ -25,7 +26,7 @@ export function Courses(props) {
 		<Container>
 			<Header size='large'>Courses</Header>
 
-			{isInstructor && <Segment padded>
+			{isInstructor(user) && <Segment padded>
 				<InstructorCourseList courses={courses} setCourses={setCourses} {...props} />
 			</Segment>}
 
@@ -62,7 +63,7 @@ export function Courses(props) {
 export function CourseDetail(props) {
 	const [course, setCourse] = useState(false);
 	const [error, setError] = useState(false);
-	const { token } = props;
+	const { token, user } = props;
 	const { id } = useParams();
 
 	useEffect(() => {
@@ -83,7 +84,7 @@ export function CourseDetail(props) {
 					<div>
 						<Header size='large'>{course.name}</Header>
 
-						{isInstructor && <Segment padded>
+						{isInstructor(user) && <Segment padded>
 							<InstructorCourseDetail course={course} setCourse={setCourse} {...props} />
 						</Segment>}
 
@@ -97,6 +98,11 @@ export function CourseDetail(props) {
 						}
 
 						<Header size='medium'>Classes</Header>
+
+						{isInstructor(user) && <Segment padded>
+							<InstructorClassList course={course} setCourse={setCourse} {...props} />
+						</Segment>}
+
 						<Table basic='very'>
 							<Table.Header>
 								<Table.Row>

webclient/src/InstructorClasses.js

@@ -0,0 +1,170 @@
+import React, { useState, useEffect } from 'react';
+import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
+import * as Datetime from 'react-datetime';
+import 'react-datetime/css/react-datetime.css';
+import moment from 'moment';
+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';
+
+function InstructorClassEditor(props) {
+	const { input, setInput, error, editing } = props;
+
+	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 });
+	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'>
+			<Form.Field>
+				<label>Time and Date</label>
+				<Datetime
+					timeConstraints={{ minutes: { step: 15 } }}
+					value={ input.datetime ? moment.utc(input.datetime).local() : (new Date()).setMinutes(0) }
+					onChange={handleDatetime}
+				/>
+				{error.datetime &&
+					<Label pointing prompt>
+						{error.datetime}
+					</Label>
+				}
+			</Form.Field>
+
+			<Form.Input
+				label='Cost ($)'
+				{...makeProps('cost')}
+			/>
+
+			<Form.Input
+				label='Max Number of Students'
+				{...makeProps('max_students')}
+			/>
+
+			{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) => {
+		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} />
+
+					<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, user } = props;
+	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);
+		const data = { ...input, instructor: user.id, course: course.id };
+		requester('/sessions/', 'POST', token, data)
+		.then(res => {
+			setSuccess(res.id);
+			setInput({});
+			setLoading(false);
+			setError(false);
+			setOpen(false);
+			setCourse({ ...course, sessions: [ res, ...course.sessions ] });
+		})
+		.catch(err => {
+			setLoading(false);
+			console.log(err);
+			setError(err.data);
+		});
+	};
+
+	return (
+		<div>
+			<Header size='medium'>Instructor Panel</Header>
+
+			{!open && success && <p>Added! <Link to={'/classes/'+success}>View the class.</Link></p>}
+
+			{open ?
+				<Form onSubmit={handleSubmit}>
+					<Header size='small'>Add a Class</Header>
+
+					<InstructorClassEditor input={input} setInput={setInput} error={error} />
+
+					<Form.Button loading={loading} error={error.non_field_errors}>
+						Submit
+					</Form.Button>
+				</Form>
+			:
+				<Button onClick={() => setOpen(true)}>
+					Add a Class
+				</Button>
+			}
+		</div>
+	);
+};
+

webclient/src/InstructorCourses.js

@@ -77,13 +77,13 @@ export function InstructorCourseDetail(props) {
 		setLoading(true);
 		setSuccess(false);
 		const data = { ...input, is_old: false };
-		requester('/courses/'+id+'/', 'PUT', props.token, data)
+		requester('/courses/'+id+'/', 'PUT', token, data)
 		.then(res => {
 			setSuccess(true);
 			setLoading(false);
 			setError(false);
 			setOpen(false);
-			props.setCourse({...course, ...res});
+			setCourse({...course, ...res});
 		})
 		.catch(err => {
 			setLoading(false);
@@ -129,14 +129,14 @@ export function InstructorCourseList(props) {
 		setLoading(true);
 		setSuccess(false);
 		const data = { ...input, is_old: false };
-		requester('/courses/', 'POST', props.token, data)
+		requester('/courses/', 'POST', token, data)
 		.then(res => {
 			setSuccess(res.id);
 			setInput({});
 			setLoading(false);
 			setError(false);
 			setOpen(false);
-			props.setCourses([ ...courses, res ]);
+			setCourses([ ...courses, res ]);
 		})
 		.catch(err => {
 			setLoading(false);
@@ -169,4 +169,3 @@ export function InstructorCourseList(props) {
 		</div>
 	);
 };
-

webclient/src/light.css

@@ -63,7 +63,7 @@ body {
 	padding-bottom: 24rem;
 }
 
-.course-editor {
+.course-editor, .class-editor {
 	margin-bottom: 1rem;
 }
 
@@ -87,6 +87,11 @@ body {
 	margin-bottom: 1rem !important;
 }
 
+.rdtTimeToggle {
+	font-size: 2rem;
+	padding-top: 1rem;
+}
+
 .footer {
 	margin-top: -20rem;
 

webclient/yarn.lock

@@ -2989,7 +2989,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-create-react-class@^15.6.0:
+create-react-class@^15.5.2, create-react-class@^15.6.0:
   version "15.6.3"
   resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
   integrity sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==
@@ -7000,6 +7000,11 @@ oauth-sign@~0.9.0:
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
   integrity sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==
 
+object-assign@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
+  integrity sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I=
+
 object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -8337,7 +8342,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.3"
 
-prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -8534,6 +8539,16 @@ react-app-polyfill@^1.0.5:
     regenerator-runtime "^0.13.3"
     whatwg-fetch "^3.0.0"
 
+react-datetime@^2.16.3:
+  version "2.16.3"
+  resolved "https://registry.yarnpkg.com/react-datetime/-/react-datetime-2.16.3.tgz#7f9ac7d4014a939c11c761d0c22d1fb506cb505e"
+  integrity sha512-amWfb5iGEiyqjLmqCLlPpu2oN415jK8wX1qoTq7qn6EYiU7qQgbNHglww014PT4O/3G5eo/3kbJu/M/IxxTyGw==
+  dependencies:
+    create-react-class "^15.5.2"
+    object-assign "^3.0.0"
+    prop-types "^15.5.7"
+    react-onclickoutside "^6.5.0"
+
 react-dev-utils@^10.0.0:
   version "10.0.0"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.0.0.tgz#bd2d16426c7e4cbfed1b46fb9e2ac98ec06fcdfa"
@@ -8589,6 +8604,11 @@ react-is@^16.6.0, react-is@^16.6.3, react-is@^16.7.0, react-is@^16.8.1, react-is
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
   integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
 
+react-onclickoutside@^6.5.0:
+  version "6.9.0"
+  resolved "https://registry.yarnpkg.com/react-onclickoutside/-/react-onclickoutside-6.9.0.tgz#a54bc317ae8cf6131a5d78acea55a11067f37a1f"
+  integrity sha512-8ltIY3bC7oGhj2nPAvWOGi+xGFybPNhJM0V1H8hY/whNcXgmDeaeoCMPPd8VatrpTsUWjb/vGzrmu6SrXVty3A==
+
 react-popper@^1.3.4:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324"