module 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, 2024 by Roych
Removed the sound from video!

[teppo]

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

be gentle as I'm not a coder.

Expand  

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

Seriously though, thanks for sharing this module!

[Roych]

I've just made some update on the module.
I added some usefull settings to the module, so you can now select row and seat order (left or right or Up or Down)
I also added the seat design option. To view seats as square or as simple actual css seat. And you can now change the Labels for Row and Stage

For displying seats on frontend, use:

    <?php 
    $seatingModule = wire('modules')->get('TheaterSeating');
    echo $seatingModule->renderFrontendSeatingChart($page);
    ?>

If you don't see the css seat icon on frontend add this JS to your template.
 

<script>
document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll(".seat").forEach(seat => {
        if (!seat.querySelector('.left-armrest')) {
            const leftArmrest = document.createElement('div');
            leftArmrest.classList.add('left-armrest');
            seat.appendChild(leftArmrest);
        }

        if (!seat.querySelector('.right-armrest')) {
            const rightArmrest = document.createElement('div');
            rightArmrest.classList.add('right-armrest');
            seat.appendChild(rightArmrest);
        }
    });
});
</script>

Hope you like it 😉
R

Download here:
TheaterSeating.zip

 

 

Edited Wednesday at 09:03 AM by Roych
Fixing some mistakes ;)

[ottogal]

Hi Roych,
a nice module, well done! Just one suggestion:
In your display the seats are looking downwards (the stage is at the bottom).
Wouldn't it be more intuitive to make it all upside down?
(That's usually the case in seating displays of airline services during the reservation process.)
The advantage is a more natural orientation when booking : The seat to the left of yours also appears to the left in the display.
Best wishes
ottogal