add searching

index.html

@@ -123,7 +123,8 @@
         ></div>
         <div class="divider divider-horizontal"></div>
         <div
-          class="card rounded-box grid h-20 flex-grow place-items-center w-3/5 overflow-y-auto outer-card"
+          id="outer-search-stats-div"
+          class="card rounded-box grid h-20 flex-grow place-items-center w-3/5 outer-card"
         >
           <div
             id="search-stats-div"
@@ -157,10 +158,8 @@
             <div class="divider"></div>
             <div
               id="stats-div"
-              class="card rounded-box grid h-20 place-items-center"
-            >
-              content
-            </div>
+              class="card rounded-box grid h-20 place-items-center overflow-y-auto"
+            ></div>
           </div>
         </div>
       </div>

script.js

@@ -1,15 +1,20 @@
 import { parseFile } from "./file-parse.js";
+import { search } from "./search.js";
 
 // show dialog
 dialog();
 
+// global access to rooms
+let globalRooms = [];
+
 // run everything when file uploaded
 document
   .getElementById("file-input")
   .addEventListener("change", function (event) {
     parseFile(event)
       .then((rooms) => {
         console.log(rooms);
+        globalRooms = rooms;
         fadeBanner();
         removeSpacing();
         tablulate(rooms);
@@ -21,11 +26,20 @@ document
       });
   });
 
-// handle
-/*document.getElementById("").addEventListener("input", (event) => {
+// handle filter search queries
+document.getElementById("search-query").addEventListener("input", (event) => {
+  console.log(event.target.value);
+  // clear output
+  clearTableOutput();
+  clearStatsOutput();
+
   // show all rooms when empty query
   if (event.target.value === "") {
-    tablulate(rooms);
+    tablulate(globalRooms);
+    stats(globalRooms);
   } else {
+    const results = search(globalRooms, event.target.value);
+    tablulate(results);
+    stats(results);
   }
-});*/
+});

search.js

@@ -2,13 +2,13 @@ import Fuse from "https://cdn.jsdelivr.net/npm/fuse.js@7.0.0/dist/fuse.mjs";
 
 const options = {
   includeScore: true,
-  shouldSort: true,
-  keys: ["last_name", "first_name"],
+  threshold: 0.2,
+  keys: ["college", "building", "room", "type", "sqft"],
 };
 
-function search(rooms, query) {
+export function search(rooms, query) {
   const fuse = new Fuse(rooms, options);
-
-  console.log(fuse.search(searchPattern));
-  return fuse.search(searchPattern);
+  const results = fuse.search(query);
+  console.log(results);
+  return results.map((item) => item.item);
 }

style.css

@@ -1569,13 +1569,6 @@ html {
   color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
 }
 
-.label-text-alt {
-  font-size: 0.75rem;
-  line-height: 1rem;
-  --tw-text-opacity: 1;
-  color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
-}
-
 .input input {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
@@ -2194,10 +2187,19 @@ dialog {
   height: 80vh;
 }
 
+#outer-search-stats-div {
+  display: flex;
+}
+
 #search-stats-div {
   height: 100%;
 }
 
+#stats-div {
+  height: 100%;
+  flex: 1;
+}
+
 .chart-container {
   width: 35vw;
 }

tailwind-input.css

@@ -28,10 +28,19 @@ dialog {
   height: 80vh;
 }
 
+ #outer-search-stats-div {
+   display: flex;
+ }
+
 #search-stats-div {
   height: 100%;
 }
 
+#stats-div {
+  height: 100%;
+  flex: 1;
+}
+
 .chart-container {
   width: 35vw;
 }