src/templates/account/booking_list.html

   1 {% extends "base.html" %}
   2 {% block content %}
   3 <h2>Bookings I Own</h2>
   4     <div class="card_container">
   5     {% for booking in bookings %}
   6         <div class="card">
   7             <div class="card-header">
   8                 <h3>Booking {{booking.id}}</h3>
   9             </div>
  10             <div class="card-body">
  11                 <ul class="list-group">
  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>
  20             <div class="card-footer d-flex">
  21                 <a class="btn btn-primary ml-auto mr-2" href="/booking/detail/{{booking.id}}/">Details</a>
  22                 <button
  23                     class="btn btn-danger"
  24                     onclick='cancel_booking({{booking.id}});'
  25                     data-toggle="modal"
  26                     data-target="#resModal"
  27                 >Cancel</button>
  28             </div>
  29         </div>
  30     {% endfor %}
  31     </div>
  32 <h2>Bookings I Collaborate On</h2>
  33     <div class="card_container">
  34         {% for booking in collab_bookings %}
  35             <div class="card">
  36                 <div class="card-header">
  37                     <h3>Booking {{booking.id}}</h3>
  38                 </div>
  39                 <div class="card-body">
  40                     <ul class="list-group">
  41                         <li class="list-group-item">id: {{booking.id}}</li>
  42                         <li class="list-group-item">lab: {{booking.lab}}</li>
  43                         <li class="list-group-item">resource: {{booking.resource.template.name}}</li>
  44                         <li class="list-group-item">start: {{booking.start}}</li>
  45                         <li class="list-group-item">end: {{booking.end}}</li>
  46                         <li class="list-group-item">purpose: {{booking.purpose}}</li>
  47                     </ul>
  48                 </div>
  49                 <div class="card-footer d-flex">
  50                     <a class="btn btn-primary ml-auto" href="/booking/detail/{{booking.id}}/">Details</a>
  51                 </div>
  52             </div>
  53         {% endfor %}
  54     </div>
  55     <h2>Expired Bookings
  56         <i class="fa fa-fw fa-caret-down" onclick='toggle_display("expired_bookings");'></i>
  57     </h2>
  58     <div id="expired_bookings" class="card_container" style="display:none;">
  59     {% for booking in expired_bookings %}
  60         <div class="card">
  61             <div class="card-header">
  62                 <h3>Booking {{booking.id}}</h3>
  63             </div>
  64             <div class="card-body">
  65                 <ul class="list-group">
  66                     <li class="list-group-item">id: {{booking.id}}</li>
  67                     <li class="list-group-item">lab: {{booking.lab}}</li>
  68                     <li class="list-group-item">resource: {{booking.resource.template.name}}</li>
  69                     <li class="list-group-item">start: {{booking.start}}</li>
  70                     <li class="list-group-item">end: {{booking.end}}</li>
  71                     <li class="list-group-item">purpose: {{booking.purpose}}</li>
  72                     <li class="list-group-item">owner: {{booking.owner.userprofile.email_addr}}</li>
  73                 </ul>
  74             </div>
  75             <div class="card-footer d-flex">
  76                 <a class="btn btn-primary ml-auto" href="/booking/detail/{{booking.id}}/">Details</a>
  77             </div>
  78         </div>
  79     {% endfor %}
  80     </div>
  81 <script>
  82     var current_booking_id = -1;
  83     function cancel_booking(booking_id) {
  84         current_booking_id = booking_id;
  85         document.getElementById('modal_warning').style['max-height'] = '0px';
  86     }
  87
  88     function submit_cancel_form() {
  89         var ajaxForm = $("#booking_cancel_form");
  90         var formData = ajaxForm.serialize();
  91         req = new XMLHttpRequest();
  92         var url = "cancel/" + current_booking_id;
  93         req.open("POST", url, true);
  94         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  95         req.onerror = function() { alert("problem submitting form"); }
  96         req.send(formData);
  97     }
  98
  99     function toggle_display(elem_id){
 100         var e = document.getElementById(elem_id);
 101         if (e.style.display === "none"){
 102             e.style.display = "grid";
 103         } else {
 104             e.style.display = "none";
 105         }
 106     }
 107 </script>
 108 <div class="modal fade" id="resModal" tabindex="-1" role="dialog" aria-labelledby="my_modal" aria-hidden="true">
 109     <div class="modal-dialog" style="width: 450px;" role="document">
 110         <div class="modal-content">
 111             <div class="modal-header">
 112                 <h4 class="modal-title" id="my_modal" style="display: inline; float: left;">Cancel Booking?</h4>
 113                 <p>Everthing on your machine(s) will be lost</p>
 114                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 115                     <span aria-hidden="true">&times;</span>
 116                 </button>
 117             </div>
 118             <form id="booking_cancel_form">
 119                 {% csrf_token %}
 120             </form>
 121             <div class="modal-footer">
 122                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 123                 <button type="button" class="btn btn-primary" onclick="document.getElementById('modal_warning').style['max-height'] = '500px';">Cancel Booking</button>
 124             </div>
 125             <div id="modal_warning" class="modal-footer" style="max-height:0px;" >
 126                 <div style="text-align:center; margin: 5px">
 127                     <h3>Are You Sure?</h3>
 128                     <p>This cannot be undone</p>
 129                     <button class="btn" onclick="document.getElementById('modal_warning').style['max-height'] = '0px';">Nevermind</button>
 130                     <button class="btn btn-danger" id="confirm_cancel_button" data-dismiss="modal" onclick="submit_cancel_form();">I'm Sure</button>
 131                 </div>
 132             </div>
 133         </div>
 134     </div>
 135 </div>
 136 {% endblock %}