display cpe_* tables and select limit via radio button
authorDobrica Pavlinusic <dpavlin@rot13.org>
Sun, 10 Jul 2011 17:19:07 +0000 (19:19 +0200)
committerDobrica Pavlinusic <dpavlin@rot13.org>
Sun, 10 Jul 2011 17:19:07 +0000 (19:19 +0200)
public/user.html

index 8771f4a..f19f84b 100644 (file)
@@ -1,6 +1,6 @@
 <!doctype html>
 <html xmlns:ng="http://angularjs.org">
- <script src="http://code.angularjs.org/angular-0.9.12.min.js" ng:autobind></script>
+ <script src="http://code.angularjs.org/angular-0.9.17.min.js" ng:autobind></script>
  <body>
   <script>
     function user($xhr,$resource,$log) {
                        return;
                }
                $log.info( 'LDAP_search', username );
+               self.clear_LDAP();
                self.selected_username = username;
-               self.LDAP = {};
-               self.cpe = {};
-               self.gnuplot = {};
                self.r.LDAP_search.query({ username: username }, function(LDAP) {
                        self.LDAP = LDAP;
                        $log.info( 'LDAP', LDAP );
-                       self.cpe = {
-                               parser: LDAP[0]._cpe_parser,
-                               table: 'cpe_' + LDAP[0]._cpe_parser,
-                       };
+                       self.cpe.parser = LDAP[0]._cpe_parser;
+                       self.cpe.table  = 'cpe_' + LDAP[0]._cpe_parser;
                        self.username = LDAP[0].cn;
                        $log.info( 'cpe', self.cpe );
                });
@@ -70,11 +66,12 @@ console.debug( cols );
        };
 
        self.r.table = $resource('/table/:table');
-       self.$watch('username', function() {
+       self.table_update = function () {
                if ( ! self.username || ! self.cpe.table ) return;
-               self.r.table.get({ username: self.username, table: self.cpe.table }, function(table) {
+               self.r.table.get({ username: self.username, table: self.cpe.table, limit: self.cpe.limit }, function(table) {
                        $log.info( 'table', table );
                        self.cpe.rows = table.rows;
+                       self.cpe.columns = table.columns;
 
                        if ( h_cols = self.cpe_hash[self.cpe.parser] ) {
                                self.gnuplot_draw( h_cols );
@@ -82,16 +79,34 @@ console.debug( cols );
                                self.message = 'no graph defined for ' + self.cpe.parser;
                        }
                });
-       });
+       };
+       self.$watch('username', self.table_update );
  
-      this.clear = function() {
-       self.CRM = null;
-       self.LDAP = null;
-       self.selected_username = null;
-       self.gnuplot = {};
-       self.cpe = {};
-       self.message = null;
-      };
+       this.clear = function() {
+               $log.info('clear');
+               self.CRM = null;
+               this.clear_LDAP;
+       }
+
+       this.clear_LDAP = function() {
+               $log.info('clear_LDAP');
+               self.LDAP = null;
+               self.selected_username = null;
+               self.gnuplot = {};
+               self.cpe = { limit: 1 };
+               self.message = null;
+       };
+
+       self.$watch('selected_username', function() {
+               if ( self.selected_username == null ) self.clear_LDAP();
+       });
+
+       self.clear();
+       self.cpe_limit = self.cpe.limit;
+       self.$watch('cpe_limit', function() {
+               $log.info( 'limit', self.cpe.limit = self.cpe_limit );
+               self.table_update();
+       });
 
        this.columns = [
                'USERNAME',
@@ -214,9 +229,24 @@ th, td {
     <ng:include src="gnuplot.img" ng:show="gnuplot.img" onload="message = 'done'" ></ng:include>
 
     <h2 ng:show="cpe.table">{{cpe.table}} {{username}}</h2>
-    <div ng:show="cpe.rows">
-     <pre>{{cpe.rows[0]}}</pre>
-    </div>
+    <table ng:show="cpe.rows">
+     <tr>
+      <th ng:repeat="c in cpe.columns">{{c}}</th>
+     </tr>
+     <tr ng:repeat="r in cpe.rows" ng:class-even="'zebra'">
+      <td ng:repeat="v in r">{{v}}</td>
+     </tr>
+     <tr>
+      <td colspan="{{cpe.columns.length}}">
+      limit:
+       <label>1<input name="cpe_limit" type="radio" value=1></label>
+       &middot; &middot; &middot;
+       <label>5<input name="cpe_limit" type="radio" value=5></label>
+       &middot; &middot; &middot;
+       <label>10<input name="cpe_limit" type="radio" value=10></label>
+      </td>
+    </tr>
+    </table>
 
   </div>