added ccp example

ccp/fragment.html

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

ccp/js/methodlistcontroller.js

@@ -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);