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

Compare commits

base: gCubeSystem:297b2f6ffe914878c819fc473ac02300bfee0ed6
Branches Tags
gCubeSystem:master
gCubeSystem:prod
gCubeSystem:0.0.3
gCubeSystem:0.0.2
gCubeSystem:0.0.1
...
compare: gCubeSystem:cc792a3e624e8a4d1d3ac287c4be4e4e536ea295
Branches Tags
gCubeSystem:master
gCubeSystem:prod
gCubeSystem:0.0.3
gCubeSystem:0.0.2
gCubeSystem:0.0.1

5 Commits
297b2f6ffe ... cc792a3e62

Author SHA1 Message Date
dcore94 cc792a3e62 refactored method import to use preview widgets for input and scripts, added possibility to choose for public or protected link from workspace, fixed several bugs 2024-04-16 13:07:23 +02:00
dcore94 2f8f9483b8 added index test page for CCP webcomponents 2024-04-16 13:06:00 +02:00
dcore94 f4faebc9f1 changed gateway to next.dev 2024-04-16 13:05:06 +02:00
dcore94 687be71314 added some prevent defaults to events 2024-04-16 13:03:51 +02:00
dcore94 1078e7abbb removed redundant logs 2024-04-16 13:03:11 +02:00
10 changed files with 921 additions and 724 deletions
Show Stats Expand all files Collapse all files

8
boot/d4s-boot.js
View File

@ -124,14 +124,14 @@ window.customElements.define('d4s-boot-2', class extends HTMLElement {
}).then(token => {
console.log("Authorized. Token exp: " + this.expirationDate(this.parseJwt(token).exp))
//transform all queued requests to fetches
console.log("All pending requests to promises")
//console.log("All pending requests to promises")
let promises = this.#queue.map(r => {
r.request.headers["Authorization"] = "Bearer " + token
return r.resolve( fetch(r.url, r.request) )
})
//clear queue
this.#queue = []
console.log("Resolving all fetches")
//console.log("Resolving all fetches")
return Promise.all(promises)
}).catch(err => console.error("Unable to make calls: " + err)) // Sometimes throws: Unable to make calls: TypeError: Cannot read properties of undefined (reading 'split')
@ -177,7 +177,7 @@ window.customElements.define('d4s-boot-2', class extends HTMLElement {
} else {
req.headers = { "Authorization" : null}
}
console.log("Queued request to url ", url)
//console.log("Queued request to url ", url)
this.#queue.push({ url : url, request : req, resolve : resolve, reject : reject})
})
return p
@ -202,7 +202,7 @@ window.customElements.define('d4s-boot-2', class extends HTMLElement {
.then(response => response.json())
.then(json => {
this.#config = json
console.log("Keycloak uma2 configuration loaded")
//console.log("Keycloak uma2 configuration loaded")
resolve(true)
})
.catch(err => reject("Failed to fetch uma2-configuration from server: " + err))

33
ccp/index.html Normal file
View File

@ -0,0 +1,33 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="js/methodlistcontroller.js"></script>
<script src="js/methodeditorcontroller.js"></script>
<script src="js/inputwidgeteditorcontroller.js"></script>
<script src="js/outputwidgeteditorcontroller.js"></script>
<script src="js/executionformcontroller.js"></script>
<script src="js/inputwidgetcontroller.js"></script>
<script src="js/outputwidgetcontroller.js"></script>
<link href="css/common.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.cloud-dev.d4science.org/common/js/bss-min-1.2.6.js"></script>
<script src="https://cdn.cloud-dev.d4science.org/storage/d4s-storage.js"></script>
</head>
<body class="m-4">
<d4s-boot-2 clientid="https://next.dev.d4science.org" context="%2Fgcube%2Fdevsec%2FCCP" gateway="next.dev.d4science.org" redirect-url="http://localhost:8080/ccp/index.html" url="https://accounts.dev.d4science.org/auth"> <script src="https://cdn.dev.d4science.org/boot/d4s-boot.js"></script> </d4s-boot-2>
<div class="row">
<div class="col">
<d4s-ccp-methodlist serviceurl="https://ccp.cloud-dev.d4science.org"></d4s-ccp-methodlist>
</div>
<div class="col">
<d4s-ccp-methodeditor serviceurl="https://ccp.cloud-dev.d4science.org"></d4s-ccp-methodeditor>
</div>
<div class="col">
<d4s-ccp-executionform serviceurl="https://ccp.cloud-dev.d4science.org"></d4s-ccp-executionform>
</div>
</div>
</body>
</html>

1
ccp/js/executionformcontroller.js
View File

@ -55,6 +55,7 @@ class CCPExecutionForm extends HTMLElement{
render(){
this.#rootdoc.innerHTML = `
<div>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/modal/">
<link rel="stylesheet" href="https://cdn.dev.d4science.org/ccp/css/common.css"></link>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>

176
ccp/js/inputwidgetcontroller.js
View File

@ -12,37 +12,57 @@ class CCPInputWidgetController extends HTMLElement {
if (this.isChecklist()) {
const opts = this.#data.schema.enum.join(",")
this.innerHTML += `<d4s-ccp-input-checklist readonly="${this.#data.schema.readOnly}" options="${opts}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-checklist>`
this.innerHTML += `<d4s-ccp-input-checklist readonly="${this.#data.schema.readOnly}" options="${opts}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-checklist>`
this.querySelector("d4s-ccp-input-checklist").default = this.#data.schema.default
} else if (this.isEnum()) {
const opts = this.#data.schema.enum.join(",")
this.innerHTML += `<d4s-ccp-input-enum readonly="${this.#data.schema.readOnly}" options="${opts}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-enum>`
this.innerHTML += `<d4s-ccp-input-enum readonly="${this.#data.schema.readOnly}" options="${opts}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-enum>`
this.querySelector("d4s-ccp-input-enum").default = this.#data.schema.default
} else if (this.isCode()) {
this.innerHTML += `<d4s-ccp-input-textarea readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-textarea>`
this.innerHTML += `<d4s-ccp-input-textarea readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-textarea>`
this.querySelector("d4s-ccp-input-textarea").default = this.#data.schema.default
} else if (this.isDateTime()) {
const t = this.#data.schema.format.toLowerCase() === "datetime" ?
"datetime-local" : this.#data.schema.format.toLowerCase()
this.innerHTML += `<d4s-ccp-input-simple type="${t}" readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
this.innerHTML += `<d4s-ccp-input-simple type="${t}" readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
this.querySelector("d4s-ccp-input-simple").default = this.#data.schema.default
} else if (this.isFile()) {
this.innerHTML += `<d4s-ccp-input-file readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-file>`
this.innerHTML += `<d4s-ccp-input-file readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-file>`
this.querySelector("d4s-ccp-input-file").default = this.#data.schema.default
} else if (this.isRemoteFile()) {
this.innerHTML += `<d4s-ccp-input-remotefile readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-remotefile>`
this.innerHTML += `<d4s-ccp-input-remotefile readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-remotefile>`
this.querySelector("d4s-ccp-input-remotefile").default = this.#data.schema.default
} else if (this.isSecret()) {
this.innerHTML += `<d4s-ccp-input-secret readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-secret>`
this.innerHTML += `<d4s-ccp-input-secret readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs }" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-secret>`
this.querySelector("d4s-ccp-input-secret").default = this.#data.schema.default
} else if (this.isBoolean()) {
this.innerHTML += `<d4s-ccp-input-boolean readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-boolean>`
this.innerHTML += `<d4s-ccp-input-boolean readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-boolean>`
this.querySelector("d4s-ccp-input-boolean").default = this.#data.schema.default
} else if (this.isNumber()) {
this.innerHTML += `<d4s-ccp-input-simple type="number" readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
this.innerHTML += `<d4s-ccp-input-simple type="number" readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
this.querySelector("d4s-ccp-input-simple").default = this.#data.schema.default
} else {
this.innerHTML += `<d4s-ccp-input-simple readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default||''}" maxOccurs="${this.#data.maxOccurs||1}" minOccurs="${this.#data.minOccurs||1}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
this.innerHTML += `<d4s-ccp-input-simple readonly="${this.#data.schema.readOnly}" default="${this.#data.schema.default}" maxOccurs="${this.#data.maxOccurs}" minOccurs="${this.#data.minOccurs}" name="${this.#data.id}" description="${btoa(this.#data.description)}" title="${this.#data.title}"></d4s-ccp-input-simple>`
this.querySelector("d4s-ccp-input-simple").default = this.#data.schema.default
}
}
@ -142,9 +162,10 @@ class CCPBaseInputWidgetController extends HTMLElement{
this.#name = this.getAttribute("name")
this.#title = this.getAttribute("title")
this.#description = this.getAttribute("description")
this.#default = this.getAttribute("default")
//this.#default = this.getAttribute("default")
this.#minOccurs = Number(this.getAttribute("minoccurs") ? this.getAttribute("minoccurs") : 1)
this.#maxOccurs = Number(this.getAttribute("maxoccurs") ? this.getAttribute("maxoccurs") : 1)
this.#maxOccurs = Math.max(this.#minOccurs, this.#maxOccurs)
this.#readonly = this.getAttribute("readonly") === "true"
// coalesce all basic input types
@ -153,7 +174,22 @@ class CCPBaseInputWidgetController extends HTMLElement{
// Handle enum case
this.#options = (this.getAttribute("options") ? this.getAttribute("options").split(",") : null)
this.value = Array(Math.max(this.#minOccurs,1)).fill(this.#default)
//this.value = Array(Math.max(this.#minOccurs, 1)).fill(this.#default)
}
set default(def){
this.#default = def
const defarr = Array.isArray(def) ? def : [def]
const min = Math.max(this.#minOccurs, 1)
var v = []
for(let j=0; j < this.#maxOccurs; j++){
if(j < defarr.length){
v.push(defarr[j])
}else if(j < min){
v.push(defarr[defarr.length - 1])
}
}
this.value = v
}
setValue(v) {
@ -218,10 +254,6 @@ class CCPBaseInputWidgetController extends HTMLElement{
return this.#options
}
set default(v){
this.#default = v
}
get type() {
return this.#type
}
@ -267,13 +299,15 @@ class CCPBaseInputWidgetController extends HTMLElement{
this.#rootdoc.querySelector("div[name=root]").addEventListener("click", ev => {
const src = ev.target.getAttribute("name")
if (src === "plus") {
this.#value.push(this.#default)
this.#value.push(this.#value[this.#value.length - 1])
this.renderPlusMinus()
this.renderContent()
ev.preventDefault()
} else if (src === "minus") {
this.#value.pop()
this.renderPlusMinus()
this.renderContent()
ev.preventDefault()
}
})
}
@ -326,14 +360,18 @@ class CCPEnumInputWidgetController extends CCPBaseInputWidgetController{
content() {
if (this.value.length <= 1) {
const opts = this.options.map(o=>`<option value="${o}" ${ this.value.length && o === this.value[0] ? 'selected' : ''}>${o}</option>`).join("\n")
const opts = this.options ?
this.options.map(o => `<option value="${o}" ${this.value.length && o === this.value[0] ? 'selected' : ''}>${o}</option>`).join("\n") :
''
return `<select data-index="0" value="${this.value.length ? this.value[0] : ''}" class="my-2 form-control" placeholder="${this.title}" name="${this.name}" ${this.readonly ? 'disabled' : ''} ${this.required ? 'required' : ''}>${opts}</select>`
}
var out =
this.value.map((c,i)=>{
const opts = this.options.map(o=>`<option value="${o}" ${ this.value.length >= i && c === this.value[i] ? 'selected' : ''}>${o}</option>`).join("\n")
this.value.map((v, i) => {
const opts = this.options ?
this.options.map(o => `<option value="${o}" ${o === v ? 'selected' : ''}>${o}</option>`).join("\n") :
''
return `
<select data-index="${i}" value="${this.value.length ? this.value[0] : ''}" class="my-2 form-control" placeholder="${this.title}" name="${this.name}" ${this.readonly ? 'disabled' : ''} ${this.required ? 'required' : ''}>${opts}</select>
<select data-index="${i}" value="${v}" class="my-2 form-control" placeholder="${this.title}" name="${this.name}" ${this.readonly ? 'disabled' : ''} ${this.required ? 'required' : ''}>${opts}</select>
`
}).join("\n")
return out
@ -360,11 +398,16 @@ class CCPChecklistInputWidgetController extends CCPBaseInputWidgetController{
}
buildOpts(index, selections) {
return this.options.map(o=>`
return this.options ? this.options.map(o => `
<div class="form-check form-switch form-check-inline">
<label>${o}</label>
<input data-index="${index}" class="form-check-input" type="checkbox" name="${this.name}" value="${o}" ${this.readonly ? 'readonly' : ''} ${selections.indexOf(o) > -1 ? 'checked' : ''}/></div>
`).join("\n")
`).join("\n") :
`
<div class="form-check form-switch form-check-inline">
<span class="muted text-danger">No options supplied</span>
</div>
`
}
content() {
@ -397,7 +440,6 @@ class CCPBooleanInputWidgetController extends CCPBaseInputWidgetController{
}
connectedCallback() {
this.value.forEach((v,i)=>{ this.value[i] = v === "" ? false : v})
this.rootdoc.addEventListener("input", ev => {
if (ev.target.getAttribute("name") === this.name) {
const index = Number(ev.target.getAttribute("data-index"))
@ -410,7 +452,7 @@ class CCPBooleanInputWidgetController extends CCPBaseInputWidgetController{
if (this.value.length <= 1) {
return `
<div class="my-2 form-check form-switch form-check-inline">
<input data-index="0" value="${this.value.length ? this.value[0] : false}" class="my-2 form-check-input" type="checkbox" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.value[0] == "true" ? 'checked' : ''} value="${ this.value[0]}"/>
<input data-index="0" value="${this.value.length ? this.value[0] : false}" class="my-2 form-check-input" type="checkbox" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.value[0] === "true" || this.value[0] === true ? 'checked' : ''} value="${this.value[0]}"/>
</div>
`
}
@ -418,7 +460,7 @@ class CCPBooleanInputWidgetController extends CCPBaseInputWidgetController{
this.value.map((c, i) => {
return `
<div class="my-2 form-check form-switch form-check-inline">
<input data-index="${i}" value="${c}" class="my-2 form-check-input" type="checkbox" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${c == "true" ? 'checked' : ''} value="${this.value[i]}"/>
<input data-index="${i}" value="${c}" class="my-2 form-check-input" type="checkbox" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${c === "true" || c === true ? 'checked' : ''}/>
</div>
`
}).join("\n")
@ -493,16 +535,18 @@ class CCPFileInputWidgetController extends CCPBaseInputWidgetController{
content() {
if (this.value.length <= 1) {
const v = this.value.length ? this.value[0] : ''
const preview = typeof(v) === "string" ? v.substring(0, 5) + "..." + v.substring(v.length - 5) : ""
return `
<input type="file" data-index="0" class="my-2 form-control" placeholder="${this.title}" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required && !v ? 'required' : ''} value="${v}"/>
<small name ="preview" class="form-text text-muted">${v.substr(0,5) + "..." + v.substr(v.length-5)}</small>
<small name ="preview" class="form-text text-muted">${preview}</small>
`
}
var out =
this.value.map((c, i) => {
const preview = typeof(v) === "string" ? c.substring(0, 5) + "..." + c.substring(v.length - 5) : ""
return `
<input type="file" data-index="${i}" class="my-2 form-control" placeholder="${this.title}" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''} value="${c}"/>
<small name ="preview" class="form-text text-muted">${c.substr(0,5) + "..." + c.substr(s.length-5)}</small>
<small name ="preview" class="form-text text-muted">${preview}</small>
`
}).join("\n")
return out
@ -512,17 +556,31 @@ window.customElements.define('d4s-ccp-input-file', CCPFileInputWidgetController)
class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController {
#publicorprotected_dialog = null;
#target = null
#publiclink = null;
#protectedlink = null;
#index = null;
constructor() {
super()
}
connectedCallback(){
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.value
async setPublicLink(l){
const b = document.querySelector("d4s-boot-2")
const link = await b.secureFetch(l)
if(link.ok){
const result = await link.json()
this.#target.value = this.value[this.#index] = result
this.#publicorprotected_dialog.style.display = "none"
this.#publicorprotected_dialog.classList.remove("show")
this.#publiclink = this.#protectedlink = this.#target = this.#index = null
const newev = new Event("input", { bubbles : true})
this.dispatchEvent(newev)
}else{
alert("Unable to get public link for item")
this.#target.value = this.value[this.#index] = ""
}
})
}
addToolContent() {
@ -549,14 +607,53 @@ class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController{
allow-drag="true"/>
</div>
</div>
<div class="modal fade" style="background-color:rgba(0,0,0,0.3)" name="publicorprotected" tabindex="-1" role="dialog">
<div class="modal-dialog" role= this.#publicorprivate =
"document">
<div class="modal-content shadow-lg border-primary">
<div class="modal-body">
Choose whether you want to use the public link or the protected link (requires authentication and authorization).
</div>
<div class="modal-footer">
<button name="public" type="button" class="btn btn-info">Public link</button>
<button name="protected" type="button" class="btn btn-primary">Protected link</button>
</div>
</div>
</div>
</div>
`
this.#publicorprotected_dialog = this.rootdoc.querySelector("div.modal[name=publicorprotected]")
this.#publicorprotected_dialog.addEventListener("click", ev => {
ev.stopPropagation()
ev.preventDefault()
const name = ev.target.getAttribute("name")
if(this.#index != null && this.#target != null){
if(name === "public") {
this.setPublicLink(this.#publiclink);
}
else if(name === "protected"){
this.#target.value = this.value[this.#index] = this.#protectedlink;
this.#publicorprotected_dialog.style.display = "none"
this.#publicorprotected_dialog.classList.remove("show")
this.#publiclink = this.#protectedlink = this.#target = this.#index = null
const newev = new Event("input", { bubbles : true})
this.dispatchEvent(newev)
}
else return;
}
})
const ws = this.rootdoc.querySelector("div[name=ws]")
this.rootdoc.querySelector("svg[name=trigger]").addEventListener("click", ev => {
ws.classList.toggle("d-none")
ev.preventDefault()
ev.stopPropagation()
})
this.rootdoc.querySelector("span[name=closebtn]").addEventListener("click", ev => {
ws.classList.add("d-none")
ev.preventDefault()
ev.stopPropagation()
})
this.addEventListener("dragover", ev => {
@ -566,9 +663,12 @@ class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController{
this.addEventListener("drop", ev => {
ev.stopPropagation()
if (ev.target.getAttribute("name") == this.name && ev.target.getAttribute("data-index") != null) {
const index = Number(ev.target.getAttribute("data-index"))
ev.target.value = ev.dataTransfer.getData("text/plain+downloadlink")
this.value[index] = ev.target.value
this.#publicorprotected_dialog.style.display = "block"
this.#publicorprotected_dialog.classList.add("show")
this.#target = ev.target
this.#index = Number(ev.target.getAttribute("data-index"))
this.#publiclink = ev.dataTransfer.getData("text/plain+publiclink")
this.#protectedlink = ev.dataTransfer.getData("text/plain+downloadlink")
}
})
@ -578,7 +678,7 @@ class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController{
}
content() {
this.addToolContent()
if(!this.readonly && !this.querySelector("div[name=ws]")) this.addToolContent();
if (this.value.length <= 1) {
return `
<input data-index="0" value="${this.value.length ? this.value[0] : ''}" class="my-2 form-control" placeholder="${this.title}" type="${this.type}" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}/>`

78
ccp/js/inputwidgeteditorcontroller.js
View File

@ -23,7 +23,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
return this.#index
}
computeDefaultInputType(){
/*computeDefaultInputType(){
if(this.#input.schema.format === "secret"){
return "password"
}else if(this.#input.schema.format === "date"){
@ -34,14 +34,15 @@ class CCPInputWidgetEditorController extends HTMLElement{
return "datetime-local"
}
return "text"
}
}*/
isSelectedFormat(fmt){
return this.#input.schema.format === fmt
}
renderDefaultByType(){
if(this.#input.schema.format === "code"){
return `<d4s-ccp-input name="default" input="${btoa(JSON.stringify(this.#input))}"></d4s-ccp-input>`
/*if(this.#input.schema.format === "code"){
return `
<textarea rows="5" name="default" class="form-control" placeholder="default">${this.#input.schema.default}</textarea>
`
@ -49,7 +50,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
return `
<input type="${this.computeDefaultInputType()}" value="${this.#input.schema.default}" name="default" class="form-control" placeholder="default"/>
`
}
}*/
}
renderDeleteButton(){
@ -62,6 +63,8 @@ class CCPInputWidgetEditorController extends HTMLElement{
this.#index = i
this.#input = input
this.#type = input.schema.enum ? "enum" : "string"
const minOccurs = input.minOccurs = Number(input.minOccurs) ? Number(input.minOccurs) : 0
const maxOccurs = input.maxOccurs = Number(input.maxOccurs) ? Number(input.maxOccurs) : 0
this.innerHTML = `
<details ${ reopen ? 'open' : ''}>
<summary class="mb-3">
@ -85,22 +88,22 @@ class CCPInputWidgetEditorController extends HTMLElement{
<div class="col-3">
<div class="form-field" title="Type">
<label>Type</label>
<select name="type" class="form-control" placeholder="type" value="${this.#type}" ${ input.id === 'ccpimage' ? 'readonly' : ''}>
<select name="type" class="form-control" placeholder="type" value="${this.#type}">
<option value="string" ${this.#type === "string" ? "selected" : ""}>String</option>
<option value="enum" ${this.#type === "enum" ? "selected" : ""}>Enum</option>
${ input.id === 'ccpimage' ? '' : `<option value="enum" ${this.#type === "enum" ? "selected" : ""}>Enum</option>` }
</select>
</div>
</div>
<div class="col">
<div class="form-field" title="Minimum occurrences">
<label>Min occurs</label>
<input value="${input.minOccurs}" type="number" min="0" step="1" name="minOccurs" value="${input.minOccurs}" required="required" class="form-control" placeholder="minOccurs" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
<input value="${minOccurs}" type="number" min="0" step="1" name="minOccurs" value="${minOccurs}" required="required" class="form-control" placeholder="minOccurs" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
</div>
</div>
<div class="col">
<div class="form-field" title="Maximum occurrences">
<label>Max occurs</label>
<input value="${input.maxOccurs}" type="number" min="0" step="1" name="maxOccurs" value="${input.maxOccurs}" required="required" class="form-control" placeholder="maxOccurs" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
<input value="${maxOccurs}" type="number" min="0" step="1" name="maxOccurs" value="${maxOccurs}" required="required" class="form-control" placeholder="maxOccurs" ${ input.id === 'ccpimage' ? 'readonly' : ''}/>
</div>
</div>
<div class="col" title="Read only">
@ -123,7 +126,7 @@ class CCPInputWidgetEditorController extends HTMLElement{
<option value="boolean" ${this.isSelectedFormat('boolean') ? "selected" : ""}>True/False</option>
<option value="code" ${this.isSelectedFormat('code') ? "selected" : ""}>Code</option>
<option value="file" ${this.isSelectedFormat('file') ? "selected" : ""}>File</option>
<option value="remotefile" ${this.isSelectedFormat('remotefile') ? "selected" : ""}>Remote file</option>
<option value="remotefile" ${this.isSelectedFormat('remotefile') ? "selected" : ""}>Workspace file</option>
<option value="secret" ${this.isSelectedFormat('secret') ? "selected" : ""}>Secret</option>
<option value="url" ${this.isSelectedFormat('url') ? "selected" : ""}>Url</option>
</select>
@ -150,8 +153,9 @@ class CCPInputWidgetEditorController extends HTMLElement{
</div>
</div>
<div name="input-default" class="mb-3">
<div class="form-field" title="Default value">
${this.renderDefaultByType()}
<label>Default value</label>
<div class="form-field border border-info px-2 py-1" style="background-color:#0dcaf022" title="Default value">
<div name="default-container">${this.renderDefaultByType()}</div>
<span style="user-select:none;position:relative;top:-1.6rem;float:right;cursor:pointer" name="password_toggle" class="${this.isSelectedFormat('secret') ? 'inline' : 'd-none'}">&#128065;</span>
</div>
</div>
@ -167,53 +171,63 @@ class CCPInputWidgetEditorController extends HTMLElement{
}
})
const defaultinp = this.querySelector("div[name='input-default']")
defaultinp.addEventListener("input", ev=>{
const inp = this.querySelector("d4s-ccp-input")
this.#input.schema.default = inp.value
})
defaultinp.addEventListener("change", ev=>{
const inp = this.querySelector("d4s-ccp-input")
this.#input.schema.default = inp.value
})
defaultinp.addEventListener("click", ev=>{
const src = ev.target.getAttribute("name")
if (src === "plus" || src === "minus") {
const inp = this.querySelector("d4s-ccp-input")
this.#input.schema.default = inp.value
}
})
this.addEventListener("input", ev=>{
const val = ev.target.value
const ename = ev.target.getAttribute("name")
const display = this.querySelector("div[name='default-container']")
if(ename === "id"){
this.#input.id = val
}
else if(ename === "title"){
this.#input.title = val
display.innerHTML = this.renderDefaultByType()
}
else if(ename === "description"){
this.#input.description = val
display.innerHTML = this.renderDefaultByType()
}
else if(ename === "minOccurs"){
this.#input.minOccurs = val
this.#input.minOccurs = Number(val) ? Number(val) : 0
display.innerHTML = this.renderDefaultByType()
}
else if(ename === "maxOccurs"){
this.#input.maxOccurs = val
this.#input.maxOccurs = Number(val) ? Number(val) : 0
display.innerHTML = this.renderDefaultByType()
}
else if(ename === "format"){
this.#input.schema.format = val
//this.render(this.#input, this.#index, true)
/*this.querySelector("div[name=input-default] span[name=password_toggle]").classList.add("d-none")
this.querySelector("div[name=input-default] input[name=default]").type = ""
if(this.#input.schema.format === "secret"){
this.querySelector("div[name=input-default] input[name=default]").type = "password"
this.querySelector("div[name=input-default] span[name=password_toggle]").classList.remove("d-none")
}else if(this.#input.schema.format === "date"){
this.querySelector("div[name=input-default] input[name=default]").type = "date"
}else if(this.#input.schema.format === "time"){
this.querySelector("div[name=input-default] input[name=default]").type = "time"
}else if(this.#input.schema.format === "dateTime"){
this.querySelector("div[name=input-default] input[name=default]").type = "dateTime"
}else if(this.#input.schema.format === "file"){
this.querySelector("div[name=input-default] input[name=default]").type = "file"
}*/
display.innerHTML = this.renderDefaultByType()
}
else if(ename === "contentMediaType"){
this.#input.schema.contentMediaType = val
display.innerHTML = this.renderDefaultByType()
}
else if(ename === "options"){
this.#input.schema.enum = val.split(",")
}
else if(ename === "default"){
this.#input.schema.default = val
display.innerHTML = this.renderDefaultByType()
}
else if(ename === "readonly"){
this.#input.schema.readOnly = ev.target.checked
display.innerHTML = this.renderDefaultByType()
}
else if(ename === "type"){
this.#type = ev.target.value
@ -226,9 +240,9 @@ class CCPInputWidgetEditorController extends HTMLElement{
this.querySelector("div[name=string-input]").classList.remove("d-none")
delete this.#input.schema['enum']
}
display.innerHTML = this.renderDefaultByType()
}
})
}
}

82
ccp/js/methodeditorcontroller.js
View File

@ -487,12 +487,12 @@ class CCPMethodEditorController extends HTMLElement{
<select name="script-selector" style="border:none; padding:.3rem">
<option value="deploy-script">Deploy</option>
<option value="execute-script">Execute</option>
<option value="undeploy-script">Undeploy</option>
<!--option value="undeploy-script">Undeploy</option-->
</select>
</div>
</div>
</summary>
<div class="card-body" name="input_container">
<div class="card-body" name="scripts_container">
${this.renderScripts()}
</div>
</div>
@ -671,6 +671,7 @@ class CCPMethodEditorController extends HTMLElement{
}
)
this.renderInputs()
this.reRenderScripts()
})
this.#rootdoc.querySelector("button[name=add-ccpannotation]").addEventListener("click", ev => {
@ -692,6 +693,7 @@ class CCPMethodEditorController extends HTMLElement{
}
)
this.renderInputs()
this.reRenderScripts()
})
this.#rootdoc.querySelector("div[name=input-list]").addEventListener("click", ev => {
@ -703,6 +705,23 @@ class CCPMethodEditorController extends HTMLElement{
console.log("deleting input at index", index)
this.deleteTmpInputAt(index)
this.renderInputs()
this.reRenderScripts()
}
})
//when any input changes update scripts so that possibly variable get re-expanded
this.#rootdoc.querySelector("div[name=input-list]").addEventListener("input", ev => {
this.reRenderScripts()
})
this.#rootdoc.querySelector("div[name=input-list]").addEventListener("change", ev => {
this.reRenderScripts()
})
this.#rootdoc.querySelector("div[name=input-list]").addEventListener("click", ev => {
const src = ev.target.getAttribute("name")
if (src === "plus" || src === "minus" || src === "maxOccurs" || src === "minOccurs") {
this.reRenderScripts()
}
})
@ -800,19 +819,17 @@ class CCPMethodEditorController extends HTMLElement{
ev.preventDefault()
ev.stopPropagation()
const scriptname = ev.target.value
const areas = Array.prototype.slice.call(this.#rootdoc.querySelectorAll("textarea.script-area"))
areas.forEach(a=>{
if(a.getAttribute("name") === scriptname) a.classList.remove("d-none");
else a.classList.add("d-none")
})
this.reRenderScripts(scriptname)
})
this.#rootdoc.querySelector("details[name=script-list]").addEventListener("input", ev=>{
this.#rootdoc.querySelector("div[name=scripts_container]").addEventListener("input", ev => {
ev.preventDefault()
ev.stopPropagation()
const scriptname = ev.target.getAttribute("name")
const script = this.#current.additionalParameters.parameters.filter(p=>p.name === scriptname)[0]
const scriptname = this.getCurrentScriptName()
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)
})
}
@ -948,8 +965,7 @@ class CCPMethodEditorController extends HTMLElement{
const available = this.#infrastructures.filter(i => { return selectedinfras.indexOf(i.id) === -1 })
return `
<option></option>
${
available.map(infra=>{
${available.map(infra => {
return `
<option value="${infra.id}" title="${infra.description}">${infra.name}</option>
`
@ -989,16 +1005,44 @@ class CCPMethodEditorController extends HTMLElement{
})
}
renderScripts(){
const val = 'deploy-script'
return this.#current.additionalParameters.parameters.map(
(script, i) => {
let code = script.value && script.value.length ? script.value.join("\r\n") : ""
codeToPreview(code) {
return this.#tmp_inputs.reduce((acc, i) => {
const r = new RegExp(`{{\\s*${i.id}\\s*}}`, 'g');
var def = i.schema.default
if(i.schema.format === "secret"){
def = Array.isArray(def) ? def : [def]
def = def.map(v=>"***")
}
if(i.schema.format === "file"){
def = Array.isArray(def) ? def : [def]
def = def.map(v=>v.substring(0,5) + "......" + v.substring(v.length-5))
}
return acc.replaceAll(r, def)
}, code)
}
getCurrentScriptName() {
return this.#rootdoc.querySelector("div[name=scripts_container] div.script-area").getAttribute("name")
}
renderScripts(scriptname) {
const val = scriptname ? scriptname : 'deploy-script'
const script = this.#current.additionalParameters.parameters.find(s => s.name === val)
if (!script) return '';
const code = script.value && script.value.length ? script.value.join("\r\n") : ""
return `
<textarea rows="5" class="script-area form-control ${script.name === val ? '' : 'd-none'}" name="${script.name}">${code}</textarea>
<div class="script-area" ${script.name === val ? 'd-block' : 'd-none'}" name="${script.name}">
<textarea 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>
`
}
).join("\n")
reRenderScripts(scriptname) {
const container = this.#rootdoc.querySelector("div[name=scripts_container]")
const sn = scriptname ? scriptname : this.getCurrentScriptName()
container.innerHTML = this.renderScripts(sn)
}
}

6
ccp/js/methodlistcontroller.js
View File

@ -220,9 +220,9 @@ class CCPMethodList extends HTMLElement{
const f = filter.toLowerCase()
this.#filtered = this.#data.filter(d=>{
return false ||
(d.title.toLowerCase().indexOf(f) !== -1)||
(d.description.indexOf(f) !== -1) ||
(d.keywords.map(k=>k.toLowerCase()).filter(i=>i.indexOf(f) !== -1)).length
(d.title && d.title.toLowerCase().indexOf(f) !== -1)||
(d.description && d.description.indexOf(f) !== -1) ||
(Array.isArray(d.keywords) && d.keywords.map(k=>k.toLowerCase()).filter(i=>i.indexOf(f) !== -1)).length
})
}
this.groupBy()

5
index.html
View File

@ -12,10 +12,13 @@
<h3>CDN sandbox</h3>
<p>Select the section you want to enter</p>
</header>
<div class="d-flex">
<div class="d-flex flex-column">
<div class="d-inline-block">
<a href="storage/index.html">D4S Workspace</a> (OIDC protected)
</div>
<div class="d-inline-block">
<a href="ccp/index.html">CCP</a> (OIDC protected)
</div>
</div>
</body>

2
storage/d4s-storage.js
View File

@ -442,6 +442,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
li.addEventListener('click', (ev) => {
ev.stopPropagation();
ev.preventDefault()
this.select(ev.currentTarget.getAttribute(D4SStorageTree.dataid_attr));
});
@ -668,6 +669,7 @@ class D4SStorageFolder extends D4SStorageHtmlElement {
const isFolder = item['@class'].includes('FolderItem')
filename.addEventListener('click', (ev) => {
ev.stopPropagation()
ev.preventDefault()
if (isFolder) {
const span = ev.currentTarget.querySelector(':nth-child(2)')
if (span) {

2
storage/index.html
View File

@ -10,7 +10,7 @@
<body class="m-4">
<d4s-boot-2 context="%2Fgcube%2Fdevsec%2FdevVRE"
gateway="next.d4science.org"
gateway="next.dev.d4science.org"
redirect-url="https://cdn.dev.d4science.org/storage/"
url="https://accounts.dev.d4science.org/auth">
<!-- redirect-url="http://localhost:8080/storage/" -->