Implemented search page and fixed off-by-one in status

api/urls.py

@@ -2,6 +2,6 @@ from django.urls import path, include
 from . import views
 
 urlpatterns = [
-    path('search/', views.searchAPI),
     path('', include('sage_stream.api.urls')),
+    path('search/', views.searchAPI),
 ]

core/templates/base.html

@@ -9,7 +9,7 @@
           href="{% static 'plugins/fontawesome-free/css/all.min.css' %}">
     <link rel="stylesheet"
           href="{% static 'plugins/icheck-bootstrap/icheck-bootstrap.min.css' %}">
-    <link rel="stylesheet" href="{% static 'dist/css/adminlte.css' %}">
+    <link rel="stylesheet" href="{% static 'css/adminlte.css' %}">
     <link rel="stylesheet"
           href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
     <style>
@@ -24,7 +24,7 @@
       <nav class="main-header navbar navbar-expand-md navbar-light navbar-white">
         <div class="container">
           <a href="/" class="navbar-brand">
-            <img src="{% static 'dist/img/ragnarok.jpg' %}"
+            <img src="{% static 'img/ragnarok.jpg' %}"
                  alt="Ragnarok"
                  class="brand-image img-circle elevation-3"
                  style="opacity: .8">
@@ -56,14 +56,15 @@
             </ul>
             <div class="float-right" style="width:100%">
 
-              <form class="form-inline ml-0 ml-md-3 float-right">
+              <form class="form-inline ml-0 ml-md-3 float-right" action="/search">
                 <div class="input-group input-group-sm">
                   <input class="form-control form-control-navbar" data-toggle="dropdown"
                          type="search"
                          placeholder="Search"
                          aria-label="Search"
                          autocomplete="off"
-                         id="search">
+                         id="search"
+                         name="q">
                   <ul class="dropdown-menu" id="searchdropdown">
                     <li><span class="dropdown-item-text">Nothing</span></li>
                   </ul>
@@ -107,7 +108,7 @@
                                       max-height: 720px">
                         {% else %}
                           <img class="card-img"
-                               src="{% static 'dist/img/default.png' %}"
+                               src="{% static 'img/default.png' %}"
                                alt="Dist Photo 1">
                         {% endif %}
                         <div class="card-img-overlay d-flex flex-column justify-content-end"
@@ -133,7 +134,7 @@
       </div>
       <script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>
       <script src="{% static 'plugins/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
-      <script src="{% static 'dist/js/adminlte.min.js' %}"></script>
+      <script src="{% static 'js/adminlte.min.js' %}"></script>
-      <script src="{% static 'dist/js/searchsuggestions.js' %}"></script>
+      <script src="{% static 'js/searchsuggestions.js' %}"></script>
     </body>
   </html>

core/urls.py

@@ -3,8 +3,9 @@ from . import views
 
 urlpatterns = [
         path('', views.core, name='core'),
-        path('status/', views.status, name='status'),
         path('about/', views.about, name='about'),
         path('random/', views.random, name='random'),
+        path('search/', views.search, name='search'),
+        path('status/', views.status, name='status'),
         path('view/<int:id>', views.view, name='view'),
 ]

core/views.py

@@ -1,3 +1,4 @@
+from django.db.models import Q
 from django.shortcuts import render
 from django.shortcuts import redirect
 from core.models import Video
@@ -8,16 +9,24 @@ def core(request):
     videos = Video.objects.all()
     return render(request, 'base.html', {'videos': videos[::-1]})
 
+def about(request):
+    return render(request, 'about.html')
+
 def random(request):
     videos = Video.objects.all().order_by("?")
     ran = videos.first()
     return redirect('/view/'+str(ran.id))
 
+def search(request):
+    q = request.GET.get('q', '')
+    videos = Video.objects.filter(Q(id__contains=q) | Q(name__contains=q))
+    return render(request, 'base.html', {'videos': videos})
+
 def status(request):
     highest_id = Video.objects.order_by('-id').first().id
     video_list = []
 
-    for i in range(highest_id + 1):
+    for i in range(1, highest_id + 1):
         try:
             video = Video.objects.get(id=i)
             video_list.append(video)
@@ -30,6 +39,3 @@ def view(request, id):
     vid = Video.objects.get(id = id)
     if vid:
         return render(request, "view.html", {'video': vid})
-
-def about(request):
-    return render(request, 'about.html')

static/dist/js/searchsuggestions.js

@@ -1,38 +0,0 @@
-const searchinput = document.querySelector("#search");
-const searchsuggestions = document.querySelector("#searchdropdown");
-const li = (c) => document.createElement("li").appendChild(c);
-searchinput.addEventListener("input", (e) => {
-    q(e.target.value).then((d) => {
-        if (d.length < 1) searchsuggestions.replaceChildren(nothing());
-        else searchsuggestions.replaceChildren(...suggestions(d));
-    })
-});
-async function q(s) {
-    if (s.length > 0) {
-        try {
-            const response = await fetch("/api/search/?q=" + s);
-            const result = await response.json();
-            return result;
-        } catch(error) {
-            console.log("Error: " + error);
-        }
-    }
-    return [];
-}
-function nothing() {
-    const span = document.createElement("span");
-    span.setAttribute("class", "dropdown-item-text");
-    span.insertAdjacentText("afterbegin", "Nothing");
-    return li(span);
-}
-function suggestions(d) {
-    const items = [];
-    for (const vid of d) {
-        const a = document.createElement("a");
-        a.setAttribute("class", "dropdown-item")
-        a.setAttribute("href", "/view/" + vid.id);
-        a.insertAdjacentText("afterbegin", vid.name + " " + vid.id);
-        items.push(li(a));
-    }
-    return items;
-}

static/js/searchsuggestions.js

@@ -0,0 +1,41 @@
+function searchsuggestions() {
+    const searchinput = document.querySelector("#search");
+    const searchsuggestions = document.querySelector("#searchdropdown");
+    const li = (c) => document.createElement("li").appendChild(c);
+    searchinput.addEventListener("input", (e) => {
+        q(e.target.value).then((d) => {
+            if (d.length < 1) searchsuggestions.replaceChildren(nothing());
+            else searchsuggestions.replaceChildren(...suggestions(d));
+        })
+    });
+    async function q(s) {
+        if (s.length > 0) {
+            try {
+                const response = await fetch("/api/search/?q=" + s);
+                const result = await response.json();
+                return result;
+            } catch(error) {
+                console.log("Error: " + error);
+            }
+        }
+        return [];
+    }
+    function nothing() {
+        const span = document.createElement("span");
+        span.setAttribute("class", "dropdown-item-text");
+        span.insertAdjacentText("afterbegin", "Nothing");
+        return li(span);
+    }
+    function suggestions(d) {
+        const items = [];
+        for (const vid of d) {
+            const a = document.createElement("a");
+            a.setAttribute("class", "dropdown-item")
+            a.setAttribute("href", "/view/" + vid.id);
+            a.insertAdjacentText("afterbegin", vid.name + " " + vid.id);
+            items.push(li(a));
+        }
+        return items;
+    }
+}
+searchsuggestions();