Add courses and classes to webclient
This commit is contained in:
parent
c80bf1e56a
commit
6698c04e91
|
|
@ -8,6 +8,8 @@ import { Home } from './Home.js';
|
|||
import { Transactions, TransactionDetail } from './Transactions.js';
|
||||
import { Cards } from './Cards.js';
|
||||
import { Training } from './Training.js';
|
||||
import { Courses, CourseDetail } from './Courses.js';
|
||||
import { Classes, ClassDetail } from './Classes.js';
|
||||
import { NotFound, PleaseLogin } from './Misc.js';
|
||||
|
||||
function App() {
|
||||
|
|
@ -85,6 +87,13 @@ function App() {
|
|||
/>
|
||||
<Dropdown.Item
|
||||
content='Courses'
|
||||
as={Link}
|
||||
to='/courses'
|
||||
/>
|
||||
<Dropdown.Item
|
||||
content='Classes'
|
||||
as={Link}
|
||||
to='/classes'
|
||||
/>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
|
|
@ -122,6 +131,20 @@ function App() {
|
|||
<Training user={user} />
|
||||
</Route>
|
||||
|
||||
<Route path='/courses/:id'>
|
||||
<CourseDetail token={token} />
|
||||
</Route>
|
||||
<Route path='/courses'>
|
||||
<Courses token={token} />
|
||||
</Route>
|
||||
|
||||
<Route path='/classes/:id'>
|
||||
<ClassDetail token={token} />
|
||||
</Route>
|
||||
<Route path='/classes'>
|
||||
<Classes token={token} />
|
||||
</Route>
|
||||
|
||||
<Route path='/:page'>
|
||||
<NotFound />
|
||||
</Route>
|
||||
|
|
|
|||
148
webclient/src/Classes.js
Normal file
148
webclient/src/Classes.js
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
|
||||
import './light.css';
|
||||
import Logo from './logo.svg';
|
||||
import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
|
||||
import moment from 'moment';
|
||||
import { requester } from './utils.js';
|
||||
import { NotFound, PleaseLogin } from './Misc.js';
|
||||
|
||||
export function Classes(props) {
|
||||
const [classes, setClasses] = useState(false);
|
||||
const { token } = props;
|
||||
|
||||
useEffect(() => {
|
||||
requester('/sessions/', 'GET', token)
|
||||
.then(res => {
|
||||
console.log(res);
|
||||
setClasses(res.results);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const getInstructor = (session) =>
|
||||
session.instructor ? session.instructor.first_name : session.old_instructor;
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Header size='large'>Most Recent Classes</Header>
|
||||
|
||||
{classes ?
|
||||
<Table basic='very'>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>ID</Table.HeaderCell>
|
||||
<Table.HeaderCell>Name</Table.HeaderCell>
|
||||
<Table.HeaderCell>Date</Table.HeaderCell>
|
||||
<Table.HeaderCell>Instructor</Table.HeaderCell>
|
||||
<Table.HeaderCell>Cost</Table.HeaderCell>
|
||||
<Table.HeaderCell>Students</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
|
||||
<Table.Body>
|
||||
{classes.length ?
|
||||
classes.map((x, i) =>
|
||||
<Table.Row key={i}>
|
||||
<Table.Cell>{x.id}</Table.Cell>
|
||||
<Table.Cell>{x.course.name}</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Link to={'/classes/'+x.id}>
|
||||
{moment.utc(x.datetime).format('LL')}
|
||||
</Link>
|
||||
</Table.Cell>
|
||||
<Table.Cell>{getInstructor(x)}</Table.Cell>
|
||||
<Table.Cell>{x.cost === '0.00' ? 'Free' : '$'+x.cost}</Table.Cell>
|
||||
<Table.Cell>{x.student_count}</Table.Cell>
|
||||
</Table.Row>
|
||||
)
|
||||
:
|
||||
<p>None</p>
|
||||
}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
:
|
||||
<p>Loading...</p>
|
||||
}
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export function ClassDetail(props) {
|
||||
const [clazz, setClass] = useState(false);
|
||||
const [error, setError] = useState(false);
|
||||
const { token } = props;
|
||||
const { id } = useParams();
|
||||
|
||||
useEffect(() => {
|
||||
requester('/sessions/'+id+'/', 'GET', token)
|
||||
.then(res => {
|
||||
console.log(res);
|
||||
setClass(res);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
setError(true);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const getInstructor = (session) =>
|
||||
session.instructor ? session.instructor.first_name : session.old_instructor;
|
||||
|
||||
return (
|
||||
<Container>
|
||||
{!error ?
|
||||
clazz ?
|
||||
<div>
|
||||
<Header size='large'>Class Detail</Header>
|
||||
|
||||
<Table unstackable basic='very'>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Cell>Name:</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Link to={'/courses/'+clazz.course.id}>
|
||||
{clazz.course.name}
|
||||
</Link>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>Date:</Table.Cell>
|
||||
<Table.Cell>
|
||||
{moment.utc(clazz.datetime).format('LL')}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>Time:</Table.Cell>
|
||||
<Table.Cell>
|
||||
{moment.utc(clazz.datetime).format('LT')}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>Instructor:</Table.Cell>
|
||||
<Table.Cell>{getInstructor(clazz)}</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>Cost:</Table.Cell>
|
||||
<Table.Cell>{clazz.cost === '0.00' ? 'Free' : '$'+clazz.cost}</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>Students:</Table.Cell>
|
||||
<Table.Cell>{clazz.student_count}</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table>
|
||||
|
||||
<Header size='medium'>Attendance</Header>
|
||||
</div>
|
||||
:
|
||||
<p>Loading...</p>
|
||||
:
|
||||
<NotFound />
|
||||
}
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
133
webclient/src/Courses.js
Normal file
133
webclient/src/Courses.js
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
|
||||
import './light.css';
|
||||
import Logo from './logo.svg';
|
||||
import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
|
||||
import moment from 'moment';
|
||||
import { requester } from './utils.js';
|
||||
import { NotFound, PleaseLogin } from './Misc.js';
|
||||
|
||||
export function Courses(props) {
|
||||
const [courses, setCourses] = useState(false);
|
||||
const { token } = props;
|
||||
|
||||
useEffect(() => {
|
||||
requester('/courses/', 'GET', token)
|
||||
.then(res => {
|
||||
console.log(res);
|
||||
setCourses(res.results);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<Header size='large'>Courses / Events</Header>
|
||||
|
||||
{courses ?
|
||||
<Table basic='very'>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>ID</Table.HeaderCell>
|
||||
<Table.HeaderCell>Name</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
|
||||
<Table.Body>
|
||||
{courses.length ?
|
||||
courses.map((x, i) =>
|
||||
<Table.Row key={i}>
|
||||
<Table.Cell>{x.id}</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Link to={'/courses/'+x.id}>{x.name}</Link>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
)
|
||||
:
|
||||
<p>None</p>
|
||||
}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
:
|
||||
<p>Loading...</p>
|
||||
}
|
||||
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export function CourseDetail(props) {
|
||||
const [course, setCourse] = useState(false);
|
||||
const [error, setError] = useState(false);
|
||||
const { token } = props;
|
||||
const { id } = useParams();
|
||||
|
||||
useEffect(() => {
|
||||
requester('/courses/'+id+'/', 'GET', token)
|
||||
.then(res => {
|
||||
console.log(res);
|
||||
setCourse(res);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
setError(true);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const getInstructor = (session) =>
|
||||
session.instructor ? session.instructor.first_name : session.old_instructor;
|
||||
|
||||
return (
|
||||
<Container>
|
||||
{!error ?
|
||||
course ?
|
||||
<div>
|
||||
<Header size='large'>{course.name}</Header>
|
||||
|
||||
<Header size='medium'>Course Description</Header>
|
||||
{course.description.split('\n').map((x, i) =>
|
||||
<p key={i}>{x}</p>
|
||||
)}
|
||||
|
||||
<Header size='medium'>Classes</Header>
|
||||
<Table basic='very'>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>Date</Table.HeaderCell>
|
||||
<Table.HeaderCell>Time</Table.HeaderCell>
|
||||
<Table.HeaderCell>Instructor</Table.HeaderCell>
|
||||
<Table.HeaderCell>Cost</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
|
||||
<Table.Body>
|
||||
{course.sessions.length ?
|
||||
course.sessions.sort((a, b) => a.datetime < b.datetime).map((x, i) =>
|
||||
<Table.Row key={i}>
|
||||
<Table.Cell>
|
||||
<Link to={'/classes/'+x.id}>
|
||||
{moment.utc(x.datetime).format('LL')}
|
||||
</Link>
|
||||
</Table.Cell>
|
||||
<Table.Cell>{moment.utc(x.datetime).format('LT')}</Table.Cell>
|
||||
<Table.Cell>{getInstructor(x)}</Table.Cell>
|
||||
<Table.Cell>{x.cost === '0.00' ? 'Free' : '$'+x.cost}</Table.Cell>
|
||||
</Table.Row>
|
||||
)
|
||||
:
|
||||
<p>None</p>
|
||||
}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
</div>
|
||||
:
|
||||
<p>Loading...</p>
|
||||
:
|
||||
<NotFound />
|
||||
}
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -43,7 +43,7 @@ export function Transactions(props) {
|
|||
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export function TransactionDetail(props) {
|
||||
const { user } = props;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user