Skip to content

CIRCLE / cloud

Go to a project
Commit 37c7213d by Estók Dániel
Options

Improved dashboard-integration and refactor.

parent 6aa74424
Showing with 337 additions and 273 deletions
circle/setty/models.py
...@@ -53,7 +53,7 @@ class Element(Model): ...@@ -53,7 +53,7 @@ class Element(Model):
anchors = models.PositiveSmallIntegerField() anchors = models.PositiveSmallIntegerField()
def __unicode__(self): def __unicode__(self):
return self.service.name + ", id: " + self.display_id return "%s (%s)" % (self.service.name, self.display_id)
class ElementConnection(Model): class ElementConnection(Model):
...@@ -70,4 +70,4 @@ class ElementConnection(Model): ...@@ -70,4 +70,4 @@ class ElementConnection(Model):
parameters = models.TextField() parameters = models.TextField()
def __unicode__(self): def __unicode__(self):
return self.target.service.name + ", " + str(self.id) return "%s (%d)" % (self.target.service.name, self.id)
circle/setty/static/setty/setty.js
(function($){ function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
function csrfSafeMethod(method) {
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
var csrftoken = getCookie('csrftoken');
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
(function($){
$.event.special.doubletap = { $.event.special.doubletap = {
bindType: 'touchend', bindType: 'touchend',
delegateType: 'touchend', delegateType: 'touchend',
...@@ -18,7 +47,6 @@ ...@@ -18,7 +47,6 @@
event[property] = event.originalEvent.changedTouches[0][property]; event[property] = event.originalEvent.changedTouches[0][property];
}); });
// let jQuery handle the triggering of "doubletap" event handlers
handleObj.handler.apply(this, arguments); handleObj.handler.apply(this, arguments);
} else { } else {
targetData.lastTouch = now; targetData.lastTouch = now;
...@@ -72,28 +100,27 @@ jsPlumb.ready(function() { ...@@ -72,28 +100,27 @@ jsPlumb.ready(function() {
var stackIndexer = 0; var stackIndexer = 0;
var stackSize = 0; var stackSize = 0;
var objectStack = []; var objectStack = [];
var undoStack = []; var undoStack = [];
var redoStack = []; var redoStack = [];
$("#dropContainer").attr('unselectable', 'on') $("#dropContainer").attr('unselectable', 'on').css({
.css({
'user-select': 'none', 'user-select': 'none',
'MozUserSelect': 'none' 'MozUserSelect': 'none'})
})
.on('selectstart', false) .on('selectstart', false)
.on('mousedown', false); .on('mousedown', false);
setServiceStatus = function(status) { setServiceStatus = function(status) {
if (status == "unsaved") { if (status == "unsaved") {
$("#serviceStatus").text("Unsaved"); $("#serviceStatus").text("Unsaved");
} }
if (status == "saved") { else {
$("#serviceStatus").empty(); $("#serviceStatus").empty();
} }
}; };
addInfo = function(title, info, type, object) { addInfo = function(title, info, type, object) {
$("#informationContainer").empty(); $("#informationContainer").empty();
...@@ -167,67 +194,14 @@ jsPlumb.ready(function() { ...@@ -167,67 +194,14 @@ jsPlumb.ready(function() {
$("#informationContainer").append(div); $("#informationContainer").append(div);
$("#infoInput").val(info).keyup(function() { $("#infoInput").val(info);
setServiceStatus("unsaved");
newParams = $("#infoInput").val();
if (type == "connection") object.parameters = newParams;
if (type == "element") object.attr("parameters", newParams);
});
$("#addEndpoint").click(function() {
addEndpoint(object);
undoStack.splice(stackIndexer, 0, removeEndoint);
redoStack.splice(stackIndexer, 0, addEndpoint);
objectStack.splice(stackIndexer, 0, object);
stackIndexer++;
stackSize++;
});
$("#removeEndpoint").click(function() {
removeEndoint(object);
undoStack.splice(stackIndexer, 0, addEndpoint);
redoStack.splice(stackIndexer, 0, removeEndoint);
objectStack.splice(stackIndexer, 0, object);
stackIndexer++;
stackSize++;
});
$("#removeFromWorkspace").click(function() {
$('.element').removeClass('elementSelected');
removeElement(object);
$("#informationPanel").hide();
$("#dragPanel").show();
undoStack.splice(stackIndexer, 0, addElement);
redoStack.splice(stackIndexer, 0, removeElement);
objectStack.splice(stackIndexer, 0, object);
stackSize++;
stackIndexer++;
});
$("#removeConnection").click(function() {
jsPlumbInstance.detach(object);
$("#informationPanel").hide();
$("#dragPanel").show();
});
$("#addElementToWorkspace").click(function() {
addElement(object.attr("id"), (++elementIndex) + "_" + object.attr("id"), (elementIndex % 21) * 30, 4, "", (elementIndex % 21) * 30);
undoStack.splice(stackIndexer, 0, removeElement);
redoStack.splice(stackIndexer, 0, addElement);
objectStack.splice(stackIndexer, 0, newInstance);
stackSize++;
stackIndexer++;
});
$("#dragPanel").hide(); $("#dragPanel").hide();
$("#informationPanel").show(); $("#informationPanel").show();
}; };
updateConnections = function(connection, remove) { updateConnections = function(connection, remove) {
if (!remove) { if (!remove) {
elementConnections.push(connection); elementConnections.push(connection);
...@@ -277,6 +251,7 @@ jsPlumb.ready(function() { ...@@ -277,6 +251,7 @@ jsPlumb.ready(function() {
return true; return true;
}; };
checkSourceTargetEquality = function(connection) { checkSourceTargetEquality = function(connection) {
if (connection.targetId == connection.sourceId) { if (connection.targetId == connection.sourceId) {
addMessage("Connecting element to itself is forbidden.", "danger"); addMessage("Connecting element to itself is forbidden.", "danger");
...@@ -285,6 +260,7 @@ jsPlumb.ready(function() { ...@@ -285,6 +260,7 @@ jsPlumb.ready(function() {
return true; return true;
}; };
getAnchorCoordinate = function(rate) { getAnchorCoordinate = function(rate) {
x = Math.cos(2.0 * Math.PI * rate) / 2; x = Math.cos(2.0 * Math.PI * rate) / 2;
y = Math.sin(2.0 * Math.PI * rate) / 2; y = Math.sin(2.0 * Math.PI * rate) / 2;
...@@ -317,6 +293,7 @@ jsPlumb.ready(function() { ...@@ -317,6 +293,7 @@ jsPlumb.ready(function() {
return [y + 0.5, -x + 0.5, dy, -dx]; return [y + 0.5, -x + 0.5, dy, -dx];
}; };
isConnected = function(anchorId) { isConnected = function(anchorId) {
returnValue = false; returnValue = false;
$.each(elementConnections, function(index) { $.each(elementConnections, function(index) {
...@@ -329,6 +306,7 @@ jsPlumb.ready(function() { ...@@ -329,6 +306,7 @@ jsPlumb.ready(function() {
return returnValue; return returnValue;
}; };
getConnectionparamAndAnchor = function(anchorId) { getConnectionparamAndAnchor = function(anchorId) {
parameters = ""; parameters = "";
otherAnchor = ""; otherAnchor = "";
...@@ -350,6 +328,7 @@ jsPlumb.ready(function() { ...@@ -350,6 +328,7 @@ jsPlumb.ready(function() {
return [otherAnchor, parameters]; return [otherAnchor, parameters];
}; };
addEndpoint = function(element) { addEndpoint = function(element) {
anchors = element.attr("anchors"); anchors = element.attr("anchors");
...@@ -357,37 +336,35 @@ jsPlumb.ready(function() { ...@@ -357,37 +336,35 @@ jsPlumb.ready(function() {
anchors++; anchors++;
jsPlumbInstance.addEndpoint(document.getElementById( jsPlumbInstance.addEndpoint(document.getElementById(element.attr("id")), {
element.attr("id")), {
anchor: getAnchorCoordinate((anchors - 1) / anchors),
uuid: (anchors - 1) + "_" + element.attr("id") uuid: (anchors - 1) + "_" + element.attr("id")
}, },
jsPlumbEndpoint); jsPlumbEndpoint);
for (i = 0; i < anchors; i++) jsPlumbInstance.getEndpoint(i + "_" + element.attr("id")).setAnchor(getAnchorCoordinate(i / (anchors))); for (i = 0; i < anchors; i++) {
jsPlumbInstance.getEndpoint(i + "_" + element.attr("id")).setAnchor(getAnchorCoordinate(i / (anchors)));
}
element.attr("anchors", anchors); element.attr("anchors", anchors);
jsPlumbInstance.repaintEverything(); jsPlumbInstance.repaintEverything();
}; };
removeEndoint = function(element) { removeEndoint = function(element) {
anchors = element.attr("anchors"); anchors = element.attr("anchors");
if (anchors == 4) return; if (anchors == 4) return;
i = anchors - 1; i = --anchors;
anchors--;
while (isConnected(i + "_" + element.attr("id")) && while (isConnected(i + "_" + element.attr("id")) && i >= 0) i--;
i >= 0) i--;
if (i == -1) { if (i == -1) {
addMessage("Removing anchors is obstructed.", "danger"); addMessage("Removing anchors is obstructed.", "danger");
return; return;
} else if (i == anchors) { } else if (i == anchors) {
jsPlumbInstance.deleteEndpoint( jsPlumbInstance.deleteEndpoint(jsPlumbInstance.getEndpoint(anchors + "_" + element.attr("id")));
jsPlumbInstance.getEndpoint(anchors + "_" + element.attr("id")));
} else { } else {
newId = i + "_" + element.attr("id"); newId = i + "_" + element.attr("id");
oldId = anchors + "_" + element.attr("id"); oldId = anchors + "_" + element.attr("id");
...@@ -408,6 +385,7 @@ jsPlumb.ready(function() { ...@@ -408,6 +385,7 @@ jsPlumb.ready(function() {
jsPlumbInstance.repaintEverything(); jsPlumbInstance.repaintEverything();
}; };
connectEndpoints = function(data) { connectEndpoints = function(data) {
connectionObject = connectionObject =
jsPlumbInstance.connect({ jsPlumbInstance.connect({
...@@ -419,6 +397,7 @@ jsPlumb.ready(function() { ...@@ -419,6 +397,7 @@ jsPlumb.ready(function() {
setServiceStatus("unsaved"); setServiceStatus("unsaved");
}; };
disconnectEndpoints = function(data) { disconnectEndpoints = function(data) {
for (var i = 0; i < elementConnections.length; i++) { for (var i = 0; i < elementConnections.length; i++) {
if (elementConnections[i].endpoints[0].getUuid() == data[0] && if (elementConnections[i].endpoints[0].getUuid() == data[0] &&
...@@ -430,6 +409,7 @@ jsPlumb.ready(function() { ...@@ -430,6 +409,7 @@ jsPlumb.ready(function() {
return; return;
}; };
addElement = function(idOrInstance, newId, newPositionY, endpoints, parameters, newPositionX) { addElement = function(idOrInstance, newId, newPositionY, endpoints, parameters, newPositionX) {
newInstance = ""; newInstance = "";
...@@ -460,47 +440,51 @@ jsPlumb.ready(function() { ...@@ -460,47 +440,51 @@ jsPlumb.ready(function() {
containment: $("#dropContainer") containment: $("#dropContainer")
}); });
newInstance.on('dblclick doubletap', function() {
element = $(this);
$('.element').removeClass('elementSelected');
jsPlumbInstance.select().setPaintStyle({strokeStyle:'#9932cc', lineWidth: 8});
element.addClass("elementSelected");
addInfo(element.attr("alt"), element.attr("parameters"), "element", element);
}).mousedown(function(e) {
if (e.button == 2) {
setServiceStatus("unsaved");
$("#informationPanel").hide();
$("#dragPanel").show();
$('.element').removeClass('elementSelected');
jsPlumbInstance.select().setPaintStyle({strokeStyle:'#9932cc', lineWidth: 8});
removeElement($(this));
undoStack.splice(stackIndexer, 0, addElement);
redoStack.splice(stackIndexer, 0, removeElement);
objectStack.splice(stackIndexer, 0, $(this));
stackSize++;
stackIndexer++;
return false;
}
return true;
});
setServiceStatus("unsaved"); setServiceStatus("unsaved");
jsPlumbInstance.repaintEverything(); jsPlumbInstance.repaintEverything();
}; };
removeElement = function(object) { removeElement = function(object) {
jsPlumbInstance.detachAllConnections(object); jsPlumbInstance.detachAllConnections(object);
jsPlumbInstance.remove(object.attr("id")); jsPlumbInstance.remove(object.attr("id"));
}; };
scrollContainer = function(direction) {
dragContainerScroll += direction;
if (dragContainerScroll == $(".elementTemplate").length - 2) dragContainerScroll--;
if (dragContainerScroll == -1) dragContainerScroll++;
$("#dragContainer").scrollTop(
dragContainerScroll * $("#elementTemplatePanel").height()
);
};
mouseScrollContainer = function(event) {
var e = window.event || event;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
$('body').addClass("noScroll");
scrollContainer(-delta);
$('body').removeClass("noScroll");
};
jsPlumbInstance.bind("connection", function(info) { jsPlumbInstance.bind("connection", function(info) {
updateConnections(info.connection); updateConnections(info.connection);
info.connection.parameters = ""; info.connection.parameters = "";
// For right click on a connection.
$("path").on('doubletap', function() {
//Todo
});
if (clickEvent === 0) { if (clickEvent === 0) {
undoStack.splice(stackIndexer, 0, disconnectEndpoints); undoStack.splice(stackIndexer, 0, disconnectEndpoints);
redoStack.splice(stackIndexer, 0, connectEndpoints); redoStack.splice(stackIndexer, 0, connectEndpoints);
...@@ -513,11 +497,15 @@ jsPlumb.ready(function() { ...@@ -513,11 +497,15 @@ jsPlumb.ready(function() {
stackSize++; stackSize++;
} }
}); });
jsPlumbInstance.bind("beforeDrop", function(info) { jsPlumbInstance.bind("beforeDrop", function(info) {
return checkDuplicateConnection(info.connection) && return checkDuplicateConnection(info.connection) &&
checkSourceTargetEquality(info.connection) && checkSourceTargetEquality(info.connection) &&
checkCompatibility(info.connection.sourceId, info.connection.targetId); checkCompatibility(info.connection.sourceId, info.connection.targetId);
}); });
jsPlumbInstance.bind("connectionDetached", function(info) { jsPlumbInstance.bind("connectionDetached", function(info) {
updateConnections(info.connection, true); updateConnections(info.connection, true);
...@@ -533,14 +521,20 @@ jsPlumb.ready(function() { ...@@ -533,14 +521,20 @@ jsPlumb.ready(function() {
stackSize++; stackSize++;
} }
}); });
jsPlumbInstance.bind("connectionMoved", function(info) { jsPlumbInstance.bind("connectionMoved", function(info) {
updateConnections(info.connection, true); updateConnections(info.connection, true);
}); });
jsPlumbInstance.bind("contextmenu", function(info) { jsPlumbInstance.bind("contextmenu", function(info) {
jsPlumbInstance.detach(info); jsPlumbInstance.detach(info);
$("#informationPanel").hide(); $("#informationPanel").hide();
$("#dragPanel").show(); $("#dragPanel").show();
}); });
jsPlumbInstance.bind("dblclick", function(info) { jsPlumbInstance.bind("dblclick", function(info) {
$('.element').removeClass('elementSelected'); $('.element').removeClass('elementSelected');
jsPlumbInstance.select().setPaintStyle({strokeStyle:'#9932cc', lineWidth: 8}); jsPlumbInstance.select().setPaintStyle({strokeStyle:'#9932cc', lineWidth: 8});
...@@ -550,11 +544,14 @@ jsPlumb.ready(function() { ...@@ -550,11 +544,14 @@ jsPlumb.ready(function() {
"connection", "connection",
info); info);
}); });
jsPlumbInstance.draggable(jsPlumb.getSelector(".element"), { jsPlumbInstance.draggable(jsPlumb.getSelector(".element"), {
containment: $("#dropContainer") containment: $("#dropContainer")
}); });
$(".elementTemplate").click(function() {
$('body').on('click', '.elementTemplate', function() {
addElement($(this).attr("id"), (++elementIndex) + "_" + $(this).attr("id"), (elementIndex % 21) * 30, 4, "", (elementIndex % 21) * 30); addElement($(this).attr("id"), (++elementIndex) + "_" + $(this).attr("id"), (elementIndex % 21) * 30, 4, "", (elementIndex % 21) * 30);
undoStack.splice(stackIndexer, 0, removeElement); undoStack.splice(stackIndexer, 0, removeElement);
...@@ -564,25 +561,115 @@ jsPlumb.ready(function() { ...@@ -564,25 +561,115 @@ jsPlumb.ready(function() {
stackIndexer++; stackIndexer++;
}); });
$("#closeInfoPanel").click(function(){
$('body').on('dblclick doubletap', '.element', function() {
element = $(this);
$('.element').removeClass('elementSelected');
jsPlumbInstance.select().setPaintStyle({strokeStyle:'#9932cc', lineWidth: 8});
element.addClass("elementSelected");
addInfo(element.attr("alt"), element.attr("parameters"), "element", element);
$(document).scrollTop(0);
});
$('body').on('contextmenu', '.element', function(event) {
setServiceStatus("unsaved");
$("#informationPanel").hide();
$("#dragPanel").show();
$('.element').removeClass('elementSelected');
jsPlumbInstance.select().setPaintStyle({strokeStyle:'#9932cc', lineWidth: 8});
removeElement($(this));
undoStack.splice(stackIndexer, 0, addElement);
redoStack.splice(stackIndexer, 0, removeElement);
objectStack.splice(stackIndexer, 0, $(this));
stackSize++;
stackIndexer++;
});
$('body').on('click', '#closeInfoPanel', function() {
$('#informationPanel').hide(); $('#informationPanel').hide();
$('#dragPanel').show(); $('#dragPanel').show();
$('.element').removeClass('elementSelected'); $('.element').removeClass('elementSelected');
jsPlumbInstance.select().setPaintStyle({strokeStyle:'#9932cc', lineWidth: 8}); jsPlumbInstance.select().setPaintStyle({strokeStyle:'#9932cc', lineWidth: 8});
}); });
$("#clearService").click(function() {
jsPlumbInstance.detachEveryConnection(); $('body').on('keyUp', '#infoInput', function() {
jsPlumbInstance.deleteEveryEndpoint();
$(".element").remove();
setServiceStatus("unsaved"); setServiceStatus("unsaved");
newParams = $("#infoInput").val();
if (type == "connection") object.parameters = newParams;
if (type == "element") object.attr("parameters", newParams);
});
$('body').on('click', '#addEndpoint', function() {
addEndpoint(object);
undoStack.splice(stackIndexer, 0, removeEndoint);
redoStack.splice(stackIndexer, 0, addEndpoint);
objectStack.splice(stackIndexer, 0, object);
stackIndexer++;
stackSize++;
});
$('body').on('click', '#removeEndpoint', function() {
removeEndoint(object);
undoStack.splice(stackIndexer, 0, addEndpoint);
redoStack.splice(stackIndexer, 0, removeEndoint);
objectStack.splice(stackIndexer, 0, object);
stackIndexer++;
stackSize++;
});
$('body').on('click', '#removeFromWorkspace', function() {
$('.element').removeClass('elementSelected');
removeElement(object);
$("#informationPanel").hide();
$("#dragPanel").show();
undoStack.splice(stackIndexer, 0, addElement);
redoStack.splice(stackIndexer, 0, removeElement);
objectStack.splice(stackIndexer, 0, object);
stackSize++;
stackIndexer++;
});
$('body').on('click', '#removeConnection', function() {
jsPlumbInstance.detach(object);
$("#informationPanel").hide();
$("#dragPanel").show();
});
$('body').on('click', '#addElementToWorkspace', function() {
addElement(object.attr("id"), (++elementIndex) + "_" + object.attr("id"), (elementIndex % 21) * 30, 4, "", (elementIndex % 21) * 30);
undoStack.splice(stackIndexer, 0, removeElement);
redoStack.splice(stackIndexer, 0, addElement);
objectStack.splice(stackIndexer, 0, newInstance);
stackSize++;
stackIndexer++;
});
jsPlumbInstance.repaintEverything();
$('body').on('click', '#clearService', function() {
jsPlumbInstance.reset();
$(".element").remove();
setServiceStatus("unsaved");
elementIndex = 0; elementIndex = 0;
}); });
$("#undoMovement").click(function() {
$('body').on('click', '#undoMovement', function() {
if (stackIndexer <= 0) return; if (stackIndexer <= 0) return;
stackIndexer--; stackIndexer--;
clickEvent = 1; clickEvent = 1;
...@@ -591,7 +678,8 @@ jsPlumb.ready(function() { ...@@ -591,7 +678,8 @@ jsPlumb.ready(function() {
clickEvent = 0; clickEvent = 0;
}); });
$("#redoMovement").click(function() {
$('body').on('click', '#redoMovement', function() {
if (stackIndexer >= stackSize) return; if (stackIndexer >= stackSize) return;
clickEvent = 1; clickEvent = 1;
object = objectStack[stackIndexer]; object = objectStack[stackIndexer];
...@@ -599,19 +687,32 @@ jsPlumb.ready(function() { ...@@ -599,19 +687,32 @@ jsPlumb.ready(function() {
clickEvent = 0; clickEvent = 0;
}); });
$(".elementTemplateInfo").click(function() {
id = $(this).attr("element");
$('body').on('click', '.elementTemplateInfo', function() {
id = $(this).attr("element");
addInfo($("#" + id).attr("alt"), $("#" + id).attr("desc"), "elementTemplate", $("#" + id)); addInfo($("#" + id).attr("alt"), $("#" + id).attr("desc"), "elementTemplate", $("#" + id));
}); });
$("#serviceName").keydown(function() { $('body').on('click', '#serviceName', function() {
$(this).replaceWith('<input type="text" id="serviceName" class="form-control form-control-sm" style="margin-top: -4px !important; margin-bottom: -4px !important;" value="' + $(this).html() + '" />');
document.getElementById("serviceName").select();
setServiceStatus("unsaved"); setServiceStatus("unsaved");
}); });
$("#saveService").click(function() {
serviceName = $("#serviceName").text(); $('body').on('click', '#dragContainerScrollUp', function() {
scrollContainer(-1);
});
$('body').on('click', '#dragContainerScrollDown', function() {
scrollContainer(1);
});
$('body').on('click', '#saveService', function() {
serviceName = $("#serviceName").val() === ''?$("#serviceName").text():$("#serviceName").val();
connectionSet = []; connectionSet = [];
instanceSet = []; instanceSet = [];
...@@ -621,8 +722,7 @@ jsPlumb.ready(function() { ...@@ -621,8 +722,7 @@ jsPlumb.ready(function() {
"sourceEndpoint": elementConnections[index].endpoints[0].getUuid(), "sourceEndpoint": elementConnections[index].endpoints[0].getUuid(),
"targetId": elementConnections[index].targetId, "targetId": elementConnections[index].targetId,
"targetEndpoint": elementConnections[index].endpoints[1].getUuid(), "targetEndpoint": elementConnections[index].endpoints[1].getUuid(),
"parameters": elementConnections[index].parameters "parameters": elementConnections[index].parameters});
});
}); });
$.each($(".element"), function() { $.each($(".element"), function() {
...@@ -631,8 +731,7 @@ jsPlumb.ready(function() { ...@@ -631,8 +731,7 @@ jsPlumb.ready(function() {
"posX": Math.floor($(this).position().left), "posX": Math.floor($(this).position().left),
"posY": Math.floor($(this).position().top), "posY": Math.floor($(this).position().top),
"anchors": $(this).attr("anchors"), "anchors": $(this).attr("anchors"),
"parameters": $(this).attr("parameters") "parameters": $(this).attr("parameters")});
});
}); });
$.post("", { $.post("", {
...@@ -640,17 +739,10 @@ jsPlumb.ready(function() { ...@@ -640,17 +739,10 @@ jsPlumb.ready(function() {
data: JSON.stringify({ data: JSON.stringify({
"serviceName": serviceName, "serviceName": serviceName,
"elementConnections": connectionSet, "elementConnections": connectionSet,
"elements": instanceSet "elements": instanceSet})
}) }, function(result) {
}, function(resultValue) { addMessage(result.serviceName + " saved successfully.","success");
if (window.location.href.indexOf(
"/create") >= 0) {
window.location = "../" +
resultValue;
} else {
addMessage("Saved successfully.","success");
setServiceStatus("saved"); setServiceStatus("saved");
}
}); });
}); });
...@@ -665,37 +757,6 @@ jsPlumb.ready(function() { ...@@ -665,37 +757,6 @@ jsPlumb.ready(function() {
}); });
scrollContainer = function(direction) {
dragContainerScroll += direction;
if (dragContainerScroll == $(".elementTemplate").length - 2) dragContainerScroll--;
if (dragContainerScroll == -1) dragContainerScroll++;
$("#dragContainer").scrollTop(
dragContainerScroll * $("#elementTemplatePanel").height()
);
};
mouseScrollContainer = function(ev) {
var e = window.event || ev;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
$('body').addClass("noScroll");
scrollContainer(-delta);
$('body').removeClass("noScroll");
};
$("#dragContainerScrollUp").click(function() {
scrollContainer(-1);
});
$("#dragContainerScrollDown").click(function() {
scrollContainer(1);
});
var dragContainer = document.getElementById("dragContainer"); var dragContainer = document.getElementById("dragContainer");
if (dragContainer.addEventListener) { if (dragContainer.addEventListener) {
...@@ -716,10 +777,9 @@ jsPlumb.ready(function() { ...@@ -716,10 +777,9 @@ jsPlumb.ready(function() {
$(document).ready(function() { $(document).ready(function() {
$.post("", { $.post("", {
event: "loadService" event: "loadService"
}, function(resultValue) { }, function(result) {
if (resultValue === "") return; if (result === "") return;
result = jQuery.parseJSON(resultValue);
$("#serviceName").text(result.serviceName); $("#serviceName").text(result.serviceName);
$.each(result.elements, function(i, element) { $.each(result.elements, function(i, element) {
......
circle/setty/templates/setty/index.html
...@@ -7,6 +7,8 @@ ...@@ -7,6 +7,8 @@
{% block content %} {% block content %}
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link type="text/css" rel="stylesheet" href="{% static 'setty/style.css' %}"> <link type="text/css" rel="stylesheet" href="{% static 'setty/style.css' %}">
<div class="row" id="workspace"> <div class="row" id="workspace">
...@@ -14,16 +16,14 @@ ...@@ -14,16 +16,14 @@
<div class="panel panel-default initHidden" id="informationPanel"> <div class="panel panel-default initHidden" id="informationPanel">
<div class="panel-heading text-center"> <div class="panel-heading text-center">
<div class="row"> <div class="row">
<div class="col-xs-2 text-left"> <div class="col-xs-10 text-left">
<h3 class="no-margin"><i class="fa fa-info"></i>&nbsp;{% trans 'Information' %}</h3>
</div>
<div class="col-xs-2">
<button class="btn btn-danger btn-xs" id="closeInfoPanel"> <button class="btn btn-danger btn-xs" id="closeInfoPanel">
<i class="fa fa-times"></i> <i class="fa fa-times"></i>
</button> </button>
</div> </div>
<div class="col-xs-8">
<h3 class="no-margin">{% trans 'Information' %}</h3>
</div>
<div class="col-xs-2">
</div>
</div> </div>
</div> </div>
<div class="panel-body" id="informationContainer"> <div class="panel-body" id="informationContainer">
...@@ -36,7 +36,9 @@ ...@@ -36,7 +36,9 @@
<div class="panel panel-default text-center" id="dragPanel"> <div class="panel panel-default text-center" id="dragPanel">
<div class="panel-heading"> <div class="panel-heading">
<div class="row"> <div class="row">
<h3 class="no-margin">{% trans 'Elements' %}</h3> <div class="col-xs-12 text-left">
<h3 class="no-margin"><i class="fa fa-outdent"></i> {% trans 'Elements' %}</h3>
</div>
</div> </div>
</div> </div>
<div class="panel-heading text-center"> <div class="panel-heading text-center">
...@@ -90,17 +92,17 @@ ...@@ -90,17 +92,17 @@
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading text-center"> <div class="panel-heading text-center">
<div class="row"> <div class="row">
<div class="col-xs-2"> <div class="col-xs-2 text-left">
<button class="btn btn-info btn-xs" id="undoMovement" title="{% trans 'Undo' %}"><i class="fa fa-undo"></i></button> <button class="btn btn-info btn-xs" id="undoMovement" title="{% trans 'Undo' %}"><i class="fa fa-undo"></i></button>
</div> </div>
<div class="col-xs-2"> <div class="col-xs-2 text-left">
<button class="btn btn-info btn-xs" id="redoMovement" title="{% trans 'Redo' %}"><i class="fa fa-repeat"></i></button> <button class="btn btn-info btn-xs" id="redoMovement" title="{% trans 'Redo' %}"><i class="fa fa-repeat"></i></button>
</div> </div>
<div class="col-xs-4"> <div class="col-xs-4">
<h3 class="no-margin" id="serviceName" contenteditable="true">Service</h3> <h3 class="no-margin" id="serviceName">Service</h3>
</div> </div>
<div class="col-xs-2 text-right"> <div class="col-xs-2 text-right">
<button class="btn btn-info btn-xs" id="clearService" title="{% trans 'Clear workspace' %}"><i class="fa fa-trash-o"></i></button> <button class="btn btn-info btn-xs" id="clearService" title="{% trans 'Clear workspace' %}"><i class="fa fa-eraser"></i></button>
</div> </div>
<div class="col-xs-2 text-right"> <div class="col-xs-2 text-right">
<button class="btn btn-success btn-xs" id="saveService" title="{% trans 'Save workspace' %}"><i class="fa fa-floppy-o"></i></button> <button class="btn btn-success btn-xs" id="saveService" title="{% trans 'Save workspace' %}"><i class="fa fa-floppy-o"></i></button>
...@@ -109,12 +111,51 @@ ...@@ -109,12 +111,51 @@
</div> </div>
<div class="panel-body" id="dropContainer" oncontextmenu="return false;"></div> <div class="panel-body" id="dropContainer" oncontextmenu="return false;"></div>
<div class="panel-footer no-margin text-left"> <div class="panel-footer no-margin text-left">
<div class="row">
<div class="col-xs-2 text-left">
<label class="no-margin" id="serviceStatus"></label> <label class="no-margin" id="serviceStatus"></label>
</div> </div>
<div class="col-xs-2 col-xs-push-8 text-right">
<button class="btn btn-danger btn-xs" id="deteleService" title="{% trans 'Delete service' %}" data-toggle="modal" data-target="#deleteServiceDialog"><i class="fa fa-trash-o"></i></button>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
{% if actualId %}
<!-- Modal -->
<div id="deleteServiceDialog" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title"><i class="fa fa-trash-o"></i> {% trans 'Deleting service' %}</h4>
</div>
<div class="modal-body">
<p>{% trans 'Are you sure you want to delete this service?' %}</p>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-xs-2 col-xs-push-8">
<form method="post" action="{% url 'setty.views.service-delete' actualId %}">
{% csrf_token %}
<input type="submit" class="btn btn-danger btn-sm" value="{% trans 'Delete' %}" />
</form>
</div>
<div class="col-xs-2 col-xs-push-8">
<button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">{% trans 'Close' %}</button>
</div>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endblock %} {% endblock %}
circle/setty/templates/setty/service_confirm_delete.html deleted 100644 → 0
<!DOCTYPE html>
<form method="post">{% csrf_token %}
Are you sure you want to delete "{{ object }}" ?
<input type="submit" value="Submit" />
</form>
\ No newline at end of file
circle/setty/urls.py
...@@ -20,7 +20,7 @@ from . import views ...@@ -20,7 +20,7 @@ from . import views
urlpatterns = [ urlpatterns = [
url(r'^create/$', url(r'^create/$',
views.IndexView.as_view(), views.CreateView.as_view(),
name='setty.views.service-create'), name='setty.views.service-create'),
url(r'^delete/(?P<pk>\d+)$', url(r'^delete/(?P<pk>\d+)$',
views.DeleteView.as_view(), views.DeleteView.as_view(),
...@@ -28,6 +28,12 @@ urlpatterns = [ ...@@ -28,6 +28,12 @@ urlpatterns = [
url(r'^start/(?P<pk>\d+)$', url(r'^start/(?P<pk>\d+)$',
views.StartView.as_view(), views.StartView.as_view(),
name='setty.views.service-start'), name='setty.views.service-start'),
url(r'^stop/(?P<pk>\d+)$',
views.StopView.as_view(),
name='setty.views.service-start'),
url(r'^stop/(?P<pk>\d+)$',
views.StartView.as_view(),
name='setty.views.service-stop'),
url(r'^list/$', url(r'^list/$',
views.ListView.as_view(), views.ListView.as_view(),
name='setty.views.service-list'), name='setty.views.service-list'),
......
circle/setty/views.py
...@@ -15,67 +15,46 @@ ...@@ -15,67 +15,46 @@
# You should have received a copy of the GNU General Public License along # You should have received a copy of the GNU General Public License along
# with CIRCLE. If not, see <http://www.gnu.org/licenses/>. # with CIRCLE. If not, see <http://www.gnu.org/licenses/>.
from django.template import RequestContext from django.core.exceptions import PermissionDenied
from django.http import HttpResponse
from django.views.decorators.csrf import csrf_exempt
from django.views.generic import TemplateView, DeleteView
from django.core.urlresolvers import reverse_lazy from django.core.urlresolvers import reverse_lazy
from django.db.models import Q from django.db.models import Q
from django.http import HttpResponseForbidden, Http404 from django.http import JsonResponse
from django.shortcuts import redirect from braces.views import LoginRequiredMixin
from django.contrib import auth from django.views.generic import TemplateView, DeleteView, CreateView
from .models import ( from .models import Element, ElementTemplate, ElementConnection, Service
Element,
ElementTemplate,
ElementConnection,
Service
)
import json import json
class IndexView(TemplateView): class DetailView(LoginRequiredMixin, TemplateView):
template_name = "setty/index.html" template_name = "setty/index.html"
def get(self, request, *args, **kwargs):
if self.request.user.is_authenticated():
return TemplateView.get(self, request, *args, **kwargs)
else:
return redirect(auth.views.login)
def get_context_data(self, **kwargs): def get_context_data(self, **kwargs):
elementTemplateList = ElementTemplate.objects.all() context = super(DetailView, self).get_context_data(**kwargs)
context = RequestContext( context['elementTemplateList'] = ElementTemplate.objects.all()
self.request,
{'elementTemplateList': elementTemplateList})
return context return context
@csrf_exempt
def post(self, request, *args, **kwargs): def post(self, request, *args, **kwargs):
if not self.request.user.is_authenticated():
return redirect(auth.views.login)
if self.request.POST.get('event') == "saveService": if self.request.POST.get('event') == "saveService":
jsonData = json.loads(self.request.POST.get('data')) data = json.loads(self.request.POST.get('data'))
service_name = data['serviceName']
serviceName = jsonData['serviceName']
if 'pk' in kwargs: if 'pk' in kwargs:
serviceObject = Service.objects.get(id=kwargs['pk']) service = Service.objects.get(id=kwargs['pk'])
serviceObject.name = serviceName service.name = service_name
serviceObject.save() service.save()
Element.objects.filter(service=serviceObject).delete() Element.objects.filter(service=service).delete()
else: else:
serviceObject = Service( service = Service(
name=serviceName, name=service_name,
user=self.request.user user=self.request.user
) )
serviceObject.save() service.save()
for element in jsonData['elements']: for element in data['elements']:
elementObject = Element( elementObject = Element(
service=serviceObject, service=service,
parameters=element['parameters'], parameters=element['parameters'],
display_id=element['displayId'], display_id=element['displayId'],
pos_x=element['posX'], pos_x=element['posX'],
...@@ -84,7 +63,7 @@ class IndexView(TemplateView): ...@@ -84,7 +63,7 @@ class IndexView(TemplateView):
) )
elementObject.save() elementObject.save()
for elementConnection in jsonData['elementConnections']: for elementConnection in data['elementConnections']:
sourceId = elementConnection['sourceId'] sourceId = elementConnection['sourceId']
targetId = elementConnection['targetId'] targetId = elementConnection['targetId']
sourceEndpoint = elementConnection['sourceEndpoint'] sourceEndpoint = elementConnection['sourceEndpoint']
...@@ -93,11 +72,11 @@ class IndexView(TemplateView): ...@@ -93,11 +72,11 @@ class IndexView(TemplateView):
targetObject = Element.objects.get( targetObject = Element.objects.get(
display_id=targetId, display_id=targetId,
service=serviceObject) service=service)
sourceObject = Element.objects.get( sourceObject = Element.objects.get(
display_id=sourceId, display_id=sourceId,
service=serviceObject) service=service)
connectionObject = ElementConnection( connectionObject = ElementConnection(
target=targetObject, target=targetObject,
...@@ -108,46 +87,11 @@ class IndexView(TemplateView): ...@@ -108,46 +87,11 @@ class IndexView(TemplateView):
) )
connectionObject.save() connectionObject.save()
return HttpResponse(serviceObject.pk) return JsonResponse({'serviceName': service.name})
else:
return HttpResponse()
class DeleteView(DeleteView):
model = Service
success_url = reverse_lazy("dashboard.index")
class StartView(TemplateView):
pass
class ListView(TemplateView):
pass
class DetailView(IndexView):
def get(self, request, *args, **kwargs):
try:
serviceObject = Service.objects.get(id=kwargs['pk'])
if serviceObject.user != self.request.user:
return HttpResponseForbidden(
"You don't have permission to open the service.")
except:
raise Http404
else:
return IndexView.get(self, request, *args, **kwargs)
@csrf_exempt
def post(self, request, *args, **kwargs):
if not self.request.user.is_authenticated():
return redirect(auth.views.login)
if self.request.POST.get('event') == "loadService": elif self.request.POST.get('event') == "loadService":
serviceObject = Service.objects.get(id=kwargs['pk']) service = Service.objects.get(id=kwargs['pk'])
elementList = Element.objects.filter(service=serviceObject) elementList = Element.objects.filter(service=service)
elementConnectionList = ElementConnection.objects.filter( elementConnectionList = ElementConnection.objects.filter(
Q(target__in=elementList) | Q(source__in=elementList)) Q(target__in=elementList) | Q(source__in=elementList))
...@@ -160,20 +104,39 @@ class DetailView(IndexView): ...@@ -160,20 +104,39 @@ class DetailView(IndexView):
'displayId': item.display_id, 'displayId': item.display_id,
'posX': item.pos_x, 'posX': item.pos_x,
'posY': item.pos_y, 'posY': item.pos_y,
'anchors': item.anchors 'anchors': item.anchors})
})
for item in elementConnectionList: for item in elementConnectionList:
elementConnections.append({ elementConnections.append({
'targetEndpoint': item.target_endpoint, 'targetEndpoint': item.target_endpoint,
'sourceEndpoint': item.source_endpoint, 'sourceEndpoint': item.source_endpoint,
'parameters': item.parameters 'parameters': item.parameters})
})
return HttpResponse(json.dumps( return JsonResponse(
{"elements": elements, {'elements': elements,
"elementConnections": elementConnections, 'elementConnections': elementConnections,
"serviceName": serviceObject.name})) 'serviceName': service.name})
else: else:
return IndexView.post(self, request, *args, **kwargs) raise PermissionDenied
class DeleteView(LoginRequiredMixin, DeleteView):
model = Service
success_url = reverse_lazy("dashboard.index")
class CreateView(LoginRequiredMixin, CreateView):
pass
class StartView(LoginRequiredMixin, TemplateView):
pass
class StopView(LoginRequiredMixin, TemplateView):
pass
class ListView(LoginRequiredMixin, TemplateView):
pass
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment