From 85b4afd83575cc3bdda042b44bdfe27f58d61e53 Mon Sep 17 00:00:00 2001 From: pepper Date: Wed, 20 Jan 2021 00:01:04 -0500 Subject: [PATCH] adding in the timeslot page, that shows available slots over the next few days, possible rework on the TimeSlot.js page as she is fucked --- src/components/root/Home.js | 49 ++++--- src/components/root/Pages/TimeSlotHelper.js | 54 +++++++ .../root/common/Tables/TimeSlots.js | 133 ++++++++++++++++++ 3 files changed, 213 insertions(+), 23 deletions(-) create mode 100644 src/components/root/Pages/TimeSlotHelper.js create mode 100644 src/components/root/common/Tables/TimeSlots.js diff --git a/src/components/root/Home.js b/src/components/root/Home.js index 9c3f462..3f8b370 100644 --- a/src/components/root/Home.js +++ b/src/components/root/Home.js @@ -3,6 +3,8 @@ import React, { Component } from "react"; import { callAPI } from "../actions/API"; import Cards from "./Pages/Cards"; import GenericList from "../root/Pages/GenericList"; +import TimeSlotHelper from "./Pages/TimeSlotHelper"; + import { UList } from "../root/common/Functionality/UnorderedList"; import { builfArrayFromObject } from "../actions/Error"; @@ -23,6 +25,19 @@ export class Home extends Component { }; } + getTimeslot(days) { + callAPI + .get("/timeslots/?days=" + days) + .then((request) => { + return request.data; + }) + .catch((error) => { + this.setState({ + error: error, + }); + }); + } + componentDidMount() { callAPI .get("/") @@ -36,40 +51,28 @@ export class Home extends Component { error: error, }); }); - callAPI - .get("/timeslots") - .then((request) => { - this.setState({ - timeslots: request.data, - }); - }) - .catch((error) => { - this.setState({ - error: error, - }); - }); } render() { return ( -
-
- -
-
+
+
+
+
+
+
-
-

Current availability for {Date()}

- +
+ {/*

Current availability for {Date()}

+ */} + {/* */}
-
-
+
-
); diff --git a/src/components/root/Pages/TimeSlotHelper.js b/src/components/root/Pages/TimeSlotHelper.js new file mode 100644 index 0000000..9b97cb1 --- /dev/null +++ b/src/components/root/Pages/TimeSlotHelper.js @@ -0,0 +1,54 @@ +import React, { Component } from "react"; +import TimeSlots from "../common/Tables/TimeSlots"; +import { callAPI } from "../../actions/API"; +import { Error } from "../../actions/Error"; + +// Missing parent page, +// Most of the good stuff is happening in UpcomingSingle, which does the +// main rendering of the table, +// may want to eventually do the API call here, to re-use the table +// instead of duplicating it. + +class GenericList extends Component { + constructor(props) { + super(props); + this.state = { + error: false, + timeslots: [], + bookedslots: [], + }; + } + + componentDidMount() { + callAPI.get("/gettimeslots/").then((response) => { + this.setState({ + timeslots: response.data, + }); + }); + } + + renderItems() { + if (!this.state.error) { + return ( + + ); + } else { + return ; + } + } + + render() { + return
{this.renderItems()}
; + } +} +export default GenericList; + +// if (this.state.timeslots > 0) { +// else { +// return ; +// } +// } diff --git a/src/components/root/common/Tables/TimeSlots.js b/src/components/root/common/Tables/TimeSlots.js new file mode 100644 index 0000000..347cf42 --- /dev/null +++ b/src/components/root/common/Tables/TimeSlots.js @@ -0,0 +1,133 @@ +import React, { useState, useEffect } from "react"; +import BootstrapTable from "react-bootstrap-table-next"; +import paginationFactory from "react-bootstrap-table2-paginator"; +import * as ReactBootstrap from "react-bootstrap"; +import filterFactory from "react-bootstrap-table2-filter"; +import ToolkitProvider, { + Search, + CSVExport, +} from "react-bootstrap-table2-toolkit"; + +// notes +// + +const TimeSlots = (props) => { + const [list, setList, setTimeSlots, setBookedSlots] = useState([]); + const [loading, setLoading] = useState(false); + const { SearchBar } = Search; + const { ExportCSVButton } = CSVExport; + const sizePerPageRenderer = ({ + options, + currSizePerPage, + onSizePerPageChange, + }) => ( +
+ {options.map((option) => { + const isSelect = currSizePerPage === `${option.page}`; + return ( + + ); + })} +
+ ); + + const getListData = async () => { + try { + const setList = await props.setList; + setList(); + setLoading(true); + } catch (e) { + console.log(e); + } + }; + + const options = { + // paginationSize: 4, + // pageStartIndex: 0, + // alwaysShowAllBtns: true, // Always show next and previous button + // withFirstAndLast: false, // Hide the going to First and Last page button + // hideSizePerPage: true, // Hide the sizePerPage dropdown always + // hidePageListOnlyOnePage: true, // Hide the pagination list when only one page + // firstPageText: "First", + // prePageText: "Back", + nextPageText: "Next", + lastPageText: "Last", + // nextPageTitle: "First page", + // prePageTitle: "Pre page", + // firstPageTitle: "Next page", + // lastPageTitle: "Last page", + // showTotal: true, + // disablePageTitle: true, + // sizePerPageList: [ + // { + // text: "50", + // value: 50, + // }, + // { + // text: "100", + // value: 100, + // }, + // ], + sizePerPageRenderer, // A numeric array is also available. the purpose of above example is custom the text + }; + + const columns = [ + { dataField: "bookedSlots", text: "bookedslots", sort: true }, + { dataField: "timeSlots", text: "timeslots", sort: true }, + ]; + + useEffect(() => { + getListData(); + }, []); + + return ( +
+ {loading ? ( + + {(props) => ( +
+
+

+ +
+ +
+ +
+ + Export CSV!! + +
+ )} + + ) : ( + + )} +
+ ); +}; + +export default TimeSlots;