Refactor socket handling and integrate database for event management
- Removed old socket handling code and replaced it with a new implementation in `app/api/socketio/route.js`. - Added MySQL database integration for managing active sessions and queue entries. - Implemented event retrieval and ticket purchasing APIs in `app/api/events/route.js` and `app/api/purchase/route.js`. - Created database schema for events, tickets, active sessions, and orders in `database/schema.sql`. - Updated front-end to handle event data fetching and ticket purchasing with improved UI components. - Removed unused SVG files from the public directory.
This commit is contained in:
44
README.md
44
README.md
@@ -47,9 +47,12 @@ This repository contains a minimal demo of a queue system for high-concurrency t
|
||||
|
||||
Files added in this demo:
|
||||
|
||||
- `app/api/socketio/route.js` — Next.js App Router API route that initializes the Socket.IO server, in-memory queue logic and JWT issuance (demo only).
|
||||
- `.env.example` — example environment variables for the queue system.
|
||||
- `app/page.tsx` — client UI (Next.js) that connects via Socket.IO and displays queue position, estimated wait, and purchase button.
|
||||
- `app/api/socketio/route.js` — Next.js App Router API route that initializes the Socket.IO server, queue logic and JWT issuance with MySQL persistence.
|
||||
- `app/api/events/route.js` — API for fetching event and ticket information from MySQL.
|
||||
- `app/api/purchase/route.js` — API for processing ticket purchases with JWT verification.
|
||||
- `database/schema.sql` — MySQL database schema with tables for events, tickets, queue, orders, and active sessions.
|
||||
- `.env.example` — example environment variables for the queue system and MySQL connection.
|
||||
- `app/page.tsx` — modern, responsive client UI that connects via Socket.IO and provides a full ticket purchasing experience.
|
||||
|
||||
Important notes and limitations:
|
||||
|
||||
@@ -58,20 +61,35 @@ Important notes and limitations:
|
||||
|
||||
Running locally
|
||||
|
||||
1. Copy `.env.example` to `.env` and adjust values (especially `JWT_SECRET`).
|
||||
2. Install dependencies (already included in package.json):
|
||||
1. **Setup MySQL Database:**
|
||||
```sql
|
||||
-- Execute the schema in database/schema.sql
|
||||
mysql -u root -p < database/schema.sql
|
||||
```
|
||||
|
||||
```powershell
|
||||
pnpm install
|
||||
```
|
||||
2. **Environment Configuration:**
|
||||
Copy `.env.example` to `.env` and configure your settings:
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
Update the MySQL connection details and JWT secret.
|
||||
|
||||
3. Start the Next.js dev server:
|
||||
3. **Install Dependencies:**
|
||||
```powershell
|
||||
pnpm install
|
||||
```
|
||||
|
||||
```powershell
|
||||
pnpm dev
|
||||
```
|
||||
4. **Start the Application:**
|
||||
```powershell
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
4. Open `http://localhost:3000` - the page will automatically initialize the Socket.IO server via API call to `/api/socketio`, then connect to it on port 4000.
|
||||
5. **Access the Application:**
|
||||
Open `http://localhost:3000` - the page will automatically:
|
||||
- Initialize the Socket.IO server via `/api/socketio`
|
||||
- Connect to the queue system on port 4000
|
||||
- Load event and ticket data from MySQL
|
||||
- Provide a modern, responsive ticket purchasing interface
|
||||
|
||||
Next steps / improvements
|
||||
|
||||
|
||||
59
app/api/events/route.js
Normal file
59
app/api/events/route.js
Normal file
@@ -0,0 +1,59 @@
|
||||
import mysql from 'mysql2/promise'
|
||||
|
||||
async function getDbConnection() {
|
||||
if (!process.env.MYSQL_HOST) return null
|
||||
return await mysql.createConnection({
|
||||
host: process.env.MYSQL_HOST,
|
||||
user: process.env.MYSQL_USER,
|
||||
password: process.env.MYSQL_PASSWORD,
|
||||
database: process.env.MYSQL_DATABASE,
|
||||
})
|
||||
}
|
||||
|
||||
export async function GET(request) {
|
||||
try {
|
||||
const { searchParams } = new URL(request.url)
|
||||
const eventId = searchParams.get('id')
|
||||
|
||||
const connection = await getDbConnection()
|
||||
if (!connection) {
|
||||
return Response.json({ error: 'Database not configured' }, { status: 500 })
|
||||
}
|
||||
|
||||
if (eventId) {
|
||||
// Get specific event with tickets
|
||||
const [eventRows] = await connection.execute(
|
||||
'SELECT * FROM events WHERE id = ?',
|
||||
[eventId]
|
||||
)
|
||||
|
||||
const [ticketRows] = await connection.execute(
|
||||
'SELECT * FROM tickets WHERE event_id = ? ORDER BY price ASC',
|
||||
[eventId]
|
||||
)
|
||||
|
||||
if (eventRows.length === 0) {
|
||||
return Response.json({ error: 'Event not found' }, { status: 404 })
|
||||
}
|
||||
|
||||
await connection.end()
|
||||
|
||||
return Response.json({
|
||||
event: eventRows[0],
|
||||
tickets: ticketRows
|
||||
})
|
||||
} else {
|
||||
// Get all events
|
||||
const [eventRows] = await connection.execute(
|
||||
'SELECT e.*, COUNT(t.id) as ticket_types FROM events e LEFT JOIN tickets t ON e.id = t.event_id GROUP BY e.id ORDER BY e.created_at DESC'
|
||||
)
|
||||
|
||||
await connection.end()
|
||||
|
||||
return Response.json({ events: eventRows })
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Events API error:', error)
|
||||
return Response.json({ error: 'Internal server error' }, { status: 500 })
|
||||
}
|
||||
}
|
||||
106
app/api/purchase/route.js
Normal file
106
app/api/purchase/route.js
Normal file
@@ -0,0 +1,106 @@
|
||||
import mysql from 'mysql2/promise'
|
||||
import jwt from 'jsonwebtoken'
|
||||
|
||||
async function getDbConnection() {
|
||||
if (!process.env.MYSQL_HOST) return null
|
||||
return await mysql.createConnection({
|
||||
host: process.env.MYSQL_HOST,
|
||||
user: process.env.MYSQL_USER,
|
||||
password: process.env.MYSQL_PASSWORD,
|
||||
database: process.env.MYSQL_DATABASE,
|
||||
})
|
||||
}
|
||||
|
||||
export async function POST(request) {
|
||||
try {
|
||||
const { eventId, ticketType, quantity, token } = await request.json()
|
||||
|
||||
if (!eventId || !ticketType || !quantity || !token) {
|
||||
return Response.json({ error: 'Missing required fields' }, { status: 400 })
|
||||
}
|
||||
|
||||
// Verify JWT token
|
||||
let decoded
|
||||
try {
|
||||
decoded = jwt.verify(token, process.env.JWT_SECRET || 'dev-secret')
|
||||
} catch (error) {
|
||||
return Response.json({ error: 'Invalid or expired token' }, { status: 401 })
|
||||
}
|
||||
|
||||
const connection = await getDbConnection()
|
||||
if (!connection) {
|
||||
return Response.json({ error: 'Database not configured' }, { status: 500 })
|
||||
}
|
||||
|
||||
// Check if token is still active in database
|
||||
const [activeRows] = await connection.execute(
|
||||
'SELECT * FROM active_sessions WHERE event_id = ? AND socket_id = ? AND expires_at > NOW()',
|
||||
[eventId, decoded.sid]
|
||||
)
|
||||
|
||||
if (activeRows.length === 0) {
|
||||
await connection.end()
|
||||
return Response.json({ error: 'Session expired or not authorized' }, { status: 401 })
|
||||
}
|
||||
|
||||
// Get ticket information
|
||||
const [ticketRows] = await connection.execute(
|
||||
'SELECT * FROM tickets WHERE event_id = ? AND type = ?',
|
||||
[eventId, ticketType]
|
||||
)
|
||||
|
||||
if (ticketRows.length === 0) {
|
||||
await connection.end()
|
||||
return Response.json({ error: 'Ticket type not found' }, { status: 404 })
|
||||
}
|
||||
|
||||
const ticket = ticketRows[0]
|
||||
const availableQuantity = ticket.total_quantity - ticket.sold_quantity
|
||||
|
||||
if (quantity > availableQuantity) {
|
||||
await connection.end()
|
||||
return Response.json({
|
||||
error: 'Not enough tickets available',
|
||||
available: availableQuantity
|
||||
}, { status: 400 })
|
||||
}
|
||||
|
||||
const totalPrice = ticket.price * quantity
|
||||
|
||||
// Start transaction
|
||||
await connection.beginTransaction()
|
||||
|
||||
try {
|
||||
// Create order
|
||||
const [orderResult] = await connection.execute(
|
||||
'INSERT INTO orders (event_id, socket_id, ticket_type, quantity, total_price, status) VALUES (?, ?, ?, ?, ?, ?)',
|
||||
[eventId, decoded.sid, ticketType, quantity, totalPrice, 'completed']
|
||||
)
|
||||
|
||||
// Update sold quantity
|
||||
await connection.execute(
|
||||
'UPDATE tickets SET sold_quantity = sold_quantity + ? WHERE event_id = ? AND type = ?',
|
||||
[quantity, eventId, ticketType]
|
||||
)
|
||||
|
||||
await connection.commit()
|
||||
await connection.end()
|
||||
|
||||
return Response.json({
|
||||
success: true,
|
||||
orderId: orderResult.insertId,
|
||||
totalPrice,
|
||||
message: `Successfully purchased ${quantity} ${ticketType} ticket(s)`
|
||||
})
|
||||
|
||||
} catch (error) {
|
||||
await connection.rollback()
|
||||
await connection.end()
|
||||
throw error
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Purchase API error:', error)
|
||||
return Response.json({ error: 'Purchase failed' }, { status: 500 })
|
||||
}
|
||||
}
|
||||
@@ -1,157 +0,0 @@
|
||||
import { Server } from "socket.io";
|
||||
import jwt from "jsonwebtoken";
|
||||
import mysql from "mysql2/promise";
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
|
||||
// Simple in-memory structures keyed by eventId
|
||||
const events = {};
|
||||
|
||||
const QUEUE_THRESHOLD = parseInt(process.env.QUEUE_THRESHOLD || "100", 10);
|
||||
const CONCURRENT_ACTIVE = parseInt(process.env.CONCURRENT_ACTIVE || "50", 10);
|
||||
const TOKEN_TTL_SECONDS = parseInt(process.env.TOKEN_TTL_SECONDS || `${15 * 60}`, 10);
|
||||
|
||||
function ensureEvent(eventId) {
|
||||
if (!events[eventId]) {
|
||||
events[eventId] = {
|
||||
sockets: new Set(), // connected socket ids
|
||||
queue: [], // array of socket ids in order
|
||||
active: new Set(), // sockets that currently hold a token (allowed to buy)
|
||||
queueOn: false,
|
||||
};
|
||||
}
|
||||
return events[eventId];
|
||||
}
|
||||
|
||||
async function createDbPool() {
|
||||
if (!process.env.MYSQL_HOST) return null;
|
||||
return mysql.createPool({
|
||||
host: process.env.MYSQL_HOST,
|
||||
user: process.env.MYSQL_USER,
|
||||
password: process.env.MYSQL_PASSWORD,
|
||||
database: process.env.MYSQL_DATABASE,
|
||||
waitForConnections: true,
|
||||
connectionLimit: 5,
|
||||
});
|
||||
}
|
||||
|
||||
function buildUpdate(ev) {
|
||||
const positionMap = {};
|
||||
ev.queue.forEach((sid, idx) => (positionMap[sid] = idx + 1));
|
||||
return {
|
||||
activeCount: ev.sockets.size,
|
||||
queueOn: ev.queueOn,
|
||||
estimatedWait: ev.queue.length * 5, // naive: 5s per person
|
||||
positions: positionMap,
|
||||
};
|
||||
}
|
||||
|
||||
function broadcastUpdate(eventId, io) {
|
||||
const ev = events[eventId];
|
||||
if (!ev) return;
|
||||
// notify all connected sockets in room
|
||||
for (const sid of ev.sockets) {
|
||||
const pos = ev.queue.indexOf(sid);
|
||||
io.to(sid).emit("queue_update", {
|
||||
activeCount: ev.sockets.size,
|
||||
position: pos === -1 ? null : pos + 1,
|
||||
estimatedWait: pos === -1 ? null : ev.queue.length * 5,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function evaluateQueue(eventId, io) {
|
||||
const ev = events[eventId];
|
||||
if (!ev) return;
|
||||
|
||||
// ensure active set size <= CONCURRENT_ACTIVE
|
||||
while (ev.active.size < CONCURRENT_ACTIVE && ev.queue.length > 0) {
|
||||
const next = ev.queue.shift();
|
||||
if (!next) break;
|
||||
// sign token
|
||||
const token = jwt.sign({ sid: next, eventId }, process.env.JWT_SECRET || "dev-secret", {
|
||||
expiresIn: TOKEN_TTL_SECONDS,
|
||||
});
|
||||
ev.active.add(next);
|
||||
io.to(next).emit("granted", { token, expiresAt: new Date(Date.now() + TOKEN_TTL_SECONDS * 1000).toISOString() });
|
||||
}
|
||||
|
||||
// If too many active (rare), revoke oldest
|
||||
if (ev.active.size > CONCURRENT_ACTIVE) {
|
||||
const toRevoke = Array.from(ev.active).slice(CONCURRENT_ACTIVE);
|
||||
toRevoke.forEach((sid) => {
|
||||
ev.active.delete(sid);
|
||||
io.to(sid).emit("revoked");
|
||||
});
|
||||
}
|
||||
|
||||
// If queue no longer needed, clear it
|
||||
if (ev.sockets.size < QUEUE_THRESHOLD) ev.queueOn = false;
|
||||
|
||||
// broadcast
|
||||
broadcastUpdate(eventId, io);
|
||||
}
|
||||
|
||||
export async function GET(req) {
|
||||
const res = NextResponse.next();
|
||||
|
||||
if (global.io) {
|
||||
console.log("Socket is already running");
|
||||
} else {
|
||||
console.log("Socket is initializing");
|
||||
const httpServer = req.socket?.server;
|
||||
|
||||
if (httpServer) {
|
||||
const io = new Server(httpServer, {
|
||||
path: "/api/socket",
|
||||
cors: { origin: true },
|
||||
});
|
||||
|
||||
global.io = io;
|
||||
|
||||
const db = await createDbPool();
|
||||
|
||||
io.on("connection", (socket) => {
|
||||
console.log("connect", socket.id);
|
||||
|
||||
socket.on("join_event", async ({ eventId }) => {
|
||||
if (!eventId) return;
|
||||
const ev = ensureEvent(eventId);
|
||||
ev.sockets.add(socket.id);
|
||||
socket.join(eventId);
|
||||
|
||||
// compute counts
|
||||
const activeCount = ev.sockets.size;
|
||||
// turn on queue if threshold reached
|
||||
if (activeCount >= QUEUE_THRESHOLD) ev.queueOn = true;
|
||||
|
||||
// if queueOn and socket not active, add to queue
|
||||
if (ev.queueOn && !ev.active.has(socket.id)) {
|
||||
if (!ev.queue.includes(socket.id)) ev.queue.push(socket.id);
|
||||
}
|
||||
|
||||
// evaluate granting
|
||||
evaluateQueue(eventId, io);
|
||||
|
||||
// send initial update
|
||||
io.to(socket.id).emit("queue_update", buildUpdate(ev));
|
||||
});
|
||||
|
||||
socket.on("disconnect", () => {
|
||||
// remove from every event
|
||||
for (const [eventId, ev] of Object.entries(events)) {
|
||||
if (ev.sockets.has(socket.id)) ev.sockets.delete(socket.id);
|
||||
const qi = ev.queue.indexOf(socket.id);
|
||||
if (qi !== -1) ev.queue.splice(qi, 1);
|
||||
if (ev.active.has(socket.id)) ev.active.delete(socket.id);
|
||||
// re-evaluate to grant next in line
|
||||
evaluateQueue(eventId, io);
|
||||
// notify remaining sockets
|
||||
broadcastUpdate(eventId, io);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return new Response("Socket.IO server initialized", { status: 200 });
|
||||
}
|
||||
@@ -1,13 +1,29 @@
|
||||
import { Server } from 'socket.io'
|
||||
import jwt from 'jsonwebtoken'
|
||||
import mysql from 'mysql2/promise'
|
||||
|
||||
// Simple in-memory structures keyed by eventId
|
||||
// Simple in-memory structures keyed by eventId (for fast access)
|
||||
const events = {}
|
||||
|
||||
const QUEUE_THRESHOLD = parseInt(process.env.QUEUE_THRESHOLD || "100", 10)
|
||||
const CONCURRENT_ACTIVE = parseInt(process.env.CONCURRENT_ACTIVE || "50", 10)
|
||||
const TOKEN_TTL_SECONDS = parseInt(process.env.TOKEN_TTL_SECONDS || `${15 * 60}`, 10)
|
||||
|
||||
// MySQL kapcsolat
|
||||
let db = null
|
||||
|
||||
async function getDbConnection() {
|
||||
if (!db && process.env.MYSQL_HOST) {
|
||||
db = await mysql.createConnection({
|
||||
host: process.env.MYSQL_HOST,
|
||||
user: process.env.MYSQL_USER,
|
||||
password: process.env.MYSQL_PASSWORD,
|
||||
database: process.env.MYSQL_DATABASE,
|
||||
})
|
||||
}
|
||||
return db
|
||||
}
|
||||
|
||||
function ensureEvent(eventId) {
|
||||
if (!events[eventId]) {
|
||||
events[eventId] = {
|
||||
@@ -34,29 +50,59 @@ function broadcastUpdate(eventId, io) {
|
||||
}
|
||||
}
|
||||
|
||||
function evaluateQueue(eventId, io) {
|
||||
async function evaluateQueue(eventId, io) {
|
||||
const ev = events[eventId]
|
||||
if (!ev) return
|
||||
|
||||
const connection = await getDbConnection()
|
||||
|
||||
// ensure active set size <= CONCURRENT_ACTIVE
|
||||
while (ev.active.size < CONCURRENT_ACTIVE && ev.queue.length > 0) {
|
||||
const next = ev.queue.shift()
|
||||
if (!next) break
|
||||
|
||||
// sign token
|
||||
const expiresAt = new Date(Date.now() + TOKEN_TTL_SECONDS * 1000)
|
||||
const token = jwt.sign({ sid: next, eventId }, process.env.JWT_SECRET || "dev-secret", {
|
||||
expiresIn: TOKEN_TTL_SECONDS,
|
||||
})
|
||||
|
||||
ev.active.add(next)
|
||||
io.to(next).emit("granted", { token, expiresAt: new Date(Date.now() + TOKEN_TTL_SECONDS * 1000).toISOString() })
|
||||
|
||||
// Save to database
|
||||
if (connection) {
|
||||
try {
|
||||
await connection.execute(
|
||||
'INSERT INTO active_sessions (event_id, socket_id, jwt_token, expires_at) VALUES (?, ?, ?, ?) ON DUPLICATE KEY UPDATE jwt_token = VALUES(jwt_token), expires_at = VALUES(expires_at)',
|
||||
[eventId, next, token, expiresAt]
|
||||
)
|
||||
} catch (error) {
|
||||
console.error('DB error saving active session:', error)
|
||||
}
|
||||
}
|
||||
|
||||
io.to(next).emit("granted", { token, expiresAt: expiresAt.toISOString() })
|
||||
}
|
||||
|
||||
// If too many active (rare), revoke oldest
|
||||
if (ev.active.size > CONCURRENT_ACTIVE) {
|
||||
const toRevoke = Array.from(ev.active).slice(CONCURRENT_ACTIVE)
|
||||
toRevoke.forEach((sid) => {
|
||||
for (const sid of toRevoke) {
|
||||
ev.active.delete(sid)
|
||||
io.to(sid).emit("revoked")
|
||||
})
|
||||
|
||||
// Remove from database
|
||||
if (connection) {
|
||||
try {
|
||||
await connection.execute(
|
||||
'DELETE FROM active_sessions WHERE event_id = ? AND socket_id = ?',
|
||||
[eventId, sid]
|
||||
)
|
||||
} catch (error) {
|
||||
console.error('DB error removing active session:', error)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If queue no longer needed, clear it
|
||||
@@ -98,18 +144,50 @@ export async function GET(req) {
|
||||
ev.sockets.add(socket.id)
|
||||
socket.join(eventId)
|
||||
|
||||
const connection = await getDbConnection()
|
||||
|
||||
// Get event threshold from database
|
||||
let eventThreshold = QUEUE_THRESHOLD
|
||||
if (connection) {
|
||||
try {
|
||||
const [rows] = await connection.execute(
|
||||
'SELECT max_concurrent_users FROM events WHERE id = ?',
|
||||
[eventId]
|
||||
)
|
||||
if (rows.length > 0) {
|
||||
eventThreshold = rows[0].max_concurrent_users
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('DB error getting event:', error)
|
||||
}
|
||||
}
|
||||
|
||||
// compute counts
|
||||
const activeCount = ev.sockets.size
|
||||
// turn on queue if threshold reached
|
||||
if (activeCount >= QUEUE_THRESHOLD) ev.queueOn = true
|
||||
if (activeCount >= eventThreshold) ev.queueOn = true
|
||||
|
||||
// if queueOn and socket not active, add to queue
|
||||
if (ev.queueOn && !ev.active.has(socket.id)) {
|
||||
if (!ev.queue.includes(socket.id)) ev.queue.push(socket.id)
|
||||
if (!ev.queue.includes(socket.id)) {
|
||||
ev.queue.push(socket.id)
|
||||
|
||||
// Save queue position to database
|
||||
if (connection) {
|
||||
try {
|
||||
await connection.execute(
|
||||
'INSERT INTO queue_entries (event_id, socket_id, position) VALUES (?, ?, ?) ON DUPLICATE KEY UPDATE position = VALUES(position)',
|
||||
[eventId, socket.id, ev.queue.length]
|
||||
)
|
||||
} catch (error) {
|
||||
console.error('DB error saving queue entry:', error)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// evaluate granting
|
||||
evaluateQueue(eventId, io)
|
||||
await evaluateQueue(eventId, io)
|
||||
|
||||
// send initial update
|
||||
const pos = ev.queue.indexOf(socket.id)
|
||||
|
||||
264
app/page.tsx
264
app/page.tsx
@@ -1,6 +1,4 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { useEffect, useState, useRef } from "react";
|
||||
|
||||
export default function Home() {
|
||||
@@ -10,8 +8,20 @@ export default function Home() {
|
||||
const [activeUsers, setActiveUsers] = useState(0);
|
||||
const [hasAccess, setHasAccess] = useState(false);
|
||||
const [tokenExpiry, setTokenExpiry] = useState<number | null>(null);
|
||||
const [eventData, setEventData] = useState<any>(null);
|
||||
const [selectedTicket, setSelectedTicket] = useState<string>("Normal");
|
||||
const [quantity, setQuantity] = useState(1);
|
||||
const [purchasing, setPurchasing] = useState(false);
|
||||
const socketRef = useRef<any>(null);
|
||||
|
||||
// Load event data
|
||||
useEffect(() => {
|
||||
fetch('/api/events?id=pamkutya')
|
||||
.then(res => res.json())
|
||||
.then(data => setEventData(data))
|
||||
.catch(console.error);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let mounted = true;
|
||||
|
||||
@@ -87,68 +97,216 @@ export default function Home() {
|
||||
return () => clearInterval(id);
|
||||
}, [tokenExpiry]);
|
||||
|
||||
const tryBuy = () => {
|
||||
if (!hasAccess) return;
|
||||
// Here you'd call your purchase API with the stored token
|
||||
alert("You can proceed to purchase (this is a demo stub).");
|
||||
const tryBuy = async () => {
|
||||
if (!hasAccess || purchasing) return;
|
||||
|
||||
setPurchasing(true);
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem("event_token");
|
||||
if (!token) {
|
||||
alert("Nincs érvényes token!");
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await fetch('/api/purchase', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
eventId: 'pamkutya',
|
||||
ticketType: selectedTicket,
|
||||
quantity,
|
||||
token
|
||||
})
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
alert(`🎉 Sikeres vásárlás!\n\nJegyek: ${quantity}x ${selectedTicket}\nÖsszeg: ${result.totalPrice.toLocaleString()} Ft\nRendelés ID: ${result.orderId}`);
|
||||
// Refresh event data to show updated availability
|
||||
const eventResponse = await fetch('/api/events?id=pamkutya');
|
||||
const eventData = await eventResponse.json();
|
||||
setEventData(eventData);
|
||||
} else {
|
||||
alert(`Hiba: ${result.error}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Purchase error:', error);
|
||||
alert('Hiba történt a vásárlás során!');
|
||||
} finally {
|
||||
setPurchasing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const timeLeft = tokenExpiry ? Math.max(0, tokenExpiry - Date.now()) : 0;
|
||||
const minutesLeft = Math.floor(timeLeft / 60000);
|
||||
const secondsLeft = Math.floor((timeLeft % 60000) / 1000);
|
||||
|
||||
return (
|
||||
<div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
|
||||
<main className="flex flex-col gap-[24px] row-start-2 items-center sm:items-start w-full max-w-3xl">
|
||||
<h1 className="text-2xl font-bold">Koncert jegyek — Queue rendszer demo</h1>
|
||||
|
||||
<section className="p-4 border rounded w-full">
|
||||
<div className="flex justify-between items-center mb-3">
|
||||
<div>
|
||||
<strong>Event:</strong> pamkutya
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-sm">Socket:</span>{" "}
|
||||
<span className={`font-mono ${connected ? "text-green-600" : "text-red-600"}`}>
|
||||
{connected ? "connected" : "disconnected"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 relative overflow-hidden">
|
||||
{/* Background Effects */}
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div className="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-t from-white/5 to-transparent"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 flex flex-col min-h-screen">
|
||||
{/* Header */}
|
||||
<header className="p-6 text-center">
|
||||
<div className="inline-flex items-center gap-2 text-white/60 text-sm mb-2">
|
||||
<div className={`w-2 h-2 rounded-full ${connected ? 'bg-green-400 animate-pulse' : 'bg-red-400'}`}></div>
|
||||
{connected ? 'Kapcsolódva' : 'Nincs kapcsolat'}
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-6xl font-bold text-white mb-2">
|
||||
🎵 Pam Kutya
|
||||
</h1>
|
||||
<p className="text-xl text-white/80">Legendás Underground Koncert</p>
|
||||
</header>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
<div className="p-2 bg-gray-50 rounded">
|
||||
<div className="text-xs text-gray-500">Aktív felhasználók</div>
|
||||
<div className="text-lg font-semibold">{activeUsers}</div>
|
||||
</div>
|
||||
<div className="p-2 bg-gray-50 rounded">
|
||||
<div className="text-xs text-gray-500">Helyed a sorban</div>
|
||||
<div className="text-lg font-semibold">{position ?? "—"}</div>
|
||||
</div>
|
||||
<div className="p-2 bg-gray-50 rounded">
|
||||
<div className="text-xs text-gray-500">Becsült várakozás</div>
|
||||
<div className="text-lg font-semibold">{estimatedWait ? `${Math.ceil(estimatedWait)} s` : "—"}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 flex items-center justify-center p-6">
|
||||
<div className="w-full max-w-2xl">
|
||||
{/* Queue Status Card */}
|
||||
<div className="bg-white/10 backdrop-blur-lg rounded-3xl p-8 shadow-2xl border border-white/20">
|
||||
<div className="text-center mb-8">
|
||||
{position ? (
|
||||
<>
|
||||
<div className="text-6xl font-bold text-white mb-4">#{position}</div>
|
||||
<p className="text-xl text-white/80">Helyed a várakozási sorban</p>
|
||||
{estimatedWait && (
|
||||
<p className="text-white/60 mt-2">
|
||||
Becsült várakozási idő: <span className="font-mono">{Math.ceil(estimatedWait)}s</span>
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
) : hasAccess ? (
|
||||
<>
|
||||
<div className="text-6xl mb-4">🎫</div>
|
||||
<p className="text-2xl font-bold text-green-400 mb-2">Hozzáféred engedélyezve!</p>
|
||||
<p className="text-white/80">Most vásárolhatsz jegyeket</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="text-6xl mb-4">⏳</div>
|
||||
<p className="text-xl text-white/80">Csatlakozás a sorhoz...</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex gap-3">
|
||||
<button
|
||||
onClick={tryBuy}
|
||||
disabled={!hasAccess}
|
||||
className={`px-4 py-2 rounded font-medium ${hasAccess ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600 cursor-not-allowed"}`}
|
||||
>
|
||||
{hasAccess ? "Vásárlás" : "Nincs hozzáférés — váróban vagy"}
|
||||
</button>
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
|
||||
<div className="bg-white/5 rounded-2xl p-4 text-center">
|
||||
<div className="text-2xl font-bold text-white">{activeUsers}</div>
|
||||
<div className="text-sm text-white/60">Aktív felhasználó</div>
|
||||
</div>
|
||||
<div className="bg-white/5 rounded-2xl p-4 text-center">
|
||||
<div className="text-2xl font-bold text-white">{position || '—'}</div>
|
||||
<div className="text-sm text-white/60">Pozíció</div>
|
||||
</div>
|
||||
<div className="bg-white/5 rounded-2xl p-4 text-center">
|
||||
<div className="text-2xl font-bold text-white">
|
||||
{estimatedWait ? `${Math.ceil(estimatedWait)}s` : '—'}
|
||||
</div>
|
||||
<div className="text-sm text-white/60">Várható idő</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{tokenExpiry && (
|
||||
<div className="text-sm text-gray-500 self-center">
|
||||
Token lejár: {new Date(tokenExpiry).toLocaleTimeString()}
|
||||
{/* Purchase Form */}
|
||||
{hasAccess && (
|
||||
<div className="space-y-4 mb-6">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-white/80 text-sm mb-2">Jegytípus</label>
|
||||
<select
|
||||
value={selectedTicket}
|
||||
onChange={(e) => setSelectedTicket(e.target.value)}
|
||||
className="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-white"
|
||||
>
|
||||
{eventData?.tickets?.map((ticket: any) => (
|
||||
<option key={ticket.type} value={ticket.type} className="bg-gray-800">
|
||||
{ticket.type} - {ticket.price.toLocaleString()} Ft
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-white/80 text-sm mb-2">Darabszám</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="10"
|
||||
value={quantity}
|
||||
onChange={(e) => setQuantity(parseInt(e.target.value))}
|
||||
className="w-full bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action Button */}
|
||||
<div className="space-y-4">
|
||||
<button
|
||||
onClick={tryBuy}
|
||||
disabled={!hasAccess || purchasing}
|
||||
className={`w-full py-4 px-6 rounded-2xl font-bold text-lg transition-all duration-300 ${
|
||||
hasAccess && !purchasing
|
||||
? 'bg-gradient-to-r from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 text-white shadow-lg hover:shadow-xl transform hover:scale-105'
|
||||
: 'bg-white/10 text-white/50 cursor-not-allowed'
|
||||
}`}
|
||||
>
|
||||
{purchasing ? '⏳ Vásárlás...' : hasAccess ? '🎫 Jegyvásárlás' : '⏳ Várakozás...'}
|
||||
</button>
|
||||
|
||||
{/* Token Timer */}
|
||||
{hasAccess && tokenExpiry && (
|
||||
<div className="bg-orange-500/20 border border-orange-400/30 rounded-xl p-4 text-center">
|
||||
<div className="text-orange-300 font-semibold">
|
||||
⏰ Hozzáférés lejár: {minutesLeft}:{secondsLeft.toString().padStart(2, '0')}
|
||||
</div>
|
||||
<div className="text-orange-200/80 text-sm mt-1">
|
||||
Használd ki a lehetőséget!
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ticket Prices */}
|
||||
{eventData?.tickets && (
|
||||
<div className="mt-8 bg-white/5 backdrop-blur-lg rounded-2xl p-6 border border-white/10">
|
||||
<h3 className="text-white font-bold text-lg mb-4 text-center">🎟️ Jegytípusok</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{eventData.tickets.map((ticket: any, index: number) => {
|
||||
const available = ticket.total_quantity - ticket.sold_quantity;
|
||||
const colors = ['text-green-400', 'text-yellow-400', 'text-purple-400'];
|
||||
const borders = ['border-green-400/30', 'border-yellow-400/30', 'border-purple-400/30'];
|
||||
|
||||
return (
|
||||
<div key={ticket.type} className={`bg-white/5 rounded-xl p-4 text-center ${index === 1 ? borders[index] + ' border' : ''}`}>
|
||||
<div className="text-white font-bold">{ticket.type}</div>
|
||||
<div className={`text-2xl font-bold ${colors[index % 3]}`}>
|
||||
{ticket.price.toLocaleString()} Ft
|
||||
</div>
|
||||
<div className="text-white/60 text-sm">
|
||||
{available > 0 ? `${available} db elérhető` : 'Elfogyott'}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<p className="text-sm text-gray-600">A rendszer WebSocket + JWT alapú. Ha a rendezvény eléri a küszöböt, a rendszer sorba helyez.</p>
|
||||
</main>
|
||||
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
|
||||
<Image aria-hidden src="/globe.svg" alt="Globe icon" width={16} height={16} />
|
||||
<span className="text-sm">Demo — Queue system</span>
|
||||
</footer>
|
||||
{/* Footer */}
|
||||
<footer className="p-4 text-center text-white/40 text-sm">
|
||||
WebSocket + JWT alapú várakozási rendszer • Demo célokra
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
81
database/schema.sql
Normal file
81
database/schema.sql
Normal file
@@ -0,0 +1,81 @@
|
||||
-- Adatbázis létrehozása a queue rendszerhez
|
||||
CREATE DATABASE IF NOT EXISTS queue_demo CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
|
||||
|
||||
USE queue_demo;
|
||||
|
||||
-- Events tábla - koncert események
|
||||
CREATE TABLE IF NOT EXISTS events (
|
||||
id VARCHAR(100) PRIMARY KEY,
|
||||
name VARCHAR(255) NOT NULL,
|
||||
description TEXT,
|
||||
max_concurrent_users INT DEFAULT 100,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
-- Queue tábla - várakozási sor
|
||||
CREATE TABLE IF NOT EXISTS queue_entries (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
event_id VARCHAR(100) NOT NULL,
|
||||
socket_id VARCHAR(100) NOT NULL,
|
||||
position INT NOT NULL,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
INDEX idx_event_position (event_id, position),
|
||||
INDEX idx_socket_event (socket_id, event_id),
|
||||
FOREIGN KEY (event_id) REFERENCES events(id) ON DELETE CASCADE
|
||||
);
|
||||
|
||||
-- Active sessions tábla - aktív felhasználók akik vásárolhatnak
|
||||
CREATE TABLE IF NOT EXISTS active_sessions (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
event_id VARCHAR(100) NOT NULL,
|
||||
socket_id VARCHAR(100) NOT NULL,
|
||||
jwt_token TEXT NOT NULL,
|
||||
expires_at TIMESTAMP NOT NULL,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
INDEX idx_event_socket (event_id, socket_id),
|
||||
INDEX idx_expires (expires_at),
|
||||
FOREIGN KEY (event_id) REFERENCES events(id) ON DELETE CASCADE
|
||||
);
|
||||
|
||||
-- Tickets tábla - jegyek
|
||||
CREATE TABLE IF NOT EXISTS tickets (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
event_id VARCHAR(100) NOT NULL,
|
||||
type VARCHAR(100) NOT NULL, -- 'VIP', 'Normal', 'Student'
|
||||
price DECIMAL(10,2) NOT NULL,
|
||||
total_quantity INT NOT NULL,
|
||||
sold_quantity INT DEFAULT 0,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
|
||||
INDEX idx_event (event_id),
|
||||
FOREIGN KEY (event_id) REFERENCES events(id) ON DELETE CASCADE
|
||||
);
|
||||
|
||||
-- Orders tábla - rendelések
|
||||
CREATE TABLE IF NOT EXISTS orders (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
event_id VARCHAR(100) NOT NULL,
|
||||
socket_id VARCHAR(100) NOT NULL,
|
||||
ticket_type VARCHAR(100) NOT NULL,
|
||||
quantity INT NOT NULL,
|
||||
total_price DECIMAL(10,2) NOT NULL,
|
||||
status ENUM('pending', 'completed', 'cancelled') DEFAULT 'pending',
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
|
||||
INDEX idx_event (event_id),
|
||||
INDEX idx_socket (socket_id),
|
||||
FOREIGN KEY (event_id) REFERENCES events(id) ON DELETE CASCADE
|
||||
);
|
||||
|
||||
-- Példa adatok beszúrása
|
||||
INSERT IGNORE INTO events (id, name, description, max_concurrent_users) VALUES
|
||||
('pamkutya', 'Pam Kutya Koncert', 'Legendás underground koncert a városban', 100),
|
||||
('rock-fest', 'Rock Fesztivál 2025', 'Három napos rock fesztivál', 150);
|
||||
|
||||
INSERT IGNORE INTO tickets (event_id, type, price, total_quantity) VALUES
|
||||
('pamkutya', 'Normal', 5000.00, 500),
|
||||
('pamkutya', 'VIP', 8000.00, 50),
|
||||
('pamkutya', 'Student', 3000.00, 100),
|
||||
('rock-fest', 'Normal', 12000.00, 1000),
|
||||
('rock-fest', 'VIP', 25000.00, 200);
|
||||
@@ -1 +0,0 @@
|
||||
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||
|
Before Width: | Height: | Size: 391 B |
@@ -1 +0,0 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.3 KiB |
@@ -1 +0,0 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||
|
Before Width: | Height: | Size: 128 B |
@@ -1 +0,0 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||
|
Before Width: | Height: | Size: 385 B |
Reference in New Issue
Block a user