Add course description to class page

apiserver/apiserver/api/serializers.py

@@ -449,9 +449,14 @@ class StudentTrainingSerializer(TrainingSerializer):
     attendance_status = serializers.ChoiceField(['Waiting for payment', 'Withdrawn'])
 
 
+class CourseSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = models.Course
+        fields = ['id', 'name', 'is_old', 'description']
+
 class SessionSerializer(serializers.ModelSerializer):
     student_count = serializers.SerializerMethodField()
-    course_name = serializers.SerializerMethodField()
+    course_data = serializers.SerializerMethodField()
     instructor_name = serializers.SerializerMethodField()
     datetime = serializers.DateTimeField()
     course = serializers.PrimaryKeyRelatedField(queryset=models.Course.objects.all())
@@ -467,8 +472,8 @@ class SessionSerializer(serializers.ModelSerializer):
     def get_student_count(self, obj):
         return len([x for x in obj.students.all() if x.attendance_status != 'Withdrawn'])
 
-    def get_course_name(self, obj):
-        return obj.course.name
+    def get_course_data(self, obj):
+        return CourseSerializer(obj.course).data
 
     def get_instructor_name(self, obj):
         if obj.instructor and hasattr(obj.instructor, 'member'):
@@ -481,11 +486,6 @@ class SessionListSerializer(SessionSerializer):
     students = None
 
 
-class CourseSerializer(serializers.ModelSerializer):
-    class Meta:
-        model = models.Course
-        fields = ['id', 'name']
-
 class CourseDetailSerializer(serializers.ModelSerializer):
     sessions = SessionListSerializer(many=True, read_only=True)
     name = serializers.CharField(max_length=100)

webclient/src/Classes.js

@@ -28,7 +28,7 @@ function ClassTable(props) {
 				{classes.length ?
 					classes.map(x =>
 						<Table.Row key={x.id}>
-							<Table.Cell>{x.course_name}</Table.Cell>
+							<Table.Cell>{x.course_data.name}</Table.Cell>
 							<Table.Cell>
 								<Link to={'/classes/'+x.id}>
 									{moment.utc(x.datetime).tz('America/Edmonton').format('ll')}
@@ -170,7 +170,7 @@ export function ClassDetail(props) {
 									<Table.Cell>Name:</Table.Cell>
 									<Table.Cell>
 										<Link to={'/courses/'+clazz.course}>
-											{clazz.course_name}
+											{clazz.course_data.name}
 										</Link>
 									</Table.Cell>
 								</Table.Row>
@@ -201,6 +201,15 @@ export function ClassDetail(props) {
 							</Table.Body>
 						</BasicTable>
 
+						<Header size='medium'>Course Description</Header>
+						{clazz.course_data.is_old ?
+							clazz.course_data.description.split('\n').map((x, i) =>
+								<p key={i}>{x}</p>
+							)
+						:
+							<div dangerouslySetInnerHTML={{__html: clazz.course_data.description}} />
+						}
+
 						<Header size='medium'>Attendance</Header>
 
 						{(isAdmin(user) || clazz.instructor === user.id) &&
@@ -230,7 +239,7 @@ export function ClassDetail(props) {
 											<p>Please pay the course fee of ${clazz.cost} to confirm your attendance.</p>
 											<PayPalPayNow
 												amount={clazz.cost}
-												name={clazz.course_name}
+												name={clazz.course_data.name}
 												custom={JSON.stringify({ training: userTraining.id })}
 											/>
 										</div>

webclient/src/InstructorClasses.js

@@ -16,7 +16,7 @@ class AttendanceSheet extends React.Component {
 
 		return (
 			<div style={{ padding: '3rem' }}>
-				<Header size='medium'>{clazz.course_name} Attendance</Header>
+				<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.' : '.'}
@@ -406,7 +406,7 @@ export function InstructorClassList(props) {
 								{sameClasses.length ?
 									sameClasses.map(x =>
 										<p>
-											{moment.utc(x.datetime).tz('America/Edmonton').format('LT')} — {x.course_name}
+											{moment.utc(x.datetime).tz('America/Edmonton').format('LT')} — {x.course_data.name}
 										</p>
 									)
 								:

webclient/src/InstructorCourses.js

@@ -173,7 +173,10 @@ export function InstructorCourseList(props) {
 		<div>
 			<Header size='medium'>Instructor Panel</Header>
 
-			{!open && success && <p>Added to bottom of course list! <Link to={'/courses/'+success}>View the course.</Link></p>}
+			{!open && success && <>
+				<p>Added to bottom of course list!</p>
+				<p><Link to={'/courses/'+success}>View the course.</Link></p>
+			</>}
 
 			{open ?
 				<Form onSubmit={handleSubmit}>

webclient/src/Training.js

@@ -94,7 +94,7 @@ export function TrainingList(props) {
 			<Table.Body>
 				{training.slice().sort((a, b) => a.session.datetime < b.session.datetime ? 1 : -1).map(x =>
 					<Table.Row key={x.id}>
-						<Table.Cell>{x.session.course_name}</Table.Cell>
+						<Table.Cell>{x.session.course_data.name}</Table.Cell>
 						<Table.Cell>
 							<Link to={'/classes/'+x.session.id}>{moment(x.session.datetime).format('MMMM Do YYYY')}</Link>
 						</Table.Cell>