diff options
Diffstat (limited to 'src/templates/account/booking_list.html')
-rw-r--r-- | src/templates/account/booking_list.html | 165 |
1 files changed, 88 insertions, 77 deletions
diff --git a/src/templates/account/booking_list.html b/src/templates/account/booking_list.html index 55c6c0d..f9234bc 100644 --- a/src/templates/account/booking_list.html +++ b/src/templates/account/booking_list.html @@ -1,90 +1,100 @@ {% extends "base.html" %} {% block content %} <h2>Bookings I Own</h2> - <div class="row"> - {% for booking in bookings %} - <div class="col-12 col-md-6 col-lg-4 col-xl-3 p-2"> - <div class="card h-100"> - <div class="card-header"> - <h3>Booking {{booking.id}}</h3> - </div> - <div class="card-body"> - <ul class="list-group"> - <li class="list-group-item">id: {{booking.id}}</li> - <li class="list-group-item">lab: {{booking.lab}}</li> - <li class="list-group-item">resource: {{booking.resource.template.name}}</li> - <li class="list-group-item">start: {{booking.start}}</li> - <li class="list-group-item">end: {{booking.end}}</li> - <li class="list-group-item">purpose: {{booking.purpose}}</li> - </ul> - </div> - <div class="card-footer d-flex"> - <a class="btn btn-primary ml-auto mr-2" href="/booking/detail/{{booking.id}}/">Details</a> - <button - class="btn btn-danger" - onclick='cancel_booking({{booking.id}});' - data-toggle="modal" - data-target="#resModal" - >Cancel</button> - </div> +<div class="row"> + {% for booking in bookings %} + <div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-3"> + <div class="card h-100"> + <div class="card-header"> + <h3>Booking {{booking.id}}</h3> + </div> + <ul class="list-group list-group-flush h-100"> + <li class="list-group-item">id: {{booking.id}}</li> + <li class="list-group-item">lab: {{booking.lab}}</li> + <li class="list-group-item">resource: {{booking.resource.template.name}}</li> + <li class="list-group-item">start: {{booking.start}}</li> + <li class="list-group-item">end: {{booking.end}}</li> + <li class="list-group-item">purpose: {{booking.purpose}}</li> + </ul> + <div class="card-footer d-flex"> + <a class="btn btn-primary ml-auto mr-2" href="/booking/detail/{{booking.id}}/">Details</a> + <button + class="btn btn-danger" + onclick='cancel_booking({{booking.id}});' + data-toggle="modal" + data-target="#resModal" + >Cancel</button> </div> </div> - {% endfor %} - </div> + </div> + {% empty %} + <div class="col"> + <p>You don't have any bookings. You can create a booking by booking a pod.</p> + </div> + {% endfor %} +</div> + <h2>Bookings I Collaborate On</h2> - <div class="row"> - {% for booking in collab_bookings %} - <div class="col-12 col-md-6 col-lg-4 col-xl-3 p-2"> - <div class="card h-100"> - <div class="card-header"> - <h3>Booking {{booking.id}}</h3> - </div> - <div class="card-body"> - <ul class="list-group"> - <li class="list-group-item">id: {{booking.id}}</li> - <li class="list-group-item">lab: {{booking.lab}}</li> - <li class="list-group-item">resource: {{booking.resource.template.name}}</li> - <li class="list-group-item">start: {{booking.start}}</li> - <li class="list-group-item">end: {{booking.end}}</li> - <li class="list-group-item">purpose: {{booking.purpose}}</li> - </ul> - </div> - <div class="card-footer d-flex"> - <a class="btn btn-primary ml-auto" href="/booking/detail/{{booking.id}}/">Details</a> - </div> +<div class="row"> + + {% for booking in collab_bookings %} + <div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-3"> + <div class="card h-100"> + <div class="card-header"> + <h3>Booking {{booking.id}}</h3> + </div> + <ul class="list-group list-group-flush h-100"> + <li class="list-group-item">id: {{booking.id}}</li> + <li class="list-group-item">lab: {{booking.lab}}</li> + <li class="list-group-item">resource: {{booking.resource.template.name}}</li> + <li class="list-group-item">start: {{booking.start}}</li> + <li class="list-group-item">end: {{booking.end}}</li> + <li class="list-group-item">purpose: {{booking.purpose}}</li> + </ul> + <div class="card-footer d-flex"> + <a class="btn btn-primary ml-auto" href="/booking/detail/{{booking.id}}/">Details</a> </div> </div> - {% endfor %} - </div> - <a href="#expired_bookings" data-toggle="collapse" class="h2 discrete-a"> - Expired Bookings - <i class="fas fa-angle-down rotate"></i> - </a> - <div id="expired_bookings" class="row collapse"> - {% for booking in expired_bookings %} - <div class="col-12 col-md-6 col-lg-4 col-xl-3 p-2"> - <div class="card h-100"> - <div class="card-header"> - <h3>Booking {{booking.id}}</h3> - </div> - <div class="card-body"> - <ul class="list-group"> - <li class="list-group-item">id: {{booking.id}}</li> - <li class="list-group-item">lab: {{booking.lab}}</li> - <li class="list-group-item">resource: {{booking.resource.template.name}}</li> - <li class="list-group-item">start: {{booking.start}}</li> - <li class="list-group-item">end: {{booking.end}}</li> - <li class="list-group-item">purpose: {{booking.purpose}}</li> - <li class="list-group-item">owner: {{booking.owner.userprofile.email_addr}}</li> - </ul> - </div> - <div class="card-footer d-flex"> - <a class="btn btn-primary ml-auto" href="/booking/detail/{{booking.id}}/">Details</a> - </div> + </div> + {% empty %} + <div class="col"> + <p>There are no collaborative bookings.</p> + </div> + {% endfor %} +</div> + +<a href="#expired_bookings" data-toggle="collapse" class="h2 discrete-a"> + Expired Bookings + <i class="fas fa-angle-down rotate"></i> +</a> +<div id="expired_bookings" class="row collapse"> + {% for booking in expired_bookings %} + <div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-3"> + <div class="card h-100"> + <div class="card-header"> + <h3>Booking {{booking.id}}</h3> + </div> + <ul class="list-group list-group-flush h-100"> + <li class="list-group-item">id: {{booking.id}}</li> + <li class="list-group-item">lab: {{booking.lab}}</li> + <li class="list-group-item">resource: {{booking.resource.template.name}}</li> + <li class="list-group-item">start: {{booking.start}}</li> + <li class="list-group-item">end: {{booking.end}}</li> + <li class="list-group-item">purpose: {{booking.purpose}}</li> + <li class="list-group-item">owner: {{booking.owner.userprofile.email_addr}}</li> + </ul> + <div class="card-footer d-flex"> + <a class="btn btn-primary ml-auto" href="/booking/detail/{{booking.id}}/">Details</a> </div> </div> - {% endfor %} - </div> + </div> + {% empty %} + <div class="col"> + <p>There are no expired bookings.</p> + </div> + {% endfor %} +</div> + <script> var current_booking_id = -1; function cancel_booking(booking_id) { @@ -102,6 +112,7 @@ req.send(formData); } </script> + <div class="modal fade" id="resModal" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> |