cdn-experiments/ccp/js/methodlistcontroller.js

106 lines
2.7 KiB
JavaScript
Raw Normal View History

2022-03-22 14:09:54 +01:00
class CCPMethodList extends HTMLElement{
#boot;
#rootdoc;
#data;
#filtered;
2022-03-22 19:03:42 +01:00
#serviceurl = "https://nubis1.int.d4science.net:8080"
#cdnurl = "https://nubis1.int.d4science.net:8080/ccp/fragment.html"
//#cdnurl = "http://d4science-cdn-public:8984/resources/ccp/fragment.html"
2022-03-22 14:09:54 +01:00
constructor(){
super()
this.#boot = document.querySelector("d4s-boot-2")
this.#rootdoc = this.attachShadow({ "mode" : "open"})
this.fetchMarkup()
}
fetchMarkup(){
2022-03-22 19:03:42 +01:00
return fetch(this.#cdnurl).then(
2022-03-22 14:09:54 +01:00
(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(){
2022-03-22 19:03:42 +01:00
this.#boot.service(this.#serviceurl + "/processes", "GET", { limit : 1000}, (resp)=>this.showList(resp), ()=>{ alert("You are not allowed list CCP methods") })
2022-03-22 14:09:54 +01:00
}
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" : [
{
2022-03-23 16:27:11 +01:00
"target" : "h5",
2022-03-22 14:09:54 +01:00
"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
}
}
}
]
}
]
}
}
2022-03-22 19:03:42 +01:00
window.customElements.define('d4s-ccp-methodlist', CCPMethodList);