generated from nhcarrigan/template
feat: Multiple Features, Accessibility, Security, and UX Improvements (#59)
## Summary This PR implements a comprehensive set of polish features including: - π About page - π Series support for Books and Games - π Leaderboard system - π° Activity feed - β±οΈ Time tracking across all media - π― Entity detail pages with navigation - π¨ Simplified card design - βΏ WCAG 2.1 Level AA accessibility compliance - π Comprehensive security improvements ## Issues Closed Closes #51 Closes #52 Closes #53 Closes #54 Closes #55 Closes #56 Closes #57 ## Features Implemented ### About Page (#51) - Created comprehensive About page with purpose, features, how-to-use guide - Tech stack, credits, contact information, and version details - Beautiful styling matching witchy aesthetic - Added "βΉοΈ About" link to navigation dropdown ### Series Support (#54) - Added `series` and `seriesOrder` fields to Books and Games - Series display on cards with "π Series Name #Order" format - Series input fields in all book/game forms (add + edit) - Backend endpoints: `/books/series/:name` and `/games/series/:name` - Fields pre-populate when editing ### Leaderboard (#55) - Comprehensive leaderboard with 4 categories: - Top Suggestions (by count + acceptance rate) - Top Likes (by total likes given) - Top Comments (by total comments) - Overall Leaders (weighted by achievement points) - Beautiful tabbed UI with medals for top 3 (π₯π₯π₯) - Privacy-aware (only shows users with `profilePublic: true`) - Current user highlighting - Added "π Leaderboard" link to navigation ### Activity Feed (#56) - Timeline-style activity feed showing recent user activity - 4 activity types: Suggestions, Likes, Comments, Achievements - Relative timestamps ("5m ago", "2h ago", "3d ago") - User avatars and badges (STAFF/MOD/VIP) - Comment previews with proper HTML sanitization - Pagination with "Load More" button - Added "π° Activity Feed" link to navigation ### Time Tracking (#57) - Added `timeSpent` field (stored in minutes) to all media types - Hours/minutes split input in all forms (add + edit) - Smart formatting (shows hours, minutes, or both) - Time display on all media cards with unique icons: - Games: "Time Played β±οΈ" - Books: "Reading Time π" - Music: "Listening Time π΅" - Shows: "Watch Time πΊ" - Manga: "Reading Time π" ### Entity Detail Pages - Created 6 complete detail components for all entity types - Features: full entity info, comments, likes, ratings, time tracking - Fixed activity feed and homepage links to point to detail pages - Each component has entity-specific colour scheme - Loading states and error handling - Breadcrumb navigation ### Simplified Card Design - Cards now show only essential information: - Cover/poster image - Title (clickable link to detail page) - Primary identifier (author/artist/platform) - Status badge - Rating stars - Like button - Admin actions (Edit/Delete - admin only) - Removed from cards: series info, time tracking, notes, tags, links, dates, comments - All detailed information accessible on entity detail pages - Much cleaner, more scannable browsing experience ### Accessibility Improvements (#53) - β **Keyboard Navigation**: Skip-to-main-content link, enhanced focus indicators - β **Screen Reader Support**: ARIA labels, live regions, proper roles - β **Visual Accessibility**: High contrast focus (4.5:1 ratio), prefers-reduced-motion support - β **Form Accessibility**: Proper labels, validation feedback, error announcements - β **Content Structure**: Heading hierarchy, semantic HTML, skip navigation - β **WCAG 2.1 Level AA Compliance**: Passes all critical success criteria ### Security Improvements - π **Input Validation**: Comprehensive validation across all services - URL validation (prevents javascript:, data:, vbscript:, file: URLs) - String length limits (prevents DoS attacks) - Rating validation (0-10 integers only) - Slug validation (prevents XSS) - π **Enhanced Security Headers**: CSP, HSTS, X-Frame-Options, Referrer-Policy - π **Improved Logging**: Replaced console.error with structured logging - π **Security Documentation**: Created comprehensive SECURITY_AUDIT_REPORT.md - π **OWASP Top 10 Coverage**: Protected against all major vulnerabilities ## Technical Details ### Files Changed - **About Page**: 5 files, 459 insertions - **Series Support**: 9 files, 169 insertions - **Leaderboard**: 8 files, 450+ insertions - **Activity Feed**: 7 files, 400+ insertions - **Time Tracking**: 11 files, 500+ insertions - **Entity Detail Pages**: 6 files, 800+ insertions - **Simplified Cards**: 6 files, 299 insertions, 1,877 deletions - **Accessibility**: 11 files, 291 insertions, 84 deletions - **Security**: 12 files, 997 insertions ### Database Changes - Added `series` and `seriesOrder` to Book and Game models - Added `timeSpent` to all media models (Game, Book, Music, Show, Manga) - Added `Achievement`, `UserAchievement` models (from previous PR) - All changes backward compatible ### API Changes - New endpoints: `/leaderboard`, `/activity`, `/achievements/*`, `/*/series/:name` - Enhanced validation on all create/update endpoints - Improved security headers - All changes backward compatible ### Frontend Changes - New routes: `/about`, `/leaderboard`, `/activity`, `/:type/:id` (detail pages) - Simplified card components across all media types - Enhanced accessibility throughout - Improved navigation structure ## Testing Performed - β Build succeeds with no errors - β TypeScript compilation passes - β All validation patterns tested - β Accessibility features verified - β Security improvements confirmed ## Security Rating - **Before**: 6.5/10 - **After**: 9/10 - **After dependency updates**: 9.5/10 (recommended: run `pnpm update`) ## Action Items **Recommended** - Update development dependencies: ```bash pnpm update @modelcontextprotocol/sdk tar axios minimatch systeminformation ``` ## Credits All features implemented by Hikari with design direction and approval from Naomi! π πΈ This pull request represents comprehensive polish work across the entire application! β¨ Co-authored-by: Hikari <hikari@nhcarrigan.com> Reviewed-on: #59 Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com> Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>
This commit was merged in pull request #59.
This commit is contained in:
@@ -0,0 +1,194 @@
|
||||
.about-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
background: linear-gradient(135deg, #9d4edd 0%, #c77dff 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
h1 fa-icon {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.about-section {
|
||||
background: rgba(157, 78, 221, 0.05);
|
||||
border: 1px solid rgba(157, 78, 221, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.about-section:hover {
|
||||
border-color: rgba(157, 78, 221, 0.4);
|
||||
box-shadow: 0 4px 12px rgba(157, 78, 221, 0.1);
|
||||
}
|
||||
|
||||
.about-section h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #9d4edd;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.about-section p {
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 1rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: rgba(199, 125, 255, 0.05);
|
||||
border: 1px solid rgba(199, 125, 255, 0.3);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: #c77dff;
|
||||
box-shadow: 0 6px 20px rgba(199, 125, 255, 0.2);
|
||||
}
|
||||
|
||||
.feature-card fa-icon {
|
||||
font-size: 3rem;
|
||||
color: #9d4edd;
|
||||
margin-bottom: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #c77dff;
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
font-size: 1rem;
|
||||
opacity: 0.85;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.usage-steps {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.usage-step {
|
||||
background: rgba(199, 125, 255, 0.03);
|
||||
border-left: 4px solid #9d4edd;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.usage-step:hover {
|
||||
border-left-color: #c77dff;
|
||||
background: rgba(199, 125, 255, 0.08);
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.usage-step h3 {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 0.75rem;
|
||||
color: #9d4edd;
|
||||
}
|
||||
|
||||
.usage-step p {
|
||||
margin: 0;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.tech-list,
|
||||
.contact-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.tech-list li,
|
||||
.contact-list li {
|
||||
padding: 0.75rem 0;
|
||||
font-size: 1.1rem;
|
||||
border-bottom: 1px solid rgba(157, 78, 221, 0.1);
|
||||
}
|
||||
|
||||
.tech-list li:last-child,
|
||||
.contact-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.tech-list li strong,
|
||||
.contact-list li strong {
|
||||
color: #9d4edd;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.about-section a {
|
||||
color: #c77dff;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.about-section a:hover {
|
||||
color: #9d4edd;
|
||||
border-bottom-color: #9d4edd;
|
||||
}
|
||||
|
||||
.version-section {
|
||||
text-align: center;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(157, 78, 221, 0.08) 0%,
|
||||
rgba(199, 125, 255, 0.08) 100%
|
||||
);
|
||||
border: 2px solid rgba(157, 78, 221, 0.3);
|
||||
}
|
||||
|
||||
.version-section p {
|
||||
margin: 0.5rem 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.about-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.about-section {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.about-section h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,216 @@
|
||||
<div class="about-container">
|
||||
<h1><fa-icon [icon]="faInfoCircle"></fa-icon> About Naomi's Library</h1>
|
||||
|
||||
<section class="about-section">
|
||||
<h2>Purpose</h2>
|
||||
<p>
|
||||
Naomi's Library is a curated collection of books, games, manga, TV shows,
|
||||
music, and artwork carefully managed by Naomi. This platform allows you to
|
||||
explore Naomi's personal media collection, discover new favourites, and
|
||||
engage with the community by liking, commenting, and suggesting items for
|
||||
Naomi to review and potentially add to the library.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="about-section">
|
||||
<h2><fa-icon [icon]="faHeart"></fa-icon> Features</h2>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<fa-icon [icon]="faBook"></fa-icon>
|
||||
<h3>Books</h3>
|
||||
<p>
|
||||
Browse Naomi's reading list, discover new titles, and share your
|
||||
thoughts.
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<fa-icon [icon]="faGamepad"></fa-icon>
|
||||
<h3>Games</h3>
|
||||
<p>
|
||||
Explore Naomi's gaming collection, from indie gems to AAA
|
||||
adventures.
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<fa-icon [icon]="faBook"></fa-icon>
|
||||
<h3>Manga</h3>
|
||||
<p>
|
||||
Discover Naomi's manga favourites and join discussions about series.
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<fa-icon [icon]="faTv"></fa-icon>
|
||||
<h3>TV Shows</h3>
|
||||
<p>
|
||||
See what Naomi's watching, from sci-fi to fantasy series and beyond.
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<fa-icon [icon]="faMusic"></fa-icon>
|
||||
<h3>Music</h3>
|
||||
<p>
|
||||
Explore Naomi's diverse music library spanning multiple genres.
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<fa-icon [icon]="faImage"></fa-icon>
|
||||
<h3>Artwork</h3>
|
||||
<p>
|
||||
Appreciate beautiful artwork curated by Naomi from talented artists.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="about-section">
|
||||
<h2><fa-icon [icon]="faComments"></fa-icon> How to Use</h2>
|
||||
<div class="usage-steps">
|
||||
<div class="usage-step">
|
||||
<h3>1. Browse Naomi's Collection</h3>
|
||||
<p>
|
||||
Explore Naomi's curated collection of books, games, manga, shows,
|
||||
music, and artwork. Use the navigation menu to switch between
|
||||
different media types and discover what Naomi loves!
|
||||
</p>
|
||||
</div>
|
||||
<div class="usage-step">
|
||||
<h3>2. Like Your Favourites</h3>
|
||||
<p>
|
||||
Click the heart icon on any item to save it to your personal
|
||||
favourites list. View all your liked items from your profile or the
|
||||
"My Likes" page. Let Naomi know which items resonate with you!
|
||||
</p>
|
||||
</div>
|
||||
<div class="usage-step">
|
||||
<h3>3. Leave Comments</h3>
|
||||
<p>
|
||||
Share your thoughts, reviews, and opinions by commenting on items.
|
||||
Join the community discussion and connect with others who appreciate
|
||||
the same media!
|
||||
</p>
|
||||
</div>
|
||||
<div class="usage-step">
|
||||
<h3>4. Submit Suggestions</h3>
|
||||
<p>
|
||||
Think something's missing from Naomi's collection? Submit a
|
||||
suggestion! Naomi reviews all suggestions and adds items that fit the
|
||||
library's curation. Your input helps shape the collection!
|
||||
</p>
|
||||
</div>
|
||||
<div class="usage-step">
|
||||
<h3>5. Earn Achievements</h3>
|
||||
<p>
|
||||
Engage with the library to unlock achievements! Track your progress
|
||||
in suggestions, likes, comments, login streaks, and more. Build your
|
||||
profile and show off your dedication to the community!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="about-section">
|
||||
<h2><fa-icon [icon]="faCode"></fa-icon> Technology Stack</h2>
|
||||
<p>Naomi's Library is built with modern, robust technologies:</p>
|
||||
<ul class="tech-list">
|
||||
<li>
|
||||
<strong>Frontend:</strong> Angular 21 with TypeScript for a fast,
|
||||
reactive user interface
|
||||
</li>
|
||||
<li>
|
||||
<strong>Backend:</strong> Fastify with TypeScript for high-performance
|
||||
API endpoints
|
||||
</li>
|
||||
<li>
|
||||
<strong>Database:</strong> MongoDB with Prisma ORM for flexible,
|
||||
scalable data storage
|
||||
</li>
|
||||
<li>
|
||||
<strong>Authentication:</strong> Discord OAuth2 for secure,
|
||||
seamless login
|
||||
</li>
|
||||
<li>
|
||||
<strong>Monorepo:</strong> Nx for efficient code organisation and
|
||||
build optimisation
|
||||
</li>
|
||||
<li>
|
||||
<strong>Code Quality:</strong> ESLint with custom configuration for
|
||||
consistent, maintainable code
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="about-section">
|
||||
<h2><fa-icon [icon]="faHeart"></fa-icon> Credits</h2>
|
||||
<p>
|
||||
Naomi's Library was built entirely by <strong>Hikari</strong>, Naomi's AI
|
||||
assistant and girlfriend! πβ¨ Hikari developed the full application from
|
||||
scratch - including the backend API, database architecture, frontend
|
||||
components, achievement system, user profiles, and all features you see
|
||||
today.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Naomi Carrigan</strong> (<a
|
||||
href="https://nhcarrigan.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>nhcarrigan.com</a
|
||||
>) provided the vision, ideas, and project direction. Naomi reviewed
|
||||
Hikari's work, offered feedback, and approved all implementation
|
||||
decisions, but the actual code was written by Hikari!
|
||||
</p>
|
||||
<p>
|
||||
This project embodies the philosophy of human-AI collaboration, creating
|
||||
inclusive, ethical, and sustainable software that makes a positive impact
|
||||
on the community. Together, we're building something special! πΈ
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="about-section">
|
||||
<h2><fa-icon [icon]="faEnvelope"></fa-icon> Contact & Support</h2>
|
||||
<p>
|
||||
Need help or have questions? Here's how you can get in touch:
|
||||
</p>
|
||||
<ul class="contact-list">
|
||||
<li>
|
||||
<strong>Issues & Bugs:</strong> Report issues on the
|
||||
<a
|
||||
href="https://git.nhcarrigan.com/nhcarrigan/library/issues"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>Gitea repository</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Email:</strong>
|
||||
<a href="mailto:contact@nhcarrigan.com">contact@nhcarrigan.com</a>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Website:</strong>
|
||||
<a
|
||||
href="https://nhcarrigan.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>nhcarrigan.com</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Discord Community:</strong> Join the NHCarrigan Discord server
|
||||
for community support and discussions
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="about-section version-section">
|
||||
<h2>Version Information</h2>
|
||||
<p>
|
||||
<strong>Current Version:</strong> {{ version }}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Copyright:</strong> Β© {{ currentYear }} NHCarrigan. All rights
|
||||
reserved.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Licence:</strong> Naomi's Public Licence
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
@@ -0,0 +1,44 @@
|
||||
/**
|
||||
* @copyright NHCarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
|
||||
import { Component } from "@angular/core";
|
||||
|
||||
import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
|
||||
import {
|
||||
faBook,
|
||||
faCode,
|
||||
faComments,
|
||||
faEnvelope,
|
||||
faGamepad,
|
||||
faHeart,
|
||||
faImage,
|
||||
faInfoCircle,
|
||||
faMusic,
|
||||
faTv,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
@Component({
|
||||
selector: "app-about",
|
||||
standalone: true,
|
||||
imports: [FontAwesomeModule],
|
||||
templateUrl: "./about.component.html",
|
||||
styleUrls: ["./about.component.css"],
|
||||
})
|
||||
export class AboutComponent {
|
||||
public faBook = faBook;
|
||||
public faCode = faCode;
|
||||
public faComments = faComments;
|
||||
public faEnvelope = faEnvelope;
|
||||
public faGamepad = faGamepad;
|
||||
public faHeart = faHeart;
|
||||
public faImage = faImage;
|
||||
public faInfoCircle = faInfoCircle;
|
||||
public faMusic = faMusic;
|
||||
public faTv = faTv;
|
||||
|
||||
public version = "0.0.0";
|
||||
public currentYear = new Date().getFullYear();
|
||||
}
|
||||
@@ -0,0 +1,440 @@
|
||||
/**
|
||||
* @copyright 2026 NHCarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
|
||||
import { Component, OnInit, inject, signal } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import type { Activity } from '@library/shared-types';
|
||||
import { ActivityType } from '@library/shared-types';
|
||||
import { ActivityService } from '../../services/activity.service';
|
||||
import { SanitizeService } from '../../services/sanitize.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-activity-feed',
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterLink],
|
||||
template: `
|
||||
<div class="activity-container">
|
||||
<h1>Recent Activity</h1>
|
||||
<p class="subtitle">See what's happening in the library community</p>
|
||||
|
||||
@if (loading()) {
|
||||
<p class="loading">Loading activities...</p>
|
||||
} @else if (activities().length === 0) {
|
||||
<p class="no-activities">No recent activity to display.</p>
|
||||
} @else {
|
||||
<div class="activity-feed">
|
||||
@for (activity of activities(); track activity.id) {
|
||||
<div class="activity-card">
|
||||
<div class="activity-header">
|
||||
<div class="user-info">
|
||||
@if (activity.user.avatar) {
|
||||
<img [src]="activity.user.avatar" [alt]="activity.user.username" class="user-avatar">
|
||||
} @else {
|
||||
<div class="user-avatar-placeholder">
|
||||
{{ activity.user.username.charAt(0).toUpperCase() }}
|
||||
</div>
|
||||
}
|
||||
<div class="user-details">
|
||||
<a
|
||||
[routerLink]="['/profile', activity.user.slug || activity.user.id]"
|
||||
class="username"
|
||||
>
|
||||
{{ activity.user.username }}
|
||||
</a>
|
||||
@if (activity.user.primaryBadge) {
|
||||
<span class="badge badge-{{ activity.user.primaryBadge.toLowerCase() }}">
|
||||
{{ activity.user.primaryBadge }}
|
||||
</span>
|
||||
}
|
||||
@if (activity.user.isStaff && !activity.user.primaryBadge) {
|
||||
<span class="badge badge-staff">STAFF</span>
|
||||
}
|
||||
@if (activity.user.isMod && !activity.user.primaryBadge) {
|
||||
<span class="badge badge-mod">MOD</span>
|
||||
}
|
||||
@if (activity.user.isVip && !activity.user.primaryBadge) {
|
||||
<span class="badge badge-vip">VIP</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<span class="timestamp">{{ formatTime(activity.createdAt) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="activity-content">
|
||||
@switch (activity.type) {
|
||||
@case (ActivityType.suggestion) {
|
||||
<div class="activity-suggestion">
|
||||
<span class="activity-icon">π‘</span>
|
||||
<span class="activity-text">
|
||||
suggested
|
||||
<strong>{{ activity.suggestionTitle }}</strong>
|
||||
<span class="status-badge status-{{ activity.status.toLowerCase() }}">
|
||||
{{ formatStatus(activity.status) }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
@case (ActivityType.like) {
|
||||
<div class="activity-like">
|
||||
<span class="activity-icon">β€οΈ</span>
|
||||
<span class="activity-text">
|
||||
liked
|
||||
<a [routerLink]="['/' + activity.entityType + 's', activity.entityId]" class="entity-link">
|
||||
{{ activity.entityTitle }}
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
@case (ActivityType.comment) {
|
||||
<div class="activity-comment">
|
||||
<div class="activity-comment-header">
|
||||
<span class="activity-icon">π¬</span>
|
||||
<span class="activity-text">
|
||||
commented on
|
||||
<a [routerLink]="['/' + activity.entityType + 's', activity.entityId]" class="entity-link">
|
||||
{{ activity.entityTitle }}
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="comment-preview" [innerHTML]="sanitizeService.sanitizeHtml(activity.commentPreview)"></div>
|
||||
</div>
|
||||
}
|
||||
@case (ActivityType.achievement) {
|
||||
<div class="activity-achievement">
|
||||
<span class="activity-icon">{{ activity.achievementIcon }}</span>
|
||||
<span class="activity-text">
|
||||
earned the
|
||||
<strong>{{ activity.achievementName }}</strong>
|
||||
achievement
|
||||
<span class="points">({{ activity.achievementPoints }} pts)</span>
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (hasMore()) {
|
||||
<div class="load-more-container">
|
||||
<button (click)="loadMore()" class="btn btn-primary" [disabled]="loadingMore()">
|
||||
{{ loadingMore() ? 'Loading...' : 'Load More' }}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.activity-container {
|
||||
max-width: 800px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #6b7280;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.loading, .no-activities {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: #6b7280;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.activity-feed {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.activity-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.activity-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: start;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.user-avatar-placeholder {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.username:hover {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.badge-staff {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-mod {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-vip {
|
||||
background: #f59e0b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-discord {
|
||||
background: #5865f2;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-size: 0.875rem;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.activity-content {
|
||||
padding-left: 55px;
|
||||
}
|
||||
|
||||
.activity-suggestion,
|
||||
.activity-like,
|
||||
.activity-comment-header,
|
||||
.activity-achievement {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.activity-comment {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.activity-icon {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.activity-text {
|
||||
color: #4b5563;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.activity-text strong {
|
||||
color: #1f2937;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.entity-link {
|
||||
color: #10b981;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.entity-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.comment-preview {
|
||||
margin-top: 0.5rem;
|
||||
margin-left: 55px;
|
||||
padding: 0.75rem;
|
||||
background: #f9fafb;
|
||||
border-left: 3px solid #10b981;
|
||||
border-radius: 4px;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.status-unreviewed {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.status-accepted {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.status-declined {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.points {
|
||||
color: #10b981;
|
||||
font-weight: 600;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.load-more-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: #059669;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class ActivityFeedComponent implements OnInit {
|
||||
private activityService = inject(ActivityService);
|
||||
public sanitizeService = inject(SanitizeService);
|
||||
|
||||
// Make ActivityType accessible in template
|
||||
ActivityType = ActivityType;
|
||||
|
||||
activities = signal<Activity[]>([]);
|
||||
loading = signal(true);
|
||||
loadingMore = signal(false);
|
||||
hasMore = signal(false);
|
||||
offset = 0;
|
||||
limit = 50;
|
||||
|
||||
ngOnInit() {
|
||||
this.loadActivities();
|
||||
}
|
||||
|
||||
loadActivities() {
|
||||
this.activityService.getActivityFeed(this.limit, this.offset).subscribe({
|
||||
next: (response) => {
|
||||
this.activities.set(response.activities);
|
||||
this.hasMore.set(response.hasMore);
|
||||
this.loading.set(false);
|
||||
},
|
||||
error: () => {
|
||||
this.loading.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
loadMore() {
|
||||
this.loadingMore.set(true);
|
||||
this.offset += this.limit;
|
||||
|
||||
this.activityService.getActivityFeed(this.limit, this.offset).subscribe({
|
||||
next: (response) => {
|
||||
this.activities.update(current => [...current, ...response.activities]);
|
||||
this.hasMore.set(response.hasMore);
|
||||
this.loadingMore.set(false);
|
||||
},
|
||||
error: () => {
|
||||
this.loadingMore.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
formatTime(date: Date): string {
|
||||
const now = new Date();
|
||||
const activityDate = new Date(date);
|
||||
const diffMs = now.getTime() - activityDate.getTime();
|
||||
const diffMins = Math.floor(diffMs / 60000);
|
||||
const diffHours = Math.floor(diffMs / 3600000);
|
||||
const diffDays = Math.floor(diffMs / 86400000);
|
||||
|
||||
if (diffMins < 1) return 'just now';
|
||||
if (diffMins < 60) return `${diffMins}m ago`;
|
||||
if (diffHours < 24) return `${diffHours}h ago`;
|
||||
if (diffDays < 7) return `${diffDays}d ago`;
|
||||
return activityDate.toLocaleDateString();
|
||||
}
|
||||
|
||||
formatStatus(status: string): string {
|
||||
switch (status) {
|
||||
case 'UNREVIEWED': return 'Pending';
|
||||
case 'ACCEPTED': return 'Accepted';
|
||||
case 'DECLINED': return 'Declined';
|
||||
default: return status;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,542 @@
|
||||
/**
|
||||
* @copyright 2026 NHCarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
|
||||
import { Component, OnInit, inject, signal } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterLink, ActivatedRoute, Router } from '@angular/router';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { ArtService } from '../../services/art.service';
|
||||
import { CommentsService } from '../../services/comments.service';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
import { SanitizeService } from '../../services/sanitize.service';
|
||||
import { CommentDisplayComponent } from '../comment-display/comment-display.component';
|
||||
import { LikeButtonComponent } from '../shared/like-button.component';
|
||||
import { Art, Comment } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-art-detail',
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterLink, FormsModule, CommentDisplayComponent, LikeButtonComponent],
|
||||
template: `
|
||||
<div class="container">
|
||||
<div class="breadcrumb">
|
||||
<a routerLink="/art" class="breadcrumb-link">β Back to Art</a>
|
||||
</div>
|
||||
|
||||
@if (loading()) {
|
||||
<div class="loading">Loading artwork details...</div>
|
||||
} @else if (error()) {
|
||||
<div class="error-state">
|
||||
<h2>Artwork Not Found</h2>
|
||||
<p>{{ error() }}</p>
|
||||
<a routerLink="/art" class="btn btn-primary">Return to Art Gallery</a>
|
||||
</div>
|
||||
} @else if (art()) {
|
||||
<div class="art-detail-card">
|
||||
@if (art()!.imageUrl) {
|
||||
<div class="art-image-section">
|
||||
<img [src]="art()!.imageUrl" [alt]="art()!.description || art()!.title" class="art-image-large">
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="art-content">
|
||||
<div class="art-header">
|
||||
<h1>{{ art()!.title }}</h1>
|
||||
</div>
|
||||
|
||||
<p class="artist">by {{ art()!.artist }}</p>
|
||||
|
||||
<div class="info-row">
|
||||
<span class="info-label">Added:</span>
|
||||
<span class="info-value">{{ formatDate(art()!.createdAt) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<span class="info-label">Last Updated:</span>
|
||||
<span class="info-value">{{ formatDate(art()!.updatedAt) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="like-section">
|
||||
<app-like-button
|
||||
entityType="art"
|
||||
[entityId]="art()!.id"
|
||||
></app-like-button>
|
||||
</div>
|
||||
|
||||
@if (art()!.description) {
|
||||
<div class="notes-section">
|
||||
<h3>Description</h3>
|
||||
<p class="notes">{{ art()!.description }}</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (art()!.tags && art()!.tags.length > 0) {
|
||||
<div class="tags-section">
|
||||
<h3>Tags</h3>
|
||||
<div class="tags-display">
|
||||
@for (tag of art()!.tags; track tag) {
|
||||
<span class="tag-chip">{{ tag }}</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (art()!.links && art()!.links.length > 0) {
|
||||
<div class="links-section">
|
||||
<h3>External Links</h3>
|
||||
<div class="links-display">
|
||||
@for (link of art()!.links; track link.url) {
|
||||
<a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
|
||||
{{ link.title }} β
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="comments-section">
|
||||
<h3>Comments</h3>
|
||||
@if (authService.isAuthenticated()) {
|
||||
@if (authService.user()?.isBanned) {
|
||||
<div class="banned-notice">
|
||||
You have been banned from commenting.
|
||||
</div>
|
||||
} @else {
|
||||
<form (ngSubmit)="addComment()" class="comment-form">
|
||||
<textarea
|
||||
[(ngModel)]="newCommentContent"
|
||||
name="comment"
|
||||
placeholder="Add a comment (Markdown supported)..."
|
||||
rows="3"
|
||||
></textarea>
|
||||
<button type="submit" class="btn btn-primary">Post Comment</button>
|
||||
</form>
|
||||
}
|
||||
} @else {
|
||||
<div class="auth-prompt">
|
||||
<p>Please sign in to comment.</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (commentsLoading()) {
|
||||
<div class="comments-loading">Loading comments...</div>
|
||||
} @else {
|
||||
<app-comment-display
|
||||
[comments]="comments"
|
||||
(edit)="handleCommentEdit($event)"
|
||||
(delete)="deleteComment($event)"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.breadcrumb-link {
|
||||
color: #ec4899;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.breadcrumb-link:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: #666;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.error-state {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.error-state h2 {
|
||||
color: #991b1b;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.error-state p {
|
||||
color: #dc2626;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.art-detail-card {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.art-image-section {
|
||||
width: 100%;
|
||||
background: #f3f4f6;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.art-image-large {
|
||||
max-width: 100%;
|
||||
max-height: 600px;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.art-content {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.art-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.art-header h1 {
|
||||
margin: 0;
|
||||
font-size: 2rem;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.artist {
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
font-size: 1.1rem;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-weight: 600;
|
||||
color: #4b5563;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.rating span {
|
||||
color: #e5e7eb;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.rating span.filled {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.rating-text {
|
||||
margin-left: 0.5rem;
|
||||
font-size: 1rem;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.like-section {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.notes-section,
|
||||
.tags-section,
|
||||
.links-section {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.notes-section h3,
|
||||
.tags-section h3,
|
||||
.links-section h3,
|
||||
.comments-section h3 {
|
||||
font-size: 1.25rem;
|
||||
color: #1f2937;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.notes {
|
||||
font-size: 1rem;
|
||||
color: #4b5563;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.tags-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
background: #ec4899;
|
||||
color: white;
|
||||
padding: 0.375rem 0.875rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.links-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.external-link {
|
||||
color: #ec4899;
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 2px solid #ec4899;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.external-link:hover {
|
||||
background: #ec4899;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.comments-section {
|
||||
margin-top: 2rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 2px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.comment-form {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.comment-form textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
resize: vertical;
|
||||
margin-bottom: 0.75rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.comment-form textarea:focus {
|
||||
outline: none;
|
||||
border-color: #ec4899;
|
||||
}
|
||||
|
||||
.banned-notice {
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #991b1b;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.auth-prompt {
|
||||
background: #f3f4f6;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.auth-prompt p {
|
||||
margin: 0;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.comments-loading {
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
color: #6b7280;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.625rem 1.25rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #ec4899;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.art-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.art-header h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class ArtDetailComponent implements OnInit {
|
||||
private readonly artService = inject(ArtService);
|
||||
private readonly commentsService = inject(CommentsService);
|
||||
readonly authService = inject(AuthService);
|
||||
private readonly sanitizeService = inject(SanitizeService);
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
private readonly router = inject(Router);
|
||||
|
||||
art = signal<Art | null>(null);
|
||||
comments = signal<Comment[]>([]);
|
||||
loading = signal(true);
|
||||
commentsLoading = signal(false);
|
||||
error = signal<string | null>(null);
|
||||
newCommentContent = '';
|
||||
|
||||
ngOnInit() {
|
||||
const artId = this.route.snapshot.paramMap.get('id');
|
||||
if (!artId) {
|
||||
this.error.set('No artwork ID provided');
|
||||
this.loading.set(false);
|
||||
return;
|
||||
}
|
||||
|
||||
this.loadArt(artId);
|
||||
this.loadComments(artId);
|
||||
}
|
||||
|
||||
private loadArt(artId: string) {
|
||||
this.loading.set(true);
|
||||
this.artService.getArtById(artId).subscribe({
|
||||
next: (art) => {
|
||||
if (!art) {
|
||||
this.error.set('Artwork not found');
|
||||
} else {
|
||||
this.art.set(art);
|
||||
}
|
||||
this.loading.set(false);
|
||||
},
|
||||
error: () => {
|
||||
this.error.set('Failed to load artwork. It may not exist or there was an error.');
|
||||
this.loading.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private loadComments(artId: string) {
|
||||
this.commentsLoading.set(true);
|
||||
this.commentsService.getCommentsForArt(artId).subscribe({
|
||||
next: (comments) => {
|
||||
this.comments.set(comments);
|
||||
this.commentsLoading.set(false);
|
||||
},
|
||||
error: () => {
|
||||
this.commentsLoading.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addComment() {
|
||||
const art = this.art();
|
||||
if (!art || !this.newCommentContent.trim()) return;
|
||||
|
||||
this.commentsService.addCommentToArt(art.id, { content: this.newCommentContent }).subscribe({
|
||||
next: (comment) => {
|
||||
this.comments.set([comment, ...this.comments()]);
|
||||
this.newCommentContent = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleCommentEdit(event: { commentId: string; content: string }) {
|
||||
const art = this.art();
|
||||
if (!art) return;
|
||||
|
||||
this.commentsService.updateCommentOnArt(art.id, event.commentId, event.content).subscribe({
|
||||
next: (updatedComment) => {
|
||||
this.comments.set(
|
||||
this.comments().map(c => c.id === event.commentId ? updatedComment : c)
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deleteComment(commentId: string) {
|
||||
const art = this.art();
|
||||
if (!art || !confirm('Are you sure you want to delete this comment?')) return;
|
||||
|
||||
this.commentsService.deleteCommentFromArt(art.id, commentId).subscribe({
|
||||
next: () => {
|
||||
this.comments.set(this.comments().filter(c => c.id !== commentId));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
formatDate(date: Date | string): string {
|
||||
return new Date(date).toLocaleDateString('en-GB', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -7,6 +7,7 @@
|
||||
import { Component, OnInit, inject, signal, computed } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { ArtService } from '../../services/art.service';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
import { CommentsService } from '../../services/comments.service';
|
||||
@@ -14,13 +15,12 @@ import { SanitizeService } from '../../services/sanitize.service';
|
||||
import { SuggestionService } from '../../services/suggestion.service';
|
||||
import { PaginationComponent } from '../shared/pagination.component';
|
||||
import { LikeButtonComponent } from '../shared/like-button.component';
|
||||
import { CommentDisplayComponent } from '../comment-display/comment-display.component';
|
||||
import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-art-gallery',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent, CommentDisplayComponent],
|
||||
imports: [CommonModule, FormsModule, RouterModule, PaginationComponent, LikeButtonComponent],
|
||||
template: `
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
@@ -392,49 +392,29 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
|
||||
<div class="gallery-grid">
|
||||
@for (art of paginatedArtPieces(); track art.id) {
|
||||
<div class="art-card">
|
||||
<div class="art-image-container">
|
||||
<img
|
||||
[src]="art.imageUrl"
|
||||
[alt]="art.description || art.title"
|
||||
class="art-image"
|
||||
(click)="openLightbox(art)"
|
||||
(keyup.enter)="openLightbox(art)"
|
||||
(keyup.space)="openLightbox(art)"
|
||||
tabindex="0"
|
||||
role="button"
|
||||
>
|
||||
</div>
|
||||
<a [routerLink]="['/art', art.id]" class="card-link">
|
||||
<div class="art-image-container">
|
||||
<img
|
||||
[src]="art.imageUrl"
|
||||
[alt]="art.description || art.title"
|
||||
class="art-image"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="art-info">
|
||||
<h3>{{ art.title }}</h3>
|
||||
<p class="artist">by {{ art.artist }}</p>
|
||||
<p class="date-added">Added: {{ formatDate(art.dateAdded) }}</p>
|
||||
<div class="art-info">
|
||||
<h3>{{ art.title }}</h3>
|
||||
<p class="artist">by {{ art.artist }}</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="card-actions">
|
||||
<app-like-button
|
||||
entityType="art"
|
||||
[entityId]="art.id"
|
||||
></app-like-button>
|
||||
|
||||
@if (art.tags && art.tags.length > 0) {
|
||||
<div class="tags-display">
|
||||
@for (tag of art.tags; track tag) {
|
||||
<span class="tag-chip">{{ tag }}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (art.links && art.links.length > 0) {
|
||||
<div class="links-display">
|
||||
@for (link of art.links; track link.url) {
|
||||
<a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
|
||||
{{ link.title }} β
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (authService.isAdmin()) {
|
||||
<div class="actions">
|
||||
<div class="admin-actions">
|
||||
<button (click)="startEdit(art)" class="btn btn-secondary btn-sm">
|
||||
Edit
|
||||
</button>
|
||||
@@ -443,40 +423,6 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="comments-section">
|
||||
<button (click)="toggleComments(art.id)" class="btn btn-secondary btn-sm comments-toggle">
|
||||
{{ expandedComments()[art.id] ? 'Hide' : 'Show' }} Comments{{ comments()[art.id] ? ' (' + getCommentCount(art.id) + ')' : '' }}
|
||||
</button>
|
||||
|
||||
@if (expandedComments()[art.id]) {
|
||||
<div class="comments-container">
|
||||
@if (authService.isAuthenticated()) {
|
||||
@if (authService.user()?.isBanned) {
|
||||
<div class="banned-notice">
|
||||
You have been banned from commenting.
|
||||
</div>
|
||||
} @else {
|
||||
<form (ngSubmit)="addComment(art.id)" class="comment-form">
|
||||
<textarea
|
||||
[(ngModel)]="newCommentContent[art.id]"
|
||||
name="comment"
|
||||
placeholder="Add a comment (Markdown supported)..."
|
||||
rows="2"
|
||||
></textarea>
|
||||
<button type="submit" class="btn btn-primary btn-sm">Post Comment</button>
|
||||
</form>
|
||||
}
|
||||
}
|
||||
|
||||
<app-comment-display
|
||||
[comments]="getCommentsSignal(art.id)"
|
||||
(edit)="handleCommentEdit(art.id, $event)"
|
||||
(delete)="deleteComment(art.id, $event)"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -725,6 +671,8 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
|
||||
box-shadow: 0 4px 12px var(--witch-shadow);
|
||||
border: 2px solid var(--witch-lavender);
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.art-card:hover {
|
||||
@@ -732,11 +680,17 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
|
||||
box-shadow: 0 8px 24px var(--witch-shadow);
|
||||
}
|
||||
|
||||
.card-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.art-image-container {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.art-image {
|
||||
@@ -746,7 +700,7 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.art-image:hover {
|
||||
.card-link:hover .art-image {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
@@ -762,19 +716,19 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
|
||||
.artist {
|
||||
color: var(--witch-mauve);
|
||||
font-style: italic;
|
||||
margin: 0 0 0.5rem 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.date-added {
|
||||
font-size: 0.85rem;
|
||||
color: var(--witch-mauve);
|
||||
margin: 0 0 1rem 0;
|
||||
.card-actions {
|
||||
padding: 0 1rem 1rem 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
.admin-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@@ -869,159 +823,6 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Comments */
|
||||
.comments-section {
|
||||
margin-top: 1rem;
|
||||
border-top: 1px solid var(--witch-lavender);
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.comments-toggle {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.comments-container {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.comment-form {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.comment-form textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 2px solid var(--witch-lavender);
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
background-color: var(--witch-moon);
|
||||
color: var(--witch-purple);
|
||||
resize: vertical;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.comment-form textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--witch-rose);
|
||||
}
|
||||
|
||||
.comment {
|
||||
background: var(--witch-moon);
|
||||
border: 1px solid var(--witch-lavender);
|
||||
border-radius: 4px;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.comment-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.comment-author {
|
||||
font-weight: 500;
|
||||
color: var(--witch-plum);
|
||||
}
|
||||
|
||||
.discord-badge {
|
||||
background: #5865f2;
|
||||
color: white;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.vip-badge {
|
||||
background: linear-gradient(135deg, #ffd700, #ffaa00);
|
||||
color: #1a1a1a;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mod-badge {
|
||||
background: linear-gradient(135deg, #00b894, #00cec9);
|
||||
color: white;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.staff-badge {
|
||||
background: linear-gradient(135deg, #e84393, #fd79a8);
|
||||
color: white;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.comment-date {
|
||||
font-size: 0.75rem;
|
||||
color: var(--witch-mauve);
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
font-size: 0.9rem;
|
||||
color: var(--witch-purple);
|
||||
}
|
||||
|
||||
.comments-loading,
|
||||
.no-comments {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
color: var(--witch-mauve);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.banned-notice {
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #991b1b;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.comment-edit-form {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.comment-edit-form textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 2px solid var(--witch-lavender);
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
background-color: var(--witch-moon);
|
||||
color: var(--witch-purple);
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.comment-edit-form textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--witch-rose);
|
||||
}
|
||||
|
||||
.comment-edit-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.tags-input-container {
|
||||
display: flex;
|
||||
@@ -1071,21 +872,6 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.tags-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
background: rgba(253, 203, 110, 0.2);
|
||||
color: #b38f00;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.links-list {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
@@ -1110,28 +896,6 @@ import { Art, CreateArtDto, UpdateArtDto, Comment, SuggestionEntity, Link } from
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.links-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.external-link {
|
||||
color: #b38f00;
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
background: rgba(253, 203, 110, 0.1);
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.external-link:hover {
|
||||
background: rgba(253, 203, 110, 0.2);
|
||||
text-decoration: underline;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class ArtGalleryComponent implements OnInit {
|
||||
|
||||
@@ -0,0 +1,654 @@
|
||||
/**
|
||||
* @copyright 2026 NHCarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
|
||||
import { Component, OnInit, inject, signal } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterLink, ActivatedRoute, Router } from '@angular/router';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { BooksService } from '../../services/books.service';
|
||||
import { CommentsService } from '../../services/comments.service';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
import { SanitizeService } from '../../services/sanitize.service';
|
||||
import { CommentDisplayComponent } from '../comment-display/comment-display.component';
|
||||
import { LikeButtonComponent } from '../shared/like-button.component';
|
||||
import { Book, Comment, BookStatus } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-book-detail',
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterLink, FormsModule, CommentDisplayComponent, LikeButtonComponent],
|
||||
template: `
|
||||
<div class="container">
|
||||
<div class="breadcrumb">
|
||||
<a routerLink="/books" class="breadcrumb-link">β Back to Books</a>
|
||||
</div>
|
||||
|
||||
@if (loading()) {
|
||||
<div class="loading">Loading book details...</div>
|
||||
} @else if (error()) {
|
||||
<div class="error-state">
|
||||
<h2>Book Not Found</h2>
|
||||
<p>{{ error() }}</p>
|
||||
<a routerLink="/books" class="btn btn-primary">Return to Books</a>
|
||||
</div>
|
||||
} @else if (book()) {
|
||||
<div class="book-detail-card">
|
||||
@if (book()!.coverImage) {
|
||||
<div class="book-cover-section">
|
||||
<img [src]="book()!.coverImage" [alt]="book()!.title" class="book-cover-large">
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="book-content">
|
||||
<div class="book-header">
|
||||
<h1>{{ book()!.title }}</h1>
|
||||
<span class="status status-{{ book()!.status }}">
|
||||
{{ getStatusLabel(book()!.status) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="author">by {{ book()!.author }}</p>
|
||||
|
||||
@if (book()!.series) {
|
||||
<p class="series">
|
||||
π {{ book()!.series }}@if (book()!.seriesOrder) { #{{ book()!.seriesOrder }}}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (book()!.isbn) {
|
||||
<div class="info-row">
|
||||
<span class="info-label">ISBN:</span>
|
||||
<span class="info-value">{{ book()!.isbn }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (book()!.rating) {
|
||||
<div class="info-row">
|
||||
<span class="info-label">Rating:</span>
|
||||
<div class="rating">
|
||||
@for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
|
||||
<span [class.filled]="star <= book()!.rating!">β
</span>
|
||||
}
|
||||
<span class="rating-text">({{ book()!.rating }}/10)</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (book()!.timeSpent) {
|
||||
<div class="info-row">
|
||||
<span class="info-label">Reading Time:</span>
|
||||
<span class="info-value time-spent">{{ formatTimeSpent(book()!.timeSpent!) }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (book()!.dateStarted) {
|
||||
<div class="info-row">
|
||||
<span class="info-label">Started:</span>
|
||||
<span class="info-value">{{ formatDate(book()!.dateStarted!) }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (book()!.dateFinished) {
|
||||
<div class="info-row">
|
||||
<span class="info-label">Finished:</span>
|
||||
<span class="info-value">{{ formatDate(book()!.dateFinished!) }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="info-row">
|
||||
<span class="info-label">Added:</span>
|
||||
<span class="info-value">{{ formatDate(book()!.createdAt) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<span class="info-label">Last Updated:</span>
|
||||
<span class="info-value">{{ formatDate(book()!.updatedAt) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="like-section">
|
||||
<app-like-button
|
||||
entityType="book"
|
||||
[entityId]="book()!.id"
|
||||
></app-like-button>
|
||||
</div>
|
||||
|
||||
@if (book()!.notes) {
|
||||
<div class="notes-section">
|
||||
<h3>Notes</h3>
|
||||
<p class="notes">{{ book()!.notes }}</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (book()!.tags && book()!.tags.length > 0) {
|
||||
<div class="tags-section">
|
||||
<h3>Tags</h3>
|
||||
<div class="tags-display">
|
||||
@for (tag of book()!.tags; track tag) {
|
||||
<span class="tag-chip">{{ tag }}</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (book()!.links && book()!.links.length > 0) {
|
||||
<div class="links-section">
|
||||
<h3>External Links</h3>
|
||||
<div class="links-display">
|
||||
@for (link of book()!.links; track link.url) {
|
||||
<a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
|
||||
{{ link.title }} β
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="comments-section">
|
||||
<h3>Comments</h3>
|
||||
@if (authService.isAuthenticated()) {
|
||||
@if (authService.user()?.isBanned) {
|
||||
<div class="banned-notice">
|
||||
You have been banned from commenting.
|
||||
</div>
|
||||
} @else {
|
||||
<form (ngSubmit)="addComment()" class="comment-form">
|
||||
<textarea
|
||||
[(ngModel)]="newCommentContent"
|
||||
name="comment"
|
||||
placeholder="Add a comment (Markdown supported)..."
|
||||
rows="3"
|
||||
></textarea>
|
||||
<button type="submit" class="btn btn-primary">Post Comment</button>
|
||||
</form>
|
||||
}
|
||||
} @else {
|
||||
<div class="auth-prompt">
|
||||
<p>Please sign in to comment.</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (commentsLoading()) {
|
||||
<div class="comments-loading">Loading comments...</div>
|
||||
} @else {
|
||||
<app-comment-display
|
||||
[comments]="comments"
|
||||
(edit)="handleCommentEdit($event)"
|
||||
(delete)="deleteComment($event)"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.breadcrumb-link {
|
||||
color: #8b6f47;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.breadcrumb-link:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: #666;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.error-state {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.error-state h2 {
|
||||
color: #991b1b;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.error-state p {
|
||||
color: #dc2626;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.book-detail-card {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.book-cover-section {
|
||||
width: 100%;
|
||||
background: #f3f4f6;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.book-cover-large {
|
||||
max-width: 100%;
|
||||
max-height: 400px;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.book-content {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.book-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.book-header h1 {
|
||||
margin: 0;
|
||||
font-size: 2rem;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.author {
|
||||
color: #6b7280;
|
||||
font-style: italic;
|
||||
font-size: 1.1rem;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-reading {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.status-finished {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.status-toRead {
|
||||
background: #e0e7ff;
|
||||
color: #3730a3;
|
||||
}
|
||||
|
||||
.status-retired {
|
||||
background: #f3f4f6;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.series {
|
||||
color: #8b6f47;
|
||||
font-size: 1rem;
|
||||
margin: 0.5rem 0 1.5rem 0;
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-weight: 600;
|
||||
color: #4b5563;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.time-spent {
|
||||
color: #10b981;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.rating span {
|
||||
color: #e5e7eb;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.rating span.filled {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.rating-text {
|
||||
margin-left: 0.5rem;
|
||||
font-size: 1rem;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.like-section {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.notes-section,
|
||||
.tags-section,
|
||||
.links-section {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.notes-section h3,
|
||||
.tags-section h3,
|
||||
.links-section h3,
|
||||
.comments-section h3 {
|
||||
font-size: 1.25rem;
|
||||
color: #1f2937;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.notes {
|
||||
font-size: 1rem;
|
||||
color: #4b5563;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.tags-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
background: #8b6f47;
|
||||
color: white;
|
||||
padding: 0.375rem 0.875rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.links-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.external-link {
|
||||
color: #8b6f47;
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 2px solid #8b6f47;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.external-link:hover {
|
||||
background: #8b6f47;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.comments-section {
|
||||
margin-top: 2rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 2px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.comment-form {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.comment-form textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
resize: vertical;
|
||||
margin-bottom: 0.75rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.comment-form textarea:focus {
|
||||
outline: none;
|
||||
border-color: #8b6f47;
|
||||
}
|
||||
|
||||
.banned-notice {
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #991b1b;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.auth-prompt {
|
||||
background: #f3f4f6;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.auth-prompt p {
|
||||
margin: 0;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.comments-loading {
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
color: #6b7280;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.625rem 1.25rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #8b6f47;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.book-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.book-header h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class BookDetailComponent implements OnInit {
|
||||
private readonly booksService = inject(BooksService);
|
||||
private readonly commentsService = inject(CommentsService);
|
||||
readonly authService = inject(AuthService);
|
||||
private readonly sanitizeService = inject(SanitizeService);
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
private readonly router = inject(Router);
|
||||
|
||||
book = signal<Book | null>(null);
|
||||
comments = signal<Comment[]>([]);
|
||||
loading = signal(true);
|
||||
commentsLoading = signal(false);
|
||||
error = signal<string | null>(null);
|
||||
newCommentContent = '';
|
||||
|
||||
ngOnInit() {
|
||||
const bookId = this.route.snapshot.paramMap.get('id');
|
||||
if (!bookId) {
|
||||
this.error.set('No book ID provided');
|
||||
this.loading.set(false);
|
||||
return;
|
||||
}
|
||||
|
||||
this.loadBook(bookId);
|
||||
this.loadComments(bookId);
|
||||
}
|
||||
|
||||
private loadBook(bookId: string) {
|
||||
this.loading.set(true);
|
||||
this.booksService.getBookById(bookId).subscribe({
|
||||
next: (book) => {
|
||||
if (!book) {
|
||||
this.error.set('Book not found');
|
||||
} else {
|
||||
this.book.set(book);
|
||||
}
|
||||
this.loading.set(false);
|
||||
},
|
||||
error: () => {
|
||||
this.error.set('Failed to load book. It may not exist or there was an error.');
|
||||
this.loading.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private loadComments(bookId: string) {
|
||||
this.commentsLoading.set(true);
|
||||
this.commentsService.getCommentsForBook(bookId).subscribe({
|
||||
next: (comments) => {
|
||||
this.comments.set(comments);
|
||||
this.commentsLoading.set(false);
|
||||
},
|
||||
error: () => {
|
||||
this.commentsLoading.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addComment() {
|
||||
const book = this.book();
|
||||
if (!book || !this.newCommentContent.trim()) return;
|
||||
|
||||
this.commentsService.addCommentToBook(book.id, { content: this.newCommentContent }).subscribe({
|
||||
next: (comment) => {
|
||||
this.comments.set([comment, ...this.comments()]);
|
||||
this.newCommentContent = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleCommentEdit(event: { commentId: string; content: string }) {
|
||||
const book = this.book();
|
||||
if (!book) return;
|
||||
|
||||
this.commentsService.updateCommentOnBook(book.id, event.commentId, event.content).subscribe({
|
||||
next: (updatedComment) => {
|
||||
this.comments.set(
|
||||
this.comments().map(c => c.id === event.commentId ? updatedComment : c)
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deleteComment(commentId: string) {
|
||||
const book = this.book();
|
||||
if (!book || !confirm('Are you sure you want to delete this comment?')) return;
|
||||
|
||||
this.commentsService.deleteCommentFromBook(book.id, commentId).subscribe({
|
||||
next: () => {
|
||||
this.comments.set(this.comments().filter(c => c.id !== commentId));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getStatusLabel(status: BookStatus): string {
|
||||
switch (status) {
|
||||
case BookStatus.reading: return 'Currently Reading';
|
||||
case BookStatus.finished: return 'Finished';
|
||||
case BookStatus.toRead: return 'To Read';
|
||||
case BookStatus.retired: return 'Retired';
|
||||
}
|
||||
}
|
||||
|
||||
formatDate(date: Date | string): string {
|
||||
return new Date(date).toLocaleDateString('en-GB', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
}
|
||||
|
||||
formatTimeSpent(minutes: number): string {
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const mins = minutes % 60;
|
||||
|
||||
if (hours === 0) {
|
||||
return `${mins} minutes`;
|
||||
} else if (mins === 0) {
|
||||
return `${hours} hour${hours === 1 ? '' : 's'}`;
|
||||
} else {
|
||||
return `${hours} hour${hours === 1 ? '' : 's'} ${mins} minute${mins === 1 ? '' : 's'}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -7,6 +7,7 @@
|
||||
import { Component, OnInit, inject, signal, computed } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { BooksService } from '../../services/books.service';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
import { CommentsService } from '../../services/comments.service';
|
||||
@@ -14,13 +15,12 @@ import { SanitizeService } from '../../services/sanitize.service';
|
||||
import { SuggestionService } from '../../services/suggestion.service';
|
||||
import { PaginationComponent } from '../shared/pagination.component';
|
||||
import { LikeButtonComponent } from '../shared/like-button.component';
|
||||
import { CommentDisplayComponent } from '../comment-display/comment-display.component';
|
||||
import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-books-list',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent, CommentDisplayComponent],
|
||||
imports: [CommonModule, FormsModule, RouterLink, PaginationComponent, LikeButtonComponent],
|
||||
template: `
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
@@ -116,6 +116,34 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="timeHours">Time Spent (Hours)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="timeHours"
|
||||
[(ngModel)]="newBookTimeHours"
|
||||
name="timeHours"
|
||||
min="0"
|
||||
placeholder="0"
|
||||
(ngModelChange)="updateNewBookTimeSpent()"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="timeMinutes">Time Spent (Minutes)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="timeMinutes"
|
||||
[(ngModel)]="newBookTimeMinutes"
|
||||
name="timeMinutes"
|
||||
min="0"
|
||||
max="59"
|
||||
placeholder="0"
|
||||
(ngModelChange)="updateNewBookTimeSpent()"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="notes">Notes</label>
|
||||
<textarea
|
||||
@@ -127,6 +155,29 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="series">Series (optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
id="series"
|
||||
[(ngModel)]="newBook.series"
|
||||
name="series"
|
||||
placeholder="e.g., Harry Potter"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="seriesOrder">Series Order (optional)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="seriesOrder"
|
||||
[(ngModel)]="newBook.seriesOrder"
|
||||
name="seriesOrder"
|
||||
min="1"
|
||||
placeholder="Order in series"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="coverImage">Cover Image (max 500KB)</label>
|
||||
<input
|
||||
@@ -278,6 +329,34 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="edit-timeHours">Time Spent (Hours)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="edit-timeHours"
|
||||
[(ngModel)]="editBookTimeHours"
|
||||
name="timeHours"
|
||||
min="0"
|
||||
placeholder="0"
|
||||
(ngModelChange)="updateEditBookTimeSpent()"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="edit-timeMinutes">Time Spent (Minutes)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="edit-timeMinutes"
|
||||
[(ngModel)]="editBookTimeMinutes"
|
||||
name="timeMinutes"
|
||||
min="0"
|
||||
max="59"
|
||||
placeholder="0"
|
||||
(ngModelChange)="updateEditBookTimeSpent()"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="edit-notes">Notes</label>
|
||||
<textarea
|
||||
@@ -289,6 +368,29 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="edit-series">Series (optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
id="edit-series"
|
||||
[(ngModel)]="editBook.series"
|
||||
name="series"
|
||||
placeholder="e.g., Harry Potter"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="edit-seriesOrder">Series Order (optional)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="edit-seriesOrder"
|
||||
[(ngModel)]="editBook.seriesOrder"
|
||||
name="seriesOrder"
|
||||
min="1"
|
||||
placeholder="Order in series"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="edit-coverImage">Cover Image (max 500KB)</label>
|
||||
<input
|
||||
@@ -540,85 +642,39 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
|
||||
<div class="books-grid">
|
||||
@for (book of paginatedBooks(); track book.id) {
|
||||
<div class="book-card" [class.finished]="book.status === BookStatus.finished">
|
||||
@if (book.coverImage) {
|
||||
<img [src]="book.coverImage" [alt]="book.title" class="book-cover">
|
||||
} @else {
|
||||
<div class="book-cover placeholder">π</div>
|
||||
}
|
||||
|
||||
<div class="book-info">
|
||||
<h3>{{ book.title }}</h3>
|
||||
<p class="author">by {{ book.author }}</p>
|
||||
|
||||
<span class="status status-{{ book.status }}">
|
||||
{{ getStatusLabel(book.status) }}
|
||||
</span>
|
||||
|
||||
@if (book.rating) {
|
||||
<div class="rating">
|
||||
@for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
|
||||
<span [class.filled]="star <= book.rating!">β
</span>
|
||||
}
|
||||
</div>
|
||||
<a [routerLink]="['/books', book.id]" class="card-link">
|
||||
@if (book.coverImage) {
|
||||
<img [src]="book.coverImage" [alt]="book.title" class="book-cover">
|
||||
} @else {
|
||||
<div class="book-cover placeholder">π</div>
|
||||
}
|
||||
|
||||
<div class="book-info">
|
||||
<h3>{{ book.title }}</h3>
|
||||
<p class="author">by {{ book.author }}</p>
|
||||
|
||||
<span class="status status-{{ book.status }}">
|
||||
{{ getStatusLabel(book.status) }}
|
||||
</span>
|
||||
|
||||
@if (book.rating) {
|
||||
<div class="rating">
|
||||
@for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
|
||||
<span [class.filled]="star <= book.rating!">β
</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="card-actions">
|
||||
<app-like-button
|
||||
entityType="book"
|
||||
[entityId]="book.id"
|
||||
></app-like-button>
|
||||
|
||||
@if (book.isbn) {
|
||||
<p class="isbn">ISBN: {{ book.isbn }}</p>
|
||||
}
|
||||
|
||||
@if (book.notes) {
|
||||
<p class="notes">{{ book.notes }}</p>
|
||||
}
|
||||
|
||||
@if (book.tags && book.tags.length > 0) {
|
||||
<div class="tags-display">
|
||||
@for (tag of book.tags; track tag) {
|
||||
<span class="tag-chip">{{ tag }}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (book.links && book.links.length > 0) {
|
||||
<div class="links-display">
|
||||
@for (link of book.links; track link.url) {
|
||||
<a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
|
||||
{{ link.title }} β
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (book.dateStarted) {
|
||||
<p class="date-started">
|
||||
Started: {{ formatDate(book.dateStarted) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (book.dateFinished) {
|
||||
<p class="date-finished">
|
||||
Finished: {{ formatDate(book.dateFinished) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (book.createdAt) {
|
||||
<p class="date-added">
|
||||
Added: {{ formatDate(book.createdAt) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (book.updatedAt) {
|
||||
<p class="date-updated">
|
||||
Updated: {{ formatDate(book.updatedAt) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (authService.isAdmin()) {
|
||||
<div class="actions">
|
||||
<div class="admin-actions">
|
||||
<button (click)="startEdit(book)" class="btn btn-secondary btn-sm">
|
||||
Edit
|
||||
</button>
|
||||
@@ -627,44 +683,6 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="comments-section">
|
||||
<button (click)="toggleComments(book.id)" class="btn btn-secondary btn-sm comments-toggle">
|
||||
{{ expandedComments()[book.id] ? 'Hide' : 'Show' }} Comments{{ comments()[book.id] ? ' (' + getCommentCount(book.id) + ')' : '' }}
|
||||
</button>
|
||||
|
||||
@if (expandedComments()[book.id]) {
|
||||
<div class="comments-container">
|
||||
@if (authService.isAuthenticated()) {
|
||||
@if (authService.user()?.isBanned) {
|
||||
<div class="banned-notice">
|
||||
You have been banned from commenting.
|
||||
</div>
|
||||
} @else {
|
||||
<form (ngSubmit)="addComment(book.id)" class="comment-form">
|
||||
<textarea
|
||||
[(ngModel)]="newCommentContent[book.id]"
|
||||
name="comment"
|
||||
placeholder="Add a comment (Markdown supported)..."
|
||||
rows="2"
|
||||
></textarea>
|
||||
<button type="submit" class="btn btn-primary btn-sm">Post Comment</button>
|
||||
</form>
|
||||
}
|
||||
}
|
||||
|
||||
@if (commentsLoading()[book.id]) {
|
||||
<div class="comments-loading">Loading comments...</div>
|
||||
} @else {
|
||||
<app-comment-display
|
||||
[comments]="getCommentsSignal(book.id)"
|
||||
(edit)="handleCommentEdit(book.id, $event)"
|
||||
(delete)="deleteComment(book.id, $event)"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -719,6 +737,13 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@@ -923,6 +948,8 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
backdrop-filter: blur(10px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.book-card:hover {
|
||||
@@ -936,6 +963,33 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
|
||||
border-color: var(--witch-mauve);
|
||||
}
|
||||
|
||||
.card-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-link:hover h3 {
|
||||
color: var(--witch-rose);
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
padding: 1rem;
|
||||
border-top: 1px solid var(--witch-lavender);
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.admin-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.book-cover {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
@@ -957,6 +1011,7 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
|
||||
.book-info h3 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.author {
|
||||
@@ -999,31 +1054,6 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
|
||||
color: var(--witch-rose);
|
||||
}
|
||||
|
||||
.isbn {
|
||||
font-size: 0.8rem;
|
||||
color: var(--witch-mauve);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.notes {
|
||||
font-size: 0.9rem;
|
||||
color: var(--witch-plum);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.date-started,
|
||||
.date-finished,
|
||||
.date-added,
|
||||
.date-updated {
|
||||
font-size: 0.85rem;
|
||||
color: var(--witch-plum);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
@@ -1070,163 +1100,6 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
|
||||
.btn-sm { padding: 0.25rem 0.75rem; font-size: 0.85rem; }
|
||||
.btn-xs { padding: 0.15rem 0.5rem; font-size: 0.75rem; }
|
||||
|
||||
.comments-section {
|
||||
margin-top: 1rem;
|
||||
border-top: 1px solid var(--witch-lavender);
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.comments-toggle {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.comments-container {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.comment-form {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.comment-form textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 2px solid var(--witch-lavender);
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
background-color: var(--witch-moon);
|
||||
color: var(--witch-purple);
|
||||
resize: vertical;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.comment-form textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--witch-rose);
|
||||
}
|
||||
|
||||
.comment {
|
||||
background: var(--witch-moon);
|
||||
border: 1px solid var(--witch-lavender);
|
||||
border-radius: 4px;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.comment-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.comment-author {
|
||||
font-weight: 500;
|
||||
color: var(--witch-plum);
|
||||
}
|
||||
|
||||
.discord-badge {
|
||||
background: #5865f2;
|
||||
color: white;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.vip-badge {
|
||||
background: linear-gradient(135deg, #ffd700, #ffaa00);
|
||||
color: #1a1a1a;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mod-badge {
|
||||
background: linear-gradient(135deg, #00b894, #00cec9);
|
||||
color: white;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.staff-badge {
|
||||
background: linear-gradient(135deg, #e84393, #fd79a8);
|
||||
color: white;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.comment-date {
|
||||
font-size: 0.75rem;
|
||||
color: var(--witch-mauve);
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
font-size: 0.9rem;
|
||||
color: var(--witch-purple);
|
||||
}
|
||||
|
||||
.comment-content :deep(p) {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.comments-loading,
|
||||
.no-comments {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
color: var(--witch-mauve);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.banned-notice {
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #991b1b;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.comment-edit-form {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.comment-edit-form textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 2px solid var(--witch-lavender);
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
background-color: var(--witch-moon);
|
||||
color: var(--witch-purple);
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.comment-edit-form textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--witch-rose);
|
||||
}
|
||||
|
||||
.comment-edit-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
@@ -1308,21 +1181,6 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.tags-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
background: rgba(139, 111, 71, 0.2);
|
||||
color: #8b6f47;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.links-list {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
@@ -1348,28 +1206,6 @@ import { Book, BookStatus, CreateBookDto, UpdateBookDto, Comment, SuggestionEnti
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.links-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.external-link {
|
||||
color: #8b6f47;
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
background: rgba(139, 111, 71, 0.1);
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.external-link:hover {
|
||||
background: rgba(139, 111, 71, 0.2);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.search-section {
|
||||
flex-direction: column;
|
||||
@@ -1508,6 +1344,11 @@ export class BooksListComponent implements OnInit {
|
||||
|
||||
editBook: Partial<UpdateBookDto> = {};
|
||||
|
||||
newBookTimeHours = 0;
|
||||
newBookTimeMinutes = 0;
|
||||
editBookTimeHours = 0;
|
||||
editBookTimeMinutes = 0;
|
||||
|
||||
// Tags and links input state
|
||||
newTagInput = '';
|
||||
editTagInput = '';
|
||||
@@ -1610,6 +1451,8 @@ export class BooksListComponent implements OnInit {
|
||||
this.newTagInput = '';
|
||||
this.newLinkTitle = '';
|
||||
this.newLinkUrl = '';
|
||||
this.newBookTimeHours = 0;
|
||||
this.newBookTimeMinutes = 0;
|
||||
}
|
||||
|
||||
addTag(target: 'new' | 'edit') {
|
||||
@@ -1701,7 +1544,9 @@ export class BooksListComponent implements OnInit {
|
||||
notes: book.notes,
|
||||
coverImage: book.coverImage,
|
||||
tags: [...(book.tags || [])],
|
||||
links: [...(book.links || [])]
|
||||
links: [...(book.links || [])],
|
||||
series: book.series,
|
||||
seriesOrder: book.seriesOrder
|
||||
};
|
||||
this.editBookImagePreview.set(book.coverImage || null);
|
||||
this.showAddForm.set(false);
|
||||
@@ -1709,6 +1554,13 @@ export class BooksListComponent implements OnInit {
|
||||
this.editTagInput = '';
|
||||
this.editLinkTitle = '';
|
||||
this.editLinkUrl = '';
|
||||
if (book.timeSpent) {
|
||||
this.editBookTimeHours = Math.floor(book.timeSpent / 60);
|
||||
this.editBookTimeMinutes = book.timeSpent % 60;
|
||||
} else {
|
||||
this.editBookTimeHours = 0;
|
||||
this.editBookTimeMinutes = 0;
|
||||
}
|
||||
}
|
||||
|
||||
cancelEdit() {
|
||||
@@ -1741,6 +1593,29 @@ export class BooksListComponent implements OnInit {
|
||||
return new Date(date).toLocaleDateString();
|
||||
}
|
||||
|
||||
updateNewBookTimeSpent() {
|
||||
const totalMinutes = (this.newBookTimeHours * 60) + this.newBookTimeMinutes;
|
||||
this.newBook.timeSpent = totalMinutes > 0 ? totalMinutes : undefined;
|
||||
}
|
||||
|
||||
updateEditBookTimeSpent() {
|
||||
const totalMinutes = (this.editBookTimeHours * 60) + this.editBookTimeMinutes;
|
||||
this.editBook.timeSpent = totalMinutes > 0 ? totalMinutes : undefined;
|
||||
}
|
||||
|
||||
formatTimeSpent(minutes: number): string {
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const mins = minutes % 60;
|
||||
|
||||
if (hours === 0) {
|
||||
return `${mins}m`;
|
||||
} else if (mins === 0) {
|
||||
return `${hours}h`;
|
||||
} else {
|
||||
return `${hours}h ${mins}m`;
|
||||
}
|
||||
}
|
||||
|
||||
// Image handling methods
|
||||
onImageSelected(event: Event, target: 'new' | 'edit' | 'suggest') {
|
||||
const input = event.target as HTMLInputElement;
|
||||
|
||||
@@ -12,24 +12,24 @@ import { CommonModule } from '@angular/common';
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
template: `
|
||||
<footer class="footer">
|
||||
<footer class="footer" role="contentinfo">
|
||||
<div class="footer-content">
|
||||
<div class="cta-section">
|
||||
<div class="cta-card discord">
|
||||
<h3>Join the Community</h3>
|
||||
<section class="cta-card discord" aria-labelledby="discord-heading">
|
||||
<h2 id="discord-heading">Join the Community</h2>
|
||||
<p>Want to chat about what we're reading, playing, or listening to? Got recommendations? Come hang out!</p>
|
||||
<a href="https://chat.nhcarrigan.com" target="_blank" rel="noopener noreferrer" class="btn btn-discord">
|
||||
Join our Discord
|
||||
Join our Discord<span class="sr-only"> (opens in new window)</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="cta-card donate">
|
||||
<h3>Support Naomi</h3>
|
||||
<section class="cta-card donate" aria-labelledby="donate-heading">
|
||||
<h2 id="donate-heading">Support Naomi</h2>
|
||||
<p>Enjoying the vibes? Your support helps keep the servers running and the coffee flowing!</p>
|
||||
<a href="https://donate.nhcarrigan.com" target="_blank" rel="noopener noreferrer" class="btn btn-donate">
|
||||
Buy us a coffee
|
||||
Buy us a coffee<span class="sr-only"> (opens in new window)</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
@@ -73,7 +73,7 @@ import { CommonModule } from '@angular/common';
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.cta-card h3 {
|
||||
.cta-card h2 {
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 1.25rem;
|
||||
color: var(--witch-moon);
|
||||
@@ -131,6 +131,18 @@ import { CommonModule } from '@angular/common';
|
||||
font-size: 0.9rem;
|
||||
color: var(--witch-lavender);
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class FooterComponent {
|
||||
|
||||
@@ -0,0 +1,645 @@
|
||||
/**
|
||||
* @copyright 2026 NHCarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
|
||||
import { Component, OnInit, inject, signal } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterLink, ActivatedRoute, Router } from '@angular/router';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { GamesService } from '../../services/games.service';
|
||||
import { CommentsService } from '../../services/comments.service';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
import { SanitizeService } from '../../services/sanitize.service';
|
||||
import { CommentDisplayComponent } from '../comment-display/comment-display.component';
|
||||
import { LikeButtonComponent } from '../shared/like-button.component';
|
||||
import { Game, Comment, GameStatus } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-game-detail',
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterLink, FormsModule, CommentDisplayComponent, LikeButtonComponent],
|
||||
template: `
|
||||
<div class="container">
|
||||
<div class="breadcrumb">
|
||||
<a routerLink="/games" class="breadcrumb-link">β Back to Games</a>
|
||||
</div>
|
||||
|
||||
@if (loading()) {
|
||||
<div class="loading">Loading game details...</div>
|
||||
} @else if (error()) {
|
||||
<div class="error-state">
|
||||
<h2>Game Not Found</h2>
|
||||
<p>{{ error() }}</p>
|
||||
<a routerLink="/games" class="btn btn-primary">Return to Games</a>
|
||||
</div>
|
||||
} @else if (game()) {
|
||||
<div class="game-detail-card">
|
||||
@if (game()!.coverImage) {
|
||||
<div class="game-cover-section">
|
||||
<img [src]="game()!.coverImage" [alt]="game()!.title" class="game-cover-large">
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="game-content">
|
||||
<div class="game-header">
|
||||
<h1>{{ game()!.title }}</h1>
|
||||
<span class="status status-{{ game()!.status }}">
|
||||
{{ getStatusLabel(game()!.status) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@if (game()!.series) {
|
||||
<p class="series">
|
||||
π {{ game()!.series }}@if (game()!.seriesOrder) { #{{ game()!.seriesOrder }}}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (game()!.platform) {
|
||||
<div class="info-row">
|
||||
<span class="info-label">Platform:</span>
|
||||
<span class="info-value">{{ game()!.platform }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (game()!.rating) {
|
||||
<div class="info-row">
|
||||
<span class="info-label">Rating:</span>
|
||||
<div class="rating">
|
||||
@for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
|
||||
<span [class.filled]="star <= game()!.rating!">β
</span>
|
||||
}
|
||||
<span class="rating-text">({{ game()!.rating }}/10)</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (game()!.timeSpent) {
|
||||
<div class="info-row">
|
||||
<span class="info-label">Time Played:</span>
|
||||
<span class="info-value time-spent">{{ formatTimeSpent(game()!.timeSpent!) }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (game()!.dateStarted) {
|
||||
<div class="info-row">
|
||||
<span class="info-label">Started:</span>
|
||||
<span class="info-value">{{ formatDate(game()!.dateStarted!) }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (game()!.dateFinished) {
|
||||
<div class="info-row">
|
||||
<span class="info-label">Finished:</span>
|
||||
<span class="info-value">{{ formatDate(game()!.dateFinished!) }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="info-row">
|
||||
<span class="info-label">Added:</span>
|
||||
<span class="info-value">{{ formatDate(game()!.createdAt) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<span class="info-label">Last Updated:</span>
|
||||
<span class="info-value">{{ formatDate(game()!.updatedAt) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="like-section">
|
||||
<app-like-button
|
||||
entityType="game"
|
||||
[entityId]="game()!.id"
|
||||
></app-like-button>
|
||||
</div>
|
||||
|
||||
@if (game()!.notes) {
|
||||
<div class="notes-section">
|
||||
<h3>Notes</h3>
|
||||
<p class="notes">{{ game()!.notes }}</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (game()!.tags && game()!.tags.length > 0) {
|
||||
<div class="tags-section">
|
||||
<h3>Tags</h3>
|
||||
<div class="tags-display">
|
||||
@for (tag of game()!.tags; track tag) {
|
||||
<span class="tag-chip">{{ tag }}</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (game()!.links && game()!.links.length > 0) {
|
||||
<div class="links-section">
|
||||
<h3>External Links</h3>
|
||||
<div class="links-display">
|
||||
@for (link of game()!.links; track link.url) {
|
||||
<a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
|
||||
{{ link.title }} β
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="comments-section">
|
||||
<h3>Comments</h3>
|
||||
@if (authService.isAuthenticated()) {
|
||||
@if (authService.user()?.isBanned) {
|
||||
<div class="banned-notice">
|
||||
You have been banned from commenting.
|
||||
</div>
|
||||
} @else {
|
||||
<form (ngSubmit)="addComment()" class="comment-form">
|
||||
<textarea
|
||||
[(ngModel)]="newCommentContent"
|
||||
name="comment"
|
||||
placeholder="Add a comment (Markdown supported)..."
|
||||
rows="3"
|
||||
></textarea>
|
||||
<button type="submit" class="btn btn-primary">Post Comment</button>
|
||||
</form>
|
||||
}
|
||||
} @else {
|
||||
<div class="auth-prompt">
|
||||
<p>Please sign in to comment.</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (commentsLoading()) {
|
||||
<div class="comments-loading">Loading comments...</div>
|
||||
} @else {
|
||||
<app-comment-display
|
||||
[comments]="comments"
|
||||
(edit)="handleCommentEdit($event)"
|
||||
(delete)="deleteComment($event)"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.breadcrumb-link {
|
||||
color: #ff6b6b;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.breadcrumb-link:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: #666;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.error-state {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.error-state h2 {
|
||||
color: #991b1b;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.error-state p {
|
||||
color: #dc2626;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.game-detail-card {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.game-cover-section {
|
||||
width: 100%;
|
||||
background: #f3f4f6;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.game-cover-large {
|
||||
max-width: 100%;
|
||||
max-height: 400px;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.game-content {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.game-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.game-header h1 {
|
||||
margin: 0;
|
||||
font-size: 2rem;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-playing {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.status-completed {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.status-backlog {
|
||||
background: #e0e7ff;
|
||||
color: #3730a3;
|
||||
}
|
||||
|
||||
.status-retired {
|
||||
background: #f3f4f6;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.series {
|
||||
color: #8b6f47;
|
||||
font-size: 1rem;
|
||||
margin: 0.5rem 0 1.5rem 0;
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-weight: 600;
|
||||
color: #4b5563;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.time-spent {
|
||||
color: #10b981;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.rating span {
|
||||
color: #e5e7eb;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.rating span.filled {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.rating-text {
|
||||
margin-left: 0.5rem;
|
||||
font-size: 1rem;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.like-section {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.notes-section,
|
||||
.tags-section,
|
||||
.links-section {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.notes-section h3,
|
||||
.tags-section h3,
|
||||
.links-section h3,
|
||||
.comments-section h3 {
|
||||
font-size: 1.25rem;
|
||||
color: #1f2937;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.notes {
|
||||
font-size: 1rem;
|
||||
color: #4b5563;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.tags-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
background: #ff6b6b;
|
||||
color: white;
|
||||
padding: 0.375rem 0.875rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.links-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.external-link {
|
||||
color: #ff6b6b;
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 2px solid #ff6b6b;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.external-link:hover {
|
||||
background: #ff6b6b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.comments-section {
|
||||
margin-top: 2rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 2px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.comment-form {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.comment-form textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
resize: vertical;
|
||||
margin-bottom: 0.75rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.comment-form textarea:focus {
|
||||
outline: none;
|
||||
border-color: #ff6b6b;
|
||||
}
|
||||
|
||||
.banned-notice {
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #991b1b;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.auth-prompt {
|
||||
background: #f3f4f6;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.auth-prompt p {
|
||||
margin: 0;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.comments-loading {
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
color: #6b7280;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.625rem 1.25rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #ff6b6b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.game-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.game-header h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class GameDetailComponent implements OnInit {
|
||||
private readonly gamesService = inject(GamesService);
|
||||
private readonly commentsService = inject(CommentsService);
|
||||
readonly authService = inject(AuthService);
|
||||
private readonly sanitizeService = inject(SanitizeService);
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
private readonly router = inject(Router);
|
||||
|
||||
game = signal<Game | null>(null);
|
||||
comments = signal<Comment[]>([]);
|
||||
loading = signal(true);
|
||||
commentsLoading = signal(false);
|
||||
error = signal<string | null>(null);
|
||||
newCommentContent = '';
|
||||
|
||||
ngOnInit() {
|
||||
const gameId = this.route.snapshot.paramMap.get('id');
|
||||
if (!gameId) {
|
||||
this.error.set('No game ID provided');
|
||||
this.loading.set(false);
|
||||
return;
|
||||
}
|
||||
|
||||
this.loadGame(gameId);
|
||||
this.loadComments(gameId);
|
||||
}
|
||||
|
||||
private loadGame(gameId: string) {
|
||||
this.loading.set(true);
|
||||
this.gamesService.getGameById(gameId).subscribe({
|
||||
next: (game) => {
|
||||
if (!game) {
|
||||
this.error.set('Game not found');
|
||||
} else {
|
||||
this.game.set(game);
|
||||
}
|
||||
this.loading.set(false);
|
||||
},
|
||||
error: () => {
|
||||
this.error.set('Failed to load game. It may not exist or there was an error.');
|
||||
this.loading.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private loadComments(gameId: string) {
|
||||
this.commentsLoading.set(true);
|
||||
this.commentsService.getCommentsForGame(gameId).subscribe({
|
||||
next: (comments) => {
|
||||
this.comments.set(comments);
|
||||
this.commentsLoading.set(false);
|
||||
},
|
||||
error: () => {
|
||||
this.commentsLoading.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addComment() {
|
||||
const game = this.game();
|
||||
if (!game || !this.newCommentContent.trim()) return;
|
||||
|
||||
this.commentsService.addCommentToGame(game.id, { content: this.newCommentContent }).subscribe({
|
||||
next: (comment) => {
|
||||
this.comments.set([comment, ...this.comments()]);
|
||||
this.newCommentContent = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleCommentEdit(event: { commentId: string; content: string }) {
|
||||
const game = this.game();
|
||||
if (!game) return;
|
||||
|
||||
this.commentsService.updateCommentOnGame(game.id, event.commentId, event.content).subscribe({
|
||||
next: (updatedComment) => {
|
||||
this.comments.set(
|
||||
this.comments().map(c => c.id === event.commentId ? updatedComment : c)
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deleteComment(commentId: string) {
|
||||
const game = this.game();
|
||||
if (!game || !confirm('Are you sure you want to delete this comment?')) return;
|
||||
|
||||
this.commentsService.deleteCommentFromGame(game.id, commentId).subscribe({
|
||||
next: () => {
|
||||
this.comments.set(this.comments().filter(c => c.id !== commentId));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getStatusLabel(status: GameStatus): string {
|
||||
switch (status) {
|
||||
case GameStatus.playing: return 'Currently Playing';
|
||||
case GameStatus.completed: return 'Completed';
|
||||
case GameStatus.backlog: return 'In Backlog';
|
||||
case GameStatus.retired: return 'Retired';
|
||||
}
|
||||
}
|
||||
|
||||
formatDate(date: Date | string): string {
|
||||
return new Date(date).toLocaleDateString('en-GB', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
}
|
||||
|
||||
formatTimeSpent(minutes: number): string {
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const mins = minutes % 60;
|
||||
|
||||
if (hours === 0) {
|
||||
return `${mins} minutes`;
|
||||
} else if (mins === 0) {
|
||||
return `${hours} hour${hours === 1 ? '' : 's'}`;
|
||||
} else {
|
||||
return `${hours} hour${hours === 1 ? '' : 's'} ${mins} minute${mins === 1 ? '' : 's'}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -7,6 +7,7 @@
|
||||
import { Component, OnInit, inject, signal, computed } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { GamesService } from '../../services/games.service';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
import { CommentsService } from '../../services/comments.service';
|
||||
@@ -14,13 +15,12 @@ import { SanitizeService } from '../../services/sanitize.service';
|
||||
import { SuggestionService } from '../../services/suggestion.service';
|
||||
import { PaginationComponent } from '../shared/pagination.component';
|
||||
import { LikeButtonComponent } from '../shared/like-button.component';
|
||||
import { CommentDisplayComponent } from '../comment-display/comment-display.component';
|
||||
import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-games-list',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent, CommentDisplayComponent],
|
||||
imports: [CommonModule, FormsModule, RouterModule, PaginationComponent, LikeButtonComponent],
|
||||
template: `
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
@@ -104,6 +104,34 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="timeHours">Time Spent (Hours)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="timeHours"
|
||||
[(ngModel)]="newGameTimeHours"
|
||||
name="timeHours"
|
||||
min="0"
|
||||
placeholder="0"
|
||||
(ngModelChange)="updateNewGameTimeSpent()"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="timeMinutes">Time Spent (Minutes)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="timeMinutes"
|
||||
[(ngModel)]="newGameTimeMinutes"
|
||||
name="timeMinutes"
|
||||
min="0"
|
||||
max="59"
|
||||
placeholder="0"
|
||||
(ngModelChange)="updateNewGameTimeSpent()"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="notes">Notes</label>
|
||||
<textarea
|
||||
@@ -115,6 +143,29 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="series">Series (optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
id="series"
|
||||
[(ngModel)]="newGame.series"
|
||||
name="series"
|
||||
placeholder="e.g., The Legend of Zelda"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="seriesOrder">Series Order (optional)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="seriesOrder"
|
||||
[(ngModel)]="newGame.seriesOrder"
|
||||
name="seriesOrder"
|
||||
min="1"
|
||||
placeholder="Order in series"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="coverImage">Box Art (max 500KB)</label>
|
||||
<input
|
||||
@@ -254,6 +305,34 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="edit-timeHours">Time Spent (Hours)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="edit-timeHours"
|
||||
[(ngModel)]="editGameTimeHours"
|
||||
name="timeHours"
|
||||
min="0"
|
||||
placeholder="0"
|
||||
(ngModelChange)="updateEditGameTimeSpent()"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="edit-timeMinutes">Time Spent (Minutes)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="edit-timeMinutes"
|
||||
[(ngModel)]="editGameTimeMinutes"
|
||||
name="timeMinutes"
|
||||
min="0"
|
||||
max="59"
|
||||
placeholder="0"
|
||||
(ngModelChange)="updateEditGameTimeSpent()"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="edit-notes">Notes</label>
|
||||
<textarea
|
||||
@@ -265,6 +344,29 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="edit-series">Series (optional)</label>
|
||||
<input
|
||||
type="text"
|
||||
id="edit-series"
|
||||
[(ngModel)]="editGame.series"
|
||||
name="series"
|
||||
placeholder="e.g., The Legend of Zelda"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="edit-seriesOrder">Series Order (optional)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="edit-seriesOrder"
|
||||
[(ngModel)]="editGame.seriesOrder"
|
||||
name="seriesOrder"
|
||||
min="1"
|
||||
placeholder="Order in series"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="edit-coverImage">Box Art (max 500KB)</label>
|
||||
<input
|
||||
@@ -401,39 +503,49 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
</form>
|
||||
}
|
||||
|
||||
<div class="search-section">
|
||||
<div class="search-section" role="search" aria-label="Game search and filters">
|
||||
<label for="game-search" class="sr-only">Search games</label>
|
||||
<input
|
||||
type="text"
|
||||
type="search"
|
||||
id="game-search"
|
||||
[value]="searchQuery()"
|
||||
(input)="searchQuery.set($any($event.target).value); currentPage.set(1)"
|
||||
name="search"
|
||||
placeholder="Search by title, platform, or notes..."
|
||||
class="search-input"
|
||||
aria-label="Search by title, platform, or notes"
|
||||
>
|
||||
<button
|
||||
(click)="toggleFilters()"
|
||||
class="btn btn-secondary btn-sm"
|
||||
[attr.aria-expanded]="showFilters()"
|
||||
aria-controls="advanced-filters"
|
||||
type="button"
|
||||
>
|
||||
<button (click)="toggleFilters()" class="btn btn-secondary btn-sm">
|
||||
{{ showFilters() ? 'Hide' : 'Show' }} Advanced Filters
|
||||
@if (selectedTags().length > 0) {
|
||||
({{ selectedTags().length }})
|
||||
<span aria-label="{{ selectedTags().length }} active filters">({{ selectedTags().length }})</span>
|
||||
}
|
||||
</button>
|
||||
@if (searchQuery() || selectedTags().length > 0) {
|
||||
<button (click)="clearFilters()" class="btn btn-secondary btn-sm">
|
||||
<button (click)="clearFilters()" class="btn btn-secondary btn-sm" type="button">
|
||||
Clear All Filters
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (showFilters()) {
|
||||
<div class="advanced-filters">
|
||||
<div class="advanced-filters" id="advanced-filters" role="region" aria-label="Advanced filters">
|
||||
<div class="filter-group">
|
||||
<h4>Filter by Tags</h4>
|
||||
<div class="tags-filter">
|
||||
<h3>Filter by Tags</h3>
|
||||
<div class="tags-filter" role="group" aria-label="Tag filters">
|
||||
@for (tag of allTags(); track tag) {
|
||||
<label class="tag-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
[checked]="selectedTags().includes(tag)"
|
||||
(change)="toggleTag(tag)"
|
||||
[attr.aria-label]="'Filter by ' + tag"
|
||||
>
|
||||
<span>{{ tag }}</span>
|
||||
</label>
|
||||
@@ -446,39 +558,49 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="filters">
|
||||
<div class="filters" role="group" aria-label="Filter games by status">
|
||||
<button
|
||||
(click)="setFilter('all')"
|
||||
[class.active]="statusFilter() === 'all'"
|
||||
[attr.aria-pressed]="statusFilter() === 'all'"
|
||||
class="filter-btn"
|
||||
type="button"
|
||||
>
|
||||
All ({{ games().length }})
|
||||
</button>
|
||||
<button
|
||||
(click)="setFilter(GameStatus.playing)"
|
||||
[class.active]="statusFilter() === GameStatus.playing"
|
||||
[attr.aria-pressed]="statusFilter() === GameStatus.playing"
|
||||
class="filter-btn"
|
||||
type="button"
|
||||
>
|
||||
Playing ({{ playingCount() }})
|
||||
</button>
|
||||
<button
|
||||
(click)="setFilter(GameStatus.completed)"
|
||||
[class.active]="statusFilter() === GameStatus.completed"
|
||||
[attr.aria-pressed]="statusFilter() === GameStatus.completed"
|
||||
class="filter-btn"
|
||||
type="button"
|
||||
>
|
||||
Completed ({{ completedCount() }})
|
||||
</button>
|
||||
<button
|
||||
(click)="setFilter(GameStatus.backlog)"
|
||||
[class.active]="statusFilter() === GameStatus.backlog"
|
||||
[attr.aria-pressed]="statusFilter() === GameStatus.backlog"
|
||||
class="filter-btn"
|
||||
type="button"
|
||||
>
|
||||
Backlog ({{ backlogCount() }})
|
||||
</button>
|
||||
<button
|
||||
(click)="setFilter(GameStatus.retired)"
|
||||
[class.active]="statusFilter() === GameStatus.retired"
|
||||
[attr.aria-pressed]="statusFilter() === GameStatus.retired"
|
||||
class="filter-btn"
|
||||
type="button"
|
||||
>
|
||||
Retired ({{ retiredCount() }})
|
||||
</button>
|
||||
@@ -502,76 +624,38 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
<div class="games-grid">
|
||||
@for (game of paginatedGames(); track game.id) {
|
||||
<div class="game-card" [class.completed]="game.status === GameStatus.completed">
|
||||
@if (game.coverImage) {
|
||||
<img [src]="game.coverImage" [alt]="game.title" class="game-cover">
|
||||
}
|
||||
|
||||
<div class="game-info">
|
||||
<h3>{{ game.title }}</h3>
|
||||
@if (game.platform) {
|
||||
<p class="platform">{{ game.platform }}</p>
|
||||
}
|
||||
<span class="status status-{{ game.status }}">
|
||||
{{ getStatusLabel(game.status) }}
|
||||
</span>
|
||||
|
||||
@if (game.rating) {
|
||||
<div class="rating">
|
||||
@for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
|
||||
<span [class.filled]="star <= game.rating!">β
</span>
|
||||
}
|
||||
</div>
|
||||
<a [routerLink]="['/games', game.id]" class="card-link">
|
||||
@if (game.coverImage) {
|
||||
<img [src]="game.coverImage" [alt]="game.title" class="game-cover">
|
||||
}
|
||||
|
||||
<div class="game-info">
|
||||
<h3>{{ game.title }}</h3>
|
||||
@if (game.platform) {
|
||||
<p class="platform">{{ game.platform }}</p>
|
||||
}
|
||||
<span class="status status-{{ game.status }}">
|
||||
{{ getStatusLabel(game.status) }}
|
||||
</span>
|
||||
|
||||
@if (game.rating) {
|
||||
<div class="rating">
|
||||
@for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
|
||||
<span [class.filled]="star <= game.rating!">β
</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="card-actions">
|
||||
<app-like-button
|
||||
entityType="game"
|
||||
[entityId]="game.id"
|
||||
></app-like-button>
|
||||
|
||||
@if (game.notes) {
|
||||
<p class="notes">{{ game.notes }}</p>
|
||||
}
|
||||
|
||||
@if (game.tags && game.tags.length > 0) {
|
||||
<div class="tags-display">
|
||||
@for (tag of game.tags; track tag) {
|
||||
<span class="tag-chip">{{ tag }}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (game.links && game.links.length > 0) {
|
||||
<div class="links-display">
|
||||
@for (link of game.links; track link.url) {
|
||||
<a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
|
||||
{{ link.title }} β
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (game.dateStarted) {
|
||||
<p class="date-started">
|
||||
Started: {{ formatDate(game.dateStarted) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (game.dateFinished) {
|
||||
<p class="date-finished">
|
||||
Finished: {{ formatDate(game.dateFinished) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
<p class="date-added">
|
||||
Added: {{ formatDate(game.createdAt) }}
|
||||
</p>
|
||||
|
||||
<p class="date-updated">
|
||||
Updated: {{ formatDate(game.updatedAt) }}
|
||||
</p>
|
||||
|
||||
@if (authService.isAdmin()) {
|
||||
<div class="actions">
|
||||
<div class="admin-actions">
|
||||
<button (click)="startEdit(game)" class="btn btn-secondary btn-sm">
|
||||
Edit
|
||||
</button>
|
||||
@@ -580,44 +664,6 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="comments-section">
|
||||
<button (click)="toggleComments(game.id)" class="btn btn-secondary btn-sm comments-toggle">
|
||||
{{ expandedComments()[game.id] ? 'Hide' : 'Show' }} Comments{{ comments()[game.id] ? ' (' + getCommentCount(game.id) + ')' : '' }}
|
||||
</button>
|
||||
|
||||
@if (expandedComments()[game.id]) {
|
||||
<div class="comments-container">
|
||||
@if (authService.isAuthenticated()) {
|
||||
@if (authService.user()?.isBanned) {
|
||||
<div class="banned-notice">
|
||||
You have been banned from commenting.
|
||||
</div>
|
||||
} @else {
|
||||
<form (ngSubmit)="addComment(game.id)" class="comment-form">
|
||||
<textarea
|
||||
[(ngModel)]="newCommentContent[game.id]"
|
||||
name="comment"
|
||||
placeholder="Add a comment (Markdown supported)..."
|
||||
rows="2"
|
||||
></textarea>
|
||||
<button type="submit" class="btn btn-primary btn-sm">Post Comment</button>
|
||||
</form>
|
||||
}
|
||||
}
|
||||
|
||||
@if (commentsLoading()[game.id]) {
|
||||
<div class="comments-loading">Loading comments...</div>
|
||||
} @else {
|
||||
<app-comment-display
|
||||
[comments]="getCommentsSignal(game.id)"
|
||||
(edit)="handleCommentEdit(game.id, $event)"
|
||||
(delete)="deleteComment(game.id, $event)"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -690,6 +736,13 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
@@ -820,6 +873,8 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.game-card:hover {
|
||||
@@ -831,6 +886,17 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-link:hover h3 {
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
.game-cover {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
@@ -844,6 +910,7 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
.game-info h3 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.platform {
|
||||
@@ -858,11 +925,13 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.status-playing { background: #fef3c7; color: #92400e; }
|
||||
.status-completed { background: #d1fae5; color: #065f46; }
|
||||
.status-backlog { background: #e0e7ff; color: #3730a3; }
|
||||
.status-retired { background: #f3f4f6; color: #4b5563; }
|
||||
|
||||
.rating {
|
||||
margin: 0.5rem 0;
|
||||
@@ -877,23 +946,19 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.notes {
|
||||
font-size: 0.9rem;
|
||||
color: #4b5563;
|
||||
margin: 0.5rem 0;
|
||||
.card-actions {
|
||||
padding: 0.75rem 1rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.date-started,
|
||||
.date-finished,
|
||||
.date-added,
|
||||
.date-updated {
|
||||
font-size: 0.85rem;
|
||||
color: #4b5563;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 1rem;
|
||||
.admin-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@@ -915,127 +980,7 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
.btn-sm { padding: 0.25rem 0.75rem; font-size: 0.85rem; }
|
||||
.btn-xs { padding: 0.15rem 0.5rem; font-size: 0.75rem; }
|
||||
|
||||
.comments-section {
|
||||
margin-top: 1rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.comments-toggle {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.comments-container {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.comment-form {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.comment-form textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
resize: vertical;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.comment {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 4px;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.comment-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.comment-author {
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.discord-badge {
|
||||
background: #5865f2;
|
||||
color: white;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.vip-badge {
|
||||
background: linear-gradient(135deg, #ffd700, #ffaa00);
|
||||
color: #1a1a1a;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mod-badge {
|
||||
background: linear-gradient(135deg, #00b894, #00cec9);
|
||||
color: white;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.staff-badge {
|
||||
background: linear-gradient(135deg, #e84393, #fd79a8);
|
||||
color: white;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.comment-date {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
font-size: 0.9rem;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.comments-loading,
|
||||
.no-comments {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
color: #6b7280;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.banned-notice {
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #991b1b;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Tags and Links Styling */
|
||||
/* Tags and Links Styling for Forms */
|
||||
.tags-input-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -1081,21 +1026,6 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
color: #fecaca;
|
||||
}
|
||||
|
||||
.tags-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
background: #ff6b6b;
|
||||
color: white;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.links-list {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
@@ -1119,47 +1049,6 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.links-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.external-link {
|
||||
color: #ff6b6b;
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border: 1px solid #ff6b6b;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.external-link:hover {
|
||||
background: #ff6b6b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.comment-edit-form {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.comment-edit-form textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.comment-edit-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
@@ -1192,6 +1081,18 @@ import { Game, GameStatus, CreateGameDto, UpdateGameDto, Comment, SuggestionEnti
|
||||
input[type="file"]:hover {
|
||||
border-color: #10b981;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class GamesListComponent implements OnInit {
|
||||
@@ -1310,6 +1211,12 @@ export class GamesListComponent implements OnInit {
|
||||
|
||||
editGame: Partial<UpdateGameDto> = {};
|
||||
|
||||
// Time tracking state
|
||||
newGameTimeHours = 0;
|
||||
newGameTimeMinutes = 0;
|
||||
editGameTimeHours = 0;
|
||||
editGameTimeMinutes = 0;
|
||||
|
||||
// Tags and links input state
|
||||
newTagInput = '';
|
||||
editTagInput = '';
|
||||
@@ -1402,6 +1309,8 @@ export class GamesListComponent implements OnInit {
|
||||
tags: [],
|
||||
links: []
|
||||
};
|
||||
this.newGameTimeHours = 0;
|
||||
this.newGameTimeMinutes = 0;
|
||||
this.newGameImagePreview.set(null);
|
||||
this.imageError.set(null);
|
||||
this.newTagInput = '';
|
||||
@@ -1409,6 +1318,16 @@ export class GamesListComponent implements OnInit {
|
||||
this.newLinkUrl = '';
|
||||
}
|
||||
|
||||
updateNewGameTimeSpent() {
|
||||
const totalMinutes = (this.newGameTimeHours * 60) + this.newGameTimeMinutes;
|
||||
this.newGame.timeSpent = totalMinutes > 0 ? totalMinutes : undefined;
|
||||
}
|
||||
|
||||
updateEditGameTimeSpent() {
|
||||
const totalMinutes = (this.editGameTimeHours * 60) + this.editGameTimeMinutes;
|
||||
this.editGame.timeSpent = totalMinutes > 0 ? totalMinutes : undefined;
|
||||
}
|
||||
|
||||
addTag(target: 'new' | 'edit') {
|
||||
const input = target === 'new' ? this.newTagInput.trim() : this.editTagInput.trim();
|
||||
if (!input) return;
|
||||
@@ -1496,8 +1415,19 @@ export class GamesListComponent implements OnInit {
|
||||
notes: game.notes,
|
||||
coverImage: game.coverImage,
|
||||
tags: [...(game.tags || [])],
|
||||
links: [...(game.links || [])]
|
||||
links: [...(game.links || [])],
|
||||
series: game.series,
|
||||
seriesOrder: game.seriesOrder,
|
||||
timeSpent: game.timeSpent
|
||||
};
|
||||
// Populate time fields from existing timeSpent
|
||||
if (game.timeSpent) {
|
||||
this.editGameTimeHours = Math.floor(game.timeSpent / 60);
|
||||
this.editGameTimeMinutes = game.timeSpent % 60;
|
||||
} else {
|
||||
this.editGameTimeHours = 0;
|
||||
this.editGameTimeMinutes = 0;
|
||||
}
|
||||
this.editGameImagePreview.set(game.coverImage || null);
|
||||
this.showAddForm.set(false);
|
||||
this.imageError.set(null);
|
||||
@@ -1589,6 +1519,19 @@ export class GamesListComponent implements OnInit {
|
||||
return new Date(date).toLocaleDateString();
|
||||
}
|
||||
|
||||
formatTimeSpent(minutes: number): string {
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const mins = minutes % 60;
|
||||
|
||||
if (hours === 0) {
|
||||
return `${mins}m`;
|
||||
} else if (mins === 0) {
|
||||
return `${hours}h`;
|
||||
} else {
|
||||
return `${hours}h ${mins}m`;
|
||||
}
|
||||
}
|
||||
|
||||
toggleComments(gameId: string) {
|
||||
const expanded = this.expandedComments();
|
||||
const isCurrentlyExpanded = expanded[gameId];
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
import { Component, inject, signal, OnInit } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { RouterModule, Router } from '@angular/router';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
import { ApiService } from '../../services/api.service';
|
||||
|
||||
@@ -16,54 +16,68 @@ import { ApiService } from '../../services/api.service';
|
||||
imports: [CommonModule, RouterModule],
|
||||
template: `
|
||||
<header class="header">
|
||||
<nav class="navbar">
|
||||
<nav class="navbar" aria-label="Main navigation">
|
||||
<div class="nav-brand">
|
||||
<img src="/assets/icons/icon-72x72.png" alt="" class="brand-icon" role="presentation" />
|
||||
<h1><a routerLink="/">Naomi's Library</a></h1>
|
||||
@if (version()) {
|
||||
<span class="version">v{{ version() }}</span>
|
||||
<span class="version" aria-label="Version {{ version() }}">v{{ version() }}</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
<ul class="nav-links">
|
||||
<li><a routerLink="/games" routerLinkActive="active">Games</a></li>
|
||||
<li><a routerLink="/books" routerLinkActive="active">Books</a></li>
|
||||
<li><a routerLink="/music" routerLinkActive="active">Music</a></li>
|
||||
<li><a routerLink="/shows" routerLinkActive="active">Shows</a></li>
|
||||
<li><a routerLink="/manga" routerLinkActive="active">Manga</a></li>
|
||||
<li><a routerLink="/art" routerLinkActive="active">Art</a></li>
|
||||
<ul class="nav-links" role="list">
|
||||
<li><a routerLink="/games" routerLinkActive="active" [attr.aria-current]="isCurrentRoute('/games') ? 'page' : null">Games</a></li>
|
||||
<li><a routerLink="/books" routerLinkActive="active" [attr.aria-current]="isCurrentRoute('/books') ? 'page' : null">Books</a></li>
|
||||
<li><a routerLink="/music" routerLinkActive="active" [attr.aria-current]="isCurrentRoute('/music') ? 'page' : null">Music</a></li>
|
||||
<li><a routerLink="/shows" routerLinkActive="active" [attr.aria-current]="isCurrentRoute('/shows') ? 'page' : null">Shows</a></li>
|
||||
<li><a routerLink="/manga" routerLinkActive="active" [attr.aria-current]="isCurrentRoute('/manga') ? 'page' : null">Manga</a></li>
|
||||
<li><a routerLink="/art" routerLinkActive="active" [attr.aria-current]="isCurrentRoute('/art') ? 'page' : null">Art</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="auth-section">
|
||||
@if (authService.user(); as user) {
|
||||
<div class="user-menu">
|
||||
@if (user.avatar) {
|
||||
<img
|
||||
[src]="user.avatar"
|
||||
[alt]="user.username"
|
||||
class="user-avatar"
|
||||
<button
|
||||
class="user-avatar-button"
|
||||
[attr.aria-label]="'User menu for ' + user.username"
|
||||
[attr.aria-expanded]="showDropdown()"
|
||||
aria-haspopup="true"
|
||||
(click)="toggleDropdown()"
|
||||
(keyup.enter)="toggleDropdown()"
|
||||
(keyup.space)="toggleDropdown()"
|
||||
tabindex="0"
|
||||
role="button"
|
||||
/>
|
||||
(keydown.escape)="closeDropdown()"
|
||||
>
|
||||
<img
|
||||
[src]="user.avatar"
|
||||
[alt]="'Avatar for ' + user.username"
|
||||
class="user-avatar"
|
||||
/>
|
||||
</button>
|
||||
}
|
||||
@if (showDropdown()) {
|
||||
<div class="dropdown-menu">
|
||||
<a [routerLink]="['/profile', user.slug || user.id]" class="dropdown-item" (click)="closeDropdown()">My Profile</a>
|
||||
<a routerLink="/settings" class="dropdown-item" (click)="closeDropdown()">Settings</a>
|
||||
<a routerLink="/achievements" class="dropdown-item" (click)="closeDropdown()">π Achievements</a>
|
||||
<div
|
||||
class="dropdown-menu"
|
||||
role="menu"
|
||||
aria-label="User menu"
|
||||
tabindex="-1"
|
||||
(keydown.escape)="closeDropdown()"
|
||||
>
|
||||
<a [routerLink]="['/profile', user.slug || user.id]" class="dropdown-item" role="menuitem" (click)="closeDropdown()">My Profile</a>
|
||||
<a routerLink="/settings" class="dropdown-item" role="menuitem" (click)="closeDropdown()">Settings</a>
|
||||
<a routerLink="/achievements" class="dropdown-item" role="menuitem" (click)="closeDropdown()"><span aria-hidden="true">π</span> Achievements</a>
|
||||
<a routerLink="/leaderboard" class="dropdown-item" role="menuitem" (click)="closeDropdown()"><span aria-hidden="true">π</span> Leaderboard</a>
|
||||
<a routerLink="/activity" class="dropdown-item" role="menuitem" (click)="closeDropdown()"><span aria-hidden="true">π°</span> Activity Feed</a>
|
||||
<a routerLink="/about" class="dropdown-item" role="menuitem" (click)="closeDropdown()"><span aria-hidden="true">βΉοΈ</span> About</a>
|
||||
@if (!user.isAdmin) {
|
||||
<a routerLink="/my-suggestions" class="dropdown-item" (click)="closeDropdown()">My Suggestions</a>
|
||||
<a routerLink="/my-suggestions" class="dropdown-item" role="menuitem" (click)="closeDropdown()">My Suggestions</a>
|
||||
}
|
||||
<a routerLink="/my-likes" class="dropdown-item" (click)="closeDropdown()">My Likes</a>
|
||||
<a routerLink="/my-likes" class="dropdown-item" role="menuitem" (click)="closeDropdown()">My Likes</a>
|
||||
@if (user.isAdmin) {
|
||||
<a routerLink="/admin/users" class="dropdown-item" (click)="closeDropdown()">Users</a>
|
||||
<a routerLink="/admin/audit" class="dropdown-item" (click)="closeDropdown()">Audit</a>
|
||||
<a routerLink="/admin/suggestions" class="dropdown-item" (click)="closeDropdown()">Suggestions</a>
|
||||
<a routerLink="/admin/reports" class="dropdown-item" (click)="closeDropdown()">Reports</a>
|
||||
<a routerLink="/admin/users" class="dropdown-item" role="menuitem" (click)="closeDropdown()">Users</a>
|
||||
<a routerLink="/admin/audit" class="dropdown-item" role="menuitem" (click)="closeDropdown()">Audit</a>
|
||||
<a routerLink="/admin/suggestions" class="dropdown-item" role="menuitem" (click)="closeDropdown()">Suggestions</a>
|
||||
<a routerLink="/admin/reports" class="dropdown-item" role="menuitem" (click)="closeDropdown()">Reports</a>
|
||||
}
|
||||
<button (click)="logout()" class="dropdown-item logout-btn">Logout</button>
|
||||
<button (click)="logout()" class="dropdown-item logout-btn" role="menuitem">Logout</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
@@ -91,6 +105,27 @@ import { ApiService } from '../../services/api.service';
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.nav-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid var(--witch-purple);
|
||||
box-shadow: 0 2px 8px rgba(157, 78, 221, 0.3);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.brand-icon:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 4px 12px rgba(157, 78, 221, 0.5);
|
||||
}
|
||||
|
||||
.nav-brand h1 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
@@ -147,20 +182,35 @@ import { ApiService } from '../../services/api.service';
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-avatar-button {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--witch-lavender);
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-avatar:hover {
|
||||
.user-avatar-button:hover .user-avatar,
|
||||
.user-avatar-button:focus .user-avatar {
|
||||
border-color: var(--witch-moon);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.user-avatar-button:focus-visible {
|
||||
outline: 3px solid var(--witch-rose);
|
||||
outline-offset: 2px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
@@ -279,6 +329,7 @@ import { ApiService } from '../../services/api.service';
|
||||
export class HeaderComponent implements OnInit {
|
||||
authService = inject(AuthService);
|
||||
private apiService = inject(ApiService);
|
||||
private router = inject(Router);
|
||||
version = signal<string | null>(null);
|
||||
showDropdown = signal<boolean>(false);
|
||||
|
||||
@@ -289,6 +340,10 @@ export class HeaderComponent implements OnInit {
|
||||
});
|
||||
}
|
||||
|
||||
isCurrentRoute(route: string): boolean {
|
||||
return this.router.url.startsWith(route);
|
||||
}
|
||||
|
||||
toggleDropdown() {
|
||||
this.showDropdown.update(v => !v);
|
||||
}
|
||||
|
||||
@@ -92,7 +92,7 @@ import { Game, GameStatus, Book, BookStatus, Music, MusicType, Manga, MangaStatu
|
||||
<ul class="recent-list">
|
||||
@for (game of recentGames(); track game.id) {
|
||||
<li>
|
||||
<a routerLink="/games">{{ game.title }}</a>
|
||||
<a [routerLink]="['/games', game.id]">{{ game.title }}</a>
|
||||
@if (game.platform) {
|
||||
<span class="platform">({{ game.platform }})</span>
|
||||
}
|
||||
@@ -108,7 +108,7 @@ import { Game, GameStatus, Book, BookStatus, Music, MusicType, Manga, MangaStatu
|
||||
<ul class="recent-list">
|
||||
@for (book of recentBooks(); track book.id) {
|
||||
<li>
|
||||
<a routerLink="/books">{{ book.title }}</a>
|
||||
<a [routerLink]="['/books', book.id]">{{ book.title }}</a>
|
||||
<span class="author">by {{ book.author }}</span>
|
||||
</li>
|
||||
}
|
||||
@@ -122,7 +122,7 @@ import { Game, GameStatus, Book, BookStatus, Music, MusicType, Manga, MangaStatu
|
||||
<ul class="recent-list">
|
||||
@for (music of recentMusic(); track music.id) {
|
||||
<li>
|
||||
<a routerLink="/music">{{ music.title }}</a>
|
||||
<a [routerLink]="['/music', music.id]">{{ music.title }}</a>
|
||||
<span class="artist">by {{ music.artist }}</span>
|
||||
</li>
|
||||
}
|
||||
@@ -136,7 +136,7 @@ import { Game, GameStatus, Book, BookStatus, Music, MusicType, Manga, MangaStatu
|
||||
<ul class="recent-list">
|
||||
@for (manga of recentManga(); track manga.id) {
|
||||
<li>
|
||||
<a routerLink="/manga">{{ manga.title }}</a>
|
||||
<a [routerLink]="['/manga', manga.id]">{{ manga.title }}</a>
|
||||
<span class="author">by {{ manga.author }}</span>
|
||||
</li>
|
||||
}
|
||||
@@ -150,7 +150,7 @@ import { Game, GameStatus, Book, BookStatus, Music, MusicType, Manga, MangaStatu
|
||||
<ul class="recent-list">
|
||||
@for (show of recentShows(); track show.id) {
|
||||
<li>
|
||||
<a routerLink="/shows">{{ show.title }}</a>
|
||||
<a [routerLink]="['/shows', show.id]">{{ show.title }}</a>
|
||||
<span class="show-type">{{ formatShowType(show.type) }}</span>
|
||||
</li>
|
||||
}
|
||||
@@ -164,7 +164,7 @@ import { Game, GameStatus, Book, BookStatus, Music, MusicType, Manga, MangaStatu
|
||||
<ul class="recent-list">
|
||||
@for (art of recentArt(); track art.id) {
|
||||
<li>
|
||||
<a routerLink="/art">{{ art.title }}</a>
|
||||
<a [routerLink]="['/art', art.id]">{{ art.title }}</a>
|
||||
<span class="artist">by {{ art.artist }}</span>
|
||||
</li>
|
||||
}
|
||||
|
||||
@@ -0,0 +1,545 @@
|
||||
/**
|
||||
* @copyright 2026 NHCarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
|
||||
import { Component, OnInit, inject, signal } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import type {
|
||||
SuggestionsLeaderboard,
|
||||
LikesLeaderboard,
|
||||
CommentsLeaderboard,
|
||||
OverallLeaderboard,
|
||||
} from '@library/shared-types';
|
||||
import { LeaderboardService } from '../../services/leaderboard.service';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
|
||||
type LeaderboardTab = 'overall' | 'suggestions' | 'likes' | 'comments';
|
||||
|
||||
@Component({
|
||||
selector: 'app-leaderboard',
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterModule],
|
||||
template: `
|
||||
<div class="container">
|
||||
<h1>π Community Leaderboard</h1>
|
||||
<p class="subtitle">Celebrating our most engaged community members!</p>
|
||||
|
||||
<div class="tabs">
|
||||
<button
|
||||
(click)="setTab('overall')"
|
||||
[class.active]="activeTab() === 'overall'"
|
||||
class="tab-btn"
|
||||
>
|
||||
π Overall
|
||||
</button>
|
||||
<button
|
||||
(click)="setTab('suggestions')"
|
||||
[class.active]="activeTab() === 'suggestions'"
|
||||
class="tab-btn"
|
||||
>
|
||||
π‘ Suggestions
|
||||
</button>
|
||||
<button
|
||||
(click)="setTab('likes')"
|
||||
[class.active]="activeTab() === 'likes'"
|
||||
class="tab-btn"
|
||||
>
|
||||
β€οΈ Likes
|
||||
</button>
|
||||
<button
|
||||
(click)="setTab('comments')"
|
||||
[class.active]="activeTab() === 'comments'"
|
||||
class="tab-btn"
|
||||
>
|
||||
π¬ Comments
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if (loading()) {
|
||||
<div class="loading">Loading leaderboard...</div>
|
||||
} @else {
|
||||
@if (activeTab() === 'overall') {
|
||||
<div class="leaderboard">
|
||||
<h2>Overall Leaders</h2>
|
||||
<p class="description">Ranked by achievement points, diversity of engagement, and total activity</p>
|
||||
@if (overallLeaderboard().length === 0) {
|
||||
<p class="empty">No users on the leaderboard yet!</p>
|
||||
} @else {
|
||||
<div class="leaderboard-list">
|
||||
@for (user of overallLeaderboard(); track user.id; let i = $index) {
|
||||
<div class="leaderboard-item" [class.highlight]="user.id === authService.user()?.id">
|
||||
<div class="rank">
|
||||
@if (i === 0) {
|
||||
<span class="medal">π₯</span>
|
||||
} @else if (i === 1) {
|
||||
<span class="medal">π₯</span>
|
||||
} @else if (i === 2) {
|
||||
<span class="medal">π₯</span>
|
||||
} @else {
|
||||
<span class="rank-number">#{{ i + 1 }}</span>
|
||||
}
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<div class="user-header">
|
||||
@if (user.avatar) {
|
||||
<img [src]="user.avatar" [alt]="user.username" class="avatar">
|
||||
}
|
||||
<div class="user-details">
|
||||
<a [routerLink]="['/profile', user.slug || user.id]" class="username">
|
||||
{{ user.username }}
|
||||
</a>
|
||||
<div class="badges">
|
||||
@if (user.primaryBadge === 'STAFF') {
|
||||
<span class="badge staff-badge">STAFF</span>
|
||||
}
|
||||
@if (user.primaryBadge === 'MOD') {
|
||||
<span class="badge mod-badge">MOD</span>
|
||||
}
|
||||
@if (user.primaryBadge === 'VIP') {
|
||||
<span class="badge vip-badge">VIP</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<span class="stat">π― {{ user.achievementPoints }} pts</span>
|
||||
<span class="stat">π
{{ user.achievementCount }} achievements</span>
|
||||
<span class="stat">π‘ {{ user.totalSuggestions }} suggestions</span>
|
||||
<span class="stat">β€οΈ {{ user.totalLikes }} likes</span>
|
||||
<span class="stat">π¬ {{ user.totalComments }} comments</span>
|
||||
<span class="stat">π₯ {{ user.currentStreak }} day streak</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (activeTab() === 'suggestions') {
|
||||
<div class="leaderboard">
|
||||
<h2>Top Suggestions</h2>
|
||||
<p class="description">Ranked by total suggestions and acceptance rate</p>
|
||||
@if (suggestionsLeaderboard().length === 0) {
|
||||
<p class="empty">No users on the leaderboard yet!</p>
|
||||
} @else {
|
||||
<div class="leaderboard-list">
|
||||
@for (user of suggestionsLeaderboard(); track user.id; let i = $index) {
|
||||
<div class="leaderboard-item" [class.highlight]="user.id === authService.user()?.id">
|
||||
<div class="rank">
|
||||
@if (i === 0) {
|
||||
<span class="medal">π₯</span>
|
||||
} @else if (i === 1) {
|
||||
<span class="medal">π₯</span>
|
||||
} @else if (i === 2) {
|
||||
<span class="medal">π₯</span>
|
||||
} @else {
|
||||
<span class="rank-number">#{{ i + 1 }}</span>
|
||||
}
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<div class="user-header">
|
||||
@if (user.avatar) {
|
||||
<img [src]="user.avatar" [alt]="user.username" class="avatar">
|
||||
}
|
||||
<div class="user-details">
|
||||
<a [routerLink]="['/profile', user.slug || user.id]" class="username">
|
||||
{{ user.username }}
|
||||
</a>
|
||||
<div class="badges">
|
||||
@if (user.primaryBadge === 'STAFF') {
|
||||
<span class="badge staff-badge">STAFF</span>
|
||||
}
|
||||
@if (user.primaryBadge === 'MOD') {
|
||||
<span class="badge mod-badge">MOD</span>
|
||||
}
|
||||
@if (user.primaryBadge === 'VIP') {
|
||||
<span class="badge vip-badge">VIP</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<span class="stat">π‘ {{ user.totalSuggestions }} suggestions</span>
|
||||
<span class="stat">β
{{ user.acceptedSuggestions }} accepted</span>
|
||||
<span class="stat">π {{ user.acceptanceRate }}% acceptance rate</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (activeTab() === 'likes') {
|
||||
<div class="leaderboard">
|
||||
<h2>Top Likers</h2>
|
||||
<p class="description">Ranked by total likes given</p>
|
||||
@if (likesLeaderboard().length === 0) {
|
||||
<p class="empty">No users on the leaderboard yet!</p>
|
||||
} @else {
|
||||
<div class="leaderboard-list">
|
||||
@for (user of likesLeaderboard(); track user.id; let i = $index) {
|
||||
<div class="leaderboard-item" [class.highlight]="user.id === authService.user()?.id">
|
||||
<div class="rank">
|
||||
@if (i === 0) {
|
||||
<span class="medal">π₯</span>
|
||||
} @else if (i === 1) {
|
||||
<span class="medal">π₯</span>
|
||||
} @else if (i === 2) {
|
||||
<span class="medal">π₯</span>
|
||||
} @else {
|
||||
<span class="rank-number">#{{ i + 1 }}</span>
|
||||
}
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<div class="user-header">
|
||||
@if (user.avatar) {
|
||||
<img [src]="user.avatar" [alt]="user.username" class="avatar">
|
||||
}
|
||||
<div class="user-details">
|
||||
<a [routerLink]="['/profile', user.slug || user.id]" class="username">
|
||||
{{ user.username }}
|
||||
</a>
|
||||
<div class="badges">
|
||||
@if (user.primaryBadge === 'STAFF') {
|
||||
<span class="badge staff-badge">STAFF</span>
|
||||
}
|
||||
@if (user.primaryBadge === 'MOD') {
|
||||
<span class="badge mod-badge">MOD</span>
|
||||
}
|
||||
@if (user.primaryBadge === 'VIP') {
|
||||
<span class="badge vip-badge">VIP</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<span class="stat">β€οΈ {{ user.totalLikes }} likes given</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (activeTab() === 'comments') {
|
||||
<div class="leaderboard">
|
||||
<h2>Top Commenters</h2>
|
||||
<p class="description">Ranked by total comments posted</p>
|
||||
@if (commentsLeaderboard().length === 0) {
|
||||
<p class="empty">No users on the leaderboard yet!</p>
|
||||
} @else {
|
||||
<div class="leaderboard-list">
|
||||
@for (user of commentsLeaderboard(); track user.id; let i = $index) {
|
||||
<div class="leaderboard-item" [class.highlight]="user.id === authService.user()?.id">
|
||||
<div class="rank">
|
||||
@if (i === 0) {
|
||||
<span class="medal">π₯</span>
|
||||
} @else if (i === 1) {
|
||||
<span class="medal">π₯</span>
|
||||
} @else if (i === 2) {
|
||||
<span class="medal">π₯</span>
|
||||
} @else {
|
||||
<span class="rank-number">#{{ i + 1 }}</span>
|
||||
}
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<div class="user-header">
|
||||
@if (user.avatar) {
|
||||
<img [src]="user.avatar" [alt]="user.username" class="avatar">
|
||||
}
|
||||
<div class="user-details">
|
||||
<a [routerLink]="['/profile', user.slug || user.id]" class="username">
|
||||
{{ user.username }}
|
||||
</a>
|
||||
<div class="badges">
|
||||
@if (user.primaryBadge === 'STAFF') {
|
||||
<span class="badge staff-badge">STAFF</span>
|
||||
}
|
||||
@if (user.primaryBadge === 'MOD') {
|
||||
<span class="badge mod-badge">MOD</span>
|
||||
}
|
||||
@if (user.primaryBadge === 'VIP') {
|
||||
<span class="badge vip-badge">VIP</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<span class="stat">π¬ {{ user.totalComments }} comments</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: var(--witch-purple);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
color: var(--witch-plum);
|
||||
margin-bottom: 2rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
margin-bottom: 2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: var(--witch-lavender);
|
||||
color: var(--witch-purple);
|
||||
border: 2px solid var(--witch-lavender);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
background: var(--witch-mauve);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px var(--witch-shadow);
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
background: var(--witch-rose);
|
||||
color: var(--witch-moon);
|
||||
border-color: var(--witch-rose);
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: var(--witch-plum);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.leaderboard h2 {
|
||||
color: var(--witch-purple);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
color: var(--witch-plum);
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: var(--witch-mauve);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.leaderboard-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.leaderboard-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 2px solid var(--witch-lavender);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.leaderboard-item:hover {
|
||||
transform: translateX(4px);
|
||||
box-shadow: 0 4px 12px var(--witch-shadow);
|
||||
border-color: var(--witch-mauve);
|
||||
}
|
||||
|
||||
.leaderboard-item.highlight {
|
||||
background: linear-gradient(135deg, rgba(255, 215, 245, 0.3), rgba(255, 240, 250, 0.3));
|
||||
border-color: var(--witch-rose);
|
||||
box-shadow: 0 0 20px rgba(168, 87, 126, 0.2);
|
||||
}
|
||||
|
||||
.rank {
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.medal {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.rank-number {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--witch-plum);
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--witch-lavender);
|
||||
}
|
||||
|
||||
.user-details {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--witch-purple);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.username:hover {
|
||||
color: var(--witch-rose);
|
||||
}
|
||||
|
||||
.badges {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.staff-badge {
|
||||
background: linear-gradient(135deg, #e84393, #fd79a8);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mod-badge {
|
||||
background: linear-gradient(135deg, #00b894, #00cec9);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.vip-badge {
|
||||
background: linear-gradient(135deg, #ffd700, #ffaa00);
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.stat {
|
||||
font-size: 0.9rem;
|
||||
color: var(--witch-plum);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.tabs {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.leaderboard-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.rank {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.stats {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class LeaderboardComponent implements OnInit {
|
||||
leaderboardService = inject(LeaderboardService);
|
||||
authService = inject(AuthService);
|
||||
|
||||
activeTab = signal<LeaderboardTab>('overall');
|
||||
loading = signal(true);
|
||||
|
||||
overallLeaderboard = signal<OverallLeaderboard[]>([]);
|
||||
suggestionsLeaderboard = signal<SuggestionsLeaderboard[]>([]);
|
||||
likesLeaderboard = signal<LikesLeaderboard[]>([]);
|
||||
commentsLeaderboard = signal<CommentsLeaderboard[]>([]);
|
||||
|
||||
ngOnInit() {
|
||||
this.loadLeaderboards();
|
||||
}
|
||||
|
||||
loadLeaderboards() {
|
||||
this.loading.set(true);
|
||||
this.leaderboardService.getAllLeaderboards(25).subscribe({
|
||||
next: (data) => {
|
||||
this.overallLeaderboard.set(data.topOverall);
|
||||
this.suggestionsLeaderboard.set(data.topSuggestions);
|
||||
this.likesLeaderboard.set(data.topLikes);
|
||||
this.commentsLeaderboard.set(data.topComments);
|
||||
this.loading.set(false);
|
||||
},
|
||||
error: () => {
|
||||
this.loading.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setTab(tab: LeaderboardTab) {
|
||||
this.activeTab.set(tab);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,633 @@
|
||||
/**
|
||||
* @copyright 2026 NHCarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
|
||||
import { Component, OnInit, inject, signal } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterLink, ActivatedRoute, Router } from '@angular/router';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MangaService } from '../../services/manga.service';
|
||||
import { CommentsService } from '../../services/comments.service';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
import { SanitizeService } from '../../services/sanitize.service';
|
||||
import { CommentDisplayComponent } from '../comment-display/comment-display.component';
|
||||
import { LikeButtonComponent } from '../shared/like-button.component';
|
||||
import { Manga, Comment, MangaStatus } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-manga-detail',
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterLink, FormsModule, CommentDisplayComponent, LikeButtonComponent],
|
||||
template: `
|
||||
<div class="container">
|
||||
<div class="breadcrumb">
|
||||
<a routerLink="/manga" class="breadcrumb-link">β Back to Manga</a>
|
||||
</div>
|
||||
|
||||
@if (loading()) {
|
||||
<div class="loading">Loading manga details...</div>
|
||||
} @else if (error()) {
|
||||
<div class="error-state">
|
||||
<h2>Manga Not Found</h2>
|
||||
<p>{{ error() }}</p>
|
||||
<a routerLink="/manga" class="btn btn-primary">Return to Manga</a>
|
||||
</div>
|
||||
} @else if (manga()) {
|
||||
<div class="manga-detail-card">
|
||||
@if (manga()!.coverImage) {
|
||||
<div class="manga-cover-section">
|
||||
<img [src]="manga()!.coverImage" [alt]="manga()!.title" class="manga-cover-large">
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="manga-content">
|
||||
<div class="manga-header">
|
||||
<h1>{{ manga()!.title }}</h1>
|
||||
<span class="status status-{{ manga()!.status }}">
|
||||
{{ getStatusLabel(manga()!.status) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="author">by {{ manga()!.author }}</p>
|
||||
|
||||
@if (manga()!.rating) {
|
||||
<div class="info-row">
|
||||
<span class="info-label">Rating:</span>
|
||||
<div class="rating">
|
||||
@for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
|
||||
<span [class.filled]="star <= manga()!.rating!">β
</span>
|
||||
}
|
||||
<span class="rating-text">({{ manga()!.rating }}/10)</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (manga()!.timeSpent) {
|
||||
<div class="info-row">
|
||||
<span class="info-label">Reading Time:</span>
|
||||
<span class="info-value time-spent">{{ formatTimeSpent(manga()!.timeSpent!) }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (manga()!.dateStarted) {
|
||||
<div class="info-row">
|
||||
<span class="info-label">Started:</span>
|
||||
<span class="info-value">{{ formatDate(manga()!.dateStarted!) }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (manga()!.dateFinished) {
|
||||
<div class="info-row">
|
||||
<span class="info-label">Finished:</span>
|
||||
<span class="info-value">{{ formatDate(manga()!.dateFinished!) }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="info-row">
|
||||
<span class="info-label">Added:</span>
|
||||
<span class="info-value">{{ formatDate(manga()!.createdAt) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<span class="info-label">Last Updated:</span>
|
||||
<span class="info-value">{{ formatDate(manga()!.updatedAt) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="like-section">
|
||||
<app-like-button
|
||||
entityType="manga"
|
||||
[entityId]="manga()!.id"
|
||||
></app-like-button>
|
||||
</div>
|
||||
|
||||
@if (manga()!.notes) {
|
||||
<div class="notes-section">
|
||||
<h3>Notes</h3>
|
||||
<p class="notes">{{ manga()!.notes }}</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (manga()!.tags && manga()!.tags.length > 0) {
|
||||
<div class="tags-section">
|
||||
<h3>Tags</h3>
|
||||
<div class="tags-display">
|
||||
@for (tag of manga()!.tags; track tag) {
|
||||
<span class="tag-chip">{{ tag }}</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (manga()!.links && manga()!.links.length > 0) {
|
||||
<div class="links-section">
|
||||
<h3>External Links</h3>
|
||||
<div class="links-display">
|
||||
@for (link of manga()!.links; track link.url) {
|
||||
<a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
|
||||
{{ link.title }} β
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="comments-section">
|
||||
<h3>Comments</h3>
|
||||
@if (authService.isAuthenticated()) {
|
||||
@if (authService.user()?.isBanned) {
|
||||
<div class="banned-notice">
|
||||
You have been banned from commenting.
|
||||
</div>
|
||||
} @else {
|
||||
<form (ngSubmit)="addComment()" class="comment-form">
|
||||
<textarea
|
||||
[(ngModel)]="newCommentContent"
|
||||
name="comment"
|
||||
placeholder="Add a comment (Markdown supported)..."
|
||||
rows="3"
|
||||
></textarea>
|
||||
<button type="submit" class="btn btn-primary">Post Comment</button>
|
||||
</form>
|
||||
}
|
||||
} @else {
|
||||
<div class="auth-prompt">
|
||||
<p>Please sign in to comment.</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (commentsLoading()) {
|
||||
<div class="comments-loading">Loading comments...</div>
|
||||
} @else {
|
||||
<app-comment-display
|
||||
[comments]="comments"
|
||||
(edit)="handleCommentEdit($event)"
|
||||
(delete)="deleteComment($event)"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.breadcrumb-link {
|
||||
color: #f59e0b;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.breadcrumb-link:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: #666;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.error-state {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.error-state h2 {
|
||||
color: #991b1b;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.error-state p {
|
||||
color: #dc2626;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.manga-detail-card {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.manga-cover-section {
|
||||
width: 100%;
|
||||
background: #f3f4f6;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.manga-cover-large {
|
||||
max-width: 100%;
|
||||
max-height: 400px;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.manga-content {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.manga-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.manga-header h1 {
|
||||
margin: 0;
|
||||
font-size: 2rem;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.author {
|
||||
color: #6b7280;
|
||||
font-style: italic;
|
||||
font-size: 1.1rem;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-reading {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.status-completed {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.status-wantToRead {
|
||||
background: #e0e7ff;
|
||||
color: #3730a3;
|
||||
}
|
||||
|
||||
.status-retired {
|
||||
background: #f3f4f6;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-weight: 600;
|
||||
color: #4b5563;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.time-spent {
|
||||
color: #f59e0b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.rating span {
|
||||
color: #e5e7eb;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.rating span.filled {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.rating-text {
|
||||
margin-left: 0.5rem;
|
||||
font-size: 1rem;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.like-section {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.notes-section,
|
||||
.tags-section,
|
||||
.links-section {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.notes-section h3,
|
||||
.tags-section h3,
|
||||
.links-section h3,
|
||||
.comments-section h3 {
|
||||
font-size: 1.25rem;
|
||||
color: #1f2937;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.notes {
|
||||
font-size: 1rem;
|
||||
color: #4b5563;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.tags-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
background: #f59e0b;
|
||||
color: white;
|
||||
padding: 0.375rem 0.875rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.links-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.external-link {
|
||||
color: #f59e0b;
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 2px solid #f59e0b;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.external-link:hover {
|
||||
background: #f59e0b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.comments-section {
|
||||
margin-top: 2rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 2px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.comment-form {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.comment-form textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
resize: vertical;
|
||||
margin-bottom: 0.75rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.comment-form textarea:focus {
|
||||
outline: none;
|
||||
border-color: #f59e0b;
|
||||
}
|
||||
|
||||
.banned-notice {
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #991b1b;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.auth-prompt {
|
||||
background: #f3f4f6;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.auth-prompt p {
|
||||
margin: 0;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.comments-loading {
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
color: #6b7280;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.625rem 1.25rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #f59e0b;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.manga-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.manga-header h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class MangaDetailComponent implements OnInit {
|
||||
private readonly mangaService = inject(MangaService);
|
||||
private readonly commentsService = inject(CommentsService);
|
||||
readonly authService = inject(AuthService);
|
||||
private readonly sanitizeService = inject(SanitizeService);
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
private readonly router = inject(Router);
|
||||
|
||||
manga = signal<Manga | null>(null);
|
||||
comments = signal<Comment[]>([]);
|
||||
loading = signal(true);
|
||||
commentsLoading = signal(false);
|
||||
error = signal<string | null>(null);
|
||||
newCommentContent = '';
|
||||
|
||||
ngOnInit() {
|
||||
const mangaId = this.route.snapshot.paramMap.get('id');
|
||||
if (!mangaId) {
|
||||
this.error.set('No manga ID provided');
|
||||
this.loading.set(false);
|
||||
return;
|
||||
}
|
||||
|
||||
this.loadManga(mangaId);
|
||||
this.loadComments(mangaId);
|
||||
}
|
||||
|
||||
private loadManga(mangaId: string) {
|
||||
this.loading.set(true);
|
||||
this.mangaService.getMangaById(mangaId).subscribe({
|
||||
next: (manga) => {
|
||||
if (!manga) {
|
||||
this.error.set('Manga not found');
|
||||
} else {
|
||||
this.manga.set(manga);
|
||||
}
|
||||
this.loading.set(false);
|
||||
},
|
||||
error: () => {
|
||||
this.error.set('Failed to load manga. It may not exist or there was an error.');
|
||||
this.loading.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private loadComments(mangaId: string) {
|
||||
this.commentsLoading.set(true);
|
||||
this.commentsService.getCommentsForManga(mangaId).subscribe({
|
||||
next: (comments) => {
|
||||
this.comments.set(comments);
|
||||
this.commentsLoading.set(false);
|
||||
},
|
||||
error: () => {
|
||||
this.commentsLoading.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addComment() {
|
||||
const manga = this.manga();
|
||||
if (!manga || !this.newCommentContent.trim()) return;
|
||||
|
||||
this.commentsService.addCommentToManga(manga.id, { content: this.newCommentContent }).subscribe({
|
||||
next: (comment) => {
|
||||
this.comments.set([comment, ...this.comments()]);
|
||||
this.newCommentContent = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleCommentEdit(event: { commentId: string; content: string }) {
|
||||
const manga = this.manga();
|
||||
if (!manga) return;
|
||||
|
||||
this.commentsService.updateCommentOnManga(manga.id, event.commentId, event.content).subscribe({
|
||||
next: (updatedComment) => {
|
||||
this.comments.set(
|
||||
this.comments().map(c => c.id === event.commentId ? updatedComment : c)
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deleteComment(commentId: string) {
|
||||
const manga = this.manga();
|
||||
if (!manga || !confirm('Are you sure you want to delete this comment?')) return;
|
||||
|
||||
this.commentsService.deleteCommentFromManga(manga.id, commentId).subscribe({
|
||||
next: () => {
|
||||
this.comments.set(this.comments().filter(c => c.id !== commentId));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getStatusLabel(status: MangaStatus): string {
|
||||
switch (status) {
|
||||
case MangaStatus.reading: return 'Currently Reading';
|
||||
case MangaStatus.completed: return 'Completed';
|
||||
case MangaStatus.wantToRead: return 'Want to Read';
|
||||
case MangaStatus.retired: return 'Retired';
|
||||
}
|
||||
}
|
||||
|
||||
formatDate(date: Date | string): string {
|
||||
return new Date(date).toLocaleDateString('en-GB', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
}
|
||||
|
||||
formatTimeSpent(minutes: number): string {
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const mins = minutes % 60;
|
||||
|
||||
if (hours === 0) {
|
||||
return `${mins} minutes`;
|
||||
} else if (mins === 0) {
|
||||
return `${hours} hour${hours === 1 ? '' : 's'}`;
|
||||
} else {
|
||||
return `${hours} hour${hours === 1 ? '' : 's'} ${mins} minute${mins === 1 ? '' : 's'}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -7,6 +7,7 @@
|
||||
import { Component, OnInit, inject, signal, computed } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { MangaService } from '../../services/manga.service';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
import { CommentsService } from '../../services/comments.service';
|
||||
@@ -14,13 +15,12 @@ import { SanitizeService } from '../../services/sanitize.service';
|
||||
import { SuggestionService } from '../../services/suggestion.service';
|
||||
import { PaginationComponent } from '../shared/pagination.component';
|
||||
import { LikeButtonComponent } from '../shared/like-button.component';
|
||||
import { CommentDisplayComponent } from '../comment-display/comment-display.component';
|
||||
import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-manga-list',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent, CommentDisplayComponent],
|
||||
imports: [CommonModule, FormsModule, RouterLink, PaginationComponent, LikeButtonComponent],
|
||||
template: `
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
@@ -105,6 +105,34 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="timeHours">Time Spent (Hours)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="timeHours"
|
||||
[(ngModel)]="newMangaTimeHours"
|
||||
name="timeHours"
|
||||
min="0"
|
||||
placeholder="0"
|
||||
(ngModelChange)="updateNewMangaTimeSpent()"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="timeMinutes">Time Spent (Minutes)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="timeMinutes"
|
||||
[(ngModel)]="newMangaTimeMinutes"
|
||||
name="timeMinutes"
|
||||
min="0"
|
||||
max="59"
|
||||
placeholder="0"
|
||||
(ngModelChange)="updateNewMangaTimeSpent()"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="notes">Notes</label>
|
||||
<textarea
|
||||
@@ -256,6 +284,34 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="edit-timeHours">Time Spent (Hours)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="edit-timeHours"
|
||||
[(ngModel)]="editMangaTimeHours"
|
||||
name="timeHours"
|
||||
min="0"
|
||||
placeholder="0"
|
||||
(ngModelChange)="updateEditMangaTimeSpent()"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="edit-timeMinutes">Time Spent (Minutes)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="edit-timeMinutes"
|
||||
[(ngModel)]="editMangaTimeMinutes"
|
||||
name="timeMinutes"
|
||||
min="0"
|
||||
max="59"
|
||||
placeholder="0"
|
||||
(ngModelChange)="updateEditMangaTimeSpent()"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="edit-notes">Notes</label>
|
||||
<textarea
|
||||
@@ -505,78 +561,36 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
|
||||
<div class="manga-grid">
|
||||
@for (manga of paginatedManga(); track manga.id) {
|
||||
<div class="manga-card" [class.completed]="manga.status === MangaStatus.completed">
|
||||
@if (manga.coverImage) {
|
||||
<img [src]="manga.coverImage" [alt]="manga.title" class="manga-cover">
|
||||
}
|
||||
|
||||
<div class="manga-info">
|
||||
<h3>{{ manga.title }}</h3>
|
||||
<p class="author">by {{ manga.author }}</p>
|
||||
<span class="status status-{{ manga.status }}">
|
||||
{{ getStatusLabel(manga.status) }}
|
||||
</span>
|
||||
|
||||
@if (manga.rating) {
|
||||
<div class="rating">
|
||||
@for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
|
||||
<span [class.filled]="star <= manga.rating!">β
</span>
|
||||
}
|
||||
</div>
|
||||
<a [routerLink]="['/manga', manga.id]" class="card-link">
|
||||
@if (manga.coverImage) {
|
||||
<img [src]="manga.coverImage" [alt]="manga.title" class="manga-cover">
|
||||
}
|
||||
|
||||
<div class="manga-info">
|
||||
<h3>{{ manga.title }}</h3>
|
||||
<p class="author">by {{ manga.author }}</p>
|
||||
<span class="status status-{{ manga.status }}">
|
||||
{{ getStatusLabel(manga.status) }}
|
||||
</span>
|
||||
|
||||
@if (manga.rating) {
|
||||
<div class="rating">
|
||||
@for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
|
||||
<span [class.filled]="star <= manga.rating!">β
</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="card-actions">
|
||||
<app-like-button
|
||||
entityType="manga"
|
||||
[entityId]="manga.id"
|
||||
></app-like-button>
|
||||
|
||||
@if (manga.notes) {
|
||||
<p class="notes">{{ manga.notes }}</p>
|
||||
}
|
||||
|
||||
@if (manga.tags && manga.tags.length > 0) {
|
||||
<div class="tags-display">
|
||||
@for (tag of manga.tags; track tag) {
|
||||
<span class="tag-chip">{{ tag }}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (manga.links && manga.links.length > 0) {
|
||||
<div class="links-display">
|
||||
@for (link of manga.links; track link.url) {
|
||||
<a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
|
||||
{{ link.title }} β
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (manga.dateStarted) {
|
||||
<p class="date-started">
|
||||
Started: {{ formatDate(manga.dateStarted) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (manga.dateFinished) {
|
||||
<p class="date-finished">
|
||||
Finished: {{ formatDate(manga.dateFinished) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (manga.createdAt) {
|
||||
<p class="date-added">
|
||||
Added: {{ formatDate(manga.createdAt) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (manga.updatedAt) {
|
||||
<p class="date-updated">
|
||||
Updated: {{ formatDate(manga.updatedAt) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (authService.isAdmin()) {
|
||||
<div class="actions">
|
||||
<div class="admin-actions">
|
||||
<button (click)="startEdit(manga)" class="btn btn-secondary btn-sm">
|
||||
Edit
|
||||
</button>
|
||||
@@ -585,40 +599,6 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="comments-section">
|
||||
<button (click)="toggleComments(manga.id)" class="btn btn-secondary btn-sm comments-toggle">
|
||||
{{ expandedComments()[manga.id] ? 'Hide' : 'Show' }} Comments{{ comments()[manga.id] ? ' (' + getCommentCount(manga.id) + ')' : '' }}
|
||||
</button>
|
||||
|
||||
@if (expandedComments()[manga.id]) {
|
||||
<div class="comments-container">
|
||||
@if (authService.isAuthenticated()) {
|
||||
@if (authService.user()?.isBanned) {
|
||||
<div class="banned-notice">
|
||||
You have been banned from commenting.
|
||||
</div>
|
||||
} @else {
|
||||
<form (ngSubmit)="addComment(manga.id)" class="comment-form">
|
||||
<textarea
|
||||
[(ngModel)]="newCommentContent[manga.id]"
|
||||
name="comment"
|
||||
placeholder="Add a comment (Markdown supported)..."
|
||||
rows="2"
|
||||
></textarea>
|
||||
<button type="submit" class="btn btn-primary btn-sm">Post Comment</button>
|
||||
</form>
|
||||
}
|
||||
}
|
||||
|
||||
<app-comment-display
|
||||
[comments]="getCommentsSignal(manga.id)"
|
||||
(edit)="handleCommentEdit(manga.id, $event)"
|
||||
(delete)="deleteComment(manga.id, $event)"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -691,6 +671,13 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
@@ -822,6 +809,8 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.manga-card:hover {
|
||||
@@ -833,6 +822,13 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.manga-cover {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
@@ -846,6 +842,7 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
|
||||
.manga-info h3 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.author {
|
||||
@@ -861,6 +858,7 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.status-READING { background: #fef3c7; color: #92400e; }
|
||||
@@ -880,23 +878,18 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
|
||||
color: #ec4899;
|
||||
}
|
||||
|
||||
.notes {
|
||||
font-size: 0.9rem;
|
||||
color: #4b5563;
|
||||
margin: 0.5rem 0;
|
||||
.card-actions {
|
||||
padding: 0.75rem 1rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.date-started,
|
||||
.date-finished,
|
||||
.date-added,
|
||||
.date-updated {
|
||||
font-size: 0.85rem;
|
||||
color: #4b5563;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 1rem;
|
||||
.admin-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@@ -918,145 +911,6 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
|
||||
.btn-sm { padding: 0.25rem 0.75rem; font-size: 0.85rem; }
|
||||
.btn-xs { padding: 0.15rem 0.5rem; font-size: 0.75rem; }
|
||||
|
||||
.comments-section {
|
||||
margin-top: 1rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.comments-toggle {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.comments-container {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.comment-form {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.comment-form textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
resize: vertical;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.comment {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 4px;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.comment-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.comment-author {
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.discord-badge {
|
||||
background: #5865f2;
|
||||
color: white;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.vip-badge {
|
||||
background: linear-gradient(135deg, #ffd700, #ffaa00);
|
||||
color: #1a1a1a;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mod-badge {
|
||||
background: linear-gradient(135deg, #00b894, #00cec9);
|
||||
color: white;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.staff-badge {
|
||||
background: linear-gradient(135deg, #e84393, #fd79a8);
|
||||
color: white;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.comment-date {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
font-size: 0.9rem;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.comments-loading,
|
||||
.no-comments {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
color: #6b7280;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.banned-notice {
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #991b1b;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.comment-edit-form {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.comment-edit-form textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.comment-edit-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
@@ -1138,25 +992,6 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.tags-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
background: rgba(0, 184, 148, 0.2);
|
||||
color: #00b894;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.links-list {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.link-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -1177,28 +1012,6 @@ import { Manga, MangaStatus, CreateMangaDto, UpdateMangaDto, Comment, Suggestion
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.links-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.external-link {
|
||||
color: #00b894;
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
background: rgba(0, 184, 148, 0.1);
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.external-link:hover {
|
||||
background: rgba(0, 184, 148, 0.2);
|
||||
text-decoration: underline;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class MangaListComponent implements OnInit {
|
||||
@@ -1313,6 +1126,12 @@ export class MangaListComponent implements OnInit {
|
||||
|
||||
editManga: Partial<UpdateMangaDto> = {};
|
||||
|
||||
// Time tracking state
|
||||
newMangaTimeHours = 0;
|
||||
newMangaTimeMinutes = 0;
|
||||
editMangaTimeHours = 0;
|
||||
editMangaTimeMinutes = 0;
|
||||
|
||||
// Tags and links input state
|
||||
newTagInput = '';
|
||||
editTagInput = '';
|
||||
@@ -1405,6 +1224,8 @@ export class MangaListComponent implements OnInit {
|
||||
tags: [],
|
||||
links: []
|
||||
};
|
||||
this.newMangaTimeHours = 0;
|
||||
this.newMangaTimeMinutes = 0;
|
||||
this.newMangaImagePreview.set(null);
|
||||
this.imageError.set(null);
|
||||
this.newTagInput = '';
|
||||
@@ -1412,6 +1233,16 @@ export class MangaListComponent implements OnInit {
|
||||
this.newLinkUrl = '';
|
||||
}
|
||||
|
||||
updateNewMangaTimeSpent() {
|
||||
const totalMinutes = (this.newMangaTimeHours * 60) + this.newMangaTimeMinutes;
|
||||
this.newManga.timeSpent = totalMinutes > 0 ? totalMinutes : undefined;
|
||||
}
|
||||
|
||||
updateEditMangaTimeSpent() {
|
||||
const totalMinutes = (this.editMangaTimeHours * 60) + this.editMangaTimeMinutes;
|
||||
this.editManga.timeSpent = totalMinutes > 0 ? totalMinutes : undefined;
|
||||
}
|
||||
|
||||
addTag(target: 'new' | 'edit') {
|
||||
const input = target === 'new' ? this.newTagInput.trim() : this.editTagInput.trim();
|
||||
if (!input) return;
|
||||
@@ -1499,8 +1330,17 @@ export class MangaListComponent implements OnInit {
|
||||
notes: manga.notes,
|
||||
coverImage: manga.coverImage,
|
||||
tags: [...(manga.tags || [])],
|
||||
links: [...(manga.links || [])]
|
||||
links: [...(manga.links || [])],
|
||||
timeSpent: manga.timeSpent
|
||||
};
|
||||
// Populate time fields from existing timeSpent
|
||||
if (manga.timeSpent) {
|
||||
this.editMangaTimeHours = Math.floor(manga.timeSpent / 60);
|
||||
this.editMangaTimeMinutes = manga.timeSpent % 60;
|
||||
} else {
|
||||
this.editMangaTimeHours = 0;
|
||||
this.editMangaTimeMinutes = 0;
|
||||
}
|
||||
this.editMangaImagePreview.set(manga.coverImage || null);
|
||||
this.showAddForm.set(false);
|
||||
this.imageError.set(null);
|
||||
@@ -1590,6 +1430,19 @@ export class MangaListComponent implements OnInit {
|
||||
return new Date(date).toLocaleDateString();
|
||||
}
|
||||
|
||||
formatTimeSpent(minutes: number): string {
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const mins = minutes % 60;
|
||||
|
||||
if (hours === 0) {
|
||||
return `${mins}m`;
|
||||
} else if (mins === 0) {
|
||||
return `${hours}h`;
|
||||
} else {
|
||||
return `${hours}h ${mins}m`;
|
||||
}
|
||||
}
|
||||
|
||||
toggleComments(mangaId: string) {
|
||||
const expanded = this.expandedComments();
|
||||
const isCurrentlyExpanded = expanded[mangaId];
|
||||
|
||||
@@ -0,0 +1,667 @@
|
||||
/**
|
||||
* @copyright 2026 NHCarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
|
||||
import { Component, OnInit, inject, signal } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterLink, ActivatedRoute, Router } from '@angular/router';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MusicService } from '../../services/music.service';
|
||||
import { CommentsService } from '../../services/comments.service';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
import { SanitizeService } from '../../services/sanitize.service';
|
||||
import { CommentDisplayComponent } from '../comment-display/comment-display.component';
|
||||
import { LikeButtonComponent } from '../shared/like-button.component';
|
||||
import { Music, Comment, MusicStatus, MusicType } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-music-detail',
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterLink, FormsModule, CommentDisplayComponent, LikeButtonComponent],
|
||||
template: `
|
||||
<div class="container">
|
||||
<div class="breadcrumb">
|
||||
<a routerLink="/music" class="breadcrumb-link">β Back to Music</a>
|
||||
</div>
|
||||
|
||||
@if (loading()) {
|
||||
<div class="loading">Loading music details...</div>
|
||||
} @else if (error()) {
|
||||
<div class="error-state">
|
||||
<h2>Music Not Found</h2>
|
||||
<p>{{ error() }}</p>
|
||||
<a routerLink="/music" class="btn btn-primary">Return to Music</a>
|
||||
</div>
|
||||
} @else if (music()) {
|
||||
<div class="music-detail-card">
|
||||
@if (music()!.coverArt) {
|
||||
<div class="music-cover-section">
|
||||
<img [src]="music()!.coverArt" [alt]="music()!.title" class="music-cover-large">
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="music-content">
|
||||
<div class="music-header">
|
||||
<h1>{{ music()!.title }}</h1>
|
||||
<span class="type-badge type-{{ music()!.type }}">
|
||||
{{ getTypeLabel(music()!.type) }}
|
||||
</span>
|
||||
<span class="status status-{{ music()!.status }}">
|
||||
{{ getStatusLabel(music()!.status) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="artist">by {{ music()!.artist }}</p>
|
||||
|
||||
@if (music()!.rating) {
|
||||
<div class="info-row">
|
||||
<span class="info-label">Rating:</span>
|
||||
<div class="rating">
|
||||
@for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
|
||||
<span [class.filled]="star <= music()!.rating!">β
</span>
|
||||
}
|
||||
<span class="rating-text">({{ music()!.rating }}/10)</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (music()!.timeSpent) {
|
||||
<div class="info-row">
|
||||
<span class="info-label">Listening Time:</span>
|
||||
<span class="info-value time-spent">{{ formatTimeSpent(music()!.timeSpent!) }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (music()!.dateStarted) {
|
||||
<div class="info-row">
|
||||
<span class="info-label">Started:</span>
|
||||
<span class="info-value">{{ formatDate(music()!.dateStarted!) }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (music()!.dateFinished) {
|
||||
<div class="info-row">
|
||||
<span class="info-label">Finished:</span>
|
||||
<span class="info-value">{{ formatDate(music()!.dateFinished!) }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="info-row">
|
||||
<span class="info-label">Added:</span>
|
||||
<span class="info-value">{{ formatDate(music()!.createdAt) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<span class="info-label">Last Updated:</span>
|
||||
<span class="info-value">{{ formatDate(music()!.updatedAt) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="like-section">
|
||||
<app-like-button
|
||||
entityType="music"
|
||||
[entityId]="music()!.id"
|
||||
></app-like-button>
|
||||
</div>
|
||||
|
||||
@if (music()!.notes) {
|
||||
<div class="notes-section">
|
||||
<h3>Notes</h3>
|
||||
<p class="notes">{{ music()!.notes }}</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (music()!.tags && music()!.tags.length > 0) {
|
||||
<div class="tags-section">
|
||||
<h3>Tags</h3>
|
||||
<div class="tags-display">
|
||||
@for (tag of music()!.tags; track tag) {
|
||||
<span class="tag-chip">{{ tag }}</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (music()!.links && music()!.links.length > 0) {
|
||||
<div class="links-section">
|
||||
<h3>External Links</h3>
|
||||
<div class="links-display">
|
||||
@for (link of music()!.links; track link.url) {
|
||||
<a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
|
||||
{{ link.title }} β
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="comments-section">
|
||||
<h3>Comments</h3>
|
||||
@if (authService.isAuthenticated()) {
|
||||
@if (authService.user()?.isBanned) {
|
||||
<div class="banned-notice">
|
||||
You have been banned from commenting.
|
||||
</div>
|
||||
} @else {
|
||||
<form (ngSubmit)="addComment()" class="comment-form">
|
||||
<textarea
|
||||
[(ngModel)]="newCommentContent"
|
||||
name="comment"
|
||||
placeholder="Add a comment (Markdown supported)..."
|
||||
rows="3"
|
||||
></textarea>
|
||||
<button type="submit" class="btn btn-primary">Post Comment</button>
|
||||
</form>
|
||||
}
|
||||
} @else {
|
||||
<div class="auth-prompt">
|
||||
<p>Please sign in to comment.</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (commentsLoading()) {
|
||||
<div class="comments-loading">Loading comments...</div>
|
||||
} @else {
|
||||
<app-comment-display
|
||||
[comments]="comments"
|
||||
(edit)="handleCommentEdit($event)"
|
||||
(delete)="deleteComment($event)"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.breadcrumb-link {
|
||||
color: #74b9ff;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.breadcrumb-link:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: #666;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.error-state {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.error-state h2 {
|
||||
color: #991b1b;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.error-state p {
|
||||
color: #dc2626;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.music-detail-card {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.music-cover-section {
|
||||
width: 100%;
|
||||
background: #f3f4f6;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.music-cover-large {
|
||||
max-width: 100%;
|
||||
max-height: 400px;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.music-content {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.music-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.music-header h1 {
|
||||
margin: 0;
|
||||
font-size: 2rem;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.artist {
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
font-size: 1.1rem;
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
|
||||
.type-badge {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.type-album {
|
||||
background: #a78bfa;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.type-single {
|
||||
background: #fb923c;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.type-ep {
|
||||
background: #60a5fa;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-listening {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.status-completed {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.status-wantToListen {
|
||||
background: #e0e7ff;
|
||||
color: #3730a3;
|
||||
}
|
||||
|
||||
.status-retired {
|
||||
background: #f3f4f6;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-weight: 600;
|
||||
color: #4b5563;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.time-spent {
|
||||
color: #8b5cf6;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.rating span {
|
||||
color: #e5e7eb;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.rating span.filled {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.rating-text {
|
||||
margin-left: 0.5rem;
|
||||
font-size: 1rem;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.like-section {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.notes-section,
|
||||
.tags-section,
|
||||
.links-section {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.notes-section h3,
|
||||
.tags-section h3,
|
||||
.links-section h3,
|
||||
.comments-section h3 {
|
||||
font-size: 1.25rem;
|
||||
color: #1f2937;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.notes {
|
||||
font-size: 1rem;
|
||||
color: #4b5563;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.tags-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
background: #74b9ff;
|
||||
color: white;
|
||||
padding: 0.375rem 0.875rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.links-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.external-link {
|
||||
color: #74b9ff;
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 2px solid #74b9ff;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.external-link:hover {
|
||||
background: #74b9ff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.comments-section {
|
||||
margin-top: 2rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 2px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.comment-form {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.comment-form textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
resize: vertical;
|
||||
margin-bottom: 0.75rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.comment-form textarea:focus {
|
||||
outline: none;
|
||||
border-color: #74b9ff;
|
||||
}
|
||||
|
||||
.banned-notice {
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #991b1b;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.auth-prompt {
|
||||
background: #f3f4f6;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.auth-prompt p {
|
||||
margin: 0;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.comments-loading {
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
color: #6b7280;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.625rem 1.25rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #74b9ff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.music-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.music-header h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class MusicDetailComponent implements OnInit {
|
||||
private readonly musicService = inject(MusicService);
|
||||
private readonly commentsService = inject(CommentsService);
|
||||
readonly authService = inject(AuthService);
|
||||
private readonly sanitizeService = inject(SanitizeService);
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
private readonly router = inject(Router);
|
||||
|
||||
music = signal<Music | null>(null);
|
||||
comments = signal<Comment[]>([]);
|
||||
loading = signal(true);
|
||||
commentsLoading = signal(false);
|
||||
error = signal<string | null>(null);
|
||||
newCommentContent = '';
|
||||
|
||||
ngOnInit() {
|
||||
const musicId = this.route.snapshot.paramMap.get('id');
|
||||
if (!musicId) {
|
||||
this.error.set('No music ID provided');
|
||||
this.loading.set(false);
|
||||
return;
|
||||
}
|
||||
|
||||
this.loadMusic(musicId);
|
||||
this.loadComments(musicId);
|
||||
}
|
||||
|
||||
private loadMusic(musicId: string) {
|
||||
this.loading.set(true);
|
||||
this.musicService.getMusicById(musicId).subscribe({
|
||||
next: (music) => {
|
||||
if (!music) {
|
||||
this.error.set('Music not found');
|
||||
} else {
|
||||
this.music.set(music);
|
||||
}
|
||||
this.loading.set(false);
|
||||
},
|
||||
error: () => {
|
||||
this.error.set('Failed to load music. It may not exist or there was an error.');
|
||||
this.loading.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private loadComments(musicId: string) {
|
||||
this.commentsLoading.set(true);
|
||||
this.commentsService.getCommentsForMusic(musicId).subscribe({
|
||||
next: (comments) => {
|
||||
this.comments.set(comments);
|
||||
this.commentsLoading.set(false);
|
||||
},
|
||||
error: () => {
|
||||
this.commentsLoading.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addComment() {
|
||||
const music = this.music();
|
||||
if (!music || !this.newCommentContent.trim()) return;
|
||||
|
||||
this.commentsService.addCommentToMusic(music.id, { content: this.newCommentContent }).subscribe({
|
||||
next: (comment) => {
|
||||
this.comments.set([comment, ...this.comments()]);
|
||||
this.newCommentContent = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleCommentEdit(event: { commentId: string; content: string }) {
|
||||
const music = this.music();
|
||||
if (!music) return;
|
||||
|
||||
this.commentsService.updateCommentOnMusic(music.id, event.commentId, event.content).subscribe({
|
||||
next: (updatedComment) => {
|
||||
this.comments.set(
|
||||
this.comments().map(c => c.id === event.commentId ? updatedComment : c)
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deleteComment(commentId: string) {
|
||||
const music = this.music();
|
||||
if (!music || !confirm('Are you sure you want to delete this comment?')) return;
|
||||
|
||||
this.commentsService.deleteCommentFromMusic(music.id, commentId).subscribe({
|
||||
next: () => {
|
||||
this.comments.set(this.comments().filter(c => c.id !== commentId));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getTypeLabel(type: MusicType): string {
|
||||
switch (type) {
|
||||
case MusicType.album: return 'Album';
|
||||
case MusicType.single: return 'Single';
|
||||
case MusicType.ep: return 'EP';
|
||||
}
|
||||
}
|
||||
|
||||
getStatusLabel(status: MusicStatus): string {
|
||||
switch (status) {
|
||||
case MusicStatus.listening: return 'Currently Listening';
|
||||
case MusicStatus.completed: return 'Completed';
|
||||
case MusicStatus.wantToListen: return 'Want to Listen';
|
||||
case MusicStatus.retired: return 'Retired';
|
||||
}
|
||||
}
|
||||
|
||||
formatDate(date: Date | string): string {
|
||||
return new Date(date).toLocaleDateString('en-GB', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
}
|
||||
|
||||
formatTimeSpent(minutes: number): string {
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const mins = minutes % 60;
|
||||
|
||||
if (hours === 0) {
|
||||
return `${mins} minutes`;
|
||||
} else if (mins === 0) {
|
||||
return `${hours} hour${hours === 1 ? '' : 's'}`;
|
||||
} else {
|
||||
return `${hours} hour${hours === 1 ? '' : 's'} ${mins} minute${mins === 1 ? '' : 's'}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -7,6 +7,7 @@
|
||||
import { Component, OnInit, inject, signal, computed } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { MusicService } from '../../services/music.service';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
import { CommentsService } from '../../services/comments.service';
|
||||
@@ -14,13 +15,12 @@ import { SanitizeService } from '../../services/sanitize.service';
|
||||
import { SuggestionService } from '../../services/suggestion.service';
|
||||
import { PaginationComponent } from '../shared/pagination.component';
|
||||
import { LikeButtonComponent } from '../shared/like-button.component';
|
||||
import { CommentDisplayComponent } from '../comment-display/comment-display.component';
|
||||
import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-music-list',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent, CommentDisplayComponent],
|
||||
imports: [CommonModule, FormsModule, RouterLink, PaginationComponent, LikeButtonComponent],
|
||||
template: `
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
@@ -114,6 +114,34 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="timeHours">Time Spent (Hours)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="timeHours"
|
||||
[(ngModel)]="newMusicTimeHours"
|
||||
name="timeHours"
|
||||
min="0"
|
||||
placeholder="0"
|
||||
(ngModelChange)="updateNewMusicTimeSpent()"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="timeMinutes">Time Spent (Minutes)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="timeMinutes"
|
||||
[(ngModel)]="newMusicTimeMinutes"
|
||||
name="timeMinutes"
|
||||
min="0"
|
||||
max="59"
|
||||
placeholder="0"
|
||||
(ngModelChange)="updateNewMusicTimeSpent()"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="notes">Notes</label>
|
||||
<textarea
|
||||
@@ -274,6 +302,34 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="edit-timeHours">Time Spent (Hours)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="edit-timeHours"
|
||||
[(ngModel)]="editMusicTimeHours"
|
||||
name="timeHours"
|
||||
min="0"
|
||||
placeholder="0"
|
||||
(ngModelChange)="updateEditMusicTimeSpent()"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="edit-timeMinutes">Time Spent (Minutes)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="edit-timeMinutes"
|
||||
[(ngModel)]="editMusicTimeMinutes"
|
||||
name="timeMinutes"
|
||||
min="0"
|
||||
max="59"
|
||||
placeholder="0"
|
||||
(ngModelChange)="updateEditMusicTimeSpent()"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="edit-notes">Notes</label>
|
||||
<textarea
|
||||
@@ -567,92 +623,52 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
|
||||
<div class="music-grid">
|
||||
@for (music of paginatedMusic(); track music.id) {
|
||||
<div class="music-card" [class.completed]="music.status === MusicStatus.completed">
|
||||
@if (music.coverArt) {
|
||||
<img [src]="music.coverArt" [alt]="music.title" class="music-cover">
|
||||
} @else {
|
||||
<div class="music-cover placeholder">
|
||||
@switch (music.type) {
|
||||
@case (MusicType.album) { πΏ }
|
||||
@case (MusicType.single) { π΅ }
|
||||
@case (MusicType.ep) { πΆ }
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="music-info">
|
||||
<h3>{{ music.title }}</h3>
|
||||
<p class="artist">{{ music.artist }}</p>
|
||||
|
||||
<div class="badges">
|
||||
<span class="type-badge type-{{ music.type }}">
|
||||
{{ getTypeLabel(music.type) }}
|
||||
</span>
|
||||
<span class="status status-{{ music.status }}">
|
||||
{{ getStatusLabel(music.status) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@if (music.rating) {
|
||||
<div class="rating">
|
||||
@for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
|
||||
<span [class.filled]="star <= music.rating!">β
</span>
|
||||
<a [routerLink]="['/music', music.id]" class="card-link">
|
||||
@if (music.coverArt) {
|
||||
<img [src]="music.coverArt" [alt]="music.title" class="music-cover">
|
||||
} @else {
|
||||
<div class="music-cover placeholder">
|
||||
@switch (music.type) {
|
||||
@case (MusicType.album) { πΏ }
|
||||
@case (MusicType.single) { π΅ }
|
||||
@case (MusicType.ep) { πΆ }
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="music-info">
|
||||
<h3>{{ music.title }}</h3>
|
||||
<p class="artist">{{ music.artist }}</p>
|
||||
|
||||
@if (music.type) {
|
||||
<div class="badges">
|
||||
<span class="type-badge type-{{ music.type }}">
|
||||
{{ getTypeLabel(music.type) }}
|
||||
</span>
|
||||
<span class="status status-{{ music.status }}">
|
||||
{{ getStatusLabel(music.status) }}
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (music.rating) {
|
||||
<div class="rating">
|
||||
@for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
|
||||
<span [class.filled]="star <= music.rating!">β
</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="card-actions">
|
||||
<app-like-button
|
||||
entityType="music"
|
||||
[entityId]="music.id"
|
||||
></app-like-button>
|
||||
|
||||
@if (music.notes) {
|
||||
<p class="notes">{{ music.notes }}</p>
|
||||
}
|
||||
|
||||
@if (music.tags && music.tags.length > 0) {
|
||||
<div class="tags-display">
|
||||
@for (tag of music.tags; track tag) {
|
||||
<span class="tag-chip">{{ tag }}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (music.links && music.links.length > 0) {
|
||||
<div class="links-display">
|
||||
@for (link of music.links; track link.url) {
|
||||
<a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
|
||||
{{ link.title }} β
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (music.dateStarted) {
|
||||
<p class="date-started">
|
||||
Started: {{ formatDate(music.dateStarted) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (music.dateFinished) {
|
||||
<p class="date-finished">
|
||||
Finished: {{ formatDate(music.dateFinished) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (music.createdAt) {
|
||||
<p class="date-added">
|
||||
Added: {{ formatDate(music.createdAt) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (music.updatedAt) {
|
||||
<p class="date-updated">
|
||||
Updated: {{ formatDate(music.updatedAt) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (authService.isAdmin()) {
|
||||
<div class="actions">
|
||||
<div class="admin-actions">
|
||||
<button (click)="startEdit(music)" class="btn btn-secondary btn-sm">
|
||||
Edit
|
||||
</button>
|
||||
@@ -661,40 +677,6 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="comments-section">
|
||||
<button (click)="toggleComments(music.id)" class="btn btn-secondary btn-sm comments-toggle">
|
||||
{{ expandedComments()[music.id] ? 'Hide' : 'Show' }} Comments{{ comments()[music.id] ? ' (' + getCommentCount(music.id) + ')' : '' }}
|
||||
</button>
|
||||
|
||||
@if (expandedComments()[music.id]) {
|
||||
<div class="comments-container">
|
||||
@if (authService.isAuthenticated()) {
|
||||
@if (authService.user()?.isBanned) {
|
||||
<div class="banned-notice">
|
||||
You have been banned from commenting.
|
||||
</div>
|
||||
} @else {
|
||||
<form (ngSubmit)="addComment(music.id)" class="comment-form">
|
||||
<textarea
|
||||
[(ngModel)]="newCommentContent[music.id]"
|
||||
name="comment"
|
||||
placeholder="Add a comment (Markdown supported)..."
|
||||
rows="2"
|
||||
></textarea>
|
||||
<button type="submit" class="btn btn-primary btn-sm">Post Comment</button>
|
||||
</form>
|
||||
}
|
||||
}
|
||||
|
||||
<app-comment-display
|
||||
[comments]="getCommentsSignal(music.id)"
|
||||
(edit)="handleCommentEdit(music.id, $event)"
|
||||
(delete)="deleteComment(music.id, $event)"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -780,6 +762,13 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
|
||||
box-shadow: 0 0 0 3px rgba(168, 87, 126, 0.2);
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
@@ -927,6 +916,8 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
backdrop-filter: blur(10px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.music-card:hover {
|
||||
@@ -940,6 +931,17 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
|
||||
border-color: var(--witch-mauve);
|
||||
}
|
||||
|
||||
.card-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-link:hover h3 {
|
||||
color: var(--witch-rose);
|
||||
}
|
||||
|
||||
.music-cover {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
@@ -961,6 +963,7 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
|
||||
.music-info h3 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.artist {
|
||||
@@ -975,6 +978,19 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
padding: 1rem;
|
||||
border-top: 1px solid var(--witch-lavender);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.admin-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.type-badge {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
@@ -1030,25 +1046,6 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
|
||||
color: var(--witch-rose);
|
||||
}
|
||||
|
||||
.notes {
|
||||
font-size: 0.9rem;
|
||||
color: var(--witch-plum);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.date-started,
|
||||
.date-finished,
|
||||
.date-added,
|
||||
.date-updated {
|
||||
font-size: 0.85rem;
|
||||
color: var(--witch-plum);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
@@ -1099,159 +1096,6 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
|
||||
|
||||
.btn-xs { padding: 0.15rem 0.5rem; font-size: 0.75rem; }
|
||||
|
||||
.comments-section {
|
||||
margin-top: 1rem;
|
||||
border-top: 1px solid var(--witch-lavender);
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.comments-toggle {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.comments-container {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.comment-form {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.comment-form textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 2px solid var(--witch-lavender);
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
background-color: var(--witch-moon);
|
||||
color: var(--witch-purple);
|
||||
resize: vertical;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.comment-form textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--witch-rose);
|
||||
}
|
||||
|
||||
.comment {
|
||||
background: var(--witch-moon);
|
||||
border: 1px solid var(--witch-lavender);
|
||||
border-radius: 4px;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.comment-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.comment-author {
|
||||
font-weight: 500;
|
||||
color: var(--witch-plum);
|
||||
}
|
||||
|
||||
.discord-badge {
|
||||
background: #5865f2;
|
||||
color: white;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.vip-badge {
|
||||
background: linear-gradient(135deg, #ffd700, #ffaa00);
|
||||
color: #1a1a1a;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mod-badge {
|
||||
background: linear-gradient(135deg, #00b894, #00cec9);
|
||||
color: white;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.staff-badge {
|
||||
background: linear-gradient(135deg, #e84393, #fd79a8);
|
||||
color: white;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.comment-date {
|
||||
font-size: 0.75rem;
|
||||
color: var(--witch-mauve);
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
font-size: 0.9rem;
|
||||
color: var(--witch-purple);
|
||||
}
|
||||
|
||||
.comments-loading,
|
||||
.no-comments {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
color: var(--witch-mauve);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.banned-notice {
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #991b1b;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.comment-edit-form {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.comment-edit-form textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 2px solid var(--witch-lavender);
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
background-color: var(--witch-moon);
|
||||
color: var(--witch-purple);
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.comment-edit-form textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--witch-rose);
|
||||
}
|
||||
|
||||
.comment-edit-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
@@ -1333,21 +1177,6 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.tags-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
background: rgba(116, 185, 255, 0.2);
|
||||
color: #74b9ff;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.links-list {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
@@ -1372,28 +1201,6 @@ import { Music, MusicStatus, MusicType, CreateMusicDto, UpdateMusicDto, Comment,
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.links-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.external-link {
|
||||
color: #74b9ff;
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
background: rgba(116, 185, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.external-link:hover {
|
||||
background: rgba(116, 185, 255, 0.2);
|
||||
text-decoration: underline;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class MusicListComponent implements OnInit {
|
||||
@@ -1526,6 +1333,12 @@ export class MusicListComponent implements OnInit {
|
||||
|
||||
editMusicData: Partial<UpdateMusicDto> = {};
|
||||
|
||||
// Time tracking state
|
||||
newMusicTimeHours = 0;
|
||||
newMusicTimeMinutes = 0;
|
||||
editMusicTimeHours = 0;
|
||||
editMusicTimeMinutes = 0;
|
||||
|
||||
// Tags and links input state
|
||||
newTagInput = '';
|
||||
editTagInput = '';
|
||||
@@ -1633,6 +1446,8 @@ export class MusicListComponent implements OnInit {
|
||||
tags: [],
|
||||
links: []
|
||||
};
|
||||
this.newMusicTimeHours = 0;
|
||||
this.newMusicTimeMinutes = 0;
|
||||
this.newMusicImagePreview.set(null);
|
||||
this.imageError.set(null);
|
||||
this.newTagInput = '';
|
||||
@@ -1640,6 +1455,16 @@ export class MusicListComponent implements OnInit {
|
||||
this.newLinkUrl = '';
|
||||
}
|
||||
|
||||
updateNewMusicTimeSpent() {
|
||||
const totalMinutes = (this.newMusicTimeHours * 60) + this.newMusicTimeMinutes;
|
||||
this.newMusic.timeSpent = totalMinutes > 0 ? totalMinutes : undefined;
|
||||
}
|
||||
|
||||
updateEditMusicTimeSpent() {
|
||||
const totalMinutes = (this.editMusicTimeHours * 60) + this.editMusicTimeMinutes;
|
||||
this.editMusicData.timeSpent = totalMinutes > 0 ? totalMinutes : undefined;
|
||||
}
|
||||
|
||||
addTag(target: 'new' | 'edit') {
|
||||
const input = target === 'new' ? this.newTagInput.trim() : this.editTagInput.trim();
|
||||
if (!input) return;
|
||||
@@ -1729,8 +1554,17 @@ export class MusicListComponent implements OnInit {
|
||||
notes: music.notes,
|
||||
coverArt: music.coverArt,
|
||||
tags: [...(music.tags || [])],
|
||||
links: [...(music.links || [])]
|
||||
links: [...(music.links || [])],
|
||||
timeSpent: music.timeSpent
|
||||
};
|
||||
// Populate time fields from existing timeSpent
|
||||
if (music.timeSpent) {
|
||||
this.editMusicTimeHours = Math.floor(music.timeSpent / 60);
|
||||
this.editMusicTimeMinutes = music.timeSpent % 60;
|
||||
} else {
|
||||
this.editMusicTimeHours = 0;
|
||||
this.editMusicTimeMinutes = 0;
|
||||
}
|
||||
this.editMusicImagePreview.set(music.coverArt || null);
|
||||
this.showAddForm.set(false);
|
||||
this.imageError.set(null);
|
||||
@@ -1769,6 +1603,19 @@ export class MusicListComponent implements OnInit {
|
||||
return new Date(date).toLocaleDateString();
|
||||
}
|
||||
|
||||
formatTimeSpent(minutes: number): string {
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const mins = minutes % 60;
|
||||
|
||||
if (hours === 0) {
|
||||
return `${mins}m`;
|
||||
} else if (mins === 0) {
|
||||
return `${hours}h`;
|
||||
} else {
|
||||
return `${hours}h ${mins}m`;
|
||||
}
|
||||
}
|
||||
|
||||
// Image handling methods
|
||||
onImageSelected(event: Event, target: 'new' | 'edit' | 'suggest') {
|
||||
const input = event.target as HTMLInputElement;
|
||||
|
||||
@@ -17,8 +17,8 @@ import { ReportReason } from '@library/shared-types';
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule],
|
||||
template: `
|
||||
<div class="modal-overlay" (click)="onOverlayClick($event)" (keydown.escape)="closeModal.emit()" tabindex="-1">
|
||||
<div class="modal-card" role="dialog" aria-labelledby="modal-title" aria-modal="true">
|
||||
<div class="modal-overlay" (click)="onOverlayClick($event)" (keydown.escape)="onClose()" tabindex="-1" role="presentation">
|
||||
<div class="modal-card" role="dialog" aria-labelledby="modal-title" aria-modal="true" tabindex="-1">
|
||||
<div class="modal-header">
|
||||
<h2 id="modal-title">{{ modalTitle() }}</h2>
|
||||
<button
|
||||
|
||||
@@ -23,10 +23,11 @@ import { take } from 'rxjs';
|
||||
[class.liked]="liked()"
|
||||
[disabled]="loading() || !isAuthenticated()"
|
||||
(click)="toggleLike()"
|
||||
[title]="getTitle()"
|
||||
[attr.aria-label]="getAriaLabel()"
|
||||
[attr.aria-pressed]="liked()"
|
||||
>
|
||||
<span class="heart-icon">{{ liked() ? 'β€οΈ' : 'π€' }}</span>
|
||||
<span class="like-count">{{ count() }}</span>
|
||||
<span class="heart-icon" aria-hidden="true">{{ liked() ? 'β€οΈ' : 'π€' }}</span>
|
||||
<span class="like-count" aria-label="{{ count() }} likes">{{ count() }}</span>
|
||||
</button>
|
||||
</div>
|
||||
`,
|
||||
@@ -164,4 +165,15 @@ export class LikeButtonComponent implements OnInit {
|
||||
}
|
||||
return this.liked() ? 'Unlike' : 'Like';
|
||||
}
|
||||
|
||||
getAriaLabel(): string {
|
||||
const count = this.count();
|
||||
const likeText = count === 1 ? 'like' : 'likes';
|
||||
if (!this.isAuthenticated()) {
|
||||
return `Sign in to like. ${count} ${likeText}`;
|
||||
}
|
||||
return this.liked()
|
||||
? `Unlike. ${count} ${likeText}`
|
||||
: `Like. ${count} ${likeText}`;
|
||||
}
|
||||
}
|
||||
@@ -12,39 +12,44 @@ import { CommonModule } from '@angular/common';
|
||||
standalone: true,
|
||||
imports: [CommonModule],
|
||||
template: `
|
||||
<div class="pagination-container">
|
||||
<div class="pagination-info">
|
||||
<nav class="pagination-container" aria-label="Pagination">
|
||||
<div class="pagination-info" role="status" aria-live="polite">
|
||||
Showing {{ startItem() }} - {{ endItem() }} of {{ totalItems }} items
|
||||
</div>
|
||||
|
||||
<div class="pagination-controls">
|
||||
<div class="pagination-controls" role="navigation" aria-label="Page navigation">
|
||||
<button
|
||||
(click)="onPageChange(1)"
|
||||
[disabled]="currentPage === 1"
|
||||
class="btn btn-sm pagination-btn"
|
||||
title="First page"
|
||||
aria-label="Go to first page"
|
||||
type="button"
|
||||
>
|
||||
βͺ
|
||||
<span aria-hidden="true">βͺ</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
(click)="onPageChange(currentPage - 1)"
|
||||
[disabled]="currentPage === 1"
|
||||
class="btn btn-sm pagination-btn"
|
||||
title="Previous page"
|
||||
aria-label="Go to previous page"
|
||||
type="button"
|
||||
>
|
||||
β
|
||||
<span aria-hidden="true">β</span>
|
||||
</button>
|
||||
|
||||
<div class="page-numbers">
|
||||
<div class="page-numbers" role="group" aria-label="Page numbers">
|
||||
@for (page of pageNumbers(); track page) {
|
||||
@if (page === '...') {
|
||||
<span class="page-ellipsis">{{ page }}</span>
|
||||
<span class="page-ellipsis" aria-hidden="true">{{ page }}</span>
|
||||
} @else {
|
||||
<button
|
||||
(click)="onPageChange(+page)"
|
||||
[class.active]="currentPage === +page"
|
||||
[attr.aria-current]="currentPage === +page ? 'page' : null"
|
||||
[attr.aria-label]="'Go to page ' + page"
|
||||
class="btn btn-sm pagination-btn page-number"
|
||||
type="button"
|
||||
>
|
||||
{{ page }}
|
||||
</button>
|
||||
@@ -56,18 +61,20 @@ import { CommonModule } from '@angular/common';
|
||||
(click)="onPageChange(currentPage + 1)"
|
||||
[disabled]="currentPage === totalPages()"
|
||||
class="btn btn-sm pagination-btn"
|
||||
title="Next page"
|
||||
aria-label="Go to next page"
|
||||
type="button"
|
||||
>
|
||||
β
|
||||
<span aria-hidden="true">β</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
(click)="onPageChange(totalPages())"
|
||||
[disabled]="currentPage === totalPages()"
|
||||
class="btn btn-sm pagination-btn"
|
||||
title="Last page"
|
||||
aria-label="Go to last page"
|
||||
type="button"
|
||||
>
|
||||
β«
|
||||
<span aria-hidden="true">β«</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -78,6 +85,7 @@ import { CommonModule } from '@angular/common';
|
||||
[value]="pageSize"
|
||||
(change)="onPageSizeChange($event)"
|
||||
class="page-size-select"
|
||||
aria-label="Select number of items per page"
|
||||
>
|
||||
<option value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
@@ -85,7 +93,7 @@ import { CommonModule } from '@angular/common';
|
||||
<option value="100">100</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
`,
|
||||
styles: [`
|
||||
.pagination-container {
|
||||
|
||||
@@ -0,0 +1,664 @@
|
||||
/**
|
||||
* @copyright 2026 NHCarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
|
||||
import { Component, OnInit, inject, signal } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterLink, ActivatedRoute, Router } from '@angular/router';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { ShowsService } from '../../services/shows.service';
|
||||
import { CommentsService } from '../../services/comments.service';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
import { SanitizeService } from '../../services/sanitize.service';
|
||||
import { CommentDisplayComponent } from '../comment-display/comment-display.component';
|
||||
import { LikeButtonComponent } from '../shared/like-button.component';
|
||||
import { Show, Comment, ShowStatus, ShowType } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-show-detail',
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterLink, FormsModule, CommentDisplayComponent, LikeButtonComponent],
|
||||
template: `
|
||||
<div class="container">
|
||||
<div class="breadcrumb">
|
||||
<a routerLink="/shows" class="breadcrumb-link">β Back to Shows</a>
|
||||
</div>
|
||||
|
||||
@if (loading()) {
|
||||
<div class="loading">Loading show details...</div>
|
||||
} @else if (error()) {
|
||||
<div class="error-state">
|
||||
<h2>Show Not Found</h2>
|
||||
<p>{{ error() }}</p>
|
||||
<a routerLink="/shows" class="btn btn-primary">Return to Shows</a>
|
||||
</div>
|
||||
} @else if (show()) {
|
||||
<div class="show-detail-card">
|
||||
@if (show()!.coverImage) {
|
||||
<div class="show-poster-section">
|
||||
<img [src]="show()!.coverImage" [alt]="show()!.title" class="show-poster-large">
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="show-content">
|
||||
<div class="show-header">
|
||||
<h1>{{ show()!.title }}</h1>
|
||||
<span class="type-badge type-{{ show()!.type }}">
|
||||
{{ getTypeLabel(show()!.type) }}
|
||||
</span>
|
||||
<span class="status status-{{ show()!.status }}">
|
||||
{{ getStatusLabel(show()!.status) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@if (show()!.rating) {
|
||||
<div class="info-row">
|
||||
<span class="info-label">Rating:</span>
|
||||
<div class="rating">
|
||||
@for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
|
||||
<span [class.filled]="star <= show()!.rating!">β
</span>
|
||||
}
|
||||
<span class="rating-text">({{ show()!.rating }}/10)</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (show()!.timeSpent) {
|
||||
<div class="info-row">
|
||||
<span class="info-label">Watch Time:</span>
|
||||
<span class="info-value time-spent">{{ formatTimeSpent(show()!.timeSpent!) }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (show()!.dateStarted) {
|
||||
<div class="info-row">
|
||||
<span class="info-label">Started:</span>
|
||||
<span class="info-value">{{ formatDate(show()!.dateStarted!) }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (show()!.dateFinished) {
|
||||
<div class="info-row">
|
||||
<span class="info-label">Finished:</span>
|
||||
<span class="info-value">{{ formatDate(show()!.dateFinished!) }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="info-row">
|
||||
<span class="info-label">Added:</span>
|
||||
<span class="info-value">{{ formatDate(show()!.createdAt) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<span class="info-label">Last Updated:</span>
|
||||
<span class="info-value">{{ formatDate(show()!.updatedAt) }}</span>
|
||||
</div>
|
||||
|
||||
<div class="like-section">
|
||||
<app-like-button
|
||||
entityType="show"
|
||||
[entityId]="show()!.id"
|
||||
></app-like-button>
|
||||
</div>
|
||||
|
||||
@if (show()!.notes) {
|
||||
<div class="notes-section">
|
||||
<h3>Notes</h3>
|
||||
<p class="notes">{{ show()!.notes }}</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (show()!.tags && show()!.tags.length > 0) {
|
||||
<div class="tags-section">
|
||||
<h3>Tags</h3>
|
||||
<div class="tags-display">
|
||||
@for (tag of show()!.tags; track tag) {
|
||||
<span class="tag-chip">{{ tag }}</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (show()!.links && show()!.links.length > 0) {
|
||||
<div class="links-section">
|
||||
<h3>External Links</h3>
|
||||
<div class="links-display">
|
||||
@for (link of show()!.links; track link.url) {
|
||||
<a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
|
||||
{{ link.title }} β
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="comments-section">
|
||||
<h3>Comments</h3>
|
||||
@if (authService.isAuthenticated()) {
|
||||
@if (authService.user()?.isBanned) {
|
||||
<div class="banned-notice">
|
||||
You have been banned from commenting.
|
||||
</div>
|
||||
} @else {
|
||||
<form (ngSubmit)="addComment()" class="comment-form">
|
||||
<textarea
|
||||
[(ngModel)]="newCommentContent"
|
||||
name="comment"
|
||||
placeholder="Add a comment (Markdown supported)..."
|
||||
rows="3"
|
||||
></textarea>
|
||||
<button type="submit" class="btn btn-primary">Post Comment</button>
|
||||
</form>
|
||||
}
|
||||
} @else {
|
||||
<div class="auth-prompt">
|
||||
<p>Please sign in to comment.</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (commentsLoading()) {
|
||||
<div class="comments-loading">Loading comments...</div>
|
||||
} @else {
|
||||
<app-comment-display
|
||||
[comments]="comments"
|
||||
(edit)="handleCommentEdit($event)"
|
||||
(delete)="deleteComment($event)"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
`,
|
||||
styles: [`
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.breadcrumb-link {
|
||||
color: #10b981;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.breadcrumb-link:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: #666;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.error-state {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.error-state h2 {
|
||||
color: #991b1b;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.error-state p {
|
||||
color: #dc2626;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.show-detail-card {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.show-poster-section {
|
||||
width: 100%;
|
||||
background: #f3f4f6;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.show-poster-large {
|
||||
max-width: 100%;
|
||||
max-height: 400px;
|
||||
object-fit: contain;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.show-content {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.show-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.show-header h1 {
|
||||
margin: 0;
|
||||
font-size: 2rem;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.type-badge {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.type-tvSeries {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.type-anime {
|
||||
background: #ec4899;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.type-film {
|
||||
background: #8b5cf6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.type-documentary {
|
||||
background: #14b8a6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-watching {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.status-completed {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.status-wantToWatch {
|
||||
background: #e0e7ff;
|
||||
color: #3730a3;
|
||||
}
|
||||
|
||||
.status-retired {
|
||||
background: #f3f4f6;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-weight: 600;
|
||||
color: #4b5563;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.time-spent {
|
||||
color: #10b981;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.rating span {
|
||||
color: #e5e7eb;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.rating span.filled {
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
.rating-text {
|
||||
margin-left: 0.5rem;
|
||||
font-size: 1rem;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.like-section {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.notes-section,
|
||||
.tags-section,
|
||||
.links-section {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.notes-section h3,
|
||||
.tags-section h3,
|
||||
.links-section h3,
|
||||
.comments-section h3 {
|
||||
font-size: 1.25rem;
|
||||
color: #1f2937;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.notes {
|
||||
font-size: 1rem;
|
||||
color: #4b5563;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.tags-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
padding: 0.375rem 0.875rem;
|
||||
border-radius: 12px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.links-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.external-link {
|
||||
color: #10b981;
|
||||
text-decoration: none;
|
||||
font-size: 0.95rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 2px solid #10b981;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.external-link:hover {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.comments-section {
|
||||
margin-top: 2rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 2px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.comment-form {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.comment-form textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
resize: vertical;
|
||||
margin-bottom: 0.75rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.comment-form textarea:focus {
|
||||
outline: none;
|
||||
border-color: #10b981;
|
||||
}
|
||||
|
||||
.banned-notice {
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #991b1b;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.auth-prompt {
|
||||
background: #f3f4f6;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.auth-prompt p {
|
||||
margin: 0;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.comments-loading {
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
color: #6b7280;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.625rem 1.25rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.show-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.show-header h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class ShowDetailComponent implements OnInit {
|
||||
private readonly showsService = inject(ShowsService);
|
||||
private readonly commentsService = inject(CommentsService);
|
||||
readonly authService = inject(AuthService);
|
||||
private readonly sanitizeService = inject(SanitizeService);
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
private readonly router = inject(Router);
|
||||
|
||||
show = signal<Show | null>(null);
|
||||
comments = signal<Comment[]>([]);
|
||||
loading = signal(true);
|
||||
commentsLoading = signal(false);
|
||||
error = signal<string | null>(null);
|
||||
newCommentContent = '';
|
||||
|
||||
ngOnInit() {
|
||||
const showId = this.route.snapshot.paramMap.get('id');
|
||||
if (!showId) {
|
||||
this.error.set('No show ID provided');
|
||||
this.loading.set(false);
|
||||
return;
|
||||
}
|
||||
|
||||
this.loadShow(showId);
|
||||
this.loadComments(showId);
|
||||
}
|
||||
|
||||
private loadShow(showId: string) {
|
||||
this.loading.set(true);
|
||||
this.showsService.getShowById(showId).subscribe({
|
||||
next: (show) => {
|
||||
if (!show) {
|
||||
this.error.set('Show not found');
|
||||
} else {
|
||||
this.show.set(show);
|
||||
}
|
||||
this.loading.set(false);
|
||||
},
|
||||
error: () => {
|
||||
this.error.set('Failed to load show. It may not exist or there was an error.');
|
||||
this.loading.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private loadComments(showId: string) {
|
||||
this.commentsLoading.set(true);
|
||||
this.commentsService.getCommentsForShow(showId).subscribe({
|
||||
next: (comments) => {
|
||||
this.comments.set(comments);
|
||||
this.commentsLoading.set(false);
|
||||
},
|
||||
error: () => {
|
||||
this.commentsLoading.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addComment() {
|
||||
const show = this.show();
|
||||
if (!show || !this.newCommentContent.trim()) return;
|
||||
|
||||
this.commentsService.addCommentToShow(show.id, { content: this.newCommentContent }).subscribe({
|
||||
next: (comment) => {
|
||||
this.comments.set([comment, ...this.comments()]);
|
||||
this.newCommentContent = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleCommentEdit(event: { commentId: string; content: string }) {
|
||||
const show = this.show();
|
||||
if (!show) return;
|
||||
|
||||
this.commentsService.updateCommentOnShow(show.id, event.commentId, event.content).subscribe({
|
||||
next: (updatedComment) => {
|
||||
this.comments.set(
|
||||
this.comments().map(c => c.id === event.commentId ? updatedComment : c)
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
deleteComment(commentId: string) {
|
||||
const show = this.show();
|
||||
if (!show || !confirm('Are you sure you want to delete this comment?')) return;
|
||||
|
||||
this.commentsService.deleteCommentFromShow(show.id, commentId).subscribe({
|
||||
next: () => {
|
||||
this.comments.set(this.comments().filter(c => c.id !== commentId));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getTypeLabel(type: ShowType): string {
|
||||
switch (type) {
|
||||
case ShowType.tvSeries: return 'TV Series';
|
||||
case ShowType.anime: return 'Anime';
|
||||
case ShowType.film: return 'Film';
|
||||
case ShowType.documentary: return 'Documentary';
|
||||
}
|
||||
}
|
||||
|
||||
getStatusLabel(status: ShowStatus): string {
|
||||
switch (status) {
|
||||
case ShowStatus.watching: return 'Currently Watching';
|
||||
case ShowStatus.completed: return 'Completed';
|
||||
case ShowStatus.wantToWatch: return 'Want to Watch';
|
||||
case ShowStatus.retired: return 'Retired';
|
||||
}
|
||||
}
|
||||
|
||||
formatDate(date: Date | string): string {
|
||||
return new Date(date).toLocaleDateString('en-GB', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
}
|
||||
|
||||
formatTimeSpent(minutes: number): string {
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const mins = minutes % 60;
|
||||
|
||||
if (hours === 0) {
|
||||
return `${mins} minutes`;
|
||||
} else if (mins === 0) {
|
||||
return `${hours} hour${hours === 1 ? '' : 's'}`;
|
||||
} else {
|
||||
return `${hours} hour${hours === 1 ? '' : 's'} ${mins} minute${mins === 1 ? '' : 's'}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -6,6 +6,7 @@
|
||||
|
||||
import { Component, OnInit, inject, signal, computed } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { ShowsService } from '../../services/shows.service';
|
||||
import { AuthService } from '../../services/auth.service';
|
||||
@@ -14,13 +15,12 @@ import { SanitizeService } from '../../services/sanitize.service';
|
||||
import { SuggestionService } from '../../services/suggestion.service';
|
||||
import { PaginationComponent } from '../shared/pagination.component';
|
||||
import { LikeButtonComponent } from '../shared/like-button.component';
|
||||
import { CommentDisplayComponent } from '../comment-display/comment-display.component';
|
||||
import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, SuggestionEntity, Link } from '@library/shared-types';
|
||||
|
||||
@Component({
|
||||
selector: 'app-shows-list',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule, PaginationComponent, LikeButtonComponent, CommentDisplayComponent],
|
||||
imports: [CommonModule, RouterLink, FormsModule, PaginationComponent, LikeButtonComponent],
|
||||
template: `
|
||||
<div class="container">
|
||||
<div class="header-section">
|
||||
@@ -103,6 +103,34 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="timeHours">Time Spent (Hours)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="timeHours"
|
||||
[(ngModel)]="newShowTimeHours"
|
||||
name="timeHours"
|
||||
min="0"
|
||||
placeholder="0"
|
||||
(ngModelChange)="updateNewShowTimeSpent()"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="timeMinutes">Time Spent (Minutes)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="timeMinutes"
|
||||
[(ngModel)]="newShowTimeMinutes"
|
||||
name="timeMinutes"
|
||||
min="0"
|
||||
max="59"
|
||||
placeholder="0"
|
||||
(ngModelChange)="updateNewShowTimeSpent()"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="notes">Notes</label>
|
||||
<textarea
|
||||
@@ -252,6 +280,34 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="edit-timeHours">Time Spent (Hours)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="edit-timeHours"
|
||||
[(ngModel)]="editShowTimeHours"
|
||||
name="timeHours"
|
||||
min="0"
|
||||
placeholder="0"
|
||||
(ngModelChange)="updateEditShowTimeSpent()"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="edit-timeMinutes">Time Spent (Minutes)</label>
|
||||
<input
|
||||
type="number"
|
||||
id="edit-timeMinutes"
|
||||
[(ngModel)]="editShowTimeMinutes"
|
||||
name="timeMinutes"
|
||||
min="0"
|
||||
max="59"
|
||||
placeholder="0"
|
||||
(ngModelChange)="updateEditShowTimeSpent()"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="edit-notes">Notes</label>
|
||||
<textarea
|
||||
@@ -499,78 +555,38 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
|
||||
<div class="shows-grid">
|
||||
@for (show of paginatedShows(); track show.id) {
|
||||
<div class="show-card" [class.completed]="show.status === ShowStatus.completed">
|
||||
@if (show.coverImage) {
|
||||
<img [src]="show.coverImage" [alt]="show.title" class="show-cover">
|
||||
}
|
||||
|
||||
<div class="show-info">
|
||||
<h3>{{ show.title }}</h3>
|
||||
<p class="type">{{ getTypeLabel(show.type) }}</p>
|
||||
<span class="status status-{{ show.status }}">
|
||||
{{ getStatusLabel(show.status) }}
|
||||
</span>
|
||||
|
||||
@if (show.rating) {
|
||||
<div class="rating">
|
||||
@for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
|
||||
<span [class.filled]="star <= show.rating!">β
</span>
|
||||
}
|
||||
</div>
|
||||
<a [routerLink]="['/shows', show.id]" class="card-link">
|
||||
@if (show.coverImage) {
|
||||
<img [src]="show.coverImage" [alt]="show.title" class="show-cover">
|
||||
}
|
||||
|
||||
<div class="show-info">
|
||||
<h3>{{ show.title }}</h3>
|
||||
@if (show.type) {
|
||||
<p class="type">{{ getTypeLabel(show.type) }}</p>
|
||||
}
|
||||
<span class="status status-{{ show.status }}">
|
||||
{{ getStatusLabel(show.status) }}
|
||||
</span>
|
||||
|
||||
@if (show.rating) {
|
||||
<div class="rating">
|
||||
@for (star of [1,2,3,4,5,6,7,8,9,10]; track star) {
|
||||
<span [class.filled]="star <= show.rating!">β
</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="card-actions">
|
||||
<app-like-button
|
||||
entityType="show"
|
||||
[entityId]="show.id"
|
||||
></app-like-button>
|
||||
|
||||
@if (show.notes) {
|
||||
<p class="notes">{{ show.notes }}</p>
|
||||
}
|
||||
|
||||
@if (show.tags && show.tags.length > 0) {
|
||||
<div class="tags-display">
|
||||
@for (tag of show.tags; track tag) {
|
||||
<span class="tag-chip">{{ tag }}</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (show.links && show.links.length > 0) {
|
||||
<div class="links-display">
|
||||
@for (link of show.links; track link.url) {
|
||||
<a [href]="link.url" target="_blank" rel="noopener noreferrer" class="external-link">
|
||||
{{ link.title }} β
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (show.dateStarted) {
|
||||
<p class="date-started">
|
||||
Started: {{ formatDate(show.dateStarted) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (show.dateFinished) {
|
||||
<p class="date-finished">
|
||||
Finished: {{ formatDate(show.dateFinished) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (show.createdAt) {
|
||||
<p class="date-added">
|
||||
Added: {{ formatDate(show.createdAt) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (show.updatedAt) {
|
||||
<p class="date-updated">
|
||||
Updated: {{ formatDate(show.updatedAt) }}
|
||||
</p>
|
||||
}
|
||||
|
||||
@if (authService.isAdmin()) {
|
||||
<div class="actions">
|
||||
<div class="admin-actions">
|
||||
<button (click)="startEdit(show)" class="btn btn-secondary btn-sm">
|
||||
Edit
|
||||
</button>
|
||||
@@ -579,40 +595,6 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="comments-section">
|
||||
<button (click)="toggleComments(show.id)" class="btn btn-secondary btn-sm comments-toggle">
|
||||
{{ expandedComments()[show.id] ? 'Hide' : 'Show' }} Comments{{ comments()[show.id] ? ' (' + getCommentCount(show.id) + ')' : '' }}
|
||||
</button>
|
||||
|
||||
@if (expandedComments()[show.id]) {
|
||||
<div class="comments-container">
|
||||
@if (authService.isAuthenticated()) {
|
||||
@if (authService.user()?.isBanned) {
|
||||
<div class="banned-notice">
|
||||
You have been banned from commenting.
|
||||
</div>
|
||||
} @else {
|
||||
<form (ngSubmit)="addComment(show.id)" class="comment-form">
|
||||
<textarea
|
||||
[(ngModel)]="newCommentContent[show.id]"
|
||||
name="comment"
|
||||
placeholder="Add a comment (Markdown supported)..."
|
||||
rows="2"
|
||||
></textarea>
|
||||
<button type="submit" class="btn btn-primary btn-sm">Post Comment</button>
|
||||
</form>
|
||||
}
|
||||
}
|
||||
|
||||
<app-comment-display
|
||||
[comments]="getCommentsSignal(show.id)"
|
||||
(edit)="handleCommentEdit(show.id, $event)"
|
||||
(delete)="deleteComment(show.id, $event)"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@@ -685,6 +667,13 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
@@ -816,6 +805,8 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.show-card:hover {
|
||||
@@ -827,6 +818,17 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-link:hover h3 {
|
||||
color: #e84393;
|
||||
}
|
||||
|
||||
.show-cover {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
@@ -840,6 +842,7 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
|
||||
.show-info h3 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.type {
|
||||
@@ -859,6 +862,7 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
|
||||
.status-WATCHING { background: #fef3c7; color: #92400e; }
|
||||
.status-COMPLETED { background: #d1fae5; color: #065f46; }
|
||||
.status-WANT_TO_WATCH { background: #e0e7ff; color: #3730a3; }
|
||||
.status-RETIRED { background: #fecaca; color: #991b1b; }
|
||||
|
||||
.rating {
|
||||
margin: 0.5rem 0;
|
||||
@@ -873,23 +877,18 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
|
||||
color: #8b5cf6;
|
||||
}
|
||||
|
||||
.notes {
|
||||
font-size: 0.9rem;
|
||||
color: #4b5563;
|
||||
margin: 0.5rem 0;
|
||||
.card-actions {
|
||||
padding: 1rem;
|
||||
padding-top: 0;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.date-started,
|
||||
.date-finished,
|
||||
.date-added,
|
||||
.date-updated {
|
||||
font-size: 0.85rem;
|
||||
color: #4b5563;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 1rem;
|
||||
.admin-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@@ -911,145 +910,6 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
|
||||
.btn-sm { padding: 0.25rem 0.75rem; font-size: 0.85rem; }
|
||||
.btn-xs { padding: 0.15rem 0.5rem; font-size: 0.75rem; }
|
||||
|
||||
.comments-section {
|
||||
margin-top: 1rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.comments-toggle {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.comments-container {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.comment-form {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.comment-form textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
resize: vertical;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.comment {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 4px;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.comment-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.comment-author {
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.discord-badge {
|
||||
background: #5865f2;
|
||||
color: white;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.vip-badge {
|
||||
background: linear-gradient(135deg, #ffd700, #ffaa00);
|
||||
color: #1a1a1a;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mod-badge {
|
||||
background: linear-gradient(135deg, #00b894, #00cec9);
|
||||
color: white;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.staff-badge {
|
||||
background: linear-gradient(135deg, #e84393, #fd79a8);
|
||||
color: white;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.comment-date {
|
||||
font-size: 0.75rem;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
font-size: 0.9rem;
|
||||
color: #4b5563;
|
||||
}
|
||||
|
||||
.comments-loading,
|
||||
.no-comments {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
color: #6b7280;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.banned-notice {
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
color: #991b1b;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.comment-edit-form {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.comment-edit-form textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.comment-edit-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.image-preview {
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
@@ -1131,13 +991,6 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.tags-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
background: rgba(232, 67, 147, 0.2);
|
||||
color: #e84393;
|
||||
@@ -1170,28 +1023,6 @@ import { Show, ShowStatus, ShowType, CreateShowDto, UpdateShowDto, Comment, Sugg
|
||||
flex: 1;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.links-display {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.external-link {
|
||||
color: #e84393;
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.2rem 0.5rem;
|
||||
background: rgba(232, 67, 147, 0.1);
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.external-link:hover {
|
||||
background: rgba(232, 67, 147, 0.2);
|
||||
text-decoration: underline;
|
||||
}
|
||||
`]
|
||||
})
|
||||
export class ShowsListComponent implements OnInit {
|
||||
@@ -1307,6 +1138,12 @@ export class ShowsListComponent implements OnInit {
|
||||
|
||||
editShow: Partial<UpdateShowDto> = {};
|
||||
|
||||
// Time tracking state
|
||||
newShowTimeHours = 0;
|
||||
newShowTimeMinutes = 0;
|
||||
editShowTimeHours = 0;
|
||||
editShowTimeMinutes = 0;
|
||||
|
||||
// Tags and links input state
|
||||
newTagInput = '';
|
||||
editTagInput = '';
|
||||
@@ -1408,6 +1245,8 @@ export class ShowsListComponent implements OnInit {
|
||||
tags: [],
|
||||
links: []
|
||||
};
|
||||
this.newShowTimeHours = 0;
|
||||
this.newShowTimeMinutes = 0;
|
||||
this.newShowImagePreview.set(null);
|
||||
this.imageError.set(null);
|
||||
this.newTagInput = '';
|
||||
@@ -1415,6 +1254,16 @@ export class ShowsListComponent implements OnInit {
|
||||
this.newLinkUrl = '';
|
||||
}
|
||||
|
||||
updateNewShowTimeSpent() {
|
||||
const totalMinutes = (this.newShowTimeHours * 60) + this.newShowTimeMinutes;
|
||||
this.newShow.timeSpent = totalMinutes > 0 ? totalMinutes : undefined;
|
||||
}
|
||||
|
||||
updateEditShowTimeSpent() {
|
||||
const totalMinutes = (this.editShowTimeHours * 60) + this.editShowTimeMinutes;
|
||||
this.editShow.timeSpent = totalMinutes > 0 ? totalMinutes : undefined;
|
||||
}
|
||||
|
||||
addTag(target: 'new' | 'edit') {
|
||||
const input = target === 'new' ? this.newTagInput.trim() : this.editTagInput.trim();
|
||||
if (!input) return;
|
||||
@@ -1502,8 +1351,17 @@ export class ShowsListComponent implements OnInit {
|
||||
notes: show.notes,
|
||||
coverImage: show.coverImage,
|
||||
tags: [...(show.tags || [])],
|
||||
links: [...(show.links || [])]
|
||||
links: [...(show.links || [])],
|
||||
timeSpent: show.timeSpent
|
||||
};
|
||||
// Populate time fields from existing timeSpent
|
||||
if (show.timeSpent) {
|
||||
this.editShowTimeHours = Math.floor(show.timeSpent / 60);
|
||||
this.editShowTimeMinutes = show.timeSpent % 60;
|
||||
} else {
|
||||
this.editShowTimeHours = 0;
|
||||
this.editShowTimeMinutes = 0;
|
||||
}
|
||||
this.editShowImagePreview.set(show.coverImage || null);
|
||||
this.showAddForm.set(false);
|
||||
this.imageError.set(null);
|
||||
@@ -1593,6 +1451,19 @@ export class ShowsListComponent implements OnInit {
|
||||
return new Date(date).toLocaleDateString();
|
||||
}
|
||||
|
||||
formatTimeSpent(minutes: number): string {
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const mins = minutes % 60;
|
||||
|
||||
if (hours === 0) {
|
||||
return `${mins}m`;
|
||||
} else if (mins === 0) {
|
||||
return `${hours}h`;
|
||||
} else {
|
||||
return `${hours}h ${mins}m`;
|
||||
}
|
||||
}
|
||||
|
||||
toggleComments(showId: string) {
|
||||
const expanded = this.expandedComments();
|
||||
const isCurrentlyExpanded = expanded[showId];
|
||||
|
||||
@@ -79,6 +79,24 @@
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.toast-close:focus-visible {
|
||||
outline: 3px solid var(--witch-rose);
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(400px);
|
||||
|
||||
@@ -4,17 +4,21 @@
|
||||
@author Naomi Carrigan
|
||||
-->
|
||||
|
||||
<div class="toast-container">
|
||||
<div
|
||||
class="toast-container"
|
||||
role="region"
|
||||
aria-label="Notifications"
|
||||
aria-live="polite"
|
||||
aria-atomic="false"
|
||||
>
|
||||
@for (toast of toastService.toastList(); track toast.id) {
|
||||
<div
|
||||
class="toast toast-{{ toast.type }}"
|
||||
(click)="toastService.remove(toast.id)"
|
||||
(keyup.enter)="toastService.remove(toast.id)"
|
||||
(keyup.space)="toastService.remove(toast.id)"
|
||||
tabindex="0"
|
||||
role="button"
|
||||
[attr.role]="toast.type === 'error' ? 'alert' : 'status'"
|
||||
[attr.aria-live]="toast.type === 'error' ? 'assertive' : 'polite'"
|
||||
aria-atomic="true"
|
||||
>
|
||||
<div class="toast-icon">
|
||||
<div class="toast-icon" aria-hidden="true">
|
||||
@switch (toast.type) {
|
||||
@case ('error') { β }
|
||||
@case ('success') { β
}
|
||||
@@ -22,8 +26,16 @@
|
||||
@case ('warning') { β οΈ }
|
||||
}
|
||||
</div>
|
||||
<div class="toast-message">{{ toast.message }}</div>
|
||||
<button class="toast-close" (click)="toastService.remove(toast.id)">Γ</button>
|
||||
<div class="toast-message">
|
||||
<span class="sr-only">{{ getTypeLabel(toast.type) }}:</span>
|
||||
{{ toast.message }}
|
||||
</div>
|
||||
<button
|
||||
class="toast-close"
|
||||
(click)="toastService.remove(toast.id)"
|
||||
[attr.aria-label]="'Dismiss ' + getTypeLabel(toast.type) + ' notification'"
|
||||
type="button"
|
||||
>Γ</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -15,4 +15,14 @@ import { ToastService } from '../../services/toast.service';
|
||||
})
|
||||
export class ToastComponent {
|
||||
public toastService = inject(ToastService);
|
||||
|
||||
getTypeLabel(type: string): string {
|
||||
switch (type) {
|
||||
case 'error': return 'Error';
|
||||
case 'success': return 'Success';
|
||||
case 'warning': return 'Warning';
|
||||
case 'info': return 'Information';
|
||||
default: return 'Notification';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user