Reservation v0.1

Table reservation module for Restasystem

by Petr Haluza

HTML

<section id="room-1">

<figure class="table" id="table-1">
  <div class="table for-6">
    <div class="chair"> <a class="chairPick" href="#"></a> </div>
    <div class="chair"> <a class="chairPick" href="#"></a> </div>
    <div class="chair"> <a class="chairPick" href="#"></a> </div>
    <div class="chair"> <a class="chairPick" href="#"></a> </div>
    <div class="chair"> <a class="chairPick" href="#"></a> </div>
    <div class="chair"> <a class="chairPick" href="#"></a> </div>
    <a class="tablePick" href="#">6</a>       
  </div>
</figure>

<figure class="table" id="table-2">
  <div class="table for-4">
    <div class="chair"> <a class="chairPick" href="#"></a> </div>
    <div class="chair"> <a class="chairPick" href="#"></a> </div>
    <div class="chair"> <a class="chairPick" href="#"></a> </div>
    <div class="chair"> <a class="chairPick" href="#"></a> </div>
    <a class="tablePick" href="#">4</a>    
  </div>
</figure>

<figure class="table" id="table-3">
  <div class="table for-2">
    <div class="chair"> <a class="chairPick" href="#"></a> </div>
    <div class="chair"> <a class="chairPick" href="#"></a> </div>
    <a class="tablePick" href="#">2</a>    
  </div>
</figure>

<figure class="table" id="table-4">
  <div class="table for-8">
    <div class="chair"> <a class="chairPick" href="#"></a> </div>
    <div class="chair"> <a class="chairPick" href="#"></a> </div>
    <div class="chair"> <a class="chairPick" href="#"></a> </div>
    <div class="chair"> <a class="chairPick" href="#"></a> </div>
    <div class="chair"> <a class="chairPick" href="#"></a> </div>
    <div class="chair"> <a class="chairPick" href="#"></a> </div>
    <div class="chair"> <a class="chairPick" href="#"></a> </div>
    <div class="chair"> <a class="chairPick" href="#"></a> </div>
    <a class="tablePick" href="#">8</a>    
  </div>
</figure>

</section><!-- /room-1 -->

SCSS

$table-width: 20px;
$table-height: 20px;
$chair-width: 10px;
$chair-height: 15px;
$border:2px;

figure.table {position:absolute;}
#table-1 {left:0; top:0;}
#table-2 {left:100px; top:0;}
#table-3 {left:0px; top:80px;}
#table-4 {left:100px; top:80px;}

div.table { position:relative; margin:$table-width;}
div.table.round a.tablePick{ border-radius:$table-width;}
.table.for-2 { width:calc( #{$table-width} - #{$border}); height:calc( #{$table-height} - #{$border});}
.table.for-4 { width:calc( #{$table-width} - #{$border}); height:calc( #{$table-height} - #{$border});}
.table.for-6 { width:calc( #{$table-width} + #{$table-width} - #{$border} ); height:calc( #{$table-height} - #{$border});}
.table.for-8 { width:calc( #{$table-width} + #{$table-width} + #{$table-width} - #{$border}); height:calc( #{$table-height} - #{$border});}
a.tablePick { display: block; border:2px solid #666; background: #ccc; border-radius:3px; width: 100%; height: 100%; position: absolute; top: -2px; left:-2px; text-align: center; color:#666; font-size: 10px; line-height: $table-height; text-decoration:none; }
a.chairPick { display: block; border:2px solid #aaa; border-left:2px solid #666; border-radius:3px; width:$chair-width; height:$chair-height; position:absolute; }

.table.for-2 .chair:nth-child(1) a,
.table.for-4 .chair:nth-child(1) a,
.table.for-6 .chair:nth-child(1) a,
.table.for-8 .chair:nth-child(1) a { left: (-$table-width);} 

.table.for-2 .chair:nth-child(2) a { right: (-$table-width); transform: rotate(180deg);}  
.table.for-4 .chair:nth-child(2) a,
.table.for-6 .chair:nth-child(2) a,
.table.for-8 .chair:nth-child(2) a { top: (-$table-height); left:$border; transform: rotate(90deg);} 

.table.for-4 .chair:nth-child(3) a { right:(-$table-width); transform: rotate(180deg);} 
.table.for-6 .chair:nth-child(3) a,
.table.for-8 .chair:nth-child(3) a { left: calc( #{$table-width} + #{$border}); top: (-$table-height); transform: rotate(90deg); } 

.table.for-4 .chair:nth-child(4) a { bottom:...

JavaScript

// OK - jen obarvit židle po najetí na stůl
$('.tablePick').hover(function() {
    var $pickTable = $(this).prevAll('.chair');
    $pickTable.find('.chairPick').addClass('hover');
}, function() {
    var $pickTable = $(this).prevAll('.chair');
    $pickTable.find('.chairPick').removeClass('hover');
});



// blbě - přidat třídu židlím a stolu po kliku na stůl
$('.tablePick').click(function() {
    if (!$(this).attr('data-chosen')) {
        var $pickThisTable = $(this).prevAll('.chair');
        $pickThisTable.find('.chairPick').addClass('chosen');
        $(this).addClass('chosen');
        $(this).attr('data-chosen', 'true');
    }
    else {
        var $unpickThisTable = $(this).prevAll('.chair');
        $unpickThisTable.find('.chairPick').removeClass('chosen');
        $(this).removeClass('chosen');
        $(this).removeAttr('data-chosen', 'true');
    }
});


// OK - toggle třídu židlím po kliku na židli
$('.chairPick').click(function() {
    if ( $(this).hasClass('chosen') ) {
        $(this).removeClass('chosen');
    } else {
        $(this).addClass('chosen');    
    }
});