src/templates/base/account/image_list.html

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