9 files changed, 271 insertions, 182 deletions

diff --git a/bitbake/lib/toaster/toastergui/static/css/default.css b/bitbake/lib/toaster/toastergui/static/css/default.css
index 7ee1251529..bc3d63e6b9 100644
--- a/bitbake/lib/toaster/toastergui/static/css/default.css
+++ b/bitbake/lib/toaster/toastergui/static/css/default.css
@@ -158,7 +158,7 @@ select { width: auto; }
 .project-name .label > a { color: #fff; font-weight: normal; }
 
 /* Remove bottom margin for forms inside modal dialogs */
-#dependencies_modal_form { margin-bottom: 0px; }
+#dependencies-modal-form { margin-bottom: 0px; }
 
 /* Configuration styles */
 .icon-trash { color: #B94A48; font-size: 16px; padding-left: 5px; }
diff --git a/bitbake/lib/toaster/toastergui/static/html/layer_deps_modal.html b/bitbake/lib/toaster/toastergui/static/html/layer_deps_modal.html
new file mode 100644
index 0000000000..e1dba4358d
--- /dev/null
+++ b/bitbake/lib/toaster/toastergui/static/html/layer_deps_modal.html
@@ -0,0 +1,17 @@
+<div id="dependencies-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="false">
+  <form id="dependencies-modal-form">
+    <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
+      <h3><span id="title"></span> dependencies</h3>
+    </div>
+    <div class="modal-body">
+      <p id="body-text"> <strong id="layer-name"></strong> depends on some layers that are not added to your project. Select the ones you want to add:</p>
+      <ul class="unstyled" id="dependencies-list">
+      </ul>
+    </div>
+    <div class="modal-footer">
+      <button class="btn btn-primary" type="submit">Add layers</button>
+      <button class="btn" type="reset" data-dismiss="modal">Cancel</button>
+    </div>
+  </form>
+</div>
diff --git a/bitbake/lib/toaster/toastergui/static/js/importlayer.js b/bitbake/lib/toaster/toastergui/static/js/importlayer.js
index ec1cc19e90..875cc342b8 100644
--- a/bitbake/lib/toaster/toastergui/static/js/importlayer.js
+++ b/bitbake/lib/toaster/toastergui/static/js/importlayer.js
@@ -117,10 +117,10 @@ function importLayerPageInit (ctx) {
       var body = "<strong>"+layer.name+"</strong>'s dependencies ("+
         depNames.join(", ")+"</span>) require some layers that are not added to your project. Select the ones you want to add:</p>";
 
-      show_layer_deps_modal(ctx.projectId, layer, depDepsArray, title, body, false, function(selected){
-        /* Add the accepted dependencies to the allDeps array */
-        if (selected.length > 0){
-          allDeps = allDeps.concat (selected);
+      showLayerDepsModal(layer, depDepsArray, title, body, false, function(layerObsList){
+        /* Add the accepted layer dependencies' ids to the allDeps array */
+        for (var key in layerObsList){
+          allDeps.push(layerObsList[key].id);
         }
         import_and_add ();
       });
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();
+  }
+}
diff --git a/bitbake/lib/toaster/toastergui/static/js/layerDepsModal.js b/bitbake/lib/toaster/toastergui/static/js/layerDepsModal.js
new file mode 100644
index 0000000000..825f9dccd5
--- /dev/null
+++ b/bitbake/lib/toaster/toastergui/static/js/layerDepsModal.js
@@ -0,0 +1,90 @@
+/*
+ * layer: Object representing the parent layer { id: .. name: ... url }
+ * dependencies: array of dependency layer objects { id: .. name: ..}
+ * title: optional override for title
+ * body: optional override for body
+ * addToProject: Whether to add layers to project on accept
+ * successAdd: function to run on success
+ */
+function showLayerDepsModal(layer, dependencies, title, body, addToProject, successAdd) {
+
+  if ($("#dependencies-modal").length === 0) {
+    $.get(libtoaster.ctx.htmlUrl + "/layer_deps_modal.html", function(html){
+      $("body").append(html);
+      setupModal();
+    });
+  } else {
+    setupModal();
+  }
+
+  function setupModal(){
+
+    if (title) {
+      $('#dependencies-modal #title').text(title);
+    } else {
+      $('#dependencies-modal #title').text(layer.name);
+    }
+
+    if (body) {
+      $("#dependencies-modal #body-text").html(body);
+    } else {
+      $("#dependencies-modal #layer-name").text(layer.name);
+    }
+
+    var deplistHtml = "";
+    for (var i = 0; i < dependencies.length; i++) {
+      deplistHtml += "<li><label class=\"checkbox\"><input name=\"dependencies\" value=\"";
+      deplistHtml += dependencies[i].id;
+      deplistHtml +="\" type=\"checkbox\" checked=\"checked\"/>";
+      deplistHtml += dependencies[i].name;
+      deplistHtml += "</label></li>";
+    }
+    $('#dependencies-list').html(deplistHtml);
+
+    $("#dependencies-modal").data("deps", dependencies);
+
+    $('#dependencies-modal').modal('show');
+
+    /* Discard the old submission function */
+    $("#dependencies-modal-form").unbind('submit');
+
+    $("#dependencies-modal-form").submit(function (e) {
+      e.preventDefault();
+      var selectedLayerIds = [];
+      var selectedLayers = [];
+
+      $("input[name='dependencies']:checked").each(function () {
+        selectedLayerIds.push(parseInt($(this).val()));
+      });
+
+      /* -1 is a special dummy Id which we use when the layer isn't yet in the
+       * system, normally we would add the current layer to the selection.
+       */
+      if (layer.id != -1)
+        selectedLayerIds.push(layer.id);
+
+      /* Find the selected layer objects from our original list */
+      for (var i = 0; i < selectedLayerIds.length; i++) {
+        for (var j = 0; j < dependencies.length; j++) {
+          if (dependencies[j].id == selectedLayerIds[i]) {
+            selectedLayers.push(dependencies[j]);
+          }
+        }
+      }
+
+      if (addToProject) {
+        libtoaster.editCurrentProject({ 'layerAdd': selectedLayerIds.join(",") }, function () {
+          if (successAdd) {
+            successAdd(selectedLayers);
+          }
+        }, function () {
+          console.warn("Adding layers to project failed");
+        });
+      } else {
+        successAdd(selectedLayers);
+      }
+
+      $('#dependencies-modal').modal('hide');
+    });
+  }
+}
diff --git a/bitbake/lib/toaster/toastergui/static/js/layerdetails.js b/bitbake/lib/toaster/toastergui/static/js/layerdetails.js
index 3b6423f7f4..3c4d632563 100644
--- a/bitbake/lib/toaster/toastergui/static/js/layerdetails.js
+++ b/bitbake/lib/toaster/toastergui/static/js/layerdetails.js
@@ -41,7 +41,7 @@ function layerDetailsPageInit (ctx) {
     });
   }
 
-  function layerRemoveClick() {
+  function layerDepRemoveClick() {
     var toRemove = $(this).parent().data('layer-id');
     var layerDepItem = $(this);
 
@@ -71,7 +71,7 @@ function layerDetailsPageInit (ctx) {
 
       /* Connect up the tash icon */
       var trashItem = newLayerDep.children("span");
-      trashItem.click(layerRemoveClick);
+      trashItem.click(layerDepRemoveClick);
 
       layerDepsList.append(newLayerDep);
       /* Clear the current selection */
@@ -129,13 +129,6 @@ function layerDetailsPageInit (ctx) {
     window.location.replace(libtoaster.ctx.projectPageUrl);
   });
 
-  $(".select-machine-btn").click(function(){
-    var data =  { machineName : $(this).data('machine-name') };
-    libtoaster.editCurrentProject(data, function (){
-        window.location.replace(libtoaster.ctx.projectPageUrl+"#/machineselected");
-    }, null);
-  });
-
   function defaultAddBtnText(){
       var text = " Add the "+ctx.layerVersion.name+" layer to your project";
       addRmLayerBtn.text(text);
@@ -196,9 +189,6 @@ function layerDetailsPageInit (ctx) {
    */
   function setLayerInCurrentPrj(added, depsList) {
     ctx.layerVersion.inCurrentPrj = added;
-    var alertMsg = $("#alert-msg");
-    /* Reset alert message */
-    alertMsg.text("");
 
     if (added){
       /* enable and switch all the button states */
@@ -209,25 +199,6 @@ function layerDetailsPageInit (ctx) {
       addRmLayerBtn.text(" Delete the "+ctx.layerVersion.name+" layer from your project");
       addRmLayerBtn.prepend("<span class=\"icon-trash\"></span>");
 
-      if (depsList) {
-        alertMsg.append("You have added <strong>"+(depsList.length+1)+"</strong> layers to <a id=\"project-affected-name\"></a>: <span id=\"layer-affected-name\"></span> and its dependencies ");
-
-        /* Build the layer deps list */
-        depsList.map(function(layer, i){
-          var link = $("<a></a>");
-
-          link.attr("href", layer.layerdetailurl);
-          link.text(layer.name);
-          link.tooltip({title: layer.tooltip});
-
-          if (i != 0)
-            alertMsg.append(", ");
-
-          alertMsg.append(link);
-        });
-      } else {
-        alertMsg.append("You have added <strong>1</strong> layer to <a id=\"project-affected-name\"></a>: <span id=\"layer-affected-name\"></span>");
-      }
     } else {
       /* disable and switch all the button states */
       $(".build-target-btn").attr("disabled","disabled");
@@ -250,53 +221,24 @@ function layerDetailsPageInit (ctx) {
           defaultAddBtnText();
           break;
       }
-
-      alertMsg.append("You have deleted <strong>1</strong> layer from <a id=\"project-affected-name\"></a>: <strong id=\"layer-affected-name\"></strong>");
     }
-
-    alertMsg.children("#layer-affected-name").text(ctx.layerVersion.name);
-    alertMsg.children("#project-affected-name").text(libtoaster.ctx.projectName);
-    alertMsg.children("#project-affected-name").attr("href", libtoaster.ctx.projectPageUrl);
-    $("#alert-area").show();
   }
 
   $("#dismiss-alert").click(function(){ $(this).parent().hide() });
 
   /* Add or remove this layer from the project */
   addRmLayerBtn.click(function() {
-    var directive = $(this).data('directive');
-
-    if (directive == 'add') {
-      /* If adding get the deps for this layer */
-      libtoaster.getLayerDepsForProject(libtoaster.ctx.projectId, ctx.layerVersion.id, function (data) {
-        /* got result for dependencies */
-        if (data.list.length == 0){
-          var editData = { layerAdd : ctx.layerVersion.id };
-          libtoaster.editCurrentProject(editData, function() {
-              setLayerInCurrentPrj(true);
-          });
-          return;
-        } else {
-          /* The add deps will include this layer so no need to add it
-           * separately.
-           */
-          show_layer_deps_modal(ctx.projectId, ctx.layerVersion, data.list, null, null, true, function () {
-            /* Success add deps and layer */
-            setLayerInCurrentPrj(true, data.list);
-          });
-        }
-      }, null);
-    } else if (directive == 'remove') {
-      var editData = { layerDel : ctx.layerVersion.id };
-
-      libtoaster.editCurrentProject(editData, function () {
-          /* Success removed layer */
-           //window.location.reload();
-           setLayerInCurrentPrj(false);
-        }, function () {
-          console.warn ("Removing layer from project failed");
-      });
-    }
+
+    var add = ($(this).data('directive') === "add")
+
+    libtoaster.addRmLayer(ctx.layerVersion, add, function (layersList){
+      var alertMsg = $("#alert-msg");
+      alertMsg.html(libtoaster.makeLayerAddRmAlertMsg(ctx.layerVersion, layersList, add));
+
+      setLayerInCurrentPrj(add, layersList);
+
+      $("#alert-area").show();
+    });
   });
 
   /* Handler for all of the Change buttons */
@@ -395,8 +337,12 @@ function layerDetailsPageInit (ctx) {
     $(this).parents("form").submit();
   });
 
+  $(".select-machine-btn").click(function(e){
+    if ($(this).attr("disabled") === "disabled")
+      e.preventDefault();
+  });
 
-  layerDepsList.find(".icon-trash").click(layerRemoveClick);
+  layerDepsList.find(".icon-trash").click(layerDepRemoveClick);
   layerDepsList.find("a").tooltip();
   $(".icon-trash").tooltip();
   $(".commit").tooltip();
diff --git a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
index 9257f735db..1cf1693dde 100644
--- a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
+++ b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
@@ -114,7 +114,7 @@ var libtoaster = (function (){
         error: function (_data) {
           console.warn("Call failed");
           console.warn(_data);
-          if (onfail) onfail(data);
+          if (onfail) onfail(_data);
         }
     });
   }
@@ -219,6 +219,76 @@ var libtoaster = (function (){
     return str;
   }
 
+  function _addRmLayer(layerObj, add, doneCb){
+    if (add === true) {
+      /* If adding get the deps for this layer */
+      libtoaster.getLayerDepsForProject(libtoaster.ctx.projectId,
+        layerObj.id,
+        function (layers) {
+
+        /* got result for dependencies */
+        if (layers.list.length === 0){
+          var editData = { layerAdd : layerObj.id };
+          libtoaster.editCurrentProject(editData, function() {
+            doneCb([]);
+          });
+          return;
+        } else {
+          try {
+            showLayerDepsModal(layerObj, layers.list, null, null,  true, doneCb);
+          }  catch (e) {
+            $.getScript(libtoaster.ctx.jsUrl + "layerDepsModal.js", function(){
+              showLayerDepsModal(layerObj, layers.list, null, null,  true, doneCb);
+            }, function(){
+              console.warn("Failed to load layerDepsModal");
+            });
+          }
+        }
+      }, null);
+    } else if (add === false) {
+      var editData = { layerDel : layerObj.id };
+
+      libtoaster.editCurrentProject(editData, function () {
+        doneCb([]);
+      }, function () {
+        console.warn ("Removing layer from project failed");
+        doneCb(null);
+      });
+    }
+  }
+
+  function _makeLayerAddRmAlertMsg(layer, layerDepsList, add) {
+    var alertMsg;
+
+    if (layerDepsList.length > 0 && add === true) {
+      alertMsg = $("<span>You have added <strong>"+(layerDepsList.length+1)+"</strong> layers to <a id=\"project-affected-name\"></a>: <span id=\"layer-affected-name\"></span> and its dependencies </span>");
+
+      /* Build the layer deps list */
+      layerDepsList.map(function(layer, i){
+        var link = $("<a></a>");
+
+        link.attr("href", layer.layerdetailurl);
+        link.text(layer.name);
+        link.tooltip({title: layer.tooltip});
+
+        if (i !== 0)
+          alertMsg.append(", ");
+
+        alertMsg.append(link);
+      });
+    } else if (layerDepsList.length === 0 && add === true) {
+      alertMsg = $("<span>You have added <strong>1</strong> layer to <a id=\"project-affected-name\"></a>: <span id=\"layer-affected-name\"></span></span>");
+    } else if (add === false) {
+      alertMsg = $("<span>You have deleted <strong>1</strong> layer from <a id=\"project-affected-name\"></a>: <strong id=\"layer-affected-name\"></strong></span>");
+    }
+
+    alertMsg.children("#layer-affected-name").text(layer.name);
+    alertMsg.children("#project-affected-name").text(libtoaster.ctx.projectName);
+    alertMsg.children("#project-affected-name").attr("href", libtoaster.ctx.projectPageUrl);
+
+    return alertMsg.html();
+  }
+
 
   return {
     reload_params : reload_params,
@@ -231,6 +301,8 @@ var libtoaster = (function (){
     debug: false,
     parseUrlParams : _parseUrlParams,
     dumpsUrlParams : _dumpsUrlParams,
+    addRmLayer : _addRmLayer,
+    makeLayerAddRmAlertMsg : _makeLayerAddRmAlertMsg,
   };
 })();
 
@@ -394,6 +466,11 @@ $(document).ready(function() {
         $('#collapse-exceptions').toggleClass('in');
     });
 
+
+    $("#hide-alert").click(function(){
+      $(this).parent().fadeOut();
+    });
+
     //show warnings section when requested from the previous page
     if (location.href.search('#warnings') > -1) {
         $('#collapse-warnings').addClass('in');
diff --git a/bitbake/lib/toaster/toastergui/static/js/machines.js b/bitbake/lib/toaster/toastergui/static/js/machines.js
deleted file mode 100644
index fbcafc26b5..0000000000
--- a/bitbake/lib/toaster/toastergui/static/js/machines.js
+++ /dev/null
@@ -1,95 +0,0 @@
-"use strict"
-
-function machinesPageInit (ctx) {
-
-
-  function setLayerInCurrentPrj(addLayerBtn, depsList){
-    var alertMsg = $("#alert-msg");
-
-    $(".select-or-add").each(function(){
-      /* If we have added a layer it may also enable other machines so search
-       * for other machines that have that layer and enable them */
-      var selectMachineBtn = $(this).children(".select-machine-btn");
-      var otherAddLayerBtns = $(this).children(".add-layer");
-
-      if (addLayerBtn.data('layer-version-id') ==  selectMachineBtn.data('layer-version-id')) {
-        otherAddLayerBtns.fadeOut(function(){
-          selectMachineBtn.fadeIn();
-        });
-      }
-    });
-
-    /* Reset alert message */
-    alertMsg.text("");
-
-    /* If we have added layer dependencies */
-    if (depsList) {
-      alertMsg.append("You have added <strong>"+(depsList.length+1)+"</strong> layers to <a id=\"project-affected-name\"></a>: <span id=\"layer-affected-name\"></span> and its dependencies ");
-
-        /* Build the layer deps list */
-        depsList.map(function(layer, i){
-          var link = $("<a></a>");
-
-          link.attr("href", layer.layerdetailurl);
-          link.text(layer.name);
-          link.tooltip({title: layer.tooltip});
-
-          if (i != 0)
-            alertMsg.append(", ");
-
-          alertMsg.append(link);
-        });
-    } else {
-      alertMsg.append("You have added <strong>1</strong> layer to <a id=\"project-affected-name\"></a>: <strong id=\"layer-affected-name\"></strong>");
-    }
-
-    var layerName = addLayerBtn.data('layer-name');
-    alertMsg.children("#layer-affected-name").text(layerName);
-    alertMsg.children("#project-affected-name").text(libtoaster.ctx.projectName).attr('href', libtoaster.ctx.projectPageUrl);
-
-    $("#alert-area").show();
-  }
-
-  $("#dismiss-alert").click(function(){ $(this).parent().hide() });
-
-  /* Add or remove this layer from the project */
-  $(".add-layer").click(function() {
-      var btn = $(this);
-      /* If adding get the deps for this layer */
-      var layer = {
-        id : $(this).data('layer-version-id'),
-        name : $(this).data('layer-name'),
-      };
-
-      libtoaster.getLayerDepsForProject(libtoaster.ctx.projectId, layer.id, function (data) {
-        /* got result for dependencies */
-        if (data.list.length == 0){
-          var editData = { layerAdd : layer.id };
-          libtoaster.editCurrentProject(editData, function() {
-              setLayerInCurrentPrj(btn);
-          });
-          return;
-        } else {
-          /* The add deps will include this layer so no need to add it
-           * separately.
-           */
-          show_layer_deps_modal(ctx.projectId, layer, data.list, null, null, true, function () {
-            /* Success add deps and layer */
-            setLayerInCurrentPrj(btn, data.list);
-          });
-        }
-      }, null);
-  });
-
-  $(".select-machine-btn").click(function(){
-    var data =  { machineName : $(this).data('machine-name') };
-    libtoaster.editCurrentProject(data, function (){
-        window.location.replace(libtoaster.ctx.projectPageUrl+"#/machineselected");
-    }, null);
-  });
-
-  $("#show-all-btn").click(function(){
-    $("#search").val("")
-    $("#searchform").submit();
-  });
-}
diff --git a/bitbake/lib/toaster/toastergui/static/js/projectapp.js b/bitbake/lib/toaster/toastergui/static/js/projectapp.js
index 1fd4a54f57..43436c5e69 100644
--- a/bitbake/lib/toaster/toastergui/static/js/projectapp.js
+++ b/bitbake/lib/toaster/toastergui/static/js/projectapp.js
@@ -713,15 +713,6 @@ projectApp.controller('prjCtrl', function($scope, $modal, $http, $interval, $loc
                     "\">select recipes</a> you want to build.", "alert-success");
         });
 
-        _cmdExecuteWithParam("/machineselected", function () {
-            $scope.displayAlert($scope.zone2alerts, "You have changed the machine to: <strong>" + $scope.machine.name + "</strong>", "alert-info");
-            var machineDistro = angular.element("#machine-distro");
-
-            angular.element("html, body").animate({ scrollTop: machineDistro.position().top }, 700).promise().done(function() {
-              $animate.addClass(machineDistro, "machines-highlight");
-            });
-        });
-
         _cmdExecuteWithParam("/layerimported", function () {
           var imported = $cookieStore.get("layer-imported-alert");
           var text;