diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..e69de29 diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..25d1e4b --- /dev/null +++ b/src/App.js @@ -0,0 +1,24 @@ +import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; +import Home from "./pages/Home"; +import Admin from "./pages/Admin"; +import TeamsResults from "./pages/TeamResult"; +import AdminPanel from "./pages/AdminPannel"; +import { SattaUserView } from "./pages/UserView"; + + +export default function App() { + return ( + + + } /> + }/> + }/> + + + {/* test */} + } /> + }/> + + + ); +} diff --git a/src/App.test.js b/src/App.test.js new file mode 100644 index 0000000..1f03afe --- /dev/null +++ b/src/App.test.js @@ -0,0 +1,8 @@ +import { render, screen } from '@testing-library/react'; +import App from './App'; + +test('renders learn react link', () => { + render(); + const linkElement = screen.getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..bd6213e --- /dev/null +++ b/src/index.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..d563c0f --- /dev/null +++ b/src/index.js @@ -0,0 +1,17 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import App from './App'; +import reportWebVitals from './reportWebVitals'; + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render( + + + +); + +// If you want to start measuring performance in your app, pass a function +// to log results (for example: reportWebVitals(console.log)) +// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals +reportWebVitals(); diff --git a/src/logo.svg b/src/logo.svg new file mode 100644 index 0000000..9dfc1c0 --- /dev/null +++ b/src/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/pages/Admin.js b/src/pages/Admin.js new file mode 100644 index 0000000..c348ef7 --- /dev/null +++ b/src/pages/Admin.js @@ -0,0 +1,586 @@ +import React, { useState, useEffect } from 'react'; +import { PlusCircle, Trash2, Edit, BarChart2, LogIn, Calendar as CalendarIcon } from 'lucide-react'; + +const Admin = () => { + // Authentication state + const [isAuthenticated, setIsAuthenticated] = useState(false); + const [authError, setAuthError] = useState(''); + const [loginData, setLoginData] = useState({ username: '', password: '' }); + + // Static credentials - in a real app, these would be stored securely + const validCredentials = { + username: 'admin', + password: 'satta123' + }; + + const [teams, setTeams] = useState([ + { id: 1, name: 'BIKANER SUPER', time: '02:20 AM', results: { '2025-03-11': '04', '2025-03-12': '61' } }, + { id: 2, name: 'DESAWAR', time: '05:00 AM', results: { '2025-03-11': '79', '2025-03-12': '55' } }, + { id: 3, name: 'FARIDABAD', time: '06:00 PM', results: { '2025-03-11': '78', '2025-03-12': '98' } }, + { id: 4, name: 'GHAZIABAD', time: '09:30 PM', results: { '2025-03-11': '19', '2025-03-12': '23' } }, + { id: 5, name: 'GALI', time: '11:30 PM', results: { '2025-03-11': '72', '2025-03-12': 'XX' } }, + ]); + + const [selectedTeam, setSelectedTeam] = useState(null); + const [showAddForm, setShowAddForm] = useState(false); + const [showEditForm, setShowEditForm] = useState(false); + const [showChartView, setShowChartView] = useState(false); + const [showCalendar, setShowCalendar] = useState(false); + const [formData, setFormData] = useState({ name: '', time: '', result: '' }); + const [dates, setDates] = useState(['2025-03-11', '2025-03-12']); + const [currentDate, setCurrentDate] = useState('2025-03-12'); + + // Calendar state + const [calendarYear, setCalendarYear] = useState(new Date().getFullYear()); + const [calendarMonth, setCalendarMonth] = useState(new Date().getMonth()); + + // Handle login input changes + const handleLoginInputChange = (e) => { + const { name, value } = e.target; + setLoginData({ ...loginData, [name]: value }); + setAuthError(''); + }; + + // Handle login submission + const handleLogin = (e) => { + e.preventDefault(); + if (loginData.username === validCredentials.username && + loginData.password === validCredentials.password) { + setIsAuthenticated(true); + setAuthError(''); + } else { + setAuthError('Invalid username or password'); + } + }; + + // Handle logout + const handleLogout = () => { + setIsAuthenticated(false); + setLoginData({ username: '', password: '' }); + }; + + // Handle input changes for team forms + const handleInputChange = (e) => { + const { name, value } = e.target; + setFormData({ ...formData, [name]: value }); + }; + + // Add new team + const handleAddTeam = () => { + const newTeam = { + id: teams.length + 1, + name: formData.name, + time: formData.time, + results: { + [dates[0]]: '', + [dates[1]]: '' + } + }; + setTeams([...teams, newTeam]); + setFormData({ name: '', time: '', result: '' }); + setShowAddForm(false); + }; + + // Delete team + const handleDeleteTeam = (id) => { + setTeams(teams.filter(team => team.id !== id)); + }; + + // Select team for editing + const handleSelectTeam = (team) => { + setSelectedTeam(team); + setFormData({ + name: team.name, + time: team.time, + result: team.results[currentDate] || '' + }); + setShowEditForm(true); + setShowChartView(false); + }; + + // Update team + const handleUpdateTeam = () => { + const updatedTeams = teams.map(team => { + if (team.id === selectedTeam.id) { + const updatedResults = { ...team.results }; + updatedResults[currentDate] = formData.result; + + return { + ...team, + name: formData.name, + time: formData.time, + results: updatedResults + }; + } + return team; + }); + + setTeams(updatedTeams); + setShowEditForm(false); + setSelectedTeam(null); + setFormData({ name: '', time: '', result: '' }); + }; + + // Show chart for selected team + const handleViewChart = (team) => { + setSelectedTeam(team); + setShowChartView(true); + setShowEditForm(false); + }; + + // Generate mock chart data for the selected team + const generateChartData = () => { + if (!selectedTeam) return []; + + // Generate some random data for demonstration + const mockData = []; + const currentDate = new Date(); + + for (let i = 0; i < 30; i++) { + const date = new Date(currentDate); + date.setDate(date.getDate() - i); + const dateStr = date.toISOString().split('T')[0]; + + mockData.unshift({ + date: dateStr, + result: Math.floor(Math.random() * 100).toString().padStart(2, '0') + }); + } + + return mockData; + }; + + // Calendar helpers + const getDaysInMonth = (year, month) => { + return new Date(year, month + 1, 0).getDate(); + }; + + const getFirstDayOfMonth = (year, month) => { + return new Date(year, month, 1).getDay(); + }; + + const handlePrevMonth = () => { + if (calendarMonth === 0) { + setCalendarMonth(11); + setCalendarYear(calendarYear - 1); + } else { + setCalendarMonth(calendarMonth - 1); + } + }; + + const handleNextMonth = () => { + if (calendarMonth === 11) { + setCalendarMonth(0); + setCalendarYear(calendarYear + 1); + } else { + setCalendarMonth(calendarMonth + 1); + } + }; + + const handleDateSelect = (day) => { + const selectedDate = new Date(calendarYear, calendarMonth, day); + const formattedDate = selectedDate.toISOString().split('T')[0]; + + // Check if the date is in the dates array + if (!dates.includes(formattedDate)) { + // Add the date to the dates array + const newDates = [...dates, formattedDate].sort(); + setDates(newDates); + + // Update teams with the new date + const updatedTeams = teams.map(team => { + const updatedResults = { ...team.results }; + if (!updatedResults[formattedDate]) { + updatedResults[formattedDate] = ''; + } + return { ...team, results: updatedResults }; + }); + + setTeams(updatedTeams); + } + + setCurrentDate(formattedDate); + setShowCalendar(false); + }; + + // Calendar component + const CalendarComponent = () => { + const monthNames = ["January", "February", "March", "April", "May", "June", + "July", "August", "September", "October", "November", "December" + ]; + + const daysInMonth = getDaysInMonth(calendarYear, calendarMonth); + const firstDay = getFirstDayOfMonth(calendarYear, calendarMonth); + + const renderCalendarDays = () => { + const days = []; + + // Add empty cells for days before the first day of the month + for (let i = 0; i < firstDay; i++) { + days.push(
); + } + + // Add cells for each day of the month + for (let day = 1; day <= daysInMonth; day++) { + const date = new Date(calendarYear, calendarMonth, day).toISOString().split('T')[0]; + const isSelected = dates.includes(date); + const isCurrentDate = date === currentDate; + + days.push( +
handleDateSelect(day)} + > + {day} +
+ ); + } + + return days; + }; + + return ( +
+
+ +
+ {monthNames[calendarMonth]} {calendarYear} +
+ +
+
+ {['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map(day => ( +
+ {day} +
+ ))} +
+
+ {renderCalendarDays()} +
+
+ ); + }; + + // Login Screen Component + const LoginScreen = () => { + return ( +
+
+
+ Bikaner Super Satta Admin Login +
+
+ {authError && ( +
+ {authError} +
+ )} +
+ + +
+
+ + +
+
+ +
+
+
+
+ ); + }; + + // Render login screen if not authenticated + if (!isAuthenticated) { + return ; + } + + // Render admin panel if authenticated + return ( +
+
+
+ Bikaner Super Satta Result Admin Panel + +
+ + {/* Controls */} +
+ + +
+
+ + +
+ {showCalendar && } +
+
+ + {/* Add Form */} + {showAddForm && ( +
+

Add New Team

+
+
+ + +
+
+ + +
+
+
+ + +
+
+ )} + + {/* Edit Form */} + {showEditForm && selectedTeam && ( +
+

Edit Team: {selectedTeam.name}

+
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+ )} + + {/* Chart View */} + {showChartView && selectedTeam && ( +
+

Monthly Chart: {selectedTeam.name}

+
+ + + + + + + + + {generateChartData().map((item, index) => ( + + + + + ))} + +
DateResult
{new Date(item.date).toLocaleDateString()}{item.result}
+
+
+ +
+
+ )} + + {/* Teams Table */} +
+ + + + + + + + + + + {teams.map(team => ( + + + + + + + ))} + +
Games List + {new Date(dates[0]).toLocaleDateString()}
+ {new Date(dates[0]).toLocaleDateString("en-US", {weekday: 'short'})} + 		+ {new Date(dates[1]).toLocaleDateString()}
+ {new Date(dates[1]).toLocaleDateString("en-US", {weekday: 'short'})} + 		Actions
+
{team.name}
+
at {team.time}
+ 		{team.results[dates[0]] || 'XX'}{team.results[dates[1]] || 'XX'} +
+ + + +
+
+
+
+
+ ); +}; + +export default Admin; \ No newline at end of file diff --git a/src/pages/AdminPannel.js b/src/pages/AdminPannel.js new file mode 100644 index 0000000..f273d61 --- /dev/null +++ b/src/pages/AdminPannel.js @@ -0,0 +1,386 @@ +import React, { useState, useEffect } from 'react'; +import { PlusCircle, Trash2, Edit, BarChart2 } from 'lucide-react'; +// import dataService from '../services/dataService'; +import dataService from '../services/DataService'; + +const AdminPanel = () => { + const [teams, setTeams] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + const [selectedTeam, setSelectedTeam] = useState(null); + const [showAddForm, setShowAddForm] = useState(false); + const [showEditForm, setShowEditForm] = useState(false); + const [showChartView, setShowChartView] = useState(false); + const [formData, setFormData] = useState({ name: '', time: '', result: '' }); + const [dates] = useState(['2025-03-11', '2025-03-12']); + const [currentDate, setCurrentDate] = useState('2025-03-12'); + + // Fetch teams on component mount + useEffect(() => { + const fetchTeams = async () => { + try { + setLoading(true); + const data = await dataService.getTeams(); + setTeams(data); + setError(null); + } catch (err) { + setError('Failed to load teams data'); + console.error(err); + } finally { + setLoading(false); + } + }; + + fetchTeams(); + + // Subscribe to real-time updates + const unsubscribe = dataService.subscribeToUpdates((updatedTeams) => { + setTeams(updatedTeams); + }); + + return () => { + unsubscribe(); + }; + }, []); + + // Handle input changes + const handleInputChange = (e) => { + const { name, value } = e.target; + setFormData({ ...formData, [name]: value }); + }; + + // Add new team + const handleAddTeam = async () => { + try { + const newTeamData = { + name: formData.name, + time: formData.time, + results: { + [dates[0]]: '', + [dates[1]]: '' + } + }; + + await dataService.addTeam(newTeamData); + setFormData({ name: '', time: '', result: '' }); + setShowAddForm(false); + } catch (err) { + setError('Failed to add team'); + console.error(err); + } + }; + + // Delete team + const handleDeleteTeam = async (id) => { + try { + await dataService.deleteTeam(id); + } catch (err) { + setError('Failed to delete team'); + console.error(err); + } + }; + + // Select team for editing + const handleSelectTeam = (team) => { + setSelectedTeam(team); + setFormData({ + name: team.name, + time: team.time, + result: team.results[currentDate] || '' + }); + setShowEditForm(true); + setShowChartView(false); + }; + + // Update team + const handleUpdateTeam = async () => { + try { + if (!selectedTeam) return; + + const updatedResults = { ...selectedTeam.results }; + updatedResults[currentDate] = formData.result; + + const updatedTeamData = { + name: formData.name, + time: formData.time, + results: updatedResults + }; + + await dataService.updateTeam(selectedTeam.id, updatedTeamData); + setShowEditForm(false); + setSelectedTeam(null); + setFormData({ name: '', time: '', result: '' }); + } catch (err) { + setError('Failed to update team'); + console.error(err); + } + }; + + // Show chart for selected team + const handleViewChart = (team) => { + setSelectedTeam(team); + setShowChartView(true); + setShowEditForm(false); + }; + + // Generate mock chart data for the selected team + const generateChartData = () => { + if (!selectedTeam) return []; + + // Generate some random data for demonstration + const mockData = []; + const currentDate = new Date(); + + for (let i = 0; i < 30; i++) { + const date = new Date(currentDate); + date.setDate(date.getDate() - i); + const dateStr = date.toISOString().split('T')[0]; + + mockData.unshift({ + date: dateStr, + result: Math.floor(Math.random() * 100).toString().padStart(2, '0') + }); + } + + return mockData; + }; + + if (loading) { + return
Loading...
; + } + + if (error) { + return
{error}
; + } + + return ( +
+
+
+ Bikaner Super Satta Result Admin Panel +
+ + {/* Controls */} +
+ + +
+ +
+
+ + {/* Add Form */} + {showAddForm && ( +
+

Add New Team

+
+
+ + +
+
+ + +
+
+
+ + +
+
+ )} + + {/* Edit Form */} + {showEditForm && selectedTeam && ( +
+

Edit Team: {selectedTeam.name}

+
+
+ + +
+
+ + +
+
+ + +
+
+
+ + +
+
+ )} + + {/* Chart View */} + {showChartView && selectedTeam && ( +
+

Monthly Chart: {selectedTeam.name}

+
+ + + + + + + + + {generateChartData().map((item, index) => ( + + + + + ))} + +
DateResult
{new Date(item.date).toLocaleDateString()}{item.result}
+
+
+ +
+
+ )} + + {/* Teams Table */} +
+ + + + + + + + + + + {teams.map(team => ( + + + + + + + ))} + +
Games List + {new Date(dates[0]).toLocaleDateString()}
+ {new Date(dates[0]).toLocaleDateString("en-US", {weekday: 'short'})} + 		+ {new Date(dates[1]).toLocaleDateString()}
+ {new Date(dates[1]).toLocaleDateString("en-US", {weekday: 'short'})} + 		Actions
+
{team.name}
+
at {team.time}
+ 		{team.results[dates[0]] || 'XX'}{team.results[dates[1]] || 'XX'} +
+ + + +
+
+
+
+
+ ); +}; + +export default AdminPanel; \ No newline at end of file diff --git a/src/pages/Home.js b/src/pages/Home.js new file mode 100644 index 0000000..0a5b685 --- /dev/null +++ b/src/pages/Home.js @@ -0,0 +1,281 @@ +import React, { useState } from 'react'; +import { BarChart2, Calendar } from 'lucide-react'; +import { useEffect } from 'react'; +const Home = () => { + const [teams, setTeams] = useState([ + { id: 1, name: 'BIKANER SUPER', time: '02:20 AM', results: { '2025-03-11': '04', '2025-03-12': '61' } }, + { id: 2, name: 'DESAWAR', time: '05:00 AM', results: { '2025-03-11': '79', '2025-03-12': '55' } }, + { id: 3, name: 'FARIDABAD', time: '06:00 PM', results: { '2025-03-11': '78', '2025-03-12': '98' } }, + { id: 4, name: 'GHAZIABAD', time: '09:30 PM', results: { '2025-03-11': '19', '2025-03-12': '23' } }, + { id: 5, name: 'GALI', time: '11:30 PM', results: { '2025-03-11': '72', '2025-03-12': 'XX' } }, + ]); + + const [dates] = useState(['2025-03-11', '2025-03-12']); + const [selectedTeam, setSelectedTeam] = useState(null); + const [showChartView, setShowChartView] = useState(false); + const [showCalendar, setShowCalendar] = useState(false); + + + + // Show chart for selected team + const handleViewChart = (team) => { + setSelectedTeam(team); + setShowChartView(true); + setShowCalendar(false); + }; + + // Generate mock chart data for the selected team + const generateChartData = () => { + if (!selectedTeam) return []; + + // Generate some random data for demonstration + const mockData = []; + const currentDate = new Date(); + + for (let i = 0; i < 30; i++) { + const date = new Date(currentDate); + date.setDate(date.getDate() - i); + const dateStr = date.toISOString().split('T')[0]; + + mockData.unshift({ + date: dateStr, + result: Math.floor(Math.random() * 100).toString().padStart(2, '0') + }); + } + + return mockData; + }; + + // Generate calendar view with results + const generateCalendarData = () => { + const calendarDays = []; + const currentDate = new Date(); + const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1); + const lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0); + + // Add empty cells for days before the first of the month + const firstDayWeekday = firstDayOfMonth.getDay(); + for (let i = 0; i < firstDayWeekday; i++) { + calendarDays.push(null); + } + + // Add days of the month + for (let i = 1; i <= lastDayOfMonth.getDate(); i++) { + const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), i); + const dateStr = date.toISOString().split('T')[0]; + + // Generate mock results for each team on this date + const dayResults = {}; + teams.forEach(team => { + dayResults[team.id] = Math.floor(Math.random() * 100).toString().padStart(2, '0'); + }); + + calendarDays.push({ + day: i, + date: dateStr, + results: dayResults + }); + } + + return calendarDays; + }; + + const [currentTime, setCurrentTime] = useState(""); + + useEffect(() => { + const now = new Date(); + const formattedTime = now.toLocaleString("en-IN", { timeZone: "Asia/Kolkata" }); + setCurrentTime(formattedTime); + }, []); + + return ( +
+
+ {/* Header */} +

SATTA-KING-FAST.com

+ + {/* 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 Satta King Fast, Satta King Result, Satta King Chart, Black Satta King and Satta King 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. +

+ + {/* Warning Message */} +

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

+ + {/* Contact Link */} +

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

+ + {/* Timestamp */} +

+ Updated: {currentTime} IST. +

+
+ +
+
+ Bikaner Super Satta Result of March 12, 2025 & March 11, 2025 +
+ + {/* Controls */} +
+
Latest Results
+ +
+ +
+
+ + {/* Chart View */} + {showChartView && selectedTeam && ( +
+

Monthly Chart: {selectedTeam.name}

+
+ + + + + + + + + {generateChartData().map((item, index) => ( + + + + + ))} + +
DateResult
{new Date(item.date).toLocaleDateString()}{item.result}
+
+
+ +
+
+ )} + + {/* Calendar View */} + {showCalendar && ( +
+

+ Calendar View: {new Date().toLocaleDateString('en-US', { month: 'long', year: 'numeric' })} +

+ +
+ {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => ( +
{day}
+ ))} +
+ +
+ {generateCalendarData().map((day, index) => ( +
+ {day && ( + <> +
{day.day}
+ {teams.map(team => ( +
+ {team.name.split(' ')[0]}: {day.results[team.id]} +
+ ))} + + )} +
+ ))} +
+ +
+ +
+
+ )} + + {/* Teams Table */} + {!showCalendar && ( +
+ + + + + + + + + + + {teams.map(team => ( + + + + + + + ))} + +
Games List + {new Date(dates[0]).toLocaleDateString('en-US', { weekday: 'short' })} {new Date(dates[0]).getDate()}th + + {new Date(dates[1]).toLocaleDateString('en-US', { weekday: 'short' })} {new Date(dates[1]).getDate()}th + Chart
+
{team.name}
+
at {team.time}
+
Record Chart
+ 		{team.results[dates[0]] || 'XX'}{team.results[dates[1]] || 'XX'} +
+ +
+
+ +
+ +
+
+ )} +
+
+ ); +}; + +export default Home; \ No newline at end of file diff --git a/src/pages/TeamResult.js b/src/pages/TeamResult.js new file mode 100644 index 0000000..fe3a833 --- /dev/null +++ b/src/pages/TeamResult.js @@ -0,0 +1,58 @@ +import React, { useState, useEffect } from "react"; + +const TeamResults = () => { + const [teams, setTeams] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + const fetchData = async () => { + try { + const response = await fetch("http://localhost:5000/api/teams/"); + + if (!response.ok) { + throw new Error(`HTTP error! Status: ${response.status}`); + } + + const data = await response.json(); // Parse JSON response + setTeams(data); // Store the entire API response in state + } catch (error) { + console.error("Error fetching data:", error); + setError(error.message); + } finally { + setLoading(false); + } + }; + + useEffect(() => { + fetchData(); + }, []); + + if (loading) return

Loading...

; + if (error) return

Error: {error}

; + + return ( +
+

Game Results

+
+ {teams.map((team) => ( +
+

{team.name}

+

Time: {team.time}

+
+

Results:

+
    + {Object.entries(team.results).map(([date, result]) => ( +
  • + {date}: {result} +
    • + ))} +
+
+
+ ))} +
+
+ ); +}; + +export default TeamResults; diff --git a/src/pages/UserView.js b/src/pages/UserView.js new file mode 100644 index 0000000..ae6b4eb --- /dev/null +++ b/src/pages/UserView.js @@ -0,0 +1,264 @@ +import React, { useState, useEffect } from 'react'; +import { BarChart2, Calendar } from 'lucide-react'; +import DataService from '../services/DataService'; + +export const SattaUserView = () => { + const [teams, setTeams] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + const [dates] = useState(['2025-03-11', '2025-03-12']); + const [selectedTeam, setSelectedTeam] = useState(null); + const [showChartView, setShowChartView] = useState(false); + const [showCalendar, setShowCalendar] = useState(false); + + // Fetch teams on component mount + useEffect(() => { + const fetchTeams = async () => { + try { + setLoading(true); + const data = await DataService.getTeams(); + setTeams(data); + setError(null); + } catch (err) { + setError('Failed to load teams data'); + console.error(err); + } finally { + setLoading(false); + } + }; + + fetchTeams(); + + // Subscribe to real-time updates + const unsubscribe = DataService.subscribeToUpdates((updatedTeams) => { + setTeams(updatedTeams); + }); + + return () => { + unsubscribe(); + }; + }, []); + + // Show chart for selected team + const handleViewChart = (team) => { + setSelectedTeam(team); + setShowChartView(true); + setShowCalendar(false); + }; + + // Generate mock chart data for the selected team + const generateChartData = () => { + if (!selectedTeam) return []; + + // Generate some random data for demonstration + const mockData = []; + const currentDate = new Date(); + + for (let i = 0; i < 30; i++) { + const date = new Date(currentDate); + date.setDate(date.getDate() - i); + const dateStr = date.toISOString().split('T')[0]; + + mockData.unshift({ + date: dateStr, + result: Math.floor(Math.random() * 100).toString().padStart(2, '0') + }); + } + + return mockData; + }; + + // Generate calendar view with results + const generateCalendarData = () => { + const calendarDays = []; + const currentDate = new Date(); + const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1); + const lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0); + + // Add empty cells for days before the first of the month + const firstDayWeekday = firstDayOfMonth.getDay(); + for (let i = 0; i < firstDayWeekday; i++) { + calendarDays.push(null); + } + + // Add days of the month + for (let i = 1; i <= lastDayOfMonth.getDate(); i++) { + const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), i); + const dateStr = date.toISOString().split('T')[0]; + + // Generate mock results for each team on this date + const dayResults = {}; + teams.forEach(team => { + dayResults[team.id] = Math.floor(Math.random() * 100).toString().padStart(2, '0'); + }); + + calendarDays.push({ + day: i, + date: dateStr, + results: dayResults + }); + } + + return calendarDays; + }; + + if (loading) { + return
Loading...
; + } + + if (error) { + return
{error}
; + } + + return ( +
+
+
+ Bikaner Super Satta Result of March 12, 2025 & March 11, 2025 +
+ + {/* Controls */} +
+
Latest Results
+ +
+ +
+
+ + {/* Chart View */} + {showChartView && selectedTeam && ( +
+

Monthly Chart: {selectedTeam.name}

+
+ + + + + + + + + {generateChartData().map((item, index) => ( + + + + + ))} + +
DateResult
{new Date(item.date).toLocaleDateString()}{item.result}
+
+
+ +
+
+ )} + + {/* Calendar View */} + {showCalendar && ( +
+

+ Calendar View: {new Date().toLocaleDateString('en-US', { month: 'long', year: 'numeric' })} +

+ +
+ {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => ( +
{day}
+ ))} +
+ +
+ {generateCalendarData().map((day, index) => ( +
+ {day && ( + <> +
{day.day}
+ {teams.map(team => ( +
+ {team.name.split(' ')[0]}: {day.results[team.id]} +
+ ))} + + )} +
+ ))} +
+ +
+ +
+
+ )} + + {/* Teams Table */} + {!showCalendar && ( +
+ + + + + + + + + + + {teams.map(team => ( + + + + + + + ))} + +
Games List + {new Date(dates[0]).toLocaleDateString('en-US', { weekday: 'short' })} {new Date(dates[0]).getDate()}th + + {new Date(dates[1]).toLocaleDateString('en-US', { weekday: 'short' })} {new Date(dates[1]).getDate()}th + Chart
+
{team.name}
+
at {team.time}
+
Record Chart
+ 		{team.results[dates[0]] || 'XX'}{team.results[dates[1]] || 'XX'} +
+ +
+
+ +
+ +
+
+ )} + +
+
+ ) +}; diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js new file mode 100644 index 0000000..5253d3a --- /dev/null +++ b/src/reportWebVitals.js @@ -0,0 +1,13 @@ +const reportWebVitals = onPerfEntry => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +}; + +export default reportWebVitals; diff --git a/src/services/DataService.js b/src/services/DataService.js new file mode 100644 index 0000000..4133386 --- /dev/null +++ b/src/services/DataService.js @@ -0,0 +1,65 @@ +// src/services/DataService.js +import axios from 'axios'; +import { io } from 'socket.io-client'; + +const API_URL = 'http://localhost:5000/api'; +const socket = io('http://localhost:5000'); + +export const DataService = { + // Get all teams + getTeams: async () => { + try { + const response = await axios.get(`${API_URL}/teams`); + return response.data; + } catch (error) { + console.error('Error fetching teams:', error); + throw error; + } + }, + + // Add a new team + addTeam: async (team) => { + try { + const response = await axios.post(`${API_URL}/teams`, team); + return response.data; + } catch (error) { + console.error('Error adding team:', error); + throw error; + } + }, + + // Update an existing team + updateTeam: async (id, updatedData) => { + try { + const response = await axios.put(`${API_URL}/teams/${id}`, updatedData); + return response.data; + } catch (error) { + console.error('Error updating team:', error); + throw error; + } + }, + + // Delete a team + deleteTeam: async (id) => { + try { + await axios.delete(`${API_URL}/teams/${id}`); + return true; + } catch (error) { + console.error('Error deleting team:', error); + throw error; + } + }, + + // Subscribe to real-time updates + subscribeToUpdates: (callback) => { + socket.on('teams-updated', (updatedTeams) => { + callback(updatedTeams); + }); + + return () => { + socket.off('teams-updated'); + }; + } +}; + +export default DataService; \ No newline at end of file diff --git a/src/setupTests.js b/src/setupTests.js new file mode 100644 index 0000000..8f2609b --- /dev/null +++ b/src/setupTests.js @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom';