First commit for branch.

circle/bower.json

@@ -20,6 +20,7 @@
     "bootbox": "~4.3.0",
     "intro.js": "0.9.0",
     "favico.js": "~0.3.5",
-    "datatables": "~1.10.4"
+    "datatables": "~1.10.4",
+    "jsPlumb": "~1.7.5"
   }
 }

circle/circle/settings/base.py

@@ -199,6 +199,7 @@ PIPELINE_JS = {
         "jquery-simple-slider/js/simple-slider.js",
         "favico.js/favico.js",
         "datatables/media/js/jquery.dataTables.js",
+        "jsPlumb/dist/js/dom.jsPlumb-1.7.5-min.js",
         "dashboard/dashboard.js",
         "dashboard/activity.js",
         "dashboard/group-details.js",
@@ -214,6 +215,7 @@ PIPELINE_JS = {
         "dashboard/vm-create.js",
         "dashboard/vm-list.js",
         "dashboard/help.js",
+        "setty/setty.js",
         "js/host.js",
         "js/network.js",
         "js/switch-port.js",
@@ -358,6 +360,7 @@ LOCAL_APPS = (
     'acl',
     'monitor',
     'request',
+	'setty',
 )
 
 # See: https://docs.djangoproject.com/en/dev/ref/settings/#installed-apps

circle/circle/urls.py

@@ -38,6 +38,7 @@ urlpatterns = patterns(
     url(r'^network/', include('network.urls')),
     url(r'^blacklist-add/', add_blacklist_item),
     url(r'^dashboard/', include('dashboard.urls')),
+    url(r'^setty/', include('setty.urls')),
     url(r'^request/', include('request.urls')),
 
     # django/contrib/auth/urls.py (care when new version)

circle/setty/static/setty/setty.js

-(function() {
+jsPlumb.ready(function() {
     /**
-     * Section to store base data.
+     * Global variables.
      */
+    var jsPlumbInstance = jsPlumb.getInstance({
+        DragOptions: {
+            cursor: 'pointer',
+            zIndex: 2000
+        },
+        EndpointHoverStyle: {
+            fillStyle: "green"
+        },
+        HoverPaintStyle: {
+            strokeStyle: "red"
+        },
+        Container: "dropContainer"
+    });
+    var jsPlumbEndpoint = {
+        endpoint: ["Dot", {
+            radius: 10,
+        }],
+        paintStyle: {
+            fillStyle: "#9932cc",
+        },
+        isSource: true,
+        isTarget: true,
+        deleteEndpointsOnDetach: false,
+        zIndex: 20,
+        connectorStyle: {
+            strokeStyle: "#9932cc",
+            lineWidth: 8,
+        },
+        connector: ["Bezier", {
+            curviness: 180,
+        }],
+        maxConnections: 1,
+        dropOptions: {
+            tolerance: "fit",
+        },
+    };
     var elementConnections = [];
     var elementIndex = 0;
     var dragContainerScroll = 0;
-    var clickedConnection;
+    var saveWarning = 0;
+
+
+    /**
+     * Function for updating saved status.
+     */
+    setServiceStatus = function(status){
+        if(status == "unsaved" && $("#unsavedDiv").length < 1){
+            $("#serviceName").parent().append('<h3 id="unsavedDiv"> (unsaved)</h3>');
+        }
+        if(status == "saved"){
+            $("#unsavedDiv").remove();
+        }
+    }
 
 
-    /***
-     * Function for updating connection array in whether an event was fired.
+    /**
+     * Function for displaying information panel content.
      */
-    updateConnections = function(conn, remove) {
+    addInfo = function(title, info, type, element){
+        div = '<div class="row"><div class="col-xs-12 text-center"><h3>'
+               + title
+               + '</h3></div></div>&nbsp;<div class="row"><div class="col-xs-12">'
+               + '<textarea class="form-control" rows="30" id="infoInput"'
+               + 'placeholder="Config data"' + (type=="info"?'readonly':'') + '>'
+               + '</textarea></div></div>';
+
+        if(type=="element")
+            div += '&nbsp;<div class="row text-center"><label>Endpoints</label></div><div class="row">'
+                 + '<div class="col-xs-6 text-center">'
+                 + '<button id="addEndpoint" class="btn btn-success">+</button></div>'
+                 + '<div class="col-xs-6 text-center">'
+                 + '<button id="removeEndpoint" class="btn btn-danger">-</button></div></div>';
+
+        $("#informationContainer").empty().append(div);
+        
+        $("#infoInput").val(info).keyup(function(){
+            setServiceStatus("unsaved");
+            newParams = $("#infoInput").val();
+
+            if(type=="connection") element.parameters = newParams;
+            if(type=="element") element.attr("parameters", newParams);
+        });
+
+        $("#addEndpoint").click(function(){
+            addEndpoint(element);
+        });
+
+        $("#removeEndpoint").click(function(){
+            removeEndoint(element);
+        });
+    }
+
+
+    /**
+     * Function for updating connection array whether an event was fired.
+     */
+    updateConnections = function(connection, remove) {
+        setServiceStatus("unsaved");
         if (!remove)
-            elementConnections.push(conn);
+            elementConnections.push(connection);
         else {
-            var idx = -1;
+            index = -1;
             for (var i = 0; i < elementConnections.length; i++) {
-                if (elementConnections[i] == conn) {
-                    idx = i;
+                if (elementConnections[i] == connection) {
+                    index = i;
                     break;
                 }
             }
-            if (idx != -1)
-                elementConnections.splice(idx, 1);
+            if (index != -1)
+                elementConnections.splice(index, 1);
         }
     };
 
 
-    /***
-     * Function for checking duplicate connections.
+    /**
+     * Function for checking and ignoring duplicate connections.
      */
     checkDuplicateConnection = function(connection) {
         for (var i = 0; i < elementConnections.length; i++) {
@@ -39,332 +127,420 @@
                 return false;
             }
         }
-
         return true;
     };
 
 
-    /***
+    /**
      * Function for checking element compatibility.
      */
     checkCompatibility = function(sourceId, targetId) {
-        var validTargets = $("#" + sourceId).attr("type").split(',');
+        validTargets = $("#" + sourceId).attr("type").split(',');
 
         if (jQuery.inArray(targetId.split('_')[1], validTargets) == -1) {
             addMessage("Elements are incompatible.", "danger");
             return false;
         }
-
         return true;
     };
 
 
-    /***
-     * Function for checking source and target element equality.
+    /**
+     * Function for checking source and target equality.
      */
     checkSourceTargetEquality = function(connection) {
         if (connection.targetId == connection.sourceId) {
             addMessage("Source element is the same as target element.", "danger");
             return false;
         }
-
         return true;
     };
 
 
-    /***
+    /**
      * Function for determining anchor positions for an element.
      */
-    getAnchorCoordinate = function(anchor, anchorNum) {
-        var rate = anchor / anchorNum;
-        var x = Math.cos(2.0 * Math.PI * rate) / 2;
-        var y = Math.sin(2.0 * Math.PI * rate) / 2;
+    getAnchorCoordinate = function(rate) {
+        x = Math.cos(2.0 * Math.PI * rate) / 2;
+        y = Math.sin(2.0 * Math.PI * rate) / 2;
+        dx = 0;
+        dy = 0;
 
         if (rate < 0.125) {
             x = 0.5;
+            dx = 1;
         } else if (rate > 0.125 && rate < 0.375) {
             y = -0.5;
+            dy = -1;
         } else if (rate > 0.375 && rate < 0.625) {
             x = -0.5;
+            dx = -1;
         } else if (rate > 0.625 && rate < 0.875) {
             y = 0.5;
+            dy = 1;
         } else if (rate > 0.875) {
             x = -0.5;
+            dx = -1;
         } else {
             x = Math.sqrt(2) * Math.cos(2 * Math.PI * rate) / 2;
             y = Math.sqrt(2) * Math.sin(2 * Math.PI * rate) / 2;
+
+            dx = Math.round(2 * x);
         }
-        return [y + 0.5, -x + 0.5];
+        return [y + 0.5, -x + 0.5, dy, -dx];
     };
 
+
+    /**
+     * Check whether an anchor is connected.
+     */
+    isConnected = function(anchorId){
+        returnValue = false;
+        $.each(elementConnections, function(index) {
+            if(elementConnections[index].endpoints[0].getUuid()==anchorId ||
+               elementConnections[index].endpoints[1].getUuid()==anchorId){
+                returnValue = true;
+                return;
+            }
+        });
+        return returnValue;
+    }
+    
+    /**
+     * Get connection parameters and other connected anchor concerning an anchor coming from parameters.
+     */
+    getConnectionparamAndAnchor = function(anchorId){
+        parameters = "";
+        otherAnchor = "";
+
+        $.each(elementConnections, function(index) {
+            if(elementConnections[index].endpoints[0].getUuid()==anchorId)
+            {
+                parameters = elementConnections[index];
+                otherAnchor = elementConnections[index].endpoints[1].getUuid();
+                return;
+            }
+
+            if(elementConnections[index].endpoints[1].getUuid()==anchorId)
+            {
+                parameters = elementConnections[index].parameters;
+                otherAnchor = elementConnections[index].endpoints[0].getUuid();
+                return;
+            }
+        });
+        return [parameters, otherAnchor];
+    }
+    
+    
+    /**
+     * Function to add new element to service.
+     */
+    addEndpoint = function(element) {
+        anchors = element.attr("anchors");
+
+        if(anchors==8) return;
+
+        anchors++;
+
+        jsPlumbInstance.addEndpoint(document.getElementById(element.attr("id")), {
+            anchor: getAnchorCoordinate((anchors-1) / anchors),
+            uuid: (anchors-1) + "_" + element.attr("id")
+        },
+        jsPlumbEndpoint);
+
+        for (i = 0; i < anchors; i++) jsPlumbInstance.getEndpoint(i + "_" + element.attr("id")).setAnchor(getAnchorCoordinate(i / (anchors)));
+
+        element.attr("anchors", anchors);
+        
+        jsPlumbInstance.repaintEverything();
+    }
+
+    /**
+     * Function for removing an endpoint of an element.
+     */
+    removeEndoint = function(element){
+        anchors = element.attr("anchors");
+        
+        if(anchors==4) return;
+        
+        i = anchors-1;
+        anchors--;
+        
+        while(isConnected(i + "_" + element.attr("id")) && i>=0){
+            i--;
+        }
+        
+        if(i==-1){
+            addMessage("All the anchors are connected so that removing any is forbidden.", "danger");
+            return;
+        }
+        else if(i==anchors){
+            jsPlumbInstance.deleteEndpoint(jsPlumbInstance.getEndpoint(anchors + "_" + element.attr("id")));
+        }
+        else{
+            newId = i + "_" + element.attr("id");
+            oldId = anchors + "_" + element.attr("id");
+
+            data = getConnectionparamAndAnchor(oldId);
+            
+            jsPlumbInstance.deleteEndpoint(jsPlumbInstance.getEndpoint(oldId));
+
+            connectionObject = jsPlumbInstance.connect({
+                    uuids: [newId, data[1]]
+            });
+            connectionObject.parameters = data[0];
+        }
+        
+        for (i=0;i<anchors;i++) jsPlumbInstance.getEndpoint(i + "_" + element.attr("id")).setAnchor(getAnchorCoordinate(i / (anchors)));
+
+        element.attr("anchors", anchors);
+
+        jsPlumbInstance.repaintEverything();
+    }
+    
 
-    /***
+    /**
      * Function for managing instantiation of new elements based on their templates.
      */
-    addNewElement = function(instance, endpointType, templateId, newId, newPositionY, endpoints, parameters, newPositionX) {
-        var newInstance = $('#' + templateId).clone()
+    addElement = function(templateId, newId, newPositionY, endpoints, parameters, newPositionX) {
+        newInstance = $('#' + templateId)
+            .clone()
             .prop("id", newId)
             .prop("title", "Right click to delete")
-            .removeClass();
-
-        if (newPositionY != "")
-            newInstance.css("top", newPositionY);
-
-        if (newPositionX != "")
-            newInstance.css("left", newPositionX);
+            .removeClass()
+            .addClass("element")
+            .attr("anchors", 0)
+            .attr("parameters", parameters)
+            .css("top", newPositionY)
+            .css("left", newPositionX);
 
-        newInstance.addClass("element");
-        newInstance.attr("anchors", endpoints);
         $("#dropContainer").append(newInstance);
 
-        for (i = 0; i < endpoints; i++) {
-            var coordinates = getAnchorCoordinate(i, endpoints);
-
-            instance.addEndpoint(document.getElementById(newId), {
-                anchor: [coordinates[0], coordinates[1], 0, 0],
-                uuid: i + "_" + newId,
-            }, endpointType);
+        for (i = 0; i <= endpoints; i++) {
+            addEndpoint(newInstance);
         }
 
-        instance.draggable(jsPlumb.getSelector(".element"), {
+        jsPlumbInstance.draggable(jsPlumb.getSelector(".element"), {
             containment: $("#dropContainer")
         });
 
-        $(".element").mousedown(function(e) {
-            if (e.button == 2) {
-                instance.remove($(this).prop("id"));
+        newInstance.mousedown(function(e) {
+            if(e.button == 0){
+                element = $(this);
+                addInfo(element.attr("alt"), element.attr("parameters"), "element", element);
+                return false;
+            }
+            if(e.button == 2){
+                setServiceStatus("unsaved");
+                $("#informationContainer").empty();
+                jsPlumbInstance.remove($(this).prop("id"));
                 return false;
             }
             return true;
         });
+
+        setServiceStatus("unsaved");
+        
+        jsPlumbInstance.repaintEverything();
     };
 
 
     /**
-     * The main loop. This main function controls everything based on JQuery.
+     * Handling events on workspace.
      */
-    jsPlumb.ready(function() {
-        var instance = jsPlumb.getInstance({
-            DragOptions: {
-                cursor: 'pointer',
-                zIndex: 2000,
-            },
-            EndpointHoverStyle: {
-                fillStyle: "green",
-            },
-            HoverPaintStyle: {
-                strokeStyle: "red",
-            },
-            EndpointStyle: {
-                width: 20,
-                height: 20,
-            },
-            Endpoint: "Rectangle",
-            Anchors: ["TopCenter", "TopCenter"],
-            Container: "dropContainer"
-        });
+    jsPlumbInstance.bind("connection", function(info) {
+        updateConnections(info.connection);
+        info.connection.parameters = "";
+    });
+    jsPlumbInstance.bind("beforeDrop", function(info) {
+        return checkDuplicateConnection(info.connection) &&
+            checkSourceTargetEquality(info.connection) &&
+            checkCompatibility(info.connection.sourceId, info.connection.targetId);
+    });
+    jsPlumbInstance.bind("connectionDetached", function(info) {
+        updateConnections(info.connection, true);
+    });
+    jsPlumbInstance.bind("connectionMoved", function(info) {
+        updateConnections(info.connection, true);
+    });
+    jsPlumbInstance.bind("contextmenu", function(info) {
+        jsPlumbInstance.detach(info);
+        $("#informationContainer").empty();
+    });
+    jsPlumbInstance.bind("click", function(info) {
+        addInfo($("#"+info.sourceId.split('_')[1]).attr("alt") + ' - '
+                + $("#"+info.targetId.split('_')[1]).attr("alt"),
+                info.parameters,
+                "connection",
+                info);
+    });
+    jsPlumbInstance.draggable(jsPlumb.getSelector(".element"), {
+        containment: $("#dropContainer")
+    });
 
 
-        /**
-         * Loop for handling events.
-         */
-        instance.doWhileSuspended(function() {
-            instance.bind("connection", function(info) {
-                updateConnections(info.connection);
-                info.connection.parameters = "";
-            });
-            instance.bind("beforeDrop", function(info) {
-                return checkDuplicateConnection(info.connection) &&
-                    checkSourceTargetEquality(info.connection) &&
-                    checkCompatibility(info.connection.sourceId, info.connection.targetId);
-            });
-            instance.bind("connectionDetached", function(info) {
-                updateConnections(info.connection, true);
-            });
-            instance.bind("connectionMoved", function(info) {
-                updateConnections(info.connection, true);
-            });
-            instance.bind("contextmenu", function(info) {
-                instance.detach(info);
-            });
-            instance.bind("click", function(info) {
-                clickedConnection = info;
-                $('#connectionInfoParameters').val(info.parameters);
-                $('#connectionInfoDialog').modal();
-            });
-            instance.draggable(jsPlumb.getSelector(".element"), {
-                containment: $("#dropContainer")
-            });
+    /**
+     * Handling click event on elements.
+     */
+    $(".elementTemplate").click(function() {
+        addElement($(this).prop("id"),
+            (++elementIndex) + "_" + $(this).prop("id"),
+            $(this).position().top,
+            4,
+            "");
+    });
 
 
-            /**
-             * Defining an endpoint type can be added to object on the site.
-             */
-            var endpointType = {
-                endpoint: ["Dot", {
-                    radius: 12
-                }],
-                paintStyle: {
-                    fillStyle: "#9932cc",
-                },
-                isSource: true,
-                isTarget: true,
-                deleteEndpointsOnDetach: false,
-                zIndex: 20,
-                connectorStyle: {
-                    strokeStyle: "#9932cc",
-                    lineWidth: 8,
-                },
-                connector: ["Bezier", {
-                    curviness: 2000,
-                }],
-                maxConnections: 1,
-                dropOptions: {
-                    tolerance: "fit",
-                },
-            };
-
-
-            /**
-             * Handling click event on elements.
-             */
-            $(".elementTemplate").click(function() {
-                addNewElement(instance,
-                              endpointType,
-                              $(this).prop("id"), (elementIndex++) + "_" + $(this).prop("id"),
-                              $(this).position().top,
-                              7);
-            });
+    /**
+     * Handling mouse enter event on elementTemplate for diplaying info.
+     */
+    $(".elementTemplate").mouseenter(function(){
+        addInfo($(this).attr("alt"), $(this).attr("desc"), "info");
+    });
 
 
-            /**
-             * Handling click event on clear button.
-             */
-            $("#clearService").click(function(e) {
-                instance.detachEveryConnection();
-                instance.deleteEveryEndpoint();
-                $(".element").remove();
+    /**
+     * Handling click event on clear button.
+     */
+    $("#clearService").click(function(e) {
+        jsPlumbInstance.detachEveryConnection()
+                       .deleteEveryEndpoint();
+        $(".element").remove();
+        setServiceStatus("unsaved");
+        
+        jsPlumbInstance.repaintEverything();
+        
+        elementIndex = 0;
+    });
 
-                instance.repaintEverything();
-                JsPlumbUtil.consume(e);
+    
+    /**
+     * Handling status change in case of renaming service.
+     */
+    $("#serviceName").keydown(function(){
+        setServiceStatus("unsaved");
+    });
 
-                elementIndex = 0;
+    /**
+     * Handling click event on save button.
+     */
+    $("#saveService").click(function() {
+        serviceName = $("#serviceName").text();
+        connectionSet = [];
+        instanceSet = [];
+
+        $.each(elementConnections, function(index) {
+            connectionSet.push({
+                "sourceId": elementConnections[index].sourceId,
+                "sourceEndpoint": elementConnections[index].endpoints[0].getUuid(),
+                "targetId": elementConnections[index].targetId,
+                "targetEndpoint": elementConnections[index].endpoints[1].getUuid(),
+                "parameters": elementConnections[index].parameters
             });
+        });
 
+        $.each($(".element"), function(index) {
+            instanceSet.push({
+                "displayId": $(this).prop("id"),
+                "posX": Math.floor($(this).position().left),
+                "posY": Math.floor($(this).position().top),
+                "anchors": $(this).attr("anchors"),
+                "parameters": $(this).attr("parameters")
+            });
+        });
 
-            /**
-             * Handling click event on save button.
-             */
-            $("#saveService").click(function() {
-                serviceName = $("#serviceName").text();
-                connectionSet = [];
-                instanceSet = [];
-
-                $.each(elementConnections, function(index) {
-                    connectionSet.push({
-                        "sourceId": elementConnections[index].sourceId,
-                        "sourceEndpoint": elementConnections[index].endpoints[0].getUuid(),
-                        "targetId": elementConnections[index].targetId,
-                        "targetEndpoint": elementConnections[index].endpoints[1].getUuid(),
-                        "parameters": elementConnections[index].parameters
-                    });
-                });
+        $.post("", {
+            event: "saveService",
+            data: JSON.stringify({
+                "serviceName": serviceName,
+                "elementConnections": connectionSet,
+                "elements": instanceSet
+            })
+        }, function(resultValue) {
+            if (window.location.href.indexOf("/create") >= 0) {
+                window.location = "../" + resultValue;
+            } else {
+                addMessage("Saved successfully.", "success");
+                setServiceStatus("saved");
+            }
+        });
+    });
 
-                $.each($(".element"), function(index) {
-                    instanceSet.push({
-                        "displayId": $(this).prop("id"),
-                        "posX": Math.floor($(this).position().left),
-                        "posY": Math.floor($(this).position().top),
-                        "anchors": $(this).attr("anchors")
-                    });
-                });
 
-                $.post("", {
-                    event: "saveService",
-                    data: JSON.stringify({
-                        "serviceName": serviceName,
-                        "elementConnections": connectionSet,
-                        "elements": instanceSet
-                    })
-                }, function(resultValue) {
-                    if (window.location.href.indexOf("/create") >= 0) {
-                        window.location = "../" + resultValue;
-                    } else {
-                        addMessage("Saved successfully.", "success");
-                    }
-                });
-            });
+    /**
+     * Handling window resize event for preventing elements against overflow.
+     */
+    $(window).resize(function() {
+        $(".element").each(function() {
+            if ($(this).position().left + $(this).width() > $("#dropContainer").position().left + $("#dropContainer").width()) {
+                $(this).css("left", $("#dropContainer").position().left + $("#dropContainer").width() - $(this).width() + 4);
+            }
+        });
+        jsPlumbInstance.repaintEverything();
+    });
 
-            $(window).resize(function() {
-                $(".element").each(function() {
-                    if ($(this).position().left + $(this).width() > $("#dropContainer").position().left + $("#dropContainer").width()) {
-                        $(this).css("left", $("#dropContainer").position().left + $("#dropContainer").width() - $(this).width() + 4);
-                    }
-                });
-                instance.repaintEverything();
-            });
 
-            $("#dragContainerScrollUp").click(function() {
-                if (dragContainerScroll > 0) dragContainerScroll -= 1;
-                $("#dragContainer").scrollTop(dragContainerScroll * $("#elementTemplatePanel").height());
-            });
+    /**
+     * Handling click events on scroll buttons.
+     */
+    $("#dragContainerScrollUp").click(function() {
+        if (dragContainerScroll > 0) dragContainerScroll -= 1;
+        $("#dragContainer").scrollTop(dragContainerScroll * $("#elementTemplatePanel").height());
+    });
 
-            $("#dragContainerScrollDown").click(function() {
-                if (dragContainerScroll < $(".elementTemplate").length - 3) dragContainerScroll += 1;
-                $("#dragContainer").scrollTop(dragContainerScroll * $("#elementTemplatePanel").height());
-            });
+    $("#dragContainerScrollDown").click(function() {
+        if (dragContainerScroll < $(".elementTemplate").length - 3) dragContainerScroll += 1;
+        $("#dragContainer").scrollTop(dragContainerScroll * $("#elementTemplatePanel").height());
+    });
 
-            $("#searchElementTemplate").keyup(function() {
-                $(".elementTemplate").each(function() {
-                    $(this).parent().parent().hide();
-                    if ($(this).attr("alt").toLowerCase().indexOf($("#searchElementTemplateInput").val().toLowerCase()) >= 0) {
-                        $(this).parent().parent().show();
-                    }
-                });
-            });
 
+    /**
+     * Handling search feature.
+     */
+    $("#searchElementTemplate").keyup(function() {
+        $(".elementTemplate").each(function() {
+            $(this).parent().parent().hide();
+            if ($(this).attr("alt").toLowerCase()
+                .indexOf($("#searchElementTemplateInput")
+                .val().toLowerCase()) >= 0) {
+                $(this).parent().parent().show();
+            }
+        });
+    });
 
-            /**
-             * Handling click event on dialog save button.
-             */
-            $("#connectionInfoSave").click(function() {
-                clickedConnection.parameters = $("#connectionInfoParameters").val();
-            });
 
+    /**
+     * Handling page load event.
+     */
+    $(document).ready(function() {
+        $.post("", {
+            event: "loadService"
+        }, function(resultValue) {
+            if(resultValue=="") return;
+
+            result = jQuery.parseJSON(resultValue);
+            $("#serviceName").text(result.serviceName);
+
+            $.each(result.elements, function(i, element) {
+                addElement(element.displayId.split('_')[1],
+                    element.displayId,
+                    element.posY + "px",
+                    element.anchors,
+                    element.parameters,
+                    element.posX + "px");
+                if (elementIndex < element.displayId.split('_')[0]) {
+                    elementIndex = element.displayId.split('_')[0];
+                }
+                elementIndex++;
+            });
 
-            /**
-             * Handling page load event.
-             */
-            $(document).ready(function() {
-                $.post("", {
-                    event: "loadService"
-                }, function(resultValue) {
-                    var result = jQuery.parseJSON(resultValue);
-                    $("#serviceName").text(result.serviceName);
-
-                    $.each(result.elements, function(i, element) {
-                        addNewElement(instance,
-                                      endpointType,
-                                      element.displayId.split('_')[1],
-                                      element.displayId,
-                                      element.posY + "px",
-                                      element.anchors,
-                                      element.parameters,
-                                      element.posX + "px");
-                        if (elementIndex < element.displayId.split('_')[0]) {
-                            elementIndex = element.displayId.split('_')[0];
-                        }
-                    });
-                    elementIndex++;
-
-                    $.each(result.elementConnections, function(i, connection) {
-                        var connectionObject = instance.connect({
-                            uuids: [connection.sourceEndpoint, connection.targetEndpoint]
-                        });
-                        connectionObject.parameters = connection.parameters;
-                    });
+            $.each(result.elementConnections, function(i, connection) {
+                connectionObject = jsPlumbInstance.connect({
+                    uuids: [connection.sourceEndpoint, connection.targetEndpoint]
                 });
+                connectionObject.parameters = connection.parameters;
             });
+            setServiceStatus("saved");
         });
     });
-})();
\ No newline at end of file
+});
\ No newline at end of file

circle/setty/templates/setty/index.html

@@ -39,7 +39,7 @@
                         </div>
                         <div class="panel-body">
                             <img class="elementTemplate" type="{% for target in element.compatibles.all %}{{ target.id }},{% endfor %}"
-                                 id="{{ element.id }}" data-container="body" data-placement="right" title="{{ element.description }}"
+                                 id="{{ element.id }}" desc="{{ element.description }}"
                                  src="{% static element.logo %}" alt="{{ element.name }}"
                                  ondragstart="return false;"/>
                         </div>
@@ -67,8 +67,8 @@
                         <h3 class="no-margin" id="serviceName" contenteditable="true">Service</h3>
                     </div>
                     <div class="col-xs-2 text-right">
-                        <button class="btn btn-info btn-xs" id="clearService">{% trans 'Clear' %}</button>
-                    </div>
+                        <button class="btn btn-info btn-xs" id="clearService">{% trans 'Clear' %}</button>
+                    </div>
                     <div class="col-xs-2 text-right">
                         <button class="btn btn-success btn-xs" id="saveService">{% trans 'Save' %}</button>
                     </div>
@@ -79,14 +79,14 @@
         </div>
     </div>
 
-     <div class="col-xs-2 col-md-2">
-        <div class="panel panel-default">
+     <div class="col-xs-2" id="informationPanel">
+        <div class="panel panel-default no-margin">
             <div class="panel-heading text-center">
                 <div class="row">
                     <h3 class="no-margin">{% trans 'Information' %}</h3>
                 </div>
             </div>
-            <div class="panel-body" id="informationContainer"></div>
+            <div class="panel-body no-margin" id="informationContainer"></div>
             <div class="panel-footer"></div>
         </div>
     </div>
@@ -95,7 +95,8 @@
 
 <!-- Modal dialogs -->
 
-<div class="modal fade" id="connectionInfoDialog" role="dialog">
+
+<div class="modal fade" id="saveWarningDialog" role="dialog">
     <div class="modal-dialog">
         <!-- Modal content-->
         <div class="modal-content">
@@ -109,10 +110,10 @@
             <div class="modal-footer">
                 <div class="row">
                     <div class="col-md-2 col-md-push-8">
-                        <button id="connectionInfoSave" type="button" class="btn btn-success" data-dismiss="modal">{% trans 'Save' %}</button>
+                        <button type="button" class="btn btn-success" data-dismiss="modal" onclick="return false;">{% trans 'Return' %}</button>
                     </div>
                     <div class="col-md-2 col-md-push-8">
-                        <button type="button" class="btn btn-danger" data-dismiss="modal">{% trans 'Close' %}</button>
+                        <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="return true;">{% trans 'Close' %}</button>
                     </div>
                 </div>
             </div>
@@ -120,6 +121,5 @@
     </div>
 </div>
 
-
 {% endblock %}
 

circle/setty/views másolata.py

-from django.template import RequestContext, loader
-from django.template import RequestContext, loader
-from django.http import HttpResponse
-from django.db.models import Q
-from django.views.decorators.csrf import csrf_exempt
-from django.views.generic import TemplateView
-from .models import (
-    Element,
-    ElementTemplate,
-    ElementConnection,
-    Service,
-    User,
-)
-import json
-
-
-class IndexView(TemplateView):
-    template_name = "setty/index.html"
-
-    def get_context_data(self, **kwargs):
-        pass
-
-
-@csrf_exempt
-def index(request):
-    if request.method == 'POST':
-        if request.POST.get('event') == "getLoggedInUser":
-            username = None
-            if request.user.is_authenticated():
-                return HttpResponse(request.user.username)
-            else:
-                return HttpResponse("unauthenticated!")
-
-        elif request.POST.get('event') == "deleteConfig":
-            try:
-                siteUser = User.objects.get(name=request.POST.get('user'))
-                workSpace = Workspace.objects.get(
-                    name=request.POST.get('data'),
-                    user=siteUser,
-                )
-
-                serviceInstances = ServiceInstance.objects.all().filter(
-                    workspace=workSpace,
-                )
-
-                for instance in serviceInstances:
-                    connectionTargets = ServiceConnection.objects.all().filter(
-                        target=instance,
-                    )
-                    connectionSources = ServiceConnection.objects.all().filter(
-                        source=instance,
-                    )
-
-                    for connection in connectionSources:
-                        connection.delete()
-
-                    for connection in connectionTargets:
-                        connection.delete()
-
-                    instance.delete()
-
-                workSpace.delete()
-
-                return HttpResponse(
-                    "Workspace (" +
-                    request.POST.get('data') +
-                    ") deleted successfully."
-                )
-
-            except:
-                return HttpResponse(
-                    "Failed deleting workspace (" +
-                    request.POST.get('data') +
-                    ")."
-                )
-
-        elif request.POST.get('event') == "saveConfig":
-            jsonData = json.loads(request.POST.get('data'))
-
-            userName = jsonData['exportData']['user']
-
-            try:
-                siteUser = User.objects.get(name=userName)
-            except User.DoesNotExist:
-                siteUser = User(name=userName)
-                siteUser.save()
-
-            try:
-                siteWorkspace = Workspace.objects.get(
-                    name=jsonData['exportData']['workspace'],
-                    user=siteUser,
-                )
-                siteWorkspace.delete()
-                siteWorkspace = Workspace(
-                    user=siteUser,
-                    name=jsonData['exportData']['workspace'],
-                )
-                siteWorkspace.save()
-            except Workspace.DoesNotExist:
-                siteWorkspace = Workspace(
-                    user=siteUser,
-                    name=jsonData['exportData']['workspace'],
-                )
-                siteWorkspace.save()
-
-            for connection in jsonData['exportData']['connections']:
-                tempData = jsonData['exportData']['connections']
-
-                sourceId = tempData[connection]['sourceid']
-                targetId = tempData[connection]['targetid']
-                sourcePosX = tempData[connection]['sourceposx']
-                sourcePosY = tempData[connection]['sourceposy']
-                targetPosX = tempData[connection]['targetposx']
-                targetPosY = tempData[connection]['targetposy']
-                sourceendpoint = tempData[connection]['sourceendpoint']
-                targetendpoint = tempData[connection]['targetendpoint']
-                targetParent = Service.objects.get(id=targetId)
-                sourceParent = Service.objects.get(id=sourceId)
-                serviceInstanceSource = ServiceInstance(
-                    parentservice=sourceParent,
-                    workspace=siteWorkspace,
-                    parameters=Service.objects.get(id=sourceId).configuration,
-                    posX=sourcePosX,
-                    posY=sourcePosY,
-                )
-                serviceInstanceSource.save()
-
-                serviceInstanceTarget = ServiceInstance(
-                    parentservice=targetParent,
-                    workspace=siteWorkspace,
-                    parameters=Service.objects.get(id=targetId).configuration,
-                    posX=targetPosX,
-                    posY=targetPosY,
-                )
-                serviceInstanceTarget.save()
-
-                serviceConnection = ServiceConnection(
-                    target=serviceInstanceTarget,
-                    source=serviceInstanceSource,
-                    sourceEndpoint=sourceendpoint,
-                    targetEndpoint=targetendpoint,
-                    parameters='Not yet configured',
-                )
-                serviceConnection.save()
-
-            print jsonData
-            return HttpResponse(siteWorkspace.name)
-
-        elif request.POST.get('event') == "loadConfig":
-            i = 0
-            data = []
-
-            siteUser = User.objects.get(name=request.POST.get('user'))
-            workSpace = Workspace.objects.get(
-                name=request.POST.get('data'),
-                user=siteUser,
-            )
-
-            connectionList = ServiceConnection.objects.all().filter(
-                Q(source__workspace=workSpace) |
-                Q(target__workspace=workSpace)
-            )
-
-            for connection in connectionList:
-                ++i
-                seged = {}
-
-                seged['targetposx'] = connection.target.posX
-                seged['targetposy'] = connection.target.posY
-                seged['targetendpoint'] = connection.targetEndpoint
-                seged['targetid'] = connection.target.parentservice.id
-                seged['sourceposx'] = connection.source.posX
-                seged['sourceposy'] = connection.source.posY
-                seged['sourceendpoint'] = connection.sourceEndpoint
-                seged['sourceid'] = connection.source.parentservice.id
-
-                data.append(seged)
-
-            jsonData = json.dumps(data)
-
-            return HttpResponse(jsonData)
-
-        elif request.POST.get('event') == "startConfig":
-            siteUser = User.objects.get(name=request.POST.get('user'))
-            workSpace = Workspace.objects.get(
-                name=request.POST.get('data'),
-                user=siteUser,
-            )
-
-            print request.POST.get('data')
-
-            return HttpResponse("Configuration started.")
-
-        return HttpResponse("adsf")
-
-    elementList = ElementTemplate.objects.all()
-    template = loader.get_template('builder/index.html')
-    context = RequestContext(request, {'elementList': elementList})
-    return HttpResponse(template.render(context))

circle/setty/views.py

@@ -34,6 +34,9 @@ class IndexView(TemplateView):
 
     @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') == "saveService":
             jsonData = json.loads(self.request.POST.get('data'))
 
@@ -56,7 +59,7 @@ class IndexView(TemplateView):
             for element in jsonData['elements']:
                 elementObject = Element(
                     service=serviceObject,
-                    parameters="none",  # further plan
+                    parameters=element['parameters'],
                     display_id=element['displayId'],
                     pos_x=element['posX'],
                     pos_y=element['posY'],
@@ -113,7 +116,7 @@ class DetailView(IndexView):
         try:
             serviceObject = Service.objects.get(id=kwargs['pk'])
             if serviceObject.user != self.request.user:
-                return HttpResponseForbidden(
+                return HttpResponseForbidden(
                     "You don't have permission to open the service.")
         except:
             raise Http404
@@ -122,6 +125,9 @@ class DetailView(IndexView):
 
     @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":
             serviceObject = Service.objects.get(id=kwargs['pk'])
             elementList = Element.objects.filter(service=serviceObject)