% layout 'angular';

  <script>
    function CRM($xhr) {
      var self = this;
   
      this.fetch = function() {
	self.clear();
        if ( ! self.args ) {
		self.message = 'Enter part of username to search';
		return;
	}
	self.url = '/g/' + self.function_name + '/' + self.args + '?callback=JSON_CALLBACK';
        $xhr('JSON', self.url, function(code, response) {
          self.code = code;
          self.response = response;
	  self.message = response.length + ' results for <tt>'+self.args+'</tt>';
        });
	self.message = 'loading '+self.url;
      };
 
      this.clear = function() {
        self.url = null;
        self.code = null;
        self.response = null;
	self.selected_username = null;
	self.gnuplot = {};
	self.ldap = null;
	self.message = 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 = {};
		$xhr('JSON'
			, '/g/LDAP_search/' + self.selected_username + '?callback=JSON_CALLBACK'
			, function(code, response) {
				console.debug( code, response );
				self.ldap = response;
				self.gnuplot.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';
				self.gnuplot.img = '/gnuplot?hide=1;with=points;sql=' + self.gnuplot.sql;
				console.info( 'gnuplot', self.gnuplot );
				self.message = 'generating ADSL graph for '+response[0].cn + ' ';
			}
		);
		self.message = 'LDAP search for '+self.selected_username;
	};

    }

    CRM.$inject = ['$xhr'];
  </script>

<style type="text/css">
#columns {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10;
	background: #eee;
}

#columns > span {
	float: right;
}

#columns ul {
	display: none;
}

#columns:hover ul {
	display: block;
}

table {
	border-collapse:collapse;
}

th {
	border-bottom: 2px solid gray;
}

th, td {
	border-left: 1em solid white;
	border-right: 1em solid white;
}

.zebra {
	background: #eee;
}

#message {
	padding: 3px;
	background: #ff8;

	margin-left: 1em;
	position: fixed;
}

</style>

  <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">

    <span id="message" ng:show="message">{{message | html}}</span>

   </form>

<div id="columns" ng:show="response">
<span>Add columns</span>
<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)" ng:class-even="'zebra'">
	<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">
	<h2>LDAP entry</h2>
    <li ng:repeat="c in keys(ldap)"><tt>{{c}}</tt> {{ldap[0][c]}}</li>
    </ul>

    <h2 ng:show="gnuplot.title">{{gnuplot.title}}</h2>
    <ng:include src="gnuplot.img" ng:show="gnuplot.img" onload="message = 'done'">
    <pre ng:show="gnuplot.sql">{{gnuplot.sql}}</pre>

  </div>

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