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);