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                         self.cpe.parser = LDAP[0]._cpe_parser;
  46                         self.cpe.table  = 'cpe_' + LDAP[0]._cpe_parser;
  47                         self.username = LDAP[0].cn;
  48                         $log.info( 'cpe', self.cpe );
  49                 });
  50         };
  51         self.$watch('selected_username', self.LDAP_search );
  52
  53         self.gnuplot_draw = function(h_cols) {
  54                 $log.info( 'gnuplot_draw', h_cols );
  55                 if (h_cols) self.gnuplot.cols = h_cols;
  56                 var cols = [ 'timestamp' ];
  57                 for ( var i = 0; i < h_cols.length; i++ ) {
  58                         cols.push( 'h->\'' + h_cols[i] + '\' as "' + h_cols[i] + '"' );
  59                 }
  60 console.debug( cols );
  61                 self.gnuplot.sql = 'select ' + cols.join(',') + ' from cpe_' + self.cpe.parser + ' where username = \'' + self.username + '\' order by timestamp desc limit 100';
  62
  63                 $log.info( 'gnuplot', self.gnuplot );
  64                 self.gnuplot.img = '/gnuplot?hide=1;with=points;sql=' + self.gnuplot.sql;
  65
  66         };
  67
  68         self.r.table = $resource('/table/:table');
  69         self.table_update = function () {
  70                 if ( ! self.username || ! self.cpe.table ) return;
  71                 self.r.table.get({ username: self.username, table: self.cpe.table, limit: self.cpe.limit }, function(table) {
  72                         $log.info( 'table', table );
  73                         self.cpe.rows = table.rows;
  74                         self.cpe.columns = table.columns;
  75
  76                         if ( h_cols = self.cpe_hash[self.cpe.parser] ) {
  77                                 self.gnuplot_draw( h_cols );
  78                         } else {
  79                                 self.message = 'no graph defined for ' + self.cpe.parser;
  80                         }
  81                 });
  82         };
  83         self.$watch('username', self.table_update );
  84
  85         this.clear = function() {
  86                 $log.info('clear');
  87                 self.CRM = null;
  88                 this.clear_LDAP;
  89         }
  90
  91         this.clear_LDAP = function() {
  92                 $log.info('clear_LDAP');
  93                 self.LDAP = null;
  94                 self.selected_username = null;
  95                 self.gnuplot = {};
  96                 self.cpe = { limit: 1 };
  97                 self.message = null;
  98         };
  99
 100         self.$watch('selected_username', function() {
 101                 if ( self.selected_username == null ) self.clear_LDAP();
 102         });
 103
 104         self.clear();
 105         self.cpe_limit = self.cpe.limit;
 106         self.$watch('cpe_limit', function() {
 107                 $log.info( 'limit', self.cpe.limit = self.cpe_limit );
 108                 self.table_update();
 109         });
 110
 111         this.columns = [
 112                 'USERNAME',
 113                 'BROJ',
 114                 'USLUGA',
 115                 'IP_MANAGEMENT',
 116                 'IP_VOICE',
 117                 'KOLOKACIJA',
 118                 'OPT82'
 119         ];
 120
 121         this.cpe_hash = {
 122                 'Davolink': [ 'Max_down', 'Max_up' ],
 123 //              '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' ],
 124 //              'EasyGateway':
 125         };
 126
 127       this.keys = function(h) {
 128              if ( angular.isArray(h) ) h = h[0];
 129              var keys = [];
 130              for(i in h) if (h.hasOwnProperty(i))
 131              {
 132                keys.push(i);
 133              }
 134              return keys;
 135       };
 136
 137     }
 138
 139     user.$inject = ['$xhr','$resource','$log'];
 140   </script>
 141
 142 <style type="text/css">
 143 #columns {
 144         position: fixed;
 145         top: 0;
 146         right: 0;
 147         z-index: 10;
 148         background: #eee;
 149 }
 150
 151 #columns > span {
 152         float: right;
 153 }
 154
 155 #columns ul {
 156         display: none;
 157 }
 158
 159 #columns:hover ul {
 160         display: block;
 161 }
 162
 163 table {
 164         border-collapse:collapse;
 165 }
 166
 167 th {
 168         border-bottom: 2px solid gray;
 169 }
 170
 171 th, td {
 172         border-left: 1em solid white;
 173         border-right: 1em solid white;
 174 }
 175
 176 .zebra {
 177         background: #eee;
 178 }
 179
 180 #message {
 181         padding: 3px;
 182         background: #ff8;
 183
 184         margin-left: 1em;
 185         position: fixed;
 186 }
 187
 188 </style>
 189
 190   <div ng:controller="user">
 191
 192    <form ng:submit="CRM_search()">
 193     <label for="args">username:
 194     <input type="text" name="search_username" placeholder="test" size="10" ng:required />
 195     </label>
 196     <input type="submit" value="search in CRM">
 197     <input type="reset"  ng:click="clear()" value="clear">
 198
 199     <span id="message" ng:show="message">{{message | html}}</span>
 200
 201    </form>
 202
 203 <div id="columns" ng:show="CRM">
 204 <span>Add columns</span>
 205 <ul>
 206 <li ng:repeat="c in keys(CRM)" ng:show="columns.indexOf(c) < 0" ng:click="columns.push(c)">{{c}}
 207 </ul>
 208 </div>
 209
 210     <table ng:show="CRM">
 211     <tr>
 212         <th ng:repeat="c in columns" ng:click="columns.$remove(c)">{{c}}</th>
 213     </tr>
 214     <tr ng:repeat="u in CRM" ng:click="LDAP_search(u.USERNAME)" ng:class-even="'zebra'">
 215         <td ng:repeat="c in columns" ng:show="! selected_username || selected_username == u.USERNAME">{{u[c]}}</td>
 216     </tr>
 217     </table>
 218
 219     <input type=button value="Show ALL results, not just {{selected_username}}" ng:click="selected_username=''" ng:show="selected_username">
 220
 221   <div ng:show="selected_username">
 222
 223     <h2><tt>{{selected_username}}</tt> LDAP entry</h2>
 224
 225     <ul ng:show="LDAP">
 226      <li ng:repeat="c in keys(LDAP)"><tt>{{c}}</tt> {{LDAP[0][c]}}</li>
 227     </ul>
 228
 229     <ng:include src="gnuplot.img" ng:show="gnuplot.img" onload="message = 'done'" ></ng:include>
 230
 231     <h2 ng:show="cpe.table">{{cpe.table}} {{username}}</h2>
 232     <table ng:show="cpe.rows">
 233      <tr>
 234       <th ng:repeat="c in cpe.columns">{{c}}</th>
 235      </tr>
 236      <tr ng:repeat="r in cpe.rows" ng:class-even="'zebra'">
 237       <td ng:repeat="v in r">{{v}}</td>
 238      </tr>
 239      <tr>
 240       <td colspan="{{cpe.columns.length}}">
 241       limit:
 242         <label>1<input name="cpe_limit" type="radio" value=1></label>
 243         &middot; &middot; &middot;
 244         <label>5<input name="cpe_limit" type="radio" value=5></label>
 245         &middot; &middot; &middot;
 246         <label>10<input name="cpe_limit" type="radio" value=10></label>
 247       </td>
 248     </tr>
 249     </table>
 250
 251   </div>
 252
 253     <input type=checkbox name=debug value=1>
 254     <pre ng:show=debug>
 255 CRM={{CRM}}
 256 LDAP={{LDAP}}
 257 cpe={{cpe}}
 258 gnuplot={{gnuplot}}
 259     </pre>
 260   </div>
 261  </body>
 262 </html>