public/user.html

   1 <!doctype html>
   2 <html xmlns:ng="http://angularjs.org">
   3  <script src="http://code.angularjs.org/angular-0.9.17.min.js" ng:autobind></script>
   4  <body>
   5   <script>
   6     function user($xhr,$resource,$log) {
   7         var self = this;
   8
   9         self.r = {};
  10
  11         self.r.CRM_search = $resource('/g/CRM_search/:username', {username:'@search_username'});
  12         self.CRM_search = function(username) {
  13                 if ( ! username ) username = self.search_username;
  14                 $log.info( 'CRM_search', username );
  15                 self.clear();
  16                 self.r.CRM_search.query({username: username}, function(CRM) {
  17                         self.CRM = CRM;
  18                         $log.info( 'CRM', CRM )
  19                         if ( CRM.length == 1 ) {
  20                                 self.selected_username = CRM[0].USERNAME;
  21                                 $log.info( 'auto-selected', self.selected_username );
  22                         }
  23                 });
  24         };
  25
  26         self.r.LDAP_search = $resource('/g/LDAP_search/:username', {username:'@selected_username'});
  27         self.LDAP_search = function(username) {
  28                 if ( self.selected_username == username ) {
  29                         $log.error("LDAP_search - not changed", username);
  30                         return;
  31                 }
  32
  33                 if ( ! username ) username = self.selected_username;
  34
  35                 if ( ! username ) {
  36                         $log.error( 'no username for LDAP_search' );
  37                         return;
  38                 }
  39                 $log.info( 'LDAP_search', username );
  40                 self.clear_LDAP();
  41                 self.selected_username = username;
  42                 self.r.LDAP_search.query({ username: username }, function(LDAP) {
  43                         self.LDAP = LDAP;
  44                         $log.info( 'LDAP', LDAP );
  45                         if ( self.LDAP.length == 0 ) {
  46                                 $log.error( 'no LDAP results for', username );
  47                                 return;
  48                         }
  49                         self.cpe.parser = LDAP[0]._cpe_parser;
  50                         self.cpe.table_name  = 'cpe_' + LDAP[0]._cpe_parser;
  51                         self.username = LDAP[0].cn;
  52                         $log.info( 'cpe', self.cpe );
  53                 });
  54         };
  55         self.$watch('selected_username', self.LDAP_search );
  56
  57         self.gnuplot_draw = function(h_cols) {
  58                 $log.info( 'gnuplot_draw', h_cols );
  59                 if (h_cols) self.gnuplot.cols = h_cols;
  60                 var cols = [ 'timestamp' ];
  61                 for ( var i = 0; i < h_cols.length; i++ ) {
  62                         cols.push( 'h->\'' + h_cols[i] + '\' as "' + h_cols[i] + '"' );
  63                 }
  64 console.debug( cols );
  65                 self.gnuplot.sql = 'select ' + cols.join(',') + ' from cpe_' + self.cpe.parser + ' where username = \'' + self.username + '\' order by timestamp desc limit 100';
  66
  67                 $log.info( 'gnuplot', self.gnuplot );
  68                 self.gnuplot.img = '/gnuplot?hide=1;with=points;sql=' + self.gnuplot.sql;
  69
  70         };
  71
  72         self.r.table = $resource('/table/:table');
  73         self.table_update = function () {
  74                 if ( ! self.username || ! self.cpe.table_name ) return;
  75                 self.r.table.get({ username: self.username, table: self.cpe.table_name, limit: self.cpe.limit }, function(table) {
  76                         $log.info( 'table', table );
  77                         self.cpe.table = table;
  78
  79                         if ( h_cols = self.cpe_hash[self.cpe.parser] ) {
  80                                 self.gnuplot_draw( h_cols );
  81                         } else {
  82                                 self.message = 'no graph defined for ' + self.cpe.parser;
  83                         }
  84                 });
  85         };
  86         self.$watch('username', self.table_update );
  87
  88         this.clear = function() {
  89                 $log.info('clear');
  90                 self.CRM = null;
  91                 this.clear_LDAP();
  92         }
  93
  94         this.clear_LDAP = function() {
  95                 $log.info('clear_LDAP');
  96                 self.LDAP = null;
  97                 self.selected_username = null;
  98                 self.gnuplot = {};
  99                 self.cpe = { limit: 1 };
 100                 self.message = null;
 101         };
 102
 103         self.$watch('selected_username', function() {
 104                 if ( self.selected_username == null ) self.clear_LDAP();
 105         });
 106
 107         self.clear();
 108         self.cpe_limit = self.cpe.limit;
 109         self.$watch('cpe_limit', function() {
 110                 $log.info( 'limit', self.cpe.limit = self.cpe_limit );
 111                 self.table_update();
 112         });
 113
 114         this.columns = [
 115                 'USERNAME',
 116                 'BROJ',
 117                 'USLUGA',
 118                 'IP_MANAGEMENT',
 119                 'IP_VOICE',
 120                 'KOLOKACIJA',
 121                 'OPT82'
 122         ];
 123
 124         this.cpe_hash = {
 125                 'Davolink': [ 'Max_down', 'Max_up' ],
 126 //              'Davolink': [ 'select timestamp,h->\'Max_down\' as Max_down,h->\'Max_up\' as Max_up from cpe_Davolink where username = \'', '\' order by timestamp desc limit 100' ],
 127 //              'EasyGateway':
 128         };
 129
 130       this.keys = function(h) {
 131              if ( angular.isArray(h) ) h = h[0];
 132              var keys = [];
 133              for(i in h) if (h.hasOwnProperty(i))
 134              {
 135                keys.push(i);
 136              }
 137              return keys;
 138       };
 139
 140     }
 141
 142     user.$inject = ['$xhr','$resource','$log'];
 143
 144 // http://jsfiddle.net/gronky/cLEck/
 145 angular.formatter('include', {
 146     parse: function(apply, value, list) {
 147         angular.Array[apply ? 'add' : 'remove'](list, value);
 148         return apply;
 149     },
 150     format: function(apply, value, list) {
 151         return angular.Array.indexOf(list, value) != -1;
 152     },
 153 });
 154
 155   </script>
 156
 157 <style type="text/css">
 158 #columns {
 159         position: fixed;
 160         top: 0;
 161         right: 0;
 162         z-index: 10;
 163         background: #eee;
 164 }
 165
 166 #columns > span {
 167         float: right;
 168 }
 169
 170 #columns ul {
 171         display: none;
 172 }
 173
 174 #columns:hover ul {
 175         display: block;
 176 }
 177
 178 table {
 179         border-collapse:collapse;
 180 }
 181
 182 th {
 183         border-bottom: 2px solid gray;
 184 }
 185
 186 th, td {
 187         border-left: 1em solid white;
 188         border-right: 1em solid white;
 189 }
 190
 191 .zebra {
 192         background: #eee;
 193 }
 194
 195 #message {
 196         padding: 3px;
 197         background: #ff8;
 198
 199         margin-left: 1em;
 200         position: fixed;
 201 }
 202
 203 #gnuplot_cols {
 204         float: right;
 205         background: #eee;
 206         padding: 0.5em;
 207 }
 208
 209 #gnuplot_cols li {
 210         list-style-type: none;
 211 }
 212
 213
 214 </style>
 215
 216   <div ng:controller="user">
 217
 218    <form ng:submit="CRM_search()">
 219     <label for="args">username:
 220     <input type="text" name="search_username" placeholder="test" size="10" ng:required />
 221     </label>
 222     <input type="submit" value="search in CRM">
 223     <input type="reset"  ng:click="clear()" value="clear">
 224
 225     <span id="message" ng:show="message">{{message | html}}</span>
 226
 227    </form>
 228
 229 <div id="columns" ng:show="CRM">
 230 <span>Add columns</span>
 231 <ul>
 232 <li ng:repeat="c in keys(CRM)" ng:show="columns.indexOf(c) < 0" ng:click="columns.push(c)">{{c}}
 233 </ul>
 234 </div>
 235
 236     <table ng:show="CRM">
 237     <tr>
 238         <th ng:repeat="c in columns" ng:click="columns.$remove(c)">{{c}}</th>
 239     </tr>
 240     <tr ng:repeat="u in CRM" ng:click="LDAP_search(u.USERNAME)" ng:class-even="'zebra'">
 241         <td ng:repeat="c in columns" ng:show="! selected_username || selected_username == u.USERNAME">{{u[c]}}</td>
 242     </tr>
 243     </table>
 244
 245     <input type=button value="Show ALL results, not just {{selected_username}}" ng:click="selected_username=''" ng:show="selected_username">
 246
 247   <div ng:show="selected_username">
 248
 249     <h2><tt>{{selected_username}}</tt> LDAP entry</h2>
 250
 251     <ul ng:show="LDAP">
 252      <li ng:repeat="c in keys(LDAP)"><tt>{{c}}</tt> {{LDAP[0][c]}}</li>
 253     </ul>
 254
 255     <ul ng:show="cpe.table" id="gnuplot_cols">
 256      <input type=button ng:click="gnuplot_draw(gnuplot.cols)" value="Redraw graph">
 257      <li ng:repeat="(k,v) in cpe.table.rows[0][cpe.table.hash_col]">
 258         <label>
 259         <input type="checkbox" name="gnuplot_cols" ng:format="include:k:gnuplot.cols" ng:change="$log.debug(gnuplot_cols)">
 260         {{k}} <tt>{{v}}</tt>
 261         </label>
 262      </li>
 263      <input type=button ng:click="gnuplot_draw(gnuplot.cols)" value="Redraw graph">
 264     </ul>
 265
 266     <ng:include src="gnuplot.img" ng:show="gnuplot.img" onload="message = 'done'" ></ng:include>
 267
 268     <h2 ng:show="cpe.table_name">{{cpe.table_name}} {{username}}</h2>
 269
 270     <table ng:show="cpe.table">
 271      <tr>
 272       <th ng:repeat="c in cpe.table.columns">{{c}}</th>
 273      </tr>
 274      <tr ng:repeat="r in cpe.table.rows" ng:class-even="'zebra'">
 275       <td ng:repeat="v in r">{{v}}</td>
 276      </tr>
 277      <tr>
 278       <td colspan="{{cpe.table.columns.length}}">
 279       limit:
 280         <label>1<input name="cpe_limit" type="radio" value=1></label>
 281         &middot; &middot; &middot;
 282         <label>5<input name="cpe_limit" type="radio" value=5></label>
 283         &middot; &middot; &middot;
 284         <label>10<input name="cpe_limit" type="radio" value=10></label>
 285       </td>
 286     </tr>
 287     </table>
 288
 289   </div>
 290
 291     <input type=checkbox name=debug value=1>
 292     <pre ng:show=debug>
 293 CRM={{CRM}}
 294 LDAP={{LDAP}}
 295 cpe={{cpe}}
 296 gnuplot={{gnuplot}}
 297     </pre>
 298   </div>
 299  </body>
 300 </html>