scripts are always visible. fix missing cancel on geo widget. inputs show default preview when closed. Method description is now text area. Method list and execution form have limit on description length display
This commit is contained in:
dcore94
parent
9af993ac6c
commit
7fae770186
|
|
@ -1,55 +1,55 @@
|
|||
class CCPExecutionForm extends HTMLElement{
|
||||
|
||||
class CCPExecutionForm extends HTMLElement {
|
||||
|
||||
#boot;
|
||||
#rootdoc;
|
||||
#data;
|
||||
#method;
|
||||
#serviceurl;
|
||||
#serviceurl;
|
||||
#messages = {
|
||||
"en" : {
|
||||
"confirm_form_overwrite" : "Please confirm the overwrite of the previous execution form.",
|
||||
"Inputs" : "Inputs",
|
||||
"Options" : "Options",
|
||||
"Outputs" : "Outputs",
|
||||
"Execute" : "Execute",
|
||||
"execute_help" : "Submit an execution request",
|
||||
"generate_code" : "Generate code for",
|
||||
"generate_code_help" : "Generate example code for a selectable programming language or runtime",
|
||||
"direct_link" : "Direct link",
|
||||
"direct_link_help" : "Navigate to the link for directly reopening this method in the execution form",
|
||||
"automatic_archive_option" : "Select what you like to archive automatically when the execution is completed",
|
||||
"automatic_archive_provenance" : "Automatically archive whole execution provenance",
|
||||
"automatic_archive_provenance_help" : "Automatically archive the whole execution provenance to the workspace",
|
||||
"automatic_archive_outputs" : "Automatically archive uncompressed outputs only",
|
||||
"automatic_archive_outputs_help" : "Automatically archive only the outputs to the workspace",
|
||||
"automatic_archive_none" : "Do not archive anything automatically",
|
||||
"automatic_archive_none_help" : "Do not archive anything automatically",
|
||||
"execution_accepted" : "Execution request accepted with id: ",
|
||||
"drop_method_invitation" : "Drop a method here to request an execution",
|
||||
"err_execution_not_accepted" : "Error. Execution has not been accepted by server",
|
||||
"err_code_generation" : "Error while generating code",
|
||||
"err_load_method" : "Error while loading method",
|
||||
"err_no_runtimes" : "This method has no compatible runtimes available",
|
||||
"err_execute" : "Error while sending execution request",
|
||||
"en": {
|
||||
"confirm_form_overwrite": "Please confirm the overwrite of the previous execution form.",
|
||||
"Inputs": "Inputs",
|
||||
"Options": "Options",
|
||||
"Outputs": "Outputs",
|
||||
"Execute": "Execute",
|
||||
"execute_help": "Submit an execution request",
|
||||
"generate_code": "Generate code for",
|
||||
"generate_code_help": "Generate example code for a selectable programming language or runtime",
|
||||
"direct_link": "Direct link",
|
||||
"direct_link_help": "Navigate to the link for directly reopening this method in the execution form",
|
||||
"automatic_archive_option": "Select what you like to archive automatically when the execution is completed",
|
||||
"automatic_archive_provenance": "Automatically archive whole execution provenance",
|
||||
"automatic_archive_provenance_help": "Automatically archive the whole execution provenance to the workspace",
|
||||
"automatic_archive_outputs": "Automatically archive uncompressed outputs only",
|
||||
"automatic_archive_outputs_help": "Automatically archive only the outputs to the workspace",
|
||||
"automatic_archive_none": "Do not archive anything automatically",
|
||||
"automatic_archive_none_help": "Do not archive anything automatically",
|
||||
"execution_accepted": "Execution request accepted with id: ",
|
||||
"drop_method_invitation": "Drop a method here to request an execution",
|
||||
"err_execution_not_accepted": "Error. Execution has not been accepted by server",
|
||||
"err_code_generation": "Error while generating code",
|
||||
"err_load_method": "Error while loading method",
|
||||
"err_no_runtimes": "This method has no compatible runtimes available",
|
||||
"err_execute": "Error while sending execution request",
|
||||
}
|
||||
}
|
||||
|
||||
constructor(){
|
||||
constructor() {
|
||||
super()
|
||||
this.#boot = document.querySelector("d4s-boot-2")
|
||||
this.#rootdoc = this.attachShadow({ "mode" : "open"})
|
||||
this.#rootdoc = this.attachShadow({ "mode": "open" })
|
||||
}
|
||||
|
||||
connectedCallback(){
|
||||
|
||||
connectedCallback() {
|
||||
this.#serviceurl = this.getAttribute("serviceurl")
|
||||
this.connectNewExecutionRequest()
|
||||
this.render()
|
||||
|
||||
const params = new URLSearchParams(window.location.search)
|
||||
if(params.get('execution')){
|
||||
const execution = { id : params.get('execution') }
|
||||
this.prepareFromExecution(execution)
|
||||
} else if(params.get('method')){
|
||||
if (params.get('execution')) {
|
||||
const execution = { id: params.get('execution') }
|
||||
this.prepareFromExecution(execution)
|
||||
} else if (params.get('method')) {
|
||||
this.#method = params.get('method')
|
||||
this.loadMethod()
|
||||
} else {
|
||||
|
|
@ -57,11 +57,11 @@ class CCPExecutionForm extends HTMLElement{
|
|||
}
|
||||
}
|
||||
|
||||
static get observedAttributes() {
|
||||
static get observedAttributes() {
|
||||
return ["method"];
|
||||
}
|
||||
|
||||
getLabel(key, localehint){
|
||||
|
||||
getLabel(key, localehint) {
|
||||
const locale = localehint ? localehint : navigator.language
|
||||
const actlocale = this.#messages[locale] ? locale : "en"
|
||||
const msg = this.#messages[actlocale][key]
|
||||
|
|
@ -70,27 +70,27 @@ class CCPExecutionForm extends HTMLElement{
|
|||
|
||||
attributeChangedCallback(name, oldValue, newValue) {
|
||||
//if((oldValue != newValue) && (name === "method")){
|
||||
if(name === "method"){
|
||||
if (name === "method") {
|
||||
this.#method = newValue
|
||||
this.loadMethod()
|
||||
}
|
||||
}
|
||||
|
||||
connectNewExecutionRequest(){
|
||||
document.addEventListener("newexecutionrequest", ev=>{
|
||||
if(this.#data){
|
||||
if(window.confirm(this.getLabel("confirm_form_overwrite"))){
|
||||
|
||||
connectNewExecutionRequest() {
|
||||
document.addEventListener("newexecutionrequest", ev => {
|
||||
if (this.#data) {
|
||||
if (window.confirm(this.getLabel("confirm_form_overwrite"))) {
|
||||
this.setAttribute("method", ev.detail)
|
||||
this.parentElement.scrollIntoViewIfNeeded()
|
||||
this.parentElement.scrollIntoViewIfNeeded()
|
||||
}
|
||||
}else{
|
||||
} else {
|
||||
this.setAttribute("method", ev.detail)
|
||||
this.parentElement.scrollIntoViewIfNeeded()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
render(){
|
||||
|
||||
render() {
|
||||
this.#rootdoc.innerHTML = `
|
||||
<div>
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/modal/">
|
||||
|
|
@ -105,7 +105,7 @@ class CCPExecutionForm extends HTMLElement{
|
|||
<template id="EXECUTION_FORM_TEMPLATE">
|
||||
<div class="ccp-execution-form" name="execution_form">
|
||||
<h5 class="ccp-method-title"></h5>
|
||||
<p class="description font-italic font-weight-lighter"></p>
|
||||
<div class="description font-italic font-weight-lighter"></div>
|
||||
<div class="plexiglass d-none"></div>
|
||||
<form name="execution_form" class="d-flex flex-column gap-3" style="gap:5px">
|
||||
<div class="card">
|
||||
|
|
@ -187,18 +187,18 @@ class CCPExecutionForm extends HTMLElement{
|
|||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
lockRender(){
|
||||
|
||||
lockRender() {
|
||||
const plexi = this.#rootdoc.querySelector(".plexiglass")
|
||||
plexi.innerHTML = ``
|
||||
plexi.classList.toggle("d-none")
|
||||
}
|
||||
|
||||
unlockRender(){
|
||||
|
||||
unlockRender() {
|
||||
this.#rootdoc.querySelector(".plexiglass").classList.toggle("d-none")
|
||||
}
|
||||
|
||||
writeToPlexi(message){
|
||||
|
||||
writeToPlexi(message) {
|
||||
const plexi = this.#rootdoc.querySelector(".plexiglass")
|
||||
plexi.innerHTML = `
|
||||
<div class="d-flex" style="flex-direction: column;justify-content:center;position:relative;height:100%;align-items: center;">
|
||||
|
|
@ -208,67 +208,67 @@ class CCPExecutionForm extends HTMLElement{
|
|||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
loadMethod(){
|
||||
|
||||
loadMethod() {
|
||||
return this.#boot.secureFetch(this.#serviceurl + "/processes/" + this.#method).then(
|
||||
(resp)=>{
|
||||
if(resp.status === 200){
|
||||
(resp) => {
|
||||
if (resp.status === 200) {
|
||||
return resp.json()
|
||||
}else throw this.getLabel("err_load_method")
|
||||
} else throw this.getLabel("err_load_method")
|
||||
}
|
||||
).then(data=>{
|
||||
).then(data => {
|
||||
this.#data = data
|
||||
const infra =
|
||||
const infra =
|
||||
this.#data.links.filter(l => l.rel === "compatibleWith")[0]
|
||||
return this.#boot.secureFetch(this.#serviceurl + "/" + infra.href)
|
||||
|
||||
}).then(resp=>{
|
||||
this.#data.executable = resp.status === 200
|
||||
}).then(()=>{
|
||||
|
||||
}).then(resp => {
|
||||
this.#data.executable = resp.status === 200
|
||||
}).then(() => {
|
||||
this.showMethod()
|
||||
}).catch(err=>alert(err))
|
||||
}).catch(err => alert(err))
|
||||
}
|
||||
|
||||
showEmpty(resp){
|
||||
|
||||
showEmpty(resp) {
|
||||
BSS.apply(this.#empty_executionform_bss, this.#rootdoc)
|
||||
}
|
||||
|
||||
showMethod(){
|
||||
if(this.#method == null) this.showEmpty();
|
||||
else{
|
||||
|
||||
showMethod() {
|
||||
if (this.#method == null) this.showEmpty();
|
||||
else {
|
||||
BSS.apply(this.#executionform_bss, this.#rootdoc)
|
||||
}
|
||||
}
|
||||
|
||||
sendExecutionRequest(){
|
||||
|
||||
sendExecutionRequest() {
|
||||
this.lockRender()
|
||||
const url = this.#serviceurl + "/processes/" + this.#method + "/execution"
|
||||
const req = this.buildRequest()
|
||||
this.#boot.secureFetch(
|
||||
url, { method : "POST", body : JSON.stringify(req), headers : { "Content-Type" : "application/json"}}
|
||||
).then(reply=>{
|
||||
if(reply.status !== 200 && reply.status !== 201){
|
||||
url, { method: "POST", body: JSON.stringify(req), headers: { "Content-Type": "application/json" } }
|
||||
).then(reply => {
|
||||
if (reply.status !== 200 && reply.status !== 201) {
|
||||
throw this.getLabel("err_execute")
|
||||
}
|
||||
return reply.json()
|
||||
}).then(data=>{
|
||||
if(data.status !== "accepted"){
|
||||
}).then(data => {
|
||||
if (data.status !== "accepted") {
|
||||
throw this.getLabel("err_execution_not_accepted")
|
||||
}
|
||||
const event = new CustomEvent('newexecution', { detail: data.jobID });
|
||||
document.dispatchEvent(event)
|
||||
this.writeToPlexi(this.getLabel("execution_accepted") + " " + data.jobID)
|
||||
window.setTimeout(()=>this.unlockRender(), 3000)
|
||||
}).catch(err => {alert(this.getLabel("err_execute") + ": " + err); this.unlockRender()})
|
||||
window.setTimeout(() => this.unlockRender(), 3000)
|
||||
}).catch(err => { alert(this.getLabel("err_execute") + ": " + err); this.unlockRender() })
|
||||
}
|
||||
|
||||
generateCode(mime, filename){
|
||||
|
||||
generateCode(mime, filename) {
|
||||
const url = this.#serviceurl + "/methods/" + this.#method + "/code"
|
||||
const req = this.buildRequest()
|
||||
this.#boot.secureFetch(
|
||||
url, { method : "POST", body : JSON.stringify(req), headers : { "Content-Type" : "application/json", "Accept" : mime}}
|
||||
).then(reply=>{
|
||||
if(reply.status !== 200) throw this.getLabel("err_code_generation");
|
||||
url, { method: "POST", body: JSON.stringify(req), headers: { "Content-Type": "application/json", "Accept": mime } }
|
||||
).then(reply => {
|
||||
if (reply.status !== 200) throw this.getLabel("err_code_generation");
|
||||
return reply.blob()
|
||||
}).then(blob => {
|
||||
const objectURL = URL.createObjectURL(blob)
|
||||
|
|
@ -278,135 +278,135 @@ class CCPExecutionForm extends HTMLElement{
|
|||
document.body.appendChild(tmplnk)
|
||||
tmplnk.click()
|
||||
document.body.removeChild(tmplnk)
|
||||
}).catch(err=>{ alert(err)})
|
||||
}).catch(err => { alert(err) })
|
||||
}
|
||||
|
||||
buildRequest(){
|
||||
let request = { inputs : {}, outputs : {}, response : "raw"}
|
||||
|
||||
|
||||
buildRequest() {
|
||||
let request = { inputs: {}, outputs: {}, response: "raw" }
|
||||
|
||||
//fill inputs
|
||||
const inputs = this.getInputs()
|
||||
inputs.forEach(i=>{
|
||||
inputs.forEach(i => {
|
||||
request.inputs[i.name] = i.value
|
||||
})
|
||||
|
||||
|
||||
//fill outputs
|
||||
const outputs = this.getOutputs()
|
||||
outputs.forEach(o=>{
|
||||
if(o.enabled) request.outputs[o.name] = { transmissionMode : "value" };
|
||||
outputs.forEach(o => {
|
||||
if (o.enabled) request.outputs[o.name] = { transmissionMode: "value" };
|
||||
})
|
||||
|
||||
const archiveoption = this.#rootdoc.querySelector("select[name='archive-selector']").value
|
||||
switch(archiveoption){
|
||||
switch (archiveoption) {
|
||||
case 'execution':
|
||||
request.subscribers = [{ successUri : "http://registry:8080/executions/archive-to-folder" }]
|
||||
request.subscribers = [{ successUri: "http://registry:8080/executions/archive-to-folder" }]
|
||||
break;
|
||||
case 'outputs':
|
||||
request.subscribers = [{ successUri : "http://registry:8080/executions/outputs/archive-to-folder" }]
|
||||
request.subscribers = [{ successUri: "http://registry:8080/executions/outputs/archive-to-folder" }]
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
return request
|
||||
}
|
||||
|
||||
getInputs(){
|
||||
|
||||
getInputs() {
|
||||
return Array.prototype.slice.call(this.#rootdoc.querySelectorAll("d4s-ccp-input"))
|
||||
}
|
||||
|
||||
getOutputs(){
|
||||
|
||||
getOutputs() {
|
||||
return Array.prototype.slice.call(this.#rootdoc.querySelectorAll("d4s-ccp-output"))
|
||||
}
|
||||
|
||||
initInputValues(inputs){
|
||||
Object.keys(inputs).forEach(k=>{
|
||||
|
||||
initInputValues(inputs) {
|
||||
Object.keys(inputs).forEach(k => {
|
||||
const w = this.#rootdoc.querySelector(`d4s-ccp-input[name=${k}]`)
|
||||
if(w){
|
||||
if (w) {
|
||||
w.value = (inputs[k])
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
initOptionValues(request){
|
||||
initOptionValues(request) {
|
||||
const archiveselector = this.#rootdoc.querySelector("select[name='archive-selector']")
|
||||
if(request.subscribers){
|
||||
if(request.subscribers.filter(s=>s.successUri === "http://registry:8080/executions/archive-to-folder").length === 1){
|
||||
if (request.subscribers) {
|
||||
if (request.subscribers.filter(s => s.successUri === "http://registry:8080/executions/archive-to-folder").length === 1) {
|
||||
archiveselector.value = "execution"
|
||||
}else if(request.subscribers.filter(s=>s.successUri === "http://registry:8080/executions/outputs/archive-to-folder").length === 1){
|
||||
} else if (request.subscribers.filter(s => s.successUri === "http://registry:8080/executions/outputs/archive-to-folder").length === 1) {
|
||||
archiveselector.value = "outputs"
|
||||
}else{
|
||||
} else {
|
||||
archiveselector.value = "none"
|
||||
}
|
||||
}else{
|
||||
} else {
|
||||
archiveselector.value = "none"
|
||||
}
|
||||
}
|
||||
|
||||
prepareFromExecution(exec){
|
||||
|
||||
prepareFromExecution(exec) {
|
||||
//if exec carries already full information then it comes from archive. Use this info instead of fetching.
|
||||
if(exec.fullrequest && exec.fullmethod && exec.fullinfrastructure){
|
||||
if (exec.fullrequest && exec.fullmethod && exec.fullinfrastructure) {
|
||||
this.#data = exec.fullmethod
|
||||
this.#method = this.#data.id
|
||||
this.#boot.secureFetch(this.#serviceurl + "/infrastructures/" + exec.fullinfrastructure.id)
|
||||
.then(resp=>{
|
||||
if(resp.ok){
|
||||
this.#data.executable = true
|
||||
this.showMethod()
|
||||
this.initInputValues(exec.fullrequest.inputs)
|
||||
this.initOptionValues(exec.fullrequest)
|
||||
}else throw("Unable to find infrastructure")
|
||||
}).catch(err=>alert(err))
|
||||
.then(resp => {
|
||||
if (resp.ok) {
|
||||
this.#data.executable = true
|
||||
this.showMethod()
|
||||
this.initInputValues(exec.fullrequest.inputs)
|
||||
this.initOptionValues(exec.fullrequest)
|
||||
} else throw ("Unable to find infrastructure")
|
||||
}).catch(err => alert(err))
|
||||
return
|
||||
}
|
||||
|
||||
//fetch method and request and validate infra
|
||||
let f1 =
|
||||
let f1 =
|
||||
this.#boot.secureFetch(this.#serviceurl + `/executions/${exec.id}/metadata/method.json`)
|
||||
.then(resp=>{
|
||||
if(resp.status === 200){
|
||||
return resp.json()
|
||||
}else throw this.getLabel("err_load_method")
|
||||
}
|
||||
).then(data=>data)
|
||||
|
||||
let f2 =
|
||||
.then(resp => {
|
||||
if (resp.status === 200) {
|
||||
return resp.json()
|
||||
} else throw this.getLabel("err_load_method")
|
||||
}
|
||||
).then(data => data)
|
||||
|
||||
let f2 =
|
||||
this.#boot.secureFetch(this.#serviceurl + `/executions/${exec.id}/metadata/request.json`)
|
||||
.then(resp=>{
|
||||
if(resp.status === 200){
|
||||
return resp.json()
|
||||
}else throw this.getLabel("err_load_method")
|
||||
}
|
||||
).then(data=>data)
|
||||
|
||||
.then(resp => {
|
||||
if (resp.status === 200) {
|
||||
return resp.json()
|
||||
} else throw this.getLabel("err_load_method")
|
||||
}
|
||||
).then(data => data)
|
||||
|
||||
var requestdata = null
|
||||
Promise.all([f1, f2]).then(m_and_r => {
|
||||
this.#data = m_and_r[0]
|
||||
requestdata = m_and_r[1]
|
||||
this.#method = this.#data.id
|
||||
const infra =
|
||||
const infra =
|
||||
this.#data.links.filter(l => l.rel === "compatibleWith")[0]
|
||||
return this.#boot.secureFetch(this.#serviceurl + "/" + infra.href)
|
||||
}).then(resp=>{
|
||||
this.#data.executable = resp.status === 200
|
||||
}).then(()=>{
|
||||
}).then(resp => {
|
||||
this.#data.executable = resp.status === 200
|
||||
}).then(() => {
|
||||
this.showMethod()
|
||||
this.initInputValues(requestdata.inputs)
|
||||
this.initOptionValues(requestdata)
|
||||
}).catch(err=>alert(err))
|
||||
this.initInputValues(requestdata.inputs)
|
||||
this.initOptionValues(requestdata)
|
||||
}).catch(err => alert(err))
|
||||
}
|
||||
|
||||
|
||||
#empty_executionform_bss = {
|
||||
template : "#EXECUTION_FORM_EMPTY_TEMPLATE",
|
||||
target : "div[name=execution_form]",
|
||||
on_drop : ev=>{
|
||||
if(ev.dataTransfer){
|
||||
if(ev.dataTransfer.getData('text/plain+ccpmethod')){
|
||||
template: "#EXECUTION_FORM_EMPTY_TEMPLATE",
|
||||
target: "div[name=execution_form]",
|
||||
on_drop: ev => {
|
||||
if (ev.dataTransfer) {
|
||||
if (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"
|
||||
}else if(ev.dataTransfer.getData('text/plain+ccpexecution')){
|
||||
} else if (ev.dataTransfer.getData('text/plain+ccpexecution')) {
|
||||
this.prepareFromExecution(JSON.parse(ev.dataTransfer.getData('application/json+ccpexecution')))
|
||||
ev.preventDefault()
|
||||
ev.stopPropagation()
|
||||
|
|
@ -414,23 +414,23 @@ class CCPExecutionForm extends HTMLElement{
|
|||
}
|
||||
}
|
||||
},
|
||||
on_dragover : ev=>{
|
||||
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){
|
||||
if(ev.dataTransfer.getData('text/plain+ccpmethod')){
|
||||
template: "#EXECUTION_FORM_TEMPLATE",
|
||||
target: "div[name=execution_form]",
|
||||
in: () => this.#data,
|
||||
on_drop: ev => {
|
||||
if (ev.dataTransfer) {
|
||||
if (ev.dataTransfer.getData('text/plain+ccpmethod')) {
|
||||
const id = ev.dataTransfer.getData('text/plain+ccpmethod');
|
||||
this.setAttribute("method", id);
|
||||
ev.preventDefault()
|
||||
ev.stopPropagation()
|
||||
}else if(ev.dataTransfer.getData('text/plain+ccpexecution')){
|
||||
} else if (ev.dataTransfer.getData('text/plain+ccpexecution')) {
|
||||
this.prepareFromExecution(JSON.parse(ev.dataTransfer.getData('application/json+ccpexecution')))
|
||||
ev.preventDefault()
|
||||
ev.stopPropagation()
|
||||
|
|
@ -438,29 +438,45 @@ class CCPExecutionForm extends HTMLElement{
|
|||
}
|
||||
}
|
||||
},
|
||||
on_dragover : ev=>{
|
||||
on_dragover: ev => {
|
||||
ev.preventDefault()
|
||||
},
|
||||
recurse : [
|
||||
recurse: [
|
||||
{
|
||||
target: ".ccp-method-title",
|
||||
apply : (e,d)=>e.innerHTML = `
|
||||
apply: (e, d) => e.innerHTML = `
|
||||
${d.title} <span class="badge badge-primary ml-1">${d.version}</span>
|
||||
${ d.metadata.filter(md=>md.role === 'author').map(a=>`<span class="badge badge-warning ml-1">${a.title}</span>`)}
|
||||
${d.metadata.filter(md => md.role === 'author').map(a => `<span class="badge badge-warning ml-1">${a.title}</span>`)}
|
||||
`
|
||||
},
|
||||
{
|
||||
target: "p.description",
|
||||
apply : (e,d)=>e.textContent = d.description
|
||||
target: "div.description",
|
||||
apply: (e, d) => {
|
||||
const maxchars = 200
|
||||
const maxlines = 4
|
||||
const s = d.description
|
||||
const lines = s.split("\n")
|
||||
if (lines.length <= maxlines && s.length <= maxchars) {
|
||||
e.innerHTML = s.replaceAll("\n", "<br/>")
|
||||
} else if (lines.length > maxlines) {
|
||||
const lines1 = lines.slice(0, maxlines -1)
|
||||
const index = Math.min(maxchars, lines1.join("<br/>").length)
|
||||
const sf = s.replaceAll("\n", "<br/>")
|
||||
e.innerHTML = `<details><summary>${sf.substring(0, index)}...</summary>...${sf.substring(index)}</details>`
|
||||
} else {
|
||||
const sf = s.replaceAll("\n", "<br/>")
|
||||
e.innerHTML = `<details><summary>${sf.substring(0, maxchars)}...</summary>...${sf.substring(maxchars)}</details>`
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
target: "div.ccp-inputs",
|
||||
in : (e,d)=>d,
|
||||
recurse : [
|
||||
in: (e, d) => d,
|
||||
recurse: [
|
||||
{
|
||||
"in" : (e,d)=>{ return Object.values(d.inputs) },
|
||||
target : "div",
|
||||
apply : (e,d)=>{
|
||||
"in": (e, d) => { return Object.values(d.inputs) },
|
||||
target: "div",
|
||||
apply: (e, d) => {
|
||||
e.innerHTML = `<d4s-ccp-input name="${d.id}" input='${btoa(JSON.stringify(d))}'></d4s-ccp-input>`
|
||||
}
|
||||
}
|
||||
|
|
@ -468,12 +484,12 @@ class CCPExecutionForm extends HTMLElement{
|
|||
},
|
||||
{
|
||||
target: "div.ccp-outputs",
|
||||
in : (e,d)=>d,
|
||||
recurse : [
|
||||
in: (e, d) => d,
|
||||
recurse: [
|
||||
{
|
||||
"in" : (e,d)=>{ return Object.values(d.outputs) },
|
||||
target : "div",
|
||||
apply : (e,d)=>{
|
||||
"in": (e, d) => { return Object.values(d.outputs) },
|
||||
target: "div",
|
||||
apply: (e, d) => {
|
||||
e.innerHTML = `<d4s-ccp-output name="${d.id}" output='${btoa(JSON.stringify(d))}'></d4s-ccp-output>`
|
||||
}
|
||||
}
|
||||
|
|
@ -481,23 +497,23 @@ class CCPExecutionForm extends HTMLElement{
|
|||
},
|
||||
{
|
||||
target: "div.ccp-runtimes *[name=refresh-runtimes]",
|
||||
on_click : ev=>{
|
||||
on_click: ev => {
|
||||
BSS.apply(this.#executionform_bss)
|
||||
}
|
||||
},
|
||||
{
|
||||
target: "#execute_method_button",
|
||||
on_click : ev=>{
|
||||
on_click: ev => {
|
||||
ev.preventDefault()
|
||||
ev.stopPropagation()
|
||||
if(this.#data.executable) this.sendExecutionRequest();
|
||||
if (this.#data.executable) this.sendExecutionRequest();
|
||||
else alert(this.getLabel("err_no_runtimes"))
|
||||
return false;
|
||||
}
|
||||
},
|
||||
{
|
||||
target: "button[name=codegen]",
|
||||
on_click : ev=>{
|
||||
on_click: ev => {
|
||||
ev.preventDefault()
|
||||
ev.stopPropagation()
|
||||
const langsel = ev.target.parentElement.querySelector("select[name=language-selector]")
|
||||
|
|
@ -509,11 +525,11 @@ class CCPExecutionForm extends HTMLElement{
|
|||
},
|
||||
{
|
||||
target: "a[name=direct_link_method]",
|
||||
apply : (e,d)=>e.href = window.location.origin + window.location.pathname + "?method=" + d.id
|
||||
apply: (e, d) => e.href = window.location.origin + window.location.pathname + "?method=" + d.id
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
window.customElements.define('d4s-ccp-executionform', CCPExecutionForm);
|
||||
|
|
|
|||
|
|
@ -911,6 +911,11 @@ class CCPGeoInputWidgetController extends CCPBaseInputWidgetController {
|
|||
if( features.length && this.#index != null && this.#target != null){
|
||||
const name = ev.target.getAttribute("name")
|
||||
var format
|
||||
if(name === "cancel"){
|
||||
this.#format_dialog.style.display = "none"
|
||||
this.#format_dialog.classList.remove("show")
|
||||
return
|
||||
}
|
||||
if(name === "wkt") {
|
||||
format = new ol.format.WKT()
|
||||
}else if(name === "geojson"){
|
||||
|
|
|
|||
|
|
@ -83,9 +83,15 @@ class CCPInputWidgetEditorController extends HTMLElement {
|
|||
const maxOccurs = input.maxOccurs = Number(input.maxOccurs) ? Number(input.maxOccurs) : 0
|
||||
this.innerHTML = `
|
||||
<details ${reopen ? 'open' : ''}>
|
||||
<summary class="mb-3">
|
||||
<style>
|
||||
details:not([open]) p[name=static_default] {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
<summary class="mb-3" style="position:relative">
|
||||
<input class="form-control" style="width:auto;display:inline" required="required" name="id" value="${input.id}" title="${this.getLabel("input_id_help")}" ${input.id === 'ccpimage' ? 'readonly' : ''}/>
|
||||
${input.id !== 'ccpimage' ? this.renderDeleteButton() : ''}
|
||||
<p title="${input.schema.format === "secret" ? "*****" : input.schema.default}" name="static_default" class="m-1 px-2 d-none small text-truncate text-muted font-italic" style="user-select:none;max-width:30rem">${input.schema.format === "secret" ? "*****" : input.schema.default}</p>
|
||||
</summary>
|
||||
<div style="padding-left: 1rem;border-left: 1px solid gray;">
|
||||
<div class="row mb-3">
|
||||
|
|
@ -97,7 +103,7 @@ class CCPInputWidgetEditorController extends HTMLElement {
|
|||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="form-field" title="${this.getLabel("description_help")}">
|
||||
<textarea rows="1" name="description" class="form-control" placeholder="${this.getLabel("description")}" required="required" ${input.id === 'ccpimage' ? 'readonly' : ''}>${input.description}</textarea>
|
||||
<textarea rows="2" name="description" class="form-control" placeholder="${this.getLabel("description")}" required="required" ${input.id === 'ccpimage' ? 'readonly' : ''}>${input.description}</textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
|
|
@ -192,11 +198,15 @@ class CCPInputWidgetEditorController extends HTMLElement {
|
|||
defaultinp.addEventListener("input", ev => {
|
||||
const inp = this.querySelector("d4s-ccp-input")
|
||||
this.#input.schema.default = inp.value
|
||||
const p = this.querySelector("p[name=static_default]")
|
||||
p.innerHTML = p.title = inp.value
|
||||
})
|
||||
|
||||
defaultinp.addEventListener("change", ev => {
|
||||
const inp = this.querySelector("d4s-ccp-input")
|
||||
this.#input.schema.default = inp.value
|
||||
const p = this.querySelector("p[name=static_default]")
|
||||
p.innerHTML = p.title = inp.value
|
||||
})
|
||||
|
||||
defaultinp.addEventListener("click", ev => {
|
||||
|
|
@ -204,6 +214,8 @@ class CCPInputWidgetEditorController extends HTMLElement {
|
|||
if (src === "plus" || src === "minus") {
|
||||
const inp = this.querySelector("d4s-ccp-input")
|
||||
this.#input.schema.default = inp.value
|
||||
const p = this.querySelector("p[name=static_default]")
|
||||
p.innerHTML = p.title = inp.value
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -82,7 +82,9 @@ class CCPMethodEditorController extends HTMLElement {
|
|||
"err_delete_method" : "Unable to delete method",
|
||||
"confirm_reset" : "All unsaved data will be lost. Proceed?",
|
||||
"confirm_save" : "Confirm updating of method",
|
||||
"confirm_delete" : "Confirm deletion of method"
|
||||
"confirm_delete" : "Confirm deletion of method",
|
||||
"execute-script" : "Execute script",
|
||||
"deploy-script" : "Deploy script",
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -465,7 +467,8 @@ class CCPMethodEditorController extends HTMLElement {
|
|||
</div>
|
||||
<div class="mb-3" title="${this.getLabel("description_help")}">
|
||||
<label class="form-label">${this.getLabel("description")}</label>
|
||||
<input name="description" class="form-control" type="text" required="required" value="${this.#current.description}"/>
|
||||
<!--input name="description" class="form-control" type="text" required="required" value="${this.#current.description}"/-->
|
||||
<textarea name="description" class="form-control" required="required" rows="5">${this.#current.description}</textarea>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col mb-3" title="${this.getLabel("keywords_help")}">
|
||||
|
|
@ -526,22 +529,8 @@ class CCPMethodEditorController extends HTMLElement {
|
|||
<d4s-ccp-output-editor></d4s-ccp-output-editor>
|
||||
</div>
|
||||
</div>
|
||||
<details class="card" name="script-list" title="${this.getLabel("scripts_help")}">
|
||||
<summary class="card-header">
|
||||
<div class="ccp-toolbar-header">
|
||||
<div>
|
||||
<span>${this.getLabel("scripts")}</span>
|
||||
<select name="script-selector" style="border:none; padding:.3rem">
|
||||
<option value="deploy-script">${this.getLabel("deploy")}</option>
|
||||
<option value="execute-script">${this.getLabel("execute")}</option>
|
||||
<!--option value="undeploy-script">Undeploy</option-->
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</summary>
|
||||
<div class="card-body" name="scripts_container">
|
||||
${this.renderScripts()}
|
||||
</div>
|
||||
<div name="scripts_container">
|
||||
${this.renderScripts()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -581,7 +570,7 @@ class CCPMethodEditorController extends HTMLElement {
|
|||
this.#current.version = ev.currentTarget.value
|
||||
})
|
||||
|
||||
this.#rootdoc.querySelector("input[name=description]").addEventListener("input", ev => {
|
||||
this.#rootdoc.querySelector("textarea[name=description]").addEventListener("input", ev => {
|
||||
this.#current.description = ev.currentTarget.value
|
||||
})
|
||||
|
||||
|
|
@ -862,21 +851,13 @@ class CCPMethodEditorController extends HTMLElement {
|
|||
}
|
||||
})
|
||||
|
||||
this.#rootdoc.querySelector("select[name=script-selector]").addEventListener("change", ev => {
|
||||
ev.preventDefault()
|
||||
ev.stopPropagation()
|
||||
const scriptname = ev.target.value
|
||||
this.reRenderScripts(scriptname)
|
||||
})
|
||||
|
||||
this.#rootdoc.querySelector("div[name=scripts_container]").addEventListener("input", ev => {
|
||||
ev.preventDefault()
|
||||
ev.stopPropagation()
|
||||
const scriptname = this.getCurrentScriptName()
|
||||
const scriptname = ev.target.getAttribute("name")
|
||||
const script = this.#current.additionalParameters.parameters.find(p => p.name === scriptname)
|
||||
if (script) script.value = ev.target.value.split(/\r?\n/);
|
||||
const preview = ev.currentTarget.querySelector("textarea[name=preview]")
|
||||
preview.value = this.codeToPreview(ev.target.value)
|
||||
this.reRenderScripts()
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -1068,28 +1049,49 @@ class CCPMethodEditorController extends HTMLElement {
|
|||
}, code)
|
||||
}
|
||||
|
||||
getCurrentScriptName() {
|
||||
return this.#rootdoc.querySelector("div[name=scripts_container] div.script-area").getAttribute("name")
|
||||
reRenderScripts(scriptname) {
|
||||
const container = this.#rootdoc.querySelector("div[name=scripts_container]")
|
||||
const scripts = ["deploy-script", "execute-script"]
|
||||
scripts.forEach(sname=>{
|
||||
const script = this.#current.additionalParameters.parameters.find(s => s.name === sname)
|
||||
const code = script.value && script.value.length ? script.value.join("\r\n") : ""
|
||||
const preview = container.querySelector(`details[name=${sname}] textarea[name=preview]`)
|
||||
preview.value = this.codeToPreview(code)
|
||||
})
|
||||
}
|
||||
|
||||
renderScripts(scriptname) {
|
||||
const val = scriptname ? scriptname : 'deploy-script'
|
||||
const script = this.#current.additionalParameters.parameters.find(s => s.name === val)
|
||||
renderScriptContent(scriptname) {
|
||||
const script = this.#current.additionalParameters.parameters.find(s => s.name === scriptname)
|
||||
if (!script) return '';
|
||||
const code = script.value && script.value.length ? script.value.join("\r\n") : ""
|
||||
return `
|
||||
<div class="script-area" ${script.name === val ? 'd-block' : 'd-none'}" name="${script.name}">
|
||||
<textarea rows="5" class="form-control">${code}</textarea>
|
||||
<div class="script-area" name="${script.name}">
|
||||
<textarea name="${script.name}" rows="5" class="form-control">${code}</textarea>
|
||||
<span name="preview" class="d-inline-block fst-italic text-muted position-absolute m-0 end-0 px-4 py-2 pe-none">Preview</span>
|
||||
<textarea rows="5" name="preview" class="script-area form-control my-1 text-muted border-0" readonly>${this.codeToPreview(code)}</textarea>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
reRenderScripts(scriptname) {
|
||||
const container = this.#rootdoc.querySelector("div[name=scripts_container]")
|
||||
const sn = scriptname ? scriptname : this.getCurrentScriptName()
|
||||
container.innerHTML = this.renderScripts(sn)
|
||||
renderScripts(){
|
||||
const scripts = ["deploy-script", "execute-script"]
|
||||
const html = scripts.map(sname=>{
|
||||
return `
|
||||
<details class="card" name="${sname}" title="${this.getLabel("scripts_help")}">
|
||||
<summary class="card-header">
|
||||
<div class="ccp-toolbar-header">
|
||||
<div>
|
||||
<span>${this.getLabel(sname)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</summary>
|
||||
<div class="card-body">
|
||||
${this.renderScriptContent(sname)}
|
||||
</div>
|
||||
</details>
|
||||
`
|
||||
}).join("")
|
||||
return html
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@ class CCPMethodList extends HTMLElement{
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="m-0 p-0 small" name="description"></p>
|
||||
<div class="m-0 p-0 small" name="description"></div>
|
||||
<div>
|
||||
<span name="keyword" class="badge badge-pill badge-light border border-dark mr-1" style="opacity:.6"></span>
|
||||
</div>
|
||||
|
|
@ -501,9 +501,25 @@ class CCPMethodList extends HTMLElement{
|
|||
apply : (e,d)=>{ e.alt = e.title = e.textContent = d.title }
|
||||
},
|
||||
{
|
||||
target : "p[name=description]",
|
||||
apply : (e,d)=>{ e.textContent = d.description }
|
||||
},
|
||||
target : "div[name=description]",
|
||||
apply : (e,d)=>{
|
||||
const maxchars = 100
|
||||
const maxlines = 2
|
||||
const s = d.description
|
||||
const lines = s.split("\n")
|
||||
if (lines.length <= maxlines && s.length <= maxchars) {
|
||||
e.innerHTML = s.replaceAll("\n", "<br/>")
|
||||
} else if (lines.length > maxlines) {
|
||||
const lines1 = lines.slice(0, maxlines -1)
|
||||
const index = Math.min(maxchars, lines1.join("<br/>").length)
|
||||
const sf = s.replaceAll("\n", "<br/>")
|
||||
e.innerHTML = `<details><summary>${sf.substring(0, index)}...</summary>...${sf.substring(index)}</details>`
|
||||
} else {
|
||||
const sf = s.replaceAll("\n", "<br/>")
|
||||
e.innerHTML = `<details><summary>${sf.substring(0, maxchars)}...</summary>...${sf.substring(maxchars)}</details>`
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<d4s-boot-2 context="%2Fgcube%2Fdevsec%2FCCP"
|
||||
gateway="next.d4science.org"
|
||||
gateway="next.dev.d4science.org"
|
||||
redirect-url="http://localhost:8080"
|
||||
url="https://accounts.dev.d4science.org/auth">
|
||||
</d4s-boot-2>
|
||||
|
|
|
|||
Loading…
Reference in New Issue