class CCPMethodList extends HTMLElement{ #boot; #rootdoc; #data; #filtered; #dragged = null; #serviceurl; constructor(){ super() this.#boot = document.querySelector("d4s-boot-2") this.#serviceurl = this.getAttribute("serviceurl") this.#rootdoc = this.attachShadow({ "mode" : "open"}) this.render() this.fetchProcesses() } render(){ this.#rootdoc.innerHTML = `
` } connectedCallback(){ } fetchProcesses(){ console.log("Calling fetch processes") this.#boot.secureFetch(this.#serviceurl + "/methods"). then(resp=>{ console.log("Received resp for processes ", resp.status) return resp.json() }).then(data=>{ console.log("Processes parsed to json", data) this.#data = data this.showList() }).catch(err=>{ alert("Error while downloading methods: ", err) }) } showList(){ this.enableSearch() this.updateList() } updateList(filter){ if(filter === "" || filter == null || filter == undefined){ this.#filtered = [] }else{ const f = filter.toLowerCase() this.#filtered = this.#data.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, on_dragstart : ev=>{ ev.dataTransfer.effectAllowed = 'move' ev.dataTransfer.setData('text/html', ev.currentTarget.innerHTML) ev.dataTransfer.setData('text/plain+ccpmethod', ev.currentTarget.bss_input.data.id) ev.dataTransfer.setData('application/json+ccpmethod', JSON.stringify(ev.currentTarget.bss_input.data)) }, on_dragend : ev=>{ ev.preventDefault() }, recurse : [ { target : "h4", apply : (e,d)=>{ e.textContent = `${d.title} v. ${d.version}` } }, { target : "i", apply : (e,d)=>{ e.textContent = d.description } }, { target : "ul[name=authors]", recurse : { target : "li", "in" : (e,d)=>d.metadata.filter(md=>md.role === "author"), apply : (e,d)=>{ e.textContent = d.title } } }, { target : "ul[name=keywords]", 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);