move user.html template to static one
[APKPM.git] / public / user.html
diff --git a/public/user.html b/public/user.html
new file mode 100644 (file)
index 0000000..c6f1ca7
--- /dev/null
@@ -0,0 +1,215 @@
+<!doctype html>
+<html xmlns:ng="http://angularjs.org">
+ <script src="http://code.angularjs.org/angular-0.9.12.min.js" ng:autobind></script>
+ <body>
+  <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.cpe_hash = {
+               'Davolink': [ 'Max_down', 'Max_up' ],
+//             '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' ],
+//             'EasyGateway':
+       };
+
+      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 );
+                               if ( ! response[0] ) {
+                                       self.message = 'no user ' + self.selected_username + ' in LDAP';
+                                       return;
+                               }
+                               self.ldap = response;
+                               self._cpe_parser = response[0]._cpe_parser;
+                               self.username = response[0].cn;
+                               self.cpe = {
+                                       parser: self._cpe_parser,
+                                       table: 'cpe_' + self._cpe_parser,
+                               };
+
+                               $xhr('JSON', '/table/' + self.cpe.table + '?username='+self.username+';callback=JSON_CALLBACK', function( code, table ) {
+                                       self.cpe.rows = table.rows;
+                                       self.message = 'loaded cpe_'+self.cpe.parser+' rows';
+                               });
+                               self.message = 'loading cpe_'+self.cpe.parser+' rows...';
+
+                               if ( h_cols = self.cpe_hash[self.cpe.parser] ) {
+                                       var cols = [ 'timestamp' ];
+                                       for ( var i = 0; i < h_cols.length; i++ ) {
+                                               cols.push( 'h->\'' + h_cols[i] + '\' as "' + h_cols[i] + '"' );
+                                       }
+console.debug( cols );
+                                       self.gnuplot.sql = 'select ' + cols.join(',') + ' from cpe_' + self.cpe.parser + ' where username = \'' + self.username + '\' order by timestamp desc limit 100';
+
+                                       console.info( 'gnuplot', self.gnuplot );
+                                       self.message = 'generating ADSL graph for '+self.username;
+                                       self.gnuplot.img = '/gnuplot?hide=1;with=points;sql=' + self.gnuplot.sql;
+                               } else {
+                                       self.message = 'no graph defined for ' + self.cpe.parser;
+                               }
+
+                       }
+               );
+               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">CRM 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">
+
+    <h2><tt>{{selected_username}}</tt> LDAP entry</h2>
+
+    <ul ng:show="ldap">
+    <li ng:repeat="c in keys(ldap)"><tt>{{c}}</tt> {{ldap[0][c]}}</li>
+    </ul>
+
+    <div ng:show="cpe.rows">
+    <h2>{{cpe.table}} {{username}}</h2>
+    <pre>{{cpe.rows[0]}}</pre>
+    </div>
+
+    <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>
+{{self}}
+    </pre>
+  </div>
+ </body>
+</html>