dashboard/src/templates/account/image_list.html

   1 {% extends "base.html" %}
   2 {% block content %}
   3 <h2>Images I Own</h2>
   4 <div class="card_container">
   5 {% for image in images %}
   6     <div class="card">
   7         <div class="card-header">
   8             <h3>Image {{image.id}}</h3>
   9         </div>
  10         <div class="card-body">
  11             <ul class="list-group">
  12                 <li class="list-group-item">id: {{image.id}}</li>
  13                 <li class="list-group-item">lab: {{image.from_lab.name}}</li>
  14                 <li class="list-group-item">name: {{image.name}}</li>
  15                 <li class="list-group-item">description: {{image.description}}</li>
  16                 <li class="list-group-item">host profile: {{image.host_type.name}}</li>
  17             </ul>
  18         </div>
  19         <div class="card-footer">
  20             <button
  21                 class="btn btn-danger w-100"
  22                 onclick='delete_image({{image.id}});'
  23                 data-toggle="modal"
  24                 data-target="#imageModal"
  25             >Delete</button>
  26         </div>
  27     </div>
  28 {% endfor %}
  29 </div>
  30 <h2>Public Images</h2>
  31 <div class="card_container">
  32     {% for image in public_images %}
  33         <div class="card">
  34             <div class="card-header">
  35                 <h3>Image {{image.id}}</h3>
  36             </div>
  37             <div class="card-body">
  38                 <ul class="list-group">
  39                     <li class="list-group-item">id: {{image.id}}</li>
  40                     <li class="list-group-item">lab: {{image.from_lab.name}}</li>
  41                     <li class="list-group-item">name: {{image.name}}</li>
  42                     <li class="list-group-item">description: {{image.description}}</li>
  43                     <li class="list-group-item">host profile: {{image.host_type.name}}</li>
  44                 </ul>
  45             </div>
  46         </div>
  47     {% endfor %}
  48 </div>
  49
  50 <script>
  51     var current_image_id = -1;
  52     var used_images = {{used_images|safe|default:"{}"}};
  53     function delete_image(image_id) {
  54         current_image_id = image_id;
  55         document.getElementById('modal_warning').style['max-height'] = '0px';
  56         var warning_header = document.getElementById("warning_header");
  57         var warning_text = document.getElementById("warning_text");
  58         var delete_image_button = document.getElementById("final_delete_b");
  59         clear(warning_header);
  60         clear(warning_text);
  61         if(used_images[image_id]) {
  62             warning_header.appendChild(
  63                 document.createTextNode("Cannot Delete")
  64             );
  65             warning_text.appendChild(
  66                 document.createTextNode("This snapshot is being used in a booking.")
  67             );
  68             delete_image_button.disabled = true;
  69         } else {
  70             warning_header.appendChild(
  71                 document.createTextNode("Are You Sure?")
  72             );
  73             warning_text.appendChild(
  74                 document.createTextNode("This cannot be undone")
  75             );
  76             delete_image_button.removeAttribute("disabled");
  77         }
  78     }
  79
  80     function submit_delete_form() {
  81         var ajaxForm = $("#image_delete_form");
  82         var formData = ajaxForm.serialize();
  83         req = new XMLHttpRequest();
  84         var url = "delete/" + current_image_id;
  85         req.open("POST", url, true);
  86         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  87         req.onerror = function() { alert("problem submitting form"); }
  88         req.send(formData);
  89     }
  90
  91     function clear(node) {
  92         while(node.lastChild) {
  93             node.removeChild(node.lastChild);
  94         }
  95     }
  96 </script>
  97 <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="my_modal" aria-hidden="true">
  98     <div class="modal-dialog" style="width: 450px;" role="document">
  99         <div class="modal-content">
 100             <div class="modal-header">
 101                 <h4 class="modal-title" id="my_modal" style="display: inline; float: left;">Delete Configuration?</h4>
 102                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 103                     <span aria-hidden="true">&times;</span>
 104                 </button>
 105             </div>
 106             <form id="image_delete_form">
 107                 {% csrf_token %}
 108             </form>
 109             <div class="modal-footer">
 110                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 111                 <button type="button" class="btn btn-primary" onclick="document.getElementById('modal_warning').style['max-height'] = '500px';">Delete</button>
 112             </div>
 113             <div id="modal_warning" class="modal-footer" style="max-height:0px;" >
 114                 <div style="text-align:center; margin: 5px">
 115                     <h3 id="warning_header">Are You Sure?</h3>
 116                     <p id="warning_text">This cannot be undone</p>
 117                     <button class="btn" onclick="document.getElementById('modal_warning').style['max-height'] = '0px';">Nevermind</button>
 118                     <button id="final_delete_b" class="btn btn-danger" data-dismiss="modal" onclick="submit_delete_form();">I'm Sure</button>
 119                 </div>
 120         </div>
 121     </div>
 122 </div>
 123 {% endblock %}