mirror of
https://github.com/mudabbir-ahmad/peworkshop.git
synced 2026-10-07 19:50:20 +00:00
fixing map timing errors and still trying to make leaderboard and clues pages.
Added two menus to the admin dashboard with a navbar at the bottom: Added navbar button for timer. Added navbar button to edit clues centrally. Added navbar button to view Admin version of leaderboard. To add: - the admin version of the leaderboard. has the same sort of initial view as the normal leaderboard however clicking on a team will create a drop down with their team stats. Grey = cant click Red = current Green = complete blue = skipped? Need to add Clue page Need to fix Leaderboard.
This commit is contained in:
bobbert committed
1 parent
30d88407a0
commit
c098ad40bf
9 files changed
+1217
-29
No files matched your search
@@ -0,0 +1,360 @@
|
||||
"use client";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function AdminLeaderboardPage() {
|
||||
const { data: session, status } = useSession();
|
||||
const [teams, setTeams] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const router = useRouter();
|
||||
|
||||
// Check if user is admin
|
||||
useEffect(() => {
|
||||
if (status === "authenticated") {
|
||||
if (session?.user?.role !== "admin") {
|
||||
router.push("/team-selection");
|
||||
} else {
|
||||
fetchLeaderboardData();
|
||||
}
|
||||
} else if (status === "unauthenticated") {
|
||||
router.push("/login");
|
||||
}
|
||||
}, [session, status, router]);
|
||||
|
||||
// Fetch leaderboard data
|
||||
const fetchLeaderboardData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
|
||||
// This is a placeholder - you'll need to implement the actual API
|
||||
// For now, we'll just set dummy data
|
||||
const dummyTeams = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Team Alpha",
|
||||
code: "ALPHA1",
|
||||
memberCount: 4,
|
||||
cluesFound: 5,
|
||||
totalClues: 10,
|
||||
lastActivity: new Date().toISOString(),
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Team Beta",
|
||||
code: "BETA12",
|
||||
memberCount: 3,
|
||||
cluesFound: 8,
|
||||
totalClues: 10,
|
||||
lastActivity: new Date().toISOString(),
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Team Gamma",
|
||||
code: "GAMMA3",
|
||||
memberCount: 5,
|
||||
cluesFound: 2,
|
||||
totalClues: 10,
|
||||
lastActivity: new Date().toISOString(),
|
||||
},
|
||||
];
|
||||
|
||||
setTeams(dummyTeams);
|
||||
|
||||
// Uncomment this when API is ready
|
||||
/*
|
||||
const response = await fetch("/api/admin/leaderboard", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Cache-Control": "no-cache, no-store, must-revalidate"
|
||||
},
|
||||
credentials: "include"
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch leaderboard data");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setTeams(data);
|
||||
*/
|
||||
} catch (err) {
|
||||
console.error("Error fetching leaderboard data:", err);
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (status === "loading" || loading) {
|
||||
return <div className="admin-page loading">Loading...</div>;
|
||||
}
|
||||
|
||||
if (status === "unauthenticated") {
|
||||
return null; // Will redirect via useEffect
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="admin-page">
|
||||
<div className="page-header">
|
||||
<div className="page-title">Admin Leaderboard</div>
|
||||
<div className="placeholder"></div>
|
||||
</div>
|
||||
|
||||
<div className="admin-content">
|
||||
{error && <p className="error-message">{error}</p>}
|
||||
|
||||
<div className="admin-card">
|
||||
<h2>Team Progress</h2>
|
||||
|
||||
<button
|
||||
className="refresh-button"
|
||||
onClick={fetchLeaderboardData}
|
||||
disabled={loading}
|
||||
>
|
||||
🔄 Refresh Data
|
||||
</button>
|
||||
|
||||
{teams.length === 0 ? (
|
||||
<p className="no-data">No team data available.</p>
|
||||
) : (
|
||||
<div className="leaderboard-table-container">
|
||||
<table className="leaderboard-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Rank</th>
|
||||
<th>Team Name</th>
|
||||
<th>Members</th>
|
||||
<th>Progress</th>
|
||||
<th>Last Activity</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{teams.map((team, index) => (
|
||||
<tr key={team.id}>
|
||||
<td>{index + 1}</td>
|
||||
<td>
|
||||
{team.name} ({team.code})
|
||||
</td>
|
||||
<td>{team.memberCount}</td>
|
||||
<td>
|
||||
{team.cluesFound} / {team.totalClues}
|
||||
</td>
|
||||
<td>
|
||||
{team.lastActivity
|
||||
? new Date(team.lastActivity).toLocaleString()
|
||||
: "Never"}
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
className="reset-button"
|
||||
onClick={() =>
|
||||
alert(`Reset team ${team.name} progress`)
|
||||
}
|
||||
>
|
||||
Reset Progress
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Admin Navigation Bar */}
|
||||
<div className="admin-nav-bar">
|
||||
<button
|
||||
className="admin-nav-button"
|
||||
onClick={() => router.push("/admin")}
|
||||
>
|
||||
<div className="admin-nav-icon">⏱️</div>
|
||||
<div className="admin-nav-label">Timer</div>
|
||||
</button>
|
||||
<button
|
||||
className="admin-nav-button"
|
||||
onClick={() => router.push("/admin/clues")}
|
||||
>
|
||||
<div className="admin-nav-icon">📝</div>
|
||||
<div className="admin-nav-label">Clues</div>
|
||||
</button>
|
||||
<button
|
||||
className="admin-nav-button active"
|
||||
onClick={() => router.push("/admin/leaderboard")}
|
||||
>
|
||||
<div className="admin-nav-icon">🏆</div>
|
||||
<div className="admin-nav-label">Leaderboard</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.admin-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background-color: #f4e9dc;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background-color: #68543c;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.admin-content {
|
||||
flex: 1;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-bottom: 70px; /* Space for navbar */
|
||||
}
|
||||
|
||||
.admin-card {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.refresh-button {
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
right: 1.5rem;
|
||||
background-color: #4caf50;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.refresh-button:disabled {
|
||||
background-color: #a5d6a7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.leaderboard-table-container {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.leaderboard-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.leaderboard-table th,
|
||||
.leaderboard-table td {
|
||||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.leaderboard-table th {
|
||||
background-color: #f5f5f5;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.leaderboard-table tr:hover {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.reset-button {
|
||||
background-color: #f44336;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.4rem 0.6rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: red;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
background-color: #ffebee;
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-data {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
/* Admin Navigation Bar Styles */
|
||||
.admin-nav-bar {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background-color: white;
|
||||
border-top: 1px solid #ddd;
|
||||
padding: 10px 0;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.admin-nav-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 8px 0;
|
||||
flex: 1;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.admin-nav-button.active {
|
||||
color: #68543c;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.admin-nav-button:hover {
|
||||
background-color: rgba(104, 84, 60, 0.1);
|
||||
}
|
||||
|
||||
.admin-nav-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.admin-nav-label {
|
||||
font-size: 13px;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user