gCubeSystem
/
web-components
16
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

master #23

Merged
m.lettere merged 2 commits from master into prod 2024-10-15 09:51:09 +02:00
Conversation 0 Commits 2 Files Changed 6 +285 -234
6 changed files with 285 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

388
ccp/js/executionformcontroller.js
View File

@ -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);

7
ccp/js/inputwidgetcontroller.js
View File

@ -454,7 +454,7 @@ class CCPBooleanInputWidgetController extends CCPBaseInputWidgetController {
this.rootdoc.addEventListener("input", ev => {
if (ev.target.getAttribute("name") === this.name) {
const index = Number(ev.target.getAttribute("data-index"))
this.value[index] = ev.target.checked
this.value[index] = ev.target.checked ? "true" : "false"
}
})
}
@ -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"){

16
ccp/js/inputwidgeteditorcontroller.js
View File

@ -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
ccp/js/methodeditorcontroller.js
View File

@ -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
}
}

24
ccp/js/methodlistcontroller.js
View File

@ -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>`
}
}
}
]
}
]

2
extapp/index.html
View File

@ -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>