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

22
ccp/js/executionformcontroller.js
View File

@ -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">
@ -450,8 +450,24 @@ class CCPExecutionForm extends HTMLElement{
`
},
{
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",

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

80
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,25 +529,11 @@ 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">
<div name="scripts_container">
${this.renderScripts()}
</div>
</div>
</div>
</div>
`
this.renderInputs()
this.renderOutputs()
@ -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>