[bitbake-devel] [PATCH 4/4] toaster: Remove the new-build-input button widget
Elliot Smith
elliot.smith at intel.com
Fri Nov 13 13:48:37 UTC 2015
From: Michael Wood <michael.g.wood at intel.com>
The button required a lot of state maintenance to make sure it
showed up when the project was configured properly, showed correctly
according to the projects known to Toaster, displayed correctly
according to the mode Toaster was in, and was able to be
used to change the current project.
Signed-off-by: Michael Wood <michael.g.wood at intel.com>
Signed-off-by: Elliot Smith <elliot.smith at intel.com>
---
lib/toaster/toastergui/static/js/base.js | 229 ---------------------
lib/toaster/toastergui/static/js/projecttopbar.js | 81 ++++++++
lib/toaster/toastergui/templates/base.html | 133 +++---------
.../toastergui/templates/projecttopbar.html | 18 ++
4 files changed, 132 insertions(+), 329 deletions(-)
delete mode 100644 bitbake/lib/toaster/toastergui/static/js/base.js
create mode 100644 bitbake/lib/toaster/toastergui/static/js/projecttopbar.js
diff --git a/lib/toaster/toastergui/static/js/base.js b/lib/toaster/toastergui/static/js/base.js
deleted file mode 100644
index ed22a4e..0000000
--- a/lib/toaster/toastergui/static/js/base.js
+++ /dev/null
@@ -1,229 +0,0 @@
-'use strict';
-
-function basePageInit(ctx) {
-
- var newBuildButton = $("#new-build-button");
- var newBuildTargetInput;
- var newBuildTargetBuildBtn;
- var projectNameForm = $("#project-name-change-form");
- var projectNameContainer = $("#project-name-container");
- var projectName = $("#project-name");
- var projectNameFormToggle = $("#project-change-form-toggle");
- var projectNameChangeCancel = $("#project-name-change-cancel");
-
- /* initially the current project is used unless overridden by the new build
- * button in top right nav
- */
- var selectedProject = libtoaster.ctx;
-
- var selectedTarget;
-
- var newBuildProjectInput = $("#new-build-button #project-name-input");
- var newBuildProjectSaveBtn = $("#new-build-button #save-project-button");
-
- /* Project name change functionality */
- projectNameFormToggle.click(function(e){
- e.preventDefault();
- projectNameContainer.hide();
- projectNameForm.fadeIn();
- });
-
- projectNameChangeCancel.click(function(e){
- e.preventDefault();
- projectNameForm.hide();
- projectNameContainer.fadeIn();
- });
-
- $("#project-name-change-btn").click(function(e){
- var newProjectName = $("#project-name-change-input").val();
-
- libtoaster.editCurrentProject({ projectName: newProjectName }, function (){
- projectName.html(newProjectName);
- libtoaster.ctx.projectName = newProjectName;
- projectNameChangeCancel.click();
- });
- });
-
- _checkProjectBuildable();
-
- $("#project-topbar .nav li a").each(function(){
- if (window.location.pathname === $(this).attr('href'))
- $(this).parent().addClass('active');
- else
- $(this).parent().removeClass('active');
- });
-
- if ($(".total-builds").length !== 0){
- libtoaster.getProjectInfo(libtoaster.ctx.projectPageUrl, function(prjInfo){
- if (prjInfo.completedbuilds)
- $(".total-builds").text(prjInfo.completedbuilds.length);
- });
- }
-
- /* Hide the button if we're on the project,newproject or importlyaer page
- * or if there are no projects yet defined
- * only show if there isn't already a build-target-input already
- */
- if (ctx.numProjects > 0 &&
- ctx.currentUrl.search('newproject') < 0 &&
- $(".build-target-input").length === 1) {
-
- newBuildTargetInput = $("#new-build-button .build-target-input");
- newBuildTargetBuildBtn = $("#new-build-button").find(".build-button");
-
- _setupNewBuildButton();
- newBuildButton.show();
- } else if ($(".build-target-input").length > 0) {
- newBuildTargetInput = $("#project-topbar .build-target-input");
- newBuildTargetBuildBtn = $("#project-topbar .build-button");
- } else {
- return;
- }
-
- /* Hide the change project icon when there is only one project */
- if (ctx.numProjects === 1) {
- $('#project .icon-pencil').hide();
- }
-
- /* If we have a project setup the typeahead */
- if (selectedProject.recipesTypeAheadUrl){
- libtoaster.makeTypeahead(newBuildTargetInput, selectedProject.recipesTypeAheadUrl, { format: "json" }, function (item) {
- selectedTarget = item;
- newBuildTargetBuildBtn.removeAttr("disabled");
- });
- }
-
- newBuildTargetInput.on('input', function () {
- if ($(this).val().length === 0) {
- newBuildTargetBuildBtn.attr("disabled", "disabled");
- } else {
- newBuildTargetBuildBtn.removeAttr("disabled");
- }
- });
-
- newBuildTargetBuildBtn.click(function (e) {
- e.preventDefault();
-
- if (!newBuildTargetInput.val()) {
- return;
- }
-
- /* We use the value of the input field so as to maintain any command also
- * added e.g. core-image-minimal:clean
- */
- selectedTarget = { name: newBuildTargetInput.val() };
-
- /* Fire off the build */
- libtoaster.startABuild(selectedProject.projectBuildsUrl,
- selectedProject.projectId, selectedTarget.name, function(){
- window.location.replace(selectedProject.projectBuildsUrl);
- }, null);
- });
-
- function _checkProjectBuildable() {
- if (selectedProject.projectId === undefined || selectedProject.projectIsDefault) {
- return;
- }
-
- libtoaster.getProjectInfo(selectedProject.projectPageUrl,
- function (data) {
- if (data.machine === null || data.machine.name === undefined || data.layers.length === 0) {
- /* we can't build anything without a machine and some layers */
- $("#new-build-button #targets-form").hide();
- $("#new-build-button .alert").show();
- } else {
- $("#new-build-button #targets-form").show();
- $("#new-build-button .alert").hide();
-
- /* we can build this project; enable input fields */
- newBuildTargetInput.removeAttr("disabled");
- }
- }, null);
- }
-
- /* Setup New build button in the top nav bar */
- function _setupNewBuildButton() {
-
- /* If we don't have a current project then present the set project
- * form.
- */
- if (selectedProject.projectId === undefined || selectedProject.projectIsDefault) {
- $('#change-project-form').show();
- $('#project .icon-pencil').hide();
- }
-
- libtoaster.makeTypeahead(newBuildProjectInput, selectedProject.projectsTypeAheadUrl, { format : "json" }, function (item) {
- /* successfully selected a project */
- newBuildProjectSaveBtn.removeAttr("disabled");
- selectedProject = item;
- });
-
- /* Any typing in the input apart from enter key is going to invalidate
- * the value that has been set by selecting a suggestion from the typeahead
- */
- newBuildProjectInput.on('input', function (event) {
- if (event.keyCode === 13) {
- return;
- }
- newBuildProjectSaveBtn.attr("disabled", "disabled");
- });
-
-
- newBuildProjectSaveBtn.click(function () {
- selectedProject.projectId = selectedProject.id;
- /* Update the typeahead project_id paramater */
- _checkProjectBuildable();
-
- newBuildTargetInput.removeAttr("disabled");
-
- /* We've got a new project so now we need to update the
- * target urls. We can get this from the new project's info
- */
- $.getJSON(selectedProject.projectPageUrl, { format: "json" },
- function(projectInfo){
- /* Update the typeahead to use the new selectedProject */
- selectedProject = projectInfo;
-
- libtoaster.makeTypeahead(newBuildTargetInput, selectedProject.recipesTypeAheadUrl, { format: "json" }, function (item) {
- /* successfully selected a target */
- selectedTarget = item;
- newBuildTargetBuildBtn.removeAttr("disabled");
- });
-
- });
- newBuildTargetInput.val("");
-
- /* set up new form aspect */
- $("#new-build-button #project a").text(selectedProject.name).attr('href', selectedProject.projectPageUrl);
- $("#new-build-button .alert a").attr('href', selectedProject.projectPageUrl);
- $("#project .icon-pencil").show();
-
- $("#change-project-form").slideUp({ 'complete' : function () {
- $("#new-build-button #project").show();
- }});
- });
-
- $('#new-build-button #project .icon-pencil').click(function () {
- newBuildProjectSaveBtn.attr("disabled", "disabled");
- newBuildProjectInput.val($("#new-build-button #project a").text());
- $("#cancel-change-project").show();
- $(this).parent().hide();
- $("#change-project-form").slideDown();
- });
-
- $("#new-build-button #cancel-change-project").click(function () {
- $("#change-project-form").hide(function () {
- $('#new-build-button #project').show();
- });
-
- newBuildProjectInput.val("");
- newBuildProjectSaveBtn.attr("disabled", "disabled");
- });
-
- /* Keep the dropdown open even unless we click outside the dropdown area */
- $(".new-build").click (function (event) {
- event.stopPropagation();
- });
- };
-
-}
diff --git a/lib/toaster/toastergui/static/js/projecttopbar.js b/lib/toaster/toastergui/static/js/projecttopbar.js
new file mode 100644
index 0000000..b6ad380
--- /dev/null
+++ b/lib/toaster/toastergui/static/js/projecttopbar.js
@@ -0,0 +1,81 @@
+'use strict';
+
+function projectTopBarInit(ctx) {
+
+ var projectNameForm = $("#project-name-change-form");
+ var projectNameContainer = $("#project-name-container");
+ var projectName = $("#project-name");
+ var projectNameFormToggle = $("#project-change-form-toggle");
+ var projectNameChangeCancel = $("#project-name-change-cancel");
+ var newBuildTargetInput = $("#build-input");
+ var newBuildTargetBuildBtn = $("#build-button");
+ var selectedTarget;
+
+ /* Project name change functionality */
+ projectNameFormToggle.click(function(e){
+ e.preventDefault();
+ projectNameContainer.hide();
+ projectNameForm.fadeIn();
+ });
+
+ projectNameChangeCancel.click(function(e){
+ e.preventDefault();
+ projectNameForm.hide();
+ projectNameContainer.fadeIn();
+ });
+
+ $("#project-name-change-btn").click(function(){
+ var newProjectName = $("#project-name-change-input").val();
+
+ libtoaster.editCurrentProject({ projectName: newProjectName }, function (){
+ projectName.html(newProjectName);
+ libtoaster.ctx.projectName = newProjectName;
+ projectNameChangeCancel.click();
+ });
+ });
+
+ /* Nav bar activate state switcher */
+ $("#project-topbar .nav li a").each(function(){
+ if (window.location.pathname === $(this).attr('href'))
+ $(this).parent().addClass('active');
+ else
+ $(this).parent().removeClass('active');
+ });
+
+ /* Recipe build input functionality */
+ if (ctx.numProjectLayers > 0 && ctx.machine){
+ newBuildTargetInput.removeAttr("disabled");
+ }
+
+ libtoaster.makeTypeahead(newBuildTargetInput,
+ libtoaster.ctx.recipesTypeAheadUrl, {}, function (item) {
+ selectedTarget = item;
+ newBuildTargetBuildBtn.removeAttr("disabled");
+ });
+
+ newBuildTargetInput.on('input', function () {
+ if ($(this).val().length === 0) {
+ newBuildTargetBuildBtn.attr("disabled", "disabled");
+ } else {
+ newBuildTargetBuildBtn.removeAttr("disabled");
+ }
+ });
+
+ newBuildTargetBuildBtn.click(function (e) {
+ e.preventDefault();
+ if (!newBuildTargetInput.val()) {
+ return;
+ }
+ /* We use the value of the input field so as to maintain any command also
+ * added e.g. core-image-minimal:clean and because we can build targets
+ * that toaster doesn't yet know about
+ */
+ selectedTarget = { name: newBuildTargetInput.val() };
+
+ /* Fire off the build */
+ libtoaster.startABuild(libtoaster.ctx.projectBuildsUrl,
+ null, selectedTarget.name, function(){
+ window.location.replace(libtoaster.ctx.projectBuildsUrl);
+ }, null);
+ });
+}
diff --git a/lib/toaster/toastergui/templates/base.html b/lib/toaster/toastergui/templates/base.html
index 11ac2a0..e0b15ce 100644
--- a/lib/toaster/toastergui/templates/base.html
+++ b/lib/toaster/toastergui/templates/base.html
@@ -3,15 +3,15 @@
{% load projecttags %}
{% load project_url_tag %}
<html lang="en">
- <head>
- <title>
- {% block title %} Toaster {% endblock %}
- </title>
-<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css"/>
-<link rel="stylesheet" href="{% static 'css/bootstrap-responsive.min.css' %}" type='text/css'/>
-<link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}" type='text/css'/>
-<link rel="stylesheet" href="{% static 'css/prettify.css' %}" type='text/css'/>
-<link rel="stylesheet" href="{% static 'css/default.css' %}" type='text/css'/>
+ <head>
+ <title>
+ {% block title %} Toaster {% endblock %}
+ </title>
+ <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css"/>
+ <link rel="stylesheet" href="{% static 'css/bootstrap-responsive.min.css' %}" type='text/css'/>
+ <link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}" type='text/css'/>
+ <link rel="stylesheet" href="{% static 'css/prettify.css' %}" type='text/css'/>
+ <link rel="stylesheet" href="{% static 'css/default.css' %}" type='text/css'/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
@@ -40,7 +40,6 @@
projectId : {{project.id}},
projectPageUrl : {% url 'project' project.id as purl %}{{purl|json}},
projectName : {{project.name|json}},
- projectIsDefault: {% if project.is_default %}true{% else %}false{% endif %},
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}},
@@ -51,37 +50,24 @@
projectId : undefined,
projectPageUrl : undefined,
projectName : undefined,
- projectIsDefault: false,
{% endif %}
};
</script>
- <script src="{% static 'js/base.js' %}"></script>
- <script>
- $(document).ready(function () {
- /* Vars needed for base.js */
- var ctx = {};
- ctx.numProjects = {{projects|length}};
- ctx.currentUrl = "{{request.path|escapejs}}";
-
- basePageInit(ctx);
- });
- </script>
+ {% block extraheadcontent %}
+ {% endblock %}
+ </head>
-{% block extraheadcontent %}
-{% endblock %}
- </head>
+ <body style="height: 100%">
-<body style="height: 100%">
-
- {% csrf_token %}
- <div id="loading-notification" class="alert lead text-center" style="display:none">
- Loading <i class="fa-pulse icon-spinner"></i>
- </div>
+ {% csrf_token %}
+ <div id="loading-notification" class="alert lead text-center" style="display:none">
+ Loading <i class="fa-pulse icon-spinner"></i>
+ </div>
- <div id="change-notification" class="alert lead alert-info" style="display:none">
- <button type="button" class="close" id="hide-alert">×</button>
- <span id="change-notification-msg"></span>
- </div>
+ <div id="change-notification" class="alert lead alert-info" style="display:none">
+ <button type="button" class="close" id="hide-alert">×</button>
+ <span id="change-notification-msg"></span>
+ </div>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
@@ -125,72 +111,19 @@
<!-- new project button; only show in build mode -->
{% if BUILD_MODE %}
- <div class="btn-group pull-right">
- <a class="btn" id="new-project-button" href="{% url 'newproject' %}">New project</a>
- </div>
- {% endif %}
-
- <!--
- New build popover; only shown if there is at least one user-created project
- and we're in build mode
- -->
- {% if BUILD_MODE and non_cli_projects.count > 0 %}
- <div class="btn-group pull-right" id="new-build-button" style="display:none">
- <button class="btn dropdown-toggle" data-toggle="dropdown">
- New build
- <i class="icon-caret-down"></i>
- </button>
- <ul class="dropdown-menu new-build multi-select">
- <li>
- <h3>New build</h3>
- <h6>
- Project:
- <span id="project">
- {% if project.id and not project.is_default %}
- <a class="lead" href="{% project_url project %}">{{project.name}}</a>
- {% else %}
- <a class="lead" href="#"></a>
- {% endif %}
- <i class="icon-pencil"></i>
- </span>
- </h6>
- <form id="change-project-form" style="display:none;">
- <div class="input-append">
- <input type="text" class="input-medium" id="project-name-input" placeholder="Type a project name" autocomplete="off" data-minLength="1" data-autocomplete="off" data-provide="typeahead"/>
- <button id="save-project-button" class="btn" type="button">Save</button>
- <a href="#" id="cancel-change-project" class="btn btn-link" style="display: none">Cancel</a>
- </div>
- <p><a id="view-all-projects" href="{% url 'all-projects' %}">View all projects</a></p>
- </form>
- </li>
- <li>
- <div class="alert" style="display:none;">
- <p>This project configuration is incomplete, so you cannot run builds.</p>
- <p><a href="{% if project.id %}{% url 'project' project.id %}{% endif %}">View project configuration</a></p>
- </div>
- </li>
- <li id="targets-form">
- <h6>Recipe(s):</h6>
- <form>
- <input type="text" class="input-xlarge build-target-input" placeholder="Type a recipe name" autocomplete="off" data-minLength="1" data-autocomplete="off" data-provide="typeahead" disabled/>
- <div class="row-fluid">
- <button class="btn btn-primary build-button" disabled>Build</button>
- </div>
- </form>
- </li>
- </ul>
- </div>
+ <div class="btn-group pull-right">
+ <a class="btn" id="new-project-button" href="{% url 'newproject' %}">New project</a>
+ </div>
{% endif %}
+ </div>
+ </div>
</div>
- </div>
-</div>
-<div class="container-fluid top-padded">
-<div class="row-fluid">
-{% block pagecontent %}
-{% endblock %}
-</div>
-</div>
-</body>
+ <div class="container-fluid top-padded">
+ <div class="row-fluid">
+ {% block pagecontent %}
+ {% endblock %}
+ </div>
+ </div>
+ </body>
</html>
-
diff --git a/lib/toaster/toastergui/templates/projecttopbar.html b/lib/toaster/toastergui/templates/projecttopbar.html
index 3afd445..c1cd6a8 100644
--- a/lib/toaster/toastergui/templates/projecttopbar.html
+++ b/lib/toaster/toastergui/templates/projecttopbar.html
@@ -1,3 +1,21 @@
+{% load static %}
+<script src="{% static 'js/projecttopbar.js' %}"></script>
+<script>
+ $(document).ready(function () {
+ var ctx = {
+ numProjectLayers : {{project.get_project_layer_versions.count}},
+ machine : "{{project.get_current_machine_name|default_if_none:""}}",
+ }
+
+ try {
+ projectTopBarInit(ctx);
+ } catch (e) {
+ document.write("Sorry, An error has occurred loading this page");
+ console.warn(e);
+ }
+ });
+</script>
+
<div class="alert alert-success lead" id="project-created-notification" style="margin-top:15px; display:none">
<button type="button" class="close" data-dismiss="alert">×</button>
Your project <strong>{{project.name}}</strong> has been created. You can now <a href="{% url 'projectmachines' project.id %}">select your target machine</a> and <a href="{% url 'projectimagerecipes' project.id %}">choose image recipes</a> to build.
--
1.9.3
---------------------------------------------------------------------
Intel Corporation (UK) Limited
Registered No. 1134945 (England)
Registered Office: Pipers Way, Swindon SN3 1RJ
VAT No: 860 2173 47
This e-mail and any attachments may contain confidential material for
the sole use of the intended recipient(s). Any review or distribution
by others is strictly prohibited. If you are not the intended
recipient, please contact the sender and delete all copies.
More information about the bitbake-devel
mailing list