src/templates/base/account/booking_list.html

   1 {% extends "base.html" %}
   2 {% block content %}
   3 <h2>Bookings I Own</h2>
   4 <div class="row">
   5     {% for booking in bookings %}
   6         <div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-3">
   7             <div class="card h-100">
   8                 <div class="card-header">
   9                     <h3>Booking {{booking.id}}</h3>
  10                 </div>
  11                 <ul class="list-group list-group-flush h-100">
  12                     <li class="list-group-item">id: {{booking.id}}</li>
  13                     <li class="list-group-item">lab: {{booking.lab}}</li>
  14                     <li class="list-group-item">resource: {{booking.resource.template.name}}</li>
  15                     <li class="list-group-item">start: {{booking.start}}</li>
  16                     <li class="list-group-item">end: {{booking.end}}</li>
  17                     <li class="list-group-item">purpose: {{booking.purpose}}</li>
  18                 </ul>
  19                 <div class="card-footer d-flex">
  20                     <a class="btn btn-primary ml-auto mr-2" href="/booking/detail/{{booking.id}}/">Details</a>
  21                     <button
  22                         class="btn btn-danger"
  23                         onclick='cancel_booking({{booking.id}});'
  24                         data-toggle="modal"
  25                         data-target="#resModal"
  26                     >Cancel</button>
  27                 </div>
  28             </div>
  29         </div>
  30     {% empty %}
  31         <div class="col">
  32             <p>You don't have any bookings. You can create a booking by booking a pod.</p>
  33         </div>
  34     {% endfor %}
  35 </div>
  36
  37 <h2>Bookings I Collaborate On</h2>
  38 <div class="row">
  39
  40     {% for booking in collab_bookings %}
  41         <div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-3">
  42             <div class="card h-100">
  43                 <div class="card-header">
  44                     <h3>Booking {{booking.id}}</h3>
  45                 </div>
  46                 <ul class="list-group list-group-flush h-100">
  47                     <li class="list-group-item">id: {{booking.id}}</li>
  48                     <li class="list-group-item">lab: {{booking.lab}}</li>
  49                     <li class="list-group-item">resource: {{booking.resource.template.name}}</li>
  50                     <li class="list-group-item">start: {{booking.start}}</li>
  51                     <li class="list-group-item">end: {{booking.end}}</li>
  52                     <li class="list-group-item">purpose: {{booking.purpose}}</li>
  53                 </ul>
  54                 <div class="card-footer d-flex">
  55                     <a class="btn btn-primary ml-auto" href="/booking/detail/{{booking.id}}/">Details</a>
  56                 </div>
  57             </div>
  58         </div>
  59     {% empty %}
  60         <div class="col">
  61             <p>There are no collaborative bookings.</p>
  62         </div>
  63     {% endfor %}
  64 </div>
  65
  66 <a href="#expired_bookings" data-toggle="collapse" class="h2 discrete-a">
  67     Expired Bookings
  68     <i class="fas fa-angle-down rotate"></i>
  69 </a>
  70 <div id="expired_bookings" class="row collapse">
  71     {% for booking in expired_bookings %}
  72         <div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-3">
  73             <div class="card h-100">
  74                 <div class="card-header">
  75                     <h3>Booking {{booking.id}}</h3>
  76                 </div>
  77                 <ul class="list-group list-group-flush h-100">
  78                     <li class="list-group-item">id: {{booking.id}}</li>
  79                     <li class="list-group-item">lab: {{booking.lab}}</li>
  80                     <li class="list-group-item">resource: {{booking.resource.template.name}}</li>
  81                     <li class="list-group-item">start: {{booking.start}}</li>
  82                     <li class="list-group-item">end: {{booking.end}}</li>
  83                     <li class="list-group-item">purpose: {{booking.purpose}}</li>
  84                     <li class="list-group-item">owner: {{booking.owner.userprofile.email_addr}}</li>
  85                 </ul>
  86                 <div class="card-footer d-flex">
  87                     <a class="btn btn-primary ml-auto" href="/booking/detail/{{booking.id}}/">Details</a>
  88                 </div>
  89             </div>
  90         </div>
  91     {% empty %}
  92         <div class="col">
  93             <p>There are no expired bookings.</p>
  94         </div>
  95     {% endfor %}
  96 </div>
  97
  98 <script>
  99     var current_booking_id = -1;
 100     function cancel_booking(booking_id) {
 101         current_booking_id = booking_id;
 102     }
 103
 104     function submit_cancel_form() {
 105         var ajaxForm = $("#booking_cancel_form");
 106         var formData = ajaxForm.serialize();
 107         req = new XMLHttpRequest();
 108         var url = "cancel/" + current_booking_id;
 109         req.open("POST", url, true);
 110         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 111         req.onerror = function() { alert("problem submitting form"); }
 112         req.send(formData);
 113     }
 114 </script>
 115
 116 <div class="modal fade" id="resModal" tabindex="-1" role="dialog" aria-hidden="true">
 117     <div class="modal-dialog" role="document">
 118         <div class="modal-content">
 119             <div class="modal-header">
 120                 <h4 class="modal-title d-inline float-left">Cancel Booking?</h4>
 121                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 122                     <span aria-hidden="true">&times;</span>
 123                 </button>
 124             </div>
 125             <form id="booking_cancel_form">
 126                 {% csrf_token %}
 127             </form>
 128             <div class="modal-footer d-flex flex-column">
 129                 <p>Everything on your machine(s) will be lost</p>
 130                 <div class="mb-2">
 131                     <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
 132                     <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#warning">Cancel Booking</button>
 133                 </div>
 134                 <div class="collapse w-100 text-center border-top" id="warning">
 135                     <div class="p-4">
 136                         <h3>Are You Sure?</h3>
 137                         <p>This cannot be undone</p>
 138                         <button class="btn btn-outline-secondary" data-dismiss="modal">Nevermind</button>
 139                         <button class="btn btn-danger" id="confirm_cancel_button" data-dismiss="modal" onclick="submit_cancel_form();">I'm Sure</button>
 140                     </div>
 141                 </div>
 142             </div>
 143         </div>
 144     </div>
 145 </div>
 146 {% endblock %}