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

finish activity ui

main
Guido Schweizer 2025-06-22 08:51:48 +02:00
parent e79626972f
commit 7c14e469c9
19 changed files with 378 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/assets/images/plays_hub_logo.svg Normal file
View File

@ -0,0 +1,18 @@
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="liquidGreen" cx="50%" cy="40%" r="70%" fx="60%" fy="30%">
<stop offset="0%" stop-color="#A8FFC5"/>
<stop offset="70%" stop-color="#7EE8B9"/>
<stop offset="100%" stop-color="#6AD1A5"/>
</radialGradient>
<filter id="goo" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"/>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 12 -5" result="goo"/>
<feBlend in="SourceGraphic" in2="goo" mode="normal"/>
</filter>
</defs>
<!-- Liquid blob background -->
<path filter="url(#goo)" d="M40 8c12 0 23 7 27 17 4 10-2 23-10 31s-21 12-32 7c-11-5-18-17-15-28C14 15 28 8 40 8z" fill="url(#liquidGreen)"/>
<!-- Play triangle -->
<polygon points="34,27 34,53 54,40" fill="#fff" style="filter: drop-shadow(0 2px 6px #7EE8B9aa)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

193
app/assets/stylesheets/app.css
View File

@ -14,8 +14,200 @@ main {
padding-left: 3vw; padding-left: 3vw;
padding-right: 3vw; padding-right: 3vw;
box-sizing: border-box; box-sizing: border-box;
margin-top: 4.5em;
} }
.dashboard-widget {
background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 2em 2.5em;
}
.dashboard-widget .widget-title {
margin-top: 0;
font-size: 1.4em;
color: #0071e3;
font-weight: 600;
margin-bottom: 1.2em;
letter-spacing: 0.5px;
text-align: left;
width: 100%;
}
.dashboard-widget .widget-content {
margin-top: 1em;
}
.dashboard-widget .widget-content div {
margin-bottom: 0.5em;
}
.dashboard-widget .widget-content div strong {
font-weight: 600;
}
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5em 3vw;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
position: sticky;
top: 0;
z-index: 100;
}
.site-header .logo a {
font-weight: bold;
font-size: 1.4em;
color: #0071e3;
text-decoration: none;
}
.site-header nav a {
margin-left: 2em;
color: #222;
text-decoration: none;
font-weight: 500;
transition: color 0.15s;
}
.site-header nav a:hover {
color: #0071e3;
}
.site-header .logout-btn {
color: #e00;
font-weight: 600;
background: none;
border: none;
padding: 0;
margin-left: 2em;
font-size: 1em;
cursor: pointer;
text-decoration: none;
box-shadow: none;
display: inline;
}
.site-header .logout-link-btn {
background: none;
border: none;
color: #e00;
font-weight: 600;
padding: 0;
margin-left: 2em;
font-size: 1em;
cursor: pointer;
text-decoration: none;
box-shadow: none;
display: inline;
}
.site-header .logout-link-btn:hover {
text-decoration: underline;
color: #b00;
}
@media (max-width: 700px) {
.site-header {
flex-direction: column;
align-items: flex-start;
padding: 0.7em 1vw;
}
.site-header nav a {
margin-left: 1em;
font-size: 1em;
}
main {
margin-top: 5.5em;
}
}
.login-card {
background: #fff;
border-radius: 16px;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
padding: 2em 2.5em;
max-width: 400px;
margin: 3em auto 2.5em auto;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.login-heading {
margin-top: 0;
font-size: 1.4em;
color: #0071e3;
font-weight: 600;
margin-bottom: 1.2em;
letter-spacing: 0.5px;
text-align: left;
width: 100%;
}
.login-card .field {
width: 100%;
margin-bottom: 1.2em;
}
.login-card .actions {
width: 100%;
display: flex;
justify-content: flex-start;
}
.login-card .actions input[type="submit"],
.login-card .actions button,
.login-card button[type="submit"] {
background: #0071e3;
color: #fff;
border: none;
border-radius: 12px;
padding: 0.8em 2.2em;
font-size: 1.05em;
font-weight: 600;
cursor: pointer;
opacity: 1;
margin-top: 1em;
transition: background 0.2s, opacity 0.2s;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
letter-spacing: 0.2px;
}
.login-card .actions input[type="submit"]:hover,
.login-card .actions button:hover,
.login-card button[type="submit"]:hover {
background: #005bb5;
}
.login-card input[type="email"],
.login-card input[type="password"] {
width: 100%;
padding: 0.7em 1em;
border-radius: 8px;
border: 1px solid #e0e0e0;
font-size: 1em;
margin-top: 0.3em;
box-sizing: border-box;
}
.login-card input[type="email"]:focus,
.login-card input[type="password"]:focus {
outline: none;
border-color: #0071e3;
box-shadow: 0 0 0 2px #e8f0fe;
}
.login-card label {
font-weight: 500;
color: #222;
}
@media (max-width: 700px) { @media (max-width: 700px) {
main { main {
padding-left: 1vw; padding-left: 1vw;
@ -77,7 +269,6 @@ button {
font-weight: 600; font-weight: 600;
cursor: not-allowed; cursor: not-allowed;
opacity: 0.7; opacity: 0.7;
margin-top: 2em;
transition: background 0.2s, opacity 0.2s; transition: background 0.2s, opacity 0.2s;
box-shadow: 0 2px 8px rgba(0,0,0,0.08); box-shadow: 0 2px 8px rgba(0,0,0,0.08);
letter-spacing: 0.2px; letter-spacing: 0.2px;

8
app/controllers/home_controller.rb
View File

@ -1,8 +0,0 @@
class HomeController < ApplicationController
before_action :authenticate_user!
def index
@user = current_user
@logins = Login.where(user: @user)
end
end

2
app/controllers/statistics_controller.rb
View File

@ -4,10 +4,12 @@ class StatisticsController < ApplicationController
def index def index
stats = Statistics.new(current_user) stats = Statistics.new(current_user)
@total_plays = stats.total_plays @total_plays = stats.total_plays
@year_plays = stats.total_plays_year
@activity_by_day = stats.activity_by_day @activity_by_day = stats.activity_by_day
@top_artists_all_time = stats.top_artists_all_time @top_artists_all_time = stats.top_artists_all_time
@top_artists_year = stats.top_artists_year @top_artists_year = stats.top_artists_year
@top_artists_upcoming = stats.top_artists_upcoming @top_artists_upcoming = stats.top_artists_upcoming
@since_date = stats.since_date @since_date = stats.since_date
@streak = stats.longest_streak
end end
end end

38
app/models/statistics.rb
View File

@ -9,6 +9,11 @@ class Statistics
Activity.where(user: user).count Activity.where(user: user).count
end end
def total_plays_year
year_start = Date.today.beginning_of_year
Activity.where(user: user, created_at: year_start..Date.today.end_of_day).count
end
def activity_by_day def activity_by_day
start_date = 1.year.ago.to_date start_date = 1.year.ago.to_date
end_date = Date.today end_date = Date.today
@ -37,4 +42,37 @@ class Statistics
def since_date def since_date
Activity.where(user: user).order(:created_at).limit(1).pick(:created_at) Activity.where(user: user).order(:created_at).limit(1).pick(:created_at)
end end
# Returns a hash with streak info: :start_date, :end_date, :length, :total_plays, :most_played_song, :most_played_song_count
def longest_streak
days = activity_by_day.keys.map { |d| Date.parse(d) }.sort
return nil if days.empty?
streaks = []
current_streak = []
days.each_with_index do |day, i|
if i == 0 || day == days[i-1] + 1
current_streak << day
else
streaks << current_streak
current_streak = [day]
end
end
streaks << current_streak unless current_streak.empty?
best = streaks.max_by(&:length)
return nil unless best && best.length > 0
streak_start = best.first
streak_end = best.last
plays = Activity.where(user: user, created_at: streak_start.beginning_of_day..streak_end.end_of_day)
total_plays = plays.count
song_counts = plays.group(:item_title).order('count_id DESC').limit(1).count(:id)
most_played_song, most_played_song_count = song_counts.first || [nil, 0]
{
start_date: streak_start,
end_date: streak_end,
length: best.length,
total_plays: total_plays,
most_played_song: most_played_song,
most_played_song_count: most_played_song_count
}
end
end end

4
app/models/user.rb
View File

@ -3,4 +3,8 @@ class User < ApplicationRecord
# :confirmable, :lockable, :timeoutable, :trackable and :omniauthable # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
devise :database_authenticatable, :registerable, devise :database_authenticatable, :registerable,
:recoverable, :rememberable, :validatable :recoverable, :rememberable, :validatable
def is_admin?
id == 1
end
end end

30
app/views/devise/passwords/new.html.erb
View File

@ -1,16 +1,16 @@
<h2>Forgot your password?</h2> <div class="login-card">
<h2 class="login-heading">Forgot your password?</h2>
<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %> <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %> <%= render "devise/shared/error_messages", resource: resource %>
<div class="field">
<div class="field"> <%= f.label :email %><br />
<%= f.label :email %><br /> <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
<%= f.email_field :email, autofocus: true, autocomplete: "email" %> </div>
<div class="actions">
<%= f.submit "Send me reset password instructions" %>
</div>
<% end %>
<div style="margin-top: 1.5em;">
<%= render "devise/shared/links" %>
</div> </div>
</div>
<div class="actions">
<%= f.submit "Send me reset password instructions" %>
</div>
<% end %>
<%= render "devise/shared/links" %>

54
app/views/devise/registrations/new.html.erb
View File

@ -1,29 +1,27 @@
<h2>Sign up</h2> <div class="login-card">
<h2 class="login-heading">Sign up</h2>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %> <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %> <%= render "devise/shared/error_messages", resource: resource %>
<div class="field">
<div class="field"> <%= f.label :email %><br />
<%= f.label :email %><br /> <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
<%= f.email_field :email, autofocus: true, autocomplete: "email" %> </div>
<div class="field">
<%= f.label :password %>
<% if @minimum_password_length %>
<em>(<%= @minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "new-password" %>
</div>
<div class="field">
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation, autocomplete: "new-password" %>
</div>
<div class="actions">
<%= f.submit "Sign up" %>
</div>
<% end %>
<div style="margin-top: 1.5em;">
<%= render "devise/shared/links" %>
</div> </div>
</div>
<div class="field">
<%= f.label :password %>
<% if @minimum_password_length %>
<em>(<%= @minimum_password_length %> characters minimum)</em>
<% end %><br />
<%= f.password_field :password, autocomplete: "new-password" %>
</div>
<div class="field">
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation, autocomplete: "new-password" %>
</div>
<div class="actions">
<%= f.submit "Sign up" %>
</div>
<% end %>
<%= render "devise/shared/links" %>

46
app/views/devise/sessions/new.html.erb
View File

@ -1,26 +1,28 @@
<h2>Log in</h2> <div class="login-card">
<h2 class="login-heading">Log in</h2>
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %> <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="field">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
</div>
<div class="field">
<%= f.label :password %><br />
<%= f.password_field :password, autocomplete: "current-password" %>
</div>
<% if devise_mapping.rememberable? %>
<div class="field"> <div class="field">
<%= f.check_box :remember_me %> <%= f.label :email %><br />
<%= f.label :remember_me %> <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
</div>
<div class="field">
<%= f.label :password %><br />
<%= f.password_field :password, autocomplete: "current-password" %>
</div>
<% if devise_mapping.rememberable? %>
<div class="field">
<%= f.check_box :remember_me %>
<%= f.label :remember_me %>
</div>
<% end %>
<div class="actions">
<%= f.submit "Log in" %>
</div> </div>
<% end %> <% end %>
<div style="margin-top: 1.5em;">
<div class="actions"> <%= render "devise/shared/links" %>
<%= f.submit "Log in" %>
</div> </div>
<% end %> </div>
<%= render "devise/shared/links" %>

17
app/views/home/index.html.erb
View File

@ -1,17 +0,0 @@
<div style="display: flex; justify-content: flex-end; margin-bottom: 1.5em;">
<%= link_to 'Statistics Dashboard', statistics_path, style: 'background: #0071e3; color: #fff; padding: 0.6em 1.5em; border-radius: 10px; text-decoration: none; font-weight: 500; font-size: 1.05em; box-shadow: 0 1px 4px rgba(0,0,0,0.05); transition: background 0.2s;'
%>
</div>
<h1>Hello, <%= @user.email %>!</h1>
<h2>Your Logins</h2>
<ul>
<% @logins.each do |login| %>
<li>
Platform: <%= login.platform %> | Last refreshed: <%= login.last_refresh_at || 'Never' %>
</li>
<% end %>
</ul>
<button disabled style="margin-top: 20px;">Add New Login (Coming Soon)</button>

19
app/views/layouts/_header.html.erb Normal file
View File

@ -0,0 +1,19 @@
<header class="site-header">
<div class="logo">
<a href="/" style="display: flex; align-items: center; gap: 0.5em; text-decoration: none;">
<img src="/plays_hub_logo.svg" alt="Plays Hub Logo" width="64" height="64" style="display: inline-block; vertical-align: middle;" />
<span style="font-weight: bold; font-size: 1.4em; color: #0071e3;">Plays Hub</span>
</a>
</div>
<% if user_signed_in? %>
<nav>
<a href="/statistics">Statistics</a>
<%= button_to "Logout", destroy_user_session_path, method: :delete, class: "logout-btn logout-link-btn", form: {style: 'display:inline'} %>
</nav>
<% else %>
<nav>
<a href="/users/sign_in">Login</a>
<a href="/users/sign_up">Sign up</a>
</nav>
<% end %>
</header>

1
app/views/layouts/application.html.erb
View File

@ -23,6 +23,7 @@
</head> </head>
<body> <body>
<%= render partial: 'layouts/header' %>
<%= yield %> <%= yield %>
<% if notice %> <% if notice %>
<p class="notice"><%= notice %></p> <p class="notice"><%= notice %></p>

2
app/views/statistics/_activity_heatmap.html.erb
View File

@ -1,4 +1,4 @@
<div style="background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 2em 2.5em; margin: 2em 0 2.5em 0; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto;"> <div style="background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 2em 2.5em; margin: 2em 0 2.5em 0; width: 100%; max-width: 1110px; margin-left: auto; margin-right: auto;">
<h2 style="margin-top:0; font-size: 1.4em; color: #0071e3;">Activity History</h2> <h2 style="margin-top:0; font-size: 1.4em; color: #0071e3;">Activity History</h2>
<div id="activity-heatmap" style="margin-top: 1em;"></div> <div id="activity-heatmap" style="margin-top: 1em;"></div>
<script> <script>

12
app/views/statistics/_longest_streak.html.erb Normal file
View File

@ -0,0 +1,12 @@
<div class="dashboard-widget dashboard-longest-streak">
<% if streak %>
<h3 class="widget-title">Longest Listening Streak</h3>
<div class="widget-content">
<div><strong>Streak:</strong> <%= streak[:length] %> days (<%= streak[:start_date].strftime('%b %d, %Y') %> – <%= streak[:end_date].strftime('%b %d, %Y') %>)</div>
<div><strong>Total Plays:</strong> <%= streak[:total_plays] %></div>
<div><strong>Most Played Song:</strong> <%= streak[:most_played_song] || 'N/A' %> <%= "(#{streak[:most_played_song_count]} plays)" if streak[:most_played_song] %></div>
</div>
<% else %>
<div style="color: #888;">No listening streak yet. Start playing to build your first streak!</div>
<% end %>
</div>

3
app/views/statistics/_placeholder.html.erb
View File

@ -1,3 +0,0 @@
<div style="background: #fff; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 2em 2.5em; color: #888; display: flex; align-items: center; justify-content: center; min-height: 100px;">
<span>(Placeholder widget)</span>
</div>

5
app/views/statistics/_total_plays.html.erb
View File

@ -4,8 +4,11 @@
<%= @total_plays %> <%= @total_plays %>
</div> </div>
<% if defined?(@since_date) && @since_date.present? %> <% if defined?(@since_date) && @since_date.present? %>
<div style="margin-top: 0.8em; color: #888; font-size: 1em; font-weight: 400;"> <div style="margin-top: 0.4em; color: #888; font-size: 1em; font-weight: 400;">
since <%= @since_date.strftime('%b %-d, %Y') %> since <%= @since_date.strftime('%b %-d, %Y') %>
</div> </div>
<% end %> <% end %>
<div class="widget-content" style="margin-top: 1.2em;">
<strong>This year:</strong> <%= @year_plays %> plays
</div>
</div> </div>

6
app/views/statistics/index.html.erb
View File

@ -1,5 +1,5 @@
<main> <main>
<h1>Statistics Dashboard</h1> <h1>Statistics Dashboard - <%= current_user.email %></h1>
<%= javascript_include_tag 'activity_heatmap', 'data-turbo-track': 'reload' %> <%= javascript_include_tag 'activity_heatmap', 'data-turbo-track': 'reload' %>
<!-- Activity Heatmap (full width) --> <!-- Activity Heatmap (full width) -->
@ -10,11 +10,11 @@
<!-- Top 5 Artists Widget --> <!-- Top 5 Artists Widget -->
<%= render partial: 'statistics/top_artists', locals: { top_artists_all_time: @top_artists_all_time, top_artists_year: @top_artists_year, top_artists_upcoming: @top_artists_upcoming } %> <%= render partial: 'statistics/top_artists', locals: { top_artists_all_time: @top_artists_all_time, top_artists_year: @top_artists_year, top_artists_upcoming: @top_artists_upcoming } %>
<!-- Right column: Total Plays + Placeholder stacked --> <!-- Right column: Total Plays + Placeholder stacked -->
<div style="display: flex; flex-direction: column; gap: 2em; flex: 1 1 220px; min-width: 220px; max-width: 320px; align-self: flex-start;"> <div style="display: flex; flex-direction: column; gap: 2em; flex: 1 1 220px; min-width: 220px; max-width: 620px; align-self: flex-start;">
<!-- Total Plays Widget --> <!-- Total Plays Widget -->
<%= render partial: 'statistics/total_plays', locals: { total_plays: @total_plays } %> <%= render partial: 'statistics/total_plays', locals: { total_plays: @total_plays } %>
<!-- Placeholder Widget --> <!-- Placeholder Widget -->
<%= render partial: 'statistics/placeholder' %> <%= render partial: 'statistics/longest_streak', locals: { streak: @streak } %>
</div> </div>
</div> </div>
</main> </main>

3
config/routes.rb
View File

@ -11,7 +11,6 @@ Rails.application.routes.draw do
# get "service-worker" => "rails/pwa#service_worker", as: :pwa_service_worker # get "service-worker" => "rails/pwa#service_worker", as: :pwa_service_worker
# Defines the root path route ("/") # Defines the root path route ("/")
root "home#index" root "statistics#index"
get "statistics", to: "statistics#index", as: :statistics get "statistics", to: "statistics#index", as: :statistics
end end

18
public/plays_hub_logo.svg Normal file
View File

@ -0,0 +1,18 @@
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="liquidGreen" cx="50%" cy="40%" r="70%" fx="60%" fy="30%">
<stop offset="0%" stop-color="#A8FFC5"/>
<stop offset="70%" stop-color="#7EE8B9"/>
<stop offset="100%" stop-color="#6AD1A5"/>
</radialGradient>
<filter id="goo" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"/>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 12 -5" result="goo"/>
<feBlend in="SourceGraphic" in2="goo" mode="normal"/>
</filter>
</defs>
<!-- Liquid blob background -->
<path filter="url(#goo)" d="M40 8c12 0 23 7 27 17 4 10-2 23-10 31s-21 12-32 7c-11-5-18-17-15-28C14 15 28 8 40 8z" fill="url(#liquidGreen)"/>
<!-- Play triangle -->
<polygon points="34,27 34,53 54,40" fill="#fff" style="filter: drop-shadow(0 2px 6px #7EE8B9aa)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB