javascript - Seat booking logic for meteor react application

Javascript - Seat booking logic for meteor react application

Implementing seat booking logic in a Meteor React application involves handling state management, user interactions, and possibly integrating with a backend for data persistence. Here's a structured approach to implement seat booking functionality:

Example Scenario

Let's assume you have a cinema seat booking system where users can select seats from a grid and book them.

Step 1: Setup State

Use React's state to manage the seat booking data, such as which seats are available, selected, or booked.

import React, { useState } from 'react'; const SeatBookingApp = () => { const [seats, setSeats] = useState([ { id: 1, row: 'A', number: 1, status: 'available' }, { id: 2, row: 'A', number: 2, status: 'available' }, { id: 3, row: 'B', number: 1, status: 'available' }, { id: 4, row: 'B', number: 2, status: 'available' }, // Add more seats as needed ]); const [selectedSeats, setSelectedSeats] = useState([]); // Function to handle seat selection const handleSeatClick = (seat) => { if (seat.status === 'available') { const updatedSeats = seats.map(s => s.id === seat.id ? { ...s, status: 'selected' } : s); setSeats(updatedSeats); setSelectedSeats([...selectedSeats, seat]); } else if (seat.status === 'selected') { const updatedSeats = seats.map(s => s.id === seat.id ? { ...s, status: 'available' } : s); setSeats(updatedSeats); setSelectedSeats(selectedSeats.filter(s => s.id !== seat.id)); } }; // Function to handle booking const handleBookSeats = () => { // Logic to book selected seats (e.g., send to backend) console.log('Selected seats:', selectedSeats); // Example: send to backend for booking // axios.post('/api/bookSeats', { seats: selectedSeats }) // .then(response => { // console.log('Seats booked successfully:', response.data); // // Handle success // }) // .catch(error => { // console.error('Error booking seats:', error); // // Handle error // }); }; return ( <div> <h2>Select Seats</h2> <div className="seat-grid"> {seats.map(seat => ( <div key={seat.id} className={`seat ${seat.status}`} onClick={() => handleSeatClick(seat)} > {seat.row}-{seat.number} </div> ))} </div> <button onClick={handleBookSeats}>Book Selected Seats</button> </div> ); }; export default SeatBookingApp;

Step 2: Seat Component

Create a Seat component to render each seat and handle click events to select/deselect seats.

Step 3: Booking Logic

Implement booking logic where clicking on a seat toggles its status between 'available' and 'selected'. Use setSeats to update the state of seats and setSelectedSeats to update the state of selected seats.

Step 4: Integrate with Backend (Optional)

If your application needs to persist booking data, integrate with a backend API (e.g., using Meteor methods or REST API) to store and retrieve seat booking information.

Notes:

  • State Management: Use React hooks (useState) for managing component state.
  • UI Interaction: Use CSS classes (seat and seat.selected) to visually represent seat statuses (available, selected, booked).
  • Backend Integration: Implement backend API calls as per your application's backend architecture (Meteor methods, RESTful APIs, etc.).

By following this approach, you can implement a basic seat booking system in your Meteor React application, allowing users to select seats and book them with real-time updates on seat availability. Adjust the example code to fit your specific requirements and UI design.

Examples

  1. How to implement seat selection logic in a Meteor React app? Description: Implementing seat booking functionality where users can select and reserve seats in a cinema or event scenario.

    // Example React component for seat selection import React, { useState } from 'react'; const SeatBooking = () => { const [selectedSeats, setSelectedSeats] = useState([]); const handleSeatClick = (seatId) => { if (selectedSeats.includes(seatId)) { setSelectedSeats(selectedSeats.filter(id => id !== seatId)); } else { setSelectedSeats([...selectedSeats, seatId]); } }; return ( <div className="seat-booking"> <h2>Seat Selection</h2> <div className="seats"> {seats.map(seat => ( <div key={seat.id} className={`seat ${selectedSeats.includes(seat.id) ? 'selected' : ''}`} onClick={() => handleSeatClick(seat.id)} > {seat.id} </div> ))} </div> <button onClick={handleBooking}>Book Selected Seats</button> </div> ); }; export default SeatBooking;

  2. Meteor React seat booking component example Description: Example implementation of a seat booking component in a Meteor React application.

    // SeatBooking component using Meteor and React import { withTracker } from 'meteor/react-meteor-data'; import { Seats } from '/imports/api/seats'; const SeatBooking = ({ seats }) => { const [selectedSeats, setSelectedSeats] = useState([]); const handleSeatClick = (seatId) => { if (selectedSeats.includes(seatId)) { setSelectedSeats(selectedSeats.filter(id => id !== seatId)); } else { setSelectedSeats([...selectedSeats, seatId]); } }; const handleBooking = () => { // Handle booking logic here console.log('Selected seats:', selectedSeats); }; return ( <div className="seat-booking"> <h2>Seat Selection</h2> <div className="seats"> {seats.map(seat => ( <div key={seat._id} className={`seat ${selectedSeats.includes(seat._id) ? 'selected' : ''}`} onClick={() => handleSeatClick(seat._id)} > {seat.label} </div> ))} </div> <button onClick={handleBooking}>Book Selected Seats</button> </div> ); }; export default withTracker(() => { Meteor.subscribe('seats'); return { seats: Seats.find().fetch(), }; })(SeatBooking);

  3. Meteor React seat booking logic with real-time updates Description: Integrating Meteor's real-time capabilities for seat booking updates in a React component.

    // SeatBooking component with real-time updates using Meteor and React import { withTracker } from 'meteor/react-meteor-data'; import { Seats } from '/imports/api/seats'; const SeatBooking = ({ seats }) => { const [selectedSeats, setSelectedSeats] = useState([]); const handleSeatClick = (seatId) => { if (selectedSeats.includes(seatId)) { setSelectedSeats(selectedSeats.filter(id => id !== seatId)); } else { setSelectedSeats([...selectedSeats, seatId]); } }; const handleBooking = () => { // Handle booking logic here console.log('Selected seats:', selectedSeats); }; return ( <div className="seat-booking"> <h2>Seat Selection</h2> <div className="seats"> {seats.map(seat => ( <div key={seat._id} className={`seat ${selectedSeats.includes(seat._id) ? 'selected' : ''}`} onClick={() => handleSeatClick(seat._id)} > {seat.label} </div> ))} </div> <button onClick={handleBooking}>Book Selected Seats</button> </div> ); }; export default withTracker(() => { Meteor.subscribe('seats'); return { seats: Seats.find().fetch(), }; })(SeatBooking);

  4. How to handle seat booking conflicts in Meteor React? Description: Managing conflicts when multiple users attempt to book the same seat simultaneously.

    // Example handleBooking function to check for conflicts const handleBooking = () => { // Check if any selected seat is already booked const conflicts = selectedSeats.filter(id => seats.find(seat => seat._id === id && seat.booked)); if (conflicts.length > 0) { alert('One or more selected seats are already booked. Please select other seats.'); return; } // Handle booking logic here console.log('Selected seats:', selectedSeats); };

  5. Meteor React seat booking UI with seat availability status Description: Displaying seat availability status (booked or available) in the seat booking UI.

    // Example seat rendering with availability status <div key={seat._id} className={`seat ${selectedSeats.includes(seat._id) ? 'selected' : ''} ${seat.booked ? 'booked' : ''}`} onClick={() => handleSeatClick(seat._id)} > {seat.label} </div>

  6. Meteor React seat booking integration with backend API Description: Integrating the seat booking component with a backend API for data synchronization and booking confirmation.

    // Example integration with backend API for booking confirmation const handleBooking = () => { // Send selected seats to backend API for booking confirmation Meteor.call('bookSeats', selectedSeats, (error, result) => { if (error) { console.error('Error booking seats:', error); return; } console.log('Seats booked successfully:', result); }); };

  7. Meteor React seat booking with user authentication Description: Adding user authentication to the seat booking component to track bookings per user.

    // Example integration with user authentication for booking tracking const handleBooking = () => { const userId = Meteor.userId(); if (!userId) { alert('Please login to book seats.'); return; } // Handle booking logic here console.log('Selected seats:', selectedSeats); };

  8. How to dynamically update seat availability status in Meteor React? Description: Dynamically updating seat availability status in real-time based on bookings and user selections.

    // Example subscription to real-time updates for seat availability export default withTracker(() => { Meteor.subscribe('seats'); return { seats: Seats.find().fetch(), }; })(SeatBooking);

  9. Meteor React seat booking with price calculation Description: Adding price calculation based on seat selection to the seat booking component.

    // Example price calculation based on selected seats const calculateTotalPrice = () => { const pricePerSeat = 10; // Example price per seat return selectedSeats.length * pricePerSeat; }; // Usage <div>Total Price: ${calculateTotalPrice()}</div>

  10. How to implement seat booking cancellation in Meteor React? Description: Implementing seat booking cancellation functionality with revert option.

    // Example seat cancellation function const cancelBooking = () => { setSelectedSeats([]); }; // Usage <button onClick={cancelBooking}>Cancel Selection</button>

More Tags

ecmascript-2016 jsch subclass replication export-to-pdf watson-assistant lasagne sessionstorage transpiler waveform

More Programming Questions

More Electronics Circuits Calculators

More Chemical thermodynamics Calculators

More Transportation Calculators

More Physical chemistry Calculators