[scrobbles] Fix display of task notes

vrobbler/templates/scrobbles/scrobble_detail.html

@@ -1,6 +1,7 @@
 {% extends "base_list.html" %}
 {% load form_tags %}
 {% load mathfilters %}
+{% load naturalduration %}
 {% load static %}
 
 {% block title %}{{object.name}}{% endblock %}
@@ -11,40 +12,95 @@
 
 <h1>{{ object.media_obj }} - {{object.media_type}}</h1>
 
-{% if object.notes %}
-<details class="mb-3">
-  <summary>Notes ({{ object.notes|length }})</summary>
-  <ul class="mt-2">
-  {% for note in object.notes %}
-    <li>{{ note }}</li>
-  {% endfor %}
-  </ul>
-</details>
+{% with notes_string=object.logdata.notes_as_str %}
+{% if notes_string %}
+<div class="mb-3">
+  <h5>Notes</h5>
+  <pre>{{ notes_string }}</pre>
+</div>
 {% endif %}
+{% endwith %}
 
-<!-- Your existing detail page content -->
 {% if object.logdata.avg_seconds_per_page %}
 <p>Rate: {{object.logdata.avg_seconds_per_page}}s per page</p>
 {% endif %}
 
-<h2>Edit Log</h2>
-<form method="post" class="needs-validation" novalidate>
-  {% csrf_token %}
-  {% for field in log_form %}
-    <div class="mb-3">
-      <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }}</label>
-      {{ field|add_class:"form-control" }}
-      {% if field.help_text %}
-        <div class="form-text">{{ field.help_text }}</div>
-      {% endif %}
-      {% for error in field.errors %}
-        <div class="invalid-feedback d-block">{{ error }}</div>
-      {% endfor %}
-    </div>
-  {% endfor %}
+<details class="mb-3">
+  <summary>Edit Log</summary>
+  <form method="post" class="needs-validation mt-3" novalidate>
+    {% csrf_token %}
+    {% for field in log_form %}
+      <div class="mb-3">
+        <label for="{{ field.id_for_label }}" class="form-label">{{ field.label }}</label>
+        {{ field|add_class:"form-control" }}
+        {% if field.help_text %}
+          <div class="form-text">{{ field.help_text }}</div>
+        {% endif %}
+        {% for error in field.errors %}
+          <div class="invalid-feedback d-block">{{ error }}</div>
+        {% endfor %}
+      </div>
+    {% endfor %}
 
-  <button type="submit" class="btn btn-primary">Save</button>
-</form>
+    <button type="submit" class="btn btn-primary">Save</button>
+  </form>
+</details>
+
+<h2 class="mt-4">Other Scrobbles of This Media</h2>
+{% if related_scrobbles %}
+<p class="text-muted">{{ related_scrobbles.paginator.count }} scrobble{{ related_scrobbles.paginator.count|pluralize }}</p>
+<table class="table table-striped table-sm">
+    <thead>
+        <tr>
+            <th scope="col">Date</th>
+            <th scope="col">Title</th>
+            <th scope="col">Time</th>
+        </tr>
+    </thead>
+    <tbody>
+        {% for scrobble in related_scrobbles %}
+        <tr>
+            <td><a href="{% url 'scrobbles:detail' scrobble.uuid %}">{{ scrobble.timestamp|date:"M d, Y" }}</a></td>
+            <td>
+                {% if scrobble.media_type == "Task" and scrobble.logdata.title %}{{ scrobble.media_obj.title }}: {{ scrobble.logdata.title }}{% else %}{{ scrobble.media_obj.title|default:scrobble.media_obj }}{% endif %}
+            </td>
+            <td>
+                {% if scrobble.playback_position_seconds %}{{ scrobble.playback_position_seconds|natural_duration }}{% endif %}
+            </td>
+        </tr>
+        {% endfor %}
+    </tbody>
+</table>
+
+{% if related_scrobbles.has_other_pages %}
+<nav>
+    <ul class="pagination">
+        {% if related_scrobbles.has_previous %}
+        <li class="page-item"><a class="page-link" href="?page={{ related_scrobbles.previous_page_number }}">Previous</a></li>
+        {% else %}
+        <li class="page-item disabled"><span class="page-link">Previous</span></li>
+        {% endif %}
+
+        {% for num in related_scrobbles.paginator.page_range %}
+            {% if related_scrobbles.number == num %}
+            <li class="page-item active"><span class="page-link">{{ num }}</span></li>
+            {% elif num > related_scrobbles.number|add:'-3' and num < related_scrobbles.number|add:'3' %}
+            <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
+            {% endif %}
+        {% endfor %}
+
+        {% if related_scrobbles.has_next %}
+        <li class="page-item"><a class="page-link" href="?page={{ related_scrobbles.next_page_number }}">Next</a></li>
+        {% else %}
+        <li class="page-item disabled"><span class="page-link">Next</span></li>
+        {% endif %}
+    </ul>
+</nav>
+{% endif %}
+
+{% else %}
+<p class="text-muted">No other scrobbles of this media.</p>
+{% endif %}
 
 </div>