% layout 'angular';

  <script>
    function CRM($xhr) {
      var self = this;
   
      this.fetch = function() {
        self.clear();
	self.url = '/g/' + self.function_name + '/' + self.args + '?callback=JSON_CALLBACK';
        $xhr('JSON', self.url, function(code, response) {
          self.code = code;
          self.response = response;
        });
      };
   
      this.clear = function() {
        self.url = null;
        self.code = null;
        self.response = null;
	self.selected_username = null;
	self.gnuplot_sql = null;
	self.ldap = null;
      };

	this.columns = [
		'USERNAME',
		'BROJ',
		'USLUGA',
		'IP_MANAGEMENT',
		'IP_VOICE',
		'KOLOKACIJA',
		'OPT82'
	];

      this.keys = function(h) {
             if ( angular.isArray(h) ) h = h[0];
	     var keys = [];
	     for(i in h) if (h.hasOwnProperty(i))
	     {
	       keys.push(i);
	     }
	     return keys;
      };

	this.select = function(crm) {
		console.log( 'crm = ',crm );
		self.selected_username = crm.USERNAME;
		self.gnuplot_sql = null;
		$xhr('JSON'
			, '/g/LDAP_search/' + self.selected_username + '?callback=JSON_CALLBACK'
			, function(code, response) {
				console.debug( code, response );
				self.ldap = response;
				self.gnuplot_sql = '/gnuplot?sql=select timestamp,snrtx,attntx,pwrtx,pwrrx,attnrx,snrrx from adsl where username = \'' + response[0].cn + '\'';
			}
		);
	};

    }

    CRM.$inject = ['$xhr'];
  </script>
  <div ng:controller="CRM">
   <form ng:submit="fetch()">
    <input type="hidden" name="function_name" value="CRM_search"      size="20"/>
    <label for="args">username:
    <input type="text" name="args"     placeholder="test" size="10"/>
    </label>
    <input type="submit" ng:click="fetch()" value="search">
    <input type="reset"  ng:click="clear()" value="clear">

    <b ng:show="url && ! code">loading {{url}}</b>
    <b ng:show="response">{{response.length}} results for <tt>{{args}}</tt></b>
   </form>

<div style="font-size: 80%; float: right" ng:show="response">
Add columns:
<ul>
<li ng:repeat="c in keys(response)" ng:show="columns.indexOf(c) < 0" ng:click="columns.push(c)">{{c}}
</ul>
</div>

    <table ng:show="response">
    <tr>
	<th ng:repeat="c in columns" ng:click="columns.$remove(c)">{{c}}</th>
    </tr>
    <tr ng:repeat="u in response" ng:click="select(u)">
	<td ng:repeat="c in columns" ng:show="! selected_username || selected_username == u.USERNAME">{{u[c]}}</td>
    </tr>
    </table>

    <input type=button value="Show ALL results, not just {{selected_username}}" ng:click="selected_username=''" ng:show="selected_username">

  <div ng:show="selected_username">

    <tt>{{selected_username}}</tt>

    <ul ng:show="ldap">
    <li ng:repeat="c in keys(ldap)"><tt>{{c}}</tt> {{ldap[0][c]}}</li>
    </ul>

    <ng:include src="gnuplot_sql" ng:show="gnuplot_sql">

  </div>

    <input type=checkbox name=debug value=1>
    <pre ng:show=debug>
url={{url}}
code={{code}}
response={{response}}
username={{username}}
    </pre>
  </div>