Commit df064eb3 authored by Zac Wood's avatar Zac Wood
Browse files

Started work on adding a modal for exporting schedules

the functionality isn't there yet but the modal pops up and looks
pretty
parent ac0d1848
Pipeline #2853 passed with stage
in 2 minutes and 13 seconds
import * as React from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
interface Props {
isModalOpen: boolean;
toggleModal: () => void;
}
class ExportModal extends React.Component<Props, {}> {
render() {
const { isModalOpen, toggleModal } = this.props;
return (
<Modal isOpen={isModalOpen} toggle={toggleModal}>
<ModalHeader toggle={toggleModal}>Your calendar has been generated!</ModalHeader>
<ModalBody>
Here are instructions for adding you calendar to a bunch of different calendar managers.
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={toggleModal}>
Download calendar file
</Button>
<Button color="primary" onClick={toggleModal}>
Add to calendar
</Button>{' '}
</ModalFooter>
</Modal>
);
}
}
export default ExportModal;
......@@ -2,6 +2,7 @@ import * as React from 'react';
import { Button, Card, CardBody, CardTitle, Collapse, Row } from 'reactstrap';
import CourseSection from '../util/CourseSection';
import CourseSectionList from './CourseSectionList';
import ExportModal from './ExportModal';
interface ScheduleBadgeProps {
schedule: CourseSection[];
......@@ -11,6 +12,7 @@ interface ScheduleBadgeProps {
interface State {
collapse: boolean;
isModalOpen: boolean;
}
require('../css/icon-badge.css');
......@@ -19,10 +21,11 @@ class ScheduleBadge extends React.Component<ScheduleBadgeProps, State> {
constructor(props: ScheduleBadgeProps) {
super(props);
this.state = { collapse: false };
this.state = { collapse: false, isModalOpen: false };
}
toggle = () => this.setState({ collapse: !this.state.collapse });
toggleCollapse = () => this.setState({ collapse: !this.state.collapse });
toggleModal = () => this.setState({ isModalOpen: !this.state.isModalOpen });
render() {
const { schedule, removeCourseSection, generateCalendar } = this.props;
......@@ -35,7 +38,7 @@ class ScheduleBadge extends React.Component<ScheduleBadgeProps, State> {
<i className="fa fas fa-shopping-bag fa-stack-1x" />
</span>
}
onClick={this.toggle}
onClick={this.toggleCollapse}
id="cart"
/>
</Row>
......@@ -46,7 +49,7 @@ class ScheduleBadge extends React.Component<ScheduleBadgeProps, State> {
<Row className="my-3">
<h1 className="px-5">Your Schedule</h1>
<Button className="ml-auto px-5" outline color="danger" onClick={this.toggle}>
<Button className="ml-auto px-5" outline color="danger" onClick={this.toggleCollapse}>
Close
</Button>
</Row>
......@@ -62,7 +65,7 @@ class ScheduleBadge extends React.Component<ScheduleBadgeProps, State> {
size="sm"
outline
color="primary"
onClick={() => generateCalendar(schedule)}
onClick={this.toggleModal}
disabled={schedule.length === 0}>
Generate
</Button>
......@@ -70,6 +73,7 @@ class ScheduleBadge extends React.Component<ScheduleBadgeProps, State> {
</CardBody>
</Card>
</Collapse>
<ExportModal isModalOpen={this.state.isModalOpen} toggleModal={this.toggleModal} />
</div>
);
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment