diff options
author | Parker Berberian <pberberian@iol.unh.edu> | 2019-01-29 10:05:27 -0500 |
---|---|---|
committer | Parker Berberian <pberberian@iol.unh.edu> | 2019-01-29 10:05:27 -0500 |
commit | fef3a855657a7e5c2393dc469690d73bb249bd8f (patch) | |
tree | aa9d47271c112a8a81cb1768292bae7206bfbe58 /src/templates | |
parent | 2c5650cad195f0bd78fb201ebbddc2afef96f752 (diff) |
Allow Users to Delete objects and Cancel Bookings
A user can now delete thier own resources, configs,
and snapshots as well as cancelling bookings.
Change-Id: Ic8e4751feeb0b8fa0d76816b8df2d16729ad2828
Signed-off-by: Parker Berberian <pberberian@iol.unh.edu>
Diffstat (limited to 'src/templates')
-rw-r--r-- | src/templates/account/booking_list.html | 57 | ||||
-rw-r--r-- | src/templates/account/configuration_list.html | 77 | ||||
-rw-r--r-- | src/templates/account/image_list.html | 109 | ||||
-rw-r--r-- | src/templates/account/resource_list.html | 121 |
4 files changed, 327 insertions, 37 deletions
diff --git a/src/templates/account/booking_list.html b/src/templates/account/booking_list.html index 9c6f3db..e56b19e 100644 --- a/src/templates/account/booking_list.html +++ b/src/templates/account/booking_list.html @@ -15,7 +15,15 @@ <li class="list-group-item">purpose: {{booking.purpose}}</li> </ul> </div> - <a class="btn btn-primary" href="/booking/detail/{{booking.id}}/">Details</a> + <div class="detail_button_container"> + <a class="btn btn-primary" href="/booking/detail/{{booking.id}}/">Details</a> + <button + class="btn btn-danger" + onclick='cancel_booking({{booking.id}});' + data-toggle="modal" + data-target="#resModal" + >Cancel</button> + </div> </div> {% endfor %} </div> @@ -38,4 +46,51 @@ </div> {% endfor %} </div> + +<script> + var current_booking_id = -1; + function cancel_booking(booking_id) { + current_booking_id = booking_id; + document.getElementById('modal_warning').style['max-height'] = '0px'; + } + + function submit_cancel_form() { + var ajaxForm = $("#booking_cancel_form"); + var formData = ajaxForm.serialize(); + req = new XMLHttpRequest(); + var url = "cancel/" + current_booking_id; + req.open("POST", url, true); + req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); + req.onerror = function() { alert("problem submitting form"); } + req.send(formData); + } +</script> +<div class="modal fade" id="resModal" tabindex="-1" role="dialog" aria-labelledby="my_modal" aria-hidden="true"> + <div class="modal-dialog" style="width: 450px;" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h4 class="modal-title" id="my_modal" style="display: inline; float: left;">Cancel Booking?</h4> + <p>Everthing on your machine(s) will be lost</p> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <form id="booking_cancel_form"> + {% csrf_token %} + </form> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-primary" onclick="document.getElementById('modal_warning').style['max-height'] = '500px';">Cancel Booking</button> + </div> + <div id="modal_warning" class="modal-footer" style="max-height:0px;" > + <div style="text-align:center; margin: 5px"> + <h3>Are You Sure?</h3> + <p>This cannot be undone</p> + <button class="btn" onclick="document.getElementById('modal_warning').style['max-height'] = '0px';">Nevermind</button> + <button class="btn btn-danger" id="confirm_cancel_button" data-dismiss="modal" onclick="submit_cancel_form();">I'm Sure</button> + </div> + </div> + </div> + </div> +</div> {% endblock %} diff --git a/src/templates/account/configuration_list.html b/src/templates/account/configuration_list.html index 14d0472..b920ba6 100644 --- a/src/templates/account/configuration_list.html +++ b/src/templates/account/configuration_list.html @@ -1,18 +1,71 @@ {% extends "base.html" %} {% block content %} - <div class="card_container"> - {% for config in configurations %} - <div class="detail_card"> - <div> - <h3>Configuration {{config.id}}</h3> - <ul class="list-group"> - <li class="list-group-item">id: {{config.id}}</li> - <li class="list-group-item">name: {{config.name}}</li> - <li class="list-group-item">description: {{config.description}}</li> - <li class="list-group-item">resource: {{config.bundle}}</li> - </ul> +<div class="card_container"> +{% for config in configurations %} + <div class="detail_card"> + <div> + <h3>Configuration {{config.id}}</h3> + <ul class="list-group"> + <li class="list-group-item">id: {{config.id}}</li> + <li class="list-group-item">name: {{config.name}}</li> + <li class="list-group-item">description: {{config.description}}</li> + <li class="list-group-item">resource: {{config.bundle}}</li> + </ul> + </div> + <div class="detail_button_container"> + <button + class="btn btn-danger" + style="width:49%;float:right;" + onclick='delete_config({{config.id}});' + data-toggle="modal" + data-target="#configModal" + >Delete</button> + </div> + </div> +{% endfor %} +</div> +<script> + var current_config_id = -1; + function delete_config(config_id) { + current_config_id = config_id; + document.getElementById('modal_warning').style['max-height'] = '0px'; + } + + function submit_delete_form() { + var ajaxForm = $("#config_delete_form"); + var formData = ajaxForm.serialize(); + req = new XMLHttpRequest(); + var url = "delete/" + current_config_id; + req.open("POST", url, true); + req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); + req.onerror = function() { alert("problem submitting form"); } + req.send(formData); + } +</script> +<div class="modal fade" id="configModal" tabindex="-1" role="dialog" aria-labelledby="my_modal" aria-hidden="true"> + <div class="modal-dialog" style="width: 450px;" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h4 class="modal-title" id="my_modal" style="display: inline; float: left;">Delete Configuration?</h4> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <form id="config_delete_form"> + {% csrf_token %} + </form> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-primary" onclick="document.getElementById('modal_warning').style['max-height'] = '500px';">Delete</button> </div> + <div id="modal_warning" class="modal-footer" style="max-height:0px;" > + <div style="text-align:center; margin: 5px"> + <h3>Are You Sure?</h3> + <p>This cannot be undone</p> + <button class="btn" onclick="document.getElementById('modal_warning').style['max-height'] = '0px';">Nevermind</button> + <button class="btn btn-danger" data-dismiss="modal" onclick="submit_delete_form();">I'm Sure</button> + </div> </div> - {% endfor %} </div> +</div> {% endblock %} diff --git a/src/templates/account/image_list.html b/src/templates/account/image_list.html index 7566a9c..cd83dcf 100644 --- a/src/templates/account/image_list.html +++ b/src/templates/account/image_list.html @@ -2,20 +2,29 @@ {% block content %} <h2>Images I Own</h2> <div class="card_container"> - {% for image in images %} - <div class="detail_card"> - <div> - <h3>Image {{image.id}}</h3> - <ul class="list-group"> - <li class="list-group-item">id: {{image.id}}</li> - <li class="list-group-item">lab: {{image.from_lab.name}}</li> - <li class="list-group-item">name: {{image.name}}</li> - <li class="list-group-item">description: {{image.description}}</li> - <li class="list-group-item">host profile: {{image.host_type.name}}</li> - </ul> - </div> +{% for image in images %} + <div class="detail_card"> + <div> + <h3>Image {{image.id}}</h3> + <ul class="list-group"> + <li class="list-group-item">id: {{image.id}}</li> + <li class="list-group-item">lab: {{image.from_lab.name}}</li> + <li class="list-group-item">name: {{image.name}}</li> + <li class="list-group-item">description: {{image.description}}</li> + <li class="list-group-item">host profile: {{image.host_type.name}}</li> + </ul> </div> - {% endfor %} + <div class="detail_button_container"> + <button + class="btn btn-danger" + style="width:49%;float:right;" + onclick='delete_image({{image.id}});' + data-toggle="modal" + data-target="#imageModal" + >Delete</button> + </div> + </div> +{% endfor %} </div> <h2>Public Images</h2> <div class="card_container"> @@ -34,4 +43,78 @@ </div> {% endfor %} </div> + +<script> + var current_image_id = -1; + var used_images = {{used_images|safe|default:"{}"}}; + function delete_image(image_id) { + current_image_id = image_id; + document.getElementById('modal_warning').style['max-height'] = '0px'; + var warning_header = document.getElementById("warning_header"); + var warning_text = document.getElementById("warning_text"); + var delete_image_button = document.getElementById("final_delete_b"); + clear(warning_header); + clear(warning_text); + if(used_images[image_id]) { + warning_header.appendChild( + document.createTextNode("Cannot Delete") + ); + warning_text.appendChild( + document.createTextNode("This snapshot is being used in a booking.") + ); + delete_image_button.disabled = true; + } else { + warning_header.appendChild( + document.createTextNode("Are You Sure?") + ); + warning_text.appendChild( + document.createTextNode("This cannot be undone") + ); + delete_image_button.removeAttribute("disabled"); + } + } + + function submit_delete_form() { + var ajaxForm = $("#image_delete_form"); + var formData = ajaxForm.serialize(); + req = new XMLHttpRequest(); + var url = "delete/" + current_image_id; + req.open("POST", url, true); + req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); + req.onerror = function() { alert("problem submitting form"); } + req.send(formData); + } + + function clear(node) { + while(node.lastChild) { + node.removeChild(node.lastChild); + } + } +</script> +<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="my_modal" aria-hidden="true"> + <div class="modal-dialog" style="width: 450px;" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h4 class="modal-title" id="my_modal" style="display: inline; float: left;">Delete Configuration?</h4> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <form id="image_delete_form"> + {% csrf_token %} + </form> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-primary" onclick="document.getElementById('modal_warning').style['max-height'] = '500px';">Delete</button> + </div> + <div id="modal_warning" class="modal-footer" style="max-height:0px;" > + <div style="text-align:center; margin: 5px"> + <h3 id="warning_header">Are You Sure?</h3> + <p id="warning_text">This cannot be undone</p> + <button class="btn" onclick="document.getElementById('modal_warning').style['max-height'] = '0px';">Nevermind</button> + <button id="final_delete_b" class="btn btn-danger" data-dismiss="modal" onclick="submit_delete_form();">I'm Sure</button> + </div> + </div> + </div> +</div> {% endblock %} diff --git a/src/templates/account/resource_list.html b/src/templates/account/resource_list.html index cdacdd6..1391e8e 100644 --- a/src/templates/account/resource_list.html +++ b/src/templates/account/resource_list.html @@ -1,17 +1,116 @@ {% extends "base.html" %} {% block content %} - <div class="card_container"> - {% for resource in resources %} - <div class="detail_card"> - <div> - <h3>Resource {{resource.id}}</h3> - <ul class="list-group"> - <li class="list-group-item">id: {{resource.id}}</li> - <li class="list-group-item">name: {{resource.name}}</li> - <li class="list-group-item">description: {{resource.description}}</li> - </ul> +<div class="card_container"> +{% for resource in resources %} + <div class="detail_card"> + <div> + <h3>Resource {{resource.id}}</h3> + <ul class="list-group"> + <li class="list-group-item">id: {{resource.id}}</li> + <li class="list-group-item">name: {{resource.name}}</li> + <li class="list-group-item">description: {{resource.description}}</li> + </ul> + </div> + <div class="detail_button_container"> + <button + class="btn btn-danger" + onclick='delete_resource({{resource.id}});' + data-toggle="modal" + data-target="#resModal" + >Delete</button> + </div> + </div> +{% endfor %} +</div> +<script> + var grb_mapping = {{grb_mapping|safe|default:"{}"}}; + var booking_mapping = {{booking_mapping|safe|default:"{}"}}; + var current_resource_id = -1; + function delete_resource(resource_id) { + document.getElementById("confirm_delete_button").removeAttribute("disabled"); + var configs = grb_mapping[resource_id]; + var warning = document.createTextNode("Are You Sure?"); + var warning_subtext = document.createTextNode("This cannot be undone"); + if(booking_mapping[resource_id]){ + var warning = document.createTextNode("This resource is being used. It cannot be deleted."); + 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."); + + document.getElementById("confirm_delete_button").disabled = true; + } + else if(configs.length > 0) { + list_configs(configs); + warning_text = "Are You Sure? The following Configurations will also be deleted."; + warning = document.createTextNode(warning_text); + } + + current_resource_id = resource_id; + set_modal_text(warning, warning_subtext); + } + + function set_modal_text(title, text) { + var clear = function(node) { + while(node.lastChild) { + node.removeChild(node.lastChild); + } + } + var warning_title = document.getElementById("config_warning"); + var warning_text = document.getElementById("warning_subtext"); + + clear(warning_title); + clear(warning_text); + + warning_title.appendChild(title); + warning_text.appendChild(text); + document.getElementById('modal_warning').style['max-height'] = '0px'; + } + + function list_configs(configs) { + var list = document.getElementById("config_list"); + for(var i=0; i<configs.length; i++){ + var str = configs[i].name; + var list_item = document.createElement("LI"); + list_item.appendChild(document.createTextNode(str)); + list.appendChild(list_item); + } + } + + function submit_delete_form() { + var ajaxForm = $("#res_delete_form"); + var formData = ajaxForm.serialize(); + req = new XMLHttpRequest(); + var url = "delete/" + current_resource_id; + req.open("POST", url, true); + req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); + req.onerror = function() { alert("problem submitting form"); } + req.send(formData); + } +</script> +<div class="modal fade" id="resModal" tabindex="-1" role="dialog" aria-labelledby="my_modal" aria-hidden="true"> + <div class="modal-dialog" style="width: 450px;" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h4 class="modal-title" id="my_modal" style="display: inline; float: left;">Delete Resource?</h4> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <form id="res_delete_form"> + {% csrf_token %} + </form> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-primary" onclick="document.getElementById('modal_warning').style['max-height'] = '500px';">Delete</button> </div> + <div id="modal_warning" class="modal-footer" style="max-height:0px;" > + <div style="text-align:center; margin: 5px"> + <h3 id="config_warning">Are You Sure?</h3> + <p id="warning_subtext">This cannot be undone</p> + <ul id="config_list"></ul> + <button class="btn" onclick="document.getElementById('modal_warning').style['max-height'] = '0px';">Nevermind</button> + <button class="btn btn-danger" id="confirm_delete_button" data-dismiss="modal" onclick="submit_delete_form();">I'm Sure</button> + </div> </div> - {% endfor %} </div> +</div> + {% endblock %} |