diff --git a/package-lock.json b/package-lock.json index 58e160f..ce7bcfd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index a96ff1d..001f408 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/public/add.png b/public/add.png new file mode 100644 index 0000000..b5d89d8 Binary files /dev/null and b/public/add.png differ diff --git a/public/logo.PNG b/public/logo.PNG new file mode 100644 index 0000000..52a28a5 Binary files /dev/null and b/public/logo.PNG differ diff --git a/src/App.js b/src/App.js index b4ac77b..ebb0575 100644 --- a/src/App.js +++ b/src/App.js @@ -4,23 +4,25 @@ import './App.css'; import { useParams, useNavigate, useLocation } from 'react-router-dom'; import Home from './pages/Home'; import TeamResults from './pages/TeamResult'; +import Home2 from './pages/Home2'; +import GameList from './pages/GameList'; // Auth Context const AuthContext = React.createContext(); const AuthProvider = ({ children }) => { const [token, setToken] = useState(localStorage.getItem('token')); - + const login = (newToken) => { localStorage.setItem('token', newToken); setToken(newToken); }; - + const logout = () => { localStorage.removeItem('token'); setToken(null); }; - + return ( {children} @@ -38,26 +40,26 @@ const apiService = { headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ accessKey, password }) }); - + if (!response.ok) { throw new Error('Login failed'); } - + return response.json(); }, - + getTeams: async (token) => { const response = await fetch(`${API_URL}/api/teams`, { headers: token ? { 'Authorization': `Bearer ${token}` } : {} }); - + if (!response.ok) { throw new Error('Failed to fetch teams'); } - + return response.json(); }, - + createTeam: async (teamData, token) => { const response = await fetch(`${API_URL}/admin/teams`, { method: 'POST', @@ -67,14 +69,14 @@ const apiService = { }, body: JSON.stringify(teamData) }); - + if (!response.ok) { throw new Error('Failed to create team'); } - + return response.json(); }, - + updateTeam: async (id, teamData, token) => { const response = await fetch(`${API_URL}/admin/teams/${id}`, { method: 'PUT', @@ -84,31 +86,31 @@ const apiService = { }, body: JSON.stringify(teamData) }); - + if (!response.ok) { throw new Error('Failed to update team'); } - + return response.json(); }, - + deleteTeam: async (id, token) => { const response = await fetch(`${API_URL}/admin/teams/${id}`, { method: 'DELETE', headers: { 'Authorization': `Bearer ${token}` } }); - + if (!response.ok) { throw new Error('Failed to delete team'); } - + return response.json(); }, - + publishResult: async (resultData, token) => { console.log("Publishing result with data:", resultData); console.log("Using token:", token); - + const response = await fetch(`${API_URL}/admin/results`, { method: 'POST', headers: { @@ -118,99 +120,119 @@ const apiService = { body: JSON.stringify(resultData) }); // In your publishResult function - + if (!response.ok) { const errorData = await response.json().catch(() => ({})); console.error("Server responded with error:", response.status, errorData); console.log("Sending exact payload:", JSON.stringify(resultData)); - throw new Error(`Failed to publish result: ${response.status}`); - }else{ + throw new Error(`Failed to publish result: ${response.status}`); + } else { console.log("Response is ok") } - + return response.json(); }, - + updateResult: async (id, resultData, token) => { - const response = await fetch(`${API_URL}/admin/results/${id}`, { - method: 'PUT', - headers: { - 'Content-Type': 'application/json', - 'Authorization': `Bearer ${token}` - }, - body: JSON.stringify(resultData) - }); - - if (!response.ok) { - throw new Error('Failed to update result'); + console.log(`Updating result ${id} with data:`, resultData); + + try { + const response = await fetch(`${API_URL}/admin/results/${id}`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${token}` + }, + body: JSON.stringify(resultData) + }); + + if (!response.ok) { + // Try to get error details if available + const errorText = await response.text(); + console.error("Server error response:", errorText); + throw new Error(`Server responded with status: ${response.status}`); + } + + return await response.json(); + } catch (error) { + console.error("Error in updateResult:", error); + throw error; } - - return response.json(); }, - + deleteResult: async (id, token) => { - const response = await fetch(`${API_URL}/admin/results/${id}`, { - method: 'DELETE', - headers: { 'Authorization': `Bearer ${token}` } - }); - - if (!response.ok) { - throw new Error('Failed to delete result'); + console.log(`Deleting result ${id}`); + + try { + const response = await fetch(`${API_URL}/admin/results/${id}`, { + method: 'DELETE', + headers: { 'Authorization': `Bearer ${token}` } + }); + + if (!response.ok) { + // Try to get error details if available + const errorText = await response.text(); + console.error("Server error response:", errorText); + throw new Error(`Server responded with status: ${response.status}`); + } + + return await response.json(); + } catch (error) { + console.error("Error in deleteResult:", error); + throw error; } - - return response.json(); }, - + getDailyResults: async (date, token) => { const response = await fetch(`${API_URL}/api/results/daily?date=${date}`, { headers: token ? { 'Authorization': `Bearer ${token}` } : {} }); - + if (!response.ok) { throw new Error('Failed to fetch daily results'); } - + return response.json(); }, - + getMonthlyResults: async (team, month) => { const response = await fetch(`${API_URL}/api/results/monthly`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ team, month }) }); - + if (!response.ok) { throw new Error('Failed to fetch monthly results'); } - + return response.json(); }, - + getTodayResults: async () => { const response = await fetch(`${API_URL}/api/today`); - + if (!response.ok) { throw new Error('Failed to fetch today\'s results'); } - + return response.json(); }, - + // Scheduled games API endpoints getScheduledGames: async (date, token) => { const response = await fetch(`${API_URL}/api/schedule?date=${date}`, { headers: token ? { 'Authorization': `Bearer ${token}` } : {} }); - + if (!response.ok) { throw new Error('Failed to fetch scheduled games'); } - + return response.json(); }, - + createScheduledGame: async (gameData, token) => { const response = await fetch(`${API_URL}/admin/schedule`, { method: 'POST', @@ -220,14 +242,14 @@ const apiService = { }, body: JSON.stringify(gameData) }); - + if (!response.ok) { throw new Error('Failed to create scheduled game'); } - + return response.json(); }, - + updateScheduledGame: async (id, gameData, token) => { const response = await fetch(`${API_URL}/admin/schedule/${id}`, { method: 'PUT', @@ -237,24 +259,24 @@ const apiService = { }, body: JSON.stringify(gameData) }); - + if (!response.ok) { throw new Error('Failed to update scheduled game'); } - + return response.json(); }, - + deleteScheduledGame: async (id, token) => { const response = await fetch(`${API_URL}/admin/schedule/${id}`, { method: 'DELETE', headers: { 'Authorization': `Bearer ${token}` } }); - + if (!response.ok) { throw new Error('Failed to delete scheduled game'); } - + return response.json(); } }; @@ -266,7 +288,7 @@ const Login = () => { const [error, setError] = useState(''); const { login } = React.useContext(AuthContext); const navigate = useNavigate(); - + const handleSubmit = async (e) => { e.preventDefault(); try { @@ -279,7 +301,7 @@ const Login = () => { setError('Invalid credentials'); } }; - + return (

Admin Login

@@ -287,18 +309,18 @@ const Login = () => {
- setAccessKey(e.target.value)} required />
- setPassword(e.target.value)} required /> @@ -314,23 +336,23 @@ const TeamList = () => { const [loading, setLoading] = useState(true); const [error, setError] = useState(''); const { token } = React.useContext(AuthContext); - + useEffect(() => { const fetchTeams = async () => { try { const data = await apiService.getTeams(token); setTeams(data); - // alert(teams) + alert(teams) setLoading(false); } catch (err) { setError('Failed to fetch teams'); setLoading(false); } }; - + fetchTeams(); }, [token]); - + const handleDelete = async (id) => { if (window.confirm('Are you sure you want to delete this team?')) { try { @@ -341,10 +363,10 @@ const TeamList = () => { } } }; - + if (loading) return
Loading...
; if (error) return
{error}
; - + return (

Team Management

@@ -364,8 +386,8 @@ const TeamList = () => { {team.name} Edit -
); }; - // Scheduled Games Components const ScheduleCalendar = () => { const [date, setDate] = useState(new Date().toISOString().split('T')[0]); @@ -698,7 +743,7 @@ const ScheduleCalendar = () => { const [loading, setLoading] = useState(true); const [error, setError] = useState(''); const { token } = React.useContext(AuthContext); - + useEffect(() => { const fetchScheduledGames = async () => { try { @@ -710,14 +755,14 @@ const ScheduleCalendar = () => { setLoading(false); } }; - + fetchScheduledGames(); }, [date, token]); - + const handleDateChange = (e) => { setDate(e.target.value); }; - + const handleDeleteScheduledGame = async (id) => { if (window.confirm('Are you sure you want to delete this scheduled game?')) { try { @@ -728,26 +773,26 @@ const ScheduleCalendar = () => { } } }; - + if (loading) return
Loading...
; if (error) return
{error}
; - + return (

Scheduled Games

-
- +

Games scheduled for {date}

Schedule New Game - + {scheduledGames.length === 0 ? (

No games scheduled for this date.

) : ( @@ -770,8 +815,8 @@ const ScheduleCalendar = () => { {game.status} Edit - - + - +
} /> @@ -978,36 +1035,37 @@ const Dashboard = () => { // Protected Route const ProtectedRoute = ({ children }) => { const { isAuthenticated } = React.useContext(AuthContext); - + if (!isAuthenticated) { return ; } - + return children; }; // App const App = () => { return ( - - - - } /> - - - - } - /> - } /> - } /> - - - + + + + } /> + + + + } + /> + } /> + } /> + } /> + + + - ); + ); }; export default App; \ No newline at end of file diff --git a/src/pages/GameList.js b/src/pages/GameList.js new file mode 100644 index 0000000..9a46dd2 --- /dev/null +++ b/src/pages/GameList.js @@ -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 ( +
+ + +
+ {error && ( +
+

{error}

+
+ )} + + +
+ Satta Result of {dates.length > 1 && formatDate(dates[1])} & {dates.length > 0 && formatDate(dates[0])} +
+ + {/* Controls */} +
+
Latest Results
+ +
+ + +
+
+ + {/* Loading indicator */} + {loading && ( +
+
+ + Loading data... +
+
+ )} + + {/* Upcoming Matches */} + {!loading && upcomingMatches.length > 0 && !showChartView && !showCalendar && ( +
+

+ + Upcoming Matches Today +

+
+ + + + + + + + + {upcomingMatches.map((match, index) => ( + + + + + ))} + +
TeamScheduled Time
{match.team}{formatTime(match.result_time)}
+
+
+ )} + + {/* Chart View */} + {!loading && showChartView && selectedTeam && ( +
+

Monthly Chart: {selectedTeam.name}

+
+ + + + + + + + + + {selectedTeam.chartData && selectedTeam.chartData.map((item, index) => ( + + + + + + ))} + {(!selectedTeam.chartData || selectedTeam.chartData.length === 0) && ( + + + + )} + +
DateTimeResult
{new Date(item.result_date).toLocaleDateString()}{formatTime(item.result_time)}{item.result}
No chart data available
+
+
+ +
+
+ )} + + {/* Calendar View - Improved Responsive Design */} + {!loading && showCalendar && ( +
+
+ + +

+ {currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })} +

+ + +
+ +
+ {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => ( +
{day}
+ ))} +
+ +
+ {calendarData.map((day, index) => ( +
+ {day && ( + <> +
+ {day.day} +
+
+ {day.results.length > 0 ? ( + day.results.map((teamResult, i) => ( +
+
{teamResult.team}
+ {teamResult.results.map((r, j) => ( +
+ {r.time} + {r.result} +
+ ))} +
+ )) + ) : ( +
No results
+ )} +
+ + )} +
+ ))} +
+ +
+ +
+
+ )} + + {/* Teams Table with multiple results support */} + {!loading && !showCalendar && !showChartView && ( +
+ + + + + + + + + + + {teams.map(team => ( + + + + + + + + + + ))} + {teams.length === 0 && ( + + + + )} + +
Games List + {dates.length > 0 && new Date(dates[0]).toLocaleDateString('en-US', { weekday: 'short' })} {dates.length > 0 && new Date(dates[0]).getDate()}th + + {dates.length > 1 && new Date(dates[1]).toLocaleDateString('en-US', { weekday: 'short' })} {dates.length > 1 && new Date(dates[1]).getDate()}th + Chart
+
{team.name}
+
at {team.time}
+
handleViewChart(team)}>Record Chart
+ 		+ {dates.length > 0 && team.results[dates[0]] && team.results[dates[0]].length > 0 ? ( +
+ {team.results[dates[0]].map((result, idx) => ( +
+ {result.result} + {result.time} +
+ ))} +
+ ) : ( + XX + )} + 		+ {dates.length > 1 && team.results[dates[1]] && team.results[dates[1]].length > 0 ? ( +
+ {team.results[dates[1]].map((result, idx) => ( +
+ {result.result} + {result.time} +
+ ))} +
+ ) : ( + XX + )} + 		+
+ +
+
No teams found
+ +
+ +
+
+ )} +
+ +
+ {/* FAQ Section */} +
+ {faqs.map((faq, index) => ( +
+ + {openIndex === index && ( +
+ {faq.answer} +
+ )} +
+ ))} +
+ + {/* Footer Section */} +
+
+

+ MATKA SATTA +

+

+ 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. +

+

+ 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. +

+

+ Media Center + Legal + Privacy + español +

+
+
+
+
+ ); +}; + +export default GameList; \ No newline at end of file diff --git a/src/pages/Home2.js b/src/pages/Home2.js index 33e3896..2decee5 100644 --- a/src/pages/Home2.js +++ b/src/pages/Home2.js @@ -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 ( -
-
+
+
{/* Header */} -

SATTA-KING-FAST.com

- +

+ Advertisement +

+ {/* Advertisement Banner */} -
- Advertisement + Advertisement
- + {/* Informational Text */} -

- 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. +

+ 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.

- + {/* Disclaimer */} -

- 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. +

+ 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.

- + {/* Warning Message */} -

+

कृपया ध्यान दें, लीक गेम के नाम पर किसी को कोई पैसा न दें, ना पहले ना बाद में - धन्यवाद

- + {/* Contact Link */} -

- हमसे संपर्क करने के लिए ➡ यहाँ क्लिक करें +

+ हमसे संपर्क करने के लिए ➡ यहाँ क्लिक करें

- + {/* Timestamp */} -

+

Updated: {currentTime} IST.

+
-
- {error && ( -
-

{error}

-
- )} - -
- {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' })} -
- - {/* Controls */} -
-
Latest Results
- -
- - -
-
- - {/* Loading indicator */} - {loading && ( -
-
- - Loading data... -
-
- )} - - {/* Chart View */} - {!loading && showChartView && selectedTeam && ( -
-

Monthly Chart: {selectedTeam.name}

-
- - - - - - - - - {selectedTeam.chartData && selectedTeam.chartData.map((item, index) => ( - - - - - ))} - {(!selectedTeam.chartData || selectedTeam.chartData.length === 0) && ( - - - - )} - -
DateResult
{new Date(item.result_date).toLocaleDateString()}{item.result}
No chart data available
-
-
-
+ + + +
+ {/* FAQ Section */} +
+ {faqs.map((faq, index) => ( +
+ -
-
- )} - - {/* Calendar View */} - {!loading && showCalendar && ( -
-
- - -

- {currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })} -

- - -
- -
- {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => ( -
{day}
- ))} -
- -
- {calendarData.map((day, index) => ( -
- {day && ( - <> -
{day.day}
- {teams.map(team => ( -
- {day.results[team.name] && ( - <> - {team.name.split(' ')[0]}: {day.results[team.name]} - - )} -
- ))} - - )} + {openIndex === index && ( +
+ {faq.answer}
- ))} -
- -
- + )}
+ ))} +
+ + {/* Footer Section */} +
+
+

+ MATKA SATTA +

+

+ 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. +

+

+ 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. +

+

+ Media Center + Legal + Privacy + español +

- )} - - {/* Teams Table */} - {!loading && !showCalendar && !showChartView && ( -
- - - - - - - - - - - {teams.map(team => ( - - - - - - - ))} - {teams.length === 0 && ( - - - - )} - -
Games List - {dates.length > 0 && new Date(dates[0]).toLocaleDateString('en-US', { weekday: 'short' })} {dates.length > 0 && new Date(dates[0]).getDate()}th - - {dates.length > 1 && new Date(dates[1]).toLocaleDateString('en-US', { weekday: 'short' })} {dates.length > 1 && new Date(dates[1]).getDate()}th - Chart
-
{team.name}
-
at {team.time}
-
handleViewChart(team)}>Record Chart
- 		{dates.length > 0 && team.results[dates[0]] || 'XX'}{dates.length > 1 && team.results[dates[1]] || 'XX'} -
- -
-
No teams found
- -
- -
-
- )} +
); diff --git a/src/pages/Home3.js b/src/pages/Home3.js new file mode 100644 index 0000000..d48e6d9 --- /dev/null +++ b/src/pages/Home3.js @@ -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 ( +
+
+ {/* Header */} +

+ Advertisement +

+ + {/* Advertisement Banner */} +
+ Advertisement +
+ + {/* Informational Text */} +

+ 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. +

+ + {/* Disclaimer */} +

+ 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. +

+ + {/* Warning Message */} +

+ कृपया ध्यान दें, लीक गेम के नाम पर किसी को कोई पैसा न दें, ना पहले ना बाद में - धन्यवाद +

+ + {/* Contact Link */} +

+ हमसे संपर्क करने के लिए ➡ यहाँ क्लिक करें +

+ + {/* Timestamp */} +

+ Updated: {currentTime} IST. +

+
+ +
+ {error && ( +
+

{error}

+
+ )} + + +
+ Satta Result of {dates.length > 1 && formatDate(dates[1])} & {dates.length > 0 && formatDate(dates[0])} +
+ + {/* Controls */} +
+
Latest Results
+ +
+ + +
+
+ + {/* Loading indicator */} + {loading && ( +
+
+ + Loading data... +
+
+ )} + + {/* Upcoming Matches */} + {!loading && upcomingMatches.length > 0 && !showChartView && !showCalendar && ( +
+

+ + Upcoming Matches Today +

+
+ + + + + + + + + {upcomingMatches.map((match, index) => ( + + + + + ))} + +
TeamScheduled Time
{match.team}{formatTime(match.result_time)}
+
+
+ )} + + {/* Chart View */} + {!loading && showChartView && selectedTeam && ( +
+

Monthly Chart: {selectedTeam.name}

+
+ + + + + + + + + + {selectedTeam.chartData && selectedTeam.chartData.map((item, index) => ( + + + + + + ))} + {(!selectedTeam.chartData || selectedTeam.chartData.length === 0) && ( + + + + )} + +
DateTimeResult
{new Date(item.result_date).toLocaleDateString()}{formatTime(item.result_time)}{item.result}
No chart data available
+
+
+ +
+
+ )} + + {/* Calendar View - Improved Responsive Design */} + {!loading && showCalendar && ( +
+
+ + +

+ {currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })} +

+ + +
+ +
+ {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => ( +
{day}
+ ))} +
+ +
+ {calendarData.map((day, index) => ( +
+ {day && ( + <> +
+ {day.day} +
+
+ {day.results.length > 0 ? ( + day.results.map((teamResult, i) => ( +
+
{teamResult.team}
+ {teamResult.results.map((r, j) => ( +
+ {r.time} + {r.result} +
+ ))} +
+ )) + ) : ( +
No results
+ )} +
+ + )} +
+ ))} +
+ +
+ +
+
+ )} + + {/* Teams Table with multiple results support */} + {!loading && !showCalendar && !showChartView && ( +
+ + + + + + + + + + + {teams.map(team => ( + + + + + + + + + + ))} + {teams.length === 0 && ( + + + + )} + +
Games List + {dates.length > 0 && new Date(dates[0]).toLocaleDateString('en-US', { weekday: 'short' })} {dates.length > 0 && new Date(dates[0]).getDate()}th + + {dates.length > 1 && new Date(dates[1]).toLocaleDateString('en-US', { weekday: 'short' })} {dates.length > 1 && new Date(dates[1]).getDate()}th + Chart
+
{team.name}
+
at {team.time}
+
handleViewChart(team)}>Record Chart
+ 		+ {dates.length > 0 && team.results[dates[0]] && team.results[dates[0]].length > 0 ? ( +
+ {team.results[dates[0]].map((result, idx) => ( +
+ {result.result} + {result.time} +
+ ))} +
+ ) : ( + XX + )} + 		+ {dates.length > 1 && team.results[dates[1]] && team.results[dates[1]].length > 0 ? ( +
+ {team.results[dates[1]].map((result, idx) => ( +
+ {result.result} + {result.time} +
+ ))} +
+ ) : ( + XX + )} + 		+
+ +
+
No teams found
+ +
+ +
+
+ )} +
+ +
+ {/* FAQ Section */} +
+ {faqs.map((faq, index) => ( +
+ + {openIndex === index && ( +
+ {faq.answer} +
+ )} +
+ ))} +
+ + {/* Footer Section */} +
+
+

+ MATKA SATTA +

+

+ 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. +

+

+ 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. +

+

+ Media Center + Legal + Privacy + español +

+
+
+
+
+ ); +}; + +export default Home2; \ No newline at end of file diff --git a/src/pages/Today.js b/src/pages/Today.js new file mode 100644 index 0000000..5118fbe --- /dev/null +++ b/src/pages/Today.js @@ -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 ( + + Upcoming + + ); + } + + // You could add logic here to style different results differently + // For example, showing wins in green, losses in red + return ( + + Completed + + ); + }; + + return ( +
+ {/* Header */} +
+
+

Today's Matches

+
+ + {currentDate} +
+
+
+ + {/* Controls */} +
+
+ {todaysMatches.length > 0 ? + `${todaysMatches.length} teams with matches today` : + "No matches scheduled"} +
+ +
+ + {/* Loading indicator */} + {loading && ( +
+
+ + Loading match data... +
+
+ )} + + {/* Error message */} + {error && ( +
+
+
+

{error}

+
+
+
+ )} + + {/* Results display */} + {!loading && !error && ( +
+ {todaysMatches.length > 0 ? ( +
+ {todaysMatches.map((teamData, index) => ( +
+ {/* Team header - clickable to expand/collapse */} +
toggleTeamExpansion(teamData.team)} + > +
{teamData.team}
+
+
+ {teamData.upcomingCount} upcoming • {teamData.completedCount} completed +
+ {expandedTeams[teamData.team] ? ( + + ) : ( + + )} +
+
+ + {/* Team results */} + {expandedTeams[teamData.team] && ( +
+ {teamData.results.map((result, idx) => ( +
+
+ + {result.time} + {getStatusBadge(result)} +
+
+ {result.upcoming ? ( + -- + ) : ( + {result.result} + )} +
+
+ ))} +
+ )} +
+ ))} +
+ ) : ( +
+
+ +
+

No matches today

+

There are no matches scheduled for today.

+
+ )} +
+ )} +
+ ); +}; + +export default Today; \ No newline at end of file diff --git a/src/pages/TodaysMatch.js b/src/pages/TodaysMatch.js new file mode 100644 index 0000000..d2bf62f --- /dev/null +++ b/src/pages/TodaysMatch.js @@ -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 ( +
+ {/* Today's Matches Box */} +
+
+

Winning Numbers

+
+
+

{currentDate}

+ + {loading ? ( +
+ +
+ ) : error ? ( +
+

{error}

+
+ ) : todaysMatches.length > 0 ? ( +
+ {/* Navigation buttons */} + + + + + {/* Current team results */} +
+
+ {todaysMatches[activeTeamIndex]?.team || "No Team"} +
+ +
+ {todaysMatches[activeTeamIndex]?.results.map((result, idx) => ( +
+
+ + {result.time} +
+
+ {result.upcoming ? "Upcoming" : result.result} +
+
+ ))} +
+
+ + {/* Team indicators */} +
+ {todaysMatches.map((_, idx) => ( +
+ ))} +
+
+ ) : ( +
+ No match results available for today. +
+ )} + + + + {/*
+ + +
*/} +
+
+ + {/* Next Drawing Box */} +
+
+

Next Drawing

+
+
+

Sat, Mar 22, 2025

+ +
+
+
67
+
+
+
58
+
+
+
11
+
+
+ +
+
HOURS
+
MINUTES
+
SECONDS
+
+ +
+ ESTIMATED JACKPOT +
+ +
+ $444 Million +
+ +
+ CASH VALUE +
+ +
+ $207.2 Million +
+
+
+ + {/* Winners Box */} +
+
+

Winners

+
+
+

Wed, Mar 19, 2025

+ +
+
POWERBALL
+
JACKPOT WINNERS
+
None
+
+ +
+
MATCH 5 + POWER PLAY
+
$2 MILLION WINNERS
+
CO, TX
+
+ +
+
MATCH 5
+
$1 MILLION WINNERS
+
None
+
+
+
+
+ ); +}; + +export default TodaysMatch; \ No newline at end of file