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