added ccp example
This commit is contained in:
dcore94
parent
49b6ea230b
commit
783cefd288
|
|
@ -0,0 +1,73 @@
|
|||
<div>
|
||||
<style>
|
||||
input[name=search]{
|
||||
display: block;
|
||||
width: 100%;
|
||||
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;
|
||||
font-family: Arial,Helvetica,sans-serif;
|
||||
color: #495057;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .25rem;
|
||||
}
|
||||
li.process_list_item{
|
||||
margin-bottom: .4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .25rem;
|
||||
}
|
||||
ul.keyword_list{
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap:2px;
|
||||
padding-left: 0;
|
||||
}
|
||||
li.keyword_list_item{
|
||||
display: inline-block;
|
||||
padding: 0.25em 0.4em;
|
||||
font-size: small;
|
||||
font-weight: 300;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
<template id="PROCESS_LIST_TEMPLATE">
|
||||
<ul class="process_list" name="process_list">
|
||||
<li class="process_list_item">
|
||||
<div style="display:flex;flex-direction:row;gap:1rem">
|
||||
<b></b>
|
||||
<ul name="keywords" class="keyword_list">
|
||||
<li class="keyword_list_item"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<i></i>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<div>
|
||||
<input name="search" type="text"/>
|
||||
<ul name="process_list"></ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
class CCPMethodList extends HTMLElement{
|
||||
|
||||
#boot;
|
||||
#rootdoc;
|
||||
#data;
|
||||
#filtered;
|
||||
|
||||
#url = "http://localhost:8080/ccp/fragment.html"
|
||||
//#url = "http://d4science-cdn-public:8984/resources/ccp/fragment.html"
|
||||
|
||||
constructor(){
|
||||
super()
|
||||
this.#boot = document.querySelector("d4s-boot-2")
|
||||
this.#rootdoc = this.attachShadow({ "mode" : "open"})
|
||||
this.fetchMarkup()
|
||||
}
|
||||
|
||||
fetchMarkup(){
|
||||
return fetch(this.#url).then(
|
||||
(reply)=>{
|
||||
if(reply.status === 200){
|
||||
return reply.text()
|
||||
}else{ throw new Exception("Unable to fetch markup") }
|
||||
}).then(data=>{
|
||||
this.#rootdoc.innerHTML = data
|
||||
console.log(this.#boot)
|
||||
this.fetchProcesses()
|
||||
}).catch(err=>{
|
||||
console.error(err)
|
||||
})
|
||||
}
|
||||
|
||||
connectedCallback(){
|
||||
//this.#boot.whenReady(()=>{ this.fetchMethods() })
|
||||
//window.setTimeout(()=>this.fetchMethods(), 1000)
|
||||
}
|
||||
|
||||
fetchProcesses(){
|
||||
this.#boot.service("http://localhost:8080/processes", "GET", { limit : 1000}, (resp)=>this.showList(resp), ()=>{ alert("You are not allowed list CCP methods") })
|
||||
}
|
||||
|
||||
showList(resp){
|
||||
this.#data = JSON.parse(resp)
|
||||
this.enableSearch()
|
||||
this.updateList()
|
||||
}
|
||||
|
||||
updateList(filter){
|
||||
if(filter === "" || filter == null || filter == undefined){
|
||||
this.#filtered = []
|
||||
}else{
|
||||
const f = filter.toLowerCase()
|
||||
this.#filtered = this.#data["processes"].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(){
|
||||
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]",
|
||||
"in" : this,
|
||||
"recurse" : [
|
||||
{
|
||||
"target" : "li",
|
||||
"in" : (e,d)=>this.#filtered,
|
||||
"recurse" : [
|
||||
{
|
||||
"target" : "b",
|
||||
"apply" : (e,d)=>{ e.textContent = d.title }
|
||||
},
|
||||
{
|
||||
"target" : "i",
|
||||
"apply" : (e,d)=>{ e.textContent = d.description }
|
||||
},
|
||||
{
|
||||
"target" : "ul",
|
||||
"recurse" : {
|
||||
"target" : "li",
|
||||
"in" : (e,d)=>d.keywords,
|
||||
"apply" : (e,d)=>{
|
||||
e.alt = e.title = e.textContent = d
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
window.customElements.define('d4s-ccp-methodlist', CCPMethodList);
|
||||
Loading…
Reference in New Issue