From 039c33c16f78acb3e83f29f837038bbf35c0cdce Mon Sep 17 00:00:00 2001
From: Subhamoy Biswas <subhamoybiswas636@gmail.com>
Date: Sat, 11 Nov 2023 20:49:36 +0530
Subject: [PATCH] (feat): implemented basic search result fetching ajax logic

---
 htdocs/assets/_floatingbar.php         |  4 +--
 htdocs/assets/js/floatingbar-config.js | 43 +++++++++++++++++++++++++
 htdocs/assets/style.css                | 44 +++++++++-----------------
 htdocs/core/handle_search.php          | 11 +++++++
 4 files changed, 71 insertions(+), 31 deletions(-)
 create mode 100644 htdocs/core/handle_search.php

diff --git a/htdocs/assets/_floatingbar.php b/htdocs/assets/_floatingbar.php
index 9a5d19f..0ae6f7f 100644
--- a/htdocs/assets/_floatingbar.php
+++ b/htdocs/assets/_floatingbar.php
@@ -1,6 +1,6 @@
 <div id="floatingwindowwrapper" class="floatingwindowwrapper fixed top-0 left-0 w-screen h-screen z-30 bg-[rgba(0,_0,_0,_0.4)] hidden"></div>
 <div id="searchwindow" class="searchwindow w-[90vw] md:w-[44vw] mx-auto h-[60vh] fixed inset-x-0 top-[30vh] z-40 flex-col items-center bg-bg_secondary rounded-xl overflow-y-scroll no-scrollbar hidden">
-    <div class="defresults w-full flex flex-col justify-start px-2 mt-1">
+    <div id="defresults" class="defresults w-full flex flex-col justify-start px-2 mt-1">
         <p class="text-xs text-accent_three mt-3 mb-2 mx-1">PAGE SHOTCUTS</p>
         <div class="group resultitem w-full flex justify-between items-center my-1 p-1 cursor-pointer hover:bg-bg_third transition transform duration-200 rounded-lg" onclick="location.href='<?php echo $basePath ?>'">
             <span class="flex items-center">
@@ -68,7 +68,7 @@
             </span>
         </div>
     </div>
-    <div class="searchresults w-full flex flex-col justify-start px-2 mt-1">
+    <div id="searchresults" class="searchresults w-full flex-col justify-start px-2 mt-1 hidden">
         <p class="text-xs text-accent_three mt-3 mb-2 mx-1">SEARCH RESULTS</p>
         <div class="group resultitem w-full flex justify-between items-center my-1 p-1 cursor-pointer hover:bg-bg_third transition transform duration-200 rounded-lg" onclick="location.href='<?php echo $basePath ?>'">
             <span class="flex items-center">
diff --git a/htdocs/assets/js/floatingbar-config.js b/htdocs/assets/js/floatingbar-config.js
index 3e287af..a3d916a 100644
--- a/htdocs/assets/js/floatingbar-config.js
+++ b/htdocs/assets/js/floatingbar-config.js
@@ -7,6 +7,8 @@ const searchTxt = document.getElementById("searchtext");
 const searchInput = document.getElementById("searchinput");
 const windowWrapper = document.getElementById("floatingwindowwrapper");
 const searchWin = document.getElementById("searchwindow");
+const searchDef = document.getElementById("defresults");
+const searchRes = document.getElementById("searchresults");
 let lastScrollTop = 0;
 
 window.addEventListener("scroll", function () {
@@ -84,3 +86,44 @@ document.addEventListener("keydown", function(event) {
     }
 });
 
+//---controls search window results
+function perform_search(searchInput, searchDef, searchRes) {
+    searchDef.classList.remove("flex");
+    searchDef.classList.add("hidden");
+    searchRes.classList.remove("hidden");
+    searchRes.classList.add("flex");
+    let searchString = searchInput.value;
+
+    $.ajax({
+        url: 'core/handle_search.php',
+        type: 'POST',
+        dataType: 'json',
+        data: { keyword: searchString },
+        success: function(response) {
+            console.log("success");
+            console.log(response);
+        },
+        error: function(error) {
+            console.error('error:', error);
+        },
+        complete: function() {
+            console.log("completed");
+        }
+    });
+}
+
+function fallback_search(searchDef, searchRes) {
+    searchDef.classList.remove("hidden");
+    searchDef.classList.add("flex");
+    searchRes.classList.remove("flex");
+    searchRes.classList.add("hidden");
+}
+
+searchInput.addEventListener('input', function() {
+    if (searchInput.value != "") {
+        perform_search(searchInput, searchDef, searchRes);
+    }
+    else {
+        fallback_search(searchDef, searchRes);
+    }
+});
\ No newline at end of file
diff --git a/htdocs/assets/style.css b/htdocs/assets/style.css
index d29acf7..53df7cb 100644
--- a/htdocs/assets/style.css
+++ b/htdocs/assets/style.css
@@ -1160,10 +1160,6 @@ video {
   background-color: rgb(30 41 59 / var(--tw-bg-opacity));
 }
 
-.bg-\[rgba\(54\2c _255\2c _135\2c _0\.55\)\] {
-  background-color: rgba(54, 255, 135, 0.55);
-}
-
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
@@ -1235,11 +1231,21 @@ video {
   padding-right: 0.40rem;
 }
 
+.px-\[0\.65rem\] {
+  padding-left: 0.65rem;
+  padding-right: 0.65rem;
+}
+
 .px-\[0\.80rem\] {
   padding-left: 0.80rem;
   padding-right: 0.80rem;
 }
 
+.px-\[1rem\] {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -1255,6 +1261,11 @@ video {
   padding-bottom: 1.25rem;
 }
 
+.py-\[0\.05rem\] {
+  padding-top: 0.05rem;
+  padding-bottom: 0.05rem;
+}
+
 .py-\[0\.10rem\] {
   padding-top: 0.10rem;
   padding-bottom: 0.10rem;
@@ -1270,31 +1281,6 @@ video {
   padding-bottom: 0.30rem;
 }
 
-.px-\[1rem\] {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-.py-\[0\.05rem\] {
-  padding-top: 0.05rem;
-  padding-bottom: 0.05rem;
-}
-
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
-.px-\[0\.70rem\] {
-  padding-left: 0.70rem;
-  padding-right: 0.70rem;
-}
-
-.px-\[0\.65rem\] {
-  padding-left: 0.65rem;
-  padding-right: 0.65rem;
-}
-
 .text-center {
   text-align: center;
 }
diff --git a/htdocs/core/handle_search.php b/htdocs/core/handle_search.php
new file mode 100644
index 0000000..cadc339
--- /dev/null
+++ b/htdocs/core/handle_search.php
@@ -0,0 +1,11 @@
+<?php
+require 'connection.php';
+require 'query_functions.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    if (isset($_POST['keyword'])) {
+        $keyword = $_POST['keyword'];
+        echo json_encode(array("keyword-recived" => $keyword));
+    }
+}
+?>
\ No newline at end of file