From ff3386eb00cd8b5c1f3301168fca26e422595f71 Mon Sep 17 00:00:00 2001 From: Loïc Collignon Date: Fri, 26 Jan 2018 09:34:28 +0100 Subject: add debugging html ui. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I4e84bec38d9a2483ad6dbe0e393cde62e8c2a862 Signed-off-by: Loïc Collignon --- .../htdocs/persistence/AFB-websock.js | 174 ++++++++++++++++++ .../htdocs/persistence/binding-debug.css | 61 +++++++ ll-database-binding/htdocs/persistence/index.html | 41 +++++ .../htdocs/persistence/persistence-binding.js | 203 +++++++++++++++++++++ 4 files changed, 479 insertions(+) create mode 100644 ll-database-binding/htdocs/persistence/AFB-websock.js create mode 100644 ll-database-binding/htdocs/persistence/binding-debug.css create mode 100644 ll-database-binding/htdocs/persistence/index.html create mode 100644 ll-database-binding/htdocs/persistence/persistence-binding.js (limited to 'll-database-binding/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 index 0000000..08a7ffe --- /dev/null +++ b/ll-database-binding/htdocs/persistence/AFB-websock.js @@ -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 index 0000000..f41c940 --- /dev/null +++ b/ll-database-binding/htdocs/persistence/binding-debug.css @@ -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 index 0000000..50999d9 --- /dev/null +++ b/ll-database-binding/htdocs/persistence/index.html @@ -0,0 +1,41 @@ + + + + agl-service-data-persistence + + + + + + +
+

agl-service-identity

+

Raw data access

+

+

+

+

User Profile (VIN: )

+ + + diff --git a/ll-database-binding/htdocs/persistence/persistence-binding.js b/ll-database-binding/htdocs/persistence/persistence-binding.js new file mode 100644 index 0000000..9b5550c --- /dev/null +++ b/ll-database-binding/htdocs/persistence/persistence-binding.js @@ -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 = + "
\n" + + " \n" + + " \n" + + "
\n" + + "

Debug

\n" + + "

Call

\n" + + "
    \n" + + "
  • api :
  • \n" + + "
  • verb :
  • \n" + + "
  • query :
  • \n" + + "
\n" + + "
\n" +
+			"        
\n" + + "

Response

\n" +
+			"        

Event

\n" +
+			"    
\n" + + "
\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, '&').replace(//g, '>'); + 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 '' + match + ''; + }); +} + +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") + } + }); +} -- cgit 1.2.3-korg