removed version 2 and old widgets
This commit is contained in:
dcore94
parent
1447716a8c
commit
a2864feb25
|
|
@ -1,183 +0,0 @@
|
||||||
class CCPExecutionMonitor extends HTMLElement {
|
|
||||||
|
|
||||||
#boot = null;
|
|
||||||
#rootdoc = null;
|
|
||||||
#serviceurl = null;
|
|
||||||
#broadcasturl = null;
|
|
||||||
#executions = [];
|
|
||||||
#socket = null;
|
|
||||||
#interval = null;
|
|
||||||
|
|
||||||
constructor(){
|
|
||||||
super()
|
|
||||||
this.#boot = document.querySelector("d4s-boot-2")
|
|
||||||
this.#rootdoc = this.attachShadow({ "mode" : "open"})
|
|
||||||
this.#serviceurl = this.getAttribute("serviceurl")
|
|
||||||
this.#broadcasturl = this.getAttribute("broadcasturl")
|
|
||||||
if(!this.#broadcasturl){
|
|
||||||
this.#broadcasturl = this.#serviceurl.replace(/^http/, "ws")
|
|
||||||
}
|
|
||||||
this.#broadcasturl = this.#broadcasturl + "/ws/notification"
|
|
||||||
this.connectBroadcast()
|
|
||||||
}
|
|
||||||
|
|
||||||
connectedCallback(){
|
|
||||||
this.#rootdoc.innerHTML = this.renderDeprecated()
|
|
||||||
}
|
|
||||||
|
|
||||||
renderDeprecated(){
|
|
||||||
return `
|
|
||||||
<div>
|
|
||||||
<span style="color:red;font-weight:bolder">DEPRECATED!<span>
|
|
||||||
<div>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
|
|
||||||
render(){
|
|
||||||
return `
|
|
||||||
<template id="EXECUTIOM_LIST_TEMPLATE">
|
|
||||||
<ol name="ccp_execution_list" class="ccp-execution-list list-group">
|
|
||||||
<li class="ccp-execution-item list-group-item" style="border: none">
|
|
||||||
<details open>
|
|
||||||
<summary>
|
|
||||||
<h5 style="display:inline"></h5>
|
|
||||||
<span name="status" class="badge"></span>
|
|
||||||
</summary>
|
|
||||||
<p name="message" class="status-message font-weight-light font-italic" style="margin-top:revert"></span>
|
|
||||||
<ul class="list-group">
|
|
||||||
<li class="list-group-item" style="border: none"></li>
|
|
||||||
</ul>
|
|
||||||
</details>
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
</template>
|
|
||||||
<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">
|
|
||||||
<ol name="ccp_execution_list" style="display:none"></ol>
|
|
||||||
`
|
|
||||||
}
|
|
||||||
|
|
||||||
addExecution(execution){
|
|
||||||
this.#executions.push(execution)
|
|
||||||
this.refreshExecution(execution)
|
|
||||||
}
|
|
||||||
|
|
||||||
refreshExecution(execution){
|
|
||||||
this.#boot.secureFetch(`${this.#serviceurl}/executions/${execution.jobID}`).then(reply =>{
|
|
||||||
if(reply.status === 200) return reply.json();
|
|
||||||
else throw "Unable to load job links"
|
|
||||||
}).then(data=>{
|
|
||||||
execution.links = data
|
|
||||||
BSS.apply(this.execution_list_bss, this.#rootdoc)
|
|
||||||
}).catch(err=>{ console.error(err)})
|
|
||||||
}
|
|
||||||
|
|
||||||
connectBroadcast(){
|
|
||||||
this.#socket = new WebSocket(this.#broadcasturl + "/executions");
|
|
||||||
this.#socket.onmessage = event=>{
|
|
||||||
const data = JSON.parse(event.data)
|
|
||||||
let exec = this.#executions.filter(e=>e.jobID === data.jobID)[0]
|
|
||||||
if(exec){
|
|
||||||
exec.events.push(data)
|
|
||||||
if(!exec.self) exec.self = data.links[0].href;
|
|
||||||
this.refreshExecution(exec)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.#interval = window.setInterval( ()=>{
|
|
||||||
if(this.#socket.readyState === 3){
|
|
||||||
this.#socket.close()
|
|
||||||
window.clearInterval(this.#interval)
|
|
||||||
this.connectBroadcast()
|
|
||||||
}else{
|
|
||||||
this.#socket.send("ping")
|
|
||||||
}
|
|
||||||
}, 30000)
|
|
||||||
}
|
|
||||||
|
|
||||||
download(url, name) {
|
|
||||||
this.#boot.secureFetch(url).then(reply => {
|
|
||||||
if (reply.status !== 200) {
|
|
||||||
throw "Unable to download"
|
|
||||||
}
|
|
||||||
return reply.blob()
|
|
||||||
|
|
||||||
}).then(blob => {
|
|
||||||
const objectURL = URL.createObjectURL(blob)
|
|
||||||
var tmplnk = document.createElement("a")
|
|
||||||
tmplnk.download = name
|
|
||||||
tmplnk.href = objectURL
|
|
||||||
//tmplnk.target="_blank"
|
|
||||||
document.body.appendChild(tmplnk)
|
|
||||||
tmplnk.click()
|
|
||||||
document.body.removeChild(tmplnk)
|
|
||||||
|
|
||||||
}).catch(err => console.error(err))
|
|
||||||
}
|
|
||||||
|
|
||||||
execution_list_bss = {
|
|
||||||
template : "#EXECUTIOM_LIST_TEMPLATE",
|
|
||||||
target : "ol[name=ccp_execution_list]",
|
|
||||||
in : ()=>{ return {executions : this.#executions} },
|
|
||||||
recurse:[
|
|
||||||
{
|
|
||||||
target : "li",
|
|
||||||
in : (e,d)=>d.executions,
|
|
||||||
apply: (e,d)=>{
|
|
||||||
if(d.events && d.events.length > 0){
|
|
||||||
e.alt = e.title = (new Date(d.events[d.events.length - 1].updated)).toLocaleString()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
recurse : [
|
|
||||||
{
|
|
||||||
target : "h5",
|
|
||||||
apply : (e,d)=>{
|
|
||||||
e.textContent = d.method
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
target : "span[name=status]",
|
|
||||||
apply : (e,d)=>{
|
|
||||||
if(d.events && d.events.length > 0){
|
|
||||||
const status = d.events[d.events.length - 1].status
|
|
||||||
e.textContent = status
|
|
||||||
if (status === "running") e.classList.add("badge-primary");
|
|
||||||
else if (status === "successful") e.classList.add("badge-success");
|
|
||||||
else if (status === "failure") e.classList.add("badge-danger");
|
|
||||||
else e.classList.add("badge-secondary");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
target : ".status-message",
|
|
||||||
apply : (e,d)=>{
|
|
||||||
if(d.events && d.events.length > 0){
|
|
||||||
e.textContent = d.events[d.events.length - 1].message
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
target : "ul",
|
|
||||||
recurse : [
|
|
||||||
{
|
|
||||||
target : "li",
|
|
||||||
"in" : (e,d)=>{
|
|
||||||
return d.links.map(l=>{
|
|
||||||
return { href : this.#serviceurl + "/executions/" + d.jobID + "/" + l.path, path : l.path}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
on_click : ev=>{
|
|
||||||
const href = ev.currentTarget.bss_input.data.href
|
|
||||||
const name = ev.currentTarget.bss_input.data.path
|
|
||||||
this.download(href, name)
|
|
||||||
},
|
|
||||||
apply : (e,d)=>{
|
|
||||||
e.innerHTML = `<a href="${d.href}" onclick="event.preventDefault()">${d.path}</a>`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
window.customElements.define('d4s-ccp-executionmonitor', CCPExecutionMonitor);
|
|
||||||
|
|
@ -1,230 +1,361 @@
|
||||||
class CCPMethodList extends HTMLElement{
|
class CCPMethodList extends HTMLElement{
|
||||||
|
|
||||||
#boot;
|
#boot;
|
||||||
#rootdoc;
|
#rootdoc;
|
||||||
#data;
|
#data;
|
||||||
#filtered;
|
#filtered;
|
||||||
#dragged = null;
|
#dragged = null;
|
||||||
|
#searchfield = null;
|
||||||
|
|
||||||
#serviceurl;
|
#serviceurl;
|
||||||
|
|
||||||
constructor(){
|
constructor(){
|
||||||
super()
|
super()
|
||||||
this.#boot = document.querySelector("d4s-boot-2")
|
this.#boot = document.querySelector("d4s-boot-2")
|
||||||
this.#serviceurl = this.getAttribute("serviceurl")
|
this.#serviceurl = this.getAttribute("serviceurl")
|
||||||
this.#rootdoc = this.attachShadow({ "mode" : "open"})
|
this.#rootdoc = this.attachShadow({ "mode" : "open"})
|
||||||
this.render()
|
this.render()
|
||||||
this.fetchProcesses()
|
this.fetchProcesses()
|
||||||
}
|
}
|
||||||
|
|
||||||
render(){
|
render(){
|
||||||
this.#rootdoc.innerHTML = `
|
this.#rootdoc.innerHTML = `
|
||||||
<div>
|
<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>
|
<style>
|
||||||
.process_container{
|
.ccp-process-category-list{
|
||||||
display: flex;
|
list-style:none;
|
||||||
flex-direction:column;
|
|
||||||
}
|
|
||||||
input[name=search]{
|
|
||||||
display: block;
|
|
||||||
padding: 0.375rem 0.75rem;
|
|
||||||
color: #495057;
|
|
||||||
background-color: #fff;
|
|
||||||
background-clip: padding-box;
|
|
||||||
border: 1px solid #ced4da;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
|
|
||||||
}
|
|
||||||
input:focus{
|
|
||||||
border-color: #80bdff;
|
|
||||||
outline: 0;
|
|
||||||
box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
|
|
||||||
}
|
|
||||||
ul.process_list{
|
|
||||||
list-style: none;
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
color: #495057;
|
}
|
||||||
display: flex;
|
.ccp-process-category{
|
||||||
flex-direction: column;
|
|
||||||
gap: .25rem;
|
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
li.process_list_item{
|
.ccp-process-list{
|
||||||
display: flex;
|
list-style:none;
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.25rem;
|
|
||||||
cursor: pointer;
|
|
||||||
border: solid 1px rgba(0,0,0,.3);
|
|
||||||
padding: 0.3rem;
|
|
||||||
border-radius: 0.3rem;
|
|
||||||
box-shadow: #333333 1px 1px 4px;
|
|
||||||
background: #eeeeee;
|
|
||||||
transition: background .3s;
|
|
||||||
}
|
}
|
||||||
li.process_list_item:hover{
|
.ccp-process {
|
||||||
background: #ffffff;
|
|
||||||
}
|
|
||||||
ul.keyword_list{
|
|
||||||
list-style: none;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
gap:2px;
|
|
||||||
padding-left: 0;
|
|
||||||
font-size: x-small;
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
li.keyword_list_item{
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0.25em 0.4em;
|
|
||||||
line-height: 1;
|
|
||||||
text-align: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
vertical-align: baseline;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
background-color: #eeffff;
|
|
||||||
color: #0099CC;
|
|
||||||
border: solid 1px #0099CC;
|
|
||||||
}
|
|
||||||
.process_list_item_header{
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
ul.author_list{
|
|
||||||
list-style: none;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
gap:2px;
|
|
||||||
padding-left: 0;
|
|
||||||
font-size: small;
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
li.author_list_item{
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0.25em 0.4em;
|
|
||||||
line-height: 1;
|
|
||||||
text-align: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
vertical-align: baseline;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
background-color: #eeffff;
|
|
||||||
color: #9900CC;
|
|
||||||
border: solid 1px #9900CC;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<template id="PROCESS_LIST_TEMPLATE">
|
<template id="PROCESS_LIST_TEMPLATE">
|
||||||
<ul class="process_list" name="process_list">
|
<ul name="process_category_list" class="border border-2 list-group ccp-process-category-list">
|
||||||
<li class="process_list_item" draggable="true">
|
<li class="list-group-item list-group-item-dark ccp-process-category">
|
||||||
<h4 class="process_list_item_header"></h4>
|
<details>
|
||||||
<i></i>
|
<summary>
|
||||||
<ul name="authors" class="author_list">
|
<h5 class="d-inline mr-2 text-primary"></h5>
|
||||||
<li class="author_list_item"></li>
|
<div class="float-right d-flex" style="gap:2px">
|
||||||
</ul>
|
<span name="count_notexecutables" title="Number of non executable versions" class="badge border border-danger text-danger"></span>
|
||||||
<ul name="keywords" class="keyword_list">
|
<span name="count_executables" title="Number of executable versions" class="badge border border-success text-success"></span>
|
||||||
<li class="keyword_list_item"></li>
|
<button name="export_category" title="Export all versions" class="btn btn-primary ccp-toolbar-button ccp-toolbar-button-small">
|
||||||
</ul>
|
<svg viewBox="0 0 24 24"><g><rect fill="none" height="24" width="24"/></g><g><path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"/></g></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</summary>
|
||||||
|
<ul name="process_list" class="list-group ccp-process-list">
|
||||||
|
<li class="d-flex list-group-item list-group-item-secondary ccp-process p-2 my-1" style="flex-direction: column; gap:5px" draggable="true">
|
||||||
|
<div>
|
||||||
|
<span name="version" class="badge badge-primary"></span>
|
||||||
|
<span name="author" class="badge badge-warning"></span>
|
||||||
|
<div class="float-right d-flex" style="gap:3px">
|
||||||
|
<button name="executable" title="Execute" class="btn btn-success ccp-toolbar-button ccp-toolbar-button-small">
|
||||||
|
<svg viewBox="0 0 48 48" style="fill:white; stroke:white">
|
||||||
|
<path d="M10,10 v28 L38,24 Z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button name="export_method" title="Export this version" class="btn btn-primary ccp-toolbar-button ccp-toolbar-button-small">
|
||||||
|
<svg viewBox="0 0 24 24"><g><rect fill="none"/></g><g><path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"/></g></svg>
|
||||||
|
</button>
|
||||||
|
<button name="edit" title="Edit" class="btn btn-primary ccp-toolbar-button ccp-toolbar-button-small">
|
||||||
|
<svg viewBox="0 0 48 48">
|
||||||
|
<path d="M9 39h2.2l22.15-22.15-2.2-2.2L9 36.8Zm30.7-24.3-6.4-6.4 2.1-2.1q.85-.85 2.1-.85t2.1.85l2.2 2.2q.85.85.85 2.1t-.85 2.1Zm-2.1 2.1L12.4 42H6v-6.4l25.2-25.2Zm-5.35-1.05-1.1-1.1 2.2 2.2Z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p class="m-0 p-0 small" name="description"></p>
|
||||||
|
<div>
|
||||||
|
<span name="keyword" class="badge badge-pill badge-light border border-dark mr-1" style="opacity:.6"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span name="infrastructures" class="badge badge-light text-info border border-info mr-1"></span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
<div class="process_container">
|
<div class="card">
|
||||||
<input name="search" type="text" placeholder="Search ..."/>
|
<div class="card-header" style="padding:0.5rem">
|
||||||
<ul name="process_list"></ul>
|
<div class="ccp-toolbar-header">
|
||||||
|
<div>
|
||||||
|
<span name="header" class="mr-2">List of available methods</span>
|
||||||
|
</div>
|
||||||
|
<div class="ccp-toolbar-right">
|
||||||
|
<button name="refresh" class="btn btn-primary ccp-toolbar-button" title="Refresh">
|
||||||
|
<svg viewBox="0 0 48 48"><path d="M24 40q-6.65 0-11.325-4.675Q8 30.65 8 24q0-6.65 4.675-11.325Q17.35 8 24 8q4.25 0 7.45 1.725T37 14.45V8h3v12.7H27.3v-3h8.4q-1.9-3-4.85-4.85Q27.9 11 24 11q-5.45 0-9.225 3.775Q11 18.55 11 24q0 5.45 3.775 9.225Q18.55 37 24 37q4.15 0 7.6-2.375 3.45-2.375 4.8-6.275h3.1q-1.45 5.25-5.75 8.45Q29.45 40 24 40Z"/></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="mb-3">
|
||||||
|
<input type="text" name="search" class="form-control" placeholder="Search"/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<ul name="process_category_list"></ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
`
|
||||||
`
|
|
||||||
}
|
|
||||||
|
|
||||||
connectedCallback(){
|
this.#rootdoc.querySelector("button[name=refresh]").addEventListener("click", ev=>{
|
||||||
|
this.fetchProcesses()
|
||||||
|
})
|
||||||
|
|
||||||
}
|
this.#searchfield = this.#rootdoc.querySelector("input[name=search]")
|
||||||
|
this.#searchfield.addEventListener("input", ev=>{
|
||||||
fetchProcesses(){
|
this.updateList()
|
||||||
console.log("Calling fetch processes")
|
|
||||||
this.#boot.secureFetch(this.#serviceurl + "/methods").
|
|
||||||
then(resp=>{
|
|
||||||
console.log("Received resp for processes ", resp.status)
|
|
||||||
return resp.json()
|
|
||||||
}).then(data=>{
|
|
||||||
console.log("Processes parsed to json", data)
|
|
||||||
this.#data = data
|
|
||||||
this.showList()
|
|
||||||
}).catch(err=>{
|
|
||||||
alert("Error while downloading methods: ", err)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
showList(){
|
|
||||||
this.enableSearch()
|
|
||||||
this.updateList()
|
|
||||||
}
|
|
||||||
|
|
||||||
updateList(filter){
|
|
||||||
if(filter === "" || filter == null || filter == undefined){
|
|
||||||
this.#filtered = []
|
|
||||||
}else{
|
|
||||||
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()).indexOf(f) !== -1)
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
BSS.apply(this.#process_list_bss, this.#rootdoc)
|
|
||||||
}
|
|
||||||
|
|
||||||
enableSearch(){
|
connectedCallback(){
|
||||||
const search = this.#rootdoc.querySelector("input[name=search]")
|
|
||||||
search.addEventListener("input", ev=>{
|
|
||||||
this.updateList(ev.currentTarget.value)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
#process_list_bss = {
|
}
|
||||||
template : "#PROCESS_LIST_TEMPLATE",
|
|
||||||
target : "ul[name=process_list]",
|
fetchProcesses(){
|
||||||
"in" : this,
|
console.log("Calling fetch processes")
|
||||||
recurse : [
|
this.#boot.secureFetch(this.#serviceurl + "/methods").
|
||||||
{
|
then(resp=>{
|
||||||
target : "li",
|
console.log("Received resp for processes ", resp.status)
|
||||||
"in" : (e,d)=>this.#filtered,
|
return resp.json()
|
||||||
on_dragstart : ev=>{
|
}).then(data=>{
|
||||||
ev.dataTransfer.effectAllowed = 'move'
|
console.log("Processes parsed to json", data)
|
||||||
ev.dataTransfer.setData('text/html', ev.currentTarget.innerHTML)
|
this.#data = data
|
||||||
ev.dataTransfer.setData('text/plain+ccpmethod', ev.currentTarget.bss_input.data.id)
|
this.updateList()
|
||||||
ev.dataTransfer.setData('application/json+ccpmethod', JSON.stringify(ev.currentTarget.bss_input.data))
|
return this.fetchInfrastructures()
|
||||||
},
|
}).then(d => {
|
||||||
on_dragend : ev=>{
|
this.updateList()
|
||||||
ev.preventDefault()
|
}).catch(err=>{
|
||||||
},
|
alert("Error while downloading methods")
|
||||||
recurse : [
|
console.error("Error while downloading methods: " + err)
|
||||||
{
|
})
|
||||||
target : "h4",
|
}
|
||||||
apply : (e,d)=>{ e.textContent = `${d.title} v. ${d.version}` }
|
|
||||||
},
|
fetchInfrastructures(){
|
||||||
{
|
const url = this.#serviceurl + "/infrastructures"
|
||||||
target : "i",
|
this.#boot.secureFetch(url).
|
||||||
apply : (e,d)=>{ e.textContent = d.description }
|
then(resp=>{
|
||||||
},
|
if(resp.status !== 200) throw "Unable to fetch infrastructures " + resp.status;
|
||||||
{
|
else return resp.json()
|
||||||
target : "ul[name=authors]",
|
}).then(infras=>{
|
||||||
recurse : {
|
for(let m=0; m < this.#data.length; m++){
|
||||||
target : "li",
|
const method = this.#data[m]
|
||||||
"in" : (e,d)=>d.metadata.filter(md=>md.role === "author"),
|
method["executable"] = false
|
||||||
apply : (e,d)=>{ e.textContent = d.title }
|
for(let i=0; i < infras.length; i++){
|
||||||
}
|
const infra = infras[i]
|
||||||
},
|
const matches = method.links.filter(l => l.rel === "compatibleWith" && l.href === "infrastructures/" + infra.id)
|
||||||
{
|
if(matches.length > 0){
|
||||||
target : "ul[name=keywords]",
|
method["executable"] = true
|
||||||
recurse : {
|
break
|
||||||
target : "li",
|
|
||||||
"in" : (e,d)=>d.keywords,
|
|
||||||
apply : (e,d)=>{ e.alt = e.title = e.textContent = d }
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
}
|
||||||
|
this.updateList()
|
||||||
|
}).catch(err=>{
|
||||||
|
alert("Error while checking runtimes for method")
|
||||||
|
console.error("Error while checking runtimes for method: " + err)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
updateList(){
|
||||||
|
const filter = this.#searchfield.value
|
||||||
|
if(filter === "" || filter == null || filter == undefined){
|
||||||
|
this.#filtered = this.#data
|
||||||
|
}else{
|
||||||
|
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
|
||||||
|
})
|
||||||
}
|
}
|
||||||
]
|
this.groupBy()
|
||||||
|
BSS.apply(this.#process_list_bss, this.#rootdoc)
|
||||||
|
}
|
||||||
|
|
||||||
|
groupBy(){
|
||||||
|
this.#filtered = this.#filtered.reduce((catalog, meth)=>{
|
||||||
|
const category = meth.title
|
||||||
|
catalog[category] = catalog[category] ?? []
|
||||||
|
catalog[category].push(meth)
|
||||||
|
return catalog
|
||||||
|
}, {})
|
||||||
|
}
|
||||||
|
|
||||||
|
exportCategory(category){
|
||||||
|
Promise.all(
|
||||||
|
this.#filtered[category].map(m=>this.exportMethod(m.id))
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
exportMethod(method){
|
||||||
|
this.#boot.secureFetch(this.#serviceurl + "/methods/" + method + "/shareable").then(
|
||||||
|
(resp)=>{
|
||||||
|
if(resp.status === 200){
|
||||||
|
return resp.json()
|
||||||
|
}else throw "Error exporting sharable process: " + resp.status
|
||||||
|
}
|
||||||
|
).then(data=>{
|
||||||
|
const filename = data.title + "-" + data.version + ".json"
|
||||||
|
const datastr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data));
|
||||||
|
var tmplnk = document.createElement("a")
|
||||||
|
tmplnk.download = filename
|
||||||
|
tmplnk.href = datastr
|
||||||
|
document.body.appendChild(tmplnk)
|
||||||
|
tmplnk.click()
|
||||||
|
document.body.removeChild(tmplnk)
|
||||||
|
}).catch(err=>{
|
||||||
|
console.log(err)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
importMethods(files){
|
||||||
|
if(files && files.length) {
|
||||||
|
let formdata = new FormData();
|
||||||
|
files.reduce((formdata, f)=>{
|
||||||
|
formdata.append("files[]", f)
|
||||||
|
return formdata
|
||||||
|
}, formdata)
|
||||||
|
this.#boot.secureFetch(`${this.#serviceurl}/methods`, { body: formdata, method : "POST"})
|
||||||
|
.then(reply=>{
|
||||||
|
if (reply.status !== 200) {
|
||||||
|
throw "Unable to import"
|
||||||
|
}else return reply.text()
|
||||||
|
}).then(data=>{
|
||||||
|
this.fetchProcesses()
|
||||||
|
}).catch(err=>{ alert(err) })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#process_list_bss = {
|
||||||
|
template : "#PROCESS_LIST_TEMPLATE",
|
||||||
|
target : "ul[name=process_category_list]",
|
||||||
|
"in" : this,
|
||||||
|
on_dragover : (ev)=> ev.preventDefault(),
|
||||||
|
on_dragenter : (ev)=> ev.target.classList.toggle("border-info"),
|
||||||
|
on_dragleave : (ev)=> ev.target.classList.toggle("border-info"),
|
||||||
|
on_drop : (ev)=>{
|
||||||
|
if(ev.dataTransfer && ev.dataTransfer.files && ev.dataTransfer.files.length){
|
||||||
|
const files = Array.prototype.slice.call(ev.dataTransfer.files)
|
||||||
|
const jsons = files.filter(f=>f.type === "application/json")
|
||||||
|
if(confirm("Confirm import of method files?")){
|
||||||
|
this.importMethods(files)
|
||||||
|
}
|
||||||
|
ev.preventDefault()
|
||||||
|
ev.stopPropagation()
|
||||||
|
}
|
||||||
|
ev.target.classList.toggle("border-info")
|
||||||
|
},
|
||||||
|
recurse : [
|
||||||
|
{
|
||||||
|
target : "li.ccp-process-category",
|
||||||
|
"in" : (e,d)=>Object.keys(this.#filtered),
|
||||||
|
on_click : ev=>{
|
||||||
|
if(ev.target.getAttribute("name") === "export_category"){
|
||||||
|
this.exportCategory(ev.currentTarget.bss_input.data)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
recurse : [
|
||||||
|
{
|
||||||
|
target : "summary",
|
||||||
|
apply : (e,d)=>{
|
||||||
|
const executables = this.#filtered[d].filter(m=>m.executable).length
|
||||||
|
e.querySelector("h5").textContent = d
|
||||||
|
e.querySelector("span[name=count_notexecutables]").textContent = this.#filtered[d].length - executables
|
||||||
|
e.querySelector("span[name=count_executables]").textContent = executables
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
target : "details",
|
||||||
|
apply : (e,d)=>{
|
||||||
|
e.alt = e.title = d
|
||||||
|
if(sessionStorage.getItem(d) === "open") e.open = "open";
|
||||||
|
else e.removeAttribute("open");
|
||||||
|
},
|
||||||
|
on_toggle : ev=>{
|
||||||
|
if(ev.target.open){
|
||||||
|
sessionStorage.setItem(ev.currentTarget.alt, 'open')
|
||||||
|
}else{
|
||||||
|
sessionStorage.removeItem(ev.currentTarget.alt)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
target : "details ul[name=process_list]",
|
||||||
|
in : (e,d)=>d,
|
||||||
|
recurse: [
|
||||||
|
{
|
||||||
|
target : "li.ccp-process",
|
||||||
|
"in" : (e,d)=>this.#filtered[d],
|
||||||
|
on_click : ev=>{
|
||||||
|
const id = ev.currentTarget.bss_input.data.id
|
||||||
|
if(ev.target.getAttribute("name") === "export_method"){
|
||||||
|
this.exportMethod(id)
|
||||||
|
}else if(ev.target.getAttribute("name") === "executable"){
|
||||||
|
const event = new CustomEvent('newexecutionrequest', { detail: id });
|
||||||
|
document.dispatchEvent(event)
|
||||||
|
}else if(ev.target.getAttribute("name") === "edit"){
|
||||||
|
const event = new CustomEvent('neweditrequest', { detail: ev.currentTarget.bss_input.data });
|
||||||
|
document.dispatchEvent(event)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
on_dragstart : ev=>{
|
||||||
|
ev.dataTransfer.effectAllowed = 'move'
|
||||||
|
ev.dataTransfer.setData('text/html', ev.currentTarget.innerHTML)
|
||||||
|
ev.dataTransfer.setData('text/plain+ccpmethod', ev.currentTarget.bss_input.data.id)
|
||||||
|
ev.dataTransfer.setData('application/json+ccpmethod', JSON.stringify(ev.currentTarget.bss_input.data))
|
||||||
|
},
|
||||||
|
on_dragend : ev=>{
|
||||||
|
ev.preventDefault()
|
||||||
|
},
|
||||||
|
recurse : [
|
||||||
|
{
|
||||||
|
target: "span[name=version]",
|
||||||
|
apply : (e,d)=>{ e.textContent = d.version }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
target: "button[name=executable]",
|
||||||
|
apply : (e,d)=>{ e.style.display = d.executable ? "revert" : "none" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
target : "span[name=author]",
|
||||||
|
"in" : (e,d)=>d.metadata.filter(md=>md.role === "author"),
|
||||||
|
apply : (e,d)=>{ e.textContent = d.title; e.alt = e.title = "author" }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
target : "span[name=keyword]",
|
||||||
|
"in" : (e,d)=>d.keywords,
|
||||||
|
apply : (e,d)=>{ e.alt = e.title = e.textContent = d }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
target : "span[name=infrastructures]",
|
||||||
|
"in" : (e,d)=>d.links.filter(md=>md.rel === "compatibleWith"),
|
||||||
|
apply : (e,d)=>{ e.alt = e.title = e.textContent = d.title }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
target : "p[name=description]",
|
||||||
|
apply : (e,d)=>{ e.textContent = d.description }
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
window.customElements.define('d4s-ccp-methodlist', CCPMethodList);
|
window.customElements.define('d4s-ccp-methodlist', CCPMethodList);
|
||||||
|
|
|
||||||
|
|
@ -1,361 +0,0 @@
|
||||||
class CCPMethodList2 extends HTMLElement{
|
|
||||||
|
|
||||||
#boot;
|
|
||||||
#rootdoc;
|
|
||||||
#data;
|
|
||||||
#filtered;
|
|
||||||
#dragged = null;
|
|
||||||
#searchfield = null;
|
|
||||||
|
|
||||||
#serviceurl;
|
|
||||||
|
|
||||||
constructor(){
|
|
||||||
super()
|
|
||||||
this.#boot = document.querySelector("d4s-boot-2")
|
|
||||||
this.#serviceurl = this.getAttribute("serviceurl")
|
|
||||||
this.#rootdoc = this.attachShadow({ "mode" : "open"})
|
|
||||||
this.render()
|
|
||||||
this.fetchProcesses()
|
|
||||||
}
|
|
||||||
|
|
||||||
render(){
|
|
||||||
this.#rootdoc.innerHTML = `
|
|
||||||
<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>
|
|
||||||
.ccp-process-category-list{
|
|
||||||
list-style:none;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
.ccp-process-category{
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
.ccp-process-list{
|
|
||||||
list-style:none;
|
|
||||||
}
|
|
||||||
.ccp-process {
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template id="PROCESS_LIST_TEMPLATE">
|
|
||||||
<ul name="process_category_list" class="border border-2 list-group ccp-process-category-list">
|
|
||||||
<li class="list-group-item list-group-item-dark ccp-process-category">
|
|
||||||
<details>
|
|
||||||
<summary>
|
|
||||||
<h5 class="d-inline mr-2 text-primary"></h5>
|
|
||||||
<div class="float-right d-flex" style="gap:2px">
|
|
||||||
<span name="count_notexecutables" title="Number of non executable versions" class="badge border border-danger text-danger"></span>
|
|
||||||
<span name="count_executables" title="Number of executable versions" class="badge border border-success text-success"></span>
|
|
||||||
<button name="export_category" title="Export all versions" class="btn btn-primary ccp-toolbar-button ccp-toolbar-button-small">
|
|
||||||
<svg viewBox="0 0 24 24"><g><rect fill="none" height="24" width="24"/></g><g><path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"/></g></svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</summary>
|
|
||||||
<ul name="process_list" class="list-group ccp-process-list">
|
|
||||||
<li class="d-flex list-group-item list-group-item-secondary ccp-process p-2 my-1" style="flex-direction: column; gap:5px" draggable="true">
|
|
||||||
<div>
|
|
||||||
<span name="version" class="badge badge-primary"></span>
|
|
||||||
<span name="author" class="badge badge-warning"></span>
|
|
||||||
<div class="float-right d-flex" style="gap:3px">
|
|
||||||
<button name="executable" title="Execute" class="btn btn-success ccp-toolbar-button ccp-toolbar-button-small">
|
|
||||||
<svg viewBox="0 0 48 48" style="fill:white; stroke:white">
|
|
||||||
<path d="M10,10 v28 L38,24 Z"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<button name="export_method" title="Export this version" class="btn btn-primary ccp-toolbar-button ccp-toolbar-button-small">
|
|
||||||
<svg viewBox="0 0 24 24"><g><rect fill="none"/></g><g><path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"/></g></svg>
|
|
||||||
</button>
|
|
||||||
<button name="edit" title="Edit" class="btn btn-primary ccp-toolbar-button ccp-toolbar-button-small">
|
|
||||||
<svg viewBox="0 0 48 48">
|
|
||||||
<path d="M9 39h2.2l22.15-22.15-2.2-2.2L9 36.8Zm30.7-24.3-6.4-6.4 2.1-2.1q.85-.85 2.1-.85t2.1.85l2.2 2.2q.85.85.85 2.1t-.85 2.1Zm-2.1 2.1L12.4 42H6v-6.4l25.2-25.2Zm-5.35-1.05-1.1-1.1 2.2 2.2Z"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p class="m-0 p-0 small" name="description"></p>
|
|
||||||
<div>
|
|
||||||
<span name="keyword" class="badge badge-pill badge-light border border-dark mr-1" style="opacity:.6"></span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span name="infrastructures" class="badge badge-light text-info border border-info mr-1"></span>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</details>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</template>
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-header" style="padding:0.5rem">
|
|
||||||
<div class="ccp-toolbar-header">
|
|
||||||
<div>
|
|
||||||
<span name="header" class="mr-2">List of available methods</span>
|
|
||||||
</div>
|
|
||||||
<div class="ccp-toolbar-right">
|
|
||||||
<button name="refresh" class="btn btn-primary ccp-toolbar-button" title="Refresh">
|
|
||||||
<svg viewBox="0 0 48 48"><path d="M24 40q-6.65 0-11.325-4.675Q8 30.65 8 24q0-6.65 4.675-11.325Q17.35 8 24 8q4.25 0 7.45 1.725T37 14.45V8h3v12.7H27.3v-3h8.4q-1.9-3-4.85-4.85Q27.9 11 24 11q-5.45 0-9.225 3.775Q11 18.55 11 24q0 5.45 3.775 9.225Q18.55 37 24 37q4.15 0 7.6-2.375 3.45-2.375 4.8-6.275h3.1q-1.45 5.25-5.75 8.45Q29.45 40 24 40Z"/></svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-body">
|
|
||||||
<div class="mb-3">
|
|
||||||
<input type="text" name="search" class="form-control" placeholder="Search"/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<ul name="process_category_list"></ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
|
|
||||||
this.#rootdoc.querySelector("button[name=refresh]").addEventListener("click", ev=>{
|
|
||||||
this.fetchProcesses()
|
|
||||||
})
|
|
||||||
|
|
||||||
this.#searchfield = this.#rootdoc.querySelector("input[name=search]")
|
|
||||||
this.#searchfield.addEventListener("input", ev=>{
|
|
||||||
this.updateList()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
connectedCallback(){
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchProcesses(){
|
|
||||||
console.log("Calling fetch processes")
|
|
||||||
this.#boot.secureFetch(this.#serviceurl + "/methods").
|
|
||||||
then(resp=>{
|
|
||||||
console.log("Received resp for processes ", resp.status)
|
|
||||||
return resp.json()
|
|
||||||
}).then(data=>{
|
|
||||||
console.log("Processes parsed to json", data)
|
|
||||||
this.#data = data
|
|
||||||
this.updateList()
|
|
||||||
return this.fetchInfrastructures()
|
|
||||||
}).then(d => {
|
|
||||||
this.updateList()
|
|
||||||
}).catch(err=>{
|
|
||||||
alert("Error while downloading methods")
|
|
||||||
console.error("Error while downloading methods: " + err)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
fetchInfrastructures(){
|
|
||||||
const url = this.#serviceurl + "/infrastructures"
|
|
||||||
this.#boot.secureFetch(url).
|
|
||||||
then(resp=>{
|
|
||||||
if(resp.status !== 200) throw "Unable to fetch infrastructures " + resp.status;
|
|
||||||
else return resp.json()
|
|
||||||
}).then(infras=>{
|
|
||||||
for(let m=0; m < this.#data.length; m++){
|
|
||||||
const method = this.#data[m]
|
|
||||||
method["executable"] = false
|
|
||||||
for(let i=0; i < infras.length; i++){
|
|
||||||
const infra = infras[i]
|
|
||||||
const matches = method.links.filter(l => l.rel === "compatibleWith" && l.href === "infrastructures/" + infra.id)
|
|
||||||
if(matches.length > 0){
|
|
||||||
method["executable"] = true
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.updateList()
|
|
||||||
}).catch(err=>{
|
|
||||||
alert("Error while checking runtimes for method")
|
|
||||||
console.error("Error while checking runtimes for method: " + err)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
updateList(){
|
|
||||||
const filter = this.#searchfield.value
|
|
||||||
if(filter === "" || filter == null || filter == undefined){
|
|
||||||
this.#filtered = this.#data
|
|
||||||
}else{
|
|
||||||
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
|
|
||||||
})
|
|
||||||
}
|
|
||||||
this.groupBy()
|
|
||||||
BSS.apply(this.#process_list_bss, this.#rootdoc)
|
|
||||||
}
|
|
||||||
|
|
||||||
groupBy(){
|
|
||||||
this.#filtered = this.#filtered.reduce((catalog, meth)=>{
|
|
||||||
const category = meth.title
|
|
||||||
catalog[category] = catalog[category] ?? []
|
|
||||||
catalog[category].push(meth)
|
|
||||||
return catalog
|
|
||||||
}, {})
|
|
||||||
}
|
|
||||||
|
|
||||||
exportCategory(category){
|
|
||||||
Promise.all(
|
|
||||||
this.#filtered[category].map(m=>this.exportMethod(m.id))
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
exportMethod(method){
|
|
||||||
this.#boot.secureFetch(this.#serviceurl + "/methods/" + method + "/shareable").then(
|
|
||||||
(resp)=>{
|
|
||||||
if(resp.status === 200){
|
|
||||||
return resp.json()
|
|
||||||
}else throw "Error exporting sharable process: " + resp.status
|
|
||||||
}
|
|
||||||
).then(data=>{
|
|
||||||
const filename = data.title + "-" + data.version + ".json"
|
|
||||||
const datastr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(data));
|
|
||||||
var tmplnk = document.createElement("a")
|
|
||||||
tmplnk.download = filename
|
|
||||||
tmplnk.href = datastr
|
|
||||||
document.body.appendChild(tmplnk)
|
|
||||||
tmplnk.click()
|
|
||||||
document.body.removeChild(tmplnk)
|
|
||||||
}).catch(err=>{
|
|
||||||
console.log(err)
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
importMethods(files){
|
|
||||||
if(files && files.length) {
|
|
||||||
let formdata = new FormData();
|
|
||||||
files.reduce((formdata, f)=>{
|
|
||||||
formdata.append("files[]", f)
|
|
||||||
return formdata
|
|
||||||
}, formdata)
|
|
||||||
this.#boot.secureFetch(`${this.#serviceurl}/methods`, { body: formdata, method : "POST"})
|
|
||||||
.then(reply=>{
|
|
||||||
if (reply.status !== 200) {
|
|
||||||
throw "Unable to import"
|
|
||||||
}else return reply.text()
|
|
||||||
}).then(data=>{
|
|
||||||
this.fetchProcesses()
|
|
||||||
}).catch(err=>{ alert(err) })
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#process_list_bss = {
|
|
||||||
template : "#PROCESS_LIST_TEMPLATE",
|
|
||||||
target : "ul[name=process_category_list]",
|
|
||||||
"in" : this,
|
|
||||||
on_dragover : (ev)=> ev.preventDefault(),
|
|
||||||
on_dragenter : (ev)=> ev.target.classList.toggle("border-info"),
|
|
||||||
on_dragleave : (ev)=> ev.target.classList.toggle("border-info"),
|
|
||||||
on_drop : (ev)=>{
|
|
||||||
if(ev.dataTransfer && ev.dataTransfer.files && ev.dataTransfer.files.length){
|
|
||||||
const files = Array.prototype.slice.call(ev.dataTransfer.files)
|
|
||||||
const jsons = files.filter(f=>f.type === "application/json")
|
|
||||||
if(confirm("Confirm import of method files?")){
|
|
||||||
this.importMethods(files)
|
|
||||||
}
|
|
||||||
ev.preventDefault()
|
|
||||||
ev.stopPropagation()
|
|
||||||
}
|
|
||||||
ev.target.classList.toggle("border-info")
|
|
||||||
},
|
|
||||||
recurse : [
|
|
||||||
{
|
|
||||||
target : "li.ccp-process-category",
|
|
||||||
"in" : (e,d)=>Object.keys(this.#filtered),
|
|
||||||
on_click : ev=>{
|
|
||||||
if(ev.target.getAttribute("name") === "export_category"){
|
|
||||||
this.exportCategory(ev.currentTarget.bss_input.data)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
recurse : [
|
|
||||||
{
|
|
||||||
target : "summary",
|
|
||||||
apply : (e,d)=>{
|
|
||||||
const executables = this.#filtered[d].filter(m=>m.executable).length
|
|
||||||
e.querySelector("h5").textContent = d
|
|
||||||
e.querySelector("span[name=count_notexecutables]").textContent = this.#filtered[d].length - executables
|
|
||||||
e.querySelector("span[name=count_executables]").textContent = executables
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
target : "details",
|
|
||||||
apply : (e,d)=>{
|
|
||||||
e.alt = e.title = d
|
|
||||||
if(sessionStorage.getItem(d) === "open") e.open = "open";
|
|
||||||
else e.removeAttribute("open");
|
|
||||||
},
|
|
||||||
on_toggle : ev=>{
|
|
||||||
if(ev.target.open){
|
|
||||||
sessionStorage.setItem(ev.currentTarget.alt, 'open')
|
|
||||||
}else{
|
|
||||||
sessionStorage.removeItem(ev.currentTarget.alt)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
target : "details ul[name=process_list]",
|
|
||||||
in : (e,d)=>d,
|
|
||||||
recurse: [
|
|
||||||
{
|
|
||||||
target : "li.ccp-process",
|
|
||||||
"in" : (e,d)=>this.#filtered[d],
|
|
||||||
on_click : ev=>{
|
|
||||||
const id = ev.currentTarget.bss_input.data.id
|
|
||||||
if(ev.target.getAttribute("name") === "export_method"){
|
|
||||||
this.exportMethod(id)
|
|
||||||
}else if(ev.target.getAttribute("name") === "executable"){
|
|
||||||
const event = new CustomEvent('newexecutionrequest', { detail: id });
|
|
||||||
document.dispatchEvent(event)
|
|
||||||
}else if(ev.target.getAttribute("name") === "edit"){
|
|
||||||
const event = new CustomEvent('neweditrequest', { detail: ev.currentTarget.bss_input.data });
|
|
||||||
document.dispatchEvent(event)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
on_dragstart : ev=>{
|
|
||||||
ev.dataTransfer.effectAllowed = 'move'
|
|
||||||
ev.dataTransfer.setData('text/html', ev.currentTarget.innerHTML)
|
|
||||||
ev.dataTransfer.setData('text/plain+ccpmethod', ev.currentTarget.bss_input.data.id)
|
|
||||||
ev.dataTransfer.setData('application/json+ccpmethod', JSON.stringify(ev.currentTarget.bss_input.data))
|
|
||||||
},
|
|
||||||
on_dragend : ev=>{
|
|
||||||
ev.preventDefault()
|
|
||||||
},
|
|
||||||
recurse : [
|
|
||||||
{
|
|
||||||
target: "span[name=version]",
|
|
||||||
apply : (e,d)=>{ e.textContent = d.version }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
target: "button[name=executable]",
|
|
||||||
apply : (e,d)=>{ e.style.display = d.executable ? "revert" : "none" }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
target : "span[name=author]",
|
|
||||||
"in" : (e,d)=>d.metadata.filter(md=>md.role === "author"),
|
|
||||||
apply : (e,d)=>{ e.textContent = d.title; e.alt = e.title = "author" }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
target : "span[name=keyword]",
|
|
||||||
"in" : (e,d)=>d.keywords,
|
|
||||||
apply : (e,d)=>{ e.alt = e.title = e.textContent = d }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
target : "span[name=infrastructures]",
|
|
||||||
"in" : (e,d)=>d.links.filter(md=>md.rel === "compatibleWith"),
|
|
||||||
apply : (e,d)=>{ e.alt = e.title = e.textContent = d.title }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
target : "p[name=description]",
|
|
||||||
apply : (e,d)=>{ e.textContent = d.description }
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.customElements.define('d4s-ccp-methodlist2', CCPMethodList2);
|
|
||||||
Loading…
Reference in New Issue