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