From 6698c04e91d573ceb5d6a175488244028217b765 Mon Sep 17 00:00:00 2001 From: Tanner Collin Date: Fri, 10 Jan 2020 06:24:37 +0000 Subject: [PATCH] Add courses and classes to webclient --- webclient/src/App.js | 23 ++++++ webclient/src/Classes.js | 148 ++++++++++++++++++++++++++++++++++ webclient/src/Courses.js | 133 ++++++++++++++++++++++++++++++ webclient/src/Transactions.js | 2 +- 4 files changed, 305 insertions(+), 1 deletion(-) create mode 100644 webclient/src/Classes.js create mode 100644 webclient/src/Courses.js diff --git a/webclient/src/App.js b/webclient/src/App.js index 6803af6..c1e9685 100644 --- a/webclient/src/App.js +++ b/webclient/src/App.js @@ -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() { /> + @@ -122,6 +131,20 @@ function App() { + + + + + + + + + + + + + + diff --git a/webclient/src/Classes.js b/webclient/src/Classes.js new file mode 100644 index 0000000..052d1d1 --- /dev/null +++ b/webclient/src/Classes.js @@ -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 ( + +
Most Recent Classes
+ + {classes ? + + + + ID + Name + Date + Instructor + Cost + Students + + + + + {classes.length ? + classes.map((x, i) => + + {x.id} + {x.course.name} + + + {moment.utc(x.datetime).format('LL')} + + + {getInstructor(x)} + {x.cost === '0.00' ? 'Free' : '$'+x.cost} + {x.student_count} + + ) + : +

None

+ } + +
+ : +

Loading...

+ } + + ); +}; + +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 ( + + {!error ? + clazz ? +
+
Class Detail
+ + + + + Name: + + + {clazz.course.name} + + + + + Date: + + {moment.utc(clazz.datetime).format('LL')} + + + + Time: + + {moment.utc(clazz.datetime).format('LT')} + + + + Instructor: + {getInstructor(clazz)} + + + Cost: + {clazz.cost === '0.00' ? 'Free' : '$'+clazz.cost} + + + Students: + {clazz.student_count} + + +
+ +
Attendance
+
+ : +

Loading...

+ : + + } + + ); +}; + diff --git a/webclient/src/Courses.js b/webclient/src/Courses.js new file mode 100644 index 0000000..23deaee --- /dev/null +++ b/webclient/src/Courses.js @@ -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 ( + +
Courses / Events
+ + {courses ? + + + + ID + Name + + + + + {courses.length ? + courses.map((x, i) => + + {x.id} + + {x.name} + + + ) + : +

None

+ } + +
+ : +

Loading...

+ } + + + ); +}; + +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 ( + + {!error ? + course ? +
+
{course.name}
+ +
Course Description
+ {course.description.split('\n').map((x, i) => +

{x}

+ )} + +
Classes
+ + + + Date + Time + Instructor + Cost + + + + + {course.sessions.length ? + course.sessions.sort((a, b) => a.datetime < b.datetime).map((x, i) => + + + + {moment.utc(x.datetime).format('LL')} + + + {moment.utc(x.datetime).format('LT')} + {getInstructor(x)} + {x.cost === '0.00' ? 'Free' : '$'+x.cost} + + ) + : +

None

+ } + +
+
+ : +

Loading...

+ : + + } + + ); +}; + diff --git a/webclient/src/Transactions.js b/webclient/src/Transactions.js index ac70d50..dd82143 100644 --- a/webclient/src/Transactions.js +++ b/webclient/src/Transactions.js @@ -43,7 +43,7 @@ export function Transactions(props) { ); -} +}; export function TransactionDetail(props) { const { user } = props;