xref: /openbmc/openbmc/poky/bitbake/lib/toaster/toastergui/templates/editcustomimage_modal.html (revision eb8dc40360f0cfef56fb6947cc817a547d6d9bc6) 
1<!--
2modal dialog shown on the build dashboard, for editing an existing custom image;
3only shown if more than one custom image was built, so the user needs to
4choose which one to edit
5
6required context:
7  build - a Build object
8-->
9<div class="modal fade" aria-hidden="false" id="edit-custom-image-modal">
10  <div class="modal-dialog">
11    <div class="modal-content">
12      <div class="modal-header">
13        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
14        <h3>Which image do you want to edit?</h3>
15      </div>
16
17      <div class="modal-body">
18        {% for recipe in build.get_custom_image_recipes %}
19        <div class="radio">
20          <label>
21            <input type="radio" name="select-custom-image"
22                                data-url="{% url 'customrecipe' build.project.id recipe.id %}">
23            {{recipe.name}}
24          </label>
25        </div>
26        {% endfor %}
27        <span class="help-block text-danger" id="invalid-custom-image-help" style="display:none">
28          Please select a custom image to edit.
29        </span>
30      </div>
31
32      <div class="modal-footer">
33        <button class="btn btn-primary btn-lg" data-url="#"
34                                               data-action="edit-custom-image" disabled>
35          Edit custom image
36        </button>
37      </div>
38    </div>
39  </div>
40</div>
41
42<script>
43$(document).ready(function () {
44  var editCustomImageButton = $('[data-action="edit-custom-image"]');
45  var error = $('#invalid-custom-image-help');
46  var radios = $('[name="select-custom-image"]');
47
48  // return custom image radio buttons which are selected
49  var getSelectedRadios = function () {
50    return $('[name="select-custom-image"]:checked');
51  };
52
53  function enableSubmit() {
54    if (getSelectedRadios().length === 1) {
55      editCustomImageButton.removeAttr('disabled');
56      error.hide();
57    }
58    else {
59      editCustomImageButton.attr('disabled', 'disabled');
60      error.show();
61    }
62  };
63
64  $("#edit-custom-image-modal").on("shown.bs.modal", function() {
65    enableSubmit();
66  });
67
68  radios.change(function () {
69    enableSubmit();
70  });
71
72  editCustomImageButton.click(function () {
73    var selectedRadios = getSelectedRadios();
74
75    if (selectedRadios.length === 1) {
76      document.location.href = selectedRadios.first().attr('data-url');
77    }
78    else {
79      error.show();
80    }
81  });
82
83  // Select the first custom image listed. Radio button groups
84  // should always have an option selected by default
85  $("input:radio:first").attr("checked", "checked");
86
87});
88</script>
89