Add the beginnings of charts

This commit adds a lot of files, but most of them have no impact on any
other code. The thrust here is to start creating chart pages showing
which tracks and artists were most played for various time periods. Lots
still not working, but we're getting there.

vrobbler/templates/base_detail.html

@@ -0,0 +1,18 @@
+{% extends "base.html" %}
+
+{% block content %}
+<main class="col-md-4 ms-sm-auto col-lg-10 px-md-4">
+    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+        <h1 class="h2">{% block title %}{% endblock %} </h1>
+        <div class="btn-toolbar mb-2 mb-md-0">
+            <div class="btn-group me-2">
+                <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        {% block details %}{% endblock %}
+    </div>
+</main>
+{% endblock %}

vrobbler/templates/base_list.html

@@ -0,0 +1,18 @@
+{% extends "base.html" %}
+
+{% block content %}
+<main class="col-md-4 ms-sm-auto col-lg-10 px-md-4">
+    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+        <h1 class="h2">{% block title %}{% endblock %} </h1>
+        <div class="btn-toolbar mb-2 mb-md-0">
+            <div class="btn-group me-2">
+                <button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
+            </div>
+        </div>
+    </div>
+
+    <div class="container">
+        {% block lists %}{% endblock %}
+    </div>
+</main>
+{% endblock %}

vrobbler/templates/music/album_list.html

@@ -0,0 +1,11 @@
+{% extends "base_list.html" %}
+
+{% block title %}Albums{% endblock %}
+
+{% block lists %}
+{% for album in object_list %}
+<dl style="width: 130px; float: left; margin-right:10px;">
+    <dd><img src="{{album.cover_image.url}}" width=120 height=120 /></dd>
+</dl>
+{% endfor %}
+{% endblock %}

vrobbler/templates/music/artist_detail.html

@@ -0,0 +1,72 @@
+{% extends "base_detail.html" %}
+{% load mathfilters %}
+
+{% block title %}{{object.name}}{% endblock %}
+
+{% block details %}
+
+<div class="row">
+    {% for album in artist.album_set.all %}
+    {% if album.cover_image %}
+    <p style="width:150px; float:left;"><img src="{{album.cover_image.url}}" width=150 height=150 /></p>
+    {% endif %}
+    {% endfor %}
+</div>
+<div class="row">
+    <p>{{artist.scrobbles.count}} scrobbles</p>
+    <div class="col-md">
+        <h3>Top tracks</h3>
+        <div class="table-responsive">
+            <table class="table table-striped table-sm">
+            <thead>
+                <tr>
+                    <th scope="col">Rank</th>
+                    <th scope="col">Track</th>
+                    <th scope="col">Count</th>
+                    <th scope="col"></th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for track in object.tracks %}
+                <tr>
+                    <td>{{rank}}#1</td>
+                    <td>{{track.title}}</td>
+                    <td>{{track.scrobble_count}}</td>
+                    <td>
+                        <div class="progress-bar" style="margin-right:5px;">
+                            <span class="progress-bar-fill" style="width: {{track.scrobble_count|mul:10}}%;"></span>
+                        </div>
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+<div class="row">
+    <div class="col-md">
+        <h3>Last scrobbles</h3>
+        <div class="table-responsive">
+            <table class="table table-striped table-sm">
+            <thead>
+                <tr>
+                    <th scope="col">Date</th>
+                    <th scope="col">Track</th>
+                    <th scope="col">Album</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for scrobble in object.scrobbles %}
+                <tr>
+                    <td>{{scrobble.timestamp}}</td>
+                    <td>{{scrobble.track.title}}</td>
+                    <td>{{scrobble.track.album.name}}</td>
+                </tr>
+                {% endfor %}
+            </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+{% endblock %}

vrobbler/templates/music/artist_list.html

@@ -0,0 +1,30 @@
+{% extends "base_list.html" %}
+
+{% block title %}Artists{% endblock %}
+
+{% block lists %}
+<div class="row">
+    <div class="col-md">
+        <div class="table-responsive">
+            <table class="table table-striped table-sm">
+            <thead>
+                <tr>
+                    <th scope="col">Artist</th>
+                    <th scope="col">Scrobbles</th>
+                    <th scope="col">All time</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for artist in object_list %}
+                <tr>
+                    <td><a href="{{artist.get_absolute_url}}">{{artist}}</a></td>
+                    <td>{{artist.scrobbles.count}}</td>
+                    <td></td>
+                </tr>
+                {% endfor %}
+            </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+{% endblock %}

vrobbler/templates/music/track_detail.html

@@ -0,0 +1,13 @@
+{% extends "base_detail.html" %}
+
+{% block title %}{{object.title}}{% endblock %}
+
+{% block details %}
+<h2>Last scrobbles</h2>
+{% for scrobble in object.scrobble_set.all  %}
+<ul>
+    <li>{{scrobble.timestamp|date:"d M Y h:m"}} - <img src="{{object.album.cover_image.url}}" width=25 height=25 /> - {{object}}</li>
+</ul>
+{% endfor %}
+
+{% endblock %}

vrobbler/templates/music/track_list.html

@@ -0,0 +1,12 @@
+{% extends "base_list.html" %}
+
+{% block title %}Tracks{% endblock %}
+
+{% block lists %}
+<h2>All time</h2>
+{% for track in object_list %}
+<ul>
+    <li><a href="{{track.get_absolute_url}}">{{track}}</a></li>
+</ul>
+{% endfor %}
+{% endblock %}