Tableau.js

by mmarcon

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<div id="search">
    <form>
        <input type="text" id="gname" name="gname" placeholder="Enter your name"/>
    </form>
</div>
<div id="room">
    
</div>

CSS

body {
    background-color: #f5fffa;
}

#search {
    margin: 20px auto;
}

#search input {
    width: 90%;
    padding: 5px;
    font-size: 30px;
    border: 1px solid #999;
    border-radius: 3px;
    margin: auto;
    display: block;
    color: #333;
    max-width: 640px;
}

#room {
    margin: auto;
    width: 90%;
    max-width: 640px;
}

JavaScript

var TABLES = {
    'java': {
        pos: [100, 250],
        people: [
            'Racheal Maver',
            'Federico Sallie',
            'Genesis Kaczor',
            'Regina Clement',
            'Jeanette Weible',
            'Jed Torreblanca',
            'Mac Coakley',
            ]
    },

    'c': {
        pos: [300, 300],
        people: [
            'Racheal Maver',
            'Federico Sallie',
            'Genesis Kaczor',
            'Regina Clement',
            'Regina Clement',
            ]
    },

    'ruby': {
        pos: [200, 500],
        people: [
            'Racheal Maver',
            'Federico Sallie',
            'Genesis Kaczor',
            'Regina Clement',
            'Jeanette Weible',
            'Jed Torreblanco',
            'Mario Rossi'
            ]
    },

    'c++': {
        pos: [500, 480],
        people: [
            'Racheal Maver',
            'Federico Sallie',
            'Genesis Kaczor',
            'Regina Clement',
            'Jeanette Weible',
            'Jed Torreblance',
            ]
    },

    'javascript': {
        pos: [480, 220],
        people: [
            'Racheal Maver',
            'Federico Sallie',
            'Genesis Kaczor',
            'Regina Clement',
            'Jeanette Weible',
            'Jed Torreblance',
            'Giuseppe Verdi'
            ]
    },

    'sposi': {
        people: [
            'Erika Benvegnu',
            'Massimiliano Marcon'
             ],
        sposi: true
    }
};

var SETTINGS = {
    table: {
        radius: 50
    },
    chair: {
        w: 30,
        h: 10
    },
    canvas: {
        w: 640,
        h: 600
    }
};

var UI = {
    tables: {},
    tableSet: null
};


$(function() {
    var room = Raphael('room', SETTINGS.canvas.w, SETTINGS.canvas.h);
    UI.tableSet = room.set();

    var tableSposi = TABLES.sposi;
    UI.tables.sposi = room.set();
    var rect = room.rect(SETTINGS.canvas.w / 2 - 150, 30, 300, 80, 5);
   ...