Seat Reservation System using AngularJS

Its pretty often, we come across seat reservation systems when we are booking movie tickets or show tickets etc.  If you wonder how to create one for yourself, its pretty easy with AngularJS.

Demo URL : http://techiedreams.com/demos/seat-reservation-angularjs/

Download Sources: https://github.com/chanusukarno/Seat-Reservation-System-AngularJS/archive/master.zip

Git Hub: https://github.com/chanusukarno/Seat-Reservation-System-AngularJS

This Project is built over yeoman angular bean project. Setup the bean project and once you cleanup the default code. Here are the changes i have made:

View:

To create the grid with rows and columns, i used and Table and repeated the rows<tr> and table data(column data)<td> based on the input.

<div class="content">
    <h2 class="title">Seat Reservation System using AngularJS</h2>

    <p>Screen this way! :)</p>

    <table class="seatLayout">
        <tr>
            <td class="padding-bottom"></td>
            <td class="padding-bottom" ng-repeat="col in cols track by $index" ng-bind="col"></td>
        </tr>
        <tr ng-repeat="row in rows">
            <td class="padding-right" ng-bind="row"></td>
            <td class="seat" ng-repeat="col in cols" ng-click="seatClicked(row + col)" ng-switch on="getStatus(row + col)">
                <img ng-switch-when="selected" src="images/seat_selected.png">
                <img ng-switch-when="reserved" src="images/seat_reserved.png">
                <img ng-switch-default src="images/seat_available.png">
            </td>
        </tr>
    </table>

    <div class="legend">
        <img src="images/seat_available.png">  Available
        <img src="images/seat_reserved.png" class="padding-left">  Reserved
        <img src="images/seat_selected.png" class="padding-left">  Selected
    </div>

    <div class="buttons">
        <button ng-click="clearSelected()">Clear</button>
        <button ng-click="showSelected()">Show selected seats!</button>
    </div>
</div>

Controller:

Init the rows and columns defined in the View and also set the reserved(already booked) seats. Also defined click event listener for seat.

– Comments are provided where necessary

angular.module('seatReservationApp')
    .controller('MainCtrl', function ($scope) {

        // Init layout
        $scope.rows = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
        $scope.cols = [1, 2, 3, 4, 5, 6, 7, 8];

        // Set reserved and selected
        var reserved = ['A2', 'A3', 'C5', 'C6', 'C7', 'C8', 'J1', 'J2', 'J3', 'J4'];
        var selected = [];

        // seat onClick
        $scope.seatClicked = function(seatPos) {
            console.log("Selected Seat: " + seatPos);
            var index = selected.indexOf(seatPos);
            if(index != -1) {
                // seat already selected, remove
                selected.splice(index, 1)
            } else {
                // new seat, push
                selected.push(seatPos);
            }
        }

        // get seat status
        $scope.getStatus = function(seatPos) {
            if(reserved.indexOf(seatPos) > -1) {
                return 'reserved';
            } else if(selected.indexOf(seatPos) > -1) {
                return 'selected';
            }
        }

        // clear selected
        $scope.clearSelected = function() {
            selected = [];
        }

        // show selected
        $scope.showSelected = function() {
            if(selected.length > 0) {
                alert("Selected Seats: \n" + selected);
            } else {
                alert("No seats selected!");
            }
        }

    });

If you have any queries and suggestions please feel free to use the comment section.

Subscribe  &  Share   Thanks!

The post Seat Reservation System using AngularJS appeared first on TechieDreams.