feat: Improve admin dashboard and add weighted song selection
- Replace filename column with activation count - Add pagination (10 items per page) and search functionality - Add delete functionality (removes DB entry and file) - Remove manual title/artist input (auto-extract from ID3 tags) - Replace text buttons with emoji icons (Edit, Delete, Save, Cancel) - Implement weighted random selection for daily puzzles - Add custom favicon - Fix docker-compose.yml configuration
This commit is contained in:
Hördle Bot
@@ -8,6 +8,7 @@ interface Song {
|
||||
artist: string;
|
||||
filename: string;
|
||||
createdAt: string;
|
||||
activations: number;
|
||||
}
|
||||
|
||||
type SortField = 'title' | 'artist';
|
||||
@@ -17,8 +18,6 @@ export default function AdminPage() {
|
||||
const [password, setPassword] = useState('');
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [title, setTitle] = useState('');
|
||||
const [artist, setArtist] = useState('');
|
||||
const [message, setMessage] = useState('');
|
||||
const [songs, setSongs] = useState<Song[]>([]);
|
||||
|
||||
@@ -31,6 +30,11 @@ export default function AdminPage() {
|
||||
const [sortField, setSortField] = useState<SortField>('artist');
|
||||
const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
|
||||
|
||||
// Search and pagination state
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const itemsPerPage = 10;
|
||||
|
||||
const handleLogin = async () => {
|
||||
const res = await fetch('/api/admin/login', {
|
||||
method: 'POST',
|
||||
@@ -58,8 +62,6 @@ export default function AdminPage() {
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
if (title) formData.append('title', title);
|
||||
if (artist) formData.append('artist', artist);
|
||||
|
||||
setMessage('Uploading...');
|
||||
const res = await fetch('/api/songs', {
|
||||
@@ -69,8 +71,6 @@ export default function AdminPage() {
|
||||
|
||||
if (res.ok) {
|
||||
setMessage('Song uploaded successfully!');
|
||||
setTitle('');
|
||||
setArtist('');
|
||||
setFile(null);
|
||||
fetchSongs();
|
||||
} else {
|
||||
@@ -105,6 +105,24 @@ export default function AdminPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: number, title: string) => {
|
||||
if (!confirm(`Are you sure you want to delete "${title}"? This will also delete the file.`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const res = await fetch('/api/songs', {
|
||||
method: 'DELETE',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ id }),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
fetchSongs();
|
||||
} else {
|
||||
alert('Failed to delete song');
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (field: SortField) => {
|
||||
if (sortField === field) {
|
||||
setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
|
||||
@@ -114,7 +132,13 @@ export default function AdminPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const sortedSongs = [...songs].sort((a, b) => {
|
||||
// Filter and sort songs
|
||||
const filteredSongs = songs.filter(song =>
|
||||
song.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
song.artist.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
|
||||
const sortedSongs = [...filteredSongs].sort((a, b) => {
|
||||
const valA = a[sortField].toLowerCase();
|
||||
const valB = b[sortField].toLowerCase();
|
||||
|
||||
@@ -123,6 +147,16 @@ export default function AdminPage() {
|
||||
return 0;
|
||||
});
|
||||
|
||||
// Pagination
|
||||
const totalPages = Math.ceil(sortedSongs.length / itemsPerPage);
|
||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||
const paginatedSongs = sortedSongs.slice(startIndex, startIndex + itemsPerPage);
|
||||
|
||||
// Reset to page 1 when search changes
|
||||
useEffect(() => {
|
||||
setCurrentPage(1);
|
||||
}, [searchQuery]);
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return (
|
||||
<div className="container" style={{ justifyContent: 'center' }}>
|
||||
@@ -148,7 +182,7 @@ export default function AdminPage() {
|
||||
<h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '1rem' }}>Upload New Song</h2>
|
||||
<form onSubmit={handleUpload}>
|
||||
<div className="form-group">
|
||||
<label className="form-label">MP3 File (Required)</label>
|
||||
<label className="form-label">MP3 File (Title and Artist will be extracted from ID3 tags)</label>
|
||||
<input
|
||||
type="file"
|
||||
accept="audio/mpeg"
|
||||
@@ -157,24 +191,6 @@ export default function AdminPage() {
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">Title (Optional - extracted from file if empty)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={e => setTitle(e.target.value)}
|
||||
className="form-input"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label className="form-label">Artist (Optional - extracted from file if empty)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={artist}
|
||||
onChange={e => setArtist(e.target.value)}
|
||||
className="form-input"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" className="btn-primary">
|
||||
Upload Song
|
||||
</button>
|
||||
@@ -184,6 +200,18 @@ export default function AdminPage() {
|
||||
|
||||
<div className="admin-card">
|
||||
<h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '1rem' }}>Song Library</h2>
|
||||
|
||||
{/* Search */}
|
||||
<div style={{ marginBottom: '1rem' }}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by title or artist..."
|
||||
value={searchQuery}
|
||||
onChange={e => setSearchQuery(e.target.value)}
|
||||
className="form-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.875rem' }}>
|
||||
<thead>
|
||||
@@ -201,12 +229,12 @@ export default function AdminPage() {
|
||||
>
|
||||
Artist {sortField === 'artist' && (sortDirection === 'asc' ? '↑' : '↓')}
|
||||
</th>
|
||||
<th style={{ padding: '0.75rem' }}>Filename</th>
|
||||
<th style={{ padding: '0.75rem' }}>Activations</th>
|
||||
<th style={{ padding: '0.75rem' }}>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sortedSongs.map(song => (
|
||||
{paginatedSongs.map(song => (
|
||||
<tr key={song.id} style={{ borderBottom: '1px solid #e5e7eb' }}>
|
||||
<td style={{ padding: '0.75rem' }}>{song.id}</td>
|
||||
|
||||
@@ -230,20 +258,22 @@ export default function AdminPage() {
|
||||
style={{ padding: '0.25rem' }}
|
||||
/>
|
||||
</td>
|
||||
<td style={{ padding: '0.75rem', color: '#666' }}>{song.filename}</td>
|
||||
<td style={{ padding: '0.75rem', color: '#666' }}>{song.activations}</td>
|
||||
<td style={{ padding: '0.75rem' }}>
|
||||
<div style={{ display: 'flex', gap: '0.5rem' }}>
|
||||
<button
|
||||
onClick={() => saveEditing(song.id)}
|
||||
style={{ color: 'green', cursor: 'pointer', border: 'none', background: 'none', fontWeight: 'bold' }}
|
||||
style={{ fontSize: '1.25rem', cursor: 'pointer', border: 'none', background: 'none' }}
|
||||
title="Save"
|
||||
>
|
||||
Save
|
||||
✅
|
||||
</button>
|
||||
<button
|
||||
onClick={cancelEditing}
|
||||
style={{ color: 'red', cursor: 'pointer', border: 'none', background: 'none' }}
|
||||
style={{ fontSize: '1.25rem', cursor: 'pointer', border: 'none', background: 'none' }}
|
||||
title="Cancel"
|
||||
>
|
||||
Cancel
|
||||
❌
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
@@ -252,29 +282,74 @@ export default function AdminPage() {
|
||||
<>
|
||||
<td style={{ padding: '0.75rem', fontWeight: 'bold' }}>{song.title}</td>
|
||||
<td style={{ padding: '0.75rem' }}>{song.artist}</td>
|
||||
<td style={{ padding: '0.75rem', color: '#666' }}>{song.filename}</td>
|
||||
<td style={{ padding: '0.75rem', color: '#666' }}>{song.activations}</td>
|
||||
<td style={{ padding: '0.75rem' }}>
|
||||
<button
|
||||
onClick={() => startEditing(song)}
|
||||
style={{ color: 'blue', cursor: 'pointer', border: 'none', background: 'none', textDecoration: 'underline' }}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<div style={{ display: 'flex', gap: '0.5rem' }}>
|
||||
<button
|
||||
onClick={() => startEditing(song)}
|
||||
style={{ fontSize: '1.25rem', cursor: 'pointer', border: 'none', background: 'none' }}
|
||||
title="Edit"
|
||||
>
|
||||
✏️
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(song.id, song.title)}
|
||||
style={{ fontSize: '1.25rem', cursor: 'pointer', border: 'none', background: 'none' }}
|
||||
title="Delete"
|
||||
>
|
||||
🗑️
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
{songs.length === 0 && (
|
||||
{paginatedSongs.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={5} style={{ padding: '1rem', textAlign: 'center', color: '#666' }}>
|
||||
No songs uploaded yet.
|
||||
{searchQuery ? 'No songs found matching your search.' : 'No songs uploaded yet.'}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div style={{ marginTop: '1rem', display: 'flex', justifyContent: 'center', gap: '0.5rem', alignItems: 'center' }}>
|
||||
<button
|
||||
onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
|
||||
disabled={currentPage === 1}
|
||||
style={{
|
||||
padding: '0.5rem 1rem',
|
||||
border: '1px solid #d1d5db',
|
||||
background: currentPage === 1 ? '#f3f4f6' : '#fff',
|
||||
cursor: currentPage === 1 ? 'not-allowed' : 'pointer',
|
||||
borderRadius: '0.25rem'
|
||||
}}
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span style={{ color: '#666' }}>
|
||||
Page {currentPage} of {totalPages}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
|
||||
disabled={currentPage === totalPages}
|
||||
style={{
|
||||
padding: '0.5rem 1rem',
|
||||
border: '1px solid #d1d5db',
|
||||
background: currentPage === totalPages ? '#f3f4f6' : '#fff',
|
||||
cursor: currentPage === totalPages ? 'not-allowed' : 'pointer',
|
||||
borderRadius: '0.25rem'
|
||||
}}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user