[templates] Clean up dashboard

vrobbler/apps/scrobbles/views.py

@@ -4,6 +4,7 @@ import logging
 from datetime import datetime, timedelta
 
 import pendulum
+from pendulum.parsing.exceptions import ParserError
 import pytz
 from django.apps import apps
 from django.contrib import messages
@@ -115,8 +116,11 @@ class RecentScrobbleList(ListView):
             month = today.month
             day = today.day
             if date:
-                year, month, day = date.split("-")
+                try:
-                data["date"] = pendulum.parse(date)
+                    data["date"] = pendulum.parse(date)
+                    year, month, day = date.split("-")
+                except:
+                    pass
 
             data = data | Scrobble.for_day_dict(user_id, year, month, day)
 

vrobbler/templates/scrobbles/_last_scrobbles.html

@@ -4,51 +4,9 @@
     <p>Today <b>{{counts.today}}</b> | This Week <b>{{counts.week}}</b> | This Month <b>{{counts.month}}</b> | This Year <b>{{counts.year}}</b> | All Time <b>{{counts.alltime}}</b></p>
 </div>
 <div class="row">
-    <ul class="nav nav-tabs" id="myTab" role="tablist">
-        <li class="nav-item" role="presentation">
-            <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#latest-listened"
-                type="button" role="tab" aria-controls="home" aria-selected="true">Tracks</button>
-        </li>
-        <li class="nav-item" role="presentation">
-            <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#latest-watched"
-                type="button" role="tab" aria-controls="profile" aria-selected="false">Videos</button>
-        </li>
-        <li class="nav-item" role="presentation">
-            <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#latest-podcasted"
-                type="button" role="tab" aria-controls="profile" aria-selected="false">Podcasts</button>
-        </li>
-        <li class="nav-item" role="presentation">
-            <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#latest-sports"
-                type="button" role="tab" aria-controls="profile" aria-selected="false">Sports</button>
-        </li>
-        <li class="nav-item" role="presentation">
-            <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#latest-videogames"
-                type="button" role="tab" aria-controls="profile" aria-selected="false">Video Games</button>
-        </li>
-        <li class="nav-item" role="presentation">
-            <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#latest-boardgames"
-                type="button" role="tab" aria-controls="profile" aria-selected="false">Board Games</button>
-        </li>
-        <li class="nav-item" role="presentation">
-            <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#latest-webpages"
-                type="button" role="tab" aria-controls="profile" aria-selected="false">Web Pages</button>
-        </li>
-        <li class="nav-item" role="presentation">
-            <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#latest-beers"
-                type="button" role="tab" aria-controls="profile" aria-selected="false">Beers</button>
-        </li>
-        <li class="nav-item" role="presentation">
-            <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#latest-books"
-                type="button" role="tab" aria-controls="profile" aria-selected="false">Books</button>
-        </li>
-        <li class="nav-item" role="presentation">
-            <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#latest-tasks"
-                type="button" role="tab" aria-controls="profile" aria-selected="false">Tasks</button>
-        </li>
-    </ul>
 
-    <div class="tab-content" id="myTabContent2">
+        {% if Track %}
-        <div class="tab-pane fade show active" id="latest-listened" role="tabpanel"
+        <div class="ab-pane fade show active" id="latest-listened" role="tabpanel"
             aria-labelledby="latest-listened-tab">
             <div class="table-responsive">
                 <table class="table table-striped table-sm">
@@ -64,7 +22,7 @@
                         {{Track|length}}
                         {% for scrobble in Track %}
                         <tr>
-                            <td>{% if scrobble.in_progress %}Listening now{% else %}{{scrobble.timestamp|naturaltime}}{% endif %}</td>
+                            <td>{% if scrobble.in_progress %}{{scrobble.media_obj.strings.verb}} now | <a class="right" href="{% url "scrobbles:finish" scrobble.uuid %}">Finish</a>{% else %}{{scrobble.timestamp|naturaltime}}{% endif %}</td>
                             {% if scrobble.track.album.cover_image %}
                             <td><a href="{{scrobble.track.album.get_absolute_url}}"><img src="{{scrobble.track.album.cover_image_small.url}}" width=25 height=25 style="border:1px solid black;" /></aa></td>
                             {% else %}
@@ -78,7 +36,9 @@
                 </table>
             </div>
         </div>
+        {% endif %}
 
+        {% if Video %}
         <div class="tab-pane fade show" id="latest-watched" role="tabpanel"
             aria-labelledby="latest-watched-tab">
             <div class="table-responsive">
@@ -94,7 +54,7 @@
                     <tbody>
                         {% for scrobble in Video %}
                         <tr>
-                            <td>{% if scrobble.in_progress %}Watching now{% else %}{{scrobble.timestamp|naturaltime}}{% endif %}</td>
+                            <td>{% if scrobble.in_progress %}{{scrobble.media_obj.strings.verb}} now | <a class="right" href="{% url "scrobbles:finish" scrobble.uuid %}">Finish</a>{% else %}{{scrobble.timestamp|naturaltime}}{% endif %}</td>
                             {% if scrobble.video.cover_image %}
                             <td><img src="{{scrobble.media_obj.cover_image_medium.url}}" width=25 height=25 style="border:1px solid black;" /></td>
                             {% else %}
@@ -109,7 +69,9 @@
                 </table>
             </div>
         </div>
+        {% endif %}
 
+        {% if SportEvent %}
         <div class="tab-pane fade show" id="latest-sports" role="tabpanel" aria-labelledby="latest-sports-tab">
             <h2>Latest Sports</h2>
             <div class="table-responsive">
@@ -126,18 +88,20 @@
                     <tbody>
                         {% for scrobble in SportEvent %}
                         <tr>
-                            <td>{% if scrobble.in_progress %}Watching now{% else %}{{scrobble.timestamp|naturaltime}}{% endif %}</td>
+                            <td>{% if scrobble.in_progress %}{{scrobble.media_obj.strings.verb}} now | <a class="right" href="{% url "scrobbles:finish" scrobble.uuid %}">Finish</a>{% else %}{{scrobble.timestamp|naturaltime}}{% endif %}</td>
                             <td>{{scrobble.sport_event.title}}</td>
                             <td>{{scrobble.sport_event.round.name}}</td>
                             <td>{{scrobble.sport_event.round.season.league}}</td>
-                            <td>{{scrobble.playback_position_seconds|natural_duration}}</td>
+                            <td>{{scrobble.elapsed_time|natural_duration}}</td>
                         </tr>
                         {% endfor %}
                     </tbody>
                 </table>
             </div>
         </div>
+        {% endif %}
 
+        {% if PodcastEpisode %}
         <div class="tab-pane fade show" id="latest-podcasted" role="tabpanel"
             aria-labelledby="latest-podcasted-tab">
             <div class="table-responsive">
@@ -152,7 +116,7 @@
                     <tbody>
                         {% for scrobble in PodcastEpisode %}
                         <tr>
-                            <td>{% if scrobble.in_progress %}Listening now{% else %}{{scrobble.timestamp|naturaltime}}{% endif %}</td>
+                            <td>{% if scrobble.in_progress %}{{scrobble.media_obj.strings.verb}} now | <a class="right" href="{% url "scrobbles:finish" scrobble.uuid %}">Finish</a>{% else %}{{scrobble.timestamp|naturaltime}}{% endif %}</td>
                             <td>{{scrobble.timestamp|naturaltime}}</td>
                             <td>{{scrobble.podcast_episode.title}}</td>
                             <td>{{scrobble.podcast_episode.podcast}}</td>
@@ -162,7 +126,10 @@
                 </table>
             </div>
         </div>
+        {% endif %}
 
+        {% if VideoGame %}
+        <h4>Video games</h4>
         <div class="tab-pane fade show" id="latest-videogames" role="tabpanel"
             aria-labelledby="latest-videogames-tab">
             <div class="table-responsive">
@@ -170,7 +137,7 @@
                     <thead>
                         <tr>
                             <th scope="col">Date</th>
-                            <th scope="col">Cover/Screenshot</th>
+                            <th scope="col">Cover</th>
                             <th scope="col">Title</th>
                             <th scope="col">Time played</th>
                             <th scope="col">Percent complete</th>
@@ -179,16 +146,12 @@
                     <tbody>
                         {% for scrobble in VideoGame %}
                         <tr>
-                            <td>{% if scrobble.in_progress %}Sessioning now{% else %}{{scrobble.timestamp|naturaltime}}{% endif %}</td>
+                            <td>{% if scrobble.in_progress %}{{scrobble.media_obj.strings.verb}} now | <a class="right" href="{% url "scrobbles:finish" scrobble.uuid %}">Finish</a>{% else %}{{scrobble.timestamp|naturaltime}}{% endif %}</td>
-                            {% if scrobble.screenshot %}
-                            <td><img src="{{scrobble.screenshot_medium.url}}" width=25 height=25 style="border:1px solid black;" /></td>
-                            {% else %}
                             {% if scrobble.media_obj.hltb_cover %}
                             <td><img src="{{scrobble.media_obj.hltb_cover_medium.url}}" width=25 height=25 style="border:1px solid black;" /></td>
                             {% endif %}
-                            {% endif %}
                             <td><a href="{{scrobble.media_obj.get_absolute_url}}">{{scrobble.media_obj.title}}</a></td>
-                            <td>{{scrobble.playback_position_seconds|natural_duration}}</td>
+                            <td>{{scrobble.elapsed_time|natural_duration}}</td>
                             <td>{{scrobble.percent_played}}</td>
                         </tr>
                         {% endfor %}
@@ -196,8 +159,11 @@
                 </table>
             </div>
         </div>
+        {% endif %}
 
 
+        {% if BoardGame %}
+        <h4>Board games</h4>
         <div class="tab-pane fade show" id="latest-boardgames" role="tabpanel"
             aria-labelledby="latest-boardgames-tab">
             <div class="table-responsive">
@@ -213,17 +179,20 @@
                     <tbody>
                         {% for scrobble in BoardGame %}
                         <tr>
-                            <td>{% if scrobble.in_progress %}Tabling now{% else %}{{scrobble.timestamp|naturaltime}}{% endif %}</td>
+                            <td>{% if scrobble.in_progress %}{{scrobble.media_obj.strings.verb}} now | <a class="right" href="{% url "scrobbles:finish" scrobble.uuid %}">Finish</a>{% else %}{{scrobble.timestamp|naturaltime}}{% endif %}</td>
                             <td><img src="{{scrobble.media_obj.cover_medium.url}}" width=25 height=25 style="border:1px solid black;" /></td>
                             <td><a href="{{scrobble.media_obj.get_absolute_url}}">{{scrobble.media_obj.title}}</a></td>
-                            <td>{{scrobble.playback_position_seconds|natural_duration}}</td>
+                            <td>{{scrobble.elapsed_time|natural_duration}}</td>
                         </tr>
                         {% endfor %}
                     </tbody>
                 </table>
             </div>
         </div>
+        {% endif %}
 
+        {% if WebPage %}
+        <h4>Web pages</h4>
         <div class="tab-pane fade show" id="latest-webpages" role="tabpanel"
             aria-labelledby="latest-webpages-tab">
             <div class="table-responsive">
@@ -231,7 +200,6 @@
                     <thead>
                         <tr>
                             <th scope="col">Date</th>
-                            <th scope="col">Cover</th>
                             <th scope="col">Title</th>
                             <th scope="col">Time browsing</th>
                         </tr>
@@ -239,17 +207,19 @@
                     <tbody>
                         {% for scrobble in WebPage %}
                         <tr>
-                            <td>{% if scrobble.in_progress %}Browsing now{% else %}{{scrobble.timestamp|naturaltime}}{% endif %}</td>
+                            <td>{% if scrobble.in_progress %}{{scrobble.media_obj.strings.verb}} now | <a class="right" href="{% url "scrobbles:finish" scrobble.uuid %}">Finish</a>{% else %}{{scrobble.timestamp|naturaltime}}{% endif %}</td>
-                            <td><img src="{{scrobble.media_obj.cover_medium.url}}" width=25 height=25 style="border:1px solid black;" /></td>
                             <td><a href="{{scrobble.media_obj.get_absolute_url}}">{{scrobble.media_obj.title}}</a></td>
-                            <td>{{scrobble.playback_position_seconds|natural_duration}}</td>
+                            <td>{{scrobble.elapsed_time|natural_duration}}</td>
                         </tr>
                         {% endfor %}
                     </tbody>
                 </table>
             </div>
         </div>
+        {% endif %}
 
+        {% if Beer %}
+        <h4>Beers</h4>
         <div class="tab-pane fade show" id="latest-beers" role="tabpanel"
             aria-labelledby="latest-beers-tab">
             <div class="table-responsive">
@@ -265,17 +235,20 @@
                     <tbody>
                         {% for scrobble in Beer %}
                         <tr>
-                            <td>{% if scrobble.in_progress %}Drinking now{% else %}{{scrobble.timestamp|naturaltime}}{% endif %}</td>
+                            <td>{% if scrobble.in_progress %}{{scrobble.media_obj.strings.verb}} now | <a class="right" href="{% url "scrobbles:finish" scrobble.uuid %}">Finish</a>{% else %}{{scrobble.timestamp|naturaltime}}{% endif %}</td>
                             <td><img src="{{scrobble.media_obj.cover_medium.url}}" width=25 height=25 style="border:1px solid black;" /></td>
                             <td><a href="{{scrobble.media_obj.get_absolute_url}}">{{scrobble.media_obj.title}}</a></td>
-                            <td>{{scrobble.playback_position_seconds|natural_duration}}</td>
+                            <td>{{scrobble.elapsed_time|natural_duration}}</td>
                         </tr>
                         {% endfor %}
                     </tbody>
                 </table>
             </div>
         </div>
+        {% endif %}
 
+        {% if Book %}
+        <h4>Books</h4>
         <div class="tab-pane fade show" id="latest-books" role="tabpanel"
             aria-labelledby="latest-books-tab">
             <div class="table-responsive">
@@ -291,17 +264,19 @@
                     <tbody>
                         {% for scrobble in Book %}
                         <tr>
-                            <td>{% if scrobble.in_progress %}Reading now{% else %}{{scrobble.timestamp|naturaltime}}{% endif %}</td>
+                            <td>{% if scrobble.in_progress %}{{scrobble.media_obj.strings.verb}} now | <a class="right" href="{% url "scrobbles:finish" scrobble.uuid %}">Finish</a>{% else %}{{scrobble.timestamp|naturaltime}}{% endif %}</td>
                             <td><img src="{scrobble.media_obj.cover_medium.url}}" width=25 height=25 style="border:1px solid black;" /></td>
                             <td><a href="{{scrobble.media_obj.get_absolute_url}}">{{scrobble.media_obj.title}}</a></td>
-                            <td>{{scrobble.playback_position_seconds|natural_duration}}</td>
+                            <td>{{scrobble.elapsed_time|natural_duration}}</td>
                         </tr>
                         {% endfor %}
                     </tbody>
                 </table>
             </div>
         </div>
+        {% endif %}
 
+        {% if Task %}
         <div class="tab-pane fade show" id="latest-tasks" role="tabpanel"
             aria-labelledby="latest-tasks-tab">
             <div class="table-responsive">
@@ -316,15 +291,16 @@
                     <tbody>
                         {% for scrobble in Task %}
                         <tr>
-                            <td>{% if scrobble.in_progress %}Doing now{% else %}{{scrobble.timestamp|naturaltime}}{% endif %}</td>
+                            <td>{% if scrobble.in_progress %}{{scrobble.media_obj.strings.verb}} now | <a class="right" href="{% url "scrobbles:finish" scrobble.uuid %}">Finish</a>{% else %}{{scrobble.timestamp|naturaltime}}{% endif %}</td>
                             <td><a href="{{scrobble.media_obj.get_absolute_url}}">{{scrobble.media_obj.title}}</a></td>
-                            <td>{{scrobble.playback_position_seconds|natural_duration}}</td>
+                            <td>{{scrobble.elapsed_time|natural_duration}}</td>
                         </tr>
                         {% endfor %}
                     </tbody>
                 </table>
             </div>
         </div>
+        {% endif %}
 
     </div>
 </div>

vrobbler/templates/scrobbles/scrobble_list.html

@@ -49,7 +49,7 @@
 <main class="col-md-9 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">Dashboard</h1>
+        <h1 class="h2">{% if date %}{{date|naturaltime}}{% else %}Today{% endif %}</h1>
         <div class="btn-toolbar mb-2 mb-md-0">
             {% if user.is_authenticated %}
             <div class="btn-group me-2">