preferences, colors, searches

7 files changed, 163 insertions, 92 deletions

diff --git a/homepage/urls.py b/homepage/urls.py
index 74703ff..f6000ff 100644
--- a/homepage/urls.py
+++ b/homepage/urls.py
@@ -5,4 +5,5 @@ from . import views
 app_name = "home"
 urlpatterns = [
     path("", views.index, name="index"),
+    path("q_search/", views.search_json, name="q_search"),
 ]
diff --git a/homepage/views.py b/homepage/views.py
index 8a0812d..4157086 100644
--- a/homepage/views.py
+++ b/homepage/views.py
@@ -1,4 +1,7 @@
+import os
+from django.http import JsonResponse
 from django.shortcuts import render
+import requests
 from homepage.utils import (
     get_trending_anime,
     get_popular_anime,
@@ -27,3 +30,12 @@ def index(request):
     }
 
     return render(request, "home/index.html", context)
+
+def search_json(request):
+    query = request.GET.get("q")
+
+    base_url = f"{os.getenv("CONSUMET_URL")}/meta/anilist/advanced-search?query={query}&page=1&perPage=5&type=ANIME"
+    response = requests.get(base_url)
+    search_results = response.json()
+
+    return JsonResponse(search_results)
diff --git a/static/css/main.css b/static/css/main.css
index df3ef7f..c50c0fc 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1830,6 +1830,11 @@ video {
   outline-offset: 2px;
 }
 
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
diff --git a/templates/partials/colors.html b/templates/partials/colors.html
new file mode 100644
index 0000000..20330b2
--- /dev/null
+++ b/templates/partials/colors.html
@@ -0,0 +1,45 @@
+{% comment %} Load all Important Profile Preferences Colors {% endcomment %}
+<div class="accent_color_compilations">
+    <!-- 400 Colors -->
+    <div class="bg-purple-400 hover:bg-purple-400 text-purple-400"></div>
+    <div class="bg-blue-400 hover:bg-blue-400 text-blue-400"></div>
+    <div class="bg-green-400 hover:bg-green-400 text-green-400"></div>
+    <div class="bg-yellow-400 hover:bg-yellow-400 text-yellow-400"></div>
+    <div class="bg-red-400 hover:bg-red-400 text-red-400"></div>
+    <div class="bg-pink-400 hover:bg-pink-400 text-pink-400"></div>
+    <div class="bg-indigo-400 hover:bg-indigo-400 text-indigo-400"></div>
+    <div class="bg-cyan-400 hover:bg-cyan-400 text-cyan-400"></div>
+    <div class="bg-orange-400 hover:bg-orange-400 text-orange-400"></div>
+    <div class="bg-teal-400 hover:bg-teal-400 text-teal-400"></div>
+    <div class="bg-lime-400 hover:bg-lime-400 text-lime-400"></div>
+    <div class="bg-amber-400 hover:bg-amber-400 text-amber-400"></div>
+    
+    <!-- 600 Colors + Checkboxes-->
+    <div class="bg-purple-600 hover:bg-purple-600 text-purple-600 peer-checked:bg-purple-600"></div>
+    <div class="bg-blue-600 hover:bg-blue-600 text-blue-600 peer-checked:bg-blue-600"></div>
+    <div class="bg-green-600 hover:bg-green-600 text-green-600 peer-checked:bg-green-600"></div>
+    <div class="bg-yellow-600 hover:bg-yellow-600 text-yellow-600 peer-checked:bg-yellow-600"></div>
+    <div class="bg-red-600 hover:bg-red-600 text-red-600 peer-checked:bg-red-600"></div>
+    <div class="bg-pink-600 hover:bg-pink-600 text-pink-600 peer-checked:bg-pink-600"></div>
+    <div class="bg-indigo-600 hover:bg-indigo-600 text-indigo-600 peer-checked:bg-indigo-600"></div>
+    <div class="bg-cyan-600 hover:bg-cyan-600 text-cyan-600 peer-checked:bg-cyan-600"></div>
+    <div class="bg-orange-600 hover:bg-orange-600 text-orange-600 peer-checked:bg-orange-600"></div>
+    <div class="bg-teal-600 hover:bg-teal-600 text-teal-600 peer-checked:bg-teal-600"></div>
+    <div class="bg-lime-600 hover:bg-lime-600 text-lime-600 peer-checked:bg-lime-600"></div>
+    <div class="bg-amber-600 hover:bg-amber-600 text-amber-600 peer-checked:bg-amber-600"></div>
+
+    <!-- 700 Colors -->
+    <div class="bg-purple-700 hover:bg-purple-700 text-purple-700"></div>
+    <div class="bg-blue-700 hover:bg-blue-700 text-blue-700"></div>
+    <div class="bg-green-700 hover:bg-green-700 text-green-700"></div>
+    <div class="bg-yellow-700 hover:bg-yellow-700 text-yellow-700"></div>
+    <div class="bg-red-700 hover:bg-red-700 text-red-700"></div>
+    <div class="bg-pink-700 hover:bg-pink-700 text-pink-700"></div>
+    <div class="bg-indigo-700 hover:bg-indigo-700 text-indigo-700"></div>
+    <div class="bg-cyan-700 hover:bg-cyan-700 text-cyan-700"></div>
+    <div class="bg-orange-700 hover:bg-orange-700 text-orange-700"></div>
+    <div class="bg-teal-700 hover:bg-teal-700 text-teal-700"></div>
+    <div class="bg-lime-700 hover:bg-lime-700 text-lime-700"></div>
+    <div class="bg-amber-700 hover:bg-amber-700 text-amber-700"></div>
+</div>
+{% comment %} File Used only for CSS Generation {% endcomment %}
\ No newline at end of file
diff --git a/templates/partials/navbar.html b/templates/partials/navbar.html
index 0b16f8e..35cb7a1 100644
--- a/templates/partials/navbar.html
+++ b/templates/partials/navbar.html
@@ -183,8 +183,9 @@
         id="mobile-search"
         placeholder="Search Anime"
         class="bg-neutral-900 text-white text-sm w-full outline-none focus:outline-none border border-neutral-800 rounded-lg pl-4 py-3 pr-12"
-        onfocus="toggleDropdown(true, 'mobile')"
-        onblur="toggleDropdown(false, 'mobile')"
+        onkeyup="handleSearchInput('mobile')"
+        onfocus="handleInputFocus('mobile')"
+        onblur="handleBlur('mobile')"
       />
     </div>
     <!-- Mobile Full-Width Dropdown -->
@@ -215,8 +216,9 @@
             type="text"
             placeholder="Search Anime"
             class="bg-neutral-900 text-white text-sm lg:w-60 xl:w-96 outline-none focus:outline-none border border-neutral-800 rounded-lg pl-4 py-3 pr-12"
-            onfocus="toggleDropdown(true, 'desktop')"
-            onblur="toggleDropdown(false, 'desktop')"
+            onkeyup="handleSearchInput('desktop')"
+            onfocus="handleInputFocus('desktop')"
+            onblur="handleBlur('desktop')"
           />
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -428,55 +430,97 @@
     </div>
   </div>
 </nav>
+{% block scripts %}
 <script>
-  // Example function to populate the dropdown with API data
-  function populateDropdown(items, platform) {
-    const dropdown = document.getElementById(platform);
-    dropdown.innerHTML = ''; // Clear existing items
+  let debounceTimeout;
 
-    items.forEach((item, index) => {
-      const link = document.createElement('a');
-      link.href = '#';
-      link.className = 'block px-4 py-2 text-white hover:bg-neutral-700';
-      link.textContent = item.name; // Assuming 'name' is the property you want to display
+  function debounce(callback, delay) {
+    return function (...args) {
+      clearTimeout(debounceTimeout);
+      debounceTimeout = setTimeout(() => {
+        callback.apply(this, args);
+      }, delay);
+    };
+  }
+
+  function handleBlur(platform) {
+    // Delay hiding to allow interaction with dropdown
+    setTimeout(() => {
+      const searchInput = document.getElementById(platform + "-search");
+      const dropdown = document.getElementById(platform + "-dropdown");
+      if (!searchInput.contains(document.activeElement) &&
+          !dropdown.contains(document.activeElement)) {
+        toggleDropdown(false, platform);
+      }
+    }, 200); // Adjust the delay as needed
+  }
+
+  function handleSearchInput(platform) {
+    const searchInput = document.getElementById(platform + "-search");
+    const query = searchInput.value;
+    if (query) {
+      debounce(async () => {
+        const results = await getAnimeSearchResult(query);
+        if (results.length) {
+          toggleDropdown(true, platform);
+          populateDropdown(results, platform);
+        } else {
+          toggleDropdown(false, platform);
+        }
+      }, 200)();
+    } else {
+      toggleDropdown(false, platform);
+    }
+  }
+
+  function handleInputFocus(platform) {
+    const searchInput = document.getElementById(platform + "-search");
+    const dropdown = document.getElementById(platform + "-dropdown");
+    if (searchInput.value) {
+      toggleDropdown(true, platform);
+    }
+  }
+
+  function populateDropdown(results, platform) {
+    const dropdownId =
+      platform === "mobile" ? "mobile-dropdown" : "desktop-dropdown";
+    const dropdown = document.getElementById(dropdownId);
+    dropdown.innerHTML = ""; // Clear existing items
+
+    results.forEach((result, index) => {
+      const link = document.createElement("a");
+      link.href = '/watch/' + result.id;
+      link.className = "block px-4 py-2 text-white hover:bg-neutral-700";
+      link.textContent = result.title.english || result.title.romaji;
 
       // Add specific rounding based on the item's position
       if (index === 0) {
-        link.classList.add('hover:rounded-t-lg');
-      } else if (index === items.length - 1) {
-        link.classList.add('hover:rounded-b-lg');
+        link.classList.add("hover:rounded-t-lg");
+      } else if (index === results.length - 1) {
+        link.classList.add("hover:rounded-b-lg");
       }
 
       dropdown.appendChild(link);
     });
   }
 
-  // Example usage
-  const sampleItems = [
-    { name: 'Anime 1' },
-    { name: 'Anime 2' },
-    { name: 'Anime 3' },
-    // Add more items here...
-  ];
+  async function getAnimeSearchResult(query) {
+    const url = "{% url 'home:q_search' %}?q=" + query;
+    try {
+      const response = await fetch(url);
+      const data = await response.json();
+      return data.results;
+    } catch (error) {
+      console.error("Error fetching search results:", error);
+      return [];
+    }
+  }
 
   function toggleDropdown(show, platform) {
-    switch (platform) {
-      case 'mobile':
-        // Populate the dropdown with sample items
-        if (show) {
-          populateDropdown(sampleItems, 'mobile-dropdown');
-        }
-        document.getElementById('mobile-dropdown').classList.toggle('hidden', !show);
-        break;
-      case 'desktop':
-        // Populate the dropdown with sample items
-        if (show) {
-          populateDropdown(sampleItems, 'desktop-dropdown');
-        }
-        document.getElementById('desktop-dropdown').classList.toggle('hidden', !show);
-        break;
-      default:
-        break;
-    }
+    console.log("Toggling dropdown:", show, platform);
+    const dropdownId =
+      platform === "mobile" ? "mobile-dropdown" : "desktop-dropdown";
+    document.getElementById(dropdownId).classList.toggle("hidden", !show);
   }
-</script>
\ No newline at end of file
+</script>
+{% endblock scripts %}
diff --git a/templates/user_profile/user_preferences.html b/templates/user_profile/user_preferences.html
index 7afaae5..d60ced1 100644
--- a/templates/user_profile/user_preferences.html
+++ b/templates/user_profile/user_preferences.html
@@ -1,49 +1,4 @@
 {% block css %}
-{% comment %} Load all Important Profile Preferences Colors {% endcomment %}
-<div class="accent_color_compilations">
-    <!-- 400 Colors -->
-    <div class="bg-purple-400 hover:bg-purple-400 text-purple-400"></div>
-    <div class="bg-blue-400 hover:bg-blue-400 text-blue-400"></div>
-    <div class="bg-green-400 hover:bg-green-400 text-green-400"></div>
-    <div class="bg-yellow-400 hover:bg-yellow-400 text-yellow-400"></div>
-    <div class="bg-red-400 hover:bg-red-400 text-red-400"></div>
-    <div class="bg-pink-400 hover:bg-pink-400 text-pink-400"></div>
-    <div class="bg-indigo-400 hover:bg-indigo-400 text-indigo-400"></div>
-    <div class="bg-cyan-400 hover:bg-cyan-400 text-cyan-400"></div>
-    <div class="bg-orange-400 hover:bg-orange-400 text-orange-400"></div>
-    <div class="bg-teal-400 hover:bg-teal-400 text-teal-400"></div>
-    <div class="bg-lime-400 hover:bg-lime-400 text-lime-400"></div>
-    <div class="bg-amber-400 hover:bg-amber-400 text-amber-400"></div>
-    
-    <!-- 600 Colors + Checkboxes-->
-    <div class="bg-purple-600 hover:bg-purple-600 text-purple-600 peer-checked:bg-purple-600"></div>
-    <div class="bg-blue-600 hover:bg-blue-600 text-blue-600 peer-checked:bg-blue-600"></div>
-    <div class="bg-green-600 hover:bg-green-600 text-green-600 peer-checked:bg-green-600"></div>
-    <div class="bg-yellow-600 hover:bg-yellow-600 text-yellow-600 peer-checked:bg-yellow-600"></div>
-    <div class="bg-red-600 hover:bg-red-600 text-red-600 peer-checked:bg-red-600"></div>
-    <div class="bg-pink-600 hover:bg-pink-600 text-pink-600 peer-checked:bg-pink-600"></div>
-    <div class="bg-indigo-600 hover:bg-indigo-600 text-indigo-600 peer-checked:bg-indigo-600"></div>
-    <div class="bg-cyan-600 hover:bg-cyan-600 text-cyan-600 peer-checked:bg-cyan-600"></div>
-    <div class="bg-orange-600 hover:bg-orange-600 text-orange-600 peer-checked:bg-orange-600"></div>
-    <div class="bg-teal-600 hover:bg-teal-600 text-teal-600 peer-checked:bg-teal-600"></div>
-    <div class="bg-lime-600 hover:bg-lime-600 text-lime-600 peer-checked:bg-lime-600"></div>
-    <div class="bg-amber-600 hover:bg-amber-600 text-amber-600 peer-checked:bg-amber-600"></div>
-
-    <!-- 700 Colors -->
-    <div class="bg-purple-700 hover:bg-purple-700 text-purple-700"></div>
-    <div class="bg-blue-700 hover:bg-blue-700 text-blue-700"></div>
-    <div class="bg-green-700 hover:bg-green-700 text-green-700"></div>
-    <div class="bg-yellow-700 hover:bg-yellow-700 text-yellow-700"></div>
-    <div class="bg-red-700 hover:bg-red-700 text-red-700"></div>
-    <div class="bg-pink-700 hover:bg-pink-700 text-pink-700"></div>
-    <div class="bg-indigo-700 hover:bg-indigo-700 text-indigo-700"></div>
-    <div class="bg-cyan-700 hover:bg-cyan-700 text-cyan-700"></div>
-    <div class="bg-orange-700 hover:bg-orange-700 text-orange-700"></div>
-    <div class="bg-teal-700 hover:bg-teal-700 text-teal-700"></div>
-    <div class="bg-lime-700 hover:bg-lime-700 text-lime-700"></div>
-    <div class="bg-amber-700 hover:bg-amber-700 text-amber-700"></div>
-</div>
-
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
 {% endblock css %}
 <h2 class="text-2xl font-bold text-center mt-8 flex gap-2 items-center">
@@ -326,6 +281,15 @@
 
 {% block scripts %}
 <script>
+    // show toastMessage if it exists in sessionStorage
+    document.addEventListener('DOMContentLoaded', () => {
+        const toastMessage = sessionStorage.getItem('toastMessage');
+        if (toastMessage) {
+            showToast(toastMessage, true);
+            sessionStorage.removeItem('toastMessage');
+        }
+    });
+
     function handleSave() {
         const button = document.getElementById('saveButton');
         const spinner = document.getElementById('spinner');
@@ -379,7 +343,8 @@
             body: JSON.stringify(body)
         }).then(response => {
             if (response.ok) {
-                showToast('Preferences saved successfully!', true);
+                sessionStorage.setItem('toastMessage', 'Preferences saved successfully!');
+                window.location.reload();
             } else {
                 showToast('An error occurred while saving preferences.', false);
             }
@@ -387,11 +352,11 @@
             showToast('An error occurred while saving preferences.', false);
         }).finally(() => {
             // Hide the spinner and enable the button
-            spinner.classList.add('hidden');
+            /*spinner.classList.add('hidden');
             buttonText.textContent = 'Save Preferences';
             button.classList.remove('bg-white', 'bg-opacity-20', 'cursor-not-allowed');
             button.classList.add('bg-{{ user.preferences.accent_colour }}-600', 'hover:bg-{{ user.preferences.accent_colour }}-700');
-            button.disabled = false;
+            button.disabled = false;*/
         });
     }
 </script>
diff --git a/watch/views.py b/watch/views.py
index f5afa99..570082c 100644
--- a/watch/views.py
+++ b/watch/views.py
@@ -1,9 +1,8 @@
 import os
+from django.http import JsonResponse
 import dotenv
 from django.shortcuts import render, redirect
 import requests
-import json
-from watch.utils import get_from_redis_cache, store_in_redis_cache
 
 dotenv.load_dotenv()