Skip to content

Commit

Permalink
finish reservations styling
Browse files Browse the repository at this point in the history
  • Loading branch information
Alex Ha committed Jul 29, 2019
1 parent f0928d3 commit e4cf9d5
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 26 deletions.
74 changes: 49 additions & 25 deletions frontend/src/AdminPanel/Bookings.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 {
Expand All @@ -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>
</>
)
}
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/AdminPanel/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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") {
Expand Down

0 comments on commit e4cf9d5

Please sign in to comment.