diff options
Diffstat (limited to 'lib/toaster/toastergui/templates')
-rw-r--r-- | lib/toaster/toastergui/templates/base.html | 1 | ||||
-rw-r--r-- | lib/toaster/toastergui/templates/basebuildpage.html | 62 | ||||
-rw-r--r-- | lib/toaster/toastergui/templates/editcustomimage_modal.html | 68 |
3 files changed, 93 insertions, 38 deletions
diff --git a/lib/toaster/toastergui/templates/base.html b/lib/toaster/toastergui/templates/base.html index 192f9fb55..210cf3360 100644 --- a/lib/toaster/toastergui/templates/base.html +++ b/lib/toaster/toastergui/templates/base.html @@ -43,7 +43,6 @@ recipesTypeAheadUrl: {% url 'xhr_recipestypeahead' project.id as paturl%}{{paturl|json}}, layersTypeAheadUrl: {% url 'xhr_layerstypeahead' project.id as paturl%}{{paturl|json}}, machinesTypeAheadUrl: {% url 'xhr_machinestypeahead' project.id as paturl%}{{paturl|json}}, - projectBuildsUrl: {% url 'projectbuilds' project.id as pburl %}{{pburl|json}}, xhrCustomRecipeUrl : "{% url 'xhr_customrecipe' %}", projectId : {{project.id}}, diff --git a/lib/toaster/toastergui/templates/basebuildpage.html b/lib/toaster/toastergui/templates/basebuildpage.html index 4a8e2a7ab..0d8c8820d 100644 --- a/lib/toaster/toastergui/templates/basebuildpage.html +++ b/lib/toaster/toastergui/templates/basebuildpage.html @@ -1,7 +1,7 @@ {% extends "base.html" %} {% load projecttags %} {% load project_url_tag %} -{% load queryset_to_list_filter %} +{% load objects_to_dictionaries_filter %} {% load humanize %} {% block pagecontent %} <!-- breadcrumbs --> @@ -81,33 +81,40 @@ </p> </li> - <li> - <!-- edit custom image built during this build --> - <p class="navbar-btn" data-role="edit-custom-image-trigger"> - <button class="btn btn-block">Edit custom image</button> - </p> - {% include 'editcustomimage_modal.html' %} - <script> - $(document).ready(function () { - var editableCustomImageRecipes = {{ build.get_custom_image_recipes | queryset_to_list:"id,name" | json }}; - - // edit custom image which was built during this build - var editCustomImageModal = $('#edit-custom-image-modal'); - var editCustomImageTrigger = $('[data-role="edit-custom-image-trigger"]'); + {% with build.get_custom_image_recipes as custom_image_recipes %} + {% if custom_image_recipes.count > 0 %} + <!-- edit custom image built during this build --> + <li> + <p class="navbar-btn" data-role="edit-custom-image-trigger"> + <button class="btn btn-block">Edit custom image</button> + {% include 'editcustomimage_modal.html' %} + <script> + var editableCustomImageRecipes = {{ custom_image_recipes | objects_to_dictionaries:"id,name" | json }}; - editCustomImageTrigger.click(function () { - // if there is a single editable custom image, go direct to the edit - // page for it; if there are multiple editable custom images, show - // dialog to select one of them for editing + $(document).ready(function () { + var editCustomImageTrigger = $('[data-role="edit-custom-image-trigger"]'); + var editCustomImageModal = $('#edit-custom-image-modal'); - // single editable custom image - - // multiple editable custom images - editCustomImageModal.modal('show'); - }); - }); - </script> - </li> + // edit custom image which was built during this build + editCustomImageTrigger.click(function () { + // single editable custom image: redirect to the edit page + // for that image + if (editableCustomImageRecipes.length === 1) { + var url = '{% url "customrecipe" build.project.id custom_image_recipes.first.id %}'; + document.location.href = url; + } + // multiple editable custom images: show modal to select + // one of them for editing + else { + editCustomImageModal.modal('show'); + } + }); + }); + </script> + </p> + </li> + {% endif %} + {% endwith %} <li> <!-- new custom image from image recipe in this build --> @@ -119,7 +126,7 @@ // imageRecipes includes both custom image recipes and built-in // image recipes, any of which can be used as the basis for a // new custom image - var imageRecipes = {{ build.get_image_recipes | queryset_to_list:"id,name" | json }}; + var imageRecipes = {{ build.get_image_recipes | objects_to_dictionaries:"id,name" | json }}; $(document).ready(function () { var newCustomImageModal = $('#new-custom-image-modal'); @@ -131,6 +138,7 @@ if (!imageRecipes.length) { return; } + newCustomImageModalSetRecipes(imageRecipes); newCustomImageModal.modal('show'); }); diff --git a/lib/toaster/toastergui/templates/editcustomimage_modal.html b/lib/toaster/toastergui/templates/editcustomimage_modal.html index fd998f63e..8046c08fb 100644 --- a/lib/toaster/toastergui/templates/editcustomimage_modal.html +++ b/lib/toaster/toastergui/templates/editcustomimage_modal.html @@ -1,23 +1,71 @@ <!-- -modal dialog shown on the build dashboard, for editing an existing custom image +modal dialog shown on the build dashboard, for editing an existing custom image; +only shown if more than one custom image was built, so the user needs to +choose which one to edit + +required context: + build - a Build object --> <div class="modal hide fade in" aria-hidden="false" id="edit-custom-image-modal"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> - <h3>Select custom image to edit</h3> + <h3>Which image do you want to edit?</h3> </div> + <div class="modal-body"> <div class="row-fluid"> - <span class="help-block"> - Explanation of what this modal is for - </span> - </div> - <div class="control-group controls"> - <input type="text" class="huge" placeholder="input box" required> - <span class="help-block error" style="display:none">Error text</span> + {% for recipe in build.get_custom_image_recipes %} + <label class="radio"> + {{recipe.name}} + <input type="radio" class="form-control" name="select-custom-image" + data-url="{% url 'customrecipe' build.project.id recipe.id %}"> + </label> + {% endfor %} </div> + <span class="help-block error" id="invalid-custom-image-help" style="display:none"> + Please select a custom image to edit. + </span> </div> + <div class="modal-footer"> - <button class="btn btn-primary btn-large" disabled>Action</button> + <button class="btn btn-primary btn-large" data-url="#" + data-action="edit-custom-image" disabled> + Edit custom image + </button> </div> </div> + +<script> +$(document).ready(function () { + var editCustomImageButton = $('[data-action="edit-custom-image"]'); + var error = $('#invalid-custom-image-help'); + var radios = $('[name="select-custom-image"]'); + + // return custom image radio buttons which are selected + var getSelectedRadios = function () { + return $('[name="select-custom-image"]:checked'); + }; + + radios.change(function () { + if (getSelectedRadios().length === 1) { + editCustomImageButton.removeAttr('disabled'); + error.hide(); + } + else { + editCustomImageButton.attr('disabled', 'disabled'); + error.show(); + } + }); + + editCustomImageButton.click(function () { + var selectedRadios = getSelectedRadios(); + + if (selectedRadios.length === 1) { + document.location.href = selectedRadios.first().attr('data-url'); + } + else { + error.show(); + } + }); +}); +</script> |