bitbake: toaster: Refactor and expand layer add remove mechanism

We have multiple pages which have buttons to add and remove layers this
patch adds functionality to libtoaster to abstract this and implements
it in the pages affected. We handle loading and showing the dependencies
dialog here too and generating the notification messages.
Also implemented is using the selectmachine api from the projectapp to
avoid having to handle this in each page that allows selecting machines.
A small number of jshint issues, help text and the machine page name
have also been fixed.

(Bitbake rev: ae7a656ba7fc6f4356b57aa309a9b6d035e51d2e)

Signed-off-by: Michael Wood <michael.g.wood@intel.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>

1 files changed, 63 insertions, 0 deletions

diff --git a/bitbake/lib/toaster/toastergui/static/js/layerBtn.js b/bitbake/lib/toaster/toastergui/static/js/layerBtn.js
new file mode 100644
index 0000000000..6a1d4b1606
--- /dev/null
+++ b/bitbake/lib/toaster/toastergui/static/js/layerBtn.js
@@ -0,0 +1,63 @@
+"use strict";
+
+function layerBtnsInit(ctx) {
+
+    $(".layerbtn").click(function (){
+    var layerObj = $(this).data("layer");
+    var add = ($(this).data('directive') === "add");
+    var thisBtn = $(this);
+
+    libtoaster.addRmLayer(layerObj, add, function (layerDepsList){
+      var alertMsg = $("#alert-msg");
+      alertMsg.html(libtoaster.makeLayerAddRmAlertMsg(layerObj, layerDepsList, add));
+
+      /* In-cell notification */
+      var notification = $('<div id="temp-inline-notify" style="display: none; font-size: 11px; line-height: 1.3;" class="tooltip-inner"></div>');
+      thisBtn.parent().append(notification);
+
+      if (add){
+        if (layerDepsList.length > 0)
+          notification.text(String(layerDepsList.length + 1) + " layers added");
+        else
+          notification.text("1 layer added");
+
+        var layerBtnsFadeOut = $();
+        var layerExistsBtnFadeIn = $();
+
+        layerBtnsFadeOut = layerBtnsFadeOut.add(".layer-add-" + layerObj.id);
+        layerExistsBtnFadeIn = layerExistsBtnFadeIn.add(".layer-exists-" + layerObj.id);
+
+        for (var i in layerDepsList){
+          layerBtnsFadeOut = layerBtnsFadeOut.add(".layer-add-" + layerDepsList[i].id);
+          layerExistsBtnFadeIn = layerExistsBtnFadeIn.add(".layer-exists-" + layerDepsList[i].id);
+        }
+
+        layerBtnsFadeOut.fadeOut().promise().done(function(){
+          notification.fadeIn().delay(500).fadeOut(function(){
+            /* Fade in the buttons */
+            layerExistsBtnFadeIn.fadeIn();
+            notification.remove();
+          });
+        });
+      } else {
+        notification.text("1 layer deleted");
+        /* Deleting a layer we only hanlde the one button */
+        thisBtn.fadeOut(function(){
+          notification.fadeIn().delay(500).fadeOut(function(){
+            $(".layer-add-" + layerObj.id).fadeIn();
+            notification.remove();
+          });
+        });
+      }
+
+      $("#zone1alerts, #zone1alerts *").fadeIn();
+    });
+  });
+
+  /* Setup the initial state of the buttons */
+
+  for (var i in ctx.projectLayers){
+      $(".layer-exists-" + ctx.projectLayers[i]).show();
+      $(".layer-add-" + ctx.projectLayers[i]).hide();
+  }
+}