added last fm pulling

sarsoo/music/music.py

@@ -1,11 +1,13 @@
 from flask import Blueprint, render_template, abort
 from jinja2 import TemplateNotFound
+import requests
 
 from google.cloud import firestore
 
 fs = firestore.Client()
 
 urlprefix = 'music'
+fm_url = 'https://ws.audioscrobbler.com/2.0/'
 
 music_print = Blueprint('music', __name__, template_folder='templates')
 
@@ -14,5 +16,21 @@ music_print = Blueprint('music', __name__, template_folder='templates')
 def root():
     fmkey = fs.document('key/fm').get().to_dict()['clientid']
     
+    params = {
+            'method':'user.gettopalbums',
+            'user':'sarsoo',
+            'period':'1month',
+            'limit':'6',
+            'api_key':fmkey,
+            'format':'json'
+            }
 
-    return render_template('music/index.html')
+    req = requests.get(fm_url, params = params)
+
+    albums = req.json()['topalbums']['album']
+    
+    for album in albums:
+        for image in album['image']:
+            image['text'] = image['#text']
+
+    return render_template('music/index.html', albums = albums)

sarsoo/music/templates/music/index.html

@@ -1,3 +1,18 @@
 {% extends 'base.html' %}
 
 {% block title %}music{% endblock %}
+
+{% block content %}
+	<div class="row">
+		<h1 class = "col-pad-12" style = "text-align: center; color: white;">most played of the last month</h1>
+	</div>
+	<div class="row">
+		{% for album in albums %}
+			<div class = "col-pad-2 card">
+				<img src="{{album.image[3].text}}">
+				<p style="text-align:center">{{ album.name }} / {{ album.artist.name -}}</p>
+				<p style="text-align:center">{{- album.playcount }} plays</p>
+			</div>
+		{% endfor %}
+	</div>
+{% endblock %}

static/style.css

@@ -42,7 +42,8 @@ p {
 }
 
 .row {
-	margin:auto;
+	margin-left: auto;
+    	margin-right: auto;
 }
 
 .gallerystrip img {
@@ -116,7 +117,8 @@ div.card h1 {
 	border-radius: 3px;
 	margin-bottom: 8px;	
 	box-shadow: 2px 2px 2px black;
-}
+	margin-left: auto;
+    	margin-right: auto;}
 
 .card p {
 	margin-top: 20px;
@@ -202,6 +204,7 @@ footer a {
   .col-12 {width: 100%;}
 
   /* For desktop: */
+  .col-pad-2 {width: calc(16.66% - 10px);}
   .col-pad-3 {width: calc(25% - 10px);}
   .col-pad-4 {width: calc(33.33% - 10px);}
   .col-pad-5 {width: 41.66%;}