From 580750e631e4670c4a6b571e19b4c7ef6ab91dd7 Mon Sep 17 00:00:00 2001 From: gjzuloaga Date: Sat, 24 Feb 2024 23:13:49 -0500 Subject: [PATCH 1/3] A6 implement --- src/components/Footer/index.tsx | 18 +++- src/pages/SelectMovie/index.tsx | 123 ++++++++++++++++++++++++++ src/pages/SelectSeat/index.tsx | 109 +++++++++++++++++++++++ src/pages/SelectSeat/style.module.css | 18 ++++ src/routes.tsx | 15 ++++ 5 files changed, 280 insertions(+), 3 deletions(-) create mode 100644 src/pages/SelectMovie/index.tsx create mode 100644 src/pages/SelectSeat/index.tsx create mode 100644 src/pages/SelectSeat/style.module.css diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index e6a5285..fe1a782 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -1,11 +1,23 @@ +import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { useAuth } from 'hooks/useAuth' +import useTheme from 'hooks/useTheme' +import { NavDropdown } from 'react-bootstrap' +import Button from 'react-bootstrap/Button' import Container from 'react-bootstrap/Container' +import Nav from 'react-bootstrap/Nav' +import Navbar from 'react-bootstrap/Navbar' +import { Link, useLocation } from 'react-router-dom' const Index: React.FC = () => ( ) diff --git a/src/pages/SelectMovie/index.tsx b/src/pages/SelectMovie/index.tsx new file mode 100644 index 0000000..2ac87f0 --- /dev/null +++ b/src/pages/SelectMovie/index.tsx @@ -0,0 +1,123 @@ +import { useRequest } from 'ahooks' +import PageContainer from 'components/PageContainer' +import { useState } from 'react'; +import Card from 'react-bootstrap/Card'; +import Button from 'react-bootstrap/Button'; +import { useNavigate } from 'react-router-dom' +import Backend from 'utils/service' + +const Index: React.FC = () => { + const navigate = useNavigate() + const [movieTitle, setMovieTitle] = useState('my movie') + const [hoveredMovie, setHoveredMovie] = useState(null); + + const handleMouseEnter = (title: string) => { + setHoveredMovie(title); + }; + + const handleMouseLeave = () => { + setHoveredMovie(null); + }; + + + const { run: create } = useRequest( + async () => + // TODO: replace the movie with user input + Backend.movie.v1MoviesCreate({ + title: movieTitle, + cast: 'cast', + category: 'category', + director: 'director', + producer: 'producer', + rating_code: 'rating_code', + reviews: 'reviews', + show_time: '2016-01-02T15:04:05Z', + synopsis: 'synopsis', + trailer_picture: 'https://placehold.co/400x592', + trailer_video: + 'https://www.youtube.com/embed/NpEaa2P7qZI?si=Ev2ybUCHzVxQPIO1&controls=0' + }), + { + manual: true, + onSuccess: () => { + navigate('/') + } + } + ) + const movies = [ + { + title: 'Argylle', + director: 'Matthew Vaughn', + length: '2h 30m', + image: 'https://connect.gtcmovies.com/CDN/Image/Entity/FilmPosterGraphic/HO00003984', // Replace with actual image URL + showTimes: ['10:00 AM', '2:00 PM', '6:00 PM', '9:30 PM'], + }, + { + title: 'Bob Marley One Love', + director: 'Reinaldus Marcus ', + length: '2h', + image: 'https://connect.gtcmovies.com/CDN/Image/Entity/FilmPosterGraphic/HO00004017', // Replace with actual image URL + showTimes: ['11:00 AM', '3:45 PM', '8:00 PM'], + }, + { + title: 'Madame Web', + director: 'S.J. Clarkson', + length: '1h 45m', + image: 'https://connect.gtcmovies.com/CDN/Image/Entity/FilmPosterGraphic/HO00004029', // Replace with actual image URL + showTimes: ['5:45 PM', '8:00 PM'], + }, + { + title: 'Wonka', + director: 'Paul King', + length: '2h 15m', + image: 'https://connect.gtcmovies.com/CDN/Image/Entity/FilmPosterGraphic/HO00003932', // Replace with actual image URL + showTimes: ['1:30 PM', '6:45 PM', '7:45 PM' ], + }, + ]; + + return ( + +
+

Showing

+
+ +
+ {movies.map((movie, index) => ( + handleMouseEnter(movie.title)} + onMouseLeave={handleMouseLeave} + > + + + {movie.title} + + Director: {movie.director} +
+ Length: {movie.length} + + {hoveredMovie === movie.title && ( +
+ {movie.showTimes.map((time, timeIndex) => ( + + ))} +
+ )} + + + ))} +
+ + ); +}; +export default Index diff --git a/src/pages/SelectSeat/index.tsx b/src/pages/SelectSeat/index.tsx new file mode 100644 index 0000000..50f7f9a --- /dev/null +++ b/src/pages/SelectSeat/index.tsx @@ -0,0 +1,109 @@ +import { useRequest } from 'ahooks'; +import PageContainer from 'components/PageContainer'; +import { useState } from 'react'; +import Button from 'react-bootstrap/Button'; +import Form from 'react-bootstrap/Form'; +import { useNavigate } from 'react-router-dom'; +import Backend from 'utils/service'; +import styles from './style.module.css'; + +interface Seat { + id: string; + row: number; + number: number; + ticketType: TicketType | null; +} + +enum TicketType { + Student = 'Student', + Children = 'Children', + Veteran = 'Veteran', + Adult = 'Adult', + Senior = 'Senior', +} + +const Index: React.FC = () => { + const [selectedSeats, setSelectedSeats] = useState([]); + const [selectedTicketType, setSelectedTicketType] = useState(null); + + const totalSelectedSeats = selectedSeats.length; + + const handleSeatClick = (seat: Seat) => { + const seatIndex = selectedSeats.findIndex((selectedSeat) => selectedSeat.id === seat.id); + + if (seatIndex === -1) { + setSelectedSeats([...selectedSeats, { ...seat, ticketType: selectedTicketType }]); + } else { + const updatedSeats = [...selectedSeats]; + updatedSeats.splice(seatIndex, 1); + setSelectedSeats(updatedSeats); + } + }; + + const handleTicketTypeChange = (event: React.ChangeEvent) => { + setSelectedTicketType(event.target.value as TicketType); + }; + + const renderSeats = () => { + const rows = 5; + const seatsPerRow = 8; + const seats: Seat[] = []; + + for (let row = 1; row <= rows; row++) { + for (let number = 1; number <= seatsPerRow; number++) { + const id = `${row}-${number}`; + seats.push({ id, row, number, ticketType: null }); + } + } + + return seats.map((seat) => ( + + )); + }; + + return ( + +
+

Select Seat

+
+
+ {renderSeats()} +
+
+ + Select Ticket Type: + + + {Object.values(TicketType).map((type) => ( + + ))} + + +
+
+

+ You have selected {totalSelectedSeats} seat(s). +

+ {selectedSeats.map((seat, index) => ( +
+ {seat.ticketType && ( +

+ {seat.ticketType} + {index < selectedSeats.length - 1 && ', '} +

+ )} +
+))} + +
+ + ); +}; + +export default Index; diff --git a/src/pages/SelectSeat/style.module.css b/src/pages/SelectSeat/style.module.css new file mode 100644 index 0000000..5fa217e --- /dev/null +++ b/src/pages/SelectSeat/style.module.css @@ -0,0 +1,18 @@ +.seat-container { + display: flex; + flex-wrap: wrap; + justify-content: center + + } + + .seat { + margin-right: 20px; /* Adjust the margin as needed */ + margin-bottom: 10px; /* Adjust the margin as needed */ + } + + .selected { + background-color: #3498db; /* Example color for selected seats */ + color: #fff; /* Example text color for selected seats */ + } + + \ No newline at end of file diff --git a/src/routes.tsx b/src/routes.tsx index ae5d95d..c6df896 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -6,6 +6,9 @@ import MovieCreate from 'pages/MovieCreate' import NotFound from 'pages/NotFound' import Register from 'pages/Register' import RegisterConfirm from 'pages/RegisterConfirm' +import SelectMovie from 'pages/SelectMovie' +import SelectSeat from 'pages/SelectSeat' +import SelectTime from 'pages/SelectTime' import type { RouteObject } from 'react-router-dom' const children: RouteObject[] = [ @@ -38,6 +41,18 @@ const children: RouteObject[] = [ } ] }, + { + path: '/SelectMovie', + element: + }, + { + path: '/SelectTime', + element: + }, + { + path: '/SelectSeat', + element: + }, { path: '*', element: From 294865bbf04ced0471f67837ec6f172430d0de50 Mon Sep 17 00:00:00 2001 From: gjzuloaga Date: Wed, 28 Feb 2024 00:08:35 -0500 Subject: [PATCH 2/3] A6 fixes --- src/components/Footer/index.tsx | 9 +-------- src/pages/{SelectSeat => MovieSeatSelect}/index.tsx | 5 +---- .../{SelectSeat => MovieSeatSelect}/style.module.css | 0 src/pages/MovieSeatSelect/workspace.code-workspace | 4 ++++ src/pages/{SelectMovie => MovieSelect}/index.tsx | 0 src/routes.tsx | 10 +++------- 6 files changed, 9 insertions(+), 19 deletions(-) rename src/pages/{SelectSeat => MovieSeatSelect}/index.tsx (94%) rename src/pages/{SelectSeat => MovieSeatSelect}/style.module.css (100%) create mode 100644 src/pages/MovieSeatSelect/workspace.code-workspace rename src/pages/{SelectMovie => MovieSelect}/index.tsx (100%) diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index fe1a782..21aee89 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -1,12 +1,5 @@ -import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons' -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { useAuth } from 'hooks/useAuth' -import useTheme from 'hooks/useTheme' -import { NavDropdown } from 'react-bootstrap' -import Button from 'react-bootstrap/Button' + import Container from 'react-bootstrap/Container' -import Nav from 'react-bootstrap/Nav' -import Navbar from 'react-bootstrap/Navbar' import { Link, useLocation } from 'react-router-dom' const Index: React.FC = () => ( diff --git a/src/pages/SelectSeat/index.tsx b/src/pages/MovieSeatSelect/index.tsx similarity index 94% rename from src/pages/SelectSeat/index.tsx rename to src/pages/MovieSeatSelect/index.tsx index 50f7f9a..1c7aeb8 100644 --- a/src/pages/SelectSeat/index.tsx +++ b/src/pages/MovieSeatSelect/index.tsx @@ -1,10 +1,7 @@ -import { useRequest } from 'ahooks'; + import PageContainer from 'components/PageContainer'; import { useState } from 'react'; -import Button from 'react-bootstrap/Button'; import Form from 'react-bootstrap/Form'; -import { useNavigate } from 'react-router-dom'; -import Backend from 'utils/service'; import styles from './style.module.css'; interface Seat { diff --git a/src/pages/SelectSeat/style.module.css b/src/pages/MovieSeatSelect/style.module.css similarity index 100% rename from src/pages/SelectSeat/style.module.css rename to src/pages/MovieSeatSelect/style.module.css diff --git a/src/pages/MovieSeatSelect/workspace.code-workspace b/src/pages/MovieSeatSelect/workspace.code-workspace new file mode 100644 index 0000000..3e70edd --- /dev/null +++ b/src/pages/MovieSeatSelect/workspace.code-workspace @@ -0,0 +1,4 @@ +{ + "folders": [], + "settings": {} +} \ No newline at end of file diff --git a/src/pages/SelectMovie/index.tsx b/src/pages/MovieSelect/index.tsx similarity index 100% rename from src/pages/SelectMovie/index.tsx rename to src/pages/MovieSelect/index.tsx diff --git a/src/routes.tsx b/src/routes.tsx index c6df896..6528a5f 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -6,9 +6,8 @@ import MovieCreate from 'pages/MovieCreate' import NotFound from 'pages/NotFound' import Register from 'pages/Register' import RegisterConfirm from 'pages/RegisterConfirm' -import SelectMovie from 'pages/SelectMovie' -import SelectSeat from 'pages/SelectSeat' -import SelectTime from 'pages/SelectTime' +import SelectMovie from 'pages/MovieSelect' +import SelectSeat from 'pages/MovieSeatSelect' import type { RouteObject } from 'react-router-dom' const children: RouteObject[] = [ @@ -45,10 +44,7 @@ const children: RouteObject[] = [ path: '/SelectMovie', element: }, - { - path: '/SelectTime', - element: - }, + { path: '/SelectSeat', element: From 3821b1134469aa5af2764ec1d2fdc35ce589e6fb Mon Sep 17 00:00:00 2001 From: Boming Zhang Date: Wed, 28 Feb 2024 02:07:01 -0500 Subject: [PATCH 3/3] fix: router url --- src/components/Footer/index.tsx | 11 +- .../MovieSeatSelect/workspace.code-workspace | 4 - src/pages/MovieSelect/index.tsx | 119 +++++++----------- src/routes.tsx | 12 +- 4 files changed, 57 insertions(+), 89 deletions(-) delete mode 100644 src/pages/MovieSeatSelect/workspace.code-workspace diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 21aee89..e6a5285 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -1,16 +1,11 @@ - import Container from 'react-bootstrap/Container' -import { Link, useLocation } from 'react-router-dom' const Index: React.FC = () => (
- -
- - Go to Select Movies - -
+ + Place sticky footer content here. +
) diff --git a/src/pages/MovieSeatSelect/workspace.code-workspace b/src/pages/MovieSeatSelect/workspace.code-workspace deleted file mode 100644 index 3e70edd..0000000 --- a/src/pages/MovieSeatSelect/workspace.code-workspace +++ /dev/null @@ -1,4 +0,0 @@ -{ - "folders": [], - "settings": {} -} \ No newline at end of file diff --git a/src/pages/MovieSelect/index.tsx b/src/pages/MovieSelect/index.tsx index 2ac87f0..0a05f8b 100644 --- a/src/pages/MovieSelect/index.tsx +++ b/src/pages/MovieSelect/index.tsx @@ -1,80 +1,54 @@ -import { useRequest } from 'ahooks' import PageContainer from 'components/PageContainer' -import { useState } from 'react'; -import Card from 'react-bootstrap/Card'; -import Button from 'react-bootstrap/Button'; -import { useNavigate } from 'react-router-dom' -import Backend from 'utils/service' +import { useState } from 'react' +import Button from 'react-bootstrap/Button' +import Card from 'react-bootstrap/Card' +import { useNavigate, useParams } from 'react-router-dom' const Index: React.FC = () => { const navigate = useNavigate() - const [movieTitle, setMovieTitle] = useState('my movie') - const [hoveredMovie, setHoveredMovie] = useState(null); + const { movieId } = useParams() + const [hoveredMovie, setHoveredMovie] = useState(null) const handleMouseEnter = (title: string) => { - setHoveredMovie(title); - }; + setHoveredMovie(title) + } const handleMouseLeave = () => { - setHoveredMovie(null); - }; + setHoveredMovie(null) + } - - const { run: create } = useRequest( - async () => - // TODO: replace the movie with user input - Backend.movie.v1MoviesCreate({ - title: movieTitle, - cast: 'cast', - category: 'category', - director: 'director', - producer: 'producer', - rating_code: 'rating_code', - reviews: 'reviews', - show_time: '2016-01-02T15:04:05Z', - synopsis: 'synopsis', - trailer_picture: 'https://placehold.co/400x592', - trailer_video: - 'https://www.youtube.com/embed/NpEaa2P7qZI?si=Ev2ybUCHzVxQPIO1&controls=0' - }), - { - manual: true, - onSuccess: () => { - navigate('/') - } - } - ) const movies = [ { title: 'Argylle', director: 'Matthew Vaughn', length: '2h 30m', - image: 'https://connect.gtcmovies.com/CDN/Image/Entity/FilmPosterGraphic/HO00003984', // Replace with actual image URL - showTimes: ['10:00 AM', '2:00 PM', '6:00 PM', '9:30 PM'], - }, - { - title: 'Bob Marley One Love', - director: 'Reinaldus Marcus ', - length: '2h', - image: 'https://connect.gtcmovies.com/CDN/Image/Entity/FilmPosterGraphic/HO00004017', // Replace with actual image URL - showTimes: ['11:00 AM', '3:45 PM', '8:00 PM'], - }, - { - title: 'Madame Web', - director: 'S.J. Clarkson', - length: '1h 45m', - image: 'https://connect.gtcmovies.com/CDN/Image/Entity/FilmPosterGraphic/HO00004029', // Replace with actual image URL - showTimes: ['5:45 PM', '8:00 PM'], - }, - { - title: 'Wonka', - director: 'Paul King', - length: '2h 15m', - image: 'https://connect.gtcmovies.com/CDN/Image/Entity/FilmPosterGraphic/HO00003932', // Replace with actual image URL - showTimes: ['1:30 PM', '6:45 PM', '7:45 PM' ], - }, - ]; - + image: + 'https://connect.gtcmovies.com/CDN/Image/Entity/FilmPosterGraphic/HO00003984', // Replace with actual image URL + showTimes: ['10:00 AM', '2:00 PM', '6:00 PM', '9:30 PM'] + } + // { + // title: 'Bob Marley One Love', + // director: 'Reinaldus Marcus ', + // length: '2h', + // image: 'https://connect.gtcmovies.com/CDN/Image/Entity/FilmPosterGraphic/HO00004017', // Replace with actual image URL + // showTimes: ['11:00 AM', '3:45 PM', '8:00 PM'], + // }, + // { + // title: 'Madame Web', + // director: 'S.J. Clarkson', + // length: '1h 45m', + // image: 'https://connect.gtcmovies.com/CDN/Image/Entity/FilmPosterGraphic/HO00004029', // Replace with actual image URL + // showTimes: ['5:45 PM', '8:00 PM'], + // }, + // { + // title: 'Wonka', + // director: 'Paul King', + // length: '2h 15m', + // image: 'https://connect.gtcmovies.com/CDN/Image/Entity/FilmPosterGraphic/HO00003932', // Replace with actual image URL + // showTimes: ['1:30 PM', '6:45 PM', '7:45 PM' ], + // }, + ] + return (
@@ -89,7 +63,11 @@ const Index: React.FC = () => { onMouseEnter={() => handleMouseEnter(movie.title)} onMouseLeave={handleMouseLeave} > - + {movie.title} @@ -104,11 +82,10 @@ const Index: React.FC = () => { key={timeIndex} variant='primary' className='mt-auto' - style={{ marginRight: '8px', marginBottom: '8px' }} - - onClick={() => navigate('/selectSeat')} - > - {time} + style={{ marginRight: '8px', marginBottom: '8px' }} + onClick={() => navigate(`/movie/${movieId}/seat`)} + > + {time} ))}
@@ -118,6 +95,6 @@ const Index: React.FC = () => { ))} - ); -}; + ) +} export default Index diff --git a/src/routes.tsx b/src/routes.tsx index 6528a5f..b976764 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -3,11 +3,11 @@ import Login from 'pages/Login' import Logout from 'pages/Logout' import Main from 'pages/Main' import MovieCreate from 'pages/MovieCreate' +import MovieSeatSelect from 'pages/MovieSeatSelect' +import MovieSelect from 'pages/MovieSelect' import NotFound from 'pages/NotFound' import Register from 'pages/Register' import RegisterConfirm from 'pages/RegisterConfirm' -import SelectMovie from 'pages/MovieSelect' -import SelectSeat from 'pages/MovieSeatSelect' import type { RouteObject } from 'react-router-dom' const children: RouteObject[] = [ @@ -41,13 +41,13 @@ const children: RouteObject[] = [ ] }, { - path: '/SelectMovie', - element: + path: '/movie/:movieId/book', + element: }, { - path: '/SelectSeat', - element: + path: '/movie/:movieId/seat', + element: }, { path: '*',