Merge branch 'main' into mainpage

client/package.json

@@ -47,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/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;

client/src/index.js

@@ -1,20 +1,23 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-import Login from './Login';
-import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
-import Mainpage from './mainpage/Mainpage';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import Login from "./Login";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import ActivityDetails from "./Detial_page";
+import BookingPage from "./Booking_page";
+
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <Router>
       <Routes>
-        <Route path='/' element={<App />} />
-        <Route path='/login' element={<Login />} />
-        <Route path='/mainpage' element={<Mainpage />} />
+        <Route path="/" element={<App />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/details" element={<ActivityDetails />} />
+        <Route path="/booking" element={<BookingPage />} />
       </Routes>
     </Router>
   </React.StrictMode>,

client/src/sample-text.txt

@@ -0,0 +1,11 @@
+示例活动介绍:
+好，敢惹我 那你算是踢到棉花了
+你惹了我有什么用
+你惹我的后果就是惹了我一下
+因我毫无还手之力 
+惹我算是捏到软柿子了我告诉你
+我会用实际行动告诉你 惹到我的下场就是什么都不会发生
+我和别人不一样 你惹了我就相当于没惹
+你算是遇到好欺负的人了
+惹我的人你就偷着乐吧
+你惹到了方圆百里最好惹的人