added new method list widget
This commit is contained in:
dcore94
parent
8e8275a5c4
commit
875beb4e56
|
|
@ -0,0 +1,229 @@
|
|||
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.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
<style>
|
||||
.ccp-toolbar-header {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 0.2rem;
|
||||
min-width: 20rem;
|
||||
}
|
||||
.ccp-toolbar-right {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
}
|
||||
.ccp-toolbar-button {
|
||||
font-weight: bold;
|
||||
padding: 0.3rem;
|
||||
line-height: .8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ccp-toolbar-button > svg {
|
||||
width: 24px;
|
||||
height:24px;
|
||||
fill: white;
|
||||
stroke: white;
|
||||
}
|
||||
.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="list-group ccp-process-category-list">
|
||||
<li class="list-group-item list-group-item-secondary ccp-process-category">
|
||||
<details>
|
||||
<summary>
|
||||
<h5 style="display: inline"><span name="count" class="badge badge-pill badge-dark"></span></h5>
|
||||
</summary>
|
||||
<ul name="process_list" class="list-group ccp-process-list">
|
||||
<li class="list-group-item list-group-item-dark ccp-process p-1 my-1" draggable="true">
|
||||
<div>
|
||||
<span name="version" class="badge badge-primary"></span>
|
||||
<span name="author" class="badge badge-warning"></span>
|
||||
</div>
|
||||
<p style="margin-top:.5rem" class="small" name="description"></p>
|
||||
<div>
|
||||
<span name="keyword" class="badge badge-pill badge-light mr-1" style="opacity:.6"></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">Method list</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()
|
||||
}).catch(err=>{
|
||||
alert("Error while downloading methods: ", err)
|
||||
})
|
||||
}
|
||||
|
||||
showList(){
|
||||
this.updateList()
|
||||
}
|
||||
|
||||
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
|
||||
}, {})
|
||||
console.log(this.#filtered)
|
||||
}
|
||||
|
||||
#process_list_bss = {
|
||||
template : "#PROCESS_LIST_TEMPLATE",
|
||||
target : "ul[name=process_category_list]",
|
||||
"in" : this,
|
||||
recurse : [
|
||||
{
|
||||
target : "li",
|
||||
"in" : (e,d)=>Object.keys(this.#filtered),
|
||||
recurse : [
|
||||
{
|
||||
target : "summary > h5",
|
||||
apply : (e,d)=>{
|
||||
e.innerHTML =
|
||||
`${d} <span style="opacity:.6" title="Number of versions" class="badge badge-pill badge-light">${this.#filtered[d].length}</span>` }
|
||||
},
|
||||
{
|
||||
target : "details ul[name=process_list]",
|
||||
in : (e,d)=>d,
|
||||
recurse: [
|
||||
{
|
||||
target : "li.ccp-process",
|
||||
"in" : (e,d)=>this.#filtered[d],
|
||||
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 : "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 : "p[name=description]",
|
||||
apply : (e,d)=>{ e.textContent = d.description }
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('d4s-ccp-methodlist2', CCPMethodList2);
|
||||
Loading…
Reference in New Issue