667 lines
20 KiB
JavaScript
667 lines
20 KiB
JavaScript
|
class CCPMethodEditorController extends HTMLElement{
|
||
|
|
|
||
|
|
#boot;
|
||
|
|
#rootdoc;
|
||
|
|
|
||
|
|
#serviceurl = "https://nubis1.int.d4science.net:8080"
|
||
|
|
#runtimes;
|
||
|
|
#locked = false;
|
||
|
|
|
||
|
|
#tmp_inputs = []
|
||
|
|
#tmp_outputs = []
|
||
|
|
#current = null;
|
||
|
|
#method_template = {
|
||
|
|
id : "",
|
||
|
|
title : "New Method",
|
||
|
|
description : "New empty method",
|
||
|
|
version : "1.0.0",
|
||
|
|
jobControlOptions : "async-execute",
|
||
|
|
inputs : {},
|
||
|
|
outputs : {},
|
||
|
|
additionalParameters : {
|
||
|
|
parameters : [
|
||
|
|
{
|
||
|
|
name : "deploy-script",
|
||
|
|
value : [
|
||
|
|
`
|
||
|
|
- hosts: localhost
|
||
|
|
tasks:
|
||
|
|
- name: hookup instance
|
||
|
|
add_host:
|
||
|
|
name: "{ instancename }"
|
||
|
|
ansible_connection: lxd
|
||
|
|
groupname: "targets"
|
||
|
|
`
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name : "execute-script",
|
||
|
|
value : [
|
||
|
|
`
|
||
|
|
- hosts: localhost
|
||
|
|
tasks:
|
||
|
|
- name: hookup instance
|
||
|
|
add_host:
|
||
|
|
name: "{ instancename }"
|
||
|
|
ansible_connection: lxd
|
||
|
|
groupname: "targets"
|
||
|
|
`
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name : "fetch-output-script",
|
||
|
|
value : [
|
||
|
|
`
|
||
|
|
- hosts: localhost
|
||
|
|
tasks:
|
||
|
|
- name: hookup instance
|
||
|
|
add_host:
|
||
|
|
name: "{ instancename }"
|
||
|
|
ansible_connection: lxd
|
||
|
|
groupname: "targets"
|
||
|
|
`
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name : "undeploy-script",
|
||
|
|
value : [
|
||
|
|
`
|
||
|
|
- hosts: localhost
|
||
|
|
tasks:
|
||
|
|
- name: hookup instance
|
||
|
|
add_host:
|
||
|
|
name: "{ instancename }"
|
||
|
|
ansible_connection: lxd
|
||
|
|
groupname: "targets"
|
||
|
|
`
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name : "cancel-script",
|
||
|
|
value : [
|
||
|
|
`
|
||
|
|
- hosts: localhost
|
||
|
|
tasks:
|
||
|
|
- name: hookup instance
|
||
|
|
add_host:
|
||
|
|
name: "{ instancename }"
|
||
|
|
ansible_connection: lxd
|
||
|
|
groupname: "targets"
|
||
|
|
`
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
links : []
|
||
|
|
}
|
||
|
|
|
||
|
|
#style = `
|
||
|
|
<link rel="stylesheet" href="https://cdn.dev.d4science.org/ccp/css/common.css"></link>
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||
|
|
<style>
|
||
|
|
.ccp-method-editor {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ccp-toolbar-button {
|
||
|
|
font-weight: bold;
|
||
|
|
padding:.3rem;
|
||
|
|
line-height:.8rem;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ccp-toolbar-button svg {
|
||
|
|
fill: white;
|
||
|
|
width:24px;
|
||
|
|
height:24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ccp-option {
|
||
|
|
background-color:#eeffff;
|
||
|
|
color:#0099CC;
|
||
|
|
border:solid 1px #0099CC;
|
||
|
|
}
|
||
|
|
|
||
|
|
.plexiglass{
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: rgba(0,0,0,.3);
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
`
|
||
|
|
#erase_icon = `
|
||
|
|
<svg viewBox="0 0 24 24">
|
||
|
|
<path d="M16.24,3.56L21.19,8.5C21.97,9.29 21.97,10.55 21.19,11.34L12,20.53C10.44,22.09 7.91,22.09 6.34,20.53L2.81,17C2.03,16.21 2.03,14.95 2.81,14.16L13.41,3.56C14.2,2.78 15.46,2.78 16.24,3.56M4.22,15.58L7.76,19.11C8.54,19.9 9.8,19.9 10.59,19.11L14.12,15.58L9.17,10.63L4.22,15.58Z" />
|
||
|
|
`
|
||
|
|
|
||
|
|
#plus_icon = `
|
||
|
|
<svg viewBox="0 0 24 24">
|
||
|
|
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
|
||
|
|
</svg>
|
||
|
|
`
|
||
|
|
#disc_icon = `
|
||
|
|
<svg viewBox="0 0 24 24">
|
||
|
|
<path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />
|
||
|
|
</svg>
|
||
|
|
`
|
||
|
|
#output_icon = `
|
||
|
|
<svg viewBox="0 0 24 24">
|
||
|
|
<path d="M23,12L19,8V11H10V13H19V16M1,18V6C1,4.89 1.9,4 3,4H15A2,2 0 0,1 17,6V9H15V6H3V18H15V15H17V18A2,2 0 0,1 15,20H3A2,2 0 0,1 1,18Z" />
|
||
|
|
</svg>
|
||
|
|
`
|
||
|
|
|
||
|
|
#ansible_icon = `
|
||
|
|
<svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10s10-4.5 10-10S17.5 2 12 2m4.1 15c-.19 0-.34-.1-.55-.27l-5.16-4.17l-1.73 4.34H7.17l4.37-10.51c.11-.28.35-.42.63-.42s.5.14.62.42l3.98 9.58c.04.11.07.22.07.29c-.01.42-.34.74-.74.74m-3.93-8.89l2.59 6.39l-3.91-3.08l1.32-3.31Z"></path>
|
||
|
|
</svg>
|
||
|
|
`
|
||
|
|
|
||
|
|
constructor(){
|
||
|
|
super();
|
||
|
|
this.#boot = document.querySelector("d4s-boot-2")
|
||
|
|
this.#rootdoc = this.attachShadow({ "mode" : "open"})
|
||
|
|
this.fetchRuntimes()
|
||
|
|
}
|
||
|
|
|
||
|
|
connectedCallback(){
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
fetchRuntimes(){
|
||
|
|
this.#boot.secureFetch(this.#serviceurl + "/runtimes").
|
||
|
|
then(resp=>{
|
||
|
|
if(resp.status !== 200) throw "Unable to fetch runtimes";
|
||
|
|
return resp.json()
|
||
|
|
}).then(data=>{
|
||
|
|
this.#runtimes = data
|
||
|
|
this.render()
|
||
|
|
}).catch(err=>{
|
||
|
|
alert(err)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
saveCurrent(){
|
||
|
|
if(this.#current != null){
|
||
|
|
this.adoptTemporaries()
|
||
|
|
console.log(this.#current)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
cloneMethod(method){
|
||
|
|
if(this.#locked) return;
|
||
|
|
this.lockRender()
|
||
|
|
this.#boot.secureFetch(this.#serviceurl + "/processes/" + method).then(
|
||
|
|
(resp)=>{
|
||
|
|
if(resp.status === 200){
|
||
|
|
return resp.json()
|
||
|
|
}else throw "Error retrieving process"
|
||
|
|
}
|
||
|
|
).then(data=>{
|
||
|
|
this.#current = data
|
||
|
|
this.#current.id = ""
|
||
|
|
this.#tmp_inputs = Object.keys(this.#current.inputs).map(k=>this.#current.inputs[k])
|
||
|
|
this.#tmp_outputs = Object.keys(this.#current.outputs).map(k=>this.#current.outputs[k])
|
||
|
|
this.unlockRender()
|
||
|
|
}).catch(err=>{
|
||
|
|
this.unlockRender()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
adoptTemporaries(){
|
||
|
|
this.#current.inputs = {}
|
||
|
|
this.#tmp_inputs.forEach(t=>{
|
||
|
|
this.#current.inputs[t.id] = t
|
||
|
|
})
|
||
|
|
this.#current.outputs = {}
|
||
|
|
this.#tmp_outputs.forEach(t=>{
|
||
|
|
this.#current.outputs[t.id] = t
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
getInputAt(i){
|
||
|
|
return this.#tmp_inputs[i]
|
||
|
|
}
|
||
|
|
|
||
|
|
deleteTmpInputAt(i){
|
||
|
|
this.#tmp_inputs.splice(i,1)
|
||
|
|
}
|
||
|
|
|
||
|
|
deleteTmpOutputAt(i){
|
||
|
|
this.#tmp_outputs.splice(i,1)
|
||
|
|
}
|
||
|
|
|
||
|
|
lockRender(){
|
||
|
|
this.#locked = true
|
||
|
|
this.#rootdoc.querySelector(".plexiglass").classList.toggle("d-none")
|
||
|
|
}
|
||
|
|
|
||
|
|
unlockRender(){
|
||
|
|
this.#rootdoc.querySelector(".plexiglass").classList.toggle("d-none")
|
||
|
|
this.render()
|
||
|
|
this.#locked = false
|
||
|
|
}
|
||
|
|
|
||
|
|
render(){
|
||
|
|
if(this.#current == null){
|
||
|
|
this.#current = JSON.parse(JSON.stringify(this.#method_template))
|
||
|
|
this.#current.id = Math.random(10e6)|0
|
||
|
|
}
|
||
|
|
this.#rootdoc.innerHTML = `
|
||
|
|
<div class="ccp-method-editor">
|
||
|
|
<div class="d-none plexiglass">
|
||
|
|
<svg class="spinner" viewBox="0 0 66 66">
|
||
|
|
<circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
${this.#style}
|
||
|
|
<div class="ccp-method-editor-form">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-header">
|
||
|
|
<div>
|
||
|
|
<span class="mr-2">${this.#current.title}</span>
|
||
|
|
${this.renderSaveButton()}
|
||
|
|
${this.renderResetButton()}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="mb-3 row">
|
||
|
|
<div class="col">
|
||
|
|
<label class="form-label">Title</label>
|
||
|
|
<input name="title" class="form-control" type="text" required="required" value="${this.#current.title}"/>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<label class="form-label">Version</label>
|
||
|
|
<input name="version" class="form-control" type="text" required="required" value="${this.#current.version}"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mb-3">
|
||
|
|
<label class="form-label">Description</label>
|
||
|
|
<input name="description" class="form-control" type="text" required="required" value="${this.#current.description}"/>
|
||
|
|
</div>
|
||
|
|
<div class="mb-3">
|
||
|
|
<label class="form-label">Keywords</label>
|
||
|
|
<input name="keyword-input" class="form-control" type="text"/>
|
||
|
|
<div name="keyword-list" class="form-text">
|
||
|
|
${this.renderKeywords()}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div name="runtimes" class="mb-3">
|
||
|
|
<label class="form-label">Compatible Runtimes</label>
|
||
|
|
<select name="runtime-input" class="form-control">
|
||
|
|
${this.renderRuntimeOptions()}
|
||
|
|
</select>
|
||
|
|
<div name="runtime-list" class="form-text">
|
||
|
|
${this.renderRuntimes()}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<details class="card">
|
||
|
|
<summary class="card-header">
|
||
|
|
<span class="mr-2">Inputs</span>
|
||
|
|
${this.renderPlusButton("add-input")}
|
||
|
|
</summary>
|
||
|
|
<div class="card-body" name="input-list">
|
||
|
|
</div>
|
||
|
|
</details>
|
||
|
|
<details class="card">
|
||
|
|
<summary class="card-header" name="output-buttons">
|
||
|
|
<span class="mr-2">Outputs</span>
|
||
|
|
${this.renderStandardOutputButtons()}
|
||
|
|
${this.renderPlusButton("add-output")}
|
||
|
|
</summary>
|
||
|
|
<div class="card-body" name="output-list">
|
||
|
|
<d4s-ccp-output-editor></d4s-ccp-output-editor>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<details class="card" name="script-list">
|
||
|
|
<summary class="card-header">
|
||
|
|
<span>Scripts</span>
|
||
|
|
<select name="script-selector" style="border:none; padding:.3rem">
|
||
|
|
<option value="deploy-script">Deploy</option>
|
||
|
|
<option value="execute-script">Execute</option>
|
||
|
|
<option value="fetch-output-script">Fetch output</option>
|
||
|
|
<option value="undeploy-script">Undeploy</option>
|
||
|
|
<option value="cancel-script">Cancel</option>
|
||
|
|
</select>
|
||
|
|
${ this.renderAnsibleIcon() }
|
||
|
|
</summary>
|
||
|
|
<div class="card-body" name="input_container">
|
||
|
|
${this.renderScripts()}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
this.renderInputs()
|
||
|
|
this.renderOutputs()
|
||
|
|
|
||
|
|
this.#rootdoc.addEventListener("drop", ev=>{
|
||
|
|
if(ev.dataTransfer && ev.dataTransfer.getData('text/plain+ccpmethod')){
|
||
|
|
const id = ev.dataTransfer.getData('text/plain+ccpmethod')
|
||
|
|
ev.preventDefault()
|
||
|
|
ev.stopPropagation()
|
||
|
|
this.cloneMethod(id)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
this.#rootdoc.addEventListener("dragover", ev=>{
|
||
|
|
ev.preventDefault()
|
||
|
|
})
|
||
|
|
|
||
|
|
this.#rootdoc.querySelector("button[name=reset]").addEventListener("click", ev=>{
|
||
|
|
this.#current = this.#method_template
|
||
|
|
this.#tmp_inputs = []
|
||
|
|
this.#tmp_outputs = []
|
||
|
|
this.render()
|
||
|
|
ev.preventDefault()
|
||
|
|
ev.stopPropagation()
|
||
|
|
})
|
||
|
|
|
||
|
|
this.#rootdoc.querySelector("button[name=save]").addEventListener("click", ev=>{
|
||
|
|
ev.preventDefault()
|
||
|
|
ev.stopPropagation()
|
||
|
|
this.saveCurrent()
|
||
|
|
})
|
||
|
|
|
||
|
|
this.#rootdoc.querySelector("input[name=keyword-input]").addEventListener("keypress", ev=>{
|
||
|
|
if(ev.key === "Enter" || ev.which === 13){
|
||
|
|
ev.preventDefault()
|
||
|
|
ev.stopPropagation()
|
||
|
|
const val = ev.target.value
|
||
|
|
ev.target.value = null
|
||
|
|
if(!this.#current.keywords){
|
||
|
|
this.#current.keywords = [val]
|
||
|
|
}else{
|
||
|
|
this.#current.keywords.push(val)
|
||
|
|
}
|
||
|
|
this.reRenderKeywords()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
this.#rootdoc.querySelector("div[name=keyword-list]").addEventListener("click", ev=>{
|
||
|
|
ev.preventDefault()
|
||
|
|
ev.stopPropagation()
|
||
|
|
if(ev.target.getAttribute('name') === "delete-keyword"){
|
||
|
|
const index = ev.target.getAttribute("data-index")
|
||
|
|
this.#current.keywords.splice(index, 1)
|
||
|
|
this.reRenderKeywords()
|
||
|
|
this.#rootdoc.querySelector("input[name=keyword-input]").focus()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
this.#rootdoc.querySelector("div[name=runtimes]").addEventListener("change", ev=>{
|
||
|
|
if(ev.target.getAttribute("name") === "runtime-input" && ev.target.value){
|
||
|
|
ev.preventDefault()
|
||
|
|
ev.stopPropagation()
|
||
|
|
const id = ev.target.value
|
||
|
|
const display = ev.target.options[ev.target.selectedIndex].text
|
||
|
|
let link = {
|
||
|
|
rel : "compatibleWith", title : display, href : "runtimes/" + id
|
||
|
|
}
|
||
|
|
if(!this.#current.links){
|
||
|
|
this.#current.links = [link]
|
||
|
|
}else{
|
||
|
|
this.#current.links.push(link)
|
||
|
|
}
|
||
|
|
this.reRenderRuntimes(ev.currentTarget)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
this.#rootdoc.querySelector("div[name=runtime-list]").addEventListener("click", ev=>{
|
||
|
|
ev.preventDefault()
|
||
|
|
ev.stopPropagation()
|
||
|
|
if(ev.target.getAttribute('name') === "delete-runtime"){
|
||
|
|
const index = ev.target.getAttribute("data-index")
|
||
|
|
this.#current.links.splice(index, 1)
|
||
|
|
this.reRenderRuntimes()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
this.#rootdoc.querySelector("button[name=add-input]").addEventListener("click", ev=>{
|
||
|
|
ev.preventDefault()
|
||
|
|
ev.stopPropagation()
|
||
|
|
this.#tmp_inputs.push(
|
||
|
|
{
|
||
|
|
id : "new_input",
|
||
|
|
title : "New input",
|
||
|
|
description : "A new input field",
|
||
|
|
minOccurs : 1,
|
||
|
|
maxOccurs : 1,
|
||
|
|
schema : {
|
||
|
|
type : "string",
|
||
|
|
format : null,
|
||
|
|
contentMediaType : null,
|
||
|
|
default : ""
|
||
|
|
}
|
||
|
|
}
|
||
|
|
)
|
||
|
|
this.renderInputs()
|
||
|
|
})
|
||
|
|
|
||
|
|
this.#rootdoc.querySelector("div[name=input-list]").addEventListener("click", ev=>{
|
||
|
|
const evname = ev.target.getAttribute('name')
|
||
|
|
if(evname === "delete-input"){
|
||
|
|
ev.preventDefault()
|
||
|
|
ev.stopPropagation()
|
||
|
|
const index = Number(ev.target.getAttribute("data-index"))
|
||
|
|
console.log("deleting input at index", index)
|
||
|
|
this.deleteTmpInputAt(index)
|
||
|
|
this.renderInputs()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
this.#rootdoc.querySelector("button[name=add-output]").addEventListener("click", ev=>{
|
||
|
|
ev.preventDefault()
|
||
|
|
ev.stopPropagation()
|
||
|
|
this.#tmp_outputs.push(
|
||
|
|
{
|
||
|
|
id : "new_output",
|
||
|
|
title : "New ouput",
|
||
|
|
description : "A new output field",
|
||
|
|
minOccurs : 1,
|
||
|
|
maxOccurs : 1,
|
||
|
|
schema : {
|
||
|
|
type : "string",
|
||
|
|
contentMediaType : null
|
||
|
|
}
|
||
|
|
}
|
||
|
|
)
|
||
|
|
this.renderOutputs()
|
||
|
|
})
|
||
|
|
|
||
|
|
this.#rootdoc.querySelector("button[name=add-stdout]").addEventListener("click", ev=>{
|
||
|
|
ev.preventDefault()
|
||
|
|
ev.stopPropagation()
|
||
|
|
this.#tmp_outputs.push(
|
||
|
|
{
|
||
|
|
id : "stdout",
|
||
|
|
title : "Standard output",
|
||
|
|
description : "Standard output channel",
|
||
|
|
minOccurs : 1,
|
||
|
|
maxOccurs : 1,
|
||
|
|
schema : {
|
||
|
|
type : "string",
|
||
|
|
contentMediaType : "text/plain"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
)
|
||
|
|
this.renderOutputs()
|
||
|
|
})
|
||
|
|
|
||
|
|
this.#rootdoc.querySelector("button[name=add-stderr]").addEventListener("click", ev=>{
|
||
|
|
ev.preventDefault()
|
||
|
|
ev.stopPropagation()
|
||
|
|
this.#tmp_outputs.push(
|
||
|
|
{
|
||
|
|
id : "stderr",
|
||
|
|
title : "Standard error",
|
||
|
|
description : "Standard error channel",
|
||
|
|
minOccurs : 1,
|
||
|
|
maxOccurs : 1,
|
||
|
|
schema : {
|
||
|
|
type : "string",
|
||
|
|
contentMediaType : "text/plain"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
)
|
||
|
|
this.renderOutputs()
|
||
|
|
})
|
||
|
|
|
||
|
|
this.#rootdoc.querySelector("div[name=output-list]").addEventListener("click", ev=>{
|
||
|
|
const evname = ev.target.getAttribute('name')
|
||
|
|
if(evname === "delete-output"){
|
||
|
|
ev.preventDefault()
|
||
|
|
ev.stopPropagation()
|
||
|
|
const index = Number(ev.target.getAttribute("data-index"))
|
||
|
|
console.log("deleting output at index", index)
|
||
|
|
this.deleteTmpOutputAt(index)
|
||
|
|
this.renderOutputs()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
this.#rootdoc.querySelector("select[name=script-selector]").addEventListener("change", ev=>{
|
||
|
|
ev.preventDefault()
|
||
|
|
ev.stopPropagation()
|
||
|
|
const scriptname = ev.target.value
|
||
|
|
const areas = Array.prototype.slice.call(this.#rootdoc.querySelectorAll("textarea.script-area"))
|
||
|
|
areas.forEach(a=>{
|
||
|
|
if(a.getAttribute("name") === scriptname) a.classList.remove("d-none");
|
||
|
|
else a.classList.add("d-none")
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
this.#rootdoc.querySelector("details[name=script-list]").addEventListener("input", ev=>{
|
||
|
|
ev.preventDefault()
|
||
|
|
ev.stopPropagation()
|
||
|
|
const scriptname = ev.target.getAttribute("name")
|
||
|
|
const script = this.#current.additionalParameters.parameters.filter(p=>p.name === scriptname)[0]
|
||
|
|
if(script) script.value[0] = ev.target.value;
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
renderAnsibleIcon(){
|
||
|
|
return `
|
||
|
|
<div title="Ansible" style="width:2rem;height:2rem;display:inline-block;vertical-align:middle;position:absolute;right:0;margin-right:1rem;opacity:0.4;">
|
||
|
|
${ this.#ansible_icon }
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
}
|
||
|
|
|
||
|
|
renderSaveButton(){
|
||
|
|
return `
|
||
|
|
<button title="Save" name="save" class="btn btn-primary ccp-toolbar-button">
|
||
|
|
${this.#disc_icon}
|
||
|
|
</button>
|
||
|
|
`
|
||
|
|
}
|
||
|
|
|
||
|
|
renderResetButton(){
|
||
|
|
return `
|
||
|
|
<button name="reset" title="Reset" class="btn btn-primary ccp-toolbar-button">
|
||
|
|
<svg viewBox="0 0 24 24">
|
||
|
|
${this.#erase_icon}
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
`
|
||
|
|
}
|
||
|
|
|
||
|
|
renderPlusButton(name){
|
||
|
|
return `
|
||
|
|
<button name="${name}" title="Add" name="reset" class="btn btn-primary ccp-toolbar-button">
|
||
|
|
${this.#plus_icon}
|
||
|
|
</button>
|
||
|
|
`
|
||
|
|
}
|
||
|
|
|
||
|
|
renderStandardOutputButtons(){
|
||
|
|
return `
|
||
|
|
<button name="add-stdout" title="Add stdout" name="reset" class="btn btn-success ccp-toolbar-button">
|
||
|
|
${this.#output_icon}
|
||
|
|
</button>
|
||
|
|
<button name="add-stderr" title="Add stderr" name="reset" class="btn btn-danger ccp-toolbar-button">
|
||
|
|
${this.#output_icon}
|
||
|
|
</button>
|
||
|
|
`
|
||
|
|
}
|
||
|
|
|
||
|
|
reRenderKeywords(){
|
||
|
|
this.#rootdoc.querySelector("div[name=keyword-list]").innerHTML = this.renderKeywords()
|
||
|
|
}
|
||
|
|
|
||
|
|
renderKeywords(){
|
||
|
|
if(this.#current.keywords){
|
||
|
|
return this.#current.keywords.map((k,i) => {
|
||
|
|
return `
|
||
|
|
<div class="ccp-option badge ccp-keyword">
|
||
|
|
<span>${k}</span>
|
||
|
|
<span class="btn text-danger ccp-toolbar-button" name="delete-keyword" data-index="${i}">x</span>
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
}).join("\n")
|
||
|
|
}else{
|
||
|
|
return ""
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
reRenderRuntimes(){
|
||
|
|
this.#rootdoc.querySelector("select[name=runtime-input]").innerHTML = this.renderRuntimeOptions()
|
||
|
|
this.#rootdoc.querySelector("div[name=runtime-list]").innerHTML = this.renderRuntimes()
|
||
|
|
}
|
||
|
|
|
||
|
|
renderRuntimeOptions(){
|
||
|
|
const selectedrts = this.#current.links.filter(l=>l.rel === "compatibleWith").map(r=>r.href.split("/")[1])
|
||
|
|
const available = this.#runtimes.filter(r=>{ return selectedrts.indexOf(r.id) === -1 })
|
||
|
|
return `
|
||
|
|
<option></option>
|
||
|
|
${
|
||
|
|
available.map(rt=>{
|
||
|
|
return `
|
||
|
|
<option value="${rt.id}">${rt.name}</option>
|
||
|
|
`
|
||
|
|
}).join("\n")
|
||
|
|
}
|
||
|
|
`
|
||
|
|
}
|
||
|
|
|
||
|
|
renderRuntimes(){
|
||
|
|
return this.#current.links.filter(l=>l.rel === "compatibleWith").map((l, i)=>{
|
||
|
|
return `
|
||
|
|
<div class="ccp-option badge ccp-keyword">
|
||
|
|
<span>${l.title}</span>
|
||
|
|
<span class="btn text-danger ccp-toolbar-button" name="delete-runtime" data-index="${i}">x</span>
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
}).join("\n")
|
||
|
|
}
|
||
|
|
|
||
|
|
renderInputs(){
|
||
|
|
const parent = this.#rootdoc.querySelector("div[name=input-list]")
|
||
|
|
parent.innerHTML = ""
|
||
|
|
return this.#tmp_inputs.map((inp, i)=>{
|
||
|
|
const c = document.createElement("d4s-ccp-input-editor");
|
||
|
|
parent.appendChild(c)
|
||
|
|
c.render(inp, i)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
renderOutputs(){
|
||
|
|
const parent = this.#rootdoc.querySelector("div[name=output-list]")
|
||
|
|
parent.innerHTML = ""
|
||
|
|
return this.#tmp_outputs.map((outp, i)=>{
|
||
|
|
const c = document.createElement("d4s-ccp-output-editor");
|
||
|
|
parent.appendChild(c)
|
||
|
|
c.render(outp, i)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
renderScripts(){
|
||
|
|
return this.#current.additionalParameters.parameters.map(
|
||
|
|
(script, i) => `<textarea rows="5" class="script-area form-control ${ i > 0 ? 'd-none' : ''}" name="${script.name}">${script.value[0]}</textarea>`
|
||
|
|
).join("\n")
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
window.customElements.define('d4s-ccp-methodeditor', CCPMethodEditorController);
|