cdn-experiments/ccp/js/executionformcontroller.js

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 = `<d4s-ccp-input input='${JSON.stringify(d)}'></d4s-ccp-input>`
            }
          }
        ]
      },
      {
        target: "div.ccp-outputs",
        in : (e,d)=>d,
        recurse : [
          {
            "in" : (e,d)=>{ return Object.values(d.outputs) },
            target : "div",
            apply : (e,d)=>{
              e.innerHTML = `<d4s-ccp-output output='${JSON.stringify(d)}'></d4s-ccp-output>`
            }
          }
        ]
      },
      {
        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);