Assignment 2: Data Sorting

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/humanity/jquery-ui.css">
<div id="widget-drilldown" title="Loading..."></div>

<script id="drilldownTemplate" type="text/x-jquery-tmpl">
    <h1>${name}</h1>
    <h3>${value}</h3>
    {{each tickets.types}}
        <div style="border:5px solid red;">${value}</div>
        <ol class="ticket-list"> 
        {{tmpl(List) $("#drilldownItemTemplate").template()}}
        </ol>
    {{/each}}  
</script>

<script id="drilldownItemTemplate" type="text/x-jquery-tmpl">
    <li class="ticket">
        <p class="ticket-buttons"><a href="#" class="dd-more">more</a> | OT</p>
        <div class="ticket-status ${priority.substr(3, 3)}" style="float:left;">${priority.substring(0, 1)}</div>
        <div class="ticket-status ${state}" style="float:left;">${state}</div>                
        <div class="ticket-status ${type}" style="float:left;">${type}</div>
        <h2 class="ticket-title">
            <a href="http://www.google.co.uk" title="${incident}">${number}</a>
        </h2>
    </li>
</script>

<script id="drilldownItemMoreTemplate" type="text/x-jquery-tmpl">
    <li class="ticket">
        <p class='ticket-buttons'> <a href='#' class='dd-less'>less</a> | OT</p>
        <div class='ticket-status ${priority.substr(3, 3)}'style='float:left;'>${priority.substring(0, 1)}</div>
        <div class='ticket-status ${state}'style='float:left;'>${state}</div>                
        <div class='ticket-status ${type}'style='float:left;'>${type}</div>
        <h2 class='ticket-title'>
            <a href='http://www.google.co.uk' title='${incident}'>${number}</a>
        </h2>
    </li>
    <li class='ticket'>
        <h2 class='ticket-title'>
            ${incident}
        </h2>
    </li>
        
</script>

CSS

a:link, a:active, a:visited {
            text-decoration: none;
        }
        
        .ticket-list 
        {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .ticket-list .ticket {
            margin: 0;
            padding: 13px 13px 10px;
            background: #FFFEFC;
            border: 1px solid #E9EAE6;
            border-width: 0 0 1px;
            overflow: hidden;
        }
        
        .ticket-title 
        {
            position:relative;
            top: 2px;
            
            font-size: 1.25em;
            font-weight: bold;
            color: #EFBA46;
            
            margin: 10px 0 0 10px;
            padding: 0;
            display: inline;
        }
        
        .ticket-list .ticket-title a 
        {
            color: #EFBA46;
        }
        
        .ticket-list .ticket-buttons {
            margin: 6px 0 0;
            float: right;
        }
        
        
        
        
        .ticket-status 
        {
            margin: 0 10px 0 10px;            
            padding: 5px 15px 5px;
            display: inline-block;
            border-radius: 3px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            min-width: 25px;
            border-top-left-radius: 3px 3px;
            border-top-right-radius: 3px 3px;
            border-bottom-right-radius: 3px 3px;
            border-bottom-left-radius: 3px 3px;
        }
        .ticket-status {
            font-weight: bold;
            text-transform: uppercase;
            line-height: normal;
            text-align: center;
        }
        
        
        .ticket-status.New  {
            background: #93CE11;
            color: white; 
        }
        .ticket-status.Assigned  {
            background: #93CE11;
            color: white; 
        }
        .ticket-status.Progress  {
            background: #E3F9B4;
            color: #72A00D;
        }
       ...

JavaScript

$('.dd-more').live('click', function() {
    var tmplItem = $.tmplItem(this);
    tmplItem.tmpl = $("#drilldownItemMoreTemplate").template();
    tmplItem.update();               
});
$('.dd-less').live('click', function() {
    var tmplItem = $.tmplItem(this);
    tmplItem.tmpl = $("#drilldownItemTemplate").template();
    tmplItem.update(); 
});

// Request data  (this is a remote call in my app, but local here for demonstration.

var my_data = {
    "name": "Super Secret Project",
    "value": "All Pending Tickets",
    "tickets": {
        "types": [
            {
                "value": "Pending",
                "List": [
                    {
                        "id": 1244343,
                        "number": "XX-18591",
                        "type": "Request",
                        "responsiblegroup": "Database Team",
                        "priority": "4. Low",
                        "state": "Pending",
                        "responsible": "bob",
                        "incident": "orem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel interdum lorem. Proin cursus imperdiet sodales. Mauris consectetur commodo nunc, in malesuada turpis tempor at. Nulla non ultrices nulla. Maecenas iaculis sodales nulla in consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque aliquet quam non erat feugiat non auctor nisi lacinia. Maecenas pellentesque tempus nulla a venenatis."
                    },
                    {
                        "id": 1276756,
                        "number": "XX-20812",
                        "type": "Request",
                        "responsiblegroup": "Database Team",
                        "priority": "4. Low",
                        "state": "Pending",
                        "responsible": "bob",
                        "incident": "orem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel interdum lorem. Proin cursus imperdiet sodales....