cdn-experiments/ccp/js/executionformcontroller.js

class CCPExecutionForm extends HTMLElement{
  
  #boot;
  #rootdoc;
  #data;
  #method;
  
  #serviceurl = "https://nubis1.int.d4science.net:8080" 
  #cdnurl = "https://nubis1.int.d4science.net:8080/ccp/executionformfragment.html"
  
  constructor(){
    super()
    this.#boot = document.querySelector("d4s-boot-2")
    this.#rootdoc = this.attachShadow({ "mode" : "open"})
    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.service(this.#serviceurl + "/processes/" + this.#method, "GET", null, 
      (resp)=>{
        this.#data = JSON.parse(resp)
        this.showMethod()
      }, 
      ()=>{ alert("Unable to load method") })
  }
  
  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)
    }
  }
  
  #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 : "form[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>`
            }
          }
        ]
      }
    ]
  }
  
}

window.customElements.define('d4s-ccp-executionform', CCPExecutionForm);