From e4cf9d51f427fa736ad18caf3a4c03262fd3e1d4 Mon Sep 17 00:00:00 2001
From: Alex Ha <alex.ha@volvocars.com>
Date: Sun, 28 Jul 2019 23:08:55 -0700
Subject: [PATCH] finish reservations styling

---
 frontend/src/AdminPanel/Bookings.js | 74 +++++++++++++++++++----------
 frontend/src/AdminPanel/index.js    |  6 ++-
 2 files changed, 54 insertions(+), 26 deletions(-)

diff --git a/frontend/src/AdminPanel/Bookings.js b/frontend/src/AdminPanel/Bookings.js
index 2bbf23a8..9ab02879 100644
--- a/frontend/src/AdminPanel/Bookings.js
+++ b/frontend/src/AdminPanel/Bookings.js
@@ -68,17 +68,18 @@ class Bookings extends Component {
     if (this.props.reservationData.length > 0) {
       for (const [index, reservation] of this.props.reservationData.entries()) {
         reservations.push(
-          <li style={{marginBottom: "10px"}} key={index}>
-            <div>Name: {reservation.name}</div>
-            <div>Start time: {reservation.startTime}</div>
-            <div>Start time of day: {reservation.start_time_of_day}</div>
-            <div>End date: {reservation.endTime}</div>
-            <div>End time of day: {reservation.end_time_of_day}</div>
-            <div>Email: {reservation.email}</div>
-            <button onClick={() => this.onClickDeny(reservation)}>Deny</button>
-            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-            <button onClick={() => this.onClickApprove(reservation)}>Approve</button>
-          </li>
+          <tr style={{marginBottom: "10px"}} key={index}>
+            <td>{reservation.name}</td>
+            <td>{reservation.model}</td>
+            <td>{reservation.startTime.slice(0,10)}</td>
+            <td>{reservation.start_time_of_day}</td>
+            <td>{reservation.endTime.slice(0,10)}</td>
+            <td>{reservation.end_time_of_day}</td>
+            <td>{reservation.email}</td>
+            <td><button onClick={() => this.onClickDeny(reservation)} style={{display: "inline"}}>Deny</button>
+            <button onClick={() => this.onClickApprove(reservation)} style={{display: "inline"}}>Approve</button>
+            </td>
+          </tr>
         )
       }
     } else {
@@ -89,15 +90,15 @@ class Bookings extends Component {
     if (this.props.bookingData && this.props.bookingData.length > 0) {
       for (const booking of this.props.bookingData) {
         bookings.push(
-          <li style={{marginBottom: "10px"}} key={booking.Id}>
-            <div>ID: <a onClick={() => this.onClickBooking(booking)}>{booking.Id}</a></div>
-            <div>Car: {booking.Vehicle.Vin}</div>
-            <div>Reserved by: {booking.User.Name}</div>
-            <div>Checked out: {booking.startTime}</div>
-            <div>Returned: {booking.endTime}</div>
-            <div>Odometer: {Math.floor(booking.Vehicle.Odometer * 0.000621371)} miles</div>
-            <div>Health: <span style={{color: booking.health}}>{booking.health}</span></div>
-          </li>
+          <tr style={{marginBottom: "10px"}} key={booking.Id}>
+            <td><a onClick={() => this.onClickBooking(booking)}>{booking.Id}</a></td>
+            <td>{booking.Vehicle.Vin}</td>
+            <td>{booking.User.Name}</td>
+            <td>{booking.startTime}</td>
+            <td>{booking.endTime}</td>
+            <td>{Math.floor(booking.Vehicle.Odometer * 0.000621371)} miles</td>
+            <td><span style={{color: booking.health}}>{booking.health}</span></td>
+          </tr>
         )
       }
     } else {
@@ -107,13 +108,36 @@ class Bookings extends Component {
     return (
       <>
         <h2>Booking requests</h2>
-          <ul>
-            {reservations}
-          </ul>
+        <table>
+          <tr style={{backgroundColor: "lightblue", color: "white"}}>
+            <th>Name</th>
+            <th>Model</th>
+            <th>Start time:</th>
+            <th>Start ToD:</th>
+            <th>End time:</th>
+            <th>End ToD:</th>
+            <th>Email:</th>
+            <th>Action:</th>
+          </tr>
+          <tbody>
+          {reservations}
+          </tbody>
+        </table>
         <h2>Booking history</h2>
-          <ul>
+        <table>
+          <tr style={{backgroundColor: "orange", color: "white"}}>
+            <th>ID</th>
+            <th>Car</th>
+            <th>Reserved by:</th>
+            <th>Checked out:</th>
+            <th>Returned:</th>
+            <th>Odometer:</th>
+            <th>Health:</th>
+          </tr>
+          <tbody>
             {bookings}
-          </ul>
+          </tbody>
+        </table>
       </>
     )
   }
diff --git a/frontend/src/AdminPanel/index.js b/frontend/src/AdminPanel/index.js
index 7b78d51b..dd8d03c1 100644
--- a/frontend/src/AdminPanel/index.js
+++ b/frontend/src/AdminPanel/index.js
@@ -37,7 +37,11 @@ class AdminPanel extends Component {
 
   showContent = () => {
     if (this.state.contentToDisplay === "bookings") {
-      return (<Bookings reservationData={this.props.reservationData} bookingData={this.props.bookingData}/>)
+      return (
+        <div style={{width: "100%!important"}}>
+          <Bookings reservationData={this.props.reservationData} bookingData={this.props.bookingData}/>
+        </div>
+      )
     } else if (this.state.contentToDisplay === "vehicles") {
       return (<Vehicles vehicles={this.props.vehicleData}/>)
     } else if (this.state.contentToDisplay === "users") {