.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; }
--- /dev/null
+<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>
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 ();
});
--- /dev/null
+"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();
+ }
+}
--- /dev/null
+/*
+ * 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');
+ });
+ }
+}
});
}
- function layerRemoveClick() {
+ function layerDepRemoveClick() {
var toRemove = $(this).parent().data('layer-id');
var layerDepItem = $(this);
/* Connect up the tash icon */
var trashItem = newLayerDep.children("span");
- trashItem.click(layerRemoveClick);
+ trashItem.click(layerDepRemoveClick);
layerDepsList.append(newLayerDep);
/* Clear the current selection */
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);
*/
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 */
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");
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 */
$(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();
error: function (_data) {
console.warn("Call failed");
console.warn(_data);
- if (onfail) onfail(data);
+ if (onfail) onfail(_data);
}
});
}
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,
debug: false,
parseUrlParams : _parseUrlParams,
dumpsUrlParams : _dumpsUrlParams,
+ addRmLayer : _addRmLayer,
+ makeLayerAddRmAlertMsg : _makeLayerAddRmAlertMsg,
};
})();
$('#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');
+++ /dev/null
-"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();
- });
-}
"\">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;
libtoaster.ctx = {
projectId : {{project.id|default:'undefined'}},
xhrDataTypeaheadUrl : "{% url 'xhr_datatypeahead' %}",
+ jsUrl : "{% static 'js/' %}",
+ htmlUrl : "{% static 'html/' %}",
{% if project.id %}
xhrProjectEditUrl : "{% url 'xhr_projectedit' project.id %}",
projectPageUrl : "{% url 'project' project.id %}",
{% block projectinfomain %}
+ <script src="{% static 'js/layerDepsModal.js' %}"></script>
<script src="{% static 'js/importlayer.js' %}"></script>
<script>
$(document).ready(function (){
<h1>Import layer</h1>
</div>
- {% include "layers_dep_modal.html" %}
<form>
{% if project %}
<span class="help-block" style="padding-left:19px;">The layer you are importing must be compatible with <strong>{{project.release.description}}</strong>, which is the release you are using in this project.</span>
</style>
{% endif %}
-{% include "layers_dep_modal.html" %}
<div class="row-fluid span11">
<div class="page-header">
<h1>{{layerversion.layer.name}} <small class="commit"
{% endif %}
</td>
<td>{{machine.description}}</td>
- <td><button class="btn btn-block select-machine-btn" data-machine-name="{{machine.name}}" {% if layer_in_project == 0 %}disabled="disabled"{% endif %}}>Select machine</button></td>
+ <td>
+ <a href="{% url 'project' project.id %}#/machineselect={{machine.name}}" class="btn btn-block select-machine-btn" {% if layer_in_project == 0 %}disabled="disabled"{% endif %}>Select machine</a>
</tr>
{% endfor %}
</tbody>
{% 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 %}
</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">×</button>
+ <span id="alert-msg"></span>
+ </div>
</div>
{% if objects.paginator.count == 0 %}
</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>
{% 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\">×</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 %}
+++ /dev/null
-<!-- '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 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>
-
-<script>
- /*
- * 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 show_layer_deps_modal(projectId, layer, dependencies, title, body, addToProject, successAdd) {
-
- // update layer name
- 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);
-
- var selected = [];
- /* -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)
- selected.push(layer.id);
-
- var layer_link_list = "<a href='"+layer.url+"'>"+layer.name+"</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 (addToProject) {
- var editProjectUrl = "{% url 'xhr_projectedit' project.id %}";
- libtoaster.editProject(editProjectUrl, projectId, { 'layerAdd': selected.join(",") }, function () {
- if (successAdd) {
- successAdd(selected);
- }
- }, function () {
- console.log ("Adding layers to project failed");
- });
- } else {
- successAdd(selected);
- }
- });
-
- $('#dependencies_modal').modal('show');
-}
-</script>
{% endblock %}
{% block projectinfomain %}
-<script src="{% static 'js/machines.js' %}"></script>
+
+<script src="{% static 'js/layerBtn.js' %}"></script>
<script>
$(document).ready(function (){
var ctx = {
+ projectLayers : {{projectlayerset}},
};
try {
- machinesPageInit(ctx);
+ layerBtnsInit(ctx);
} catch (e) {
document.write("Sorry, An error has occurred loading this page");
console.warn(e);
}
});
</script>
-{% include "layers_dep_modal.html" %}
<div class="page-header">
<h1>
{% if request.GET.search or request.GET.filter %}
{% endif %}
{% else %}
- All machines
+ All compatible machines
<i class="icon-question-sign get-help heading-help" title="This page lists all the machines compatible with the current project that Toaster knows about. They include community-created targets suitable for use on top of OpenEmbedded Core and any targets you have imported"></i>
{% endif %}
</h1>
</div>
-<div class="alert alert-info lead" id="alert-area" style="display:none">
- <button type="button" class="close" id="dismiss-alert">×</button>
- <span id="alert-msg"></span>
+
+<div id="zone1alerts" style="display:none">
+ <div class="alert alert-info lead">
+ <button type="button" class="close" id="hide-alert">×</button>
+ <span id="alert-msg"></span>
+ </div>
</div>
{% if objects.paginator.count == 0 %}
{% if request.GET.search %}
<td class="layer"><a href="{%url "layerdetails" o.layer_version.id %}">{{o.layer_version.layer.name}}</a></td>
<td class="branch">{{o.layer_version.get_vcs_reference}}</td>
<td class="machinefile"><code>/machine/conf/{{o.name}}.conf</code><a href="{{o.get_vcs_machine_file_link_url}}" target="_blank"><i class="icon-share get-info"></i></a></td>
- <td class="select-or-add">
- <a href="#" class="btn btn-block select-machine-btn" data-machine-name="{{o.name}}" data-layer-version-id="{{o.layer_version.id}}"
- {%if o.layer_version.id not in project_layers %}style="display:none" {%endif%} >Select machine</a>
- <a href="#" class="btn btn-block nopop add-layer" data-layer-version-id="{{o.layer_version.id}}" data-layer-name="{{o.layer_version.layer.name}}" {%if o.layer_version.id in project_layers %}style="display:none" {%endif%}
- >
+ <td class="select-or-add" style="height: 32px;">
+ <a href="{% url 'project' project.id %}#/machineselect={{o.name}}" class="btn btn-block layer-exists-{{o.layer_version.id}}" style="margin-top: 5px; display:none">Select machine</a>
+ <button class="btn btn-block layerbtn layer-add-{{o.layer_version.id}}" data-layer='{ "id": {{o.layer_version.id}}, "name": "{{o.layer_version.layer.name}}", "url": "{%url 'layerdetails' o.layer_version.id %}"}' data-directive="add">
<i class="icon-plus"></i>
Add layer
- <i class="icon-question-sign get-help" title="To build this machine, you must first add the {{o.layer_version.layer.name}} layer to your project"></i>
- </a>
+ <i title="" class="icon-question-sign get-help" data-original-title="To enable this machine, you must first add the {{o.layer_version.layer.name}} layer to your project"></i></i>
+ </button>
</td>
</tr>
{% endfor %}
-
{% include "basetable_bottom.html" %}
{% endif %}
{% extends "baseprojectpage.html" %}
{% load projecttags %}
{% load humanize %}
+{% load static %}
{% block localbreadcrumb %}
<li>All compatible recipes</li>
{% endblock %}
{% block projectinfomain %}
- <div class="page-header">
- <h1>
+
+<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 %}
{{objects.paginator.count}} recipe{{objects.paginator.count|pluralize}} found
{% elif request.GET.filter and objects.paginator.count == 0 or request.GET.search and objects.paginator.count == 0 %}
{%else%}
All compatible recipes
{%endif%}
- <i class="icon-question-sign get-help heading-help" title="This page lists all the recipes compatible with the release selected for this project, which is {{project.release.description}}"></i>
- </h1>
- </div>
-
- <div id="zone1alerts">
-
+ <i class="icon-question-sign get-help heading-help" title="This page lists all the recipes compatible with the release selected for this project, which is {{project.release.description}}"></i>
+ </h1>
+</div>
+
+<div id="zone1alerts" style="display:none">
+ <div class="alert alert-info lead">
+ <button type="button" class="close" id="hide-alert">×</button>
+ <span id="alert-msg"></span>
</div>
-
+</div>
{% if objects.paginator.count == 0 %}
{% if request.GET.filter or request.GET.search %}
<div class="row-fluid">
</a>
{% endif %}
</td>
- <td class="add-layer" value="{{o.pk}}" layerversion_id="{{o.preffered_layerversion.pk}}">
- <div id="layer-tooltip-{{o.pk}}" style="display: none; font-size: 11px; line-height: 1.3;" class="tooltip-inner">layer was modified</div>
- <a href="{% url 'project' project.id %}#/targetbuild={{o.name}}" id="target-build-{{o.pk}}" class="btn btn-block remove-layer" style="display:none;" >
- Build recipe
- </a>
- <a id="layer-add-{{o.pk}}" class="btn btn-block" style="display:none;" href="javascript:layerAdd({{o.preffered_layerversion.pk}}, '{{o.preffered_layerversion.layer.name}}', '{%url 'layerdetails' o.preffered_layerversion.pk%}', {{o.pk}})" >
- <i class="icon-plus"></i>
- Add layer
- <i title="" class="icon-question-sign get-help" data-original-title="To build this target, you must first add the {{o.preffered_layerversion.layer.name}} layer to your project"></i>
- </a>
- </td>
+ <td class="add-layer" value="{{o.pk}}">
+ <a href="{% url 'project' project.id %}#/targetbuild={{o.name}}" class="btn btn-block layer-exists-{{o.preffered_layerversion.pk}}" style="display:none; margin-top: 5px;" >
+ Build recipe
+ </a>
+ <button class="btn btn-block layerbtn layer-add-{{o.preffered_layerversion.pk}}" data-layer='{ "id": {{o.preffered_layerversion.pk}}, "name": "{{o.preffered_layerversion.layer.name}}", "url": "{%url 'layerdetails' o.preffered_layerversion.pk%}"}' data-directive="add">
+ <i class="icon-plus"></i>
+ Add layer
+ <i title="" class="icon-question-sign get-help" data-original-title="To build this target, you must first add the {{o.preffered_layerversion.layer.name}} layer to your project"></i></i>
+ </button>
+ </td>
</tr>
{% endfor %}
{% include "basetable_bottom.html" %}
{% 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 show_alert(text, cls) {
- $("#zone1alerts").html("<div class=\"alert alert-info lead\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\">×</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 = undefined;
-
- $("#dependencies_modal_form").submit(function (e) {
- e.preventDefault();
- $("input[name='dependencies']:checked").map(function () { selected.push(parseInt($(this).val()))});
- layer_link_list = "<a href='"+layerURL+"'>"+layerName+"</a>";
- 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 onXHRSuccess() {
- show_alert("You have added <strong>"+selected.length+"</strong> layer(s) to <a href=\"{% url 'project' project.id%}\">{{project.name}}</a>: " + layer_link_list);
- });
- {% endif %}
-
- });
- $('#dependencies_modal').modal('show');
-}
-
-function updateLayerCountLabels (amount) {
- /* Update the filter labels */
- var countLabel = $("#layer_version__projectlayer__project\\:{{project.id}}_count");
- countLabel.text(Number(countLabel.text())+amount);
-
- var countLabelRemaining = $("#layer_version__projectlayer__project\\:NOT{{project.id}}_count");
- countLabelRemaining.text(Number(countLabelRemaining.text())-amount);
-}
-
-var pressedButton = undefined;
-
-function layerAdd(layerId, layerName, layerURL, pressedButtonId) {
- pressedButton = pressedButtonId;
- $.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 buttonSet(id, state) {
- var tohide, toshow;
- if (state == "add")
- {
- toshow = "#layer-add-";
- tohide = "#target-build-";
- }
- else if (state == "build")
- {
- tohide = "#layer-add-";
- toshow = "#target-build-";
- }
-
- var previouslyvisible = $(tohide + id).is(":visible");
- if (previouslyvisible && id == pressedButton) {
- $(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-layer").map(function () { displayedLayers.push( { "l": parseInt($(this).attr('layerversion_id')), "i": parseInt($(this).attr('value'))})});
- for (var i=0; i < displayedLayers.length; i++) {
- if (projectLayers.indexOf(displayedLayers[i].l) > -1) {
- buttonSet(displayedLayers[i].i, "build");
- }
- else {
- buttonSet(displayedLayers[i].i, "add");
- }
- }
-}
-
-$(document).ready(function (){
- updateButtons({{projectlayerset}});
-});
-
</script>
{%endif%}
context = {
'objects' : machine_info,
- 'project_layers' : project_layers,
+ 'projectlayerset' : jsonfilter(map(lambda x: x.layercommit.id, prj.projectlayer_set.all())),
'objectname' : "machines",
'default_orderby' : 'name:+',
projects / thirdparty / openembedded / openembedded-core-contrib.git / commitdiff
