|
|
|
@ -35,6 +35,12 @@ class CCPInputWidgetController extends HTMLElement {
|
|
|
|
|
}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="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-secret>`
|
|
|
|
|
|
|
|
|
|
}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="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-boolean>`
|
|
|
|
|
|
|
|
|
|
}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="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-simple>`
|
|
|
|
|
|
|
|
|
|
}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="${this.#data.description}" title="${this.#data.title}"></d4s-ccp-input-simple>`
|
|
|
|
|
}
|
|
|
|
@ -58,6 +64,20 @@ class CCPInputWidgetController extends HTMLElement {
|
|
|
|
|
return this.isEnum() && (this.#data.schema.format === "checklist")
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
isNumber(){
|
|
|
|
|
return (this.#data.schema.type === "string") &&
|
|
|
|
|
("format" in this.#data.schema) &&
|
|
|
|
|
(this.#data.schema.format != null) &&
|
|
|
|
|
(this.#data.schema.format.toLowerCase() === "number")
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
isBoolean(){
|
|
|
|
|
return (this.#data.schema.type === "string") &&
|
|
|
|
|
("format" in this.#data.schema) &&
|
|
|
|
|
(this.#data.schema.format != null) &&
|
|
|
|
|
(this.#data.schema.format.toLowerCase() === "boolean")
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
isEnum(){
|
|
|
|
|
return (this.#data.schema.type === "string") && ("enum" in this.#data.schema)
|
|
|
|
|
}
|
|
|
|
@ -367,6 +387,43 @@ class CCPChecklistInputWidgetController extends CCPBaseInputWidgetController{
|
|
|
|
|
}
|
|
|
|
|
window.customElements.define('d4s-ccp-input-checklist', CCPChecklistInputWidgetController);
|
|
|
|
|
|
|
|
|
|
class CCPBooleanInputWidgetController extends CCPBaseInputWidgetController{
|
|
|
|
|
|
|
|
|
|
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){
|
|
|
|
|
const index = Number(ev.target.getAttribute("data-index"))
|
|
|
|
|
this.value[index] = ev.target.checked
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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]}"/>
|
|
|
|
|
</div>
|
|
|
|
|
`
|
|
|
|
|
}
|
|
|
|
|
var out =
|
|
|
|
|
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]}"/>
|
|
|
|
|
</div>
|
|
|
|
|
`
|
|
|
|
|
}).join("\n")
|
|
|
|
|
return out
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
window.customElements.define('d4s-ccp-input-boolean', CCPBooleanInputWidgetController);
|
|
|
|
|
|
|
|
|
|
class CCPTextAreaWidgetController extends CCPBaseInputWidgetController{
|
|
|
|
|
|
|
|
|
|
constructor(){
|
|
|
|
@ -452,20 +509,8 @@ window.customElements.define('d4s-ccp-input-file', CCPFileInputWidgetController)
|
|
|
|
|
|
|
|
|
|
class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController{
|
|
|
|
|
|
|
|
|
|
#iss = null;
|
|
|
|
|
#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"
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
constructor(){
|
|
|
|
|
super()
|
|
|
|
|
this.#iss = document.querySelector("d4s-boot-2").loginToken.iss
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
get baseurl(){
|
|
|
|
|
return this.#addresses[this.#iss]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
connectedCallback(){
|
|
|
|
@ -475,23 +520,42 @@ class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController{
|
|
|
|
|
this.value[index] = ev.target.value
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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"
|
|
|
|
|
};
|
|
|
|
|
this.rootdoc.querySelector("div[name=tools]").innerHTML += `
|
|
|
|
|
<svg name="trigger" style="width:24;height:24;fill:#007bff; cursor:pointer" viewBox="0 -960 960 960">
|
|
|
|
|
<path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640H447l-80-80H160v480l96-320h684L837-217q-8 26-29.5 41.5T760-160H160Zm84-80h516l72-240H316l-72 240Zm0 0 72-240-72 240Zm-84-400v-80 80Z"/>
|
|
|
|
|
</svg>
|
|
|
|
|
<div name="ws" class="d-none position-absolute shadow border border-primary bg-light p-2" style="left: 100%;z-index:1000; line-height:1.5rem;overflow:hidden;padding:5px;">
|
|
|
|
|
<div class="d-flex justify-content-between" style="border-bottom: solid 1px gray;">
|
|
|
|
|
<h5 class="text-secondary">Access your workspace</h5>
|
|
|
|
|
<span class="btn text-danger p-0" style="font-weight:bold" name="closebtn">x</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="min-width:350px; max-width:500px;overflow-x:hidden;text-wrap:nowrap;text-overflow: ellipsis;min-height:5rem; max-height:10rem;">
|
|
|
|
|
<d4s-storage-tree
|
|
|
|
|
class="d-none position-absolute shadow border border-primary bg-light"
|
|
|
|
|
style="left: 100%; margin: 0 0 0 -.5rem;min-width:350px; max-width:500px;z-index:1000; line-height:1.5rem;overflow-x:hidden;text-wrap:nowrap;text-overflow: ellipsis;min-height:5rem; max-height:10rem; padding:5px;"
|
|
|
|
|
base-url="${this.baseurl}"
|
|
|
|
|
base-url="${addresses[iss]}"
|
|
|
|
|
file-download-enabled="true"
|
|
|
|
|
show-files="true"
|
|
|
|
|
allow-drag="true"/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`
|
|
|
|
|
const ws = this.rootdoc.querySelector("d4s-storage-tree")
|
|
|
|
|
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()
|
|
|
|
|
})
|
|
|
|
@ -511,6 +575,7 @@ class CCPRemoteFileInputWidgetController extends CCPBaseInputWidgetController{
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
content(){
|
|
|
|
|
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' : ''}/>`
|
|
|
|
|