2

For a school project I need to make a booking system for a cinema, so people can select seats where they want to sit.

One requirement is that if someone booked a chair, someone ele shouldn't be able to book it anymore.

My idea was to add a class to the selected chairs when you click "Buy tickets" on the bottom of the page, but how can I save these classes, my professors say I should use HTML 5 storage, but they refuse to help me any further.

This is a part of what I already have now:

<script>
 var total = 0;
 var countBlauw = 0;
 var countOranje = 0;
 var countRood = 0;
 $(document).ready(function(){
     $(".blauw").toggle(function () {
       $(this).removeClass("blauw").addClass("select");
 countBlauw++;
 total+=7.5;
 calculateTotal();
 }, function() { 
       $(this).removeClass("select").addClass("blauw");
 countBlauw--;
       total-=7.5;
 calculateTotal();
     });
 $(".oranje").toggle(function () {
       $(this).removeClass("oranje").addClass("select");
 countOranje++;
 total+=10;
 calculateTotal();
 }, function() {
       $(this).removeClass("select").addClass("oranje");
 countOranje--;
       total-=10;
 calculateTotal();
     });
 $(".rood").toggle(function () {
       $(this).removeClass("rood").addClass("select");
 countRood++;
       total+=15;
 calculateTotal();
 }, function() {
       $(this).removeClass("select").addClass("rood");
 countRood--;
       total-=15;
 calculateTotal();
     });
 });
 </script> 
        <script>
        function calculateTotal()
        {
            var divobj = document.getElementById('totalPrice');
            divobj.style.display='block';
            divobj.innerHTML = "Prijs €"+total+"<br /> Aantal blauwe stoelen: "+countBlauw+"<br /> Aantal oranje stoelen: "+countOranje+"<br /> Aantal rode stoelen: "+countRood;

        }
        </script> 

        <table style="empty-cells: hide; border-collapse:separate; border-spacing:2px; border-style:solid;" border="0">
          <tr>
            <td class="leeg"></td>
            <td class="leeg"></td>
            <td class="blauw">&nbsp;</td>
            <td class="blauw">&nbsp;</td>
            <td class="blauw">&nbsp;</td>
            <td class="blauw">&nbsp;</td>
            <td class="blauw">&nbsp;</td>
            <td class="blauw">&nbsp;</td>
            <td class="blauw">&nbsp;</td>
            <td class="blauw">&nbsp;</td>
            <td class="leeg"></td>
            <td class="leeg"></td>
          </tr>
            And so forth.


        <script>
 $(window).load( function() {
  document.getElementById('totalPrice').innerHTML = "Prijs €"+total+"<br /> Aantal blauwe stoelen: "+countBlauw+"<br /> Aantal oranje stoelen: "+countOranje+"<br /> Aantal rode stoelen: "+countRood;
 });
 </script>
        <div id="totalPrice"></div>

Is it possible to save the classes added with .addClass() to local or session storage? It's should only be a simulation, so it doesn't matter if someone on another computer (or with an other browser) can book the same seat.

Could someone please give me some advice? :)

5
  • You're not meant to save the state of the DOM elements in storage, you're meant to save which seats are taken in storage. Give your seats ids, and store an object that tells you which seats are taken. (Like an array of taken seat IDs.)
    – millimoose
    Oct 31, 2012 at 19:33
  • @millimoose That sounds pretty logical actually. I'm going to try this :)
    – Timon
    Oct 31, 2012 at 19:36
  • isn't this just a matter of checking to see if the selected class exist on the seat you are trying to book, if it has the class then don't book, if not then book
    – Huangism
    Oct 31, 2012 at 20:38
  • @millimoose Could you please give me a tip on how to do that actually? I created an array, and I gave some seats an id, but how should I store something in an array when clicking on a table cell? :)
    – Timon
    Oct 31, 2012 at 20:41
  • @Timons106 Let me come up with some code for this
    – millimoose
    Oct 31, 2012 at 20:47

1 Answer 1

1

localStorage can only store string values, so it helps to save the array using JSON:

function loadTakenSeats() {
    takenSeatsString = localStorage.takenSeats;
    return takenSeatsString
        ? JSON.parse(takenSeatsString)
        : [];
}

function saveTakenSeats(takenSeats) {
    localStorage.takenSeats = JSON.stringify(takenSeats);
}

When a seat is taken or released, you add or remove its id from the saved array:

function takeSeat(seat) {
    $(seat).addClass('taken');
    var takenSeats = loadTakenSeats();
    takenSeats.push(seat.id);
    saveTakenSeats(takenSeats);
}

function untakeSeat(seat) {
    $(seat).removeClass('taken');
    var takenSeats = loadTakenSeats();
    takenSeats.splice(takenSeats.indexOf(seat.id),1);
    saveTakenSeats(takenSeats);
}

When the page loads, you'll have restore the state of the buttons from storage:

  $.each(loadTakenSeats(), function(i, seat){
        $('#'+seat).addClass('taken');
  });

Note that this code isn't particularly robust, a better implementation would make sure to avoid duplicate values in the stored array, separate changing the button style from adding its id to storage, etc.

I've uploaded a complete example to try out.

1
  • You are great... I don't know how to thank you, this is just great :).
    – Timon
    Oct 31, 2012 at 22:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.