updated user view
This commit is contained in:
shivam
parent
67a9ab2a45
commit
48d00e12db
30
package-lock.json
generated
30
package-lock.json
generated
@ -13,11 +13,13 @@
|
||||
"@testing-library/react": "^16.2.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"axios": "^1.8.3",
|
||||
"chart.js": "^4.4.8",
|
||||
"cors": "^2.8.5",
|
||||
"http": "^0.0.1-security",
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"lucide-react": "^0.479.0",
|
||||
"react": "^19.0.0",
|
||||
"react-chartjs-2": "^5.3.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-router-dom": "^7.3.0",
|
||||
"react-scripts": "5.0.1",
|
||||
@ -2785,6 +2787,12 @@
|
||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||
}
|
||||
},
|
||||
"node_modules/@kurkle/color": {
|
||||
"version": "0.3.4",
|
||||
"resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
|
||||
"integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@leichtgewicht/ip-codec": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
|
||||
@ -5348,6 +5356,18 @@
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/chart.js": {
|
||||
"version": "4.4.8",
|
||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.8.tgz",
|
||||
"integrity": "sha512-IkGZlVpXP+83QpMm4uxEiGqSI7jFizwVtF3+n5Pc3k7sMO+tkd0qxh2OzLhenM0K80xtmAONWGBn082EiBQSDA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@kurkle/color": "^0.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"pnpm": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/check-types": {
|
||||
"version": "11.2.3",
|
||||
"resolved": "https://registry.npmjs.org/check-types/-/check-types-11.2.3.tgz",
|
||||
@ -13463,6 +13483,16 @@
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
|
||||
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
|
||||
},
|
||||
"node_modules/react-chartjs-2": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.3.0.tgz",
|
||||
"integrity": "sha512-UfZZFnDsERI3c3CZGxzvNJd02SHjaSJ8kgW1djn65H1KK8rehwTjyrRKOG3VTMG8wtHZ5rgAO5oTHtHi9GCCmw==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"chart.js": "^4.1.1",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dev-utils": {
|
||||
"version": "12.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
|
||||
|
||||
@ -8,11 +8,13 @@
|
||||
"@testing-library/react": "^16.2.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"axios": "^1.8.3",
|
||||
"chart.js": "^4.4.8",
|
||||
"cors": "^2.8.5",
|
||||
"http": "^0.0.1-security",
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"lucide-react": "^0.479.0",
|
||||
"react": "^19.0.0",
|
||||
"react-chartjs-2": "^5.3.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-router-dom": "^7.3.0",
|
||||
"react-scripts": "5.0.1",
|
||||
|
||||
BIN
public/add.png
Normal file
BIN
public/add.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
public/logo.PNG
Normal file
BIN
public/logo.PNG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
474
src/App.js
474
src/App.js
File diff suppressed because it is too large
Load Diff
640
src/pages/GameList.js
Normal file
640
src/pages/GameList.js
Normal file
@ -0,0 +1,640 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { BarChart2, Calendar, RefreshCw, Clock, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import axios from 'axios';
|
||||
import TodaysMatch from './TodaysMatch';
|
||||
import Today from './Today';
|
||||
|
||||
const GameList = () => {
|
||||
const [teams, setTeams] = useState([]);
|
||||
const [dates, setDates] = useState([]);
|
||||
const [selectedTeam, setSelectedTeam] = useState(null);
|
||||
const [showChartView, setShowChartView] = useState(false);
|
||||
const [showCalendar, setShowCalendar] = useState(false);
|
||||
const [currentTime, setCurrentTime] = useState("");
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [calendarData, setCalendarData] = useState([]);
|
||||
const [currentMonth, setCurrentMonth] = useState(new Date());
|
||||
const [upcomingMatches, setUpcomingMatches] = useState([]);
|
||||
|
||||
// API URL
|
||||
const API_URL = 'http://localhost:5500/api';
|
||||
|
||||
// Format time
|
||||
const formatTime = (timeString) => {
|
||||
try {
|
||||
const date = new Date(timeString);
|
||||
return date.toLocaleTimeString("en-US", { hour: '2-digit', minute: '2-digit', hour12: true });
|
||||
} catch (e) {
|
||||
return "XX:XX";
|
||||
}
|
||||
};
|
||||
|
||||
// Check if a match is upcoming
|
||||
const isUpcoming = (resultTime) => {
|
||||
try {
|
||||
const now = new Date();
|
||||
const matchTime = new Date(resultTime);
|
||||
return matchTime > now;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// Fetch teams data
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// Get all teams
|
||||
const teamsResponse = await axios.get(`${API_URL}/teams`);
|
||||
|
||||
// Get today's date and format it
|
||||
const today = new Date();
|
||||
const todayFormatted = today.toISOString().split('T')[0];
|
||||
|
||||
// Get yesterday's date and format it
|
||||
const yesterday = new Date();
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
const yesterdayFormatted = yesterday.toISOString().split('T')[0];
|
||||
|
||||
// Set dates for display
|
||||
setDates([yesterdayFormatted, todayFormatted]);
|
||||
|
||||
// Get today's results
|
||||
const todayResultsResponse = await axios.get(`${API_URL}/results/daily?date=${todayFormatted}`);
|
||||
const todayResults = todayResultsResponse.data;
|
||||
|
||||
// Get yesterday's results
|
||||
const yesterdayResultsResponse = await axios.get(`${API_URL}/results/daily?date=${yesterdayFormatted}`);
|
||||
const yesterdayResults = yesterdayResultsResponse.data;
|
||||
|
||||
// Process upcoming matches
|
||||
const upcoming = todayResults.filter(result => isUpcoming(result.result_time));
|
||||
setUpcomingMatches(upcoming);
|
||||
|
||||
// Combine team data with results
|
||||
const teamsWithResults = teamsResponse.data.map(team => {
|
||||
// Get all results for this team
|
||||
const yesterdayTeamResults = yesterdayResults.filter(r => r.team === team.name);
|
||||
const todayTeamResults = todayResults.filter(r => r.team === team.name);
|
||||
|
||||
// Create result arrays for both days
|
||||
const yesterdayResultsArr = yesterdayTeamResults.map(r => ({
|
||||
result: r.visible_result,
|
||||
time: formatTime(r.result_time)
|
||||
}));
|
||||
|
||||
const todayResultsArr = todayTeamResults
|
||||
.filter(r => !isUpcoming(r.result_time))
|
||||
.map(r => ({
|
||||
result: r.visible_result,
|
||||
time: formatTime(r.result_time)
|
||||
}));
|
||||
|
||||
// Extract latest scheduled time
|
||||
let latestTime = "XX:XX";
|
||||
const latestTodayResult = todayTeamResults
|
||||
.sort((a, b) => new Date(b.result_time) - new Date(a.result_time))
|
||||
.find(r => r.result_time);
|
||||
|
||||
if (latestTodayResult) {
|
||||
latestTime = formatTime(latestTodayResult.result_time);
|
||||
}
|
||||
|
||||
return {
|
||||
id: team.id,
|
||||
name: team.name,
|
||||
time: latestTime,
|
||||
results: {
|
||||
[yesterdayFormatted]: yesterdayResultsArr,
|
||||
[todayFormatted]: todayResultsArr
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
setTeams(teamsWithResults);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
console.error("Error fetching data:", err);
|
||||
setError("Failed to load team data. Please try again later.");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
|
||||
// Update current time every minute
|
||||
const interval = setInterval(() => {
|
||||
const now = new Date();
|
||||
const formattedTime = now.toLocaleString("en-IN", { timeZone: "Asia/Kolkata" });
|
||||
setCurrentTime(formattedTime);
|
||||
}, 60000);
|
||||
|
||||
// Set initial time
|
||||
const now = new Date();
|
||||
const formattedTime = now.toLocaleString("en-IN", { timeZone: "Asia/Kolkata" });
|
||||
setCurrentTime(formattedTime);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
// Show chart for selected team
|
||||
const handleViewChart = async (team) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
// Get monthly results for the selected team
|
||||
const currentDate = new Date();
|
||||
const month = currentDate.getMonth() + 1;
|
||||
const year = currentDate.getFullYear();
|
||||
|
||||
const response = await axios.post(`${API_URL}/results/monthly`, {
|
||||
team: team.name,
|
||||
month: `${year}-${month.toString().padStart(2, '0')}`
|
||||
});
|
||||
|
||||
setSelectedTeam({
|
||||
...team,
|
||||
chartData: response.data
|
||||
});
|
||||
|
||||
setShowChartView(true);
|
||||
setShowCalendar(false);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
console.error("Error fetching chart data:", err);
|
||||
setError("Failed to load chart data. Please try again later.");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Load calendar data
|
||||
const loadCalendarData = async (year, month) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// Calculate first and last day of month
|
||||
const firstDay = new Date(year, month, 1).toISOString().split('T')[0];
|
||||
const lastDay = new Date(year, month + 1, 0).toISOString().split('T')[0];
|
||||
|
||||
// Get results for each day in the month
|
||||
const dailyResultsPromises = [];
|
||||
const currentDate = new Date(year, month, 1);
|
||||
const lastDate = new Date(year, month + 1, 0);
|
||||
|
||||
while (currentDate <= lastDate) {
|
||||
const dateString = currentDate.toISOString().split('T')[0];
|
||||
dailyResultsPromises.push(
|
||||
axios.get(`${API_URL}/results/daily?date=${dateString}`)
|
||||
.then(response => ({
|
||||
date: dateString,
|
||||
results: response.data
|
||||
}))
|
||||
.catch(() => ({
|
||||
date: dateString,
|
||||
results: []
|
||||
}))
|
||||
);
|
||||
currentDate.setDate(currentDate.getDate() + 1);
|
||||
}
|
||||
|
||||
const allResults = await Promise.all(dailyResultsPromises);
|
||||
|
||||
// Format calendar data
|
||||
const calendarDays = [];
|
||||
const firstDayOfMonth = new Date(year, month, 1);
|
||||
const firstDayWeekday = firstDayOfMonth.getDay();
|
||||
|
||||
// Add empty cells for days before the first of the month
|
||||
for (let i = 0; i < firstDayWeekday; i++) {
|
||||
calendarDays.push(null);
|
||||
}
|
||||
|
||||
// Add days with results
|
||||
for (let i = 1; i <= lastDate.getDate(); i++) {
|
||||
const dateObj = new Date(year, month, i);
|
||||
const dateStr = dateObj.toISOString().split('T')[0];
|
||||
|
||||
const dayData = allResults.find(r => r.date === dateStr);
|
||||
let dayResults = [];
|
||||
|
||||
if (dayData && dayData.results.length > 0) {
|
||||
// Group by team
|
||||
const teamResults = {};
|
||||
|
||||
dayData.results.forEach(result => {
|
||||
if (!teamResults[result.team]) {
|
||||
teamResults[result.team] = [];
|
||||
}
|
||||
teamResults[result.team].push({
|
||||
result: result.visible_result,
|
||||
time: formatTime(result.result_time)
|
||||
});
|
||||
});
|
||||
|
||||
// Create an array for display
|
||||
dayResults = Object.entries(teamResults).map(([team, results]) => ({
|
||||
team,
|
||||
results
|
||||
}));
|
||||
}
|
||||
|
||||
calendarDays.push({
|
||||
day: i,
|
||||
date: dateStr,
|
||||
results: dayResults
|
||||
});
|
||||
}
|
||||
|
||||
setCalendarData(calendarDays);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
console.error("Error loading calendar data:", err);
|
||||
setError("Failed to load calendar data. Please try again later.");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle calendar view button click
|
||||
const handleCalendarView = () => {
|
||||
const now = new Date();
|
||||
setCurrentMonth(now);
|
||||
loadCalendarData(now.getFullYear(), now.getMonth());
|
||||
setShowCalendar(true);
|
||||
setShowChartView(false);
|
||||
};
|
||||
|
||||
// Handle month change in calendar
|
||||
const handleMonthChange = (increment) => {
|
||||
const newMonth = new Date(currentMonth);
|
||||
newMonth.setMonth(newMonth.getMonth() + increment);
|
||||
setCurrentMonth(newMonth);
|
||||
loadCalendarData(newMonth.getFullYear(), newMonth.getMonth());
|
||||
};
|
||||
|
||||
// Refresh data
|
||||
const handleRefresh = () => {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
// Format date for display
|
||||
const formatDate = (dateString) => {
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
weekday: 'short',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const [openIndex, setOpenIndex] = useState(null);
|
||||
|
||||
const toggleFAQ = (index) => {
|
||||
setOpenIndex(openIndex === index ? null : index);
|
||||
};
|
||||
|
||||
const faqs = [
|
||||
{ question: "HOW TO PLAY", answer: "Details about how to play." },
|
||||
{ question: "WHERE TO PLAY", answer: "Information on where to play." },
|
||||
{ question: "WINNING NUMBERS EMAIL", answer: "Sign up for emails." },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-gray-200 min-h-screen">
|
||||
|
||||
|
||||
<div className="max-w-6xl mx-auto p-4">
|
||||
{error && (
|
||||
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
)}
|
||||
<Today/>
|
||||
|
||||
<div className="bg-red-600 p-4 text-white text-center text-xl font-bold rounded-t-lg shadow-lg">
|
||||
Satta Result of {dates.length > 1 && formatDate(dates[1])} & {dates.length > 0 && formatDate(dates[0])}
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="bg-white p-4 mb-4 flex flex-col md:flex-row justify-between items-center shadow-md">
|
||||
<div className="text-lg font-semibold text-gray-800 mb-2 md:mb-0">Latest Results</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
className="bg-black text-white px-4 py-2 rounded flex items-center gap-2 hover:bg-gray-800 transition"
|
||||
onClick={handleCalendarView}
|
||||
disabled={loading}
|
||||
>
|
||||
<Calendar size={16} />
|
||||
Calendar View
|
||||
</button>
|
||||
<button
|
||||
className="bg-red-600 text-white px-4 py-2 rounded flex items-center gap-2 hover:bg-red-700 transition"
|
||||
onClick={handleRefresh}
|
||||
disabled={loading}
|
||||
>
|
||||
<RefreshCw size={16} />
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Loading indicator */}
|
||||
{loading && (
|
||||
<div className="bg-white p-8 mb-4 rounded shadow flex justify-center items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<RefreshCw size={24} className="animate-spin text-red-600" />
|
||||
<span>Loading data...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Upcoming Matches */}
|
||||
{!loading && upcomingMatches.length > 0 && !showChartView && !showCalendar && (
|
||||
<div className="bg-white p-4 mb-4 rounded shadow">
|
||||
<h2 className="text-lg font-semibold mb-4 flex items-center gap-2 text-red-600">
|
||||
<Clock size={20} />
|
||||
Upcoming Matches Today
|
||||
</h2>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-black text-white">
|
||||
<th className="border border-gray-300 p-2 text-left">Team</th>
|
||||
<th className="border border-gray-300 p-2 text-center">Scheduled Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{upcomingMatches.map((match, index) => (
|
||||
<tr key={index} className={index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}>
|
||||
<td className="border border-gray-300 p-2 font-medium">{match.team}</td>
|
||||
<td className="border border-gray-300 p-2 text-center">{formatTime(match.result_time)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Chart View */}
|
||||
{!loading && showChartView && selectedTeam && (
|
||||
<div className="bg-white p-4 mb-4 rounded shadow">
|
||||
<h2 className="text-lg font-semibold mb-4 text-red-600">Monthly Chart: {selectedTeam.name}</h2>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-black text-white">
|
||||
<th className="border border-gray-300 p-2 text-left">Date</th>
|
||||
<th className="border border-gray-300 p-2 text-center">Time</th>
|
||||
<th className="border border-gray-300 p-2 text-right">Result</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{selectedTeam.chartData && selectedTeam.chartData.map((item, index) => (
|
||||
<tr key={index} className={index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}>
|
||||
<td className="border border-gray-300 p-2">{new Date(item.result_date).toLocaleDateString()}</td>
|
||||
<td className="border border-gray-300 p-2 text-center">{formatTime(item.result_time)}</td>
|
||||
<td className="border border-gray-300 p-2 text-right font-bold">{item.result}</td>
|
||||
</tr>
|
||||
))}
|
||||
{(!selectedTeam.chartData || selectedTeam.chartData.length === 0) && (
|
||||
<tr>
|
||||
<td colSpan="3" className="border border-gray-300 p-2 text-center">No chart data available</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="mt-4 flex justify-end">
|
||||
<button
|
||||
className="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 transition"
|
||||
onClick={() => setShowChartView(false)}
|
||||
>
|
||||
Back to Results
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Calendar View - Improved Responsive Design */}
|
||||
{!loading && showCalendar && (
|
||||
<div className="bg-white p-4 mb-4 rounded shadow">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<button
|
||||
className="bg-black text-white p-2 rounded flex items-center gap-1 hover:bg-gray-800 transition"
|
||||
onClick={() => handleMonthChange(-1)}
|
||||
>
|
||||
<ChevronLeft size={16} />
|
||||
<span className="hidden sm:inline">Previous</span>
|
||||
</button>
|
||||
|
||||
<h2 className="text-lg font-semibold text-red-600">
|
||||
{currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}
|
||||
</h2>
|
||||
|
||||
<button
|
||||
className="bg-black text-white p-2 rounded flex items-center gap-1 hover:bg-gray-800 transition"
|
||||
onClick={() => handleMonthChange(1)}
|
||||
>
|
||||
<span className="hidden sm:inline">Next</span>
|
||||
<ChevronRight size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-7 gap-1 mb-2">
|
||||
{['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (
|
||||
<div key={day} className="text-center font-semibold bg-gray-800 text-white p-1 text-xs sm:text-sm">{day}</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-7 gap-1">
|
||||
{calendarData.map((day, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`border rounded p-1 overflow-y-auto ${day ? 'bg-white' : 'bg-gray-100'
|
||||
}`}
|
||||
style={{
|
||||
height: "120px",
|
||||
maxHeight: "120px"
|
||||
}}
|
||||
>
|
||||
{day && (
|
||||
<>
|
||||
<div className={`text-right text-sm font-medium ${new Date().toISOString().split('T')[0] === day.date ?
|
||||
'bg-red-600 text-white p-1 rounded-full w-6 h-6 flex items-center justify-center ml-auto' :
|
||||
'text-gray-700'
|
||||
}`}>
|
||||
{day.day}
|
||||
</div>
|
||||
<div className="overflow-y-auto" style={{ maxHeight: "90px" }}>
|
||||
{day.results.length > 0 ? (
|
||||
day.results.map((teamResult, i) => (
|
||||
<div key={i} className="mt-1 border-t border-gray-200 pt-1">
|
||||
<div className="font-semibold text-xs text-red-600">{teamResult.team}</div>
|
||||
{teamResult.results.map((r, j) => (
|
||||
<div key={j} className="text-xs flex justify-between">
|
||||
<span className="text-gray-500">{r.time}</span>
|
||||
<span className="font-bold">{r.result}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="text-xs text-gray-400 mt-2 text-center">No results</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex justify-end">
|
||||
<button
|
||||
className="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 transition"
|
||||
onClick={() => setShowCalendar(false)}
|
||||
>
|
||||
Back to Results
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Teams Table with multiple results support */}
|
||||
{!loading && !showCalendar && !showChartView && (
|
||||
<div className="bg-white rounded-b-lg overflow-hidden shadow-lg">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-black text-white">
|
||||
<th className="p-3 text-left">Games List</th>
|
||||
<th className="p-3 text-center">
|
||||
{dates.length > 0 && new Date(dates[0]).toLocaleDateString('en-US', { weekday: 'short' })} {dates.length > 0 && new Date(dates[0]).getDate()}th
|
||||
</th>
|
||||
<th className="p-3 text-center">
|
||||
{dates.length > 1 && new Date(dates[1]).toLocaleDateString('en-US', { weekday: 'short' })} {dates.length > 1 && new Date(dates[1]).getDate()}th
|
||||
</th>
|
||||
<th className="p-3 text-center">Chart</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{teams.map(team => (
|
||||
<tr key={team.id} className="border-b hover:bg-gray-50">
|
||||
<td className="p-3">
|
||||
<div className="font-semibold text-red-600">{team.name}</div>
|
||||
<div className="text-sm text-gray-500">at {team.time}</div>
|
||||
<div className="text-xs text-black underline mt-1 cursor-pointer hover:text-red-600" onClick={() => handleViewChart(team)}>Record Chart</div>
|
||||
</td>
|
||||
|
||||
<td className="p-3 text-center">
|
||||
{dates.length > 0 && team.results[dates[0]] && team.results[dates[0]].length > 0 ? (
|
||||
<div className="flex flex-col gap-1">
|
||||
{team.results[dates[0]].map((result, idx) => (
|
||||
<div key={idx} className="flex flex-col">
|
||||
<span className="text-2xl font-bold">{result.result}</span>
|
||||
<span className="text-xs text-gray-500">{result.time}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-2xl font-bold text-gray-400">XX</span>
|
||||
)}
|
||||
</td>
|
||||
|
||||
<td className="p-3 text-center">
|
||||
{dates.length > 1 && team.results[dates[1]] && team.results[dates[1]].length > 0 ? (
|
||||
<div className="flex flex-col gap-1">
|
||||
{team.results[dates[1]].map((result, idx) => (
|
||||
<div key={idx} className="flex flex-col">
|
||||
<span className="text-2xl font-bold">{result.result}</span>
|
||||
<span className="text-xs text-gray-500">{result.time}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-2xl font-bold text-gray-400">XX</span>
|
||||
)}
|
||||
</td>
|
||||
|
||||
<td className="p-3">
|
||||
<div className="flex justify-center">
|
||||
<button
|
||||
className="p-2 bg-red-100 text-red-600 rounded hover:bg-red-200 transition"
|
||||
onClick={() => handleViewChart(team)}
|
||||
title="View Monthly Chart"
|
||||
>
|
||||
<BarChart2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{teams.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan="4" className="p-4 text-center">No teams found</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div className="bg-black text-white text-center p-3">
|
||||
<button className="hover:text-red-400 transition" onClick={handleCalendarView}>Click here for all games results.</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="w-full bg-white text-black">
|
||||
{/* FAQ Section */}
|
||||
<div className="max-w-6xl mx-auto py-6">
|
||||
{faqs.map((faq, index) => (
|
||||
<div key={index} className="mb-2">
|
||||
<button
|
||||
className="w-full bg-red-600 text-white text-lg font-semibold py-3 px-4 flex justify-between items-center rounded-md"
|
||||
onClick={() => toggleFAQ(index)}
|
||||
>
|
||||
{faq.question}
|
||||
<span>{openIndex === index ? "▲" : "▼"}</span>
|
||||
</button>
|
||||
{openIndex === index && (
|
||||
<div className="p-4 bg-gray-100 border border-gray-300">
|
||||
{faq.answer}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Footer Section */}
|
||||
<footer className="bg-white border-t py-6 text-center">
|
||||
<div className="max-w-3xl mx-auto text-gray-600 text-sm">
|
||||
<p className="font-bold text-xl text-black flex items-center justify-center">
|
||||
MATKA <span className="text-red-600"> SATTA</span>
|
||||
</p>
|
||||
<p className="mt-2">
|
||||
The Multi-State Lottery Association makes every effort to ensure the
|
||||
accuracy of winning numbers and other information. Official winning
|
||||
numbers are those selected in the respective drawings and recorded
|
||||
under the observation of an independent accounting firm.
|
||||
</p>
|
||||
<p className="mt-2">
|
||||
In the event of a discrepancy, the official drawing results shall
|
||||
prevail. All winning tickets must be redeemed in the
|
||||
state/jurisdiction in which they are sold.
|
||||
</p>
|
||||
<p className="mt-4 flex justify-center space-x-4 text-black font-semibold">
|
||||
<span>Media Center</span>
|
||||
<span>Legal</span>
|
||||
<span>Privacy</span>
|
||||
<span>español</span>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GameList;
|
||||
@ -1,6 +1,7 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { BarChart2, Calendar, RefreshCw } from 'lucide-react';
|
||||
import { BarChart2, Calendar, RefreshCw, Clock, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import axios from 'axios';
|
||||
import TodaysMatch from './TodaysMatch';
|
||||
|
||||
const Home2 = () => {
|
||||
const [teams, setTeams] = useState([]);
|
||||
@ -13,73 +14,105 @@ const Home2 = () => {
|
||||
const [error, setError] = useState(null);
|
||||
const [calendarData, setCalendarData] = useState([]);
|
||||
const [currentMonth, setCurrentMonth] = useState(new Date());
|
||||
const [upcomingMatches, setUpcomingMatches] = useState([]);
|
||||
|
||||
// API URL
|
||||
const API_URL = 'http://localhost:5500/api';
|
||||
|
||||
// Format time
|
||||
const formatTime = (timeString) => {
|
||||
try {
|
||||
const date = new Date(timeString);
|
||||
return date.toLocaleTimeString("en-US", { hour: '2-digit', minute: '2-digit', hour12: true });
|
||||
} catch (e) {
|
||||
return "XX:XX";
|
||||
}
|
||||
};
|
||||
|
||||
// Check if a match is upcoming
|
||||
const isUpcoming = (resultTime) => {
|
||||
try {
|
||||
const now = new Date();
|
||||
const matchTime = new Date(resultTime);
|
||||
return matchTime > now;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// Fetch teams data
|
||||
useEffect(() => {
|
||||
|
||||
const fetchTeams = async () => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// Get all teams
|
||||
const teamsResponse = await axios.get(`${API_URL}/teams`);
|
||||
alert("teamsResponse");
|
||||
|
||||
// Get today's date and format it
|
||||
const today = new Date();
|
||||
const todayFormatted = today.toISOString().split('T')[0];
|
||||
|
||||
// Get yesterday's date and format it
|
||||
const yesterday = new Date();
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
const yesterdayFormatted = yesterday.toISOString().split('T')[0];
|
||||
|
||||
|
||||
// Set dates for display
|
||||
setDates([yesterdayFormatted, todayFormatted]);
|
||||
|
||||
|
||||
// Get today's results
|
||||
const todayResultsResponse = await axios.get(`${API_URL}/today`);
|
||||
|
||||
// Get yesterday's results for each team
|
||||
const yesterdayResultsPromises = teamsResponse.data.map(team =>
|
||||
axios.get(`${API_URL}/results?team=${team.name}&date=${yesterdayFormatted}`)
|
||||
.then(response => response.data)
|
||||
.catch(() => null) // If no result, return null
|
||||
);
|
||||
|
||||
const yesterdayResults = await Promise.all(yesterdayResultsPromises);
|
||||
|
||||
const todayResultsResponse = await axios.get(`${API_URL}/results/daily?date=${todayFormatted}`);
|
||||
const todayResults = todayResultsResponse.data;
|
||||
|
||||
// Get yesterday's results
|
||||
const yesterdayResultsResponse = await axios.get(`${API_URL}/results/daily?date=${yesterdayFormatted}`);
|
||||
const yesterdayResults = yesterdayResultsResponse.data;
|
||||
|
||||
// Process upcoming matches
|
||||
const upcoming = todayResults.filter(result => isUpcoming(result.result_time));
|
||||
setUpcomingMatches(upcoming);
|
||||
|
||||
// Combine team data with results
|
||||
const teamsWithResults = teamsResponse.data.map((team, index) => {
|
||||
const results = {};
|
||||
|
||||
// Add yesterday's result if available
|
||||
if (yesterdayResults[index]) {
|
||||
results[yesterdayFormatted] = yesterdayResults[index].result;
|
||||
const teamsWithResults = teamsResponse.data.map(team => {
|
||||
// Get all results for this team
|
||||
const yesterdayTeamResults = yesterdayResults.filter(r => r.team === team.name);
|
||||
const todayTeamResults = todayResults.filter(r => r.team === team.name);
|
||||
|
||||
// Create result arrays for both days
|
||||
const yesterdayResultsArr = yesterdayTeamResults.map(r => ({
|
||||
result: r.visible_result,
|
||||
time: formatTime(r.result_time)
|
||||
}));
|
||||
|
||||
const todayResultsArr = todayTeamResults
|
||||
.filter(r => !isUpcoming(r.result_time))
|
||||
.map(r => ({
|
||||
result: r.visible_result,
|
||||
time: formatTime(r.result_time)
|
||||
}));
|
||||
|
||||
// Extract latest scheduled time
|
||||
let latestTime = "XX:XX";
|
||||
const latestTodayResult = todayTeamResults
|
||||
.sort((a, b) => new Date(b.result_time) - new Date(a.result_time))
|
||||
.find(r => r.result_time);
|
||||
|
||||
if (latestTodayResult) {
|
||||
latestTime = formatTime(latestTodayResult.result_time);
|
||||
}
|
||||
|
||||
// Add today's result if available
|
||||
const todayResult = todayResultsResponse.data.find(r => r.team === team.name);
|
||||
if (todayResult) {
|
||||
results[todayFormatted] = todayresult.visible_result;
|
||||
}
|
||||
|
||||
// Extract time from team name or use default
|
||||
let time = "XX:XX";
|
||||
const timePart = team.name.match(/\d{2}:\d{2}\s*(?:AM|PM)/i);
|
||||
if (timePart) {
|
||||
time = timePart[0];
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
id: team.id,
|
||||
name: team.name,
|
||||
time: time,
|
||||
results: results
|
||||
time: latestTime,
|
||||
results: {
|
||||
[yesterdayFormatted]: yesterdayResultsArr,
|
||||
[todayFormatted]: todayResultsArr
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
setTeams(teamsWithResults);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
@ -88,21 +121,21 @@ const Home2 = () => {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchTeams();
|
||||
|
||||
|
||||
fetchData();
|
||||
|
||||
// Update current time every minute
|
||||
const interval = setInterval(() => {
|
||||
const now = new Date();
|
||||
const formattedTime = now.toLocaleString("en-IN", { timeZone: "Asia/Kolkata" });
|
||||
setCurrentTime(formattedTime);
|
||||
}, 60000);
|
||||
|
||||
|
||||
// Set initial time
|
||||
const now = new Date();
|
||||
const formattedTime = now.toLocaleString("en-IN", { timeZone: "Asia/Kolkata" });
|
||||
setCurrentTime(formattedTime);
|
||||
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
@ -114,17 +147,17 @@ const Home2 = () => {
|
||||
const currentDate = new Date();
|
||||
const month = currentDate.getMonth() + 1;
|
||||
const year = currentDate.getFullYear();
|
||||
|
||||
|
||||
const response = await axios.post(`${API_URL}/results/monthly`, {
|
||||
team: team.name,
|
||||
month: `${year}-${month.toString().padStart(2, '0')}`
|
||||
});
|
||||
|
||||
|
||||
setSelectedTeam({
|
||||
...team,
|
||||
chartData: response.data
|
||||
});
|
||||
|
||||
|
||||
setShowChartView(true);
|
||||
setShowCalendar(false);
|
||||
setLoading(false);
|
||||
@ -139,16 +172,16 @@ const Home2 = () => {
|
||||
const loadCalendarData = async (year, month) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
|
||||
// Calculate first and last day of month
|
||||
const firstDay = new Date(year, month, 1).toISOString().split('T')[0];
|
||||
const lastDay = new Date(year, month + 1, 0).toISOString().split('T')[0];
|
||||
|
||||
|
||||
// Get results for each day in the month
|
||||
const dailyResultsPromises = [];
|
||||
const currentDate = new Date(year, month, 1);
|
||||
const lastDate = new Date(year, month + 1, 0);
|
||||
|
||||
|
||||
while (currentDate <= lastDate) {
|
||||
const dateString = currentDate.toISOString().split('T')[0];
|
||||
dailyResultsPromises.push(
|
||||
@ -164,40 +197,55 @@ const Home2 = () => {
|
||||
);
|
||||
currentDate.setDate(currentDate.getDate() + 1);
|
||||
}
|
||||
|
||||
|
||||
const allResults = await Promise.all(dailyResultsPromises);
|
||||
|
||||
|
||||
// Format calendar data
|
||||
const calendarDays = [];
|
||||
const firstDayOfMonth = new Date(year, month, 1);
|
||||
const firstDayWeekday = firstDayOfMonth.getDay();
|
||||
|
||||
|
||||
// Add empty cells for days before the first of the month
|
||||
for (let i = 0; i < firstDayWeekday; i++) {
|
||||
calendarDays.push(null);
|
||||
}
|
||||
|
||||
|
||||
// Add days with results
|
||||
for (let i = 1; i <= lastDate.getDate(); i++) {
|
||||
const dateObj = new Date(year, month, i);
|
||||
const dateStr = dateObj.toISOString().split('T')[0];
|
||||
|
||||
|
||||
const dayData = allResults.find(r => r.date === dateStr);
|
||||
let teamResults = {};
|
||||
|
||||
let dayResults = [];
|
||||
|
||||
if (dayData && dayData.results.length > 0) {
|
||||
// Group by team
|
||||
const teamResults = {};
|
||||
|
||||
dayData.results.forEach(result => {
|
||||
teamResults[result.team] = result.visible_result;
|
||||
if (!teamResults[result.team]) {
|
||||
teamResults[result.team] = [];
|
||||
}
|
||||
teamResults[result.team].push({
|
||||
result: result.visible_result,
|
||||
time: formatTime(result.result_time)
|
||||
});
|
||||
});
|
||||
|
||||
// Create an array for display
|
||||
dayResults = Object.entries(teamResults).map(([team, results]) => ({
|
||||
team,
|
||||
results
|
||||
}));
|
||||
}
|
||||
|
||||
|
||||
calendarDays.push({
|
||||
day: i,
|
||||
date: dateStr,
|
||||
results: teamResults
|
||||
results: dayResults
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
setCalendarData(calendarDays);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
@ -229,243 +277,128 @@ const Home2 = () => {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
// Format date for display
|
||||
const formatDate = (dateString) => {
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
weekday: 'short',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const [openIndex, setOpenIndex] = useState(null);
|
||||
|
||||
const toggleFAQ = (index) => {
|
||||
setOpenIndex(openIndex === index ? null : index);
|
||||
};
|
||||
|
||||
const faqs = [
|
||||
{ question: "HOW TO PLAY", answer: "Details about how to play." },
|
||||
{ question: "WHERE TO PLAY", answer: "Information on where to play." },
|
||||
{ question: "WINNING NUMBERS EMAIL", answer: "Sign up for emails." },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-gray-100 min-h-screen p-4">
|
||||
<div className="w-full bg-gray-100 p-4 text-center">
|
||||
<div className="bg-gray-200 min-h-screen">
|
||||
<div className="w-full bg-white p-4 text-center text-white">
|
||||
{/* Header */}
|
||||
<h1 className="text-3xl font-bold text-black uppercase">SATTA-KING-FAST.com</h1>
|
||||
|
||||
<h1 className="text-3xl md:text-4xl font-bold uppercase text-red-600">
|
||||
<img
|
||||
src="./logo.PNG"
|
||||
alt="Advertisement"
|
||||
className="w-28 h-30 m-auto"
|
||||
/>
|
||||
</h1>
|
||||
|
||||
{/* Advertisement Banner */}
|
||||
<div className="mt-4 flex justify-center items-center">
|
||||
<img
|
||||
src="/api/placeholder/800/120"
|
||||
alt="Advertisement"
|
||||
className="w-full max-w-4xl"
|
||||
<div className="mt-4 flex justify-center items- border w-full lg:w-3/4 m-auto">
|
||||
<img
|
||||
src="./add.png"
|
||||
alt="Advertisement"
|
||||
className="w-auto max-w-4xl h-14"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Informational Text */}
|
||||
<p className="mt-4 text-gray-700 text-sm p-1 w-full lg:w-3/4 m-auto">
|
||||
Delhi Diamond Satta Result And Monthly Satta Chart of March 2025 With Combined Chart of Gali, Desawar, Ghaziabad, Faridabad And Shri Ganesh from Satta King Fast, Satta King Result, Satta King Chart, Black Satta King and Satta King 786.
|
||||
<p className="mt-4 text-black text-sm p-1 w-full lg:w-3/4 m-auto">
|
||||
Delhi Diamond Satta Result And Monthly Satta Chart of March 2025 With Combined Chart of Gali, Desawar, Ghaziabad, Faridabad And Shri Ganesh from Matka Satta Fast, Matka Satta Result, Matka Satta Chart, Black Matka Satta and Matka Satta 786.
|
||||
</p>
|
||||
|
||||
|
||||
{/* Disclaimer */}
|
||||
<p className="mt-2 text-blue-600 text-sm font-medium bg-white p-1 w-full lg:w-3/4 m-auto">
|
||||
Satta-King-Fast.com is the most popular gaming discussion forum for players to use freely and we are not in partnership with any gaming company.
|
||||
<p className="mt-2 text-red-400 text-sm font-medium bg-gray-900 p-2 rounded w-full lg:w-3/4 m-auto">
|
||||
Matka-Satta .com is the most popular gaming discussion forum for players to use freely and we are not in partnership with any gaming company.
|
||||
</p>
|
||||
|
||||
|
||||
{/* Warning Message */}
|
||||
<p className="mt-2 text-red-600 font-bold bg-white p-1 w-full lg:w-3/4 m-auto">
|
||||
<p className="mt-2 text-white font-bold bg-red-700 p-2 rounded w-full lg:w-3/4 m-auto">
|
||||
कृपया ध्यान दें, लीक गेम के नाम पर किसी को कोई पैसा न दें, ना पहले ना बाद में - धन्यवाद
|
||||
</p>
|
||||
|
||||
|
||||
{/* Contact Link */}
|
||||
<p className="mt-2 text-green-600 font-medium bg-white p-1 w-full lg:w-3/4 m-auto">
|
||||
हमसे संपर्क करने के लिए ➡ <a href="#" className="underline">यहाँ क्लिक करें</a>
|
||||
<p className="mt-2 text-white font-medium bg-gray-800 p-2 rounded w-full lg:w-3/4 m-auto">
|
||||
हमसे संपर्क करने के लिए ➡ <a href="#" className="underline text-red-400 hover:text-red-300">यहाँ क्लिक करें</a>
|
||||
</p>
|
||||
|
||||
|
||||
{/* Timestamp */}
|
||||
<p className="mt-2 text-gray-600 text-xs">
|
||||
<p className="mt-2 text-red-400 text-lg text-bold">
|
||||
Updated: {currentTime} IST.
|
||||
</p>
|
||||
</div>
|
||||
<div className="max-w-6xl mx-auto p-4">
|
||||
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{error && (
|
||||
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-emerald-400 p-4 text-white text-center text-xl font-bold rounded-t-lg">
|
||||
{teams.length > 0 && teams[0].name} Satta Result of {dates.length > 1 && new Date(dates[1]).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })} & {dates.length > 0 && new Date(dates[0]).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="bg-white p-4 mb-4 flex justify-between items-center">
|
||||
<div className="text-lg font-semibold">Latest Results</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
className="bg-blue-500 text-white px-4 py-2 rounded flex items-center gap-2"
|
||||
onClick={handleCalendarView}
|
||||
disabled={loading}
|
||||
>
|
||||
<Calendar size={16} />
|
||||
Calendar View
|
||||
</button>
|
||||
<button
|
||||
className="bg-green-500 text-white px-4 py-2 rounded flex items-center gap-2"
|
||||
onClick={handleRefresh}
|
||||
disabled={loading}
|
||||
>
|
||||
<RefreshCw size={16} />
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Loading indicator */}
|
||||
{loading && (
|
||||
<div className="bg-white p-8 mb-4 rounded shadow flex justify-center items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<RefreshCw size={24} className="animate-spin text-blue-500" />
|
||||
<span>Loading data...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Chart View */}
|
||||
{!loading && showChartView && selectedTeam && (
|
||||
<div className="bg-white p-4 mb-4 rounded shadow">
|
||||
<h2 className="text-lg font-semibold mb-4">Monthly Chart: {selectedTeam.name}</h2>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-gray-100">
|
||||
<th className="border p-2 text-left">Date</th>
|
||||
<th className="border p-2 text-right">Result</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{selectedTeam.chartData && selectedTeam.chartData.map((item, index) => (
|
||||
<tr key={index} className={index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}>
|
||||
<td className="border p-2">{new Date(item.result_date).toLocaleDateString()}</td>
|
||||
<td className="border p-2 text-right font-bold">{item.result}</td>
|
||||
</tr>
|
||||
))}
|
||||
{(!selectedTeam.chartData || selectedTeam.chartData.length === 0) && (
|
||||
<tr>
|
||||
<td colSpan="2" className="border p-2 text-center">No chart data available</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="mt-4 flex justify-end">
|
||||
<button
|
||||
className="bg-gray-300 px-4 py-2 rounded"
|
||||
onClick={() => setShowChartView(false)}
|
||||
<TodaysMatch />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="w-full bg-white text-black">
|
||||
{/* FAQ Section */}
|
||||
<div className="max-w-6xl mx-auto py-6">
|
||||
{faqs.map((faq, index) => (
|
||||
<div key={index} className="mb-2">
|
||||
<button
|
||||
className="w-full bg-red-600 text-white text-lg font-semibold py-3 px-4 flex justify-between items-center rounded-md"
|
||||
onClick={() => toggleFAQ(index)}
|
||||
>
|
||||
Back to Results
|
||||
{faq.question}
|
||||
<span>{openIndex === index ? "▲" : "▼"}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Calendar View */}
|
||||
{!loading && showCalendar && (
|
||||
<div className="bg-white p-4 mb-4 rounded shadow">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<button
|
||||
className="bg-gray-200 p-2 rounded"
|
||||
onClick={() => handleMonthChange(-1)}
|
||||
>
|
||||
Previous Month
|
||||
</button>
|
||||
|
||||
<h2 className="text-lg font-semibold">
|
||||
{currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}
|
||||
</h2>
|
||||
|
||||
<button
|
||||
className="bg-gray-200 p-2 rounded"
|
||||
onClick={() => handleMonthChange(1)}
|
||||
>
|
||||
Next Month
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-7 gap-2 mb-2">
|
||||
{['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (
|
||||
<div key={day} className="text-center font-semibold">{day}</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-7 gap-2">
|
||||
{calendarData.map((day, index) => (
|
||||
<div key={index} className={`border rounded p-2 min-h-16 ${day ? 'bg-white' : ''}`}>
|
||||
{day && (
|
||||
<>
|
||||
<div className="text-right text-sm text-gray-500">{day.day}</div>
|
||||
{teams.map(team => (
|
||||
<div key={team.id} className="text-xs mt-1">
|
||||
{day.results[team.name] && (
|
||||
<>
|
||||
<span className="font-semibold">{team.name.split(' ')[0]}:</span> {day.results[team.name]}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
{openIndex === index && (
|
||||
<div className="p-4 bg-gray-100 border border-gray-300">
|
||||
{faq.answer}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex justify-end">
|
||||
<button
|
||||
className="bg-gray-300 px-4 py-2 rounded"
|
||||
onClick={() => setShowCalendar(false)}
|
||||
>
|
||||
Back to Results
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Footer Section */}
|
||||
<footer className="bg-white border-t py-6 text-center">
|
||||
<div className="max-w-3xl mx-auto text-gray-600 text-sm">
|
||||
<p className="font-bold text-xl text-black flex items-center justify-center">
|
||||
MATKA <span className="text-red-600"> SATTA</span>
|
||||
</p>
|
||||
<p className="mt-2">
|
||||
The Multi-State Lottery Association makes every effort to ensure the
|
||||
accuracy of winning numbers and other information. Official winning
|
||||
numbers are those selected in the respective drawings and recorded
|
||||
under the observation of an independent accounting firm.
|
||||
</p>
|
||||
<p className="mt-2">
|
||||
In the event of a discrepancy, the official drawing results shall
|
||||
prevail. All winning tickets must be redeemed in the
|
||||
state/jurisdiction in which they are sold.
|
||||
</p>
|
||||
<p className="mt-4 flex justify-center space-x-4 text-black font-semibold">
|
||||
<span>Media Center</span>
|
||||
<span>Legal</span>
|
||||
<span>Privacy</span>
|
||||
<span>español</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Teams Table */}
|
||||
{!loading && !showCalendar && !showChartView && (
|
||||
<div className="bg-white rounded-b-lg overflow-hidden">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-gray-800 text-white">
|
||||
<th className="p-3 text-left">Games List</th>
|
||||
<th className="p-3 text-center">
|
||||
{dates.length > 0 && new Date(dates[0]).toLocaleDateString('en-US', { weekday: 'short' })} {dates.length > 0 && new Date(dates[0]).getDate()}th
|
||||
</th>
|
||||
<th className="p-3 text-center">
|
||||
{dates.length > 1 && new Date(dates[1]).toLocaleDateString('en-US', { weekday: 'short' })} {dates.length > 1 && new Date(dates[1]).getDate()}th
|
||||
</th>
|
||||
<th className="p-3 text-center">Chart</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{teams.map(team => (
|
||||
<tr key={team.id} className="border-b hover:bg-gray-50">
|
||||
<td className="p-3">
|
||||
<div className="font-semibold">{team.name}</div>
|
||||
<div className="text-sm text-gray-500">at {team.time}</div>
|
||||
<div className="text-xs text-blue-500 underline mt-1 cursor-pointer" onClick={() => handleViewChart(team)}>Record Chart</div>
|
||||
</td>
|
||||
<td className="p-3 text-center text-2xl font-bold">{dates.length > 0 && team.results[dates[0]] || 'XX'}</td>
|
||||
<td className="p-3 text-center text-2xl font-bold">{dates.length > 1 && team.results[dates[1]] || 'XX'}</td>
|
||||
<td className="p-3">
|
||||
<div className="flex justify-center">
|
||||
<button
|
||||
className="p-2 bg-green-100 text-green-600 rounded"
|
||||
onClick={() => handleViewChart(team)}
|
||||
title="View Monthly Chart"
|
||||
>
|
||||
<BarChart2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{teams.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan="4" className="p-4 text-center">No teams found</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div className="bg-gray-700 text-white text-center p-3">
|
||||
<button className="hover:underline" onClick={handleCalendarView}>Click here for all games results.</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
682
src/pages/Home3.js
Normal file
682
src/pages/Home3.js
Normal file
@ -0,0 +1,682 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { BarChart2, Calendar, RefreshCw, Clock, ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
import axios from 'axios';
|
||||
import TodaysMatch from './TodaysMatch';
|
||||
|
||||
const Home2 = () => {
|
||||
const [teams, setTeams] = useState([]);
|
||||
const [dates, setDates] = useState([]);
|
||||
const [selectedTeam, setSelectedTeam] = useState(null);
|
||||
const [showChartView, setShowChartView] = useState(false);
|
||||
const [showCalendar, setShowCalendar] = useState(false);
|
||||
const [currentTime, setCurrentTime] = useState("");
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [calendarData, setCalendarData] = useState([]);
|
||||
const [currentMonth, setCurrentMonth] = useState(new Date());
|
||||
const [upcomingMatches, setUpcomingMatches] = useState([]);
|
||||
|
||||
// API URL
|
||||
const API_URL = 'http://localhost:5500/api';
|
||||
|
||||
// Format time
|
||||
const formatTime = (timeString) => {
|
||||
try {
|
||||
const date = new Date(timeString);
|
||||
return date.toLocaleTimeString("en-US", { hour: '2-digit', minute: '2-digit', hour12: true });
|
||||
} catch (e) {
|
||||
return "XX:XX";
|
||||
}
|
||||
};
|
||||
|
||||
// Check if a match is upcoming
|
||||
const isUpcoming = (resultTime) => {
|
||||
try {
|
||||
const now = new Date();
|
||||
const matchTime = new Date(resultTime);
|
||||
return matchTime > now;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// Fetch teams data
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// Get all teams
|
||||
const teamsResponse = await axios.get(`${API_URL}/teams`);
|
||||
|
||||
// Get today's date and format it
|
||||
const today = new Date();
|
||||
const todayFormatted = today.toISOString().split('T')[0];
|
||||
|
||||
// Get yesterday's date and format it
|
||||
const yesterday = new Date();
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
const yesterdayFormatted = yesterday.toISOString().split('T')[0];
|
||||
|
||||
// Set dates for display
|
||||
setDates([yesterdayFormatted, todayFormatted]);
|
||||
|
||||
// Get today's results
|
||||
const todayResultsResponse = await axios.get(`${API_URL}/results/daily?date=${todayFormatted}`);
|
||||
const todayResults = todayResultsResponse.data;
|
||||
|
||||
// Get yesterday's results
|
||||
const yesterdayResultsResponse = await axios.get(`${API_URL}/results/daily?date=${yesterdayFormatted}`);
|
||||
const yesterdayResults = yesterdayResultsResponse.data;
|
||||
|
||||
// Process upcoming matches
|
||||
const upcoming = todayResults.filter(result => isUpcoming(result.result_time));
|
||||
setUpcomingMatches(upcoming);
|
||||
|
||||
// Combine team data with results
|
||||
const teamsWithResults = teamsResponse.data.map(team => {
|
||||
// Get all results for this team
|
||||
const yesterdayTeamResults = yesterdayResults.filter(r => r.team === team.name);
|
||||
const todayTeamResults = todayResults.filter(r => r.team === team.name);
|
||||
|
||||
// Create result arrays for both days
|
||||
const yesterdayResultsArr = yesterdayTeamResults.map(r => ({
|
||||
result: r.visible_result,
|
||||
time: formatTime(r.result_time)
|
||||
}));
|
||||
|
||||
const todayResultsArr = todayTeamResults
|
||||
.filter(r => !isUpcoming(r.result_time))
|
||||
.map(r => ({
|
||||
result: r.visible_result,
|
||||
time: formatTime(r.result_time)
|
||||
}));
|
||||
|
||||
// Extract latest scheduled time
|
||||
let latestTime = "XX:XX";
|
||||
const latestTodayResult = todayTeamResults
|
||||
.sort((a, b) => new Date(b.result_time) - new Date(a.result_time))
|
||||
.find(r => r.result_time);
|
||||
|
||||
if (latestTodayResult) {
|
||||
latestTime = formatTime(latestTodayResult.result_time);
|
||||
}
|
||||
|
||||
return {
|
||||
id: team.id,
|
||||
name: team.name,
|
||||
time: latestTime,
|
||||
results: {
|
||||
[yesterdayFormatted]: yesterdayResultsArr,
|
||||
[todayFormatted]: todayResultsArr
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
setTeams(teamsWithResults);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
console.error("Error fetching data:", err);
|
||||
setError("Failed to load team data. Please try again later.");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
|
||||
// Update current time every minute
|
||||
const interval = setInterval(() => {
|
||||
const now = new Date();
|
||||
const formattedTime = now.toLocaleString("en-IN", { timeZone: "Asia/Kolkata" });
|
||||
setCurrentTime(formattedTime);
|
||||
}, 60000);
|
||||
|
||||
// Set initial time
|
||||
const now = new Date();
|
||||
const formattedTime = now.toLocaleString("en-IN", { timeZone: "Asia/Kolkata" });
|
||||
setCurrentTime(formattedTime);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
// Show chart for selected team
|
||||
const handleViewChart = async (team) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
// Get monthly results for the selected team
|
||||
const currentDate = new Date();
|
||||
const month = currentDate.getMonth() + 1;
|
||||
const year = currentDate.getFullYear();
|
||||
|
||||
const response = await axios.post(`${API_URL}/results/monthly`, {
|
||||
team: team.name,
|
||||
month: `${year}-${month.toString().padStart(2, '0')}`
|
||||
});
|
||||
|
||||
setSelectedTeam({
|
||||
...team,
|
||||
chartData: response.data
|
||||
});
|
||||
|
||||
setShowChartView(true);
|
||||
setShowCalendar(false);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
console.error("Error fetching chart data:", err);
|
||||
setError("Failed to load chart data. Please try again later.");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Load calendar data
|
||||
const loadCalendarData = async (year, month) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// Calculate first and last day of month
|
||||
const firstDay = new Date(year, month, 1).toISOString().split('T')[0];
|
||||
const lastDay = new Date(year, month + 1, 0).toISOString().split('T')[0];
|
||||
|
||||
// Get results for each day in the month
|
||||
const dailyResultsPromises = [];
|
||||
const currentDate = new Date(year, month, 1);
|
||||
const lastDate = new Date(year, month + 1, 0);
|
||||
|
||||
while (currentDate <= lastDate) {
|
||||
const dateString = currentDate.toISOString().split('T')[0];
|
||||
dailyResultsPromises.push(
|
||||
axios.get(`${API_URL}/results/daily?date=${dateString}`)
|
||||
.then(response => ({
|
||||
date: dateString,
|
||||
results: response.data
|
||||
}))
|
||||
.catch(() => ({
|
||||
date: dateString,
|
||||
results: []
|
||||
}))
|
||||
);
|
||||
currentDate.setDate(currentDate.getDate() + 1);
|
||||
}
|
||||
|
||||
const allResults = await Promise.all(dailyResultsPromises);
|
||||
|
||||
// Format calendar data
|
||||
const calendarDays = [];
|
||||
const firstDayOfMonth = new Date(year, month, 1);
|
||||
const firstDayWeekday = firstDayOfMonth.getDay();
|
||||
|
||||
// Add empty cells for days before the first of the month
|
||||
for (let i = 0; i < firstDayWeekday; i++) {
|
||||
calendarDays.push(null);
|
||||
}
|
||||
|
||||
// Add days with results
|
||||
for (let i = 1; i <= lastDate.getDate(); i++) {
|
||||
const dateObj = new Date(year, month, i);
|
||||
const dateStr = dateObj.toISOString().split('T')[0];
|
||||
|
||||
const dayData = allResults.find(r => r.date === dateStr);
|
||||
let dayResults = [];
|
||||
|
||||
if (dayData && dayData.results.length > 0) {
|
||||
// Group by team
|
||||
const teamResults = {};
|
||||
|
||||
dayData.results.forEach(result => {
|
||||
if (!teamResults[result.team]) {
|
||||
teamResults[result.team] = [];
|
||||
}
|
||||
teamResults[result.team].push({
|
||||
result: result.visible_result,
|
||||
time: formatTime(result.result_time)
|
||||
});
|
||||
});
|
||||
|
||||
// Create an array for display
|
||||
dayResults = Object.entries(teamResults).map(([team, results]) => ({
|
||||
team,
|
||||
results
|
||||
}));
|
||||
}
|
||||
|
||||
calendarDays.push({
|
||||
day: i,
|
||||
date: dateStr,
|
||||
results: dayResults
|
||||
});
|
||||
}
|
||||
|
||||
setCalendarData(calendarDays);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
console.error("Error loading calendar data:", err);
|
||||
setError("Failed to load calendar data. Please try again later.");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle calendar view button click
|
||||
const handleCalendarView = () => {
|
||||
const now = new Date();
|
||||
setCurrentMonth(now);
|
||||
loadCalendarData(now.getFullYear(), now.getMonth());
|
||||
setShowCalendar(true);
|
||||
setShowChartView(false);
|
||||
};
|
||||
|
||||
// Handle month change in calendar
|
||||
const handleMonthChange = (increment) => {
|
||||
const newMonth = new Date(currentMonth);
|
||||
newMonth.setMonth(newMonth.getMonth() + increment);
|
||||
setCurrentMonth(newMonth);
|
||||
loadCalendarData(newMonth.getFullYear(), newMonth.getMonth());
|
||||
};
|
||||
|
||||
// Refresh data
|
||||
const handleRefresh = () => {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
// Format date for display
|
||||
const formatDate = (dateString) => {
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
weekday: 'short',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
const [openIndex, setOpenIndex] = useState(null);
|
||||
|
||||
const toggleFAQ = (index) => {
|
||||
setOpenIndex(openIndex === index ? null : index);
|
||||
};
|
||||
|
||||
const faqs = [
|
||||
{ question: "HOW TO PLAY", answer: "Details about how to play." },
|
||||
{ question: "WHERE TO PLAY", answer: "Information on where to play." },
|
||||
{ question: "WINNING NUMBERS EMAIL", answer: "Sign up for emails." },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-gray-200 min-h-screen">
|
||||
<div className="w-full bg-white p-4 text-center text-white">
|
||||
{/* Header */}
|
||||
<h1 className="text-3xl md:text-4xl font-bold uppercase text-red-600">
|
||||
<img
|
||||
src="./logo.PNG"
|
||||
alt="Advertisement"
|
||||
className="w-28 h-30 m-auto"
|
||||
/>
|
||||
</h1>
|
||||
|
||||
{/* Advertisement Banner */}
|
||||
<div className="mt-4 flex justify-center items- border">
|
||||
<img
|
||||
src="./add.png"
|
||||
alt="Advertisement"
|
||||
className="w-auto max-w-4xl h-14"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Informational Text */}
|
||||
<p className="mt-4 text-black text-sm p-1 w-full lg:w-3/4 m-auto">
|
||||
Delhi Diamond Satta Result And Monthly Satta Chart of March 2025 With Combined Chart of Gali, Desawar, Ghaziabad, Faridabad And Shri Ganesh from Matka Satta Fast, Matka Satta Result, Matka Satta Chart, Black Matka Satta and Matka Satta 786.
|
||||
</p>
|
||||
|
||||
{/* Disclaimer */}
|
||||
<p className="mt-2 text-red-400 text-sm font-medium bg-gray-900 p-2 rounded w-full lg:w-3/4 m-auto">
|
||||
Matka-Satta .com is the most popular gaming discussion forum for players to use freely and we are not in partnership with any gaming company.
|
||||
</p>
|
||||
|
||||
{/* Warning Message */}
|
||||
<p className="mt-2 text-white font-bold bg-red-700 p-2 rounded w-full lg:w-3/4 m-auto">
|
||||
कृपया ध्यान दें, लीक गेम के नाम पर किसी को कोई पैसा न दें, ना पहले ना बाद में - धन्यवाद
|
||||
</p>
|
||||
|
||||
{/* Contact Link */}
|
||||
<p className="mt-2 text-white font-medium bg-gray-800 p-2 rounded w-full lg:w-3/4 m-auto">
|
||||
हमसे संपर्क करने के लिए ➡ <a href="#" className="underline text-red-400 hover:text-red-300">यहाँ क्लिक करें</a>
|
||||
</p>
|
||||
|
||||
{/* Timestamp */}
|
||||
<p className="mt-2 text-red-400 text-lg text-bold">
|
||||
Updated: {currentTime} IST.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="max-w-6xl mx-auto p-4">
|
||||
{error && (
|
||||
<div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
)}
|
||||
<TodaysMatch/>
|
||||
|
||||
<div className="bg-red-600 p-4 text-white text-center text-xl font-bold rounded-t-lg shadow-lg">
|
||||
Satta Result of {dates.length > 1 && formatDate(dates[1])} & {dates.length > 0 && formatDate(dates[0])}
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="bg-white p-4 mb-4 flex flex-col md:flex-row justify-between items-center shadow-md">
|
||||
<div className="text-lg font-semibold text-gray-800 mb-2 md:mb-0">Latest Results</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
className="bg-black text-white px-4 py-2 rounded flex items-center gap-2 hover:bg-gray-800 transition"
|
||||
onClick={handleCalendarView}
|
||||
disabled={loading}
|
||||
>
|
||||
<Calendar size={16} />
|
||||
Calendar View
|
||||
</button>
|
||||
<button
|
||||
className="bg-red-600 text-white px-4 py-2 rounded flex items-center gap-2 hover:bg-red-700 transition"
|
||||
onClick={handleRefresh}
|
||||
disabled={loading}
|
||||
>
|
||||
<RefreshCw size={16} />
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Loading indicator */}
|
||||
{loading && (
|
||||
<div className="bg-white p-8 mb-4 rounded shadow flex justify-center items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<RefreshCw size={24} className="animate-spin text-red-600" />
|
||||
<span>Loading data...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Upcoming Matches */}
|
||||
{!loading && upcomingMatches.length > 0 && !showChartView && !showCalendar && (
|
||||
<div className="bg-white p-4 mb-4 rounded shadow">
|
||||
<h2 className="text-lg font-semibold mb-4 flex items-center gap-2 text-red-600">
|
||||
<Clock size={20} />
|
||||
Upcoming Matches Today
|
||||
</h2>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-black text-white">
|
||||
<th className="border border-gray-300 p-2 text-left">Team</th>
|
||||
<th className="border border-gray-300 p-2 text-center">Scheduled Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{upcomingMatches.map((match, index) => (
|
||||
<tr key={index} className={index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}>
|
||||
<td className="border border-gray-300 p-2 font-medium">{match.team}</td>
|
||||
<td className="border border-gray-300 p-2 text-center">{formatTime(match.result_time)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Chart View */}
|
||||
{!loading && showChartView && selectedTeam && (
|
||||
<div className="bg-white p-4 mb-4 rounded shadow">
|
||||
<h2 className="text-lg font-semibold mb-4 text-red-600">Monthly Chart: {selectedTeam.name}</h2>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-black text-white">
|
||||
<th className="border border-gray-300 p-2 text-left">Date</th>
|
||||
<th className="border border-gray-300 p-2 text-center">Time</th>
|
||||
<th className="border border-gray-300 p-2 text-right">Result</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{selectedTeam.chartData && selectedTeam.chartData.map((item, index) => (
|
||||
<tr key={index} className={index % 2 === 0 ? 'bg-gray-50' : 'bg-white'}>
|
||||
<td className="border border-gray-300 p-2">{new Date(item.result_date).toLocaleDateString()}</td>
|
||||
<td className="border border-gray-300 p-2 text-center">{formatTime(item.result_time)}</td>
|
||||
<td className="border border-gray-300 p-2 text-right font-bold">{item.result}</td>
|
||||
</tr>
|
||||
))}
|
||||
{(!selectedTeam.chartData || selectedTeam.chartData.length === 0) && (
|
||||
<tr>
|
||||
<td colSpan="3" className="border border-gray-300 p-2 text-center">No chart data available</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="mt-4 flex justify-end">
|
||||
<button
|
||||
className="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 transition"
|
||||
onClick={() => setShowChartView(false)}
|
||||
>
|
||||
Back to Results
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Calendar View - Improved Responsive Design */}
|
||||
{!loading && showCalendar && (
|
||||
<div className="bg-white p-4 mb-4 rounded shadow">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<button
|
||||
className="bg-black text-white p-2 rounded flex items-center gap-1 hover:bg-gray-800 transition"
|
||||
onClick={() => handleMonthChange(-1)}
|
||||
>
|
||||
<ChevronLeft size={16} />
|
||||
<span className="hidden sm:inline">Previous</span>
|
||||
</button>
|
||||
|
||||
<h2 className="text-lg font-semibold text-red-600">
|
||||
{currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}
|
||||
</h2>
|
||||
|
||||
<button
|
||||
className="bg-black text-white p-2 rounded flex items-center gap-1 hover:bg-gray-800 transition"
|
||||
onClick={() => handleMonthChange(1)}
|
||||
>
|
||||
<span className="hidden sm:inline">Next</span>
|
||||
<ChevronRight size={16} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-7 gap-1 mb-2">
|
||||
{['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (
|
||||
<div key={day} className="text-center font-semibold bg-gray-800 text-white p-1 text-xs sm:text-sm">{day}</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-7 gap-1">
|
||||
{calendarData.map((day, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`border rounded p-1 overflow-y-auto ${day ? 'bg-white' : 'bg-gray-100'
|
||||
}`}
|
||||
style={{
|
||||
height: "120px",
|
||||
maxHeight: "120px"
|
||||
}}
|
||||
>
|
||||
{day && (
|
||||
<>
|
||||
<div className={`text-right text-sm font-medium ${new Date().toISOString().split('T')[0] === day.date ?
|
||||
'bg-red-600 text-white p-1 rounded-full w-6 h-6 flex items-center justify-center ml-auto' :
|
||||
'text-gray-700'
|
||||
}`}>
|
||||
{day.day}
|
||||
</div>
|
||||
<div className="overflow-y-auto" style={{ maxHeight: "90px" }}>
|
||||
{day.results.length > 0 ? (
|
||||
day.results.map((teamResult, i) => (
|
||||
<div key={i} className="mt-1 border-t border-gray-200 pt-1">
|
||||
<div className="font-semibold text-xs text-red-600">{teamResult.team}</div>
|
||||
{teamResult.results.map((r, j) => (
|
||||
<div key={j} className="text-xs flex justify-between">
|
||||
<span className="text-gray-500">{r.time}</span>
|
||||
<span className="font-bold">{r.result}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="text-xs text-gray-400 mt-2 text-center">No results</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex justify-end">
|
||||
<button
|
||||
className="bg-black text-white px-4 py-2 rounded hover:bg-gray-800 transition"
|
||||
onClick={() => setShowCalendar(false)}
|
||||
>
|
||||
Back to Results
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Teams Table with multiple results support */}
|
||||
{!loading && !showCalendar && !showChartView && (
|
||||
<div className="bg-white rounded-b-lg overflow-hidden shadow-lg">
|
||||
<table className="w-full border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-black text-white">
|
||||
<th className="p-3 text-left">Games List</th>
|
||||
<th className="p-3 text-center">
|
||||
{dates.length > 0 && new Date(dates[0]).toLocaleDateString('en-US', { weekday: 'short' })} {dates.length > 0 && new Date(dates[0]).getDate()}th
|
||||
</th>
|
||||
<th className="p-3 text-center">
|
||||
{dates.length > 1 && new Date(dates[1]).toLocaleDateString('en-US', { weekday: 'short' })} {dates.length > 1 && new Date(dates[1]).getDate()}th
|
||||
</th>
|
||||
<th className="p-3 text-center">Chart</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{teams.map(team => (
|
||||
<tr key={team.id} className="border-b hover:bg-gray-50">
|
||||
<td className="p-3">
|
||||
<div className="font-semibold text-red-600">{team.name}</div>
|
||||
<div className="text-sm text-gray-500">at {team.time}</div>
|
||||
<div className="text-xs text-black underline mt-1 cursor-pointer hover:text-red-600" onClick={() => handleViewChart(team)}>Record Chart</div>
|
||||
</td>
|
||||
|
||||
<td className="p-3 text-center">
|
||||
{dates.length > 0 && team.results[dates[0]] && team.results[dates[0]].length > 0 ? (
|
||||
<div className="flex flex-col gap-1">
|
||||
{team.results[dates[0]].map((result, idx) => (
|
||||
<div key={idx} className="flex flex-col">
|
||||
<span className="text-2xl font-bold">{result.result}</span>
|
||||
<span className="text-xs text-gray-500">{result.time}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-2xl font-bold text-gray-400">XX</span>
|
||||
)}
|
||||
</td>
|
||||
|
||||
<td className="p-3 text-center">
|
||||
{dates.length > 1 && team.results[dates[1]] && team.results[dates[1]].length > 0 ? (
|
||||
<div className="flex flex-col gap-1">
|
||||
{team.results[dates[1]].map((result, idx) => (
|
||||
<div key={idx} className="flex flex-col">
|
||||
<span className="text-2xl font-bold">{result.result}</span>
|
||||
<span className="text-xs text-gray-500">{result.time}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-2xl font-bold text-gray-400">XX</span>
|
||||
)}
|
||||
</td>
|
||||
|
||||
<td className="p-3">
|
||||
<div className="flex justify-center">
|
||||
<button
|
||||
className="p-2 bg-red-100 text-red-600 rounded hover:bg-red-200 transition"
|
||||
onClick={() => handleViewChart(team)}
|
||||
title="View Monthly Chart"
|
||||
>
|
||||
<BarChart2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{teams.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan="4" className="p-4 text-center">No teams found</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div className="bg-black text-white text-center p-3">
|
||||
<button className="hover:text-red-400 transition" onClick={handleCalendarView}>Click here for all games results.</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="w-full bg-white text-black">
|
||||
{/* FAQ Section */}
|
||||
<div className="max-w-6xl mx-auto py-6">
|
||||
{faqs.map((faq, index) => (
|
||||
<div key={index} className="mb-2">
|
||||
<button
|
||||
className="w-full bg-red-600 text-white text-lg font-semibold py-3 px-4 flex justify-between items-center rounded-md"
|
||||
onClick={() => toggleFAQ(index)}
|
||||
>
|
||||
{faq.question}
|
||||
<span>{openIndex === index ? "▲" : "▼"}</span>
|
||||
</button>
|
||||
{openIndex === index && (
|
||||
<div className="p-4 bg-gray-100 border border-gray-300">
|
||||
{faq.answer}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Footer Section */}
|
||||
<footer className="bg-white border-t py-6 text-center">
|
||||
<div className="max-w-3xl mx-auto text-gray-600 text-sm">
|
||||
<p className="font-bold text-xl text-black flex items-center justify-center">
|
||||
MATKA <span className="text-red-600"> SATTA</span>
|
||||
</p>
|
||||
<p className="mt-2">
|
||||
The Multi-State Lottery Association makes every effort to ensure the
|
||||
accuracy of winning numbers and other information. Official winning
|
||||
numbers are those selected in the respective drawings and recorded
|
||||
under the observation of an independent accounting firm.
|
||||
</p>
|
||||
<p className="mt-2">
|
||||
In the event of a discrepancy, the official drawing results shall
|
||||
prevail. All winning tickets must be redeemed in the
|
||||
state/jurisdiction in which they are sold.
|
||||
</p>
|
||||
<p className="mt-4 flex justify-center space-x-4 text-black font-semibold">
|
||||
<span>Media Center</span>
|
||||
<span>Legal</span>
|
||||
<span>Privacy</span>
|
||||
<span>español</span>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home2;
|
||||
282
src/pages/Today.js
Normal file
282
src/pages/Today.js
Normal file
@ -0,0 +1,282 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { RefreshCw, Clock, ChevronDown, ChevronUp, Calendar } from 'lucide-react';
|
||||
import axios from 'axios';
|
||||
|
||||
const Today = () => {
|
||||
const [todaysMatches, setTodaysMatches] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [currentDate, setCurrentDate] = useState('');
|
||||
const [expandedTeams, setExpandedTeams] = useState({});
|
||||
|
||||
// API URL
|
||||
const API_URL = 'http://localhost:5500/api';
|
||||
|
||||
// Format time
|
||||
const formatTime = (timeString) => {
|
||||
try {
|
||||
const date = new Date(timeString);
|
||||
return date.toLocaleTimeString("en-US", { hour: '2-digit', minute: '2-digit', hour12: true });
|
||||
} catch (e) {
|
||||
return "XX:XX";
|
||||
}
|
||||
};
|
||||
|
||||
// Toggle team expansion
|
||||
const toggleTeamExpansion = (team) => {
|
||||
setExpandedTeams(prev => ({
|
||||
...prev,
|
||||
[team]: !prev[team]
|
||||
}));
|
||||
};
|
||||
|
||||
// Fetch today's matches
|
||||
useEffect(() => {
|
||||
const fetchTodaysMatches = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// Get today's date for display
|
||||
const today = new Date();
|
||||
setCurrentDate(today.toLocaleDateString('en-US', {
|
||||
weekday: 'short',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
}));
|
||||
|
||||
// Get today's results
|
||||
const todayResultsResponse = await axios.get(`${API_URL}/today`);
|
||||
const todayResults = todayResultsResponse.data;
|
||||
|
||||
// Group by team
|
||||
const teamResults = {};
|
||||
|
||||
todayResults.forEach(result => {
|
||||
if (!teamResults[result.team]) {
|
||||
teamResults[result.team] = [];
|
||||
}
|
||||
teamResults[result.team].push({
|
||||
result: result.visible_result,
|
||||
time: formatTime(result.result_time),
|
||||
timestamp: new Date(result.result_time),
|
||||
upcoming: new Date(result.result_time) > new Date()
|
||||
});
|
||||
});
|
||||
|
||||
// Convert to array for display and initialize expanded state
|
||||
const groupedResults = Object.entries(teamResults).map(([team, results]) => {
|
||||
// Sort by time
|
||||
const sortedResults = results.sort((a, b) => a.timestamp - b.timestamp);
|
||||
|
||||
// Set all teams expanded by default
|
||||
setExpandedTeams(prev => ({
|
||||
...prev,
|
||||
[team]: true
|
||||
}));
|
||||
|
||||
return {
|
||||
team,
|
||||
results: sortedResults,
|
||||
upcomingCount: sortedResults.filter(r => r.upcoming).length,
|
||||
completedCount: sortedResults.filter(r => !r.upcoming).length
|
||||
};
|
||||
});
|
||||
|
||||
setTodaysMatches(groupedResults);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
console.error("Error fetching today's matches:", err);
|
||||
setError("Failed to load today's match data. Please try again later.");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchTodaysMatches();
|
||||
}, []);
|
||||
|
||||
// Refresh data
|
||||
const handleRefresh = () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
// Get today's results
|
||||
const todayResultsResponse = await axios.get(`${API_URL}/today`);
|
||||
const todayResults = todayResultsResponse.data;
|
||||
|
||||
// Group by team
|
||||
const teamResults = {};
|
||||
|
||||
todayResults.forEach(result => {
|
||||
if (!teamResults[result.team]) {
|
||||
teamResults[result.team] = [];
|
||||
}
|
||||
teamResults[result.team].push({
|
||||
result: result.visible_result,
|
||||
time: formatTime(result.result_time),
|
||||
timestamp: new Date(result.result_time),
|
||||
upcoming: new Date(result.result_time) > new Date()
|
||||
});
|
||||
});
|
||||
|
||||
// Convert to array for display
|
||||
const groupedResults = Object.entries(teamResults).map(([team, results]) => {
|
||||
// Sort by time
|
||||
const sortedResults = results.sort((a, b) => a.timestamp - b.timestamp);
|
||||
|
||||
return {
|
||||
team,
|
||||
results: sortedResults,
|
||||
upcomingCount: sortedResults.filter(r => r.upcoming).length,
|
||||
completedCount: sortedResults.filter(r => !r.upcoming).length
|
||||
};
|
||||
});
|
||||
|
||||
setTodaysMatches(groupedResults);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
setError("Failed to refresh match data. Please try again later.");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
};
|
||||
|
||||
// Get status badge
|
||||
const getStatusBadge = (result) => {
|
||||
if (result.upcoming) {
|
||||
return (
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
||||
Upcoming
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// You could add logic here to style different results differently
|
||||
// For example, showing wins in green, losses in red
|
||||
return (
|
||||
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
||||
Completed
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-lg shadow-lg overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="bg-gradient-to-r from-red-600 to-red-800 p-4 text-white">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold">Today's Matches</h1>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Calendar className="h-5 w-5" />
|
||||
<span className="font-medium">{currentDate}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="bg-gray-50 p-4 flex justify-between items-center border-b">
|
||||
<div className="text-sm font-medium text-gray-500">
|
||||
{todaysMatches.length > 0 ?
|
||||
`${todaysMatches.length} teams with matches today` :
|
||||
"No matches scheduled"}
|
||||
</div>
|
||||
<button
|
||||
className="bg-red-600 text-white px-4 py-2 rounded-md flex items-center gap-2 hover:bg-red-700 transition shadow-sm"
|
||||
onClick={handleRefresh}
|
||||
disabled={loading}
|
||||
>
|
||||
<RefreshCw size={16} className={loading ? "animate-spin" : ""} />
|
||||
{loading ? "Refreshing..." : "Refresh"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Loading indicator */}
|
||||
{loading && (
|
||||
<div className="p-8 flex justify-center items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<RefreshCw size={24} className="animate-spin text-red-600" />
|
||||
<span className="text-gray-600 font-medium">Loading match data...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error message */}
|
||||
{error && (
|
||||
<div className="bg-red-50 border-l-4 border-red-500 p-4 m-4">
|
||||
<div className="flex">
|
||||
<div className="ml-3">
|
||||
<p className="text-sm text-red-700">{error}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results display */}
|
||||
{!loading && !error && (
|
||||
<div className="p-4">
|
||||
{todaysMatches.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{todaysMatches.map((teamData, index) => (
|
||||
<div key={index} className="border border-gray-200 rounded-lg overflow-hidden shadow-sm">
|
||||
{/* Team header - clickable to expand/collapse */}
|
||||
<div
|
||||
className="bg-gradient-to-r from-gray-800 to-gray-700 text-white p-3 flex justify-between items-center cursor-pointer hover:from-gray-700 hover:to-gray-600 transition"
|
||||
onClick={() => toggleTeamExpansion(teamData.team)}
|
||||
>
|
||||
<div className="font-bold text-lg">{teamData.team}</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="text-xs bg-opacity-20 bg-white px-2 py-1 rounded-full">
|
||||
<span className="font-medium">{teamData.upcomingCount}</span> upcoming • <span className="font-medium">{teamData.completedCount}</span> completed
|
||||
</div>
|
||||
{expandedTeams[teamData.team] ? (
|
||||
<ChevronUp size={20} />
|
||||
) : (
|
||||
<ChevronDown size={20} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Team results */}
|
||||
{expandedTeams[teamData.team] && (
|
||||
<div className="divide-y divide-gray-100">
|
||||
{teamData.results.map((result, idx) => (
|
||||
<div key={idx} className={`p-4 flex justify-between items-center ${result.upcoming ? "bg-blue-50" : "bg-white"}`}>
|
||||
<div className="flex items-center space-x-3">
|
||||
<Clock size={16} className="text-gray-400" />
|
||||
<span className="font-medium">{result.time}</span>
|
||||
{getStatusBadge(result)}
|
||||
</div>
|
||||
<div className="text-xl font-bold">
|
||||
{result.upcoming ? (
|
||||
<span className="text-gray-400">--</span>
|
||||
) : (
|
||||
<span className="text-gray-800">{result.result}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center p-8">
|
||||
<div className="mx-auto h-12 w-12 text-gray-400">
|
||||
<Calendar className="h-12 w-12" />
|
||||
</div>
|
||||
<h3 className="mt-2 text-sm font-medium text-gray-900">No matches today</h3>
|
||||
<p className="mt-1 text-sm text-gray-500">There are no matches scheduled for today.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Today;
|
||||
298
src/pages/TodaysMatch.js
Normal file
298
src/pages/TodaysMatch.js
Normal file
@ -0,0 +1,298 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { RefreshCw, Clock, ChevronRight, ChevronLeft } from 'lucide-react';
|
||||
import axios from 'axios';
|
||||
|
||||
const TodaysMatch = () => {
|
||||
const [todaysMatches, setTodaysMatches] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [currentDate, setCurrentDate] = useState('');
|
||||
const [activeTeamIndex, setActiveTeamIndex] = useState(0);
|
||||
|
||||
// API URL
|
||||
const API_URL = 'http://localhost:5500/api';
|
||||
|
||||
// Format time
|
||||
const formatTime = (timeString) => {
|
||||
try {
|
||||
const date = new Date(timeString);
|
||||
return date.toLocaleTimeString("en-US", { hour: '2-digit', minute: '2-digit', hour12: true });
|
||||
} catch (e) {
|
||||
return "XX:XX";
|
||||
}
|
||||
};
|
||||
|
||||
// Fetch today's matches
|
||||
useEffect(() => {
|
||||
const fetchTodaysMatches = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// Get today's date for display
|
||||
const today = new Date();
|
||||
setCurrentDate(today.toLocaleDateString('en-US', {
|
||||
weekday: 'short',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
year: 'numeric'
|
||||
}));
|
||||
|
||||
// Get today's results
|
||||
const todayResultsResponse = await axios.get(`${API_URL}/today`);
|
||||
const todayResults = todayResultsResponse.data;
|
||||
|
||||
// Group by team
|
||||
const teamResults = {};
|
||||
|
||||
todayResults.forEach(result => {
|
||||
if (!teamResults[result.team]) {
|
||||
teamResults[result.team] = [];
|
||||
}
|
||||
teamResults[result.team].push({
|
||||
result: result.visible_result,
|
||||
time: formatTime(result.result_time),
|
||||
upcoming: new Date(result.result_time) > new Date()
|
||||
});
|
||||
});
|
||||
|
||||
// Convert to array for display
|
||||
const groupedResults = Object.entries(teamResults).map(([team, results]) => ({
|
||||
team,
|
||||
results: results.sort((a, b) => a.upcoming - b.upcoming)
|
||||
}));
|
||||
|
||||
setTodaysMatches(groupedResults);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
console.error("Error fetching today's matches:", err);
|
||||
setError("Failed to load today's match data. Please try again later.");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchTodaysMatches();
|
||||
}, []);
|
||||
|
||||
// Navigation handlers
|
||||
const handleNext = () => {
|
||||
if (todaysMatches.length > 0) {
|
||||
setActiveTeamIndex((prevIndex) =>
|
||||
prevIndex === todaysMatches.length - 1 ? 0 : prevIndex + 1
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePrev = () => {
|
||||
if (todaysMatches.length > 0) {
|
||||
setActiveTeamIndex((prevIndex) =>
|
||||
prevIndex === 0 ? todaysMatches.length - 1 : prevIndex - 1
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// Refresh data
|
||||
const handleRefresh = () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const todayResultsResponse = await axios.get(`${API_URL}/today`);
|
||||
const todayResults = todayResultsResponse.data;
|
||||
|
||||
const teamResults = {};
|
||||
|
||||
todayResults.forEach(result => {
|
||||
if (!teamResults[result.team]) {
|
||||
teamResults[result.team] = [];
|
||||
}
|
||||
teamResults[result.team].push({
|
||||
result: result.visible_result,
|
||||
time: formatTime(result.result_time),
|
||||
upcoming: new Date(result.result_time) > new Date()
|
||||
});
|
||||
});
|
||||
|
||||
const groupedResults = Object.entries(teamResults).map(([team, results]) => ({
|
||||
team,
|
||||
results: results.sort((a, b) => a.upcoming - b.upcoming)
|
||||
}));
|
||||
|
||||
setTodaysMatches(groupedResults);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
setError("Failed to refresh match data. Please try again later.");
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
};
|
||||
|
||||
// Render boxes similar to lottery design
|
||||
return (
|
||||
<div className="flex flex-col md:flex-row gap-4">
|
||||
{/* Today's Matches Box */}
|
||||
<div className="bg-gray-200 rounded-lg shadow-lg overflow-hidden w-full md:w-1/3">
|
||||
<div className="bg-white p-4 rounded-t-lg">
|
||||
<h2 className="text-center font-bold text-xl text-gray-800">Winning Numbers</h2>
|
||||
</div>
|
||||
<div className="p-4 text-center">
|
||||
<h3 className="font-medium text-lg mb-4">{currentDate}</h3>
|
||||
|
||||
{loading ? (
|
||||
<div className="flex justify-center p-6">
|
||||
<RefreshCw size={24} className="animate-spin text-red-600" />
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="bg-red-100 border border-red-400 text-red-700 p-3 rounded">
|
||||
<p>{error}</p>
|
||||
</div>
|
||||
) : todaysMatches.length > 0 ? (
|
||||
<div className="relative">
|
||||
{/* Navigation buttons */}
|
||||
<button
|
||||
onClick={handlePrev}
|
||||
className="absolute left-0 top-1/2 transform -translate-y-1/2 bg-gray-800 text-white rounded-full p-1 z-10"
|
||||
>
|
||||
<ChevronLeft size={20} />
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleNext}
|
||||
className="absolute right-0 top-1/2 transform -translate-y-1/2 bg-gray-800 text-white rounded-full p-1 z-10"
|
||||
>
|
||||
<ChevronRight size={20} />
|
||||
</button>
|
||||
|
||||
{/* Current team results */}
|
||||
<div className="py-2">
|
||||
<div className="bg-gray-800 text-white p-2 font-semibold rounded-t mb-2">
|
||||
{todaysMatches[activeTeamIndex]?.team || "No Team"}
|
||||
</div>
|
||||
|
||||
<div className="overflow-y-auto max-h-48">
|
||||
{todaysMatches[activeTeamIndex]?.results.map((result, idx) => (
|
||||
<div key={idx} className="flex justify-between items-center bg-white p-3 mb-2 rounded shadow">
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock size={16} className="text-gray-500" />
|
||||
<span>{result.time}</span>
|
||||
</div>
|
||||
<div className={`text-xl font-bold ${result.upcoming ? 'text-gray-400' : 'text-red-600'}`}>
|
||||
{result.upcoming ? "Upcoming" : result.result}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Team indicators */}
|
||||
<div className="flex justify-center gap-1 mt-2">
|
||||
{todaysMatches.map((_, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className={`h-2 w-2 rounded-full ${idx === activeTeamIndex ? 'bg-red-600' : 'bg-gray-400'}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center p-6 text-gray-500">
|
||||
No match results available for today.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
className="bg-red-600 text-white px-6 py-2 rounded-full font-bold mt-4 hover:bg-red-700 transition"
|
||||
onClick={handleRefresh}
|
||||
>
|
||||
PLay Now
|
||||
</button>
|
||||
|
||||
{/* <div className="mt-4 grid gap-2">
|
||||
<button className="bg-gray-800 text-white p-3 rounded font-medium">
|
||||
VIEW RESULTS
|
||||
</button>
|
||||
<button className="bg-gray-800 text-white p-3 rounded font-medium">
|
||||
CHECK YOUR NUMBERS
|
||||
</button>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Next Drawing Box */}
|
||||
<div className="bg-gray-200 rounded-lg shadow-lg overflow-hidden w-full md:w-1/3">
|
||||
<div className="bg-white p-4 rounded-t-lg">
|
||||
<h2 className="text-center font-bold text-xl text-gray-800">Next Drawing</h2>
|
||||
</div>
|
||||
<div className="p-4 text-center">
|
||||
<h3 className="font-medium text-lg mb-4">Sat, Mar 22, 2025</h3>
|
||||
|
||||
<div className="flex justify-center gap-2 my-4">
|
||||
<div className="bg-gray-800 text-white w-12 h-12 flex items-center justify-center rounded">
|
||||
<div className="text-xl font-bold">67</div>
|
||||
</div>
|
||||
<div className="bg-gray-800 text-white w-12 h-12 flex items-center justify-center rounded">
|
||||
<div className="text-xl font-bold">58</div>
|
||||
</div>
|
||||
<div className="bg-gray-800 text-white w-12 h-12 flex items-center justify-center rounded">
|
||||
<div className="text-xl font-bold">11</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center gap-2 text-xs text-gray-600 mb-4">
|
||||
<div className="text-center w-12">HOURS</div>
|
||||
<div className="text-center w-12">MINUTES</div>
|
||||
<div className="text-center w-12">SECONDS</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 text-yellow-400 p-2 font-bold mb-2">
|
||||
ESTIMATED JACKPOT
|
||||
</div>
|
||||
|
||||
<div className="text-red-600 text-4xl font-bold mb-4">
|
||||
$444 Million
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 text-yellow-400 p-2 font-bold mb-2">
|
||||
CASH VALUE
|
||||
</div>
|
||||
|
||||
<div className="text-red-600 text-4xl font-bold">
|
||||
$207.2 Million
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Winners Box */}
|
||||
<div className="bg-gray-200 rounded-lg shadow-lg overflow-hidden w-full md:w-1/3">
|
||||
<div className="bg-white p-4 rounded-t-lg">
|
||||
<h2 className="text-center font-bold text-xl text-gray-800">Winners</h2>
|
||||
</div>
|
||||
<div className="p-4 text-center">
|
||||
<h3 className="font-medium text-lg mb-4">Wed, Mar 19, 2025</h3>
|
||||
|
||||
<div className="text-center mb-4">
|
||||
<div className="font-bold">POWERBALL</div>
|
||||
<div className="text-2xl font-bold">JACKPOT WINNERS</div>
|
||||
<div className="text-red-600 text-xl">None</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center mb-4">
|
||||
<div className="font-bold">MATCH 5 + POWER PLAY</div>
|
||||
<div className="text-2xl font-bold">$2 MILLION WINNERS</div>
|
||||
<div className="text-red-600 text-xl">CO, TX</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="font-bold">MATCH 5</div>
|
||||
<div className="text-2xl font-bold">$1 MILLION WINNERS</div>
|
||||
<div className="text-red-600 text-xl">None</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TodaysMatch;
|
||||
Loading…
x
Reference in New Issue
Block a user