aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates/account/booking_list.html
diff options
context:
space:
mode:
authorBrandon Lo <lobrandon1217@gmail.com>2019-06-27 15:43:55 -0400
committerBrandon Lo <lobrandon1217@gmail.com>2019-06-28 15:28:24 +0000
commit7fec796ae500313ddbbbedf32d4f7581985d41d4 (patch)
treec7c40f8bfc0d0ff682249187b4d68bfdfa8c6493 /src/templates/account/booking_list.html
parente5e07b97e3d797a3a1f90fa33b7ccc41b6bacde3 (diff)
Replace and change CSS
Fix animation bugs Fix layout issues Replace custom CSS to bootstrap classes Remove unused files Change code to use es6 syntax Add dropdown styles Change-Id: Ie2ed31fa2e6763cf30d3b19e4bf9379019cbb0f5 Signed-off-by: Brandon Lo <lobrandon1217@gmail.com>
Diffstat (limited to 'src/templates/account/booking_list.html')
-rw-r--r--src/templates/account/booking_list.html181
1 files changed, 90 insertions, 91 deletions
diff --git a/src/templates/account/booking_list.html b/src/templates/account/booking_list.html
index 98ab5c8..55c6c0d 100644
--- a/src/templates/account/booking_list.html
+++ b/src/templates/account/booking_list.html
@@ -1,88 +1,94 @@
{% extends "base.html" %}
{% block content %}
<h2>Bookings I Own</h2>
- <div class="card_container">
- {% for booking in bookings %}
- <div class="card">
- <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 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>
</div>
- </div>
- {% endfor %}
+ {% endfor %}
</div>
<h2>Bookings I Collaborate On</h2>
- <div class="card_container">
+ <div class="row">
{% for booking in collab_bookings %}
- <div class="card">
- <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 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>
</div>
{% endfor %}
</div>
- <h2>Expired Bookings
- <i class="fa fa-fw fa-caret-down" onclick='toggle_display("expired_bookings");'></i>
- </h2>
- <div id="expired_bookings" class="card_container" style="display:none;">
- {% for booking in expired_bookings %}
- <div class="card">
- <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>
+ <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>
</div>
- </div>
- {% endfor %}
+ {% endfor %}
</div>
<script>
var current_booking_id = -1;
function cancel_booking(booking_id) {
current_booking_id = booking_id;
- document.getElementById('modal_warning').style['max-height'] = '0px';
}
function submit_cancel_form() {
@@ -95,22 +101,12 @@
req.onerror = function() { alert("problem submitting form"); }
req.send(formData);
}
-
- function toggle_display(elem_id){
- var e = document.getElementById(elem_id);
- if (e.style.display === "none"){
- e.style.display = "grid";
- } else {
- e.style.display = "none";
- }
- }
</script>
-<div class="modal fade" id="resModal" tabindex="-1" role="dialog" aria-labelledby="my_modal" aria-hidden="true">
- <div class="modal-dialog" style="width: 450px;" role="document">
+<div class="modal fade" id="resModal" tabindex="-1" role="dialog" aria-hidden="true">
+ <div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
- <h4 class="modal-title" id="my_modal" style="display: inline; float: left;">Cancel Booking?</h4>
- <p>Everthing on your machine(s) will be lost</p>
+ <h4 class="modal-title d-inline float-left">Cancel Booking?</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
@@ -118,16 +114,19 @@
<form id="booking_cancel_form">
{% csrf_token %}
</form>
- <div class="modal-footer">
- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
- <button type="button" class="btn btn-primary" onclick="document.getElementById('modal_warning').style['max-height'] = '500px';">Cancel Booking</button>
- </div>
- <div id="modal_warning" class="modal-footer" style="max-height:0px;" >
- <div style="text-align:center; margin: 5px">
- <h3>Are You Sure?</h3>
- <p>This cannot be undone</p>
- <button class="btn" onclick="document.getElementById('modal_warning').style['max-height'] = '0px';">Nevermind</button>
- <button class="btn btn-danger" id="confirm_cancel_button" data-dismiss="modal" onclick="submit_cancel_form();">I'm Sure</button>
+ <div class="modal-footer d-flex flex-column">
+ <p>Everything on your machine(s) will be lost</p>
+ <div class="mb-2">
+ <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#warning">Cancel Booking</button>
+ </div>
+ <div class="collapse w-100 text-center border-top" id="warning">
+ <div class="p-4">
+ <h3>Are You Sure?</h3>
+ <p>This cannot be undone</p>
+ <button class="btn btn-outline-secondary" data-dismiss="modal">Nevermind</button>
+ <button class="btn btn-danger" id="confirm_cancel_button" data-dismiss="modal" onclick="submit_cancel_form();">I'm Sure</button>
+ </div>
</div>
</div>
</div>