232 lines
12 KiB
HTML
232 lines
12 KiB
HTML
{% load static chart_tags %}
|
|
|
|
{% if maloja_charts %}
|
|
<div class="row">
|
|
<h2>🎤 Top Artists</h2>
|
|
<ul class="nav nav-tabs" id="artistTab" role="tablist">
|
|
{% for key, name in chart_keys.items %}
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link {% if forloop.counter == 2 %}active{% endif %}"
|
|
id="artist-{{key}}-tab" data-bs-toggle="tab" data-bs-target="#artist-{{key}}"
|
|
type="button" role="tab">{{name}}</button>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
|
|
<div class="tab-content" id="artistTabContent" class="maloja-chart">
|
|
{% for key, name in chart_keys.items %}
|
|
{% with maloja_charts.artist|get_item:key as artists %}
|
|
<div class="tab-pane fade {% if forloop.counter == 2 %}show active{% endif %}" id="artist-{{key}}" role="tabpanel">
|
|
{% if artists.0 %}
|
|
<div style="display:block">
|
|
<div style="float:left;">
|
|
<div class="image-wrapper" style="display:flex; flex-wrap: wrap; margin:0">
|
|
<div class="caption">#1 {{artists.0.artist.name}}</div>
|
|
{% if artists.0.artist.thumbnail %}
|
|
<a href="{{artists.0.artist.get_absolute_url}}"><img alt="{{artists.0.artist.name}}" src="{{artists.0.artist.thumbnail_medium.url}}" width="300px"></a>
|
|
{% else %}
|
|
<a href="{{artists.0.artist.get_absolute_url}}"><img alt="{{artists.0.artist.name}}" src="{% static "images/not-found.jpg" %}" width="300px"></a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div style="float:left; width:300px;">
|
|
<div style="display:flex; flex-wrap: wrap;">
|
|
{% for i in "2345" %}
|
|
{% with artists|get_item:forloop.counter as artist %}
|
|
{% if artist %}
|
|
<div class="image-wrapper" style="width:50%">
|
|
<div class="caption-medium">#{{forloop.counter|add:1}} {{artist.artist.name}}</div>
|
|
{% if artist.artist.thumbnail %}
|
|
<a href="{{artist.artist.get_absolute_url}}"><img src="{{artist.artist.thumbnail_medium.url}}" width="150px"></a>
|
|
{% else %}
|
|
<a href="{{artist.artist.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="150px"></a>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<div style="float:left; width:300px;">
|
|
<div style="display:flex; flex-wrap: wrap;">
|
|
{% for i in "123456789" %}
|
|
{% with forloop.counter|add:4 as idx %}
|
|
{% with artists|get_item:idx as artist %}
|
|
{% if artist %}
|
|
<div class="image-wrapper" style="width:33%">
|
|
<div class="caption-small">#{{forloop.counter|add:5}} {{artist.artist.name}}</div>
|
|
{% if artist.artist.thumbnail %}
|
|
<a href="{{artist.artist.get_absolute_url}}"><img src="{{artist.artist.thumbnail_medium.url}}" width="100px"></a>
|
|
{% else %}
|
|
<a href="{{artist.artist.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px"></a>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
{% endwith %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<p class="text-muted">No data for this period</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endwith %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<h2>💿 Top Albums</h2>
|
|
<ul class="nav nav-tabs" id="albumTab" role="tablist">
|
|
{% for key, name in chart_keys.items %}
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link {% if forloop.counter == 2 %}active{% endif %}"
|
|
id="album-{{key}}-tab" data-bs-toggle="tab" data-bs-target="#album-{{key}}"
|
|
type="button" role="tab">{{name}}</button>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
|
|
<div class="tab-content" id="albumTabContent" class="maloja-chart">
|
|
{% for key, name in chart_keys.items %}
|
|
{% with maloja_charts.album|get_item:key as albums %}
|
|
<div class="tab-pane fade {% if forloop.counter == 2 %}show active{% endif %}" id="album-{{key}}" role="tabpanel">
|
|
{% if albums.0 %}
|
|
<div style="display:block">
|
|
<div style="float:left;">
|
|
<div class="image-wrapper" style="display:flex; flex-wrap: wrap; margin:0">
|
|
<div class="caption">#1 {{albums.0.album.name}}</div>
|
|
{% if albums.0.album.cover_image %}
|
|
<a href="{{albums.0.album.get_absolute_url}}"><img src="{{albums.0.album.cover_image_medium.url}}" width="300px"></a>
|
|
{% else %}
|
|
<a href="{{albums.0.album.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="300px"></a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div style="float:left; width:300px;">
|
|
<div style="display:flex; flex-wrap: wrap;">
|
|
{% for i in "2345" %}
|
|
{% with albums|get_item:forloop.counter as album %}
|
|
{% if album %}
|
|
<div class="image-wrapper" style="width:50%">
|
|
<div class="caption-medium">#{{forloop.counter|add:1}} {{album.album.name}}</div>
|
|
{% if album.album.cover_image %}
|
|
<a href="{{album.album.get_absolute_url}}"><img src="{{album.album.cover_image_medium.url}}" width="150px"></a>
|
|
{% else %}
|
|
<a href="{{album.album.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="150px"></a>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<div style="float:left; width:300px;">
|
|
<div style="display:flex; flex-wrap: wrap;">
|
|
{% for i in "123456789" %}
|
|
{% with forloop.counter|add:4 as idx %}
|
|
{% with albums|get_item:idx as album %}
|
|
{% if album %}
|
|
<div class="image-wrapper" style="width:33%">
|
|
<div class="caption-small">#{{forloop.counter|add:5}} {{album.album.name}}</div>
|
|
{% if album.album.cover_image %}
|
|
<a href="{{album.album.get_absolute_url}}"><img src="{{album.album.cover_image_medium.url}}" width="100px"></a>
|
|
{% else %}
|
|
<a href="{{album.album.get_absolute_url}}"><img src="{% static 'images/not-found.jpg' %}" width="100px"></a>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
{% endwith %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<p class="text-muted">No data for this period</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endwith %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<h2>📺 Top TV Shows</h2>
|
|
<ul class="nav nav-tabs" id="tvshowTab" role="tablist">
|
|
{% for key, name in chart_keys.items %}
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link {% if forloop.counter == 2 %}active{% endif %}"
|
|
id="tvshow-{{key}}-tab" data-bs-toggle="tab" data-bs-target="#tvshow-{{key}}"
|
|
type="button" role="tab">{{name}}</button>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
|
|
<div class="tab-content" id="tvshowTabContent" class="maloja-chart">
|
|
{% for key, name in chart_keys.items %}
|
|
{% with maloja_charts.tv_series|get_item:key as shows %}
|
|
<div class="tab-pane fade {% if forloop.counter == 2 %}show active{% endif %}" id="tvshow-{{key}}" role="tabpanel">
|
|
{% if shows.0 %}
|
|
<div style="display:block">
|
|
<div style="float:left;">
|
|
<div class="image-wrapper" style="display:flex; flex-wrap: wrap; margin:0">
|
|
<div class="caption">#1 {{shows.0.tv_series.name}}</div>
|
|
{% if shows.0.tv_series.cover_image %}
|
|
<a href="{{shows.0.tv_series.get_absolute_url}}"><img alt="{{shows.0.tv_series.name}}" src="{{shows.0.tv_series.cover_medium.url}}" width="300px" height="300px" style="object-fit: cover"></a>
|
|
{% else %}
|
|
<a href="{{shows.0.tv_series.get_absolute_url}}"><img alt="{{shows.0.tv_series.name}}" src="{% static "images/not-found.jpg" %}" width="300px" height="300px" style="object-fit: cover"></a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div style="float:left; width:300px;">
|
|
<div style="display:flex; flex-wrap: wrap;">
|
|
{% for i in "2345" %}
|
|
{% with shows|get_item:forloop.counter as show %}
|
|
{% if show %}
|
|
<div class="image-wrapper" style="width:50%">
|
|
<div class="caption-medium">#{{forloop.counter|add:1}} {{show.tv_series.name}}</div>
|
|
{% if show.tv_series.cover_image %}
|
|
<a href="{{show.tv_series.get_absolute_url}}"><img src="{{show.tv_series.cover_small.url}}" width="150px" height="150px" style="object-fit: cover"></a>
|
|
{% else %}
|
|
<a href="{{show.tv_series.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="150px" height="150px" style="object-fit: cover"></a>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<div style="float:left; width:300px;">
|
|
<div style="display:flex; flex-wrap: wrap;">
|
|
{% for i in "123456789" %}
|
|
{% with forloop.counter|add:4 as idx %}
|
|
{% with shows|get_item:idx as show %}
|
|
{% if show %}
|
|
<div class="image-wrapper" style="width:33%">
|
|
<div class="caption-small">#{{forloop.counter|add:5}} {{show.tv_series.name}}</div>
|
|
{% if show.tv_series.cover_image %}
|
|
<a href="{{show.tv_series.get_absolute_url}}"><img src="{{show.tv_series.cover_small.url}}" width="100px" height="100px" style="object-fit: cover"></a>
|
|
{% else %}
|
|
<a href="{{show.tv_series.get_absolute_url}}"><img src="{% static "images/not-found.jpg" %}" width="100px" height="100px" style="object-fit: cover"></a>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
{% endwith %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<p class="text-muted">No data for this period</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endwith %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|