diff options
author | Elliot Smith <elliot.smith@intel.com> | 2016-04-19 17:28:46 +0100 |
---|---|---|
committer | Richard Purdie <richard.purdie@linuxfoundation.org> | 2016-04-19 21:11:26 +0100 |
commit | 1cf8f215b3543ce0f39ebd3321d58cfb518f1c1f (patch) | |
tree | ac2ec1be24db0eb3f845d53cfa7ce6c18c36ab70 /bitbake/lib/toaster/toastergui/templates | |
parent | a40a3e6defefd69521a417a366b8752be7e778f9 (diff) | |
download | poky-1cf8f215b3543ce0f39ebd3321d58cfb518f1c1f.tar.gz |
bitbake: toaster: add modal to select custom image for editing
Add functionality to the placeholder button on the build dashboard
to open a modal dialog displaying editable custom images, in cases
where multiple custom images were built by the build. Where there
is only one editable custom image, go direct to its edit page.
The images shown in the modal are custom recipes for the project
which were built during the build shown in the dashboard.
This also affects the new custom image dialog, as that also has
to show custom image recipes as well as image recipes built during
the build. Modify the API on the Build object to support both.
Also modify and rename the queryset_to_list template filter so that
it can deal with lists as well as querysets, as the new custom image
modal has to show a list of image recipes which is an amalgam of two
querysets.
[YOCTO #9123]
(Bitbake rev: 8c2aea3fa8e1071de60390e86e2536904fa9b7c0)
Signed-off-by: Elliot Smith <elliot.smith@intel.com>
Signed-off-by: Michael Wood <michael.g.wood@intel.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>
Diffstat (limited to 'bitbake/lib/toaster/toastergui/templates')
3 files changed, 93 insertions, 38 deletions
diff --git a/bitbake/lib/toaster/toastergui/templates/base.html b/bitbake/lib/toaster/toastergui/templates/base.html index 192f9fb556..210cf3360c 100644 --- a/bitbake/lib/toaster/toastergui/templates/base.html +++ b/bitbake/lib/toaster/toastergui/templates/base.html | |||
@@ -43,7 +43,6 @@ | |||
43 | recipesTypeAheadUrl: {% url 'xhr_recipestypeahead' project.id as paturl%}{{paturl|json}}, | 43 | recipesTypeAheadUrl: {% url 'xhr_recipestypeahead' project.id as paturl%}{{paturl|json}}, |
44 | layersTypeAheadUrl: {% url 'xhr_layerstypeahead' project.id as paturl%}{{paturl|json}}, | 44 | layersTypeAheadUrl: {% url 'xhr_layerstypeahead' project.id as paturl%}{{paturl|json}}, |
45 | machinesTypeAheadUrl: {% url 'xhr_machinestypeahead' project.id as paturl%}{{paturl|json}}, | 45 | machinesTypeAheadUrl: {% url 'xhr_machinestypeahead' project.id as paturl%}{{paturl|json}}, |
46 | |||
47 | projectBuildsUrl: {% url 'projectbuilds' project.id as pburl %}{{pburl|json}}, | 46 | projectBuildsUrl: {% url 'projectbuilds' project.id as pburl %}{{pburl|json}}, |
48 | xhrCustomRecipeUrl : "{% url 'xhr_customrecipe' %}", | 47 | xhrCustomRecipeUrl : "{% url 'xhr_customrecipe' %}", |
49 | projectId : {{project.id}}, | 48 | projectId : {{project.id}}, |
diff --git a/bitbake/lib/toaster/toastergui/templates/basebuildpage.html b/bitbake/lib/toaster/toastergui/templates/basebuildpage.html index 4a8e2a7abd..0d8c8820da 100644 --- a/bitbake/lib/toaster/toastergui/templates/basebuildpage.html +++ b/bitbake/lib/toaster/toastergui/templates/basebuildpage.html | |||
@@ -1,7 +1,7 @@ | |||
1 | {% extends "base.html" %} | 1 | {% extends "base.html" %} |
2 | {% load projecttags %} | 2 | {% load projecttags %} |
3 | {% load project_url_tag %} | 3 | {% load project_url_tag %} |
4 | {% load queryset_to_list_filter %} | 4 | {% load objects_to_dictionaries_filter %} |
5 | {% load humanize %} | 5 | {% load humanize %} |
6 | {% block pagecontent %} | 6 | {% block pagecontent %} |
7 | <!-- breadcrumbs --> | 7 | <!-- breadcrumbs --> |
@@ -81,33 +81,40 @@ | |||
81 | </p> | 81 | </p> |
82 | </li> | 82 | </li> |
83 | 83 | ||
84 | <li> | 84 | {% with build.get_custom_image_recipes as custom_image_recipes %} |
85 | <!-- edit custom image built during this build --> | 85 | {% if custom_image_recipes.count > 0 %} |
86 | <p class="navbar-btn" data-role="edit-custom-image-trigger"> | 86 | <!-- edit custom image built during this build --> |
87 | <button class="btn btn-block">Edit custom image</button> | 87 | <li> |
88 | </p> | 88 | <p class="navbar-btn" data-role="edit-custom-image-trigger"> |
89 | {% include 'editcustomimage_modal.html' %} | 89 | <button class="btn btn-block">Edit custom image</button> |
90 | <script> | 90 | {% include 'editcustomimage_modal.html' %} |
91 | $(document).ready(function () { | 91 | <script> |
92 | var editableCustomImageRecipes = {{ build.get_custom_image_recipes | queryset_to_list:"id,name" | json }}; | 92 | var editableCustomImageRecipes = {{ custom_image_recipes | objects_to_dictionaries:"id,name" | json }}; |
93 | |||
94 | // edit custom image which was built during this build | ||
95 | var editCustomImageModal = $('#edit-custom-image-modal'); | ||
96 | var editCustomImageTrigger = $('[data-role="edit-custom-image-trigger"]'); | ||
97 | 93 | ||
98 | editCustomImageTrigger.click(function () { | 94 | $(document).ready(function () { |
99 | // if there is a single editable custom image, go direct to the edit | 95 | var editCustomImageTrigger = $('[data-role="edit-custom-image-trigger"]'); |
100 | // page for it; if there are multiple editable custom images, show | 96 | var editCustomImageModal = $('#edit-custom-image-modal'); |
101 | // dialog to select one of them for editing | ||
102 | 97 | ||
103 | // single editable custom image | 98 | // edit custom image which was built during this build |
104 | 99 | editCustomImageTrigger.click(function () { | |
105 | // multiple editable custom images | 100 | // single editable custom image: redirect to the edit page |
106 | editCustomImageModal.modal('show'); | 101 | // for that image |
107 | }); | 102 | if (editableCustomImageRecipes.length === 1) { |
108 | }); | 103 | var url = '{% url "customrecipe" build.project.id custom_image_recipes.first.id %}'; |
109 | </script> | 104 | document.location.href = url; |
110 | </li> | 105 | } |
106 | // multiple editable custom images: show modal to select | ||
107 | // one of them for editing | ||
108 | else { | ||
109 | editCustomImageModal.modal('show'); | ||
110 | } | ||
111 | }); | ||
112 | }); | ||
113 | </script> | ||
114 | </p> | ||
115 | </li> | ||
116 | {% endif %} | ||
117 | {% endwith %} | ||
111 | 118 | ||
112 | <li> | 119 | <li> |
113 | <!-- new custom image from image recipe in this build --> | 120 | <!-- new custom image from image recipe in this build --> |
@@ -119,7 +126,7 @@ | |||
119 | // imageRecipes includes both custom image recipes and built-in | 126 | // imageRecipes includes both custom image recipes and built-in |
120 | // image recipes, any of which can be used as the basis for a | 127 | // image recipes, any of which can be used as the basis for a |
121 | // new custom image | 128 | // new custom image |
122 | var imageRecipes = {{ build.get_image_recipes | queryset_to_list:"id,name" | json }}; | 129 | var imageRecipes = {{ build.get_image_recipes | objects_to_dictionaries:"id,name" | json }}; |
123 | 130 | ||
124 | $(document).ready(function () { | 131 | $(document).ready(function () { |
125 | var newCustomImageModal = $('#new-custom-image-modal'); | 132 | var newCustomImageModal = $('#new-custom-image-modal'); |
@@ -131,6 +138,7 @@ | |||
131 | if (!imageRecipes.length) { | 138 | if (!imageRecipes.length) { |
132 | return; | 139 | return; |
133 | } | 140 | } |
141 | |||
134 | newCustomImageModalSetRecipes(imageRecipes); | 142 | newCustomImageModalSetRecipes(imageRecipes); |
135 | newCustomImageModal.modal('show'); | 143 | newCustomImageModal.modal('show'); |
136 | }); | 144 | }); |
diff --git a/bitbake/lib/toaster/toastergui/templates/editcustomimage_modal.html b/bitbake/lib/toaster/toastergui/templates/editcustomimage_modal.html index fd998f63eb..8046c08fb5 100644 --- a/bitbake/lib/toaster/toastergui/templates/editcustomimage_modal.html +++ b/bitbake/lib/toaster/toastergui/templates/editcustomimage_modal.html | |||
@@ -1,23 +1,71 @@ | |||
1 | <!-- | 1 | <!-- |
2 | modal dialog shown on the build dashboard, for editing an existing custom image | 2 | modal dialog shown on the build dashboard, for editing an existing custom image; |
3 | only shown if more than one custom image was built, so the user needs to | ||
4 | choose which one to edit | ||
5 | |||
6 | required context: | ||
7 | build - a Build object | ||
3 | --> | 8 | --> |
4 | <div class="modal hide fade in" aria-hidden="false" id="edit-custom-image-modal"> | 9 | <div class="modal hide fade in" aria-hidden="false" id="edit-custom-image-modal"> |
5 | <div class="modal-header"> | 10 | <div class="modal-header"> |
6 | <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> | 11 | <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> |
7 | <h3>Select custom image to edit</h3> | 12 | <h3>Which image do you want to edit?</h3> |
8 | </div> | 13 | </div> |
14 | |||
9 | <div class="modal-body"> | 15 | <div class="modal-body"> |
10 | <div class="row-fluid"> | 16 | <div class="row-fluid"> |
11 | <span class="help-block"> | 17 | {% for recipe in build.get_custom_image_recipes %} |
12 | Explanation of what this modal is for | 18 | <label class="radio"> |
13 | </span> | 19 | {{recipe.name}} |
14 | </div> | 20 | <input type="radio" class="form-control" name="select-custom-image" |
15 | <div class="control-group controls"> | 21 | data-url="{% url 'customrecipe' build.project.id recipe.id %}"> |
16 | <input type="text" class="huge" placeholder="input box" required> | 22 | </label> |
17 | <span class="help-block error" style="display:none">Error text</span> | 23 | {% endfor %} |
18 | </div> | 24 | </div> |
25 | <span class="help-block error" id="invalid-custom-image-help" style="display:none"> | ||
26 | Please select a custom image to edit. | ||
27 | </span> | ||
19 | </div> | 28 | </div> |
29 | |||
20 | <div class="modal-footer"> | 30 | <div class="modal-footer"> |
21 | <button class="btn btn-primary btn-large" disabled>Action</button> | 31 | <button class="btn btn-primary btn-large" data-url="#" |
32 | data-action="edit-custom-image" disabled> | ||
33 | Edit custom image | ||
34 | </button> | ||
22 | </div> | 35 | </div> |
23 | </div> | 36 | </div> |
37 | |||
38 | <script> | ||
39 | $(document).ready(function () { | ||
40 | var editCustomImageButton = $('[data-action="edit-custom-image"]'); | ||
41 | var error = $('#invalid-custom-image-help'); | ||
42 | var radios = $('[name="select-custom-image"]'); | ||
43 | |||
44 | // return custom image radio buttons which are selected | ||
45 | var getSelectedRadios = function () { | ||
46 | return $('[name="select-custom-image"]:checked'); | ||
47 | }; | ||
48 | |||
49 | radios.change(function () { | ||
50 | if (getSelectedRadios().length === 1) { | ||
51 | editCustomImageButton.removeAttr('disabled'); | ||
52 | error.hide(); | ||
53 | } | ||
54 | else { | ||
55 | editCustomImageButton.attr('disabled', 'disabled'); | ||
56 | error.show(); | ||
57 | } | ||
58 | }); | ||
59 | |||
60 | editCustomImageButton.click(function () { | ||
61 | var selectedRadios = getSelectedRadios(); | ||
62 | |||
63 | if (selectedRadios.length === 1) { | ||
64 | document.location.href = selectedRadios.first().attr('data-url'); | ||
65 | } | ||
66 | else { | ||
67 | error.show(); | ||
68 | } | ||
69 | }); | ||
70 | }); | ||
71 | </script> | ||