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_sql = null;
  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.keys = function(h) {
  43              if ( angular.isArray(h) ) h = h[0];
  44              var keys = [];
  45              for(i in h) if (h.hasOwnProperty(i))
  46              {
  47                keys.push(i);
  48              }
  49              return keys;
  50       };
  51
  52         this.select = function(crm) {
  53                 console.log( 'crm = ',crm );
  54                 self.selected_username = crm.USERNAME;
  55                 self.gnuplot_sql = null;
  56                 $xhr('JSON'
  57                         , '/g/LDAP_search/' + self.selected_username + '?callback=JSON_CALLBACK'
  58                         , function(code, response) {
  59                                 console.debug( code, response );
  60                                 self.ldap = response;
  61                                 var sql = 'select timestamp,h->\'Max_down\' as Max_down,h->\'Max_up\' as Max_up from cpe_Davolink where username = \'' + response[0].cn + '\' order by timestamp desc limit 100';
  62                                 console.info( 'sql', sql );
  63                                 self.gnuplot_sql = '/gnuplot?hide=1;with=points;sql=' + sql;
  64                                 self.message = 'generating ADSL graph for '+response[0].cn + ' ' + sql;
  65                         }
  66                 );
  67                 self.message = 'LDAP search for '+self.selected_username;
  68         };
  69
  70     }
  71
  72     CRM.$inject = ['$xhr'];
  73   </script>
  74
  75 <style type="text/css">
  76 #columns {
  77         position: fixed;
  78         top: 0;
  79         right: 0;
  80         z-index: 10;
  81         background: #eee;
  82 }
  83
  84 #columns > span {
  85         float: right;
  86 }
  87
  88 #columns ul {
  89         display: none;
  90 }
  91
  92 #columns:hover ul {
  93         display: block;
  94 }
  95
  96 table {
  97         border-collapse:collapse;
  98 }
  99
 100 th {
 101         border-bottom: 2px solid gray;
 102 }
 103
 104 th, td {
 105         border-left: 1em solid white;
 106         border-right: 1em solid white;
 107 }
 108
 109 .zebra {
 110         background: #eee;
 111 }
 112
 113 #message {
 114         padding: 3px;
 115         background: #ff8;
 116
 117         margin-left: 1em;
 118         position: fixed;
 119 }
 120
 121 </style>
 122
 123   <div ng:controller="CRM">
 124
 125    <form ng:submit="fetch()">
 126     <input type="hidden" name="function_name" value="CRM_search"      size="20"/>
 127     <label for="args">username:
 128     <input type="text" name="args"     placeholder="test" size="10"/>
 129     </label>
 130     <input type="submit" ng:click="fetch()" value="search">
 131     <input type="reset"  ng:click="clear()" value="clear">
 132
 133     <span id="message" ng:show="message">{{message | html}}</span>
 134
 135    </form>
 136
 137 <div id="columns" ng:show="response">
 138 <span>Add columns</span>
 139 <ul>
 140 <li ng:repeat="c in keys(response)" ng:show="columns.indexOf(c) < 0" ng:click="columns.push(c)">{{c}}
 141 </ul>
 142 </div>
 143
 144     <table ng:show="response">
 145     <tr>
 146         <th ng:repeat="c in columns" ng:click="columns.$remove(c)">{{c}}</th>
 147     </tr>
 148     <tr ng:repeat="u in response" ng:click="select(u)" ng:class-even="'zebra'">
 149         <td ng:repeat="c in columns" ng:show="! selected_username || selected_username == u.USERNAME">{{u[c]}}</td>
 150     </tr>
 151     </table>
 152
 153     <input type=button value="Show ALL results, not just {{selected_username}}" ng:click="selected_username=''" ng:show="selected_username">
 154
 155   <div ng:show="selected_username">
 156
 157     <tt>{{selected_username}}</tt>
 158
 159     <ul ng:show="ldap">
 160     <li ng:repeat="c in keys(ldap)"><tt>{{c}}</tt> {{ldap[0][c]}}</li>
 161     </ul>
 162
 163     <ng:include src="gnuplot_sql" ng:show="gnuplot_sql">
 164
 165   </div>
 166
 167     <input type=checkbox name=debug value=1>
 168     <pre ng:show=debug>
 169 message={{message}}
 170 url={{url}}
 171 code={{code}}
 172 response={{response}}
 173     </pre>
 174   </div>