add debugging html ui.
authorLoïc Collignon <loic.collignon@iot.bzh>
Fri, 26 Jan 2018 08:34:28 +0000 (09:34 +0100)
committerLoïc Collignon <loic.collignon@iot.bzh>
Fri, 26 Jan 2018 08:34:28 +0000 (09:34 +0100)
Change-Id: I4e84bec38d9a2483ad6dbe0e393cde62e8c2a862
Signed-off-by: Loïc Collignon <loic.collignon@iot.bzh>
ll-database-binding/CMakeLists.txt
ll-database-binding/htdocs/persistence/AFB-websock.js [new file with mode: 0644]
ll-database-binding/htdocs/persistence/binding-debug.css [new file with mode: 0644]
ll-database-binding/htdocs/persistence/index.html [new file with mode: 0644]
ll-database-binding/htdocs/persistence/persistence-binding.js [new file with mode: 0644]
ll-database-binding/src/CMakeLists.txt

index 9f1222b..56ab411 100644 (file)
@@ -19,3 +19,5 @@
 cmake_minimum_required(VERSION 3.6)
 SET(CMAKE_MODULE_PATH ${CMAKE_MODULE_PATH} ${CMAKE_CURRENT_SOURCE_DIR}/conf.d/cmake/)
 include(${CMAKE_CURRENT_SOURCE_DIR}/conf.d/cmake/config.cmake)
+
+install(DIRECTORY htdocs/persistence DESTINATION htdocs)
diff --git a/ll-database-binding/htdocs/persistence/AFB-websock.js b/ll-database-binding/htdocs/persistence/AFB-websock.js
new file mode 100644 (file)
index 0000000..08a7ffe
--- /dev/null
@@ -0,0 +1,174 @@
+AFB = function(base, initialtoken){
+
+var urlws = "ws://"+window.location.host+"/"+base;
+var urlhttp = "http://"+window.location.host+"/"+base;
+
+/*********************************************/
+/****                                     ****/
+/****             AFB_context             ****/
+/****                                     ****/
+/*********************************************/
+var AFB_context;
+{
+       var UUID = undefined;
+       var TOKEN = initialtoken;
+
+       var context = function(token, uuid) {
+               this.token = token;
+               this.uuid = uuid;
+       }
+
+       context.prototype = {
+               get token() {return TOKEN;},
+               set token(tok) {if(tok) TOKEN=tok;},
+               get uuid() {return UUID;},
+               set uuid(id) {if(id) UUID=id;}
+       };
+
+       AFB_context = new context();
+}
+/*********************************************/
+/****                                     ****/
+/****             AFB_websocket           ****/
+/****                                     ****/
+/*********************************************/
+var AFB_websocket;
+{
+       var CALL = 2;
+       var RETOK = 3;
+       var RETERR = 4;
+       var EVENT = 5;
+
+       var PROTO1 = "x-afb-ws-json1";
+
+       AFB_websocket = function(onopen, onabort) {
+               var u = urlws;
+               if (AFB_context.token) {
+                       u = u + '?x-afb-token=' + AFB_context.token;
+                       if (AFB_context.uuid)
+                               u = u + '&x-afb-uuid=' + AFB_context.uuid;
+               }
+               this.ws = new WebSocket(u, [ PROTO1 ]);
+               this.pendings = {};
+               this.awaitens = {};
+               this.counter = 0;
+               this.ws.onopen = onopen.bind(this);
+               this.ws.onerror = onerror.bind(this);
+               this.ws.onclose = onclose.bind(this);
+               this.ws.onmessage = onmessage.bind(this);
+               this.onopen = onopen;
+               this.onabort = onabort;
+               this.onclose = onabort;
+       }
+
+       function onerror(event) {
+               var f = this.onabort;
+               if (f) {
+                       delete this.onopen;
+                       delete this.onabort;
+                       f && f(this);
+               }
+               this.onerror && this.onerror(this);
+       }
+
+       function onopen(event) {
+               var f = this.onopen;
+               delete this.onopen;
+               delete this.onabort;
+               f && f(this);
+       }
+
+       function onclose(event) {
+               for (var id in this.pendings) {
+                       var ferr = this.pendings[id].onerror;
+                       ferr && ferr(null, this);
+               }
+               this.pendings = {};
+               this.onclose && this.onclose();
+       }
+
+       function fire(awaitens, name, data) {
+               var a = awaitens[name];
+               if (a)
+                       a.forEach(function(handler){handler(data);});
+               var i = name.indexOf("/");
+               if (i >= 0) {
+                       a = awaitens[name.substring(0,i)];
+                       if (a)
+                               a.forEach(function(handler){handler(data);});
+               }
+               a = awaitens["*"];
+               if (a)
+                       a.forEach(function(handler){handler(data);});
+       }
+
+       function reply(pendings, id, ans, offset) {
+               if (id in pendings) {
+                       var p = pendings[id];
+                       delete pendings[id];
+                       var f = p[offset];
+                       f(ans);
+               }
+       }
+
+       function onmessage(event) {
+               var obj = JSON.parse(event.data);
+               var code = obj[0];
+               var id = obj[1];
+               var ans = obj[2];
+               AFB_context.token = obj[3];
+               switch (code) {
+               case RETOK:
+                       reply(this.pendings, id, ans, 0);
+                       break;
+               case RETERR:
+                       reply(this.pendings, id, ans, 1);
+                       break;
+               case EVENT:
+               default:
+                       fire(this.awaitens, id, ans);
+                       break;
+               }
+       }
+
+       function close() {
+               this.ws.close();
+                this.onabort();
+       }
+
+       function call(method, request) {
+               return new Promise((function(resolve, reject){
+                       var id, arr;
+                       do {
+                          id = String(this.counter = 4095 & (this.counter + 1));
+                       } while (id in this.pendings);
+                       this.pendings[id] = [ resolve, reject ];
+                       arr = [CALL, id, method, request ];
+                       if (AFB_context.token) arr.push(AFB_context.token);
+                       this.ws.send(JSON.stringify(arr));
+               }).bind(this));
+       }
+
+       function onevent(name, handler) {
+               var id = name;
+               var list = this.awaitens[id] || (this.awaitens[id] = []);
+               list.push(handler);
+       }
+
+       AFB_websocket.prototype = {
+               close: close,
+               call: call,
+               onevent: onevent
+       };
+}
+/*********************************************/
+/****                                     ****/
+/****                                     ****/
+/****                                     ****/
+/*********************************************/
+return {
+       context: AFB_context,
+       ws: AFB_websocket
+};
+};
+
diff --git a/ll-database-binding/htdocs/persistence/binding-debug.css b/ll-database-binding/htdocs/persistence/binding-debug.css
new file mode 100644 (file)
index 0000000..f41c940
--- /dev/null
@@ -0,0 +1,61 @@
+#debug-panel {
+       float: right;
+}
+
+#debug-panel.collapsed {
+       background-color: transparent;
+       overflow-x: hidden;
+}
+
+#debug-panel.expanded {
+       background-color: lightyellow;
+       max-width: 25%;
+       overflow-x: scroll;
+}
+
+#debug-panel.collapsed > #debug-panel-collapse {
+       display: none;
+}
+
+#debug-panel.expanded > #debug-panel-collapse {
+       display: block;
+}
+
+#debug-panel.collapsed > #debug-panel-expand {
+       display: block;
+}
+
+#debug-panel.expanded > #debug-panel-expand {
+       display: none;
+}
+
+#debug-panel.expanded > #debug-panel-content {
+       display: block;
+}
+
+#debug-panel.collapsed > #debug-panel-content {
+       display: none;
+}
+
+.json-key {
+       color: cornflowerblue;
+       font-weight: bold;
+}
+
+.json-string {
+       color: crimson;
+}
+
+.json-number {
+       color: sandybrown;
+}
+
+.json-boolean {
+       color: fuchsia;
+       font-weight: bold;
+}
+
+.json-null {
+       color: black;
+       font-weight: bold;
+}
diff --git a/ll-database-binding/htdocs/persistence/index.html b/ll-database-binding/htdocs/persistence/index.html
new file mode 100644 (file)
index 0000000..50999d9
--- /dev/null
@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+       <head>
+               <title>agl-service-data-persistence</title>
+               <meta charset="UTF-8">
+               <script type="text/javascript" src="AFB-websock.js"></script>
+               <script type="text/javascript" src="persistence-binding.js"></script>
+               <link rel="stylesheet" type="text/css" href="binding-debug.css" />
+       </head>
+       <body onload="init();" id="app-body">
+               <div id="debug-panel-container"></div>
+               <h1>agl-service-identity</h1>
+               <h2>Raw data access</h2>
+               <p>
+                       <ul>
+                               <li><input type="text" name="read-key" id="read-key" /> <button onclick="readData();">Read Data</button> <button onclick="deleteData();">Delete Data</button></li>
+                               <li>
+                                       <p><label>Key:&nbsp;</label><input type="text" name="write-key" id="write-key"/></p>
+                                       <p><label>Data:</label></p>
+                                       <p><textarea id="write-data"></textarea></p>
+                                       <p><button onclick="writeData();">Write Data</button></p>
+                               </li>
+                       </ul>
+               </p>
+               <h2>User Profile (VIN: <input type="text" name="profile-vin" id="profile-vin" value="WVGGF7BP7HD005986" />)</h2>
+               <ul>
+                       <li><input type="text" name="get-profile-key" id="get-profile-key" /> <button onclick="readProfile();">Get Profile</button> <button onclick="deleteProfile();">Delete Profile</button></li>
+                       <li>
+                               <h3>Update user profile</h3>
+                               <ul>
+                                       <li><p><label>Key Token:</label> <input type="text" name="set-profile-key" id="set-profile-key"/></p></li>
+                                       <li><p><label>Login:</label> <input type="text" name="set-profile-login" id="set-profile-login"/></p></li>
+                                       <li><p><label>First Name:</label> <input type="text" name="set-profile-first-name" id="set-profile-first-name"/></p></li>
+                                       <li><p><label>Last Name:</label> <input type="text" name="set-profile-last-name" id="set-profile-last-name"/></p></li>
+                                       <li><p><label>Language:</label> <input type="text" name="set-profile-language" id="set-profile-language"/></p></li>
+                                       <button onclick="writeProfile();">Save</button>
+                               </ul>
+                       </li>
+               </ul>
+       </body>
+</html>
diff --git a/ll-database-binding/htdocs/persistence/persistence-binding.js b/ll-database-binding/htdocs/persistence/persistence-binding.js
new file mode 100644 (file)
index 0000000..9b5550c
--- /dev/null
@@ -0,0 +1,203 @@
+var afb = new AFB("api", "HELLO");
+var ws;
+
+function add_debbug_panel() {
+       
+       if (document.getElementById("debug-panel"))
+               return;
+
+       var itm = document.getElementById("debug-panel-container");
+       if (itm)
+       {
+               var pnl =
+                       "<div id=\"debug-panel\" class=\"expanded\">\n" +
+                       "   <button id=\"debug-panel-collapse\" onclick=\"debug_panel_collapse();\">&gt;</button>\n" +
+                       "    <button id=\"debug-panel-expand\" onclick=\"debug_panel_expand();\">&lt;</button>\n" +
+                       "    <div id=\"debug-panel-content\">\n" +
+                       "        <h1>Debug</h1>\n" +
+                       "        <h2>Call</h2><div id=\"debug-panel-call\">\n" +
+                       "            <ul>\n" +
+                       "                <li><strong>api : </strong><span id=\"debug-panel-call-id\"></span></li>\n" +
+                       "                <li><strong>verb : </strong><span id=\"debug-panel-call-verb\"></span></li>\n" +
+                       "                <li><strong>query : </strong></li>\n" +
+                       "            </ul>\n" +
+                       "            <pre id=\"debug-panel-call-query\"></pre>\n" +
+                       "        </div>\n" +
+                       "        <h2>Response</h2><pre id=\"debug-panel-response\"></pre>\n" +
+                       "        <h2>Event</h2><pre id=\"debug-panel-event\"></pre>\n" +
+                       "    </div>\n" +
+                       "</div>\n";
+               itm.insertAdjacentHTML("afterbegin", pnl);
+       }
+}
+
+function createClass(name,rules) {
+       var style = document.createElement('style');
+       style.type = 'text/css';
+       document.getElementsByTagName('head')[0].appendChild(style);
+       if(!(style.sheet||{}).insertRule) 
+               (style.styleSheet || style.sheet).addRule(name, rules);
+       else
+               style.sheet.insertRule(name+"{"+rules+"}",0);
+}
+
+function syntaxHighlight(json) {
+       if (typeof json != 'string')
+               json = JSON.stringify(json, undefined, 2);
+       
+       json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+       return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+               var cls = 'json-number';
+               if (/^"/.test(match)) {
+                       if (/:$/.test(match)) {
+                               cls = 'json-key';
+                       } else {
+                               cls = 'json-string';
+                       }
+               } else if (/true|false/.test(match)) {
+                       cls = 'json-boolean';
+               } else if (/null/.test(match)) {
+                       cls = 'json-null';
+               }
+               return '<span class="' + cls + '">' + match + '</span>';
+       });
+}
+
+function set_item_html(id, text)
+{
+       var itm = document.getElementById(id);
+       if (itm) itm.innerHTML = text;
+}
+
+function set_item_text(id, text)
+{
+       var itm = document.getElementById(id);
+       if (itm) itm.innerText = text;
+}
+
+function debug_panel_collapse() {
+       var pnl = document.getElementById('debug-panel');
+       if (pnl)
+       {
+               pnl.classList.remove('expanded');
+               pnl.classList.add('collapsed');
+       }
+}
+
+function debug_panel_expand() {
+       var pnl = document.getElementById('debug-panel');
+       if (pnl)
+       {
+               pnl.classList.remove('collapsed');
+               pnl.classList.add('expanded');
+       }
+}
+
+function init() {
+       add_debbug_panel();
+       ws = new afb.ws(onopen, onabort);
+}
+
+function onopen() {
+       //callbinder("ll-auth", "getuser", "");
+       ws.onevent("*", gotevent);
+}
+
+function onabort() {
+}
+
+function replyok(obj) {
+       console.log("replyok:" + JSON.stringify(obj));
+       set_item_html("debug-panel-response", syntaxHighlight(JSON.stringify(obj, null, 4)));
+}
+
+function replyerr(obj) {
+       console.log("replyerr:" + JSON.stringify(obj));
+       set_item_html("debug-panel-response", syntaxHighlight(JSON.stringify(obj, null, 4)));
+}
+
+function gotevent(obj) {
+       console.log("gotevent:" + JSON.stringify(obj));
+       set_item_html("debug-panel-event", syntaxHighlight(JSON.stringify(obj, null, 4)));
+}
+
+function callbinder(api, verb, query) {
+       console.log ("subscribe api="+api+" verb="+verb+" query=" +query);
+
+       set_item_text("debug-panel-call-api", api);
+       set_item_text("debug-panel-call-verb", verb);
+       set_item_html("debug-panel-call-query", syntaxHighlight(JSON.stringify(query, null, 4)));
+
+       ws.call(api+"/"+verb, query).then(replyok, replyerr);
+}
+
+function value(id){
+       return document.getElementById(id).value;
+}
+
+function readData() {
+       callbinder("persistence", "read", { "key": value("read-key") });
+}
+
+function deleteData() {
+       callbinder("persistence", "delete", { "key": value("read-key")});
+}
+
+function writeData() {
+       callbinder("persistence", "update", {
+               "key": value("write-key"),
+               "value": value("write-data")
+       });
+}
+
+function readProfile() {
+       var vin = value("profile-vin")
+       var token = value("get-profile-key")
+       var url = "https://agl-graphapi.forgerocklabs.org:443/getuserprofilefromtoken?vin=" + vin + "&kind=nfc&keytoken=" + token
+
+       callbinder("persistence", "read", {
+               "key": {
+                       "url": url,
+                       "vin": vin,
+                       "kind": "nfc",
+                       "key": token
+               }
+       });
+}
+
+function deleteProfile() {
+       var vin = value("profile-vin")
+       var token = value("get-profile-key")
+       var url = "https://agl-graphapi.forgerocklabs.org:443/getuserprofilefromtoken?vin=" + vin + "&kind=nfc&keytoken=" + token
+
+       callbinder("persistence", "delete", {
+               "key": {
+                       "url": url,
+                       "vin": vin,
+                       "kind": "nfc",
+                       "key": token
+               }
+       });
+}
+
+function writeProfile() {
+       var vin = value("profile-vin")
+       var token = value("set-profile-key")
+       var url = "https://agl-graphapi.forgerocklabs.org:443/getuserprofilefromtoken?vin=" + vin + "&kind=nfc&keytoken=" + token
+
+       callbinder("persistence", "update", {
+               "key": {
+                       "url": url,
+                       "vin": vin,
+                       "kind": "nfc",
+                       "key": token
+               },
+               "value": {
+                       "keytoken": token,
+                       "name": value("set-profile-login"),
+                       "first_name": value("set-profile-first-name"),
+                       "last_name": value("set-profile-last-name"),
+                       "graphPreferredLanguage": value("set-profile-language")
+               }
+       });
+}
index 95a481a..fc65420 100644 (file)
@@ -17,6 +17,11 @@ set_target_properties(persistence-binding PROPERTIES
         LINK_FLAGS ${BINDINGS_LINK_FLAG}
         OUTPUT_NAME ${TARGET_NAME})
 
+add_custom_command(TARGET ${TARGET_NAME}
+    PRE_BUILD
+    COMMAND mkdir -p ${CMAKE_CURRENT_BINARY_DIR}/../package/htdocs
+    COMMAND cp -rv ${CMAKE_CURRENT_SOURCE_DIR}/../htdocs ${CMAKE_CURRENT_BINARY_DIR}/../package/)
+
 install(TARGETS persistence-binding
     RUNTIME DESTINATION bin
     ARCHIVE DESTINATION lib