use checkboxes to select gnuplot columns

diff --git a/public/user.html b/public/user.html
index f19f84b..821c634 100644 (file)
--- a/public/user.html
+++ b/public/user.html
@@ -42,8 +42,12 @@
                self.r.LDAP_search.query({ username: username }, function(LDAP) {
                        self.LDAP = LDAP;
                        $log.info( 'LDAP', LDAP );
+                       if ( self.LDAP.length == 0 ) {
+                               $log.error( 'no LDAP results for', username );
+                               return;
+                       }
                        self.cpe.parser = LDAP[0]._cpe_parser;
-                       self.cpe.table  = 'cpe_' + LDAP[0]._cpe_parser;
+                       self.cpe.table_name  = 'cpe_' + LDAP[0]._cpe_parser;
                        self.username = LDAP[0].cn;
                        $log.info( 'cpe', self.cpe );
                });
@@ -67,11 +71,10 @@ console.debug( cols );
 
        self.r.table = $resource('/table/:table');
        self.table_update = function () {
-               if ( ! self.username || ! self.cpe.table ) return;
-               self.r.table.get({ username: self.username, table: self.cpe.table, limit: self.cpe.limit }, function(table) {
+               if ( ! self.username || ! self.cpe.table_name ) return;
+               self.r.table.get({ username: self.username, table: self.cpe.table_name, limit: self.cpe.limit }, function(table) {
                        $log.info( 'table', table );
-                       self.cpe.rows = table.rows;
-                       self.cpe.columns = table.columns;
+                       self.cpe.table = table;
 
                        if ( h_cols = self.cpe_hash[self.cpe.parser] ) {
                                self.gnuplot_draw( h_cols );
@@ -137,6 +140,18 @@ console.debug( cols );
     }
 
     user.$inject = ['$xhr','$resource','$log'];
+
+// http://jsfiddle.net/gronky/cLEck/
+angular.formatter('include', {
+    parse: function(apply, value, list) {
+        angular.Array[apply ? 'add' : 'remove'](list, value);
+        return apply;
+    },
+    format: function(apply, value, list) {
+        return angular.Array.indexOf(list, value) != -1;
+    },
+});
+
   </script>
 
 <style type="text/css">
@@ -185,6 +200,17 @@ th, td {
        position: fixed;
 }
 
+#gnuplot_cols {
+       float: right;
+       background: #eee;
+       padding: 0.5em;
+}
+
+#gnuplot_cols li {
+       list-style-type: none;
+}
+       
+
 </style>
 
   <div ng:controller="user">
@@ -226,18 +252,30 @@ th, td {
      <li ng:repeat="c in keys(LDAP)"><tt>{{c}}</tt> {{LDAP[0][c]}}</li>
     </ul>
 
+    <ul ng:show="cpe.table" id="gnuplot_cols">
+     <input type=button ng:click="gnuplot_draw(gnuplot.cols)" value="Redraw graph">
+     <li ng:repeat="(k,v) in cpe.table.rows[0][cpe.table.hash_col]">
+        <label>
+        <input type="checkbox" name="gnuplot_cols" ng:format="include:k:gnuplot.cols" ng:change="$log.debug(gnuplot_cols)">
+       {{k}} <tt>{{v}}</tt>
+        </label>
+     </li>
+     <input type=button ng:click="gnuplot_draw(gnuplot.cols)" value="Redraw graph">
+    </ul>
+
     <ng:include src="gnuplot.img" ng:show="gnuplot.img" onload="message = 'done'" ></ng:include>
 
-    <h2 ng:show="cpe.table">{{cpe.table}} {{username}}</h2>
-    <table ng:show="cpe.rows">
+    <h2 ng:show="cpe.table_name">{{cpe.table_name}} {{username}}</h2>
+
+    <table ng:show="cpe.table">
      <tr>
-      <th ng:repeat="c in cpe.columns">{{c}}</th>
+      <th ng:repeat="c in cpe.table.columns">{{c}}</th>
      </tr>
-     <tr ng:repeat="r in cpe.rows" ng:class-even="'zebra'">
+     <tr ng:repeat="r in cpe.table.rows" ng:class-even="'zebra'">
       <td ng:repeat="v in r">{{v}}</td>
      </tr>
      <tr>
-      <td colspan="{{cpe.columns.length}}">
+      <td colspan="{{cpe.table.columns.length}}">
       limit:
        <label>1<input name="cpe_limit" type="radio" value=1></label>
        &middot; &middot; &middot;