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,468 @@
|
||||
"use client";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function AdminCluesPage() {
|
||||
const { data: session, status } = useSession();
|
||||
const [clues, setClues] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
const router = useRouter();
|
||||
|
||||
// Form state for adding new clues - removed coordinates
|
||||
const [newClue, setNewClue] = useState({
|
||||
title: "",
|
||||
description: "",
|
||||
location: "",
|
||||
});
|
||||
|
||||
// Check if user is admin
|
||||
useEffect(() => {
|
||||
if (status === "authenticated") {
|
||||
if (session?.user?.role !== "admin") {
|
||||
router.push("/team-selection");
|
||||
} else {
|
||||
fetchClues();
|
||||
}
|
||||
} else if (status === "unauthenticated") {
|
||||
router.push("/login");
|
||||
}
|
||||
}, [session, status, router]);
|
||||
|
||||
// Fetch all clues
|
||||
const fetchClues = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch("/api/admin/clues", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Cache-Control": "no-cache, no-store, must-revalidate",
|
||||
},
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(
|
||||
errorData.error || `Failed to fetch clues (${response.status})`
|
||||
);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Validate the response data
|
||||
if (!Array.isArray(data)) {
|
||||
throw new Error("Invalid response format from server");
|
||||
}
|
||||
|
||||
setClues(data);
|
||||
setError("");
|
||||
} catch (err) {
|
||||
console.error("Error fetching clues:", err);
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle input change for new clue form
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setNewClue((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
// Handle form submission to add new clue
|
||||
const handleAddClue = async (e) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch("/api/admin/clues", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(newClue),
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to add clue");
|
||||
}
|
||||
|
||||
// Refresh the clue list
|
||||
fetchClues();
|
||||
|
||||
// Reset the form - removed coordinates
|
||||
setNewClue({
|
||||
title: "",
|
||||
description: "",
|
||||
location: "",
|
||||
});
|
||||
|
||||
setError("");
|
||||
} catch (err) {
|
||||
console.error("Error adding clue:", err);
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle deleting a clue
|
||||
const handleDeleteClue = async (clueId) => {
|
||||
if (!confirm("Are you sure you want to delete this clue?")) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await fetch(`/api/admin/clues/${clueId}`, {
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
credentials: "include",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to delete clue");
|
||||
}
|
||||
|
||||
// Refresh the clue list
|
||||
fetchClues();
|
||||
setError("");
|
||||
} catch (err) {
|
||||
console.error("Error deleting clue:", 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">Manage Clues</div>
|
||||
<div className="placeholder"></div>
|
||||
</div>
|
||||
|
||||
<div className="admin-content">
|
||||
{error && <p className="error-message">{error}</p>}
|
||||
|
||||
{/* Add New Clue Form - removed coordinate fields */}
|
||||
<div className="admin-card">
|
||||
<h2>Add New Clue</h2>
|
||||
<form onSubmit={handleAddClue}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="title">Title</label>
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
name="title"
|
||||
value={newClue.title}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="admin-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="description">Description</label>
|
||||
<textarea
|
||||
id="description"
|
||||
name="description"
|
||||
value={newClue.description}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="admin-textarea"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="location">Location Hint</label>
|
||||
<input
|
||||
type="text"
|
||||
id="location"
|
||||
name="location"
|
||||
value={newClue.location}
|
||||
onChange={handleInputChange}
|
||||
className="admin-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="admin-button">
|
||||
Add Clue
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Existing Clues List - updated to remove coordinates */}
|
||||
<div className="admin-card">
|
||||
<h2>Existing Clues</h2>
|
||||
{clues.length === 0 ? (
|
||||
<p className="no-clues">No clues found.</p>
|
||||
) : (
|
||||
<div className="clues-list">
|
||||
{clues.map((clue) => (
|
||||
<div key={clue.id} className="clue-item">
|
||||
<div className="clue-header">
|
||||
<h3>{clue.title}</h3>
|
||||
<button
|
||||
className="delete-button"
|
||||
onClick={() => handleDeleteClue(clue.id)}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
<p className="clue-description">{clue.description}</p>
|
||||
{clue.location && (
|
||||
<p className="clue-location">
|
||||
<strong>Location:</strong> {clue.location}
|
||||
</p>
|
||||
)}
|
||||
<p className="clue-position">
|
||||
<strong>Position:</strong> Clue #{clue.id} in sequence
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</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 active"
|
||||
onClick={() => router.push("/admin/clues")}
|
||||
>
|
||||
<div className="admin-nav-icon">📝</div>
|
||||
<div className="admin-nav-label">Clues</div>
|
||||
</button>
|
||||
<button
|
||||
className="admin-nav-button"
|
||||
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: 700px;
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.half {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.admin-input {
|
||||
width: 100%;
|
||||
padding: 0.6rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.admin-textarea {
|
||||
width: 100%;
|
||||
padding: 0.6rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.4rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.admin-button {
|
||||
background-color: #68543c;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.75rem 1rem;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.clues-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.clue-item {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 1rem;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.clue-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.clue-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
background-color: #d32f2f;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.4rem 0.6rem;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.clue-description {
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.clue-location,
|
||||
.clue-position {
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: red;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
background-color: #ffebee;
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-clues {
|
||||
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