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

master #13

Merged
m.lettere merged 13 commits from master into prod 2024-04-23 18:26:24 +02:00
Conversation 0 Commits 13 Files Changed 10 +1024 -751
10 changed files with 1024 additions and 751 deletions
Show Stats Download Patch File Download Diff File 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))

34
ccp/index.html Normal file
View File

@ -0,0 +1,34 @@
<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" crossorigin="anonymous">
<script src="https://cdn.cloud-dev.d4science.org/common/js/bss-min-1.2.6.js"></script>
<script src="../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" allow-edit="true"></d4s-ccp-methodlist>
</div>
<div class="col">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<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>

7
ccp/js/executionformcontroller.js
View File

@ -55,8 +55,9 @@ 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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" crossorigin="anonymous">
<style>
.ccp-execution-form{
position: relative;
@ -94,12 +95,12 @@ class CCPExecutionForm extends HTMLElement{
<h5>Outputs</h5>
</div>
<div class="card-body">
<div class="form-row ccp-outputs">
<div class="row ccp-outputs">
<div class="col form-group"></div>
</div>
</div>
</div>
<div class="form-row">
<div class="row">
<div class="col-6">
<button id="execute_method_button" class="btn btn-info">Execute</button>
</div>

787
ccp/js/inputwidgetcontroller.js
View File

File diff suppressed because it is too large Load Diff

86
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
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>
@ -166,54 +170,64 @@ class CCPInputWidgetEditorController extends HTMLElement{
ev.preventDefault()
}
})
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
@ -225,10 +239,10 @@ class CCPInputWidgetEditorController extends HTMLElement{
this.querySelector("div[name=enum-input]").classList.add("d-none")
this.querySelector("div[name=string-input]").classList.remove("d-none")
delete this.#input.schema['enum']
}
}
}
display.innerHTML = this.renderDefaultByType()
}
})
}
}

764
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>

76
storage/d4s-storage.js
View File

@ -16,10 +16,7 @@ class D4SStorageHtmlElement extends HTMLElement {
}
connectedCallback() {
let linkElem = document.createElement('link');
linkElem.setAttribute('rel', 'stylesheet');
linkElem.setAttribute('href', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css');
this.shadowRoot.appendChild(linkElem);
}
get srcBaseURL() {
@ -98,7 +95,7 @@ class D4SStorageToolbar extends D4SStorageHtmlElement {
class D4SStorageTree extends D4SStorageHtmlElement {
static tree_event_name = "d4s-toolbar";
static tree_event_name = "d4s-tree";
static folder_data_event_name = "d4s-folder-data";
static dataid_attr = 'data-id';
@ -226,8 +223,10 @@ class D4SStorageTree extends D4SStorageHtmlElement {
const div = document.createElement('div')
div.innerHTML = /*css*/`
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 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">
<style>
.selected > span {
.selected > .li-title {
background-color: ${this.#selectedbgcolor};
}
ul.root {
@ -238,6 +237,12 @@ class D4SStorageTree extends D4SStorageHtmlElement {
margin-bottom: 0;
padding-left: 0.6em;
}
li{
color: #444444;
}
li:hover{
color: #555555;
}
li {
cursor: pointer;
}
@ -378,7 +383,7 @@ class D4SStorageTree extends D4SStorageHtmlElement {
this.dispatchEvent(
new CustomEvent(
D4SStorageTree.tree_event_name,
{detail: {id: id}}
{detail: {id: id, bubbles: true}}
)
);
}
@ -417,15 +422,43 @@ class D4SStorageTree extends D4SStorageHtmlElement {
data
.filter(item => this.showFiles || item['@class'].includes('FolderItem'))
.forEach(item => {
ul.appendChild(this.createListItem(item.title, item.id, item['@class'], parentId));
ul.appendChild(this.createListItem(item, parentId));
})
} else {
ul.appendChild(this.createListItem(data.displayName ? data.displayName : data.title, data.id, data['@class'], parentId));
ul.appendChild(this.createListItem(data, parentId));
}
parentElement.appendChild(ul);
}
createListItem(label, id, type, parentId) {
getIconByMIME(mime){
if(mime.startsWith("image")) return "image";
if(mime.startsWith("application/pdf")) return "picture_as_pdf";
if(mime.startsWith("application/zip")) return "archive";
if(mime.startsWith("application/xml")) return "code";
if(mime.match(/tar|compressed|gzip|gz|tgz/)) return 'archive';
return null;
}
getIconByExtension(name){
const tks = name.split(".")
if(tks.length === 0) return null;
const ext = tks[tks.length - 1]
if(ext.match(/java$|py$|^r$|^c$|ccp|lua|jl|^sh$|json|xml|xsl|xslt|md$|xq$|xqm$/i)) return "code";
if(ext.match(/js$/i)) return "javascript";
if(ext.match(/html$|css$|php$/i)) return ext;
if(ext.match(/kml$/i)) return "place";
if(ext.match(/ics$/i)) return "event";
if(ext.match(/csv$|xls$|ods$/i)) return "assessment";
if(ext.match(/txt$|odt$|rtf$|doc$|docx$/i)) return "description";
if(ext.match(/ppt$|odp$/i)) return "slideshow";
return null;
}
createListItem(item, parentId) {
const label = item.displayName ? item.displayName : item.title
const id = item.id
const type = item["@class"]
const mime = item.content && item.content.mimeType ? item.content.mimeType : null
const li = document.createElement('li');
li.setAttribute(D4SStorageTree.dataname_attr, label);
li.setAttribute(D4SStorageTree.dataid_attr, id);
@ -434,14 +467,30 @@ class D4SStorageTree extends D4SStorageHtmlElement {
if (parentId) {
li.setAttribute(D4SStorageTree.parentid_attr, parentId);
}
const icon = type.includes('FolderItem') || type.includes("SharedFolder")? "folder.svg" : "file-earmark.svg"
//const icon = type.includes('FolderItem') || type.includes("SharedFolder")? "folder.svg" : "file-earmark.svg"
var icon = "insert_drive_file";
if(type.includes('FolderItem')){
icon = "folder"
}else if(type.includes("SharedFolder")){
icon = "folder_shared"
}else{
const im = mime ? this.getIconByMIME(mime) : null
if(im) icon = im;
else{
const ie = this.getIconByExtension(label)
if(ie) icon = ie;
}
}
li.innerHTML = `
<img class="px-1" src="${this.srcBaseURL}/img/${icon}"</img>
<span>${label}</span>
<div class="li-title d-flex gap-1">
<span class="material-icons">${icon}</span>
<span>${label}</span>
</div>
`
li.addEventListener('click', (ev) => {
ev.stopPropagation();
ev.preventDefault()
this.select(ev.currentTarget.getAttribute(D4SStorageTree.dataid_attr));
});
@ -668,6 +717,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/" -->