src/templates/base/account/resource_list.html

   1 {% extends "base.html" %}
   2 {% block content %}
   3 <div class="row">
   4 {% for resource in resources %}
   5     <div class="col-12 col-md-6 col-lg-4 col-xl-3 mb-3">
   6         <div class="card h-100">
   7             <div class="card-header">
   8                 <h3>Resource {{resource.id}}</h3>
   9             </div>
  10             <ul class="list-group list-group-flush h-100">
  11                 <li class="list-group-item">id: {{resource.id}}</li>
  12                 <li class="list-group-item">name: {{resource.name}}</li>
  13                 <li class="list-group-item">description: {{resource.description}}</li>
  14             </ul>
  15             <div class="card-footer">
  16                 <button
  17                     class="btn btn-danger w-100"
  18                     onclick='delete_resource({{resource.id}});'
  19                     data-toggle="modal"
  20                     data-target="#resModal"
  21                 >Delete</button>
  22             </div>
  23         </div>
  24     </div>
  25 {% empty %}
  26     <div class="col">
  27         <p>You don't have any resources. You can create a resource by designing a pod.</p>
  28     </div>
  29 {% endfor %}
  30 </div>
  31 <script>
  32     var active_resources = {{active_resources|safe|default:"{}"}}
  33     var current_resource_id = -1;
  34     function delete_resource(resource_id) {
  35         document.getElementById("confirm_delete_button").removeAttribute("disabled");
  36         var warning = document.createTextNode("Are You Sure?");
  37         var warning_subtext = document.createTextNode("This cannot be undone");
  38         if(active_resources[resource_id]){
  39             var warning = document.createTextNode("This resource is being used or is scheduled to be used. It cannot be deleted.");
  40             var warning_subtext = document.createTextNode("If your booking just ended, you may need to give us a few minutes to clean it up before this can be removed.");
  41
  42             document.getElementById("confirm_delete_button").disabled = true;
  43         }
  44         else {
  45             warning_text = "Are You Sure?";
  46             warning = document.createTextNode(warning_text);
  47         }
  48
  49         current_resource_id = resource_id;
  50         set_modal_text(warning, warning_subtext);
  51     }
  52
  53     function set_modal_text(title, text) {
  54         var clear = function(node) {
  55             while(node.lastChild) {
  56                 node.removeChild(node.lastChild);
  57             }
  58         }
  59         var warning_title = document.getElementById("config_warning");
  60         var warning_text = document.getElementById("warning_subtext");
  61
  62         clear(warning_title);
  63         clear(warning_text);
  64
  65         warning_title.appendChild(title);
  66         warning_text.appendChild(text);
  67     }
  68
  69     function list_configs(configs) {
  70         var list = document.getElementById("config_list");
  71         for(var i=0; i<configs.length; i++){
  72             var str = configs[i].name;
  73             var list_item = document.createElement("LI");
  74             list_item.appendChild(document.createTextNode(str));
  75             list.appendChild(list_item);
  76         }
  77     }
  78
  79     function submit_delete_form() {
  80         var ajaxForm = $("#res_delete_form");
  81         var formData = ajaxForm.serialize();
  82         req = new XMLHttpRequest();
  83         var url = "delete/" + current_resource_id;
  84         req.onreadystatechange = function() {
  85             if (this.readyState == 4 && this.status == 200) {
  86                 location.reload();
  87             }
  88         };
  89         req.open("POST", url, true);
  90         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  91         req.onerror = function() { alert("problem submitting form"); }
  92         req.send(formData);
  93     }
  94 </script>
  95 <div class="modal fade" id="resModal" tabindex="-1" role="dialog" aria-hidden="true">
  96     <div class="modal-dialog" role="document">
  97         <div class="modal-content">
  98             <div class="modal-header">
  99                 <h4 class="modal-title d-inline float-left">Delete Resource?</h4>
 100                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 101                     <span aria-hidden="true">&times;</span>
 102                 </button>
 103             </div>
 104             <form id="res_delete_form">
 105                 {% csrf_token %}
 106             </form>
 107             <div class="modal-footer d-flex flex-column">
 108                 <div class="mb-2">
 109                     <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
 110                     <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#warning">Delete</button>
 111                 </div>
 112                 <div class="collapse w-100 text-center border-top" id="warning">
 113                     <div class="p-4">
 114                         <h3 id="config_warning">Are You Sure?</h3>
 115                         <p id="warning_subtext">This cannot be undone</p>
 116                         <ul id="config_list"></ul>
 117                         <button class="btn btn-outline-secondary" data-dismiss="modal">Nevermind</button>
 118                         <button class="btn btn-danger" id="confirm_delete_button" data-dismiss="modal" onclick="submit_delete_form();">I'm Sure</button>
 119                     </div>
 120                 </div>
 121             </div>
 122         </div>
 123     </div>
 124 </div>
 125
 126 {% endblock %}