@model HeuristicLab.Services.Optimization.Web.Models.StatusModel

@{
    ViewBag.Title = "Job Status";
}

<script type="text/javascript">
    function convertTaskToNode(task) {
        var currentTask = { title: task.General.Name, tooltip: task.General.Id };
        var children = [];
        for (var i = 0; i < task.Children.length; i++) {
            var node = convertTaskToNode(task.Children[i]);
            children.push(node);
        }
        if (children.length > 0)
            currentTask["children"] = children;
        return currentTask;
    }

    function convertTaskDataToNodes(taskData) {
        var children = [];
        for (var i = 0; i < taskData.Tasks.length; i++) {
            var node = convertTaskToNode(taskData.Tasks[i]);
            children.push(node);
        }
        return children;
    }

    function updateTree(jobId) {
        $.ajax({
            type: "GET",
            url: '/Status/GetTasks',
            data: { jobId: jobId },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {
                var rootNode = $("#container").dynatree("getRoot");
                rootNode.removeChildren();
                var children = convertTaskDataToNodes(result);
                for (var i = 0; i < children.length; i++)
                    rootNode.addChild(children[i]);
            }
        });
    }

    function updateJobDetails(details) {
        $('#details').empty();
        var props = details.General.Properties;
        for (var i = 0; i < props.length; i++) {
            $("<p></p>").text(props[i].Key + ": " + props[i].Value).appendTo('#details');
        }

        $("<p></p>").text("Task state: " + details.State.State).appendTo('#details');
        $("<p></p>").text("Date created: " + details.State.DateCreated).appendTo('#details');
        $("<p></p>").text("Date finished: " + details.State.DateFinished).appendTo('#details');
        $("<p></p>").text("Execution Time: " + details.State.ExecutionTime).appendTo('#details');
    }

    function updateDetails(taskId) {
        var jobId = $('.selectedJob').attr("href").substr(1);
        $.ajax({
            type: "GET",
            url: '/Status/GetTaskData',
            data: { jobId: jobId, taskId: taskId },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: updateJobDetails
        });
    }

    $(document).ready(function () {
        var tree = $('#container').dynatree({
            onActivate: function (node) {
                updateDetails(node.data.tooltip);
            }
        });  // no special tree required
        $('a[class="JobRef"]').click(function (e) {
            $('a[class="JobRef"]').removeClass("selectedJob");
            $(this).addClass("selectedJob");
            updateTree($(this).attr("href").substr(1));
        });
    });
  
</script>

<h2>Job-Status</h2>

@for (var i = 0; i < Model.Jobs.Count; i++ ) {
    var jobId = "#" + Model.Jobs[i].Id;
    <a href="@jobId"  class="JobRef">Details Job @i</a>
}


<div id="container" class="treeStyle">
  <ul>
  </ul>
</div>

<div id="details">
  <p>-</p>
</div>

@section submenu {
    <ul>
        <li>@Html.ActionLink("Build", "New", "Experiment")</li>    
        <li>@Html.ActionLink("Edit", "NewEdit", "Experiment")</li>
        <li class="selected">@Html.ActionLink("Status", "Index", "Status")</li>
    </ul>
}