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