guido/plays-hub
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add nice statistics

Browse Source
This commit is contained in:
Guido Schweizer
2025-06-21 09:38:22 +02:00
parent 99b0aaa72e
commit e79626972f
43 changed files with 1359 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
app/views/statistics/_top_artists.html.erb Normal file
View File

@@ -0,0 +1,72 @@
<div style="background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 2em 2.5em; min-width: 340px; max-width: 600px; flex: 2 1 340px; display: flex; flex-direction: column; align-items: center; min-height: 340px;">
<h2 style="margin-top:0; font-size: 1.4em; color: #0071e3;">Top 5 Songs</h2>
<div id="artist-tabs" style="display: flex; gap: 0.5em; margin: 1em 0 1.5em 0;">
<button class="artist-tab" data-tab="upcoming" style="background: #e8f0fe; color: #0071e3; border: none; border-radius: 8px; padding: 0.4em 1em; font-weight: 500; cursor: pointer;">Upcoming</button>
<button class="artist-tab" data-tab="year" style="background: #f3f3f3; color: #222; border: none; border-radius: 8px; padding: 0.4em 1em; font-weight: 500; cursor: pointer;">This Year</button>
<button class="artist-tab" data-tab="all" style="background: #f3f3f3; color: #222; border: none; border-radius: 8px; padding: 0.4em 1em; font-weight: 500; cursor: pointer;">All Time</button>
</div>
<div id="artists-all" style="display:none;">
<% if @top_artists_all_time.present? %>
<ol style="padding-left: 1.2em; margin: 0; width: 100%;">
<% @top_artists_all_time.each do |artist, count| %>
<li style="margin-bottom: 0.8em; display: flex; justify-content: space-between; align-items: center;">
<span><%= artist %></span>
<span style="color: #888; font-size: 1em;">Plays: <%= count %></span>
</li>
<% end %>
</ol>
<% else %>
<div style="color: #888;">No data</div>
<% end %>
</div>
<div id="artists-year" style="display:none;">
<% if @top_artists_year.present? %>
<ol style="padding-left: 1.2em; margin: 0; width: 100%;">
<% @top_artists_year.each do |artist, count| %>
<li style="margin-bottom: 0.8em; display: flex; justify-content: space-between; align-items: center;">
<span><%= artist %></span>
<span style="color: #888; font-size: 1em;">Plays: <%= count %></span>
</li>
<% end %>
</ol>
<% else %>
<div style="color: #888;">No data</div>
<% end %>
</div>
<div id="artists-upcoming" style="padding-left: 1.2em; margin: 0; width: 100%;">
<% if @top_artists_upcoming.present? %>
<ol style="padding-left: 1.2em; margin: 0; width: 100%;">
<% @top_artists_upcoming.each do |artist, count| %>
<li style="margin-bottom: 0.8em; display: flex; justify-content: space-between; align-items: center;">
<span><%= artist %></span>
<span style="color: #888; font-size: 1em;">Plays: <%= count %></span>
</li>
<% end %>
</ol>
<% else %>
<div style="color: #888;">No data</div>
<% end %>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const tabs = document.querySelectorAll('.artist-tab');
const views = {
all: document.getElementById('artists-all'),
year: document.getElementById('artists-year'),
upcoming: document.getElementById('artists-upcoming'),
};
tabs.forEach(tab => {
tab.addEventListener('click', function() {
tabs.forEach(t => {
t.style.background = '#f3f3f3';
t.style.color = '#222';
});
this.style.background = '#e8f0fe';
this.style.color = '#0071e3';
Object.keys(views).forEach(k => views[k].style.display = 'none');
views[this.dataset.tab].style.display = '';
});
});
});
</script>
</div>