[UI changes] Minor changes to View Bookings UI, enables differentiati…

…ng b/w approved bookings and pending. [UI fix] Changes to View Bookings. A few UI changes, one can differentiate between approved bookings and pending booking requests.
cribbl · Jan 27, 2019 · 49496a6 · 49496a6
1 parent c4c84c9
commit 49496a6
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 19 deletions.
diff --git a/src/components/ClassroomComponent/BookingComponent/Rooms.js b/src/components/ClassroomComponent/BookingComponent/Rooms.js
@@ -150,7 +150,7 @@ class RoomsContainer extends Component {
               <MyRaisedButton id={5203} />
               <MyRaisedButton id={5205} />
               <MyRaisedButton id={5206} />
-              {/* <MyRaisedButton id={5207} /> SC */}
+              <MyRaisedButton id={5207} />
               <MyRaisedButton id={5208} />
             </div>
             <div style={styles.buttonsRow}>

diff --git a/src/components/ClassroomComponent/ViewBookingsComponent/EventDetailsComponent.js b/src/components/ClassroomComponent/ViewBookingsComponent/EventDetailsComponent.js
@@ -2,7 +2,18 @@ import React from 'react'
 import { Card, CardTitle, CardText } from 'material-ui/Card'
 import Divider from 'material-ui/Divider'
 import CircularProgress from 'material-ui/CircularProgress'
+import { List, ListItem } from 'material-ui/List'
+import Subheader from 'material-ui/Subheader'
+import CheckCircleIcon from 'material-ui/svg-icons/action/check-circle'
 
+const Subtitle = (props) => {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center' }}>
+      <h5> {props.title} </h5>
+      {props.approved && <CheckCircleIcon style={{ color: '#558B2F' }} hoverColor={'#33691E'} data-tip='Approved' /> }
+    </div>
+  )
+}
 function getRoomsString (rooms) {
   let roomList = ''
   // determines the academic block according to the first digit as array index
@@ -29,23 +40,60 @@ export const EventDetails = (props) => {
   if (props.isRoomSelected) {
     if (props.fetchingEventData) {
       return (
-        <div>
+        <div style={{ margin: 'auto', width: 300 }}>
           <p>Fetching Event...</p>
           <CircularProgress size={60} />
         </div>
       )
     } else {
+      console.log(props.eventDetails)
       return (
-        <Card>
-          <CardTitle style={{ fontWeight: 'bold' }} title={props.eventDetails.clubName} subtitle={props.eventDetails.title} />
-          <CardText>
-            <p><b> Starts </b> {props.eventDetails.startDate}</p>
-            <Divider style={{ margin: '5px' }} />
-            <p><b> Ends </b> {props.eventDetails.endDate}</p>
-            <Divider style={{ margin: '5px' }} />
-            <p><b> Rooms </b> {getRoomsString(props.eventDetails.rooms)} </p>
-            <Divider style={{ margin: '5px' }} />
-            <p><b> Contact </b> {props.eventDetails.booker_name} : {props.eventDetails.booker_contact} </p>
+        <Card style={{}}>
+          <CardTitle style={{ fontWeight: 'bold', textAlign: 'center' }} title={props.eventDetails.clubName} subtitle={<Subtitle title={props.eventDetails.title} approved={props.eventDetails.SO_appr === 'approved'} />} />
+          <CardText style={{ display: 'flex', flexDirection: props.isMobile ? 'column' : 'row', justifyContent: 'space-between' }}>
+            <div>
+              <List>
+                <div style={{ display: 'flex', flexDirection: props.isMobile ? 'column' : 'row' }}>
+                  <Subheader> Start </Subheader>
+                  <ListItem
+                    primaryText={props.eventDetails.startDate}
+                    disabled
+                    style={{ minWidth: 300 }}
+                  />
+                </div>
+                <Divider />
+                <div style={{ display: 'flex', flexDirection: props.isMobile ? 'column' : 'row' }}>
+                  <Subheader> End </Subheader>
+                  <ListItem
+                    primaryText={props.eventDetails.endDate}
+                    disabled
+                    style={{ minWidth: 300 }}
+                  />
+                <Divider />
+                </div>
+              </List>
+            </div>
+            <div>
+              <List>
+                <div style={{ display: 'flex', flexDirection: props.isMobile ? 'column' : 'row' }}>
+                  <Subheader> Rooms </Subheader>
+                  <ListItem
+                    primaryText={getRoomsString(props.eventDetails.rooms)}
+                    disabled
+                    style={{ minWidth: 300 }}
+                  />
+                </div>
+                <Divider style={{ margin: '5px' }} />
+                <div style={{ display: 'flex', flexDirection: props.isMobile ? 'column' : 'row' }}>
+                  <Subheader> Contact </Subheader>
+                  <ListItem
+                    primaryText={props.eventDetails.booker_name + ': ' + props.eventDetails.booker_contact}
+                    disabled
+                    style={{ minWidth: 300 }}
+                  />
+                </div>
+              </List>
+            </div>
           </CardText>
         </Card>
       )

diff --git a/src/components/ClassroomComponent/ViewBookingsComponent/Rooms.js b/src/components/ClassroomComponent/ViewBookingsComponent/Rooms.js
@@ -90,20 +90,20 @@ class RoomsContainer extends Component {
 
           <div style={{ width: this.props.isMobile ? '100%' : '35%', backgroundColor: '', display: 'flex', flexDirection: 'column', justifyContent: 'space-around' }}>
             <h4>NLH</h4>
-            {/* <div style={styles.buttonsRow}>
+            <div style={styles.buttonsRow}>
               <MyRaisedButton id={3102} />
               <MyRaisedButton id={3103} />
               <MyRaisedButton id={3104} />
               <MyRaisedButton id={3105} />
-            </div> */}
+            </div>
             <div style={styles.buttonsRow}>
               <MyRaisedButton id={3202} />
-              {/* <MyRaisedButton id={3203} /> DIRECTOR */}
+              <MyRaisedButton id={3203} /> DIRECTOR
               <MyRaisedButton id={3204} />
               <MyRaisedButton id={3205} />
             </div>
             <div style={styles.buttonsRow}>
-              {/* <MyRaisedButton id={3302} /> PARIKSHIT */}
+              <MyRaisedButton id={3302} /> PARIKSHIT
               <MyRaisedButton id={3303} />
               <MyRaisedButton id={3304} />
               <MyRaisedButton id={3305} />
@@ -126,7 +126,7 @@ class RoomsContainer extends Component {
               <MyRaisedButton id={5203} />
               <MyRaisedButton id={5205} />
               <MyRaisedButton id={5206} />
-              {/* <MyRaisedButton id={5207} /> SC */}
+              <MyRaisedButton id={5207} />
               <MyRaisedButton id={5208} />
             </div>
             <div style={styles.buttonsRow}>

diff --git a/src/components/ClassroomComponent/ViewBookingsComponent/ViewBookingsComponent.js b/src/components/ClassroomComponent/ViewBookingsComponent/ViewBookingsComponent.js
@@ -93,7 +93,7 @@ class ViewBooking extends React.Component {
           <div style={{ backgroundColor: '', width: '100%', alignSelf: 'center', display: 'flex', textAlign: 'center', justifyContent: 'center' }}>
             <div style={{ width: this.props.isMobile ? '95%' : '85%' }}>
               <div className='locationContainer' style={{ marginBottom: 50 }}>
-                <div style={{ backgroundColor: '', display: 'flex', flexDirection: this.props.isMobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                <div style={{ backgroundColor: '', display: 'flex', flexDirection: this.props.isMobile ? 'column' : 'row', justifyContent: 'center', alignItems: 'center' }}>
                   <DatePicker
                     floatingLabelText='Date'
                     mode={this.props.isMobile ? 'portrait' : 'landscape'}
@@ -110,7 +110,7 @@ class ViewBooking extends React.Component {
                 </div>
                 <RoomsContainer datesSelected={this.state.dateSelected} fetchingRooms={this.state.fetchingRooms} takenRooms={this.state.takenRooms} approvedRooms={this.state.approvedRooms} handleSelectedRoom={(temp) => this.handleSelectedRoom(temp)} />
                 <div style={{ marginTop: '20px', textAlign: 'left' }}>
-                  <EventDetails isRoomSelected={this.state.isRoomSelected} fetchingEventData={this.state.fetchingEventData} eventDetails={this.state.eventDetails} />
+                  <EventDetails isMobile={this.props.isMobile} isRoomSelected={this.state.isRoomSelected} fetchingEventData={this.state.fetchingEventData} eventDetails={this.state.eventDetails} />
                 </div>
               </div>
             </div>