Merge pull request #40 from gdorsi/master

Adds search and filters to the app library

index.html

@@ -26,6 +26,9 @@
       padding-bottom: 1rem;
       padding-top: 1rem;
       text-align:center;
+    }
+    .chip {
+      cursor: pointer;
     }
 	</style>
   </head>
@@ -62,19 +65,19 @@
     </div>
 
     <div class="container bangle-tab" id="librarycontainer">
-      <!--<div class="filter-nav">
-        <label class="chip" filterid="">All</label>
+      <div class="filter-nav">
+        <label class="chip active" filterid="">All</label>
         <label class="chip" filterid="clock">Clocks</label>
         <label class="chip" filterid="game">Games</label>
         <label class="chip" filterid="tool">Tools</label>
         <label class="chip" filterid="hardware">Hardware</label>
-      </div>-->
+      </div>
       <div class="panel">
         <div class="panel-header">
-        <!--  <div class="input-group">
+        <div class="input-group" id="searchform">
             <input class="form-input" type="text" placeholder="Keywords...">
             <button class="btn btn-primary input-group-btn">Search</button>
-          </div>-->
+        </div>
         </div>
         <div class="panel-body columns"><!-- apps go here --></div>
       </div>

index.js

@@ -109,9 +109,23 @@ function showTab(tabname) {
 }
 
 // =========================================== Library
+
+var activeFilter = '';
+var currentSearch = '';
+
 function refreshLibrary() {
   var panelbody = document.querySelector("#librarycontainer .panel-body");
-  panelbody.innerHTML = appJSON.map((app,idx) => {
+  var visibleApps = appJSON;
+
+  if (activeFilter) {
+    visibleApps = visibleApps.filter(app => app.tags && app.tags.split(',').includes(activeFilter));
+  }
+
+  if (currentSearch) {
+    visibleApps = visibleApps.filter(app => app.name.toLowerCase().includes(currentSearch) || app.tags.includes(currentSearch));
+  }
+
+  panelbody.innerHTML = visibleApps.map((app,idx) => {
     var icon = "icon-upload";
     if (app.custom)
       icon = "icon-menu";
@@ -281,6 +295,24 @@ connectMyDeviceBtn.addEventListener("click", () => {
 });
 Comms.watchConnectionChange(handleConnectionChange);
 
+var filtersContainer = document.querySelector("#librarycontainer .filter-nav");
+filtersContainer.addEventListener('click', ({ target }) => {
+  if (!target.hasAttribute('filterid')) return;
+  if (target.classList.contains('active')) return;
+  
+  activeFilter = target.getAttribute('filterid');
+  filtersContainer.querySelector('.active').classList.remove('active');
+  target.classList.add('active');
+  refreshLibrary();
+});
+
+var librarySearchInput = document.querySelector("#searchform input");
+
+librarySearchInput.addEventListener('input', evt => {  
+  currentSearch = evt.target.value.toLowerCase();
+  refreshLibrary(); 
+});
+
 // =========================================== About
 
 document.getElementById("settime").addEventListener("click",event=>{