feat: ✨ Results show now multiple results

main.py

@@ -13,7 +13,7 @@ def form_example():
     if request.method == 'POST':
         search = request.form.get('search')
         result = searchSpotify(search)
-        return render_template("found.html", query=search, trackName=result[0], trackArtist=result[1], trackAlbum=result[2], trackPreview=result[3], trackImage=result[4], trackID=result[5],)
+        return render_template("found.html", query=search, tracks=result)
 
     # otherwise handle the GET request
     return render_template("index.html")

spotifySearch.py

@@ -5,13 +5,17 @@ from dotenv import load_dotenv
 
 load_dotenv()
 
-def searchSpotify(spotifySearch, limit=1):
+def searchSpotify(spotifySearch, limit=10):
     sp = spotipy.Spotify(auth_manager=SpotifyClientCredentials(client_id=os.getenv("client_id"), client_secret=os.getenv("client_secret")))
     results = sp.search(q=spotifySearch, limit=limit)
-    trackName = results['tracks']['items'][0]['name']
-    trackArtist = results['tracks']['items'][0]['artists'][0]['name']
-    trackAlbum = results['tracks']['items'][0]['album']['name']
-    trackPreview = results['tracks']['items'][0]['preview_url']
-    trackImage = results['tracks']['items'][0]['album']['images'][0]['url']
-    trackID = results['tracks']['items'][0]['uri']
-    return (trackName, trackArtist, trackAlbum, trackPreview, trackImage, trackID)
+
+    tracks = []
+    for i in range(limit):
+        trackName = results['tracks']['items'][i]['name']
+        trackArtist = results['tracks']['items'][i]['artists'][0]['name']
+        trackAlbum = results['tracks']['items'][i]['album']['name']
+        trackPreview = results['tracks']['items'][i]['preview_url']
+        trackImage = results['tracks']['items'][i]['album']['images'][0]['url']
+        trackID = results['tracks']['items'][i]['uri']
+        tracks.append([trackName, trackArtist, trackAlbum, trackPreview, trackImage, trackID])
+    return tracks

templates/found.html

@@ -12,7 +12,9 @@
             <div class="form-group">
             <div class="form-inline text-center">
                 <label>Enter here the music that you want:</label>
-                 <input type="text" name="search" class="form-control" />
+                <label>
+                    <input type="text" name="search" class="form-control" />
+                </label>
             </div>
             </div>
 
@@ -23,15 +25,23 @@
         <div class="alert alert-primary" role="alert">
           Here's the music I found. If it doesn't match, try the query again in more detail.
         </div>
-        <div class="card" style="width: 21rem;">
-          <img class="card-img-top" src="{{trackImage}}" alt="Card image cap">
-          <div class="card-body">
-            <h5 class="card-title">{{trackName}}</h5>
-            <p class="card-text">{{trackArtist}} - {{trackAlbum}}</p>
-              <audio controls><source src="{{trackPreview}}"></audio>
-            <a href="https://n8n.louisgallet.fr/webhook/61f08b8c-5bca-4091-a934-da66d9ae09e7/61f08b8c-5bca-4091-a934-da66d9ae09e7/{{trackID}}" class="btn btn-primary">Add to the playlist</a>
-          </div>
-        </div>
+        <div class="container text-center">
+            <div class="row">
+                {% for track in tracks %}
+                <div class="col">
+                    <div class="card" style="width: 21rem;">
+                      <img class="card-img-top" src="{{ track[4] }}" alt="Card image cap">
+                      <div class="card-body">
+                        <h5 class="card-title"> {{ track[0] }} </h5>
+                        <p class="card-text">{{ track[1] }} - {{ track[2] }}</p>
+                          <audio controls><source src="{{ track[3] }}"></audio>
+                        <a href="https://n8n.louisgallet.fr/webhook/61f08b8c-5bca-4091-a934-da66d9ae09e7/61f08b8c-5bca-4091-a934-da66d9ae09e7/{{ track[5] }}" class="btn btn-primary">Add to the playlist</a>
+                      </div>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+
     </div>
 </body>
 </html>

templates/index.html

@@ -11,7 +11,9 @@
             <div class="form-group">
             <div class="form-inline text-center">
                 <label>Enter here the music that you want:</label>
-                 <input type="text" name="search" class="form-control" />
+                <label>
+                    <input type="text" name="search" class="form-control" />
+                </label>
             </div>
             </div>
 

templates/test.html

@@ -1,20 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        {% block head %}
-        <!-- Required meta tags -->
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-
-        {% block styles %}
-            <!-- Bootstrap CSS -->
-            {{ bootstrap.load_css() }}
-        {% endblock %}
-
-        <title>Your page title</title>
-        {% endblock %}
-    </head>
-    <body>
-        <button type="button" class="btn btn-primary">Primary</button>
-    </body>
-</html>