A jQuery Dashboard

So I've been working on a dashboard type page utilising the jqueryui controls and thought I'd share how I went about it.

I went through a few iterations getting the css working but it finally panned out the way I wanted it.

There are basically three components, the styles, the javascript, and the actual html.

Here I'm setting out the structure of the table that the dashboard is going to represent.

.table
{
    float: left;
    width: 100%;
}
.table-row
{
    float: left;
    width: 100%;
}
.table-cell
{
    margin: 0;
    float: left;
    width: 24%;
    min-height: 15em;
    padding: 0.3em;
}
.item
{
    width: 10em; 
    display: inline; 
    float: left; 
    cursor: move; 
    margin-right: 0.4em;
}

Here's the script behind the page.

$(document).ready(function() {

    function EqualiseHeight(row) {        //remove the previous height
        $(row).children().removeAttr("style");        //set the new height
        $(row).equalHeights(true);
    }

    function moveTask(task, region) {
        task.fadeOut(function() {
            task.appendTo(region).fadeIn();
            EqualiseHeight($(region).parent());
        });
    }

    function makeDraggable(task) {
        var uniqueid = $(task).parent().attr("uniqueid");

        $(task).draggable({
            cancel: '.action',
            revert: 'invalid',
            containment: 'div[uniqueid =' + uniqueid + ']',
            helper: 'clone',
            cursor: 'move'
        });
    }

    $(".table-row").each(function() {
        //EqualiseHeight(this);
        $(this).equalHeights(true);
        //make children into draggable objects
        $(this).children().children().each(function() {
            makeDraggable(this);
        });
    });

    $("ul").droppable({
        accept: 'li',
        hoverClass: 'ui-state-highlight',
        drop: function(ev, ui) {
            moveTask(ui.draggable, this);
        }
    });
});

So we have a function, EqualiseHeight, that takes an element representing a row (funnily enough) it makes sure that any style attribute for each of the rows direct child elements has been removed. It then utilised the equalHeights function as provided by filament group.
We then have a function, moveTask, that is responsible for that actual moving of an item by fading it out and then appending it to the region it was dropped in.
Next we have, makeDraggable, that takes an item and makes it draggable.

Now that we have some functions predefined, we start setting the page elements that will draggable items and the area that will be droppable.

Next comes the html...

<div class="table">
    <div storyid="1" class="table-row">
        <ul storyid="1" class="table-cell ui-widget ui-widget-content">
            <li class="item ui-widget ui-widget-content ui-corner-all">
                <h6 class="ui-widget-header">Task 1</h6>
                <div class="details">Task one details.</div>
                <a href="#" class="ui-icon action" title="do something">actions</a></li>
            <li class="item ui-widget ui-widget-content ui-corner-all">
                <h6 class="ui-widget-header">Task 2</h6>
                <div class="details">Task two details.</div>
                <a href="#" class="ui-icon action" title="do something">actions</a></li>
            <li class="item ui-widget ui-widget-content ui-corner-all">
                <h6 class="ui-widget-header">Task 4</h6>
                <div class="details">Task one details.</div>
                <a href="#" class="ui-icon action" title="do something">actions</a></li>
            <li class="item ui-widget ui-widget-content ui-corner-all">
                <h6 class="ui-widget-header">Task 5</h6>
                <div class="details">Task two details.</div>
                <a href="#" class="ui-icon action" title="do something">actions</a></li>
            <li class="item ui-widget ui-widget-content ui-corner-all">
                <h6 class="ui-widget-header">Task 6</h6>
                <div class="details">Task one details.</div>
                <a href="#" class="ui-icon action" title="do something">actions</a></li>
        </ul>
        <ul storyid="1" class="table-cell ui-widget ui-widget-content">
            <li class="item ui-widget ui-widget-content ui-corner-all">
                <h6 class="ui-widget-header">Task 3</h6>
                <div class="details">Task three details.</div>
                <a href="#" class="ui-icon action" title="do something">actions</a></li>
        </ul>
        <ul storyid="1" class="table-cell ui-widget ui-widget-content">cell content</ul>
        <ul storyid="1" class="table-cell ui-widget ui-widget-content">cell content</ul>
    </div>
</div>

And there you have it.

References:
1. jQuery
2. jQuery ui

Setting Equal Heights with jQuery

I've been experimenting with jquery and jqueryui and trying to build a dashboard type page.

Everything was going quite well until I wanted to make the cells within a row the same height.

With a little searching I found this, setting equal heights with jquery. Absolutely brilliant!

Thank you filament group

Poker - Planning Poker

Had my first game of Planning Poker not long ago. Even though I'd been working with Scrum for the last three years never had I performed planning of this type before. For those who are/ have been in a similar situation to myself you're probably asking, what they heck is this all about?

As the term poker suggests, there is a deck of cards involved, how ever this is no ordinary deck of cards. Each player has the following set of cards... ?, 0, 1/2, 1, 2, 3, 5, 8, 13, 20, 40, 100, infinity.

So how does it work you may be asking?
Firstly we should explain when the game is played. This game is played when the project team is estimating the effort required for each of the user stories in the product backlog. But how do the numbers listed above work? You need to keep in mind that you are not trying to estimate the number of hours a user story is going to take, you are just giving an indication of how much effort you think is going to be required to complete the task in relation to the other tasks. The other major benefit of playing is that it generates discussion amongst the team.

Anyway rather then going on and on, read here: Planning Poker Estimating in Detail

Here's another very good read on Planning Poker - Agile Estimating

Hope this is helpful