From 783cefd2885fe59994e6664803441d6d166aff99 Mon Sep 17 00:00:00 2001 From: dcore94 Date: Tue, 22 Mar 2022 14:09:54 +0100 Subject: [PATCH] added ccp example --- ccp/fragment.html | 73 +++++++++++++++++++++++ ccp/js/methodlistcontroller.js | 104 +++++++++++++++++++++++++++++++++ 2 files changed, 177 insertions(+) create mode 100644 ccp/fragment.html create mode 100644 ccp/js/methodlistcontroller.js diff --git a/ccp/fragment.html b/ccp/fragment.html new file mode 100644 index 0000000..c54deac --- /dev/null +++ b/ccp/fragment.html @@ -0,0 +1,73 @@ +
+ + +
+ +
    +
    +
    \ No newline at end of file diff --git a/ccp/js/methodlistcontroller.js b/ccp/js/methodlistcontroller.js new file mode 100644 index 0000000..df6de62 --- /dev/null +++ b/ccp/js/methodlistcontroller.js @@ -0,0 +1,104 @@ +class CCPMethodList extends HTMLElement{ + + #boot; + #rootdoc; + #data; + #filtered; + + #url = "http://localhost:8080/ccp/fragment.html" + //#url = "http://d4science-cdn-public:8984/resources/ccp/fragment.html" + + constructor(){ + super() + this.#boot = document.querySelector("d4s-boot-2") + this.#rootdoc = this.attachShadow({ "mode" : "open"}) + this.fetchMarkup() + } + + fetchMarkup(){ + return fetch(this.#url).then( + (reply)=>{ + if(reply.status === 200){ + return reply.text() + }else{ throw new Exception("Unable to fetch markup") } + }).then(data=>{ + this.#rootdoc.innerHTML = data + console.log(this.#boot) + this.fetchProcesses() + }).catch(err=>{ + console.error(err) + }) + } + + connectedCallback(){ + //this.#boot.whenReady(()=>{ this.fetchMethods() }) + //window.setTimeout(()=>this.fetchMethods(), 1000) + } + + fetchProcesses(){ + this.#boot.service("http://localhost:8080/processes", "GET", { limit : 1000}, (resp)=>this.showList(resp), ()=>{ alert("You are not allowed list CCP methods") }) + } + + showList(resp){ + this.#data = JSON.parse(resp) + this.enableSearch() + this.updateList() + } + + updateList(filter){ + if(filter === "" || filter == null || filter == undefined){ + this.#filtered = [] + }else{ + const f = filter.toLowerCase() + this.#filtered = this.#data["processes"].filter(d=>{ + return false || + (d.title.toLowerCase().indexOf(f) !== -1)|| + (d.description.indexOf(f) !== -1) || + (d.keywords.map(k=>k.toLowerCase()).indexOf(f) !== -1) + }) + } + BSS.apply(this.#process_list_bss, this.#rootdoc) + } + + enableSearch(){ + const search = this.#rootdoc.querySelector("input[name=search]") + search.addEventListener("input", ev=>{ + this.updateList(ev.currentTarget.value) + }) + } + + #process_list_bss = { + "template" : "#PROCESS_LIST_TEMPLATE", + "target" : "ul[name=process_list]", + "in" : this, + "recurse" : [ + { + "target" : "li", + "in" : (e,d)=>this.#filtered, + "recurse" : [ + { + "target" : "b", + "apply" : (e,d)=>{ e.textContent = d.title } + }, + { + "target" : "i", + "apply" : (e,d)=>{ e.textContent = d.description } + }, + { + "target" : "ul", + "recurse" : { + "target" : "li", + "in" : (e,d)=>d.keywords, + "apply" : (e,d)=>{ + e.alt = e.title = e.textContent = d + } + } + } + ] + } + ] + } + +} + +window.customElements.define('d4s-ccp-methodlist', CCPMethodList); \ No newline at end of file