Jump to content

I made a simple seat booking module ;)


Roych
 Share

Recommended Posts

Hello,

I have created a simple module to preview theater seat reservations. This is my very first module, so be gentle as I'm not a coder.

What is it about?

The module creates 5 fields that must be added to the template of your choice. (e.g. event-post)

In the template, you can then set the number of rows and the number of seats in each row. After save your preview is created.
 

You can then book or cancel seats by clicking on the seats boxes or trash icon to cancel them.

(Sometimes we remove some seats, so I also added the option to remove them.)


SeatChart.thumb.jpg.04eae07ad89e6c45a49d163d474efc0f.jpg

(Sorry for the video sound ...)

You can the render this on your frontend with:
 

<?php
// Assuming $page is the current page object
$rows = $page->rows ?: 9; // Default to 9 rows if not set
$seatsPerRow = $page->seats_per_row ?: 8; // Default to 8 seats per row if not set

// Load the existing CSS for styling
$cssFile = $this->wire()->config->urls->siteModules . 'TheaterSeating/styles.css';
echo '<link rel="stylesheet" href="' . $cssFile . '">';

// Start the seating chart output
echo '<div class="theater-seating">';

// Loop through rows
for ($i = $rows; $i > 0; $i--) {
    echo '<div class="row">'; // Start a new row
    echo '<div class="row-label">Vrsta ' . $i . '</div>'; // Row label

    // Loop through seats
    for ($j = 1; $j <= $seatsPerRow; $j++) {
        $seatId = "$i-$j";
        $occupiedClass = in_array($seatId, explode(',', $page->booked_seats ?: '')) ? 'selected' : '';
        $disabledClass = in_array($seatId, explode(',', $page->disabled_seats ?: '')) ? 'disabled' : '';

        // Output the seat div
        echo '<div class="seat ' . $occupiedClass . ' ' . $disabledClass . '" data-seat-id="' . $seatId . '">';
        
        // Add the cross overlay for disabled seats
        if ($disabledClass) {
            echo '<div class="cross">✖</div>'; // X overlay
        }

        echo '</div>'; // Close seat div
    }

    echo '</div>'; // Close row div
}

echo '<div class="stage">Oder</div>';
echo '</div>'; // Close theater seating div
?>

and maybe style with:

.seat {
    width: 50px;
    height: 50px;
    margin: 0 5px; /* Horizontal margin between seats */
    background-color: #ccc;
    cursor: default; /* Change cursor to indicate no interaction */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.seat.occupied {
    background-color: #f00; /* Red for occupied seats */
}

.seat.selected {
    background-color: #0f0; /* Green for selected (booked) seats */
}

.seat.disabled {
    background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red for disabled seats */
}

.cross {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 0, 0, 0.5); /* Semi-transparent overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
}

.row-label {
    font-size: 16px;
    margin-right: 10px; /* Space between the label and seats */
    font-weight: 600;
    width: 100px; /* Set a fixed width to align labels */
}


I hope someone will find it usefull. Fell free to make it better. 😉


you can download it here:
TheaterSeating.zip


Cheers 😉
Roych

 

Edited by Roych
  • Like 7
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...