Start filter design

Author: SKernchen

public/curation/curation.js

@@ -34,7 +34,10 @@ export function displayJSON(json_document){
       const metadateTemp = document.querySelector("#metadate");
       const tbody = document.querySelector("#metadata");
       const policyTemp = document.querySelector("#policy"),
-          policyDiv =  document.querySelector("#sw-policies");
+          policyDiv =  document.querySelector("#sw-policies"),
+          filterTemp = document.querySelector("#filter"),
+          filterDropdown = document.querySelector("#filterDropdown");
+          
 
 
 
@@ -60,6 +63,12 @@ export function displayJSON(json_document){
             console.log(policyId);
             polname.textContent = `${pol[policyId]["name"]}`;
             //const randColor = '#'+(0x1000000+Math.random()*0xffffff).toString(16).slice(1,7);
+            const filter = document.importNode(filterTemp.content, true);
+            const filterName = filter.querySelector("#filter-name"),
+                filterId = filter.querySelector("#filter-id");
+            filterName.textContent = `\u{2714} ${pol[policyId]["name"]}`; //✔ 
+            filterId.style.background = colorPolicies[policyId];
+            filterDropdown.appendChild(filter);
             polcolor.id += '_'+policyId;
             polcolor.style.background = colorPolicies[policyId];
             console.log(colorPolicies);

public/curation/index.html

@@ -29,10 +29,11 @@ <h1><a href="../">Software CaRD</a>
         <button onclick="showFilter()" class="dropbtn">Filter</button>
         <div id="filterDropdown" class="dropdown-content">
             <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
-            <a>&#10004; Conflicts</a>
-            <a>&#10004; Policy 1</a>
-            <a>&#10004; Policy 2</a>
-            <a>&#10004; Policy 3</a>
+            <a>&#10004; Select all</a>
+            <div class="policy-header"><div class="policy-color" style="background-color: red;"></div><a>&#10004; Conflicts</a></div>
+            <template id="filter">
+            <div class="policy-header"><div class="policy-color" id="filter-id"></div><a id="filter-name">&#10004; Policy 1</a></div>
+            </template>
         </div>
     </div>