1 files changed, 27 insertions, 196 deletions

diff --git a/bitbake/lib/toaster/toastergui/templates/layers.html b/bitbake/lib/toaster/toastergui/templates/layers.html
index 24d31c770e..2367e7c33a 100644
--- a/bitbake/lib/toaster/toastergui/templates/layers.html
+++ b/bitbake/lib/toaster/toastergui/templates/layers.html
@@ -1,12 +1,32 @@
 {% extends "baseprojectpage.html" %}
 {% load projecttags %}
 {% load humanize %}
+{% load static %}
 
 {% block localbreadcrumb %}
 <li>All compatible layers</li>
 {% endblock %}
 
+
 {% block projectinfomain %}
+
+<script src="{% static 'js/layerBtn.js' %}"></script>
+<script>
+
+  $(document).ready(function (){
+    var ctx = {
+      projectLayers : {{projectlayerset}},
+    };
+
+    try {
+      layerBtnsInit(ctx);
+    } catch (e) {
+      document.write("Sorry, An error has occurred loading this page");
+      console.warn(e);
+    }
+  });
+</script>
+
                 <div class="page-header">
                     <h1>
   {% if request.GET.filter and objects.paginator.count >  0 or request.GET.search and objects.paginator.count >  0 %}
@@ -20,7 +40,11 @@
                      </h1>
                 </div>
 
-  <div id="zone1alerts">
+  <div id="zone1alerts" style="display:none">
+    <div class="alert alert-info lead">
+      <button type="button" class="close" id="hide-alert">&times;</button>
+      <span id="alert-msg"></span>
+    </div>
   </div>
 
 {% if objects.paginator.count == 0 %}
@@ -89,12 +113,11 @@
             </td>
             {% if project %}
             <td class="add-del-layers" value="{{o.pk}}">
-                <div id="layer-tooltip-{{o.pk}}" style="display: none; font-size: 11px; line-height: 1.3;" class="tooltip-inner">layer was modified</div>
-                <button id="layer-del-{{o.pk}}" class="btn btn-danger btn-block remove-layer layerbtn" style="display:none;" onclick="layerDel({{o.pk}}, '{{o.layer.name}}', '{%url 'layerdetails' o.pk%}')" >
+                <button class="btn btn-danger btn-block layer-exists-{{o.pk}} layerbtn" style="display:none;" data-layer='{ "id": {{o.pk}}, "name":  "{{o.layer.name}}", "url": "{%url 'layerdetails' o.pk%}"}' data-directive="remove" >
                     <i class="icon-trash"></i>
                     Delete layer
                 </button>
-                <button id="layer-add-{{o.pk}}" class="btn btn-block layerbtn" style="display:none;" onclick="layerAdd({{o.pk}}, '{{o.layer.name}}', '{%url 'layerdetails' o.pk%}')" title="layer added">
+                <button class="btn btn-block layer-add-{{o.pk}} layerbtn" data-layer='{ "id": {{o.pk}}, "name":  "{{o.layer.name}}", "url": "{%url 'layerdetails' o.pk%}"}' data-directive="add">
                     <i class="icon-plus"></i>
                     Add layer
                 </button>
@@ -104,198 +127,6 @@
     {% endfor %}
 {% include "basetable_bottom.html" %}
 
-    <!-- Modals -->
-
-    <!-- 'Layer dependencies modal' -->
-    <div id="dependencies_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
-        <form id="dependencies_modal_form">
-        <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
-            <h3><span class="layer-name"></span> dependencies</h3>
-        </div>
-        <div class="modal-body">
-            <p><strong class="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>
-
-{% if project %}
-<script>
-
-var tooltipUpdateText;
-
-/* ensure csrf cookie exists {% csrf_token %} */
-function _makeXHREditCall(data, onsuccess, onfail) {
-    $.ajax( {
-        type: "POST",
-        url: "{% url 'xhr_projectedit' project.id %}",
-        data: data,
-        headers: { 'X-CSRFToken' : $.cookie('csrftoken')},
-        success: function (_data) {
-            if (_data.error != "ok") {
-                console.warn(_data.error);
-            } else {
-                updateButtons(_data.layers.map(function (e) {return e.id}));
-                if (onsuccess != undefined) onsuccess(_data);
-            }
-        },
-        error: function (_data) {
-            console.warn("Call failed");
-            console.warn(_data);
-        }
-    });
-}
-
-function updateLayerCountLabels (amount) {
-    /* Update the filter labels */
-    var countLabel = $("#projectlayer__project\\:{{project.id}}_count");
-    countLabel.text(Number(countLabel.text())+amount);
-
-    var countLabelRemaining = $("#projectlayer__project\\:NOT{{project.id}}_count");
-    countLabelRemaining.text(Number(countLabelRemaining.text())-amount);
-}
-
-
-function layerDel(layerId, layerName, layerURL) {
-    tooltipUpdateText = "1 layer deleted";
-    _makeXHREditCall({ 'layerDel': layerId }, function () {
-        updateLayerCountLabels(-1);
-
-        show_alert("You have deleted <strong>1</strong> layer from <a href=\"{% url 'project' project.id%}\">{{project.name}}</a>: <a href=\""+layerURL+"\">" + layerName +"</a>");
-    });
-}
-
-function show_alert(text, cls) {
-    $("#zone1alerts").html("<div class=\"alert alert-info lead\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>" + text + "</div>");
-}
-
-function show_dependencies_modal(layerId, layerName, layerURL, dependencies) {
-    // update layer name
-    $('.layer-name').text(layerName);
-    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);
-
-    var selected = [layerId];
-    var layer_link_list = "<a href='"+layerURL+"'>"+layerName+"</a>";
-
-    $("#dependencies_modal_form").submit(function (e) {
-        e.preventDefault();
-        $("input[name='dependencies']:checked").map(function () { selected.push(parseInt($(this).val()))});
-        if (selected.length > 1) {
-            tooltipUpdateText = "" + selected.length + " layers added";
-        } else {
-            tooltipUpdateText = "1 layer added";
-        }
-
-        for (var i = 0; i < selected.length; i++) {
-            for (var j = 0; j < dependencies.length; j++) {
-                if (dependencies[j].id == selected[i]) {
-                    layer_link_list+= ", <a href='"+dependencies[j].layerdetailurl+"'>"+dependencies[j].name+"</a>"
-                    break;
-                }
-            }
-        }
-
-        $('#dependencies_modal').modal('hide');
-
-    {% if project %}
-        _makeXHREditCall({ 'layerAdd': selected.join(",") }, function () {
-            show_alert("You have added <strong>"+selected.length+"</strong> layers to <a href=\"{% url 'project' project.id%}\">{{project.name}}</a>: " + layer_link_list);
-        });
-    {% endif %}
-
-    });
-    $('#dependencies_modal').modal('show');
-}
-
-
-function layerAdd(layerId, layerName, layerURL) {
-    $.ajax({
-        url: '{% url "xhr_datatypeahead" %}',
-        data: {'type': 'layerdeps','value':layerId},
-        success: function(_data) {
-                if (_data.error != "ok") {
-                    console.warn(_data.error);
-                } else {
-                    updateLayerCountLabels(_data.list.length+1);
-
-                    if (_data.list.length > 0) {
-                        show_dependencies_modal(layerId, layerName, layerURL, _data.list);
-                    }
-                    else {
-                        tooltipUpdateText = "1 layer added";
-                        _makeXHREditCall({ 'layerAdd': layerId }, function () {
-        show_alert("You have added <strong>1</strong> layer to <a href=\"{% url 'project' project.id%}\">{{project.name}}</a>: <a href=\""+layerURL+"\">" + layerName +"</a>");
-                        });
-                    }
-                }
-            }
-    })
-}
-
-function button_set(id, state) {
-    var tohide, toshow;
-    if (state == "add")
-    {
-        tohide = "#layer-del-";
-        toshow = "#layer-add-";
-    }
-    else if (state == "del")
-    {
-        tohide = "#layer-add-";
-        toshow = "#layer-del-";
-    }
-
-
-    var previouslyvisible = $(tohide + id).is(":visible");
-    if (previouslyvisible) {
-        $(tohide + id).fadeOut( function() {
-            $("#layer-tooltip-" + id).text(tooltipUpdateText);
-            $("#layer-tooltip-" + id).fadeIn().delay(2000).fadeOut(function(){
-                $(toshow + id).delay(300).fadeIn();
-            });
-        });
-    } else {
-        $(tohide + id).hide();
-        $("#layer-tooltip-" + id).hide();
-        $(toshow + id).show();
-    }
-};
-
-function updateButtons(projectLayers) {
-    var displayedLayers = [];
-    $(".add-del-layers").map(function () { displayedLayers.push(parseInt($(this).attr('value')))});
-    for (var i=0; i < displayedLayers.length; i++) {
-        if (projectLayers.indexOf(displayedLayers[i]) > -1) {
-            button_set(displayedLayers[i], "del");
-        }
-        else {
-            button_set(displayedLayers[i], "add");
-        }
-    }
-}
-
-$(document).ready(function (){
-    $('.layerbtn').tooltip({ trigger: 'manual' });
-    updateButtons({{projectlayerset}});
-});
-
-</script>
-{%endif%}
-
 {%endif%}
 
 {% endblock %}