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