WIP
Project: http://git-wip-us.apache.org/repos/asf/cloudstack/repo Commit: http://git-wip-us.apache.org/repos/asf/cloudstack/commit/0abfb3e9 Tree: http://git-wip-us.apache.org/repos/asf/cloudstack/tree/0abfb3e9 Diff: http://git-wip-us.apache.org/repos/asf/cloudstack/diff/0abfb3e9 Branch: refs/heads/ui-angularjs-test-concept Commit: 0abfb3e9583b76c74cbfc15c2313dd9292aadb40 Parents: 56684a5 Author: Brian Federle <brian.fede...@citrix.com> Authored: Thu Feb 27 15:57:23 2014 -0800 Committer: Brian Federle <brian.fede...@citrix.com> Committed: Thu Feb 27 16:03:33 2014 -0800 ---------------------------------------------------------------------- ui/cloudstack-angular/_list.html | 17 + ui/cloudstack-angular/app.js | 53 + ui/cloudstack-angular/cloudStack.js | 54 + ui/cloudstack-angular/index.html | 19 + ui/cloudstack-angular/lib/angular.js | 20874 +++++++++++++++++ .../lib/bootstrap/css/bootstrap-theme.css | 347 + .../lib/bootstrap/css/bootstrap-theme.css.map | 1 + .../lib/bootstrap/css/bootstrap-theme.min.css | 7 + .../lib/bootstrap/css/bootstrap.css | 5785 +++++ .../lib/bootstrap/css/bootstrap.css.map | 1 + .../lib/bootstrap/css/bootstrap.min.css | 7 + .../fonts/glyphicons-halflings-regular.eot | Bin 0 -> 20335 bytes .../fonts/glyphicons-halflings-regular.svg | 229 + .../fonts/glyphicons-halflings-regular.ttf | Bin 0 -> 41280 bytes .../fonts/glyphicons-halflings-regular.woff | Bin 0 -> 23320 bytes .../lib/bootstrap/js/bootstrap.js | 1951 ++ .../lib/bootstrap/js/bootstrap.min.js | 6 + ui/cloudstack-angular/lib/jquery.js | 9789 ++++++++ 18 files changed, 39140 insertions(+) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/cloudstack/blob/0abfb3e9/ui/cloudstack-angular/_list.html ---------------------------------------------------------------------- diff --git a/ui/cloudstack-angular/_list.html b/ui/cloudstack-angular/_list.html new file mode 100644 index 0000000..993c97f --- /dev/null +++ b/ui/cloudstack-angular/_list.html @@ -0,0 +1,17 @@ +<table class="table"> + <thead> + <tr> + <th ng-repeat="field in fields">{{ field.label }}</th> + <th class="actions">Actions</th> + </tr> + </thead> + <tbody class="table-striped"> + <tr ng-repeat="item in data" ng-class="{active: item.pending == true}"> + <td ng-class="field.id" ng-repeat="field in fields">{{ item[field.id] }}</td> + <td class="actions"> + <button ng-repeat="action in actions" + ng-click="action.action($parent.$index, item)">{{ action.label }}</button> + </td> + </tr> + </tbody> +</table> http://git-wip-us.apache.org/repos/asf/cloudstack/blob/0abfb3e9/ui/cloudstack-angular/app.js ---------------------------------------------------------------------- diff --git a/ui/cloudstack-angular/app.js b/ui/cloudstack-angular/app.js new file mode 100644 index 0000000..e594bac --- /dev/null +++ b/ui/cloudstack-angular/app.js @@ -0,0 +1,53 @@ +(function (cloudStack) { + var app = angular.module('cloudStack', []); + + app.directive('list', function () { + return { + restrict: 'E', + templateUrl: '_list.html', + replace: true, + controller: 'ListController' + }; + }); + + app.controller('ListController', function ($scope, $element) { + var section = $element.attr('path'); + var listView = cloudStack.sections[section].listView; + + $scope.fields = listView.fields; + $scope.actions = []; + $scope.data = []; + + // Load data + listView.dataProvider({ + response: { + success: function (args) { + $(args.data).each(function () { + $scope.data.push(this); + }); + } + } + }); + + // Build actions + for (action in listView.actions) { + var targetAction = listView.actions[action]; + + $scope.actions.push({ + id: targetAction.id, + label: targetAction.label, + action: function ($index) { + targetAction.action({ + response: { + success: function () { + if (targetAction.id == 'remove') { + $scope.data.splice($index, 1); + } + } + } + }) + } + }); + } + }) +}(window.cloudStack)); \ No newline at end of file http://git-wip-us.apache.org/repos/asf/cloudstack/blob/0abfb3e9/ui/cloudstack-angular/cloudStack.js ---------------------------------------------------------------------- diff --git a/ui/cloudstack-angular/cloudStack.js b/ui/cloudstack-angular/cloudStack.js new file mode 100644 index 0000000..9e4f0cc --- /dev/null +++ b/ui/cloudstack-angular/cloudStack.js @@ -0,0 +1,54 @@ +window.clientApiUrl = '/client/api'; +window.g_sessionKey = ''; + +// Login +$.ajax({ + type: 'POST', + url: clientApiUrl, + dataType: 'json', + async: false, + success: function(json) { + g_sessionKey = json.loginresponse.sessionkey; + }, + data: { + command: 'login', + domain: '/', + username: 'admin', + password: 'password', + response: 'json' + } +}); + +// Dummy app structure +window.cloudStack = { + sections: { + instances: { + listView: { + fields: [ + { id: 'name', label: 'Name' }, + { id: 'zone', label: 'Zone' }, + { id: 'state', label: 'State' } + ], + actions: [ + { + id: 'remove', label: 'X', + action: function(args) { + args.response.success(); + } + } + ], + dataProvider: function(args) { + $.ajax({ + url: createURL('listVirtualMachines'), + dataType: 'json', + success: function(json) { + args.response.success({ + data: json.listvirtualmachinesresponse.virtualmachine + }); + } + }) + } + } + } + } +}; http://git-wip-us.apache.org/repos/asf/cloudstack/blob/0abfb3e9/ui/cloudstack-angular/index.html ---------------------------------------------------------------------- diff --git a/ui/cloudstack-angular/index.html b/ui/cloudstack-angular/index.html new file mode 100644 index 0000000..dd4cdb8 --- /dev/null +++ b/ui/cloudstack-angular/index.html @@ -0,0 +1,19 @@ +<!doctype html> +<html> +<head> + <title>AngularJS Tutorial</title> + <link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet" /> +</head> +<body> +<div ng-app="cloudStack"> + <list path="instances"></list> +</div> + +<script>window.cloudStack = {};</script> +<script src="lib/jquery.js"></script> +<script src="../scripts/sharedFunctions.js"></script> +<script src="cloudStack.js"></script> +<script src="lib/angular.js"></script> +<script src="app.js"></script> +</body> +</html>
