move gnuplot graph below table

[APKPM.git] / public / user.html

diff --git a/public/user.html b/public/user.html
index d604fff..46826be 100644 (file)
--- a/public/user.html
+++ b/public/user.html
@@ -71,25 +71,37 @@
                        return;
                }
 
-               self.message.gnuplot = 'redrawing '+h_cols.join(' ');
-
                var cols = [ 'timestamp' ];
                for ( var i = 0; i < h_cols.length; i++ ) {
                        cols.push( 'h->\'' + h_cols[i] + '\' as "' + h_cols[i] + '"' );
                }
-console.debug( cols );
                self.gnuplot.sql = 'select ' + cols.join(',') + ' from cpe_' + self.cpe.parser + ' where username = \'' + self.username + '\' order by timestamp desc limit 100';
-
-               $log.info( 'gnuplot', self.gnuplot );
-               self.gnuplot.img = '/gnuplot?hide=1;with=points;sql=' + self.gnuplot.sql;
-
+               $log.info( 'gnuplot', cols, self.gnuplot );
        };
+       self.$watch('gnuplot.sql', function() {
+               if ( ! self.gnuplot ) return;
+               self.message.gnuplot = self.gnuplot.cols.join(' ');
+               self.gnuplot.img = '/gnuplot?hide=1;with=points;sql=' + self.gnuplot.sql;
+       });
 
        self.r.table = $resource('/table/:table');
        self.table_update = function () {
                if ( ! self.username || ! self.cpe.table_name ) return;
+
+               self.message.ping = self.username+' loading';
+               self.r.table.get({ username: self.username, table: 'ping', limit: 1 }, function(ping) {
+                       $log.info('ping', ping);
+                       self.message.ping = null;
+                       var hash = {};
+                       for(var i = 0; i <= ping.columns.length; i++) {
+                               hash[ping.columns[i]] = ping.rows[0][i];
+                       }
+                       self.cpe.ping = hash;
+                       $log.info('ping hash', hash);
+               });
+
                self.message.table = self.username + ' loading from ' + self.cpe.table_name;
-               self.r.table.get({ username: self.username, table: self.cpe.table_name, limit: self.cpe.limit }, function(table) {
+               self.r.table.get({ username: self.username, table: self.cpe.table_name, limit: self.cpe_limit }, function(table) {
                        $log.info( 'table', table );
                        self.cpe.table = table;
                        self.message.table = null;
@@ -118,7 +130,8 @@ console.debug( cols );
                self.LDAP = null;
                self.selected_username = null;
                self.gnuplot = {};
-               self.cpe = { limit: 1 };
+               self.cpe = {};
+               self.cpe_limit = 1;
        };
 
        self.message = {};
@@ -128,9 +141,8 @@ console.debug( cols );
        });
 
        self.clear();
-       self.cpe_limit = self.cpe.limit;
        self.$watch('cpe_limit', function() {
-               $log.info( 'limit', self.cpe.limit = self.cpe_limit );
+               $log.info( 'cpe_limit', self.cpe_limit );
                self.table_update();
        });
 
@@ -177,28 +189,6 @@ angular.formatter('include', {
   </script>
 
 <style type="text/css">
-#columns {
-       float: right;
-       position: fixed;
-       top: 0;
-       right: 0;
-       z-index: 10;
-       background: #eee;
-}
-
-#columns > span {
-       float: right;
-}
-
-/*
-#columns ul {
-       display: none;
-}
-
-#columns:hover ul {
-       display: block;
-}A
-*/
 
 table {
        border-collapse:collapse;
@@ -245,6 +235,9 @@ th, td {
        float: right;
 }
 
+li > tt {
+       font-weight: bold;
+}
 
 </style>
 
@@ -252,7 +245,7 @@ th, td {
 
    <form ng:submit="CRM_search()">
     <label for="args">username:
-    <input type="text" name="search_username" placeholder="test" size="10" ng:required />
+    <input type="text" name="search_username" placeholder="test" size="10" autofocus ng:required />
     </label>
     <input type="submit" value="search in CRM">
     <input type="reset"  ng:click="clear()" value="clear">
@@ -293,24 +286,9 @@ th, td {
      <li ng:repeat="c in keys(LDAP)"><tt>{{c}}</tt> {{LDAP[0][c]}}</li>
     </ul>
 
-   <div class="panel_right" ng:show="cpe.table">
-    <label>
-     Graph columns
-     <input type=checkbox name=show_gnuplot_cols>
-    </label>
-    <ul ng:show="show_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>
-   </div>
-
-    <ng:include src="gnuplot.img" ng:show="gnuplot.img" onload="message.gnuplot = null" ></ng:include>
+    <div ng:show="cpe.ping">
+     ping <tt>{{cpe.ping.ip}}</tt> rtt <tt>{{cpe.ping.rtt}}</tt> at <tt>{{cpe.ping.timestamp}}</tt>
+    </div>
 
     <h2 ng:show="cpe.table_name">{{cpe.table_name}} {{username}}</h2>
 
@@ -333,6 +311,25 @@ th, td {
     </tr>
     </table>
 
+    <div class="panel_right" ng:show="cpe.table">
+     <label>
+      Graph columns
+      <input type=checkbox name=show_gnuplot_cols>
+     </label>
+     <ul ng:show="show_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>
+    </div>
+ 
+    <ng:include src="gnuplot.img" ng:show="gnuplot.img" onload="message.gnuplot = null" ></ng:include>
+
   </div>
 
     <input type=checkbox name=debug value=1>