210 lines
7.9 KiB
HTML
210 lines
7.9 KiB
HTML
{% extends "base_list.html" %}
|
|
|
|
{% block title %}Charts{% if period_str %} - {{ period_str }}{% endif %}{% endblock %}
|
|
|
|
{% block head_extra %}
|
|
<style>
|
|
.container { margin-bottom: 100px; }
|
|
h2 { padding-top: 20px; }
|
|
.chart-section {
|
|
margin-bottom: 2rem;
|
|
}
|
|
.nav-tabs {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block lists %}
|
|
|
|
{% if chart_type == "maloja" %}
|
|
{% include "scrobbles/_top_charts.html" %}
|
|
{% else %}
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="btn-group mb-3" role="group">
|
|
{% if year %}<a href="?date={{year}}{% if month %}-{{month}}{% endif %}" class="btn btn-outline-secondary{% if not week and not day %} active{% endif %}">{{year}}{% if month %} {{month|date:"F"}}{% endif %}</a>{% endif %}
|
|
{% if week %}<span class="btn btn-outline-secondary active">Week {{week}}</span>{% endif %}
|
|
{% if day %}<span class="btn btn-outline-secondary active">{{day}}</span>{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
{% if charts.artist %}
|
|
<div class="col-md-6 col-lg-4 chart-section">
|
|
<h3>🎤 Top Artists</h3>
|
|
<ul class="list-group">
|
|
{% for chart in charts.artist|slice:":20" %}
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
<span class="me-2"><strong>#{{chart.rank}}</strong></span>
|
|
<a href="{{chart.artist.get_absolute_url}}">{{chart.artist.name}}</a>
|
|
<span class="badge bg-primary rounded-pill">{{chart.count}}</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if charts.album %}
|
|
<div class="col-md-6 col-lg-4 chart-section">
|
|
<h3>💿 Top Albums</h3>
|
|
<ul class="list-group">
|
|
{% for chart in charts.album|slice:":20" %}
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
<span class="me-2"><strong>#{{chart.rank}}</strong></span>
|
|
<a href="{{chart.album.get_absolute_url}}">{{chart.album.name}}</a>
|
|
<span class="badge bg-primary rounded-pill">{{chart.count}}</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if charts.track %}
|
|
<div class="col-md-6 col-lg-4 chart-section">
|
|
<h3>🎵 Top Tracks</h3>
|
|
<ul class="list-group">
|
|
{% for chart in charts.track|slice:":20" %}
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
<span class="me-2"><strong>#{{chart.rank}}</strong></span>
|
|
<a href="{{chart.track.get_absolute_url}}">{{chart.track.title}}</a>
|
|
<span class="badge bg-primary rounded-pill">{{chart.count}}</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if charts.tv_series %}
|
|
<div class="col-md-6 col-lg-4 chart-section">
|
|
<h3>📺 Top TV Series</h3>
|
|
<ul class="list-group">
|
|
{% for chart in charts.tv_series|slice:":20" %}
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
<span class="me-2"><strong>#{{chart.rank}}</strong></span>
|
|
<a href="{{chart.tv_series.get_absolute_url}}">{{chart.tv_series.name}}</a>
|
|
<span class="badge bg-primary rounded-pill">{{chart.count}}</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if charts.video %}
|
|
<div class="col-md-6 col-lg-4 chart-section">
|
|
<h3>🎬 Top Videos</h3>
|
|
<ul class="list-group">
|
|
{% for chart in charts.video|slice:":20" %}
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
<span class="me-2"><strong>#{{chart.rank}}</strong></span>
|
|
<a href="{{chart.video.get_absolute_url}}">{{chart.video.title}}</a>
|
|
<span class="badge bg-primary rounded-pill">{{chart.count}}</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if charts.podcast %}
|
|
<div class="col-md-6 col-lg-4 chart-section">
|
|
<h3>🎙️ Top Podcasts</h3>
|
|
<ul class="list-group">
|
|
{% for chart in charts.podcast|slice:":20" %}
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
<span class="me-2"><strong>#{{chart.rank}}</strong></span>
|
|
<a href="{{chart.podcast.get_absolute_url}}">{{chart.podcast.name}}</a>
|
|
<span class="badge bg-primary rounded-pill">{{chart.count}}</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if charts.board_game %}
|
|
<div class="col-md-6 col-lg-4 chart-section">
|
|
<h3>🎲 Top Board Games</h3>
|
|
<ul class="list-group">
|
|
{% for chart in charts.board_game|slice:":20" %}
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
<span class="me-2"><strong>#{{chart.rank}}</strong></span>
|
|
<a href="{{chart.board_game.get_absolute_url}}">{{chart.board_game.title}}</a>
|
|
<span class="badge bg-primary rounded-pill">{{chart.count}}</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if charts.book %}
|
|
<div class="col-md-6 col-lg-4 chart-section">
|
|
<h3>📚 Top Books</h3>
|
|
<ul class="list-group">
|
|
{% for chart in charts.book|slice:":20" %}
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
<span class="me-2"><strong>#{{chart.rank}}</strong></span>
|
|
<a href="{{chart.book.get_absolute_url}}">{{chart.book.title}}</a>
|
|
<span class="badge bg-primary rounded-pill">{{chart.count}}</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if charts.food %}
|
|
<div class="col-md-6 col-lg-4 chart-section">
|
|
<h3>🍽️ Top Foods</h3>
|
|
<ul class="list-group">
|
|
{% for chart in charts.food|slice:":20" %}
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
<span class="me-2"><strong>#{{chart.rank}}</strong></span>
|
|
<a href="{{chart.food.get_absolute_url}}">{{chart.food.title}}</a>
|
|
<span class="badge bg-primary rounded-pill">{{chart.count}}</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if charts.trail %}
|
|
<div class="col-md-6 col-lg-4 chart-section">
|
|
<h3>🥾 Top Trails</h3>
|
|
<ul class="list-group">
|
|
{% for chart in charts.trail|slice:":20" %}
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
<span class="me-2"><strong>#{{chart.rank}}</strong></span>
|
|
<a href="{{chart.trail.get_absolute_url}}">{{chart.trail.name}}</a>
|
|
<span class="badge bg-primary rounded-pill">{{chart.count}}</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if charts.geo_location %}
|
|
<div class="col-md-6 col-lg-4 chart-section">
|
|
<h3>📍 Top Locations</h3>
|
|
<ul class="list-group">
|
|
{% for chart in charts.geo_location|slice:":20" %}
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
<span class="me-2"><strong>#{{chart.rank}}</strong></span>
|
|
<span>{{chart.geo_location.name}}</span>
|
|
<span class="badge bg-primary rounded-pill">{{chart.count}}</span>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if not charts %}
|
|
<div class="alert alert-info">
|
|
No chart data for this period. Charts are built asynchronously - check back later or trigger a chart rebuild.
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% endif %}
|
|
|
|
{% endblock %}
|