I made a simple seat booking module ;)

[Roych]

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.

We have a small theater and sometimes we remove some seats, so I also added the option to remove them.

 

 

 

 

 

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 November 5 by Roych
Removed the sound from video!

[teppo]

On 11/4/2024 at 4:23 PM, Roych said:

be gentle as I'm not a coder.

I hate to break it to you, but... you are now 😉

Seriously though, thanks for sharing this module!