public/user.html

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