2020-01-10 06:24:37 +00:00
|
|
|
import React, { useState, useEffect } from 'react';
|
2022-07-13 03:14:23 +00:00
|
|
|
import { Link, useParams } from 'react-router-dom';
|
2020-01-10 06:24:37 +00:00
|
|
|
import './light.css';
|
2022-07-13 03:14:23 +00:00
|
|
|
import { Button, Label, Container, Header, Segment, Table } from 'semantic-ui-react';
|
2020-02-24 04:07:18 +00:00
|
|
|
import moment from 'moment-timezone';
|
2023-06-03 19:43:14 +00:00
|
|
|
import { isInstructor, getInstructor, requester, useIsMobile } from './utils.js';
|
2022-07-13 03:14:23 +00:00
|
|
|
import { NotFound } from './Misc.js';
|
2020-01-16 01:32:52 +00:00
|
|
|
import { InstructorCourseList, InstructorCourseDetail } from './InstructorCourses.js';
|
|
|
|
import { InstructorClassList } from './InstructorClasses.js';
|
2020-01-10 06:24:37 +00:00
|
|
|
|
2022-01-28 07:47:25 +00:00
|
|
|
export const tags = {
|
|
|
|
Protospace: 'black',
|
|
|
|
Laser: 'red',
|
2022-01-28 08:30:53 +00:00
|
|
|
Wood: 'brown',
|
2022-01-28 07:47:25 +00:00
|
|
|
CNC: 'orange',
|
2022-05-03 22:44:43 +00:00
|
|
|
Crafts: 'yellow',
|
2022-01-28 07:47:25 +00:00
|
|
|
//name: 'olive',
|
|
|
|
Electronics: 'green',
|
|
|
|
Computers: 'teal',
|
|
|
|
Metal: 'blue',
|
|
|
|
//name: 'violet',
|
|
|
|
Event: 'purple',
|
|
|
|
Outing: 'pink',
|
|
|
|
Misc: 'grey',
|
|
|
|
};
|
|
|
|
|
2022-05-07 06:28:33 +00:00
|
|
|
let courseCache = false;
|
2022-01-28 07:47:25 +00:00
|
|
|
let tagFilterCache = false;
|
2020-02-17 00:19:44 +00:00
|
|
|
|
2020-01-10 06:24:37 +00:00
|
|
|
export function Courses(props) {
|
2020-02-17 00:19:44 +00:00
|
|
|
const [courses, setCourses] = useState(courseCache);
|
2022-01-28 07:47:25 +00:00
|
|
|
const [tagFilter, setTagFilter] = useState(tagFilterCache);
|
2020-01-15 05:12:00 +00:00
|
|
|
const { token, user } = props;
|
2023-06-03 19:43:14 +00:00
|
|
|
const isMobile = useIsMobile();
|
2020-01-10 06:24:37 +00:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
requester('/courses/', 'GET', token)
|
|
|
|
.then(res => {
|
|
|
|
setCourses(res.results);
|
2020-02-17 00:19:44 +00:00
|
|
|
courseCache = res.results;
|
2020-01-10 06:24:37 +00:00
|
|
|
})
|
|
|
|
.catch(err => {
|
|
|
|
console.log(err);
|
|
|
|
});
|
|
|
|
}, []);
|
|
|
|
|
2022-01-28 07:47:25 +00:00
|
|
|
const byTag = (x) => tagFilter ? x.tags.includes(tagFilter) : true;
|
|
|
|
|
2020-01-10 06:24:37 +00:00
|
|
|
return (
|
|
|
|
<Container>
|
2020-01-10 23:56:10 +00:00
|
|
|
<Header size='large'>Courses</Header>
|
2020-01-10 06:24:37 +00:00
|
|
|
|
2020-01-16 01:32:52 +00:00
|
|
|
{isInstructor(user) && <Segment padded>
|
2020-01-15 05:12:00 +00:00
|
|
|
<InstructorCourseList courses={courses} setCourses={setCourses} {...props} />
|
|
|
|
</Segment>}
|
|
|
|
|
2022-05-07 06:28:33 +00:00
|
|
|
<p>Filter by tag:</p>
|
|
|
|
|
|
|
|
<div className='coursetags'>
|
|
|
|
<div
|
|
|
|
className='labelbox'
|
|
|
|
style={{borderColor: tagFilter === false ? 'black' : 'transparent'}}
|
|
|
|
>
|
|
|
|
<Label
|
|
|
|
onClick={() => {
|
|
|
|
setTagFilter(false);
|
|
|
|
tagFilterCache = false;
|
|
|
|
}}
|
|
|
|
as='a'
|
|
|
|
tag
|
|
|
|
>
|
|
|
|
No Filter
|
|
|
|
</Label>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{Object.entries(tags).map(([name, color]) =>
|
2022-04-26 20:27:26 +00:00
|
|
|
<div
|
2022-05-07 06:28:33 +00:00
|
|
|
key={name}
|
2022-04-26 20:27:26 +00:00
|
|
|
className='labelbox'
|
2022-05-07 06:28:33 +00:00
|
|
|
style={{borderColor: tagFilter === name ? 'black' : 'transparent'}}
|
2022-04-26 20:27:26 +00:00
|
|
|
>
|
2022-01-28 07:47:25 +00:00
|
|
|
<Label
|
|
|
|
onClick={() => {
|
2022-05-07 06:28:33 +00:00
|
|
|
setTagFilter(name);
|
|
|
|
tagFilterCache = name;
|
2022-01-28 07:47:25 +00:00
|
|
|
}}
|
|
|
|
as='a'
|
2022-05-07 06:28:33 +00:00
|
|
|
color={color}
|
2022-01-28 07:47:25 +00:00
|
|
|
tag
|
|
|
|
>
|
2022-05-07 06:28:33 +00:00
|
|
|
{name}
|
2022-01-28 07:47:25 +00:00
|
|
|
</Label>
|
2022-04-26 20:27:26 +00:00
|
|
|
</div>
|
2022-05-07 06:28:33 +00:00
|
|
|
)}
|
|
|
|
</div>
|
2022-01-28 07:47:25 +00:00
|
|
|
|
2020-01-10 06:24:37 +00:00
|
|
|
{courses ?
|
|
|
|
<Table basic='very'>
|
2023-06-03 19:43:14 +00:00
|
|
|
{!isMobile && <Table.Header>
|
2020-01-10 06:24:37 +00:00
|
|
|
<Table.Row>
|
|
|
|
<Table.HeaderCell>Name</Table.HeaderCell>
|
2022-05-04 20:36:55 +00:00
|
|
|
<Table.HeaderCell>Interest</Table.HeaderCell>
|
2022-01-28 08:22:51 +00:00
|
|
|
<Table.HeaderCell></Table.HeaderCell>
|
2020-01-10 06:24:37 +00:00
|
|
|
</Table.Row>
|
2023-06-03 19:43:14 +00:00
|
|
|
</Table.Header>}
|
2020-01-10 06:24:37 +00:00
|
|
|
|
|
|
|
<Table.Body>
|
|
|
|
{courses.length ?
|
2022-01-28 07:47:25 +00:00
|
|
|
courses.filter(byTag).map(x =>
|
2020-01-18 01:36:53 +00:00
|
|
|
<Table.Row key={x.id}>
|
2020-01-10 06:24:37 +00:00
|
|
|
<Table.Cell>
|
|
|
|
<Link to={'/courses/'+x.id}>{x.name}</Link>
|
2022-01-28 08:22:51 +00:00
|
|
|
</Table.Cell>
|
|
|
|
<Table.Cell>
|
2023-06-03 19:43:14 +00:00
|
|
|
{isMobile && 'Interest: '}{!!x.num_interested &&
|
2022-05-05 20:26:56 +00:00
|
|
|
<>{x.num_interested} member{x.num_interested !== 1 && 's'}</>
|
|
|
|
}
|
2022-05-04 20:36:55 +00:00
|
|
|
</Table.Cell>
|
|
|
|
<Table.Cell>
|
2022-01-28 08:22:51 +00:00
|
|
|
{!!x.tags && x.tags.split(',').map(name =>
|
2022-05-07 06:28:33 +00:00
|
|
|
<Label key={name} color={tags[name]} tag>
|
2022-01-28 08:22:51 +00:00
|
|
|
{name}
|
|
|
|
</Label>
|
|
|
|
)}
|
2020-01-10 06:24:37 +00:00
|
|
|
</Table.Cell>
|
|
|
|
</Table.Row>
|
|
|
|
)
|
|
|
|
:
|
2020-01-15 05:12:00 +00:00
|
|
|
<Table.Row><Table.Cell>None</Table.Cell></Table.Row>
|
2020-01-10 06:24:37 +00:00
|
|
|
}
|
|
|
|
</Table.Body>
|
|
|
|
</Table>
|
|
|
|
:
|
|
|
|
<p>Loading...</p>
|
|
|
|
}
|
|
|
|
|
|
|
|
</Container>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export function CourseDetail(props) {
|
|
|
|
const [course, setCourse] = useState(false);
|
|
|
|
const [error, setError] = useState(false);
|
2022-05-24 05:02:15 +00:00
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const { token, user, refreshUser } = props;
|
2020-01-10 06:24:37 +00:00
|
|
|
const { id } = useParams();
|
2023-06-03 19:43:14 +00:00
|
|
|
const isMobile = useIsMobile();
|
2020-01-10 06:24:37 +00:00
|
|
|
|
2022-05-24 05:02:15 +00:00
|
|
|
const handleInterest = () => {
|
|
|
|
if (loading) return;
|
|
|
|
setLoading(true);
|
|
|
|
const data = { course: course.id };
|
|
|
|
requester('/interest/', 'POST', token, data)
|
|
|
|
.then(res => {
|
|
|
|
setError(false);
|
|
|
|
refreshUser();
|
|
|
|
})
|
|
|
|
.catch(err => {
|
|
|
|
console.log(err);
|
|
|
|
setError(true);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2020-01-10 06:24:37 +00:00
|
|
|
useEffect(() => {
|
|
|
|
requester('/courses/'+id+'/', 'GET', token)
|
|
|
|
.then(res => {
|
|
|
|
setCourse(res);
|
|
|
|
})
|
|
|
|
.catch(err => {
|
|
|
|
console.log(err);
|
|
|
|
setError(true);
|
|
|
|
});
|
|
|
|
}, []);
|
|
|
|
|
2022-01-30 00:04:44 +00:00
|
|
|
const now = new Date().toISOString();
|
|
|
|
|
2020-01-10 06:24:37 +00:00
|
|
|
return (
|
|
|
|
<Container>
|
|
|
|
{!error ?
|
|
|
|
course ?
|
|
|
|
<div>
|
|
|
|
<Header size='large'>{course.name}</Header>
|
|
|
|
|
2022-05-24 05:02:15 +00:00
|
|
|
<p>
|
|
|
|
{!!course.tags && course.tags.split(',').map(name =>
|
|
|
|
<Label key={name} color={tags[name]} tag size='small'>
|
|
|
|
{name}
|
|
|
|
</Label>
|
|
|
|
)}
|
|
|
|
</p>
|
|
|
|
|
|
|
|
{user &&
|
|
|
|
<p>
|
|
|
|
{user.interests.filter(x => !x.satisfied_by).map(x => x.course).includes(course.id) ?
|
|
|
|
'Interested ✅'
|
|
|
|
:
|
|
|
|
<Button
|
|
|
|
size='tiny'
|
|
|
|
loading={loading}
|
|
|
|
onClick={handleInterest}
|
|
|
|
>
|
|
|
|
Interest +
|
|
|
|
</Button>
|
|
|
|
}
|
|
|
|
</p>
|
|
|
|
}
|
|
|
|
|
2020-01-16 01:32:52 +00:00
|
|
|
{isInstructor(user) && <Segment padded>
|
2020-01-15 06:24:38 +00:00
|
|
|
<InstructorCourseDetail course={course} setCourse={setCourse} {...props} />
|
|
|
|
</Segment>}
|
|
|
|
|
2020-01-10 06:24:37 +00:00
|
|
|
<Header size='medium'>Course Description</Header>
|
2020-01-15 05:12:00 +00:00
|
|
|
{course.is_old ?
|
|
|
|
course.description.split('\n').map((x, i) =>
|
|
|
|
<p key={i}>{x}</p>
|
|
|
|
)
|
|
|
|
:
|
|
|
|
<div dangerouslySetInnerHTML={{__html: course.description}} />
|
|
|
|
}
|
2020-01-10 06:24:37 +00:00
|
|
|
|
|
|
|
<Header size='medium'>Classes</Header>
|
2020-01-16 01:32:52 +00:00
|
|
|
|
|
|
|
{isInstructor(user) && <Segment padded>
|
|
|
|
<InstructorClassList course={course} setCourse={setCourse} {...props} />
|
|
|
|
</Segment>}
|
|
|
|
|
2020-01-10 06:24:37 +00:00
|
|
|
<Table basic='very'>
|
2023-06-03 19:43:14 +00:00
|
|
|
{!isMobile && <Table.Header>
|
2020-01-10 06:24:37 +00:00
|
|
|
<Table.Row>
|
|
|
|
<Table.HeaderCell>Date</Table.HeaderCell>
|
|
|
|
<Table.HeaderCell>Time</Table.HeaderCell>
|
|
|
|
<Table.HeaderCell>Instructor</Table.HeaderCell>
|
|
|
|
<Table.HeaderCell>Cost</Table.HeaderCell>
|
2022-01-30 00:04:44 +00:00
|
|
|
<Table.HeaderCell>Students</Table.HeaderCell>
|
2020-01-10 06:24:37 +00:00
|
|
|
</Table.Row>
|
2023-06-03 19:43:14 +00:00
|
|
|
</Table.Header>}
|
2020-01-10 06:24:37 +00:00
|
|
|
|
|
|
|
<Table.Body>
|
|
|
|
{course.sessions.length ?
|
2023-05-06 22:55:05 +00:00
|
|
|
course.sessions.sort((a, b) => a.datetime < b.datetime ? 1 : -1).map(x =>
|
2022-01-30 00:04:44 +00:00
|
|
|
<Table.Row key={x.id} active={x.datetime < now || x.is_cancelled}>
|
2020-01-10 06:24:37 +00:00
|
|
|
<Table.Cell>
|
|
|
|
<Link to={'/classes/'+x.id}>
|
2023-06-03 19:43:14 +00:00
|
|
|
{!isMobile && <span> </span>}{moment.utc(x.datetime).tz('America/Edmonton').format('ll')}
|
2020-01-10 06:24:37 +00:00
|
|
|
</Link>
|
|
|
|
</Table.Cell>
|
2023-06-03 19:43:14 +00:00
|
|
|
<Table.Cell>{isMobile && 'Time: '}{x.is_cancelled ? 'Cancelled' : moment.utc(x.datetime).tz('America/Edmonton').format('LT')}</Table.Cell>
|
|
|
|
<Table.Cell>{isMobile && 'Instructor: '}{getInstructor(x)}</Table.Cell>
|
|
|
|
<Table.Cell>{isMobile && 'Cost: '}{x.cost === '0.00' ? 'Free' : '$'+x.cost}</Table.Cell>
|
2022-01-30 00:04:44 +00:00
|
|
|
<Table.Cell>
|
2023-06-03 19:43:14 +00:00
|
|
|
{isMobile && 'Students: '}{!!x.max_students ?
|
2022-01-30 00:04:44 +00:00
|
|
|
x.max_students <= x.student_count ?
|
|
|
|
'Full'
|
|
|
|
:
|
|
|
|
x.student_count + ' / ' + x.max_students
|
|
|
|
:
|
|
|
|
x.student_count
|
|
|
|
}
|
|
|
|
</Table.Cell>
|
2020-01-10 06:24:37 +00:00
|
|
|
</Table.Row>
|
|
|
|
)
|
|
|
|
:
|
2020-01-15 05:12:00 +00:00
|
|
|
<Table.Row><Table.Cell>None</Table.Cell></Table.Row>
|
2020-01-10 06:24:37 +00:00
|
|
|
}
|
|
|
|
</Table.Body>
|
|
|
|
</Table>
|
|
|
|
</div>
|
|
|
|
:
|
|
|
|
<p>Loading...</p>
|
|
|
|
:
|
|
|
|
<NotFound />
|
|
|
|
}
|
|
|
|
</Container>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|