diff --git a/client/js/controllers/home/home.js b/client/js/controllers/home/home.js index 47491ff..aeb89e5 100755 --- a/client/js/controllers/home/home.js +++ b/client/js/controllers/home/home.js @@ -4,199 +4,199 @@ * @param {$scope} $scope The $scope service from angular */ mainApp.controller('homeCtrl', ['$scope', 'Compute', '$rootScope', 'Loading', 'Identity', 'Image', function ($scope, Compute, $rootScope, Loading, Identity, Image) -{ - - graph = new joint.dia.Graph; - paper = new joint.dia.Paper({ - el: $('#graphHolder'), - width: $('#graphHolder').width(), - //height: test.height, - model: graph, - gridSize: 1, - eractive: false - }); - - $scope.raiseShowMachineCreationEvent = function () { - $rootScope.$broadcast("showMachineCreationEvent", Compute.getData().axioms); - }; - - var displayMachine = function () { - - var machineNames = []; - var i = 0; - $.each(Compute.getData().machines, function () { - machineNames[i] = [this.name, this.id]; - i++; - }) - var vmList = { - 'vms': machineNames - /*'links': [ - ['VM 1', 'VM 2', '', ''], - ['VM 2', 'VM 3', 'I3', 'I4'], - ['VM 1', 'VM 3', 'I5', 'I6'], - ['VM 2', 'VM 4', 'I5', 'I6'], - ['VM 4', 'VM 5', 'I5', 'I6'], - ['VM 4', 'VM 6', 'I5', 'I6'], - ['VM 4', 'VM 1', 'I5', 'I6'], - ['VM 7', 'VM 4', 'I5', 'I6'], - ['VM 7', 'VM 3', 'I5', 'I6'], - ['VM 6', 'VM 8', 'I5', 'I6'], - ['VM 3', 'VM 9', 'I5', 'I6'], - ['VM 3', 'VM 10', 'I5', 'I6'] - ]*/ - }; - //Custom element for inserting html - joint.shapes.html = {}; - joint.shapes.html.Element = joint.shapes.basic.Rect.extend({ - defaults: joint.util.deepSupplement({ - type: 'html.Element', - attrs: { - rect: {stroke: 'none', 'fill-opacity': 0} - } - }, joint.shapes.basic.Rect.prototype.defaults) - }); - - - this.paper.$el.css('pointer-events', 'none'); - var cells = buildGraphFromAdjacencyList(vmList); - - this.graph.addCells(cells); - console.log(this.graph); - var test = joint.layout.DirectedGraph.layout(this.graph, { - etLinkVertices: false, - //Top to bottom generation - ankDir: "TB", - odeSep: 150, - dgeSep: 150, - ankSep: 50 - }); - - this.paper.setDimensions(test.width, test.height); - - $(".Member").bind('click', function () { - $scope.raiseShowMachineDetailsEvent($(this).attr('model-id')); - }); - } - - // Function to call after pull all data about machines - var callMeAfterPullData = function (data) { - //$scope.machines=Compute.getData().machines; - Loading.stop(); - displayMachine(); - }; - - var tryToRetrieveData = function () { - // If no data retrieve about machine and user is logged - if (Compute.getData().machines == null && Identity.isAlreadyLogin()) { - Loading.start(); // Show loading gif - Compute.pullData(callMeAfterPullData); // Retrieve data and call the callback - } else { - // Else if user is logged and data is already retrieve - // simply display data - if (Identity.isAlreadyLogin()) { - callMeAfterPullData(); // Display data - } - } - }; - - // On user login - $scope.$on('loginEvent', function () { - tryToRetrieveData(); - }); - - // Function to call from view to display the details of a machine - $scope.raiseShowMachineDetailsEvent = function (id) { - - // Stop loading gif and display overlay - var callback = function () { - Loading.stop(); - var data = Compute.getData(); - - $rootScope.$broadcast("showMachineDetailsEvent", data.machines[id], data.axioms); - - }; - Loading.start(); // Show loading gif - Compute.pullMachines(callback); // Retrieve machine info and display overlay - }; - - // Try to retrieve data for the first time - tryToRetrieveData(); - - - - //Read the adjacencyList and build the elements and the links according to it - function buildGraphFromAdjacencyList(adjacencyList) { - - var elements = []; - var links = []; - - _.each(adjacencyList['vms'], function (vm) { - elements.push(makeElement(vm)); - }); - _.each(adjacencyList['links'], function (link) { - links.push(makeLink(link[0], link[1], link[2], link[3])); - }); - // Links must be added after all the elements. This is because when the links - // are added to the graph, link source/target - // elements must be in the graph already. - return elements.concat(links); - } - - // On user login - $scope.$on('updateGraphEvent', function () { - displayMachine(); - - }); - //Return a new link linking the parent and child elements with the interfaces names given in parameters - function makeLink(parentElementLabel, childElementLabel, Iparent, Ichild) { - - return new joint.dia.Link({ - source: {id: parentElementLabel}, - target: {id: childElementLabel}, - labels: [ - {position: 20, attrs: {text: {text: Iparent}}}, - {position: -20, attrs: {text: {text: Ichild}}} - ] - }); - } - - //Return a new element - function makeElement(vm) { - var label = vm[0]; - - var maxLineLength = _.max(label.split('\n'), function (l) { - return l.length; - }).length; - - // Compute width/height of the rectangle based on the number - // of lines in the label and the letter size. 0.6 * letterSize is - // an approximation of the monospace font letter width. - var width = 130; - var height = 80; - var data = Compute.getData(); - - if (data.machines[vm[1]].status == "ACTIVE") { - return new joint.shapes.org.Member({ - id: vm[1], - position: {x: 0, y: 0}, - attrs: { - '.card': {fill: 'blue', stroke: 'none'}, - image: {'xlink:href': './images/ON.png', opacity: 0.7}, - //'.rank': { text: rank, fill: textColor, 'word-spacing': '-5px', 'letter-spacing': 0}, - '.name': {text: label, fill: 'white', 'font-size': 13, 'font-family': 'Arial', 'letter-spacing': 0} - } - }); - } else { - return new joint.shapes.org.Member({ - id: vm[1], - position: {x: 0, y: 0}, - attrs: { - '.card': {fill: 'blue', stroke: 'none'}, - image: {'xlink:href': './images/OFF.png', opacity: 0.7}, - //'.rank': { text: rank, fill: textColor, 'word-spacing': '-5px', 'letter-spacing': 0}, - '.name': {text: label, fill: 'white', 'font-size': 13, 'font-family': 'Arial', 'letter-spacing': 0} - } - }); - } - } -}]); \ No newline at end of file + { + + graph = new joint.dia.Graph; + paper = new joint.dia.Paper({ + el: $('#graphHolder'), + width: $('#graphHolder').width(), + //height: test.height, + model: graph, + gridSize: 1, + eractive: false + }); + + $scope.raiseShowMachineCreationEvent = function () { + $rootScope.$broadcast("showMachineCreationEvent", Compute.getData().axioms); + }; + + var displayMachine = function () { + + var machineNames = []; + var i = 0; + $.each(Compute.getData().machines, function () { + machineNames[i] = [this.name, this.id]; + i++; + }) + var vmList = { + 'vms': machineNames + /*'links': [ + ['VM 1', 'VM 2', '', ''], + ['VM 2', 'VM 3', 'I3', 'I4'], + ['VM 1', 'VM 3', 'I5', 'I6'], + ['VM 2', 'VM 4', 'I5', 'I6'], + ['VM 4', 'VM 5', 'I5', 'I6'], + ['VM 4', 'VM 6', 'I5', 'I6'], + ['VM 4', 'VM 1', 'I5', 'I6'], + ['VM 7', 'VM 4', 'I5', 'I6'], + ['VM 7', 'VM 3', 'I5', 'I6'], + ['VM 6', 'VM 8', 'I5', 'I6'], + ['VM 3', 'VM 9', 'I5', 'I6'], + ['VM 3', 'VM 10', 'I5', 'I6'] + ]*/ + }; + //Custom element for inserting html + joint.shapes.html = {}; + joint.shapes.html.Element = joint.shapes.basic.Rect.extend({ + defaults: joint.util.deepSupplement({ + type: 'html.Element', + attrs: { + rect: {stroke: 'none', 'fill-opacity': 0} + } + }, joint.shapes.basic.Rect.prototype.defaults) + }); + + + this.paper.$el.css('pointer-events', 'none'); + var cells = buildGraphFromAdjacencyList(vmList); + + this.graph.addCells(cells); + //console.log(this.graph); + var test = joint.layout.DirectedGraph.layout(this.graph, { + etLinkVertices: false, + //Top to bottom generation + ankDir: "TB", + odeSep: 150, + dgeSep: 150, + ankSep: 50 + }); + + this.paper.setDimensions(test.width, test.height); + + $(".Member").bind('click', function () { + $scope.raiseShowMachineDetailsEvent($(this).attr('model-id')); + }); + } + + // Function to call after pull all data about machines + var callMeAfterPullData = function (data) { + //$scope.machines=Compute.getData().machines; + Loading.stop(); + displayMachine(); + }; + + var tryToRetrieveData = function () { + // If no data retrieve about machine and user is logged + if (Compute.getData().machines == null && Identity.isAlreadyLogin()) { + Loading.start(); // Show loading gif + Compute.pullData(callMeAfterPullData); // Retrieve data and call the callback + } else { + // Else if user is logged and data is already retrieve + // simply display data + if (Identity.isAlreadyLogin()) { + callMeAfterPullData(); // Display data + } + } + }; + + // On user login + $scope.$on('loginEvent', function () { + tryToRetrieveData(); + }); + + // Function to call from view to display the details of a machine + $scope.raiseShowMachineDetailsEvent = function (id) { + + // Stop loading gif and display overlay + var callback = function () { + Loading.stop(); + var data = Compute.getData(); + + $rootScope.$broadcast("showMachineDetailsEvent", data.machines[id], data.axioms); + + }; + Loading.start(); // Show loading gif + Compute.pullMachines(callback); // Retrieve machine info and display overlay + }; + + // Try to retrieve data for the first time + tryToRetrieveData(); + + + + //Read the adjacencyList and build the elements and the links according to it + function buildGraphFromAdjacencyList(adjacencyList) { + + var elements = []; + var links = []; + + _.each(adjacencyList['vms'], function (vm) { + elements.push(makeElement(vm)); + }); + _.each(adjacencyList['links'], function (link) { + links.push(makeLink(link[0], link[1], link[2], link[3])); + }); + // Links must be added after all the elements. This is because when the links + // are added to the graph, link source/target + // elements must be in the graph already. + return elements.concat(links); + } + + // On user login + $scope.$on('updateGraphEvent', function () { + displayMachine(); + + }); + //Return a new link linking the parent and child elements with the interfaces names given in parameters + function makeLink(parentElementLabel, childElementLabel, Iparent, Ichild) { + + return new joint.dia.Link({ + source: {id: parentElementLabel}, + target: {id: childElementLabel}, + labels: [ + {position: 20, attrs: {text: {text: Iparent}}}, + {position: -20, attrs: {text: {text: Ichild}}} + ] + }); + } + + //Return a new element + function makeElement(vm) { + var label = vm[0]; + + var maxLineLength = _.max(label.split('\n'), function (l) { + return l.length; + }).length; + + // Compute width/height of the rectangle based on the number + // of lines in the label and the letter size. 0.6 * letterSize is + // an approximation of the monospace font letter width. + var width = 130; + var height = 80; + var data = Compute.getData(); + + if (data.machines[vm[1]].status == "ACTIVE") { + return new joint.shapes.org.Member({ + id: vm[1], + position: {x: 0, y: 0}, + attrs: { + '.card': {fill: 'blue', stroke: 'none'}, + image: {'xlink:href': './images/ON.png', opacity: 0.7}, + //'.rank': { text: rank, fill: textColor, 'word-spacing': '-5px', 'letter-spacing': 0}, + '.name': {text: label, fill: 'white', 'font-size': 13, 'font-family': 'Arial', 'letter-spacing': 0} + } + }); + } else { + return new joint.shapes.org.Member({ + id: vm[1], + position: {x: 0, y: 0}, + attrs: { + '.card': {fill: 'blue', stroke: 'none'}, + image: {'xlink:href': './images/OFF.png', opacity: 0.7}, + //'.rank': { text: rank, fill: textColor, 'word-spacing': '-5px', 'letter-spacing': 0}, + '.name': {text: label, fill: 'white', 'font-size': 13, 'font-family': 'Arial', 'letter-spacing': 0} + } + }); + } + } + }]); \ No newline at end of file diff --git a/client/js/controllers/image/image.js b/client/js/controllers/image/image.js index 1702cb3..7ce3bb9 100755 --- a/client/js/controllers/image/image.js +++ b/client/js/controllers/image/image.js @@ -3,7 +3,7 @@ * * @param {$scope} $scope The $scope service from angular */ -mainApp.controller('imageCtrl', ['$scope', 'Image', 'Loading', 'Identity','$rootScope', function ($scope, Image, Loading, Identity, $rootScope) +mainApp.controller('imageCtrl', ['$scope', 'Image', 'Loading', 'Identity', '$rootScope', function ($scope, Image, Loading, Identity, $rootScope) { // Update view @@ -21,9 +21,14 @@ mainApp.controller('imageCtrl', ['$scope', 'Image', 'Loading', 'Identity','$root callMeAfterGetImage(); } } - - $scope.edit=function(image){ + + $scope.edit = function (image) { $rootScope.$broadcast("editImageEvent", image, Image.getData().axioms); - + } + + $scope.showUploadImageModal = function () { + $rootScope.$broadcast("showUploadImageModalEvent"); + + }; }]); diff --git a/client/js/controllers/image/upload.js b/client/js/controllers/image/upload.js index 6737269..8d62b50 100644 --- a/client/js/controllers/image/upload.js +++ b/client/js/controllers/image/upload.js @@ -22,10 +22,11 @@ mainApp.controller('uploadImageCtrl', ['$scope', 'Image', 'Loading', 'Identity', */ $scope.doUpload = function () { - console.log($('#imageToUpload').prop('files')[0]); + /* console.log($('#imageToUpload').prop('files')[0]); Image.uploadImage($('#imageToUpload').prop('files')[0], function () { - alert("done") - }) + alert("done"); + });*/ + Image.uploadImage("loic",function(){}) /*$("#drop-area-div").dmUploader({ extraData: { "token" : Identity.getToken(), @@ -57,6 +58,11 @@ mainApp.controller('uploadImageCtrl', ['$scope', 'Image', 'Loading', 'Identity', }; + // Manager logout event + $scope.$on('showUploadImageModalEvent', function () { + $scope.token = Identity.getToken(); + + $('#uploadImageModal').modal("show"); + }); - $scope.token = Identity.getToken(); }]); diff --git a/client/js/services/Image.js b/client/js/services/Image.js index 90f3a48..ef4e0b1 100644 --- a/client/js/services/Image.js +++ b/client/js/services/Image.js @@ -84,44 +84,72 @@ mainApp.factory('Image', ['$http', 'Identity', function ($http, Identity) { * @returns {undefined} */ var uploadImage = function (fileToUpload, callback) { - var form_data = new FormData(); - form_data.append('file', fileToUpload); - console.log(fileToUpload); - form_data.append("task", "image"); - form_data.append("token", Identity.getToken()); - form_data.append('action', "uploadImage"); - form_data.append('id', '6564'); - form_data.append('file_name', fileToUpload); + /*var form_data = new FormData(); + form_data.append('file', fileToUpload); + console.log(fileToUpload); + form_data.append("task", "image"); + form_data.append("token", Identity.getToken()); + form_data.append('action', "uploadImage"); + form_data.append('id', '6564'); + form_data.append('file_name', fileToUpload); + + $.ajax({ + url: "../server/index.php", // Url to which the request is send + type: "POST", // Type of request to be send, called as method + data: form_data, // Data sent to server, a set of key/value pairs (i.e. form fields and values) + file_name: fileToUpload, + token: Identity.getToken(), + task: "image", + action: 'uploadImage', + id: '6564', + contentType: false, // The content type used when sending data to the server. + cache: false, // To unable request pages to be cached + processData: false, // To send DOMDocument or non processed data file it is set to false + success: function (data) // A function to be called if request succeeds + { + alert("success"); + } + });*/ - $.ajax({ - url: "../server/index.php", // Url to which the request is send - type: "POST", // Type of request to be send, called as method - data: form_data, // Data sent to server, a set of key/value pairs (i.e. form fields and values) - file_name: fileToUpload, - token: Identity.getToken(), - task: "image", - action: 'uploadImage', - id: '6564', - contentType: false, // The content type used when sending data to the server. - cache: false, // To unable request pages to be cached - processData: false, // To send DOMDocument or non processed data file it is set to false - success: function (data) // A function to be called if request succeeds - { - alert("success"); - } - }); + alert("send") + var result = $http.post('../server/index.php', + $.param({"token": Identity.getToken(), "task": "image", 'action': 'createImage', "opt": {"name": "loic"}})); //var result=$http.post('../server/index.php', // $.param({"token" : Identity.getToken(), "task" : "image", 'action':'uploadImage', 'file_name':form_data, 'id':'6564'})); // Wait and handle the response - /* result.then(function (response){ - callback(parseUploadImageAnswer(response, false)); - },function(response){ - callback(parseUploadImageAnswer(response, true)); - });*/ + result.then(function (response) { + //callback(parseUploadImageAnswer(response, false)); + alert(response.data) + console.log(response.data) + callback() + }, function (response) { + alert(response.data) + callback() + //callback(parseUploadImageAnswer(response, true)); + }); }; + var createImage = function (name,callback) { + + + var result = $http.post('../server/index.php', + $.param({"token": Identity.getToken(), "task": "image", 'action': 'createImage', "opt": {"name": name}})); + + //var result=$http.post('../server/index.php', + // $.param({"token" : Identity.getToken(), "task" : "image", 'action':'uploadImage', 'file_name':form_data, 'id':'6564'})); + + // Wait and handle the response + result.then(function (response) { + callback() + }, function (response) { + alert(response.data) + callback() + }); + }; + + var getData = function (response) { return data; @@ -132,6 +160,7 @@ mainApp.factory('Image', ['$http', 'Identity', function ($http, Identity) { getImages: getImages, updateImage: updateImage, getData: getData, + createImage: createImage, uploadImage: uploadImage }; diff --git a/client/partials/image/image.html b/client/partials/image/image.html index 9c17c2f..a789ae8 100644 --- a/client/partials/image/image.html +++ b/client/partials/image/image.html @@ -8,7 +8,7 @@
- +

@@ -16,6 +16,7 @@ Name + Status Size Action @@ -23,6 +24,9 @@ {{ image.name}} + {{ image.status}} + {{ image.status}} + {{ (image.size / 1048576).toFixed(2)}} MB diff --git a/client/partials/image/upload.html b/client/partials/image/upload.html index 641646b..b3e8767 100644 --- a/client/partials/image/upload.html +++ b/client/partials/image/upload.html @@ -11,7 +11,6 @@
-