Merge branch 'develop' into Eole_Graph
Conflicts: client/index.html client/js/controllers/home/home.js client/partials/home/home.html
This commit is contained in:
Eole
commit
49f416dc50
317 changed files with 5578 additions and 33526 deletions
19
client/Test/index.html
Normal file
19
client/Test/index.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<head>
|
||||
|
||||
<script src="../vendors/angularjs/angular.min.js"></script>
|
||||
<script src="../vendors/angularjs/angular-route.min.js"></script>
|
||||
<script src="../vendors/angularjs/angular-sanitize.min.js"></script>
|
||||
<script src="../vendors/angularjs/angular-cookies.min.js"></script>
|
||||
<script src="../js/services/Test.js"></script>
|
||||
<script src="../js/app.js"></script>
|
||||
</head>
|
||||
|
||||
<body ng-app="mainApp">
|
||||
<div ng-controller="hassan">
|
||||
<ul>
|
||||
<li ng-repeat="person in persons">
|
||||
{{person.Name + ' : ' + person.Age}}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
39
client/index.html
Normal file → Executable file
39
client/index.html
Normal file → Executable file
|
|
@ -13,27 +13,27 @@
|
|||
<link rel="stylesheet" href="./css/graph.css">
|
||||
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Overlay -->
|
||||
<!-- Overlay -->
|
||||
<div ng-include="'./partials/login.html'"></div>
|
||||
<div ng-include="'./partials/home/machineDetails.html'"></div>
|
||||
<div ng-include="'./partials/loading.html'"></div>
|
||||
<div ng-include="'./partials/loading.html'"></div>
|
||||
<div ng-include="'./partials/image/upload.html'"></div>
|
||||
|
||||
|
||||
|
||||
<!-- MAIN GRID -->
|
||||
<div class="container-lg">
|
||||
<!-- Status bar -->
|
||||
<div class="row" ng-controller="statusCtrl">
|
||||
<div class="col-lg-12">
|
||||
<!-- Status bar -->
|
||||
<!-- Status bar -->
|
||||
<div ng-include="'./partials/status.html'"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -59,39 +59,42 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Include JQuery -->
|
||||
<script src="./vendors/jquery/jquery-2.2.0.min.js"></script>
|
||||
<script src="./vendors/jquery/dmuploader.min.js"></script>
|
||||
|
||||
<!-- Include Bootstrap -->
|
||||
<script src="./vendors/bootstrap/js/bootstrap.min.js"></script>
|
||||
|
||||
|
||||
<!-- Include AngularJS and dependencies-->
|
||||
<script src="./vendors/angularjs/angular.min.js"></script>
|
||||
<script src="./vendors/angularjs/angular-route.min.js"></script>
|
||||
<script src="./vendors/angularjs/angular-sanitize.min.js"></script>
|
||||
<script src="./vendors/angularjs/angular-cookies.min.js"></script>
|
||||
<script src="./vendors/angularjs/angular-upload.min.js"></script>
|
||||
<script src="./js/app.js"></script>
|
||||
|
||||
|
||||
<!-- Include services -->
|
||||
<script src="./js/services/Identity.js"></script>
|
||||
<script src="./js/services/Image.js"></script>
|
||||
<script src="./js/services/Compute.js"></script>
|
||||
<script src="./js/services/Loading.js"></script>
|
||||
|
||||
|
||||
<!-- Include controller -->
|
||||
<script src="./js/controllers/login.js"></script>
|
||||
<script src="./js/controllers/status.js"></script>
|
||||
<script src="./js/controllers/home/home.js"></script>
|
||||
<script src="./js/controllers/home/machineDetails.js"></script>
|
||||
<script src="./js/controllers/network/network.js"></script>
|
||||
<script src="./js/controllers/image/image.js"></script>
|
||||
<script src="./js/controllers/image/image.js"></script>
|
||||
<script src="./js/controllers/image/upload.js"></script>
|
||||
|
||||
<!-- Includes and dependencies for jointJS -->
|
||||
|
||||
|
|
@ -101,10 +104,6 @@
|
|||
<script src="./vendors/jointjs/lib/dagre.min.js"></script>
|
||||
<script src="./vendors/jointjs/lib/graphlib.min.js"></script>
|
||||
<script src="./vendors/jointjs/plugins/joint.layout.DirectedGraph.min.js"></script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* The main app module instance
|
||||
* @type angular.module.angular-1_3_6_L1749.moduleInstance
|
||||
*/
|
||||
var mainApp=angular.module("mainApp",['ngRoute', 'ngSanitize', 'ngCookies']);
|
||||
var mainApp=angular.module("mainApp",['ngRoute', 'ngSanitize', 'ngCookies','lr.upload']);
|
||||
|
||||
/**
|
||||
* Configure routeProvider
|
||||
|
|
@ -12,19 +12,20 @@ mainApp.config(['$routeProvider', function($routeProvider){
|
|||
|
||||
|
||||
$routeProvider.
|
||||
when('/home',{
|
||||
templateUrl: 'partials/home/home.html',
|
||||
controller: 'homeCtrl'
|
||||
}).
|
||||
when('/network',{
|
||||
templateUrl: 'partials/network/network.html',
|
||||
controller: 'networkCtrl'
|
||||
}).
|
||||
when('/image',{
|
||||
templateUrl: 'partials/image/image.html',
|
||||
controller: 'imageCtrl'
|
||||
}).otherwise({
|
||||
redirectTo: '/'
|
||||
when('/home',{
|
||||
templateUrl: 'partials/home/home.html',
|
||||
controller: 'homeCtrl'
|
||||
}).
|
||||
when('/network',{
|
||||
templateUrl: 'partials/network/network.html',
|
||||
controller: 'networkCtrl'
|
||||
}).
|
||||
when('/image',{
|
||||
templateUrl: 'partials/image/image.html',
|
||||
controller: 'imageCtrl'
|
||||
})
|
||||
.otherwise({
|
||||
redirectTo: '/home'
|
||||
});
|
||||
}]);
|
||||
|
||||
|
|
|
|||
323
client/js/controllers/home/home.js
Normal file → Executable file
323
client/js/controllers/home/home.js
Normal file → Executable file
|
|
@ -5,129 +5,116 @@
|
|||
*/
|
||||
mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading','Identity', 'Image', function ($scope, Compute, $rootScope, Loading, Identity, Image)
|
||||
{
|
||||
console.log("homeCTRl");
|
||||
console.log("test");
|
||||
// Function to call after pull all data about machines
|
||||
var callMeAfterPullData=function(data){
|
||||
$scope.machines=Compute.getData().machines;
|
||||
Loading.stop();
|
||||
}
|
||||
|
||||
;
|
||||
if(Compute.getData().machines == null && Identity.isAlreadyLogin()){
|
||||
Loading.start();
|
||||
Compute.pullData(callMeAfterPullData);
|
||||
}
|
||||
else{
|
||||
if(Identity.isAlreadyLogin()){
|
||||
callMeAfterPullData();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Image.getImages(function(){});
|
||||
|
||||
|
||||
$scope.raiseShowMachineDetailsEvent=function(id){
|
||||
|
||||
var callback=function(){
|
||||
Loading.stop();
|
||||
var data=Compute.getData();
|
||||
$rootScope.$broadcast("showMachineDetailsEvent", data.machines[id], data.axioms);
|
||||
|
||||
}
|
||||
Loading.start();
|
||||
Compute.pullMachines(callback);
|
||||
}
|
||||
|
||||
//adjacencyList, hard-encoded now but will be the result of a request to the server, format may change
|
||||
var vmList = {
|
||||
'vms': [
|
||||
'VM 1',
|
||||
'VM 2',
|
||||
'VM 3',
|
||||
'VM 4',
|
||||
'VM 5',
|
||||
'VM 6',
|
||||
'VM 7',
|
||||
'VM 8',
|
||||
'VM 9',
|
||||
'VM 10'
|
||||
],
|
||||
'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']
|
||||
]
|
||||
//$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
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//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)
|
||||
});
|
||||
|
||||
//Custom view for this element
|
||||
/*joint.shapes.basic.Rect.ElementView = joint.dia.ElementView.extend({
|
||||
// On user login
|
||||
$scope.$on('loginEvent', function () {
|
||||
tryToRetrieveData();
|
||||
});
|
||||
|
||||
initialize: function() {
|
||||
_.bindAll(this, 'updateBox');
|
||||
joint.dia.ElementView.prototype.initialize.apply(this, arguments);
|
||||
// Function to call from view to display the details of a machine
|
||||
$scope.raiseShowMachineDetailsEvent = function (id) {
|
||||
|
||||
this.$box = $(_.template(this.model.get('html'))());
|
||||
// Prevent paper from handling pointerdown.
|
||||
this.$box.find('input,select').on('mousedown click', function(evt) { evt.stopPropagation(); });
|
||||
// This is an example of reacting on the input change and storing the input data in the cell model.
|
||||
this.$box.find('input').on('change', _.bind(function(evt) {
|
||||
this.model.set('input', $(evt.target).val());
|
||||
}, this));
|
||||
this.$box.find('select').on('change', _.bind(function(evt) {
|
||||
this.model.set('select', $(evt.target).val());
|
||||
}, this));
|
||||
this.$box.find('select').val(this.model.get('select'));
|
||||
this.$box.on('click', function(){
|
||||
$scope.raiseShowMachineDetailsEvent();
|
||||
});
|
||||
// Update the box position whenever the underlying model changes.
|
||||
this.model.on('change', this.updateBox, this);
|
||||
// Remove the box when the model gets removed from the graph.
|
||||
this.model.on('remove', this.removeBox, this);
|
||||
// Stop loading gif and display overlay
|
||||
var callback = function () {
|
||||
Loading.stop();
|
||||
var data = Compute.getData();
|
||||
|
||||
$rootScope.$broadcast("showMachineDetailsEvent", data.machines[id], data.axioms);
|
||||
|
||||
this.updateBox();
|
||||
},
|
||||
render: function() {
|
||||
joint.dia.ElementView.prototype.render.apply(this, arguments);
|
||||
this.paper.$el.prepend(this.$box);
|
||||
this.updateBox();
|
||||
return this;
|
||||
},
|
||||
updateBox: function() {
|
||||
// Set the position and dimension of the box so that it covers the JointJS element.
|
||||
var bbox = this.model.getBBox();
|
||||
// Example of updating the HTML with a data stored in the cell model.
|
||||
this.$box.find('label').text(this.model.get('name'));
|
||||
this.$box.find('span').text(this.model.get('select'));
|
||||
this.$box.css({ width: bbox.width, height: bbox.height, left: bbox.x, top: bbox.y, transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)' });
|
||||
},
|
||||
removeBox: function(evt) {
|
||||
this.$box.remove();
|
||||
}
|
||||
});
|
||||
*/
|
||||
};
|
||||
Loading.start(); // Show loading gif
|
||||
Compute.pullMachines(callback); // Retrieve machine info and display overlay
|
||||
};
|
||||
|
||||
// Try to retrieve data for the first time
|
||||
tryToRetrieveData();
|
||||
|
||||
var displayMachine = function(){
|
||||
console.log("test");
|
||||
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)
|
||||
});
|
||||
|
||||
var graph = new joint.dia.Graph;
|
||||
var paper = new joint.dia.Paper({
|
||||
el: $('#graphHolder'),
|
||||
width: $('#graphHolder').width(),
|
||||
//height: test.height,
|
||||
model: graph,
|
||||
gridSize: 1,
|
||||
eractive: false
|
||||
});
|
||||
paper.$el.css('pointer-events', 'none');
|
||||
var cells = buildGraphFromAdjacencyList(vmList);
|
||||
|
||||
graph.addCells(cells);
|
||||
var test = joint.layout.DirectedGraph.layout(graph, {
|
||||
etLinkVertices: false,
|
||||
//Top to bottom generation
|
||||
ankDir: "TB",
|
||||
odeSep: 150,
|
||||
dgeSep: 150,
|
||||
ankSep: 50
|
||||
});
|
||||
|
||||
paper.setDimensions(test.width, test.height);
|
||||
|
||||
$(".Member").bind('click', function() {
|
||||
$scope.raiseShowMachineDetailsEvent($(this).attr('model-id'));
|
||||
});
|
||||
}
|
||||
|
||||
//Read the adjacencyList and build the elements and the links according to it
|
||||
function buildGraphFromAdjacencyList(adjacencyList) {
|
||||
|
||||
|
|
@ -137,11 +124,9 @@ mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading','I
|
|||
_.each(adjacencyList['vms'], function(vm) {
|
||||
elements.push(makeElement(vm));
|
||||
});
|
||||
console.log(elements);
|
||||
_.each(adjacencyList['links'], function(link) {
|
||||
links.push(makeLink(link[0], link[1] , link[2], link[3]));
|
||||
});
|
||||
console.log(links);
|
||||
// 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.
|
||||
|
|
@ -162,7 +147,8 @@ mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading','I
|
|||
}
|
||||
|
||||
//Return a new element
|
||||
function makeElement(label) {
|
||||
function makeElement(vm) {
|
||||
var label = vm[0];
|
||||
|
||||
var maxLineLength = _.max(label.split('\n'), function(l) { return l.length; }).length;
|
||||
|
||||
|
|
@ -171,83 +157,30 @@ mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading','I
|
|||
// an approximation of the monospace font letter width.
|
||||
var width = 130;
|
||||
var height = 80;
|
||||
|
||||
/*return new joint.shapes.html.Element({
|
||||
id: label,
|
||||
name: label,
|
||||
size: { width: width, height: height },
|
||||
|
||||
html: [
|
||||
'<div class="html-element">',
|
||||
'<img src="./images/ON.png">',
|
||||
'<label></label>',
|
||||
'<input type="image" src="./images/gear.png" class="config"></button>',
|
||||
'</div>'
|
||||
].join(''),
|
||||
|
||||
attrs: {
|
||||
rect: {
|
||||
fill: '#FE854F',
|
||||
width: width,
|
||||
height: height,
|
||||
rx: 5,
|
||||
ry: 5,
|
||||
stroke: 'none'
|
||||
}
|
||||
}
|
||||
});*/
|
||||
return new joint.shapes.org.Member({
|
||||
id: label,
|
||||
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 }
|
||||
var data = Compute.getData();
|
||||
console.log(data.machines[vm[1]]);
|
||||
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 }
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var graph = new joint.dia.Graph;
|
||||
var paper = new joint.dia.Paper({
|
||||
el: $('#graphHolder'),
|
||||
width: $('#graphHolder').width(),
|
||||
//height: test.height,
|
||||
model: graph,
|
||||
gridSize: 1,
|
||||
interactive: false
|
||||
});
|
||||
paper.$el.css('pointer-events', 'none');
|
||||
var cells = buildGraphFromAdjacencyList(vmList);
|
||||
console.log(cells);
|
||||
/*graph.resetCells(cells);
|
||||
joint.layout.DirectedGraph.layout(graph, {
|
||||
setLinkVertices: false,
|
||||
//Top to bottom generation
|
||||
rankDir: "TB",
|
||||
nodeSep: 150,
|
||||
edgeSep: 150,
|
||||
rankSep: 150
|
||||
});*/
|
||||
graph.addCells(cells);
|
||||
var test = joint.layout.DirectedGraph.layout(graph, {
|
||||
setLinkVertices: false,
|
||||
//Top to bottom generation
|
||||
rankDir: "TB",
|
||||
nodeSep: 150,
|
||||
edgeSep: 150,
|
||||
rankSep: 50
|
||||
});
|
||||
console.log(test);
|
||||
|
||||
paper.setDimensions(test.width, test.height);
|
||||
|
||||
$(".Member").bind('click', function() {
|
||||
console.log("Click");
|
||||
$scope.raiseShowMachineDetailsEvent();
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
}]);
|
||||
|
|
|
|||
|
|
@ -3,41 +3,43 @@
|
|||
*
|
||||
* @param {$scope} $scope The $scope service from angular
|
||||
*/
|
||||
mainApp.controller('machineDetailsCtrl', [ '$scope', 'Compute', '$rootScope', '$timeout', function ($scope, Compute, $rootScope, $timeout)
|
||||
{
|
||||
|
||||
// Init scope
|
||||
$scope.machine={};
|
||||
$scope.machineIsStarting=false; // For loading icon
|
||||
mainApp.controller('machineDetailsCtrl', ['$scope', 'Compute', '$rootScope', '$timeout', 'Identity', function ($scope, Compute, $rootScope, $timeout, Identity)
|
||||
{
|
||||
|
||||
|
||||
$scope.$on('showMachineDetailsEvent', function(eventName ,machine, axioms){
|
||||
$scope.machine=machine;
|
||||
$scope.axioms=axioms;
|
||||
$('#machineDetailsModal').modal({backdrop: false, keyboard: true});
|
||||
});
|
||||
// Init scope
|
||||
$scope.machine = {};
|
||||
$scope.machineIsStarting = false; // For loading icon
|
||||
|
||||
// When we need to show details of machine
|
||||
$scope.$on('showMachineDetailsEvent', function (eventName, machine, axioms) {
|
||||
$scope.machine = machine;
|
||||
$scope.axioms = axioms;
|
||||
$('#machineDetailsModal').modal({backdrop: false, keyboard: true});
|
||||
});
|
||||
|
||||
// Try to stop or start a machine
|
||||
$scope.toggleMachineState = function () {
|
||||
// Display gif
|
||||
$scope.machineIsStarting = true;
|
||||
|
||||
// Fake timeout
|
||||
$timeout(function () {
|
||||
$scope.machineIsStarting = false;
|
||||
}, 3000);
|
||||
$timeout(function () {
|
||||
$scope.machine.online = !$scope.machine.online;
|
||||
|
||||
}, 3000);
|
||||
|
||||
|
||||
$scope.toggleMachineState=function(){
|
||||
// Display gif
|
||||
$scope.machineIsStarting=true;
|
||||
};
|
||||
|
||||
// Fake timeout
|
||||
$timeout(function(){
|
||||
$scope.machineIsStarting=false;
|
||||
}, 3000);
|
||||
$timeout(function(){
|
||||
$scope.machine.online=!$scope.machine.online;
|
||||
// Apply modifications
|
||||
$scope.applyModifications = function () {
|
||||
//Todo
|
||||
};
|
||||
|
||||
}, 3000);
|
||||
|
||||
|
||||
};
|
||||
|
||||
$scope.applyModifications=function(){
|
||||
//Todo
|
||||
}
|
||||
|
||||
|
||||
|
||||
}]);
|
||||
}]);
|
||||
|
|
|
|||
|
|
@ -3,19 +3,22 @@
|
|||
*
|
||||
* @param {$scope} $scope The $scope service from angular
|
||||
*/
|
||||
mainApp.controller('imageCtrl', ['$scope', 'Image', 'Loading', function ($scope, Image, Loading)
|
||||
{
|
||||
var callbackTest=function(){
|
||||
$scope.images=Image.getData().images;
|
||||
Loading.stop();
|
||||
};
|
||||
mainApp.controller('imageCtrl', ['$scope', 'Image', 'Loading', 'Identity', function ($scope, Image, Loading, Identity)
|
||||
{
|
||||
|
||||
if(Image.getData().images==null){
|
||||
Loading.start();
|
||||
Image.getImages(callbackTest);
|
||||
}
|
||||
else{
|
||||
callbackTest();
|
||||
}
|
||||
|
||||
}]);
|
||||
// Update view
|
||||
var callMeAfterGetImage = function () {
|
||||
$scope.images = Image.getData().images;
|
||||
Loading.stop();
|
||||
};
|
||||
|
||||
// If user is login try to retrieve data
|
||||
if (Identity.isAlreadyLogin()) {
|
||||
if (Image.getData().images == null) {
|
||||
Loading.start();
|
||||
Image.getImages(callMeAfterGetImage);
|
||||
} else {
|
||||
callMeAfterGetImage();
|
||||
}
|
||||
}
|
||||
}]);
|
||||
|
|
|
|||
62
client/js/controllers/image/upload.js
Normal file
62
client/js/controllers/image/upload.js
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
/**
|
||||
* The image controller
|
||||
*
|
||||
* @param {$scope} $scope The $scope service from angular
|
||||
*/
|
||||
mainApp.controller('uploadImageCtrl', ['$scope', 'Image', 'Loading', 'Identity', 'upload', function ($scope, Image, Loading, Identity, upload)
|
||||
{
|
||||
/*$scope.uploader = new FileUploader({
|
||||
"token" : Identity.getToken(),
|
||||
"task" : "image",
|
||||
'action':'uploadImage',
|
||||
'id':'6564'
|
||||
});
|
||||
$scope.uploader.url='../server/index.php'
|
||||
$scope.uploader.alias='file_name'
|
||||
$scope.uploader.formData={
|
||||
"token" : Identity.getToken(),
|
||||
"task" : "image",
|
||||
'action':'uploadImage',
|
||||
'id':'6564'
|
||||
}
|
||||
*/
|
||||
|
||||
$scope.doUpload = function () {
|
||||
console.log($('#imageToUpload').prop('files')[0]);
|
||||
Image.uploadImage($('#imageToUpload').prop('files')[0], function () {
|
||||
alert("done")
|
||||
})
|
||||
/*$("#drop-area-div").dmUploader({
|
||||
extraData: {
|
||||
"token" : Identity.getToken(),
|
||||
"task" : "image",
|
||||
'action':'uploadImage',
|
||||
'id':'6564'},
|
||||
url:"../server/index.php"
|
||||
});
|
||||
*/
|
||||
|
||||
/*upload({
|
||||
url: '../server/index.php',
|
||||
method: 'POST',
|
||||
data: {
|
||||
"token" : Identity.getToken(),
|
||||
"task" : "image",
|
||||
'action':'uploadImage',
|
||||
'id':'6564',
|
||||
"file_name": $scope.myFile, // a jqLite type="file" element, upload() will extract all the files from the input and put them into the FormData object before sending.
|
||||
}
|
||||
}).then(
|
||||
function (response) {
|
||||
console.log(response.data); // will output whatever you choose to return from the server on a successful upload
|
||||
},
|
||||
function (response) {
|
||||
console.error(response); // Will return if status code is above 200 and lower than 300, same as $http
|
||||
}
|
||||
);*/
|
||||
|
||||
|
||||
};
|
||||
|
||||
$scope.token = Identity.getToken();
|
||||
}]);
|
||||
|
|
@ -5,62 +5,63 @@
|
|||
* @param {$sce} $sce The $sce angular service
|
||||
* @param {$http} $http The $http angular service
|
||||
* @param {Identity} The Identity service
|
||||
|
||||
|
||||
*/
|
||||
mainApp.controller('loginCtrl', ['$scope','$sce','Identity', function ($scope,$sce, Identity)
|
||||
{
|
||||
// Check for login and define default states
|
||||
if(!Identity.isAlreadyLogin()){
|
||||
$('#loginModal').modal({backdrop: 'static', keyboard: false});
|
||||
}
|
||||
mainApp.controller('loginCtrl', ['$scope', '$sce', 'Identity', '$rootScope', function ($scope, $sce, Identity, $rootScope)
|
||||
{
|
||||
// Check for login and define default states
|
||||
if (!Identity.isAlreadyLogin()) {
|
||||
$('#loginModal').modal({backdrop: 'static', keyboard: false});
|
||||
}
|
||||
|
||||
// Manager logout event
|
||||
$scope.$on('logoutEvent', function(){
|
||||
$('#loginModal').modal({backdrop: 'static', keyboard: false});
|
||||
});
|
||||
// Manager logout event
|
||||
$scope.$on('logoutEvent', function () {
|
||||
$('#loginModal').modal({backdrop: 'static', keyboard: false});
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Hide loading button and message alert
|
||||
$('#loadingLoginButton').hide();
|
||||
$('#failedToLoginAlert').hide();
|
||||
|
||||
|
||||
// Defined function for login
|
||||
$scope.loginAction=function(){
|
||||
|
||||
// Begin login state for template
|
||||
$('#loginButton').hide();
|
||||
$('#loadingLoginButton').show();
|
||||
// Hide loading button and message alert
|
||||
$('#loadingLoginButton').hide();
|
||||
$('#failedToLoginAlert').hide();
|
||||
|
||||
// Get data from templates
|
||||
var username=$("#loginFormUsername").val();
|
||||
var password=$("#loginFormPassword").val();
|
||||
var projectname=$("#loginFormProjectname").val();
|
||||
|
||||
// Function to call to handle result
|
||||
var responseCallback=function(response){
|
||||
// Defined function for login
|
||||
$scope.loginAction = function () {
|
||||
|
||||
if(response.status!==0){
|
||||
// Set reason of fail
|
||||
$scope.failReason=response.failReason;
|
||||
// Begin login state for template
|
||||
$('#loginButton').hide();
|
||||
$('#loadingLoginButton').show();
|
||||
$('#failedToLoginAlert').hide();
|
||||
|
||||
// Display the error
|
||||
$('#failedToLoginAlert').show();
|
||||
}
|
||||
else {
|
||||
// Else the user is online !
|
||||
$('#loginModal').modal('hide');
|
||||
}
|
||||
// Get data from templates
|
||||
var username = $("#loginFormUsername").val();
|
||||
var password = $("#loginFormPassword").val();
|
||||
var projectname = $("#loginFormProjectname").val();
|
||||
|
||||
// Reset button state
|
||||
$('#loginButton').show();
|
||||
$('#loadingLoginButton').hide();
|
||||
}
|
||||
|
||||
// Try to login
|
||||
Identity.login(username, password, projectname, responseCallback);
|
||||
};
|
||||
|
||||
}]);
|
||||
// Function to call to handle result
|
||||
var responseCallback = function (response) {
|
||||
|
||||
if (response.status !== 0) {
|
||||
// Set reason of fail
|
||||
$scope.failReason = response.failReason;
|
||||
|
||||
// Display the error
|
||||
$('#failedToLoginAlert').show();
|
||||
} else {
|
||||
// Else the user is online !
|
||||
$('#loginModal').modal('hide');
|
||||
// Send login event
|
||||
$rootScope.$broadcast("loginEvent");
|
||||
}
|
||||
|
||||
// Reset button state
|
||||
$('#loginButton').show();
|
||||
$('#loadingLoginButton').hide();
|
||||
};
|
||||
|
||||
// Try to login
|
||||
Identity.login(username, password, projectname, responseCallback);
|
||||
};
|
||||
|
||||
}]);
|
||||
|
|
|
|||
|
|
@ -5,4 +5,5 @@
|
|||
*/
|
||||
mainApp.controller('networkCtrl', function ($scope)
|
||||
{
|
||||
|
||||
});
|
||||
|
|
@ -6,15 +6,14 @@
|
|||
* @param {$scope} $scope The $scope service from angular
|
||||
* @param {Identity} The Identity service
|
||||
*/
|
||||
mainApp.controller('statusCtrl', ['$scope','Identity', '$rootScope', function ($scope, Identity, $rootScope)
|
||||
{
|
||||
mainApp.controller('statusCtrl', ['$scope', 'Identity', '$rootScope', function ($scope, Identity, $rootScope)
|
||||
{
|
||||
// Give profile to model
|
||||
$scope.profile = Identity.getProfile();
|
||||
|
||||
// Give profile to model
|
||||
$scope.profile=Identity.getProfile();
|
||||
|
||||
// Function to logout
|
||||
$scope.logout=function(){
|
||||
Identity.logout();
|
||||
};
|
||||
// Function to logout
|
||||
$scope.logout = function () {
|
||||
Identity.logout();
|
||||
};
|
||||
|
||||
}]);
|
||||
}]);
|
||||
|
|
|
|||
|
|
@ -1,141 +1,140 @@
|
|||
|
||||
mainApp.factory('Compute',[ '$http', 'Identity', function($http, Identity){
|
||||
mainApp.factory('Compute', ['$http', 'Identity', function ($http, Identity) {
|
||||
|
||||
|
||||
// Init data
|
||||
var data={};
|
||||
data.machines=null;
|
||||
data.axioms={} // Contain static data
|
||||
data.axioms.ram=[128,512,1024,2048,4096];
|
||||
data.axioms.disk=[1,2,5,10,25,50,100,150,200]
|
||||
data.axioms.images={}; // Retrieve after
|
||||
|
||||
|
||||
/**
|
||||
* Parse pullMachines answer
|
||||
* @param {response} the server response
|
||||
* @param {boolean} false if the request as been send true else
|
||||
* @return {requestParserResult} the result of parsing
|
||||
*/
|
||||
var parsePullMachinesAnswer=function(response, failedToSendRequest){
|
||||
|
||||
// Defined return object
|
||||
var requestParserResult={};
|
||||
requestParserResult.status=1;
|
||||
requestParserResult.failReason=null;
|
||||
|
||||
|
||||
if (typeof response.data.Servers !== 'undefined') {
|
||||
// Set status code
|
||||
requestParserResult.status=0;
|
||||
data.machines=response.data.Servers;
|
||||
|
||||
}
|
||||
else if(failedToSendRequest){
|
||||
requestParserResult.failReason="Failed to send request";
|
||||
}
|
||||
else{
|
||||
requestParserResult.failReason="Error";
|
||||
}
|
||||
return requestParserResult;
|
||||
};
|
||||
// Init data
|
||||
var data = {};
|
||||
data.machines = null;
|
||||
data.axioms = {} // Contain static data
|
||||
data.axioms.ram = [128, 512, 1024, 2048, 4096];
|
||||
data.axioms.disk = [1, 2, 5, 10, 25, 50, 100, 150, 200]
|
||||
data.axioms.images = {}; // Retrieve after
|
||||
|
||||
|
||||
/**
|
||||
* Retrieve machine list
|
||||
* @param {callback} function to call after request complete
|
||||
*/
|
||||
var pullMachines=function(callback){
|
||||
// Send listServers request
|
||||
var result=$http.post('../server/index.php',
|
||||
$.param({"token" : Identity.getToken(), "task" : "compute", "action":"listServers"}));
|
||||
/**
|
||||
* Parse pullMachines answer
|
||||
* @param {response} the server response
|
||||
* @param {boolean} false if the request as been send true else
|
||||
* @return {requestParserResult} the result of parsing
|
||||
*/
|
||||
var parsePullMachinesAnswer = function (response, failedToSendRequest) {
|
||||
|
||||
// Wait and handle the response
|
||||
result.then(function (response){
|
||||
callback(parsePullMachinesAnswer(response, false));
|
||||
},function(response){
|
||||
callback(parsePullMachinesAnswer(response, true));
|
||||
});
|
||||
};
|
||||
// Defined return object
|
||||
var requestParserResult = {};
|
||||
requestParserResult.status = 1;
|
||||
requestParserResult.failReason = null;
|
||||
|
||||
|
||||
/**
|
||||
* Parse pullImages answer
|
||||
* @param {response} the server response
|
||||
* @param {boolean} false if the request as been send true else
|
||||
* @return {requestParserResult} the result of parsing
|
||||
*/
|
||||
var parsePullImagesAnswer=function(response, failedToSendRequest){
|
||||
if (typeof response.data.Servers !== 'undefined') {
|
||||
// Set status code
|
||||
requestParserResult.status = 0;
|
||||
data.machines = response.data.Servers;
|
||||
|
||||
// Defined return object
|
||||
var requestParserResult={};
|
||||
requestParserResult.status=1;
|
||||
requestParserResult.failReason=null;
|
||||
} else if (failedToSendRequest) {
|
||||
requestParserResult.failReason = "Failed to send PullMachine request";
|
||||
} else {
|
||||
requestParserResult.failReason = "Error";
|
||||
}
|
||||
return requestParserResult;
|
||||
};
|
||||
|
||||
|
||||
if (typeof response.data.Images !== 'undefined') {
|
||||
// Set status code
|
||||
requestParserResult.status=0;
|
||||
data.axioms.images=response.data.Images;
|
||||
}
|
||||
else if(failedToSendRequest){
|
||||
requestParserResult.failReason="Failed to send request";
|
||||
}
|
||||
else{
|
||||
requestParserResult.failReason="Error";
|
||||
}
|
||||
return requestParserResult;
|
||||
};
|
||||
|
||||
/**
|
||||
* Retrieve machine list
|
||||
* @param {callback} function to call after request complete
|
||||
*/
|
||||
var pullMachines = function (callback) {
|
||||
// Send listServers request
|
||||
var result = $http.post('../server/index.php',
|
||||
$.param({"token": Identity.getToken(), "task": "compute", "action": "listServers"}));
|
||||
|
||||
// Wait and handle the response
|
||||
result.then(function (response) {
|
||||
callback(parsePullMachinesAnswer(response, false));
|
||||
}, function (response) {
|
||||
callback(parsePullMachinesAnswer(response, true));
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Parse pullImages answer
|
||||
* @param {response} the server response
|
||||
* @param {boolean} false if the request as been send true else
|
||||
* @return {requestParserResult} the result of parsing
|
||||
*/
|
||||
var parsePullImagesAnswer = function (response, failedToSendRequest) {
|
||||
|
||||
// Defined return object
|
||||
var requestParserResult = {};
|
||||
requestParserResult.status = 1;
|
||||
requestParserResult.failReason = null;
|
||||
|
||||
|
||||
if (typeof response.data.Images !== 'undefined') {
|
||||
// Set status code
|
||||
requestParserResult.status = 0;
|
||||
data.axioms.images = response.data.Images;
|
||||
} else if (failedToSendRequest) {
|
||||
requestParserResult.failReason = "Failed to send PullImage request";
|
||||
} else {
|
||||
requestParserResult.failReason = "Error";
|
||||
}
|
||||
return requestParserResult;
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Retrieve machine list
|
||||
* @param {callback} function to call after request complete
|
||||
*/
|
||||
var pullImages=function(callback){
|
||||
// Send listServers request
|
||||
var result=$http.post('../server/index.php',
|
||||
$.param({"token" : Identity.getToken(), "task" : "compute", "action":"listImages"}));
|
||||
|
||||
// Wait and handle the response
|
||||
result.then(function (response){
|
||||
callback(parsePullImagesAnswer(response, false));
|
||||
},function(response){
|
||||
callback(parsePullImagesAnswer(response, true));
|
||||
});
|
||||
};
|
||||
/**
|
||||
* Retrieve machine list
|
||||
* @param {callback} function to call after request complete
|
||||
*/
|
||||
var pullImages = function (callback) {
|
||||
// Send listServers request
|
||||
var result = $http.post('../server/index.php',
|
||||
$.param({"token": Identity.getToken(), "task": "compute", "action": "listImages"}));
|
||||
|
||||
// Wait and handle the response
|
||||
result.then(function (response) {
|
||||
callback(parsePullImagesAnswer(response, false));
|
||||
}, function (response) {
|
||||
|
||||
callback(parsePullImagesAnswer(response, true));
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Retrieve all data
|
||||
* @param {callback} function to call after request complete
|
||||
*/
|
||||
var pullData=function(callback){
|
||||
var nextFunction=function(response){
|
||||
if(response.status==0){
|
||||
pullMachines(callback);
|
||||
}
|
||||
}
|
||||
pullImages(nextFunction);
|
||||
}
|
||||
/**
|
||||
* Retrieve all data
|
||||
* @param {callback} function to call after request complete
|
||||
*/
|
||||
var pullData = function (callback) {
|
||||
var nextFunction = function (response) {
|
||||
if (response.status == 0) {
|
||||
pullMachines(callback);
|
||||
} else {
|
||||
callback(response);
|
||||
}
|
||||
};
|
||||
pullImages(nextFunction);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Get Data
|
||||
* @return {data} return the data object
|
||||
*/
|
||||
var getData=function(){
|
||||
return data;
|
||||
}
|
||||
|
||||
// Return services objects
|
||||
return {
|
||||
pullMachines: pullMachines,
|
||||
pullData: pullData,
|
||||
getData: getData
|
||||
};
|
||||
/**
|
||||
* Get Data
|
||||
* @return {data} return the data object
|
||||
*/
|
||||
var getData = function () {
|
||||
return data;
|
||||
};
|
||||
|
||||
|
||||
}]);
|
||||
// Return services objects
|
||||
return {
|
||||
pullMachines: pullMachines,
|
||||
pullData: pullData,
|
||||
getData: getData
|
||||
};
|
||||
|
||||
|
||||
}]);
|
||||
|
|
|
|||
|
|
@ -1,163 +1,168 @@
|
|||
|
||||
mainApp.factory('Identity',[ '$http', '$cookies', function($http, $cookies){
|
||||
mainApp.factory('Identity', ['$http', '$cookies', '$rootScope', function ($http, $cookies, $rootScope) {
|
||||
|
||||
/* Create profile structure to store informations
|
||||
* about current session
|
||||
*/
|
||||
var profile={};
|
||||
profile.username=null;
|
||||
profile.projectname=null;
|
||||
var token=null;
|
||||
|
||||
|
||||
/*
|
||||
* @returns {boolean} Return true if a cookie is found (and load it in profile) false else
|
||||
*/
|
||||
var isAlreadyLogin=function(){
|
||||
|
||||
// Load cookies
|
||||
var profileInCookie=$cookies.getObject('profile');
|
||||
var tokenPart_0InCookie=$cookies.getObject('token.part_0');
|
||||
var tokenPart_1InCookie=$cookies.getObject('token.part_1');
|
||||
|
||||
|
||||
// Check if cookie is defined
|
||||
if(typeof profileInCookie !== 'undefined'
|
||||
&& typeof tokenPart_0InCookie !== 'undefined'
|
||||
&& typeof tokenPart_1InCookie !== 'undefined'
|
||||
){
|
||||
|
||||
// If yes, put it into variables
|
||||
angular.extend(profile, profileInCookie);
|
||||
token=tokenPart_0InCookie+tokenPart_1InCookie;
|
||||
|
||||
// Return I'm Login
|
||||
return true;
|
||||
}
|
||||
|
||||
// Return I'm not Login
|
||||
return false;
|
||||
}
|
||||
/* Create profile structure to store informations
|
||||
* about current session
|
||||
*/
|
||||
var profile = {};
|
||||
profile.username = null;
|
||||
profile.projectname = null;
|
||||
var token = null;
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Destroy profile cookies
|
||||
*/
|
||||
var logout=function(){
|
||||
$cookies.remove('profile');
|
||||
$cookies.remove('token.part_0');
|
||||
$cookies.remove('token.part_1');
|
||||
token=null;
|
||||
profile.username=null;
|
||||
profile.projectname=null;
|
||||
/*
|
||||
* @returns {boolean} Return true if a cookie is found (and load it in profile) false else
|
||||
*/
|
||||
var isAlreadyLogin = function () {
|
||||
|
||||
// Reload Page
|
||||
location.reload();
|
||||
}
|
||||
// Load cookies
|
||||
var profileInCookie = $cookies.getObject('profile');
|
||||
var tokenPart_0InCookie = $cookies.getObject('token.part_0');
|
||||
var tokenPart_1InCookie = $cookies.getObject('token.part_1');
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {string} response The response to parse
|
||||
* @param {boolean} to check if the request is send or not
|
||||
* @returns {requestParserResult} Formated data
|
||||
*/
|
||||
var parseLoginAnswer=function(response, failedToSendRequest){
|
||||
|
||||
// Defined return object
|
||||
var requestParserResult={};
|
||||
requestParserResult.status=1;
|
||||
requestParserResult.failReason=null;
|
||||
|
||||
if (typeof response.data.token !== 'undefined') {
|
||||
// Set status code
|
||||
requestParserResult.status=0;
|
||||
// Check if cookie is defined
|
||||
if (typeof profileInCookie !== 'undefined'
|
||||
&& typeof tokenPart_0InCookie !== 'undefined'
|
||||
&& typeof tokenPart_1InCookie !== 'undefined'
|
||||
) {
|
||||
|
||||
// Find the middle of the token to split it
|
||||
var middle=parseInt(response.data.token.length/2);
|
||||
//if(token!==null){
|
||||
// If yes, put it into variables
|
||||
angular.extend(profile, profileInCookie);
|
||||
token = tokenPart_0InCookie + tokenPart_1InCookie;
|
||||
//}
|
||||
|
||||
// Create expire date (cookie expire in 55 mins)
|
||||
var expireDate=new Date();
|
||||
expireDate.setMinutes(expireDate.getMinutes()+55);
|
||||
|
||||
// Save profile
|
||||
$cookies.putObject('profile', profile, {'expires': expireDate});
|
||||
// Save first part of token
|
||||
$cookies.putObject('token.part_0', response.data.token.substring(0, middle), {'expires': expireDate});
|
||||
// Save second part of token
|
||||
$cookies.putObject('token.part_1', response.data.token.substring(middle, response.data.token.length), {'expires': expireDate});
|
||||
// Return I'm Login
|
||||
return true;
|
||||
}
|
||||
|
||||
// Put token in var
|
||||
token=response.data.token;
|
||||
|
||||
}
|
||||
else if(failedToSendRequest){
|
||||
requestParserResult.failReason="Failed to send request";
|
||||
}
|
||||
else{
|
||||
requestParserResult.failReason="Please check your username, password and project name !";
|
||||
}
|
||||
// Show the login overlay
|
||||
$rootScope.$broadcast("logoutEvent");
|
||||
|
||||
|
||||
return requestParserResult;
|
||||
};
|
||||
// Return I'm not Login
|
||||
return false;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Function to connect to OpenStack
|
||||
*
|
||||
* @param {object} $http Angular $http service
|
||||
* @param {string} username The user name
|
||||
* @param {string} password The user password
|
||||
* @param {string} projectname The user project name
|
||||
* @param {function} function to call when data is avalaible
|
||||
*/
|
||||
var login=function(username, password,projectname,callback){
|
||||
|
||||
// Set profile information (early)
|
||||
profile.username=username;
|
||||
profile.projectname=projectname;
|
||||
|
||||
var result=$http.post('../server/index.php',
|
||||
$.param({"task" : "Authenticate", "user" : username, "password" : password, "project" : projectname}));
|
||||
|
||||
// Wait and handle the response
|
||||
result.then(function (response){
|
||||
callback(parseLoginAnswer(response, false));
|
||||
},function(response){
|
||||
callback(parseLoginAnswer(response, true));
|
||||
});
|
||||
};
|
||||
|
||||
/*
|
||||
* Destroy profile cookies
|
||||
*/
|
||||
var logout = function () {
|
||||
$cookies.remove('profile');
|
||||
$cookies.remove('token.part_0');
|
||||
$cookies.remove('token.part_1');
|
||||
token = null;
|
||||
profile.username = null;
|
||||
profile.projectname = null;
|
||||
|
||||
// Reload Page
|
||||
//location.reload();
|
||||
$rootScope.$broadcast("logoutEvent");
|
||||
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {string} response The response to parse
|
||||
* @param {boolean} to check if the request is send or not
|
||||
* @returns {requestParserResult} Formated data
|
||||
*/
|
||||
var parseLoginAnswer = function (response, failedToSendRequest) {
|
||||
|
||||
// Defined return object
|
||||
var requestParserResult = {};
|
||||
requestParserResult.status = 1;
|
||||
requestParserResult.failReason = null;
|
||||
|
||||
if (typeof response.data.token !== 'undefined') {
|
||||
// Set status code
|
||||
requestParserResult.status = 0;
|
||||
|
||||
// Find the middle of the token to split it
|
||||
var middle = parseInt(response.data.token.length / 2);
|
||||
|
||||
// Create expire date (cookie expire in 55 mins)
|
||||
var expireDate = new Date();
|
||||
expireDate.setMinutes(expireDate.getMinutes() + 55);
|
||||
|
||||
// Save profile
|
||||
$cookies.putObject('profile', profile, {'expires': expireDate});
|
||||
// Save first part of token
|
||||
$cookies.putObject('token.part_0', response.data.token.substring(0, middle), {'expires': expireDate});
|
||||
// Save second part of token
|
||||
$cookies.putObject('token.part_1', response.data.token.substring(middle, response.data.token.length), {'expires': expireDate});
|
||||
|
||||
// Put token in var
|
||||
token = response.data.token;
|
||||
|
||||
} else if (failedToSendRequest) {
|
||||
requestParserResult.failReason = "Failed to send request";
|
||||
} else {
|
||||
requestParserResult.failReason = "Please check your username, password and project name !";
|
||||
}
|
||||
|
||||
|
||||
return requestParserResult;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Function to connect to OpenStack
|
||||
*
|
||||
* @param {object} $http Angular $http service
|
||||
* @param {string} username The user name
|
||||
* @param {string} password The user password
|
||||
* @param {string} projectname The user project name
|
||||
* @param {function} function to call when data is avalaible
|
||||
*/
|
||||
var login = function (username, password, projectname, callback) {
|
||||
|
||||
// Set profile information (early)
|
||||
profile.username = username;
|
||||
profile.projectname = projectname;
|
||||
|
||||
var result = $http.post('../server/index.php',
|
||||
$.param({"task": "Authenticate", "user": username, "password": password, "project": projectname}));
|
||||
|
||||
// Wait and handle the response
|
||||
result.then(function (response) {
|
||||
callback(parseLoginAnswer(response, false));
|
||||
}, function (response) {
|
||||
callback(parseLoginAnswer(response, true));
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Get the profile
|
||||
*/
|
||||
var getProfile=function(){
|
||||
return profile;
|
||||
}
|
||||
|
||||
/*
|
||||
* Get the token
|
||||
*/
|
||||
var getToken=function(){
|
||||
return token;
|
||||
}
|
||||
/*
|
||||
* Get the profile
|
||||
*/
|
||||
var getProfile = function () {
|
||||
return profile;
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
* Get the token
|
||||
*/
|
||||
var getToken = function () {
|
||||
return token;
|
||||
};
|
||||
|
||||
// Return services objects
|
||||
return {
|
||||
login: login,
|
||||
getProfile: getProfile,
|
||||
isAlreadyLogin: isAlreadyLogin,
|
||||
logout:logout,
|
||||
getToken:getToken
|
||||
};
|
||||
|
||||
|
||||
}]);
|
||||
|
||||
// Return services objects
|
||||
return {
|
||||
login: login,
|
||||
getProfile: getProfile,
|
||||
isAlreadyLogin: isAlreadyLogin,
|
||||
logout: logout,
|
||||
getToken: getToken
|
||||
};
|
||||
|
||||
|
||||
}]);
|
||||
|
|
|
|||
|
|
@ -1,59 +1,114 @@
|
|||
|
||||
mainApp.factory('Image',[ '$http', 'Identity', function($http, Identity){
|
||||
mainApp.factory('Image', ['$http', 'Identity', function ($http, Identity) {
|
||||
|
||||
var data={};
|
||||
data.images=null;
|
||||
// Data object
|
||||
var data = {};
|
||||
data.images = null; // Images
|
||||
|
||||
/**
|
||||
* Parse uploadImage anwser
|
||||
* @param {type} response
|
||||
* @param {type} failedToSendRequest
|
||||
* @returns {Image_L2.parseUploadImageAnswer.requestParserResult}
|
||||
*/
|
||||
var parseUploadImageAnswer = function (response, failedToSendRequest) {
|
||||
|
||||
// Defined return object
|
||||
var requestParserResult = {};
|
||||
requestParserResult.status = 1;
|
||||
requestParserResult.failReason = null;
|
||||
|
||||
|
||||
var parseUploadImageAnswer=function(response, failedToSendRequest){
|
||||
if (typeof response.data.Images !== 'undefined') {
|
||||
// Set status code
|
||||
requestParserResult.status = 0;
|
||||
data.images = response.data.Images;
|
||||
|
||||
// Defined return object
|
||||
var requestParserResult={};
|
||||
requestParserResult.status=1;
|
||||
requestParserResult.failReason=null;
|
||||
|
||||
|
||||
if (typeof response.data.Images !== 'undefined') {
|
||||
// Set status code
|
||||
requestParserResult.status=0;
|
||||
data.images=response.data.Images;
|
||||
|
||||
}
|
||||
else if(failedToSendRequest){
|
||||
requestParserResult.failReason="Failed to send request";
|
||||
}
|
||||
else{
|
||||
requestParserResult.failReason="Error";
|
||||
}
|
||||
return requestParserResult;
|
||||
};
|
||||
} else if (failedToSendRequest) {
|
||||
requestParserResult.failReason = "Failed to send request";
|
||||
} else {
|
||||
requestParserResult.failReason = "Error";
|
||||
}
|
||||
return requestParserResult;
|
||||
};
|
||||
|
||||
|
||||
var getImages=function(callback){
|
||||
/**
|
||||
* Get images
|
||||
* @param {type} callback
|
||||
* @returns {undefined}
|
||||
*/
|
||||
var getImages = function (callback) {
|
||||
|
||||
var result=$http.post('../server/index.php',
|
||||
$.param({"token" : Identity.getToken(), "task" : "image", 'action':'listImage'}));
|
||||
var result = $http.post('../server/index.php',
|
||||
$.param({"token": Identity.getToken(), "task": "image", 'action': 'listImage'}));
|
||||
|
||||
// Wait and handle the response
|
||||
result.then(function (response){
|
||||
callback(parseUploadImageAnswer(response, false));
|
||||
},function(response){
|
||||
callback(parseUploadImageAnswer(response, true));
|
||||
});
|
||||
|
||||
|
||||
};
|
||||
// Wait and handle the response
|
||||
result.then(function (response) {
|
||||
callback(parseUploadImageAnswer(response, false));
|
||||
}, function (response) {
|
||||
callback(parseUploadImageAnswer(response, true));
|
||||
});
|
||||
|
||||
|
||||
var getData=function(response){
|
||||
return data;
|
||||
};
|
||||
|
||||
// Return services objects
|
||||
return {
|
||||
getImages:getImages,
|
||||
getData:getData
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
}]);
|
||||
/**
|
||||
* Upload an image
|
||||
* @param {type} fileToUpload
|
||||
* @param {type} callback
|
||||
* @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);
|
||||
|
||||
$.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");
|
||||
}
|
||||
});
|
||||
|
||||
//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));
|
||||
});*/
|
||||
};
|
||||
|
||||
|
||||
var getData = function (response) {
|
||||
return data;
|
||||
};
|
||||
|
||||
// Return services objects
|
||||
return {
|
||||
getImages: getImages,
|
||||
getData: getData,
|
||||
uploadImage: uploadImage
|
||||
};
|
||||
|
||||
|
||||
}]);
|
||||
|
|
|
|||
|
|
@ -1,23 +1,26 @@
|
|||
/**
|
||||
* Loading service
|
||||
* @param {type} param1
|
||||
* @param {type} param2
|
||||
*/
|
||||
mainApp.factory('Loading', [function () {
|
||||
/**
|
||||
* Display Loading modal
|
||||
*/
|
||||
var start = function () {
|
||||
$('#loadingModal').modal({backdrop: 'static', keyboard: false});
|
||||
};
|
||||
|
||||
mainApp.factory('Loading',[ function(){
|
||||
/**
|
||||
* Display Loading modal
|
||||
*/
|
||||
var start=function(){
|
||||
$('#loadingModal').modal({backdrop: 'static', keyboard: false});
|
||||
};
|
||||
/**
|
||||
* Hide Loading modal
|
||||
*/
|
||||
var stop = function () {
|
||||
$('#loadingModal').modal('hide');
|
||||
};
|
||||
|
||||
/**
|
||||
* Hide Loading modal
|
||||
*/
|
||||
var stop=function(){
|
||||
$('#loadingModal').modal('hide');
|
||||
}
|
||||
|
||||
|
||||
// Service returns
|
||||
return {
|
||||
start:start,
|
||||
stop:stop
|
||||
};
|
||||
}]);
|
||||
// Service returns
|
||||
return {
|
||||
start: start,
|
||||
stop: stop
|
||||
};
|
||||
}]);
|
||||
|
|
|
|||
29
client/js/services/Network.js
Normal file
29
client/js/services/Network.js
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
|
||||
mainApp.factory('Network', ['$http', 'Identity', function ($http, Identity) {
|
||||
|
||||
// Data object
|
||||
var data = {};
|
||||
data.networks = null; // Networks
|
||||
|
||||
/**
|
||||
* ListId
|
||||
* @param {type} fileToUpload
|
||||
* @param {type} callback
|
||||
* @returns {undefined}
|
||||
*/
|
||||
var ListId = function (fileToUpload, callback) {
|
||||
var result = $http.post('../server/index.php',
|
||||
$.param({"token": Identity.getToken(), "task": "network", 'action': 'list_network_ids'}));
|
||||
|
||||
// Wait and handle the response
|
||||
result.then(function (response) {
|
||||
callback(parseUploadImageAnswer(response, false));
|
||||
}, function (response) {
|
||||
callback(parseUploadImageAnswer(response, true));
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
}]);
|
||||
|
||||
|
||||
8
client/js/services/Test.js
Normal file
8
client/js/services/Test.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
var app = angular.module('mainApp',[]);
|
||||
app.controller('hassan', function($scope,$http){
|
||||
$http.get('http://127.0.0.1/database.json').success(function(response){
|
||||
$scope.persons = response.records;
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
8
client/partials/home/home.html
Normal file → Executable file
8
client/partials/home/home.html
Normal file → Executable file
|
|
@ -1,11 +1,11 @@
|
|||
<div class="panel panel-default">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
Home
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
|
||||
<div id="graphHolder"></div>
|
||||
Pour charger les machines, recharger la page (temporaire)<br />
|
||||
Selectionner une machine:
|
||||
<div ng-repeat="machine in machines"> <a ng-click="raiseShowMachineDetailsEvent(machine.id)"> {{ machine.name }}</a></div>
|
||||
Selectionner une machine:
|
||||
<div ng-repeat="machine in machines"> <a ng-click="raiseShowMachineDetailsEvent(machine.id)"> {{ machine.name }}</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,38 @@
|
|||
<div class="panel panel-default" ng-controller="imageCtrl">
|
||||
|
||||
|
||||
<div class="panel panel-default" ng-controller="imageCtrl">
|
||||
<div class="panel-heading">
|
||||
Images disponibles
|
||||
Image Manager
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div ng-repeat="image in images">
|
||||
{{image.name}}
|
||||
|
||||
|
||||
<div class="btn-group btn-group-md" role="group" aria-label="...">
|
||||
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#uploadImageModal"">Upload</button>
|
||||
<button type="button" class="btn btn-default">Download</button>
|
||||
</div>
|
||||
<p></p>
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Size</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="image in images">
|
||||
<td>{{ image.name }}</td>
|
||||
<td>{{ (image.size / 1048576).toFixed(2) }} MB</td>
|
||||
<td><button type="button" class="btn btn-danger">Remove</button></td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
31
client/partials/image/upload.html
Normal file
31
client/partials/image/upload.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<div class="modal fade" id="uploadImageModal" ng-controller="uploadImageCtrl">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content"></div>
|
||||
</div>
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>-->
|
||||
<h4 class="modal-title">Upload Image</h4>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
|
||||
<form action="../server/index.php" method="post">
|
||||
<input type="hidden" name="task" value="image" />
|
||||
<input type="hidden" name="token" value="{{ token }}" />
|
||||
<input type="hidden" name="action" value="uploadImage" />
|
||||
<input type="hidden" name="id" value="2564" />
|
||||
<input name="file" type="file" />
|
||||
<input type="submit" value="Upload" />
|
||||
</form>
|
||||
|
||||
<div class="modal-footer">
|
||||
<!--<a href="#" data-dismiss="modal" class="btn btn-default">Close</a>-->
|
||||
|
||||
<a class="btn btn-lg btn-primary btn-block" id="loginButton" ng-click="doUpload()">Upload</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
7
client/vendors/angularjs/angular-file-upload.min.js
vendored
Normal file
7
client/vendors/angularjs/angular-file-upload.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
client/vendors/angularjs/angular-upload.min.js
vendored
Normal file
1
client/vendors/angularjs/angular-upload.min.js
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
"use strict";angular.module("lr.upload",["lr.upload.formdata","lr.upload.iframe","lr.upload.directives"]),angular.module("lr.upload.directives",[]),angular.module("lr.upload.directives").directive("uploadButton",["upload",function(a){return{restrict:"EA",scope:{data:"=?data",url:"@",id:"@",param:"@",method:"@",onUpload:"&",onSuccess:"&",onError:"&",onComplete:"&"},link:function(b,c,d){var e=angular.element(c),f=angular.element('<input id="'+b.id+'" type="file" />');if(e.append(f),f.on("change",function(){var c=angular.element(this);if(!c[0].files||0!==c[0].files.length){var e={url:b.url,method:b.method||"POST",forceIFrameUpload:b.$eval(d.forceIframeUpload)||!1,data:b.data||{}};e.data[b.param||"file"]=c,b.$apply(function(){b.onUpload({files:c[0].files})}),a(e).then(function(a){b.onSuccess({response:a}),b.onComplete({response:a})},function(a){b.onError({response:a}),b.onComplete({response:a})})}}),"required"in d&&d.$observe("required",function(a){var d=""===a?!0:b.$eval(a);f.attr("required",d),c.toggleClass("ng-valid",!d),c.toggleClass("ng-invalid ng-invalid-required",d)}),"accept"in d&&d.$observe("accept",function(a){f.attr("accept",a)}),a.support.formData){var g=function(){f.attr("multiple",!(!b.$eval(d.multiple)||b.$eval(d.forceIframeUpload)))};d.$observe("multiple",g),d.$observe("forceIframeUpload",g)}}}}]),angular.module("lr.upload.formdata",[]).factory("formDataTransform",function(){return function(a){var b=new FormData;return angular.forEach(a,function(a,c){if(angular.isElement(a)){var d=[];angular.forEach(a,function(a){angular.forEach(a.files,function(a){d.push(a)}),a.value=""}),0!==d.length&&(d.length>1?angular.forEach(d,function(a,d){b.append(c+"["+d+"]",a)}):b.append(c,d[0]))}else b.append(c,a)}),b}}).factory("formDataUpload",["$http","formDataTransform",function(a,b){return function(c){return c.transformRequest=b,c.method=c.method||"POST",c.headers=angular.extend(c.headers||{},{"Content-Type":void 0}),a(c)}}]),angular.module("lr.upload.iframe",[]).factory("iFrameUpload",["$q","$http","$document","$rootScope",function(a,b,c,d){function e(a,b){if(a.indexOf)return a.indexOf(b);for(var c=0;c<a.length;c++)if(b===a[c])return c;return-1}function f(f){var g=[],h=a.defer(),i=h.promise;angular.forEach(f.data||{},function(a,b){angular.isElement(a)&&(delete f.data[b],a.attr("name",b),g.push(a))});var j=/\?/.test(f.url)?"&":"?";"DELETE"===f.method?(f.url=f.url+j+"_method=DELETE",f.method="POST"):"PUT"===f.method?(f.url=f.url+j+"_method=PUT",f.method="POST"):"PATCH"===f.method&&(f.url=f.url+j+"_method=PATCH",f.method="POST");var k=angular.element(c[0].body),l=d.$new(),m="iframe-transport-"+l.$id;l.$destroy();var n=angular.element("<form></form>");n.attr("target",m),n.attr("action",f.url),n.attr("method",f.method||"POST"),n.css("display","none"),g.length&&(n.attr("enctype","multipart/form-data"),n.attr("encoding","multipart/form-data"));var o=angular.element('<iframe name="'+m+'" src="javascript:false;"></iframe>');return o.on("load",function(){function a(a,b){var c=[];return angular.isFunction(b)?b(a,c):(angular.forEach(b,function(b){a=b(a,c)}),a)}function c(){var a=e(b.pendingRequests,f);-1!==a&&(b.pendingRequests.splice(a,1),f.$iframeTransportForm.remove(),delete f.$iframeTransportForm)}o.off("load").on("load",function(){var c;try{var d=this.contentWindow?this.contentWindow.document:this.contentDocument;if(c=angular.element(d.body).text(),!c.length)throw new Error}catch(e){}n.append(angular.element('<iframe src="javascript:false;"></iframe>'));try{c=a(c,b.defaults.transformResponse)}catch(e){}h.resolve({data:c,status:200,headers:[],config:f})}),angular.forEach(f.data,function(a,b){var c=angular.element('<input type="hidden" />');c.attr("name",b),c.val(a),n.append(c)}),angular.forEach(g,function(a){var b=a.clone(!0);a.after(b),n.append(a)}),f.$iframeTransportForm=n,b.pendingRequests.push(f),n[0].submit(),i.then(c,c)}),n.append(o),k.append(n),i}return f}]),angular.module("lr.upload").factory("upload",["$window","formDataUpload","iFrameUpload",function(a,b,c){function d(a){return e.formData&&!a.forceIFrameUpload?b(a):c(a)}var e={fileInput:!(new RegExp("(Android (1\\.[0156]|2\\.[01]))|(Windows Phone (OS 7|8\\.0))|(XBLWP)|(ZuneWP)|(WPDesktop)|(w(eb)?OSBrowser)|(webOS)|(Kindle/(1\\.0|2\\.[05]|3\\.0))").test(a.navigator.userAgent)||angular.element('<input type="file">').prop("disabled")),fileUpload:!(!a.XMLHttpRequestUpload||!a.FileReader),formData:!!a.FormData};return d.support=e,d}]);
|
||||
9
client/vendors/jquery/dmuploader.min.js
vendored
Normal file
9
client/vendors/jquery/dmuploader.min.js
vendored
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
/*
|
||||
* dmuploader.min.js - Jquery File Uploader - 0.1
|
||||
* http://www.daniel.com.uy/projects/jquery-file-uploader/
|
||||
*
|
||||
* Copyright (c) 2013 Daniel Morales
|
||||
* Dual licensed under the MIT and GPL licenses.
|
||||
* http://www.daniel.com.uy/doc/license/
|
||||
*/
|
||||
(function(t){var n="dmUploader";var r={url:document.URL,method:"POST",extraData:{},maxFileSize:0,allowedTypes:"*",extFilter:null,dataType:null,fileName:"file",onInit:function(){},onFallbackMode:function(){message},onNewFile:function(e,t){},onBeforeUpload:function(e){},onComplete:function(){},onUploadProgress:function(e,t){},onUploadSuccess:function(e,t){},onUploadError:function(e,t){},onFileTypeError:function(e){},onFileSizeError:function(e){},onFileExtError:function(e){}};var i=function(e,n){this.element=t(e);this.settings=t.extend({},r,n);if(!this.checkBrowser()){return false}this.init();return true};i.prototype.checkBrowser=function(){if(window.FormData===undefined){this.settings.onFallbackMode.call(this.element,"Browser doesn't support Form API");return false}if(this.element.find("input[type=file]").length>0){return true}if(!this.checkEvent("drop",this.element)||!this.checkEvent("dragstart",this.element)){this.settings.onFallbackMode.call(this.element,"Browser doesn't support Ajax Drag and Drop");return false}return true};i.prototype.checkEvent=function(e,t){var t=t||document.createElement("div");var e="on"+e;var n=e in t;if(!n){if(!t.setAttribute){t=document.createElement("div")}if(t.setAttribute&&t.removeAttribute){t.setAttribute(e,"");n=typeof t[e]=="function";if(typeof t[e]!="undefined"){t[e]=undefined}t.removeAttribute(e)}}t=null;return n};i.prototype.init=function(){var e=this;e.queue=new Array;e.queuePos=-1;e.queueRunning=false;e.element.on("drop",function(t){t.preventDefault();var n=t.originalEvent.dataTransfer.files;e.queueFiles(n)});e.element.find("input[type=file]").on("change",function(n){var r=n.target.files;e.queueFiles(r);t(this).val("")});this.settings.onInit.call(this.element)};i.prototype.queueFiles=function(e){var n=this.queue.length;for(var r=0;r<e.length;r++){var i=e[r];if(this.settings.maxFileSize>0&&i.size>this.settings.maxFileSize){this.settings.onFileSizeError.call(this.element,i);continue}if(this.settings.allowedTypes!="*"&&!i.type.match(this.settings.allowedTypes)){this.settings.onFileTypeError.call(this.element,i);continue}if(this.settings.extFilter!=null){var s=this.settings.extFilter.toLowerCase().split(";");var o=i.name.toLowerCase().split(".").pop();if(t.inArray(o,s)<0){this.settings.onFileExtError.call(this.element,i);continue}}this.queue.push(i);var u=this.queue.length-1;this.settings.onNewFile.call(this.element,u,i)}if(this.queueRunning){return false}if(this.queue.length==n){return false}this.processQueue();return true};i.prototype.processQueue=function(){var n=this;n.queuePos++;if(n.queuePos>=n.queue.length){n.settings.onComplete.call(n.element);n.queuePos=n.queue.length-1;n.queueRunning=false;return}var r=n.queue[n.queuePos];var i=new FormData;i.append(n.settings.fileName,r);n.settings.onBeforeUpload.call(n.element,n.queuePos);t.each(n.settings.extraData,function(e,t){i.append(e,t)});n.queueRunning=true;t.ajax({url:n.settings.url,type:n.settings.method,dataType:n.settings.dataType,data:i,cache:false,contentType:false,processData:false,forceSync:false,xhr:function(){var r=t.ajaxSettings.xhr();if(r.upload){r.upload.addEventListener("progress",function(t){var r=0;var i=t.loaded||t.position;var s=t.total||e.totalSize;if(t.lengthComputable){r=Math.ceil(i/s*100)}n.settings.onUploadProgress.call(n.element,n.queuePos,r)},false)}return r},success:function(e,t,r){n.settings.onUploadSuccess.call(n.element,n.queuePos,e)},error:function(e,t,r){n.settings.onUploadError.call(n.element,n.queuePos,r)},complete:function(e,t){n.processQueue()}})};t.fn.dmUploader=function(e){return this.each(function(){if(!t.data(this,n)){t.data(this,n,new i(this,e))}})};t(document).on("dragenter",function(e){e.stopPropagation();e.preventDefault()});t(document).on("dragover",function(e){e.stopPropagation();e.preventDefault()});t(document).on("drop",function(e){e.stopPropagation();e.preventDefault()})})(jQuery)
|
||||
Loading…
Add table
Add a link
Reference in a new issue