Index: branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/Index.cshtml
===================================================================
--- branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/Index.cshtml	(revision 13689)
+++ branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Views/Job/Index.cshtml	(revision 13712)
@@ -18,5 +18,5 @@
         </a>
     </div>
-    <div class="row" style="padding:10px">
+    <div class="row" style="padding:10px; margin-right:0px!important">
         @if (Model.userJobs.Count == 0)
         {
@@ -34,7 +34,8 @@
                            asp-controller="Job"
                            asp-action="Selected"
-                           asp-route-id="@job.Id">
-                            @job.Name - @job.DateCreated
-                            <span class="badge">@job.JobCount</span>
+                           asp-route-id="@job.Id"
+                           onclick="showLoader()">
+                            @job.Job.Name - @job.Job.DateCreated
+                            <span class="badge">@job.Job.JobCount</span>
                         </a>
                     }
@@ -42,20 +43,25 @@
                 </div>
             </div>
+            <p style="display:none" id="loader" class="text-center">
+                <br /><br /><br /><br /><br /><br /><br />
+                <i class="fa fa-cog fa-spin fa-5x" id="spinner">
+                </i>
+            </p>
             @if (Model.selectedJob != null)
             {
-                <div class="col-sm-8" style="padding:5px; padding-left:10px;">
+                <div class="col-sm-8" id="content" style="padding:5px; padding-left:10px;">
                     <div class="row">
                         <h2 style="padding-left:20px">
-                            @Model.selectedJob.Name
+                            @Model.selectedJob.Job.Name
                             <a onclick="popUpDelete()"
-                               style="margin-bottom:10px;" 
-                               
+                               style="margin-bottom:10px;"
                                class='btn btn-danger'>
                                 <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                             </a>
-                            <a style="display:none" 
-                               asp-action="Delete" 
-                               asp-route-id="@Model.selectedJob.Id" 
-                               asp-controller="Job" id="del"  ></a>
+                            <a style="display:none"
+                               asp-action="Delete"
+                               asp-route-id="@Model.selectedJob.Id"
+                               asp-controller="Job" id="del"
+                               onclick="showDeleter()"></a>
 
                             <script type="text/javascript">
@@ -67,42 +73,28 @@
                                 }
                             </script>
-            
+
                         </h2>
                         <div class="col-sm-6" style="padding-left:30px">
-                            <p>Description: @Model.selectedJob.Description</p>
-                            <p>Resources: @Model.selectedJob.ResourceNames</p>
-                            <p>Created: @Model.selectedJob.DateCreated</p>
-                            <p>Owned by: @Model.selectedJob.OwnerUsername</p>
+                            <p>Description: @Model.selectedJob.Job.Description</p>
+                            <p>Resources: @Model.selectedJob.Job.ResourceNames</p>
+                            <p>Created: @Model.selectedJob.Job.DateCreated</p>
+                            <p>Owned by: @Model.selectedJob.Job.OwnerUsername</p>
 
                         </div>
                         <div class="col-sm-6" style="padding-left:30px">
-                            <p>Calculating: @Model.selectedJob.CalculatingCount</p>
-                            <p>Finished: @Model.selectedJob.FinishedCount</p>
+                            <p>Calculating: @Model.selectedJob.Job.CalculatingCount</p>
+                            <p>Finished: @Model.selectedJob.Job.FinishedCount</p>
                         </div>
 
                     </div>
                     <div class="row">
-                        <h3 style="padding-left:20px">@Model.lightJobTasks.Count Task@(Model.lightJobTasks != null && Model.lightJobTasks.Count != 1 ? "s" : "" )</h3>
-                        @foreach (var task in Model.lightJobTasks)
+                        <h3 style="padding-left:20px">Tasks</h3>
+                        <script type="text/javascript">
+                            //TODO Globale variabele waar data per categorie in gestoken kan worden 
+                        </script>
+                        @foreach (var task in Model.selectedJob.HiveTasks)
                         {
-                            <table class="table " 
-                                   style="margin-left:20px;">
-                                <thead>
-                                    <tr>
-                                        <th>@task</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td>Last update @task.LastTaskDataUpdate</td>
-                                        <td>State: @task.State</td>
-                                        
-                                    </tr>
-                                    <tr>
-                                        <td>@task.ExecutionTime executed</td>
-                                        <td>Created: @task.DateCreated</td>
-                                    </tr>
-                                </tbody>
-                            </table>
+                            @Html.Partial("SelectedJobPartials/_TaskPartial",
+                           new HeuristicLab.Clients.Hive.WebJobManager.Models.HiveTaskContainer(task))
 
                         }
@@ -111,4 +103,15 @@
             }
         }
+        <script type="text/javascript">
+            function showLoader() {
+                document.getElementById("loader").style.display = "";
+                document.getElementById("content").style.display = "none";
+            }
+            function showDeleter() {
+                document.getElementById("loader").style.display = "";
+                document.getElementById("content").style.display = "none";
+                document.getElementById("spinner").className = "fa fa-trash-o fa-spin fa-5x";
+            }
+        </script>
     </div>
 </div>
