Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
SRCT
schedules
Commits
5e5b1258
Commit
5e5b1258
authored
Sep 09, 2018
by
Zac Wood
Browse files
Added a bunch of documentation for components
parent
c9553734
Pipeline
#2867
passed with stage
in 2 minutes and 22 seconds
Changes
9
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
schedules_web/src/components/App.tsx
View file @
5e5b1258
...
...
@@ -6,6 +6,9 @@ import Header from './Header';
require
(
'
../css/core.css
'
);
/**
* The root component for the app
*/
const
App
=
()
=>
(
<
div
>
<
Container
>
...
...
schedules_web/src/components/CourseSectionCard.tsx
View file @
5e5b1258
...
...
@@ -11,6 +11,10 @@ interface CourseSectionCardProps {
require
(
'
../css/button-text-override.css
'
);
/**
* Renders information about a single course section, and includes a
* button for adding/removing it from the current schedule.
*/
const
CourseSectionCard
=
({
courseSection
,
courseSectionAction
,
...
...
schedules_web/src/components/CourseSectionList.tsx
View file @
5e5b1258
...
...
@@ -9,6 +9,10 @@ interface CourseSectionListProps {
destructive
?:
boolean
;
}
/**
* Renders a list of CourseSectionCards for every course section in
* the current schedule.
*/
const
CourseSectionList
=
({
courseSections
,
courseSectionAction
,
...
...
schedules_web/src/components/ExportModal.tsx
View file @
5e5b1258
...
...
@@ -2,7 +2,7 @@ import * as React from 'react';
import
{
Button
,
Modal
,
ModalHeader
,
ModalBody
,
ModalFooter
}
from
'
reactstrap
'
;
import
{
downloadFile
}
from
'
../util/utilities
'
;
interface
Props
{
interface
ExportModal
Props
{
isModalOpen
:
boolean
;
toggleModal
:
()
=>
void
;
calendarUrl
:
()
=>
string
;
...
...
@@ -10,45 +10,50 @@ interface Props {
downloadIcs
:
()
=>
Promise
<
void
>
;
}
class
ExportModal
extends
React
.
Component
<
Props
,
{}
>
{
render
()
{
const
{
isModalOpen
,
toggleModal
,
calendarUrl
,
openCalendarAsWebcal
,
downloadIcs
}
=
this
.
props
;
return
(
<
Modal
isOpen
=
{
isModalOpen
}
toggle
=
{
toggleModal
}
>
<
ModalHeader
toggle
=
{
toggleModal
}
>
Your calendar has been generated!
</
ModalHeader
>
<
ModalBody
>
<
h5
>
Apple Calendar
</
h5
>
To add your schedule to Apple Calendar, click the "Add to calendar" button below. If you are on a
device running macOS or iOS, this will open a dialogue which will walk you through adding the
calendar.
<
hr
/>
<
h5
>
Google Calendar
</
h5
>
<
strong
>
On desktop:
</
strong
>
<
br
/>
Open your
<
a
href
=
"https://calendar.google.com/"
>
Google Calendar
</
a
>
. Click the "Settings" button in
the top right, and then click the Settings tab. In the menu on the left, click "Add calendar" and
"From URL". Now, paste the following link inside the text box:
<
br
/>
<
code
>
{
calendarUrl
()
}
</
code
>
<
br
/>
<
strong
>
On mobile (Android only):
</
strong
>
<
br
/>
Click the "Download calendar file" button. This will download the calendar file which you may then
open and add to your calendar.
<
hr
/>
<
h5
>
.ics file
</
h5
>
To download a .ics file containing your schedule, click the "Download calendar file" button below.
</
ModalBody
>
<
ModalFooter
>
<
Button
color
=
"secondary"
onClick
=
{
downloadIcs
}
>
Download calendar file
</
Button
>
<
Button
color
=
"primary"
onClick
=
{
openCalendarAsWebcal
}
>
Add to calendar
</
Button
>
{
'
'
}
</
ModalFooter
>
</
Modal
>
);
}
}
/**
* Modal view that contains buttons for exporting your schedule as
* well as instructions for importing your schedule into different
* calendar managers
*/
const
ExportModal
=
({
isModalOpen
,
toggleModal
,
calendarUrl
,
openCalendarAsWebcal
,
downloadIcs
,
}:
ExportModalProps
)
=>
(
<
Modal
isOpen
=
{
isModalOpen
}
toggle
=
{
toggleModal
}
>
<
ModalHeader
toggle
=
{
toggleModal
}
>
Your calendar has been generated!
</
ModalHeader
>
<
ModalBody
>
<
h5
>
Apple Calendar
</
h5
>
To add your schedule to Apple Calendar, click the "Add to calendar" button below. If you are on a device
running macOS or iOS, this will open a dialogue which will walk you through adding the calendar.
<
hr
/>
<
h5
>
Google Calendar
</
h5
>
<
strong
>
On desktop:
</
strong
>
<
br
/>
Open your
<
a
href
=
"https://calendar.google.com/"
>
Google Calendar
</
a
>
. Click the "Settings" button in the top
right, and then click the Settings tab. In the menu on the left, click "Add calendar" and "From URL". Now,
paste the following link inside the text box:
<
br
/>
<
code
>
{
calendarUrl
()
}
</
code
>
<
br
/>
<
strong
>
On mobile (Android only):
</
strong
>
<
br
/>
Click the "Download calendar file" button. This will download the calendar file which you may then open and
add to your calendar.
<
hr
/>
<
h5
>
.ics file
</
h5
>
To download a .ics file containing your schedule, click the "Download calendar file" button below.
</
ModalBody
>
<
ModalFooter
>
<
Button
color
=
"secondary"
onClick
=
{
downloadIcs
}
>
Download calendar file
</
Button
>
<
Button
color
=
"primary"
onClick
=
{
openCalendarAsWebcal
}
>
Add to calendar
</
Button
>
{
'
'
}
</
ModalFooter
>
</
Modal
>
);
export
default
ExportModal
;
schedules_web/src/components/Header.tsx
View file @
5e5b1258
import
*
as
React
from
'
react
'
;
import
{
Col
,
Row
,
UncontrolledTooltip
}
from
'
reactstrap
'
;
/**
* Renders the app header with information and instructions for using Schedules.
*/
const
Header
=
()
=>
(
<
div
>
<
Row
className
=
"justify-content-center my-5"
>
...
...
schedules_web/src/components/ScheduleBadge.tsx
View file @
5e5b1258
...
...
@@ -19,6 +19,12 @@ interface State {
require
(
'
../css/icon-badge.css
'
);
/**
* Contains all functionality for viewing your schedule, such as the
* shopping cart, list of course sections, and the generate calendar modal.
*
* TODO: Split this component up
*/
class
ScheduleBadge
extends
React
.
Component
<
ScheduleBadgeProps
,
State
>
{
constructor
(
props
:
ScheduleBadgeProps
)
{
super
(
props
);
...
...
schedules_web/src/components/ScheduleRoot.tsx
View file @
5e5b1258
...
...
@@ -10,6 +10,11 @@ interface ScheduleRootProps {
downloadIcs
:
()
=>
Promise
<
void
>
;
}
/**
* Weird component that renders the ScheduleBadge
*
* TODO: Remove this component? Or maybe refactor some of ScheduleBadge into this
*/
const
ScheduleRoot
=
({
schedule
,
removeCourseSection
,
...
...
schedules_web/src/components/SearchRoot.tsx
View file @
5e5b1258
...
...
@@ -11,6 +11,10 @@ interface SearchRootProps {
addCourseSection
:
(
courseSectionToAdd
:
CourseSection
)
=>
void
;
}
/**
* Renders the SearchBar and a list of CourseSections returned from the Search.
* Also renders an error if there is one.
*/
const
SearchRoot
=
({
search
,
searchCourseSections
,
addCourseSection
}:
SearchRootProps
)
=>
(
<
div
>
<
SearchBar
onSearch
=
{
searchCourseSections
}
/>
...
...
@@ -26,6 +30,9 @@ const SearchRoot = ({ search, searchCourseSections, addCourseSection }: SearchRo
</
div
>
);
/**
* Renders a basic error message.
*/
const
Error
=
()
=>
(
<
Row
className
=
"justify-content-center"
>
<
Col
md
=
"8"
>
...
...
schedules_web/src/containers/Search.tsx
View file @
5e5b1258
...
...
@@ -4,10 +4,13 @@ import { searchCourseSections } from '../actions/search/search.actions';
import
SearchRoot
from
'
../components/SearchRoot
'
;
import
{
State
}
from
'
../reducers
'
;
// Takes the current Redux state and returns objects which will be
// passed to the component as Props
const
mapStateToProps
=
(
state
:
State
)
=>
({
search
:
state
.
search
,
});
// Pass mapStateToProps and other values to the component's props
export
default
connect
(
mapStateToProps
,
{
searchCourseSections
,
addCourseSection
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment