add search feature

TEAMSTACKOVERFLOW/spitfire/templates/baseTemplate.html

@@ -38,8 +38,8 @@
 
         <div class="col-md-4">
 
-          <form class="form-inline my-2 my-lg-0">
-            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
+          <form action="/spitfire/search" method="get" class="form-inline my-2 my-lg-0">
+            <input class="form-control mr-sm-2" name="search_field" type="text" placeholder="Search" aria-label="Search">
             <button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
           </form>
 

TEAMSTACKOVERFLOW/spitfire/templates/search_result.html

@@ -0,0 +1,64 @@
+{% extends "baseTemplate.html" %}
+
+
+
+{% block includeCSS %}
+  {% load static %}
+  <link rel="stylesheet" href= "{% static 'css/index.css' %}">
+{% endblock %}
+
+
+{% block bodyContent %}
+    <div class="container">
+      <div class='row'>
+        <h2 class="section-title">Search Result</h2>
+      </div>
+
+      <div class='row'>
+        <div class="col-md-12">
+          {% for track in tracks %}
+  				<div class="card-group soundtrack-box" track-id={{track.id}}>
+          <div class="card col-md-4">
+            <div class="card-body">
+              <div class = 'float-left'>
+                <h4>{{ track.title }}</h4>
+                <h5>{{ track.artist.full_name }}</h5>
+              </div>
+              <button type="button-track" track-id={{track.id}} class="btn btn-outline-secondary float-right upvote-btn">▲ {{ track.upvotes }}</button>
+              <img src="https://upload.wikimedia.org/wikipedia/en/d/dc/Damn._Kendrick_Lamar.jpg" class="soundtrack-image">
+              <audio controls="controls">
+                Your browser does not support the audio element.
+                <source src="/static/track_default.mp3" type="audio/mpeg">
+              </audio>
+              </div>
+            </div>
+            <div class="card col-md-8">
+              <div class="card-body">
+                <h4 class="card-title">Top Lyrics</h4>
+                {% for lyric in track.top_lyrics%}
+                  <h5 class='card-text float-left' artist-id={{artist.id}}> {{ lyric.artist }}</h5>
+                  <p class="card-text float-left" lyric-id={{lyric.id}}> {{ lyric.text }}</p>
+                  <button type="button-lyric" lyric-id={{lyric.id}} class="btn btn-outline-secondary float-right upvote-btn">▲ {{ lyric.upvotes }}</button>
+                {% endfor %}
+              </div>
+            </div>
+          </div>
+          {% empty %}
+          <div class="col-md-12">
+            <div class="card-body">
+              <h4 class="card-title">No tracks found. Search another query.</h4>
+            </div>
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+
+{% endblock %}
+
+    <!-- Optional JavaScript -->
+    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

TEAMSTACKOVERFLOW/spitfire/urls.py

@@ -20,4 +20,5 @@
     url(r'^profile/upload$', views.upload, name='upload'),
     url(r'^profile/(?P<pk>[-\w]+)$', views.getArtistInfo, name='artistInfo'),
 	url(r'^soundtrack/(?P<pk>[-\w]+)/comment$', views.create_comment, name='create_comment'),
+	url(r'^search/$', views.search, name='search'),
 ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

TEAMSTACKOVERFLOW/spitfire/views.py

@@ -70,7 +70,16 @@ def create_comment (request, pk):
 	)
 
 
-
+def search(request):
+	search_field = request.GET.get('search_field', None)
+	search_results = Track.objects.filter(title__contains=search_field) | Track.objects.filter(description__contains=search_field) | Track.objects.filter(keywords__contains=search_field)
+
+	return render(
+			request,
+			"search_result.html",
+			context = {'tracks': search_results,},
+	)
+
 @login_required
 def upvoteTrack(request, pk):
 	track = get_object_or_404(Track, pk = pk)