task_list.html

<!-- First render the navigation bar. -->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header" style="margin:5px">
            <img alt="My Tasks" src="img/icon.png" height="30" width="25">
        </div>
        <div class="navbar-header" style="margin:5px">
            <h4>My Tasks</h4>
        </div>
        <div class="nav navbar-nav navbar-right" style="margin:5px">
            <a ng-click="loginSvc.logout()" class="btn btn-default ">Logout</a>
        </div>
    </div>
</nav>

<div class="container task-container">
    <div class="row" ng-if="loadingTasks">
        <div class="col-md-12 alert text-center alert-info"  role="alert">
            <span class="glyphicon glyphicon-refresh"></span>
            <span>Loading tasks ...</span>
        </div>
    </div>
    <div class="row" ng-if="errorMessage">
        <div class="col-md-12 alert text-center alert-danger"  role="alert">
            <span>{{errorMessage}}</span>
        </div>
    </div>
    
    <!-- Tasks object contains the tasks grouped by task type and list of tasks. Render a separate panel for each task type group -->
    <div ng-repeat="(taskCategory, tasksForCategory) in tasks">
        <div class="panel panel-default">
            <div class="panel-heading" data-toggle="collapse" data-target="#{{$index}}_type" ng-init="row.down=true" ng-click="row.down = !row.down">
                <span><strong>{{taskCategory}}</strong></span>
                <i ng-show="row.down" class="indicator glyphicon glyphicon-chevron-down  pull-right"></i>
                <i ng-show="!row.down" class="indicator glyphicon glyphicon-chevron-up  pull-right"></i> 
            </div>

            <div id="{{$index}}_type" class="collapse in">
                <table class="table">
                    <thead>
                        <tr>
                            <th class="col-md-4">Number</th>
                            <th class="col-md-4">Short Description</th>
                            <th class="col-md-4">Created</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="task in tasksForCategory">
                            <td class="col-md-4 tr-hover">
                                <!-- We pass the event type and the index with the link to retrieve the task from the tasks object stored in memory. This can be done
                                     by passing only the taskid and performing another http call as well -->
                                <a ng-href="#/{{taskCategory}}/{{$index}}">{{task.number}}</a>
                            </td>
                            <td class="col-md-4 ">{{task.short_desc}}</td>
                            <td class="col-md-4 ">{{task.created}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- if there are no tasks displays an info message -->
	<div ng-show="!loadingTasks && !errorMessage">
	    <div class="row" ng-if="tasks|isEmpty">
	        <div class="col-md-12 alert alert-info text-center " role="alert ">
	            Nice Job! It looks like you don't have any tasks in your queue
	        </div>
	    </div>
	</div>
</div>