finish activity ui
parent
e79626972f
commit
7c14e469c9
|
@ -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>
|
After Width: | Height: | Size: 1.0 KiB |
|
@ -14,8 +14,200 @@ main {
|
|||
padding-left: 3vw;
|
||||
padding-right: 3vw;
|
||||
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) {
|
||||
main {
|
||||
padding-left: 1vw;
|
||||
|
@ -77,7 +269,6 @@ button {
|
|||
font-weight: 600;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.7;
|
||||
margin-top: 2em;
|
||||
transition: background 0.2s, opacity 0.2s;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
letter-spacing: 0.2px;
|
||||
|
|
|
@ -1,8 +0,0 @@
|
|||
class HomeController < ApplicationController
|
||||
before_action :authenticate_user!
|
||||
|
||||
def index
|
||||
@user = current_user
|
||||
@logins = Login.where(user: @user)
|
||||
end
|
||||
end
|
|
@ -4,10 +4,12 @@ class StatisticsController < ApplicationController
|
|||
def index
|
||||
stats = Statistics.new(current_user)
|
||||
@total_plays = stats.total_plays
|
||||
@year_plays = stats.total_plays_year
|
||||
@activity_by_day = stats.activity_by_day
|
||||
@top_artists_all_time = stats.top_artists_all_time
|
||||
@top_artists_year = stats.top_artists_year
|
||||
@top_artists_upcoming = stats.top_artists_upcoming
|
||||
@since_date = stats.since_date
|
||||
@streak = stats.longest_streak
|
||||
end
|
||||
end
|
||||
|
|
|
@ -9,6 +9,11 @@ class Statistics
|
|||
Activity.where(user: user).count
|
||||
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
|
||||
start_date = 1.year.ago.to_date
|
||||
end_date = Date.today
|
||||
|
@ -37,4 +42,37 @@ class Statistics
|
|||
def since_date
|
||||
Activity.where(user: user).order(:created_at).limit(1).pick(:created_at)
|
||||
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
|
||||
|
|
|
@ -3,4 +3,8 @@ class User < ApplicationRecord
|
|||
# :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
|
||||
devise :database_authenticatable, :registerable,
|
||||
:recoverable, :rememberable, :validatable
|
||||
|
||||
def is_admin?
|
||||
id == 1
|
||||
end
|
||||
end
|
||||
|
|
|
@ -1,16 +1,16 @@
|
|||
<h2>Forgot your password?</h2>
|
||||
|
||||
<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
|
||||
<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| %>
|
||||
<%= render "devise/shared/error_messages", resource: resource %>
|
||||
|
||||
<div class="field">
|
||||
<%= f.label :email %><br />
|
||||
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<%= f.submit "Send me reset password instructions" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= render "devise/shared/links" %>
|
||||
<% end %>
|
||||
<div style="margin-top: 1.5em;">
|
||||
<%= render "devise/shared/links" %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,13 +1,11 @@
|
|||
<h2>Sign up</h2>
|
||||
|
||||
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
|
||||
<div class="login-card">
|
||||
<h2 class="login-heading">Sign up</h2>
|
||||
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
|
||||
<%= render "devise/shared/error_messages", resource: resource %>
|
||||
|
||||
<div class="field">
|
||||
<%= f.label :email %><br />
|
||||
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<%= f.label :password %>
|
||||
<% if @minimum_password_length %>
|
||||
|
@ -15,15 +13,15 @@
|
|||
<% 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" %>
|
||||
<% end %>
|
||||
<div style="margin-top: 1.5em;">
|
||||
<%= render "devise/shared/links" %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<h2>Log in</h2>
|
||||
|
||||
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
|
||||
<div class="login-card">
|
||||
<h2 class="login-heading">Log in</h2>
|
||||
<%= 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" %>
|
||||
|
@ -21,6 +21,8 @@
|
|||
<div class="actions">
|
||||
<%= f.submit "Log in" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= render "devise/shared/links" %>
|
||||
<% end %>
|
||||
<div style="margin-top: 1.5em;">
|
||||
<%= render "devise/shared/links" %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -23,6 +23,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<%= render partial: 'layouts/header' %>
|
||||
<%= yield %>
|
||||
<% if notice %>
|
||||
<p class="notice"><%= notice %></p>
|
||||
|
|
|
@ -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>
|
||||
<div id="activity-heatmap" style="margin-top: 1em;"></div>
|
||||
<script>
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -4,8 +4,11 @@
|
|||
<%= @total_plays %>
|
||||
</div>
|
||||
<% 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') %>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="widget-content" style="margin-top: 1.2em;">
|
||||
<strong>This year:</strong> <%= @year_plays %> plays
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<main>
|
||||
<h1>Statistics Dashboard</h1>
|
||||
<h1>Statistics Dashboard - <%= current_user.email %></h1>
|
||||
<%= javascript_include_tag 'activity_heatmap', 'data-turbo-track': 'reload' %>
|
||||
|
||||
<!-- Activity Heatmap (full width) -->
|
||||
|
@ -10,11 +10,11 @@
|
|||
<!-- 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 } %>
|
||||
<!-- 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 -->
|
||||
<%= render partial: 'statistics/total_plays', locals: { total_plays: @total_plays } %>
|
||||
<!-- Placeholder Widget -->
|
||||
<%= render partial: 'statistics/placeholder' %>
|
||||
<%= render partial: 'statistics/longest_streak', locals: { streak: @streak } %>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
@ -11,7 +11,6 @@ Rails.application.routes.draw do
|
|||
# get "service-worker" => "rails/pwa#service_worker", as: :pwa_service_worker
|
||||
|
||||
# Defines the root path route ("/")
|
||||
root "home#index"
|
||||
root "statistics#index"
|
||||
get "statistics", to: "statistics#index", as: :statistics
|
||||
|
||||
end
|
||||
|
|
|
@ -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>
|
After Width: | Height: | Size: 1.0 KiB |
Loading…
Reference in New Issue