class CCPExecutionForm extends HTMLElement{ #boot; #rootdoc; #data; #method; #infrastructurecontroller; #serviceurl = "https://nubis1.int.d4science.net:8080" //#cdnurl = "https://nubis1.int.d4science.net:8080/ccp/executionformfragment.html" #cdnurl = "http://d4science-cdn-public:8984/resources/ccp/executionformfragment.html" constructor(){ super() this.#boot = document.querySelector("d4s-boot-2") this.#rootdoc = this.attachShadow({ "mode" : "open"}) this.#infrastructurecontroller = document.querySelector("d4s-ccp-infrastructurelist") this.fetchMarkup() } static get observedAttributes() { return ["method"]; } attributeChangedCallback(name, oldValue, newValue) { if((oldValue != newValue) && (name === "method")){ this.#method = newValue this.loadMethod() } } fetchMarkup(){ return fetch(this.#cdnurl).then( (reply)=>{ if(reply.status === 200){ return reply.text() }else{ throw new Exception("Unable to fetch markup") } }).then(data=>{ this.#rootdoc.innerHTML = data this.showMethod() }).catch(err=>{ console.error(err) }) } loadMethod(){ this.#boot.secureFetch(this.#serviceurl + "/processes/" + this.#method).then( (resp)=>{ if(resp.status === 200){ return resp.json() }else throw "Error retrieving process" } ).then(data=>{ this.#data = data this.showMethod() }).catch(err=>alert(err)) } showEmpty(resp){ BSS.apply(this.#empty_executionform_bss, this.#rootdoc) } showMethod(){ if(this.#method == null) this.showEmpty(); else{ console.log(this.#data) BSS.apply(this.#executionform_bss, this.#rootdoc) } } sendExecutionRequest(){ const url = this.#serviceurl + "/processes/" + this.#method + "/execution" this.#boot.secureFetch( url, { method : "POST", body : JSON.stringify({}), headers : { "Content-Type" : "application/json"}} ).then(reply=>{ if(reply.status !== 200 && reply.status !== 201){ throw "Error while requesting resource" } console.log("Execution reuqest sent") }).catch(err => alert("Unable to call execute")) } #empty_executionform_bss = { template : "#EXECUTION_FORM_EMPTY_TEMPLATE", target : "div[name=execution_form]", on_drop : ev=>{ if(ev.dataTransfer && ev.dataTransfer.getData('text/plain+ccpmethod')){ const id = ev.dataTransfer.getData('text/plain+ccpmethod') this.setAttribute("method", id); ev.preventDefault() ev.stopPropagation() ev.currentTarget.style.backgroundColor = "white" } }, on_dragover : ev=>{ ev.preventDefault() }, } #executionform_bss = { template : "#EXECUTION_FORM_TEMPLATE", target : "div[name=execution_form]", in : ()=>this.#data, on_drop : ev=>{ if(ev.dataTransfer && ev.dataTransfer.getData('text/plain+ccpmethod')){ const id = ev.dataTransfer.getData('text/plain+ccpmethod'); this.setAttribute("method", id); ev.preventDefault() ev.stopPropagation() } }, on_dragover : ev=>{ ev.preventDefault() }, recurse : [ { target: "h3", apply : (e,d)=>e.textContent = d.title + " (v. " + d.version + ")" }, { target: "p.description", apply : (e,d)=>e.textContent = d.description }, { target: "div.ccp-inputs", in : (e,d)=>d, recurse : [ { "in" : (e,d)=>{ return Object.values(d.inputs) }, target : "div", apply : (e,d)=>{ e.innerHTML = `` } } ] }, { target: "div.ccp-outputs", in : (e,d)=>d, recurse : [ { "in" : (e,d)=>{ return Object.values(d.outputs) }, target : "div", apply : (e,d)=>{ e.innerHTML = `` } } ] }, { target: "div.ccp-runtimes *[name=refresh-runtimes]", on_click : ev=>{ BSS.apply(this.#executionform_bss) } }, { target: "div.ccp-runtimes select", in : (e,d)=>d, recurse : [ { "in" : (e,d)=>{ const rts = d.links.filter(l=> l.rel === "compatibleWith").map(l=>l.href.replace("runtimes/","")) return this.#infrastructurecontroller.getCompatibleRuntimes(rts) }, target : "option", apply : (e,d)=>{ e.value = d.runtime["descriptor-id"] e.textContent = `${d.runtime.name} [${d.infrastructure.name}]` } } ] }, { target: "#execute_method_button", on_click : ev=>{ ev.preventDefault() ev.stopPropagation() this.sendExecutionRequest() return false; } }, ] } } window.customElements.define('d4s-ccp-executionform', CCPExecutionForm);