GUI - Angular:: More sample code; this time, filters.
Change-Id: I03a98d3d6e54426a2a67d662e9bc887fa1ce7170
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch08-01-filter-example.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch08-01-filter-example.html
new file mode 100644
index 0000000..105209c
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch08-01-filter-example.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Filters in Action</title>
+ <script src="../../tp/angular.js"></script>
+</head>
+<body ng-app="filtersApp">
+
+ <div ng-controller="FilterCtrl as ctrl">
+ <div>
+ Amount as a number: {{ctrl.amount | number}}
+ </div>
+ <div>
+ Total cost as a currency: {{ctrl.totalCost | currency}}
+ </div>
+ <div>
+ Total cost in GBP: {{ctrl.totalCost | currency:'GBP '}}
+ </div>
+ <div>
+ Shout: {{ctrl.name | uppercase}}
+ </div>
+ <div>
+ Whisper: {{ctrl.name | lowercase}}
+ </div>
+ <div>
+ Start time: {{ctrl.startTime | date:'medium'}}
+ </div>
+ <div>
+ as JSON: {{ctrl.struct | json}}
+ </div>
+ </div>
+
+ <script type="text/javascript">
+ angular.module('filtersApp', [])
+ .controller('FilterCtrl', [function () {
+ var self = this;
+ self.amount = 1024;
+ self.totalCost = 4906;
+ self.name = 'Onos Rocks!';
+ self.startTime = new Date().getTime();
+ self.struct = {
+ foo: 'bar',
+ baz: 3.1415
+ };
+ }]);
+ </script>
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch08-02-filter-number-string.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch08-02-filter-number-string.html
new file mode 100644
index 0000000..46e9c4d
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch08-02-filter-number-string.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Filters in Action</title>
+ <script src="../../tp/angular.js"></script>
+</head>
+<body ng-app="filtersApp">
+
+ <ul ng-controller="FilterCtrl as ctrl">
+ <li>
+ Amount - {{ctrl.amount}}
+ </li>
+ <li>
+ Amount - Default Currency: {{ctrl.amount | currency}}
+ </li>
+ <li>
+ <!-- Using English pound sign -->
+ Amount - GBP Currency: {{ctrl.amount | currency:'£'}}
+ </li>
+ <li>
+ Amount - Number: {{ctrl.amount | number }}
+ </li>
+ <li>
+ Amount - Number (4 decimals): {{ctrl.amount | number:4}}
+ </li>
+ <li>
+ Amount - Yummy π = {{ctrl.pi | number:4 }}
+ </li>
+
+ <li>
+ Name - no filters: {{ctrl.name}}
+ </li>
+ <li>
+ Name - lowercase: {{ctrl.name | lowercase}}
+ </li>
+ <li>
+ Name - uppercase: {{ctrl.name | uppercase}}
+ </li>
+ <li>
+ Name - prefix: {{ctrl.name | limitTo:4}}
+ </li>
+
+ <li>
+ JSON filter: {{ctrl.struct | json}}
+ </li>
+
+ <li>
+ Timestamp: {{ctrl.startTime}}
+ </li>
+ <li>
+ Default Date filter: {{ctrl.startTime | date}}
+ </li>
+ <li>
+ Medium Date filter: {{ctrl.startTime | date:'medium'}}
+ </li>
+ <li>
+ Long Date filter: {{ctrl.startTime | date:'longDate'}}
+ </li>
+ <li>
+ Custom Date filter: {{ctrl.startTime | date:'M/dd, yyyy'}}
+ </li>
+ <li>
+ Custom Time filter: {{ctrl.startTime | date:'h:m a'}}
+ </li>
+ </ul>
+
+ <script type="text/javascript">
+ angular.module('filtersApp', [])
+ .controller('FilterCtrl', [function () {
+ var self = this;
+ self.amount = 1024;
+ self.totalCost = 4906;
+ self.name = 'Onos Rocks!';
+ self.startTime = new Date().getTime();
+ self.struct = {
+ foo: 'bar',
+ baz: 3.1415
+ };
+ self.pi = Math.PI;
+ }]);
+ </script>
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch08-03-filter-arrays.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch08-03-filter-arrays.html
new file mode 100644
index 0000000..a9ce3ca
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch08-03-filter-arrays.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Filters in Action</title>
+ <script src="../../tp/angular.js"></script>
+</head>
+<body ng-app="filtersApp">
+
+ <div ng-controller="FilterCtrl as ctrl">
+
+ <table>
+ <tr>
+ <td>
+ <button ng-click="ctrl.currentFilter = 'string'">
+ Filter with string
+ </button>
+ </td>
+ <td>
+ Filter Text
+ <input type="text"
+ ng-model="ctrl.filterOptions['string']"/>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <button ng-click="ctrl.currentFilter = 'object'">
+ Filter with object
+ </button>
+ </td>
+ <td>
+ Show Done or Not Done
+ <input type="checkbox"
+ ng-model="ctrl.filterOptions['object'].done"/>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <button ng-click="ctrl.currentFilter = 'function'">
+ Filter with function
+ </button>
+ </td>
+ </tr>
+ </table>
+ <ul>
+ <li ng-repeat="note in ctrl.notes |
+ filter:ctrl.filterOptions[ctrl.currentFilter] |
+ orderBy:ctrl.sortOrder |
+ limitTo:5">
+ {{note.label}} - {{note.type}} - {{note.done}}
+ </li>
+ </ul>
+ </div>
+
+
+ <script type="text/javascript">
+ angular.module('filtersApp', [])
+ .controller('FilterCtrl', [function () {
+ var self = this;
+
+ self.notes = [
+ {label: 'FC Todo', type: 'chore', done: false},
+ {label: 'FT Todo', type: 'task', done: false},
+ {label: 'FF Todo', type: 'fun', done: true},
+ {label: 'SC Todo', type: 'chore', done: false},
+ {label: 'ST Todo', type: 'task', done: true},
+ {label: 'SF Todo', type: 'fun', done: true},
+ {label: 'TC Todo', type: 'chore', done: false},
+ {label: 'TT Todo', type: 'task', done: false},
+ {label: 'TF Todo', type: 'fun', done: false}
+ ];
+
+ self.sortOrder = ['+type', '-label'];
+
+ self.filterOptions = {
+ 'string': '',
+ 'object': {done: false, label: 'F'},
+ 'function': function (note) {
+ return note.type === 'task' && note.done === false;
+ }
+ };
+
+ self.currentFilter = 'string';
+ }]);
+ </script>
+</body>
+</html>
diff --git a/web/gui/src/main/webapp/_sdh/ng-examples/ch08-04-custom-filters.html b/web/gui/src/main/webapp/_sdh/ng-examples/ch08-04-custom-filters.html
new file mode 100644
index 0000000..f39991d
--- /dev/null
+++ b/web/gui/src/main/webapp/_sdh/ng-examples/ch08-04-custom-filters.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Custom Filters in Action</title>
+ <script src="../../tp/angular.js"></script>
+</head>
+<body ng-app="filtersApp">
+
+ <div ng-controller="FilterCtrl as ctrl">
+ <div>
+ Start time (Timestamp): {{ctrl.startTime}}
+ </div>
+ <div>
+ Start time (Time): {{ctrl.startTime | date:'h:m a'}}
+ </div>
+ <div>
+ Start time (Our filter): {{ctrl.startTime | timeAgo}}
+ </div>
+ <div>
+ Start time (Our filter 2): {{ctrl.startTime | timeAgo:true}}
+ </div>
+ <div>
+ Some time ago (Computed): {{ctrl.someTimeAgo | date:'h:m a'}}
+ </div>
+ <div>
+ Some time ago (Our filter): {{ctrl.someTimeAgo | timeAgo}}
+ </div>
+ </div>
+
+ <script type="text/javascript">
+ angular.module('filtersApp', [])
+ .controller('FilterCtrl', [function () {
+ var self = this;
+ self.startTime = new Date().getTime();
+ self.someTimeAgo = self.startTime - (1000*3600*4);
+ }])
+ .filter('timeAgo', [function () {
+ var _m = 1000 * 60,
+ _h = _m * 60,
+ _d = _h * 24,
+ _mon = _d * 30;
+
+ return function (ts, ignoreSecs) {
+ var now = new Date().getTime(),
+ diff = now - ts;
+ if (diff < _m && !ignoreSecs) {
+ return 'seconds ago';
+ } else if (diff < _h) {
+ return 'minutes ago';
+ } else if (diff < _d) {
+ return 'hours ago';
+ } else if (diff < _mon) {
+ return 'days ago';
+ } else {
+ return 'months ago';
+ }
+ }
+ }]);
+ </script>
+</body>
+</html>