Shay/ticketchain
1
0
Fork 0
mirror of https://github.com/0xShay/ticketchain.git synced 2026-01-11 13:13:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

added media

Browse Source
This commit is contained in:
Adwit Mukherji
2024-10-27 10:24:19 +00:00
parent 93e8e1f9f8
commit 866a2abe98
3 changed files with 129 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
app/events/page.tsx
View File

@@ -152,7 +152,11 @@ const EventsPage: React.FC = () => {
<br></br> <br></br>
<div className="relative z-20 container mx-auto p-4 pt-16"> <div className="relative z-20 container mx-auto p-4 pt-16">
<Suspense fallback={<div className="mt-4 text-2xl text-white">Loading...</div>}> <Suspense
fallback={
<div className="mt-4 text-2xl text-white">Loading...</div>
}
>
<input <input
type="text" type="text"
placeholder="Search events..." placeholder="Search events..."
@@ -171,16 +175,28 @@ const EventsPage: React.FC = () => {
</Button> </Button>
{showSortMenu && ( {showSortMenu && (
<div className="absolute left-0 mt-2 p-2 bg-white shadow-lg rounded border border-gray-300 z-30"> <div className="absolute left-0 mt-2 p-2 bg-white shadow-lg rounded border border-gray-300 z-30">
<Button variant="ghost" onClick={() => setSortOption('price-asc')}> <Button
variant="ghost"
onClick={() => setSortOption('price-asc')}
>
Price Ascending Price Ascending
</Button> </Button>
<Button variant="ghost" onClick={() => setSortOption('price-desc')}> <Button
variant="ghost"
onClick={() => setSortOption('price-desc')}
>
Price Descending Price Descending
</Button> </Button>
<Button variant="ghost" onClick={() => setSortOption('date-asc')}> <Button
variant="ghost"
onClick={() => setSortOption('date-asc')}
>
Date Ascending Date Ascending
</Button> </Button>
<Button variant="ghost" onClick={() => setSortOption('date-desc')}> <Button
variant="ghost"
onClick={() => setSortOption('date-desc')}
>
Date Descending Date Descending
</Button> </Button>
</div> </div>
@@ -238,6 +254,22 @@ const EventsPage: React.FC = () => {
/> />
<span className="ml-2">Past Events</span> <span className="ml-2">Past Events</span>
</label> </label>
{/* Filter by Host */}
<select
value={selectedHost}
onChange={(e) => setSelectedHost(e.target.value)}
className="mt-1 block w-full border-gray-300 rounded"
>
<option value="">All Hosts</option>
{Array.from(
new Set(events.map((event) => event.eventHost))
).map((host) => (
<option key={host} value={host}>
{host}
</option>
))}
</select>
</div> </div>
)} )}
</div> </div>
@@ -246,7 +278,7 @@ const EventsPage: React.FC = () => {
<main> <main>
<section> <section>
<h2 className="text-2xl font-semibold text-white mb-4"> <h2 className="text-2xl font-semibold text-white mb-4">
<br></br> <br />
Available Events Available Events
</h2> </h2>
<div className="grid grid-cols-1 gap-6"> <div className="grid grid-cols-1 gap-6">

2
app/host/page.tsx
View File

@@ -74,7 +74,7 @@ const Page = () => {
loop loop
muted muted
className="absolute inset-0 w-full h-full object-cover z-0" className="absolute inset-0 w-full h-full object-cover z-0"
src="BGVid2.mp4" src="BGVid3.mp4"
> >
Your browser does not support the video tag. Your browser does not support the video tag.
</video> </video>

158
app/profile/page.tsx
View File

@@ -23,9 +23,17 @@ if (!RPC_URL || !CONTRACT_ADDRESS) {
); );
} }
interface TicketDetails {
ticketId: number;
eventName: string;
eventLocation: string;
eventDate: string;
imageUrl: string;
}
export default function ProfilePage() { export default function ProfilePage() {
const [isClient, setIsClient] = useState(false); const [isClient, setIsClient] = useState(false);
const [userTickets, setUserTickets] = useState<number[]>([]); const [userTickets, setUserTickets] = useState<TicketDetails[]>([]);
const [userAddress, setUserAddress] = useState(''); const [userAddress, setUserAddress] = useState('');
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [error, setError] = useState(''); const [error, setError] = useState('');
@@ -86,17 +94,27 @@ export default function ProfilePage() {
console.log('Fetching tickets for address:', address); console.log('Fetching tickets for address:', address);
const tickets = await contract.getUserTickets(address); const ticketIds = await contract.getUserTickets(address);
console.log('Raw tickets data:', tickets); console.log('Raw tickets data:', ticketIds);
if (Array.isArray(tickets)) { if (Array.isArray(ticketIds)) {
const ticketNumbers = tickets.map((ticket: ethers.BigNumber) => const ticketDetailsPromises = ticketIds.map(async (ticketId) => {
ticket.toNumber() const ticketNumber = ticketId.toNumber();
); // Simulate fetching event details with dummy data
console.log('Processed ticket numbers:', ticketNumbers); const eventDetails: TicketDetails = {
setUserTickets(ticketNumbers); ticketId: ticketNumber,
eventName: `Event #${ticketNumber}`,
eventLocation: 'Location XYZ',
eventDate: '2023-12-01',
imageUrl: 'https://via.placeholder.com/150',
};
return eventDetails;
});
const details = await Promise.all(ticketDetailsPromises);
setUserTickets(details);
} else { } else {
console.error('Unexpected response from getUserTickets:', tickets); console.error('Unexpected response from getUserTickets:', ticketIds);
setError('Unexpected response from contract. Please try again.'); setError('Unexpected response from contract. Please try again.');
} }
} catch (error) { } catch (error) {
@@ -108,69 +126,73 @@ export default function ProfilePage() {
return ( return (
<div className="relative min-h-screen overflow-hidden bg-black"> <div className="relative min-h-screen overflow-hidden bg-black">
<Header /> <Header />
<div className="absolute inset-0">
{isClient && (
<video
autoPlay
loop
muted
className="absolute inset-0 w-full h-full object-cover z-0"
src="/BGVid3.mp4"
>
Your browser does not support the video tag.
</video>
)}
<div className="absolute inset-0 bg-black opacity-50 z-10"></div>
</div>
<div className="relative z-20 container mx-auto p-4 pt-16"> <div className="relative z-20 container mx-auto p-4 pt-16">
<div className="relative min-h-screen overflow-hidden"> <div className="relative text-white">
{isClient && ( <h1 className="text-4xl font-bold mb-4">Your Profile</h1>
<video {userAddress ? (
autoPlay <p className="mb-4">Connected Address: {userAddress}</p>
loop ) : (
muted <p className="mb-4">Not connected</p>
className="absolute inset-0 w-full h-full object-cover z-0"
src="/BGVid2.mp4"
>
Your browser does not support the video tag.
</video>
)} )}
<div className="absolute inset-0 bg-black opacity-50 z-10"></div> {error && (
<div className="bg-red-500 text-white p-2 rounded mb-4">
{error}
</div>
)}
<div className="relative z-20 text-white"> {loading ? (
<h1 className="text-4xl font-bold mb-4">Your Profile</h1> <p>Loading...</p>
{userAddress ? ( ) : (
<p className="mb-4">Connected Address: {userAddress}</p> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
) : ( {userTickets.length > 0 ? (
<p className="mb-4">Not connected</p> userTickets.map((details) => (
)} <Card
<p className="mb-4">Current Network: {networkName}</p> key={details.ticketId}
className="bg-gray-800 text-white"
>
<CardHeader>
<img
src={details.imageUrl}
alt={details.eventName}
className="w-full h-36 object-cover rounded-t-lg"
/>
<CardTitle>{details.eventName}</CardTitle>
<CardDescription>{details.eventLocation}</CardDescription>
</CardHeader>
<CardContent>
<p>Ticket ID: {details.ticketId}</p>
<p>Date: {details.eventDate}</p>
</CardContent>
</Card>
))
) : (
<p>You don&apos;t have any tickets yet.</p>
)}
</div>
)}
{error && ( <Button className="mt-4" onClick={connectWallet} disabled={loading}>
<div className="bg-red-500 text-white p-2 rounded mb-4"> {loading
{error} ? 'Connecting...'
</div> : userAddress
)} ? 'Refresh Tickets'
: 'Connect Wallet'}
<Card className="bg-gray-800 text-white"> </Button>
<CardHeader>
<CardTitle>Your Tickets</CardTitle>
<CardDescription>
Here are the tickets associated with your wallet
</CardDescription>
</CardHeader>
<CardContent>
{loading ? (
<p>Loading...</p>
) : userTickets.length > 0 ? (
<ul>
{userTickets.map((ticketId) => (
<li key={ticketId} className="mb-2">
Ticket ID: {ticketId}
</li>
))}
</ul>
) : (
<p>You don&apos;t have any tickets yet.</p>
)}
</CardContent>
</Card>
<Button className="mt-4" onClick={connectWallet} disabled={loading}>
{loading
? 'Connecting...'
: userAddress
? 'Refresh Tickets'
: 'Connect Wallet'}
</Button>
</div>
</div> </div>
</div> </div>
<Footer /> <Footer />