templates/user.html.ep

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