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>

464
ccp/js/inputwidgetcontroller.js
View File

@ -2,115 +2,135 @@ class CCPInputWidgetController extends HTMLElement {
#data = null;
constructor(){
super()
constructor() {
super()
}
connectedCallback(){
connectedCallback() {
this.#data = JSON.parse(atob(this.getAttribute("input")))
if(this.isChecklist()){
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()){
} 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>`
}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-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}" 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()) {
}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>`
} else if (this.isFile()) {
}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-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.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>`
} else if (this.isRemoteFile()) {
}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-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.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>`
} else if (this.isSecret()) {
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}" 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}" 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}" 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>`
}
}
set value(value){
set value(value) {
this.firstElementChild.value = value
}
get value(){
get value() {
return this.firstElementChild.value.length === 1 ?
this.firstElementChild.value[0] :
this.firstElementChild.value
}
get name(){
get name() {
return this.firstElementChild.name
}
isChecklist(){
isChecklist() {
return this.isEnum() && (this.#data.schema.format === "checklist")
}
isNumber(){
isNumber() {
return (this.#data.schema.type === "string") &&
("format" in this.#data.schema) &&
(this.#data.schema.format != null) &&
(this.#data.schema.format.toLowerCase() === "number")
}
isBoolean(){
isBoolean() {
return (this.#data.schema.type === "string") &&
("format" in this.#data.schema) &&
(this.#data.schema.format != null) &&
(this.#data.schema.format.toLowerCase() === "boolean")
}
isEnum(){
isEnum() {
return (this.#data.schema.type === "string") && ("enum" in this.#data.schema)
}
isSecret(){
isSecret() {
return (this.#data.schema.type === "string") &&
("format" in this.#data.schema) &&
(this.#data.schema.format != null) &&
(this.#data.schema.format.toLowerCase() === "secret")
}
isCode(){
isCode() {
return (this.#data.schema.type === "string") &&
("format" in this.#data.schema) &&
(this.#data.schema.format != null) &&
(this.#data.schema.format.toLowerCase() === "code")
}
isFile(){
isFile() {
return (this.#data.schema.type === "string") &&
("format" in this.#data.schema) &&
(this.#data.schema.format != null) &&
(this.#data.schema.format.toLowerCase() === "file")
}
isRemoteFile(){
isRemoteFile() {
return (this.#data.schema.type === "string") &&
("format" in this.#data.schema) &&
(this.#data.schema.format != null) &&
(this.#data.schema.format.toLowerCase() === "remotefile")
}
isDateTime(){
isDateTime() {
return (this.#data.schema.type === "string") &&
("format" in this.#data.schema) &&
(this.#data.schema.format != null) &&
@ -119,7 +139,7 @@ class CCPInputWidgetController extends HTMLElement {
}
window.customElements.define('d4s-ccp-input', CCPInputWidgetController);
class CCPBaseInputWidgetController extends HTMLElement{
class CCPBaseInputWidgetController extends HTMLElement {
#rootdoc = null;
#minOccurs = 1;
#maxOccurs = 1;
@ -136,15 +156,16 @@ class CCPBaseInputWidgetController extends HTMLElement{
#count = 1
constructor(){
constructor() {
super()
this.#rootdoc = this//this.attachShadow({ mode: "open" });
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,91 +174,102 @@ 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)
}
setValue(v){
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) {
this.#value = v
this.render()
}
set value(v){
set value(v) {
const actual = Array.isArray(v) ? v : [v]
if(actual.length < this.#minOccurs || actual.length > this.#maxOccurs){
if (actual.length < this.#minOccurs || actual.length > this.#maxOccurs) {
throw `Value with length ${v.length} does not respect bounds [${this.minOccurs},${this.maxOccurs}]`
}
this.#value = actual
this.render()
}
get value(){
get value() {
return this.#value
}
get rootdoc(){
get rootdoc() {
return this.#rootdoc
}
get required(){
get required() {
return this.#minOccurs > 0
}
get readonly(){
get readonly() {
return this.#readonly
}
isIncrementable(){
isIncrementable() {
return this.#value.length < this.#maxOccurs
}
isDecrementable(){
isDecrementable() {
return this.#value.length > this.#minOccurs && this.#value.length > 1
}
get count(){
get count() {
return this.#count
}
get name(){
get name() {
return this.#name
}
get title(){
get title() {
return this.#title
}
get description(){
get description() {
return this.#description
}
get default(){
get default() {
return this.#default
}
get options(){
get options() {
return this.#options
}
set default(v){
this.#default = v
}
get type(){
get type() {
return this.#type
}
renderPlusMinus(){
renderPlusMinus() {
this.rootdoc.querySelector("div[name=plusminus]").innerHTML = `
${this.isIncrementable() ? `<span name="plus" title="add one" class="badge text-success border-success btn">+</span>` : ``}
${this.isDecrementable() ? `<span name="minus" title="remove one" class="badge border border-danger text-danger btn">-</span>` : ``}
`
}
renderContent(){
renderContent() {
this.rootdoc.querySelector("div[name=content]").innerHTML = this.content()
}
render(){
render() {
this.rootdoc.innerHTML = `
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
<div name="root" class="my-3 ccp-input-widget form-field row">
@ -264,42 +296,44 @@ class CCPBaseInputWidgetController extends HTMLElement{
this.renderPlusMinus()
this.renderContent()
this.#rootdoc.querySelector("div[name=root]").addEventListener("click", ev=>{
this.#rootdoc.querySelector("div[name=root]").addEventListener("click", ev => {
const src = ev.target.getAttribute("name")
if(src === "plus"){
this.#value.push(this.#default)
if (src === "plus") {
this.#value.push(this.#value[this.#value.length - 1])
this.renderPlusMinus()
this.renderContent()
}else if(src === "minus"){
ev.preventDefault()
} else if (src === "minus") {
this.#value.pop()
this.renderPlusMinus()
this.renderContent()
ev.preventDefault()
}
})
}
}
class CCPSimpleInputWidgetController extends CCPBaseInputWidgetController{
class CCPSimpleInputWidgetController extends CCPBaseInputWidgetController {
constructor(){
constructor() {
super()
}
connectedCallback(){
this.rootdoc.addEventListener("input", ev=>{
if(ev.target.getAttribute("name") === this.name){
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
}
})
}
content(){
if(this.value.length <= 1){
content() {
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' : ''}/>`
}
var out =
this.value.map((c,i)=>{
this.value.map((c, i) => {
return `
<input name="${this.name}" value="${c}" data-index="${i}" class="ccp-input my-2 form-control" placeholder="${this.title}" type="${this.type}" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}/>
`
@ -309,31 +343,35 @@ class CCPSimpleInputWidgetController extends CCPBaseInputWidgetController{
}
window.customElements.define('d4s-ccp-input-simple', CCPSimpleInputWidgetController);
class CCPEnumInputWidgetController extends CCPBaseInputWidgetController{
class CCPEnumInputWidgetController extends CCPBaseInputWidgetController {
constructor(){
constructor() {
super()
}
connectedCallback(){
this.rootdoc.addEventListener("change", ev=>{
if(ev.target.getAttribute("name") === this.name){
connectedCallback() {
this.rootdoc.addEventListener("change", ev => {
if (ev.target.getAttribute("name") === this.name) {
const index = Number(ev.target.getAttribute("data-index"))
this.value[index] = ev.target.value
}
})
}
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")
content() {
if (this.value.length <= 1) {
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
@ -341,34 +379,39 @@ class CCPEnumInputWidgetController extends CCPBaseInputWidgetController{
}
window.customElements.define('d4s-ccp-input-enum', CCPEnumInputWidgetController);
class CCPChecklistInputWidgetController extends CCPBaseInputWidgetController{
class CCPChecklistInputWidgetController extends CCPBaseInputWidgetController {
constructor(){
constructor() {
super()
}
connectedCallback(){
this.rootdoc.addEventListener("change", ev=>{
if(ev.target.getAttribute("name") === this.name){
connectedCallback() {
this.rootdoc.addEventListener("change", ev => {
if (ev.target.getAttribute("name") === this.name) {
const index = Number(ev.target.getAttribute("data-index"))
const elems = Array.prototype.slice.call(ev.currentTarget.querySelectorAll(`input[name='${this.name}'][data-index='${index}']`))
this.value[index] = elems.filter(e=>e.checked).map(e=>e.value).join(",")
this.value[index] = elems.filter(e => e.checked).map(e => e.value).join(",")
}
})
}
buildOpts(index, selections){
return 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")
buildOpts(index, selections) {
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") :
`
<div class="form-check form-switch form-check-inline">
<span class="muted text-danger">No options supplied</span>
</div>
`
}
content(){
if(this.value.length === 1){
content() {
if (this.value.length === 1) {
const opts = this.buildOpts(0, this.value.length ? this.value[0].split(",") : [])
return `
<div class="my-2">
@ -377,7 +420,7 @@ class CCPChecklistInputWidgetController extends CCPBaseInputWidgetController{
`
}
var out =
this.value.map((c,i)=>{
this.value.map((c, i) => {
const opts = this.buildOpts(i, c.split(","))
return `
<div class="my-2">
@ -390,35 +433,34 @@ class CCPChecklistInputWidgetController extends CCPBaseInputWidgetController{
}
window.customElements.define('d4s-ccp-input-checklist', CCPChecklistInputWidgetController);
class CCPBooleanInputWidgetController extends CCPBaseInputWidgetController{
class CCPBooleanInputWidgetController extends CCPBaseInputWidgetController {
constructor(){
constructor() {
super()
}
connectedCallback(){
this.value.forEach((v,i)=>{ this.value[i] = v === "" ? false : v})
this.rootdoc.addEventListener("input", ev=>{
if(ev.target.getAttribute("name") === this.name){
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.checked
}
})
}
content(){
if(this.value.length <= 1){
content() {
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>
`
}
var out =
this.value.map((c,i)=>{
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")
@ -427,27 +469,27 @@ class CCPBooleanInputWidgetController extends CCPBaseInputWidgetController{
}
window.customElements.define('d4s-ccp-input-boolean', CCPBooleanInputWidgetController);
class CCPTextAreaWidgetController extends CCPBaseInputWidgetController{
class CCPTextAreaWidgetController extends CCPBaseInputWidgetController {
constructor(){
constructor() {
super()
}
connectedCallback(){
this.rootdoc.addEventListener("input", ev=>{
if(ev.target.getAttribute("name") === this.name){
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
}
})
}
content(){
if(this.value.length <= 1){
content() {
if (this.value.length <= 1) {
return `<textarea data-index="0" class="my-2 form-control" placeholder="${this.title}" type="${this.type}" name="${this.name}" rows="5" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}>${this.value.length ? this.value[0] : ''}</textarea>`
}
var out =
this.value.map((c,i)=>{
this.value.map((c, i) => {
return `
<textarea name="${this.name}" data-index="${i}" class="ccp-input my-2 form-control" placeholder="${this.title}" type="${this.type}" name="${this.name}" rows="5" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}>${c}</textarea>
`
@ -457,19 +499,19 @@ class CCPTextAreaWidgetController extends CCPBaseInputWidgetController{
}
window.customElements.define('d4s-ccp-input-textarea', CCPTextAreaWidgetController);
class CCPFileInputWidgetController extends CCPBaseInputWidgetController{
class CCPFileInputWidgetController extends CCPBaseInputWidgetController {
constructor(){
constructor() {
super()
}
connectedCallback(){
this.rootdoc.addEventListener("change", ev=>{
connectedCallback() {
this.rootdoc.addEventListener("change", ev => {
const tgt = ev.target
if(tgt.getAttribute("name") === this.name){
if (tgt.getAttribute("name") === this.name) {
const index = Number(tgt.getAttribute("data-index"))
const file = ev.target.files[0]
if(file.size > 100*1024){
if (file.size > 100 * 1024) {
alert("This input allows only small files (100K). Use references instead ")
ev.stopPropagation()
ev.preventDefault()
@ -477,32 +519,34 @@ class CCPFileInputWidgetController extends CCPBaseInputWidgetController{
return false
}
const reader = new FileReader()
reader.addEventListener('load', ev=>{
reader.addEventListener('load', ev => {
let encoded = ev.target.result.toString().replace(/^data:(.*,)?/, '');
if ((encoded.length % 4) > 0) {
encoded += '='.repeat(4 - (encoded.length % 4));
}
this.value[index] = encoded
this.querySelector("small[name=preview]").textContent = encoded.substr(0,5) + "..." + encoded.substr(encoded.length-5)
this.querySelector("small[name=preview]").textContent = encoded.substr(0, 5) + "..." + encoded.substr(encoded.length - 5)
})
reader.readAsDataURL(file)
}
})
}
content(){
if(this.value.length <= 1){
const v = this.value.length ? this.value[0] : ''
return `
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)=>{
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
@ -510,27 +554,41 @@ class CCPFileInputWidgetController extends CCPBaseInputWidgetController{
}
window.customElements.define('d4s-ccp-input-file', CCPFileInputWidgetController);
class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController{
class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController {
constructor(){
#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(){
addToolContent() {
const iss = document.querySelector("d4s-boot-2").loginToken.iss;
const addresses = {
"https://accounts.dev.d4science.org/auth/realms/d4science" : "https://workspace-repository.dev.d4science.org/storagehub/workspace",
"https://accounts.pre.d4science.org/auth/realms/d4science" : "https://pre.d4science.org/workspace",
"https://accounts.d4science.org/auth/realms/d4science" : "https://api.d4science.org/workspace"
"https://accounts.dev.d4science.org/auth/realms/d4science": "https://workspace-repository.dev.d4science.org/storagehub/workspace",
"https://accounts.pre.d4science.org/auth/realms/d4science": "https://pre.d4science.org/workspace",
"https://accounts.d4science.org/auth/realms/d4science": "https://api.d4science.org/workspace"
};
this.rootdoc.querySelector("div[name=tools]").innerHTML += `
<svg name="trigger" style="width:24;height:24;fill:#007bff; cursor:pointer" viewBox="0 -960 960 960">
@ -549,42 +607,84 @@ 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>
`
const ws = this.rootdoc.querySelector("div[name=ws]")
this.rootdoc.querySelector("svg[name=trigger]").addEventListener("click", ev=>{
ws.classList.toggle("d-none")
})
this.rootdoc.querySelector("span[name=closebtn]").addEventListener("click", ev=>{
ws.classList.add("d-none")
})
this.addEventListener("dragover", ev=>{
ev.preventDefault()
})
this.addEventListener("drop", ev=>{
this.#publicorprotected_dialog = this.rootdoc.querySelector("div.modal[name=publicorprotected]")
this.#publicorprotected_dialog.addEventListener("click", 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
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;
}
})
document.addEventListener("keydown", ev=>{
if(ev.code == 'Escape' ) ws.classList.add("d-none");
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 => {
ev.preventDefault()
})
this.addEventListener("drop", ev => {
ev.stopPropagation()
if (ev.target.getAttribute("name") == this.name && ev.target.getAttribute("data-index") != null) {
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")
}
})
document.addEventListener("keydown", ev => {
if (ev.code == 'Escape') ws.classList.add("d-none");
})
}
content(){
this.addToolContent()
if(this.value.length <= 1){
content() {
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' : ''}/>`
}
var out =
this.value.map((c,i)=>{
this.value.map((c, i) => {
return `
<input name="${this.name}" value="${c}" data-index="${i}" class="ccp-input my-2 form-control" placeholder="${this.title}" type="${this.type}" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}/>
`
@ -594,32 +694,32 @@ class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController{
}
window.customElements.define('d4s-ccp-input-remotefile', CCPRemoteFileInputWidgetController);
class CCPSecretInputWidgetController extends CCPBaseInputWidgetController{
class CCPSecretInputWidgetController extends CCPBaseInputWidgetController {
constructor(){
constructor() {
super()
}
connectedCallback(){
this.rootdoc.addEventListener("input", ev=>{
if(ev.target.getAttribute("name") === this.name){
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
}
})
this.rootdoc.addEventListener("click", ev=>{
if(ev.target.getAttribute("name") === "password_toggle"){
this.rootdoc.addEventListener("click", ev => {
if (ev.target.getAttribute("name") === "password_toggle") {
const index = Number(ev.target.getAttribute("data-index"))
const field = this.rootdoc.querySelector(`input[data-index='${index}']`)
if(field.type === "text") field.type="password";
if (field.type === "text") field.type = "password";
else field.type = "text";
}
})
}
content(){
if(this.value.length <= 1){
content() {
if (this.value.length <= 1) {
return `
<div style="position:relative">
<input data-index="0" value="${this.value.length ? this.value[0] : ''}" class="my-2 form-control" placeholder="${this.title}" type="password" name="${this.name}" ${this.readonly ? 'readonly' : ''} ${this.required ? 'required' : ''}/>
@ -628,7 +728,7 @@ class CCPSecretInputWidgetController extends CCPBaseInputWidgetController{
`
}
var out =
this.value.map((c,i)=>{
this.value.map((c, i) => {
return `
<div style="position:relative">
<input name="${this.name}" value="${c}" data-index="${i}" class="ccp-input my-2 form-control" placeholder="${this.title}" type="password" 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()
}
})
}
}

602
ccp/js/methodeditorcontroller.js
View File

File diff suppressed because it is too large Load Diff

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/" -->