Merge branch 'main' of https://github.com/sustech-cs304/team-project-…

…24spring-34

client/package.json

@@ -7,15 +7,18 @@
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.12",
     "@mui/icons-material": "^5.15.14",
-    "@mui/material": "^5.15.14",
+    "@mui/material": "^5.12.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.8",
+    "chroma-js": "^2.4.2",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.4",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-flatpickr": "^3.10.13",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "sort-by": "^1.2.0",
@@ -44,5 +47,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
+  "main": "index.js",
+  "author": "",
+  "license": "ISC"
 }

client/src/App.js

@@ -1,22 +1,11 @@
 import logo from './logo.svg';
 import './App.css';
+import Mainpage from './mainpage/Mainpage';
 
 function App() {
   return (
     <div className='App'>
-      <header className='App-header'>
-        <img src={logo} className='App-logo' alt='logo' />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className='App-link'
-          href='https://reactjs.org'
-          target='_blank'
-          rel='noopener noreferrer'>
-          Learn React
-        </a>
-      </header>
+      <Mainpage />
     </div>
   );
 }

client/src/App.test.js

@@ -1,4 +1,4 @@
-import {render, screen} from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import App from './App';
 
 test('renders learn react link', () => {

client/src/Booking_page.js

@@ -0,0 +1,45 @@
+import React, { useState, useEffect }  from 'react';
+import { TextField, Button } from '@mui/material';
+
+const BookingPage = () => {
+    const [seats, setSeats] = useState([
+      { id: 1, row: 1, col: 1, status: 'available' },
+      { id: 2, row: 1, col: 2, status: 'available' },
+    ]);
+
+    const handleSeatSelect = (seatId) => {
+      setSeats(prevSeats => prevSeats.map(seat => {
+        if (seat.id === seatId) {
+          return { ...seat, status: seat.status === 'available' ? 'selected' : 'available' };
+        }
+        return seat;
+      }));
+    };
+
+    const handleConfirm = () => {
+      console.log('Selected seats:', seats.filter(seat => seat.status === 'selected'));
+    };
+
+    return (
+      <div>
+        <h2>Seat Reservation</h2>
+        <table>
+          <tbody>
+            {seats.map(seat => (
+              <tr key={seat.id}>
+                <td
+                  className={seat.status}
+                  onClick={() => handleSeatSelect(seat.id)}
+                >
+                  {seat.row} - {seat.col}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        <button onClick={handleConfirm}>Confirm</button>
+      </div>
+    );
+};
+
+export default BookingPage;

client/src/Detial_page.js

@@ -0,0 +1,87 @@
+// ActivityDetails.js
+import React, { useState, useEffect } from 'react';
+import example_img from './example-poster.jpg';
+import sample_text from './sample-text.txt';
+import { TextField, Button } from '@mui/material';
+
+async function fetchActivityDescription() {
+    try{
+        // const response = await fetch('http://localhost:3306/activity-description');
+        // const data = await response.json();
+
+        // 用于测试的假数据
+        const response = await fetch(sample_text);
+        const data = await response.text();
+        return data;
+    } catch (error) {
+        console.error(error);
+    }
+}
+
+function ActivityDetails() {
+    const [activityDescription, setActivityDescription] = React.useState('');//用户文本
+    const [activityTitle, setActivityTitle] = React.useState('');//活动标题
+
+    const redirectToBookingPage = () => {
+        window.location.href = "/booking";
+    };
+
+    useEffect(() => {
+        async function fetchData() {
+            const data = await fetchActivityDescription();
+            setActivityDescription(data);
+        }
+        fetchData();
+        async function fetchTitle() {
+            // const response = await fetch('http://localhost:3306/activity-title');
+            // const data = await response.json();
+
+            // 用于测试的假数据
+            const data = '示例标题';
+            setActivityTitle(data);
+        }
+        fetchTitle();
+    }, []);
+
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+            <div>
+                <h1 style={{ textAlign: 'center', fontSize: '4rem'  }}>{activityTitle}</h1>
+            </div>
+
+            <div style={{justifyContent: 'space-around', display: 'flex', width: '100%'}}>
+                {/* 图片 */}
+                <img 
+                    src={example_img}
+                    alt="活动海报" 
+                    style={{display: 'flex',width: '50%', height: 'auto' }} 
+                />
+                <div style={{display: 'flex',width: '50%', fontSize: '2rem', flexDirection: 'column'}}>
+                    {/* 活动信息模块 */}
+                    <p>活动时间：2024-04-015 12:00</p>
+                    <p>活动地点：示例地点</p>
+                    <p>活动主办方：示例主办方</p>
+                    <p>活动介绍</p>
+                    <div>
+                        {/* 用户自定义文本模块 */}
+                        {activityDescription}
+                    </div>
+                </div>
+
+            </div>
+
+            <div style={{ textAlign: 'center', marginTop: '20px', fontSize: '2rem'}}>
+                <div>
+                    <p>剩余座位数：50</p>
+                    <Button variant="contained" onClick={redirectToBookingPage}>预定</Button>
+                </div>
+
+                <div style={{ marginTop: '20px'}}>
+                    {/* 评论区 */}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default ActivityDetails;