@model OI.Metrology.Shared.ViewModels.RunInfo
@{
    ViewData["Title"] = "Run Information";
}
<style>
    #HeaderGridDiv,
    #DetailsGridDiv {
        font-size: 12px;
    }
</style>

<h4>Run Information</h4>

<form class="form-inline mb-4">
    <div class="form-group">
        <label for="ToolType">Tool Type</label>
        <div class="form-control" id="ToolType"></div>
    </div>
    <div class="form-group">
        <label for="StartDate">Start Time</label>
        <div class="form-control mb-2 mr-sm-2" id="StartDate"></div>
        <div class="form-control mb-2 mr-sm-2" id="StartTime"></div>
    </div>
    <div class="form-group">
        <label for="EndDate">End Time</label>
        <div class="form-control mb-2 mr-sm-2" id="EndDate"></div>
        <div class="form-control mb-2 mr-sm-2" id="EndTime"></div>
    </div>&nbsp;&nbsp;
    <div class="form-group">
        <input class="btn btn-primary" type="button" value="Load Headers" id="LoadHeadersButton" />
    </div>&nbsp;&nbsp;
    <div class="form-group">
        <label class="form-check-label" for="chkAutoRefresh">
            Auto-Refresh
        </label>
        <input class="form-check-input" type="checkbox" id="chkAutoRefresh">
    </div>
</form>

<div style="height: 300px;" id="HeaderGridDiv">
    <span id="ToolTypeID" hidden></span>
    <table id="HeaderGrid"></table>
</div>

<div class="row" style="margin-top: 10px; margin-bottom: 20px;">
    <div class="col-xs-1">
        <input type="button" class="btn" id="GetDataButton" value="Get Data" disabled />
    </div>
    <div class="col-xs-1">
        <input type="button" class="btn" id="ReviewButton" value="Review" disabled />
    </div>
</div>

<div id="DetailsDiv" hidden>

    <span id="HeaderId" hidden></span>
    <span id="HeaderAttachmentId" hidden></span>
    <div style="padding-bottom: 20px;" id="DetailsGridDiv">
        <table id="DetailsGrid"></table>
    </div>

    <div id="ExportDiv" style="margin-top: 10px;" hidden>
        <input type="button" value="Send to OpenInsight" id="OIExportButton" />
        <span id="OIExportResult" style="margin-left: 10px; font-weight: bold; color: #366b02;"></span>
    </div>

    <p style="text-align: center; margin-top: 20px;">
        <iframe id="DataAttachmentFrame" style="height:900px; border-width:thin; margin-right: 10px;" hidden></iframe>
        <iframe id="HeaderAttachmentFrame" style="height:900px; border-width:thin;" hidden></iframe>
    </p>

</div>

<script>

    var toolType = null;
    var toolTypeMetaData = null;

    function LoadHeaderGrid() {

        var toolTypeID = $("#ToolType").igCombo("value");

        $("#ToolTypeID").text(toolTypeID);

        HideDetailsDiv();
        DisableHeaderButtons();

        $("#HeaderId").text("");
        $("#HeaderAttachmentId").text("");

        var gridCreated = $("#HeaderGrid").data("igGrid");
        if (gridCreated)
            $("#HeaderGrid").igGrid("destroy");

        $.ajax({
            type: "GET",
            url: "@Url.Content("~/api/tooltypes/")" + toolTypeID + "?sortby=grid",
            success: function (r) {
                if ((r.Results == null) || (r.Results.ToolType == null) || (r.Results.Metadata == null))
                    ShowErrorMessage("Invalid tool type: " + toolTypeID);
                else {
                    toolType = r.Results.ToolType;
                    toolTypeMetaData = r.Results.Metadata;
                    RequestHeaderData();
                }
            },
            error: function (e) {
                DisplayWSMessage("error", "There was an error getting tooltype info.", e);
            }
        });

    }

    function DisableHeaderButtons() {
        $("#GetDataButton").prop("disabled", true);
        $("#ReviewButton").prop("disabled", true);
    }

    function EnableHeaderButtons() {
        $("#GetDataButton").prop("disabled", false);
        $("#ReviewButton").prop("disabled", false);
    }

    function HideDetailsDiv() {
        $("#DetailsDiv").prop("hidden", true);
        $("#DataAttachmentFrame").prop("src", "");
    }

    function ShowDetailsDiv() {
        $("#DetailsDiv").prop("hidden", false);

        $("#ExportDiv").prop("hidden", true);
        if ((toolType != null) && (toolType.OIExportSPName != null) && (toolType.OIExportSPName.length > 0)) {
            $("#ExportDiv").prop("hidden", false);
            $("#OIExportButton").prop("disabled", false);
            $("#OIExportResult").text('');
        }

        $("#DataAttachmentFrame").prop("hidden", true);
        $("#HeaderAttachmentFrame").prop("hidden", true);
        if (toolType != null) {
            var visibleFrames = 0;
            if (toolType.DisplayDataAttachment && toolType.DisplayDataAttachment.length > 0) {
                visibleFrames += 1;
                $("#DataAttachmentFrame").prop("hidden", false);
            }
            if (toolType.DisplayHeaderAttachment && toolType.DisplayHeaderAttachment.length > 0) {
                visibleFrames += 1;
                $("#HeaderAttachmentFrame").prop("hidden", false);
            }
            var frameWidth = (98 / visibleFrames) + "%";
            $("#DataAttachmentFrame,#HeaderAttachmentFrame").css('width', frameWidth);
        }
    }

    function HeaderSelectionChanged(evt, ui) {
        if (ui.row.index >= 0) {
            if ($("#HeaderId").text() == ui.row.id) {
                EnableHeaderButtons();
                return;
            }
        }
        DisableHeaderButtons();
        HideDetailsDiv();
        if (ui.row.index >= 0) {
            EnableHeaderButtons();
            $("#HeaderId").text(ui.row.id);
            var rowData = ui.owner.grid.dataSource.dataView()[ui.row.index];
            $("#HeaderAttachmentId").text(rowData.AttachmentID);
        }
    }

    function CancelHandler(evt, ui) {
        return false;
    }

    function DetailSelectionChanged(evt, ui) {

        $("#DataAttachmentFrame").prop("src", "");

        if (ui.row.index >= 0) {
            var rowData = ui.owner.grid.dataSource.dataView()[ui.row.index];
            var toolTypeID = $("#ToolTypeID").text();
            var attachmentUrlBase = '@Url.Content("~/api/tooltypes/")' + toolTypeID;
            var attachmentId = rowData.AttachmentID;

            if ((attachmentId == null) || (attachmentId === ''))
                return;

            if ((toolType.DisplayDataAttachment == null) || (toolType.DisplayDataAttachment === ''))
                return;

            $("#DataAttachmentFrame").prop("src", attachmentUrlBase + "/data/files/" + attachmentId + "/" + toolType.DisplayDataAttachment);

        }
    }

    function LoadHeaderAttachment() {
        var toolTypeID = $("#ToolTypeID").text();
        var attachmentId = $("#HeaderAttachmentId").text();
        var attachmentUrlBase = '@Url.Content("~/api/tooltypes/")' + toolTypeID;
        if ((attachmentId == null) || (attachmentId === '') || (toolType.DisplayHeaderAttachment == null) || (toolType.DisplayHeaderAttachment === '')) {
            $("#HeaderAttachmentFrame").prop("src", "");
        } else {
            $("#HeaderAttachmentFrame").prop("src", attachmentUrlBase + "/header/files/" + attachmentId + "/" + toolType.DisplayHeaderAttachment);
        }

        $("#DataAttachmentFrame").prop("src", "");
    }

    function MarkAsReviewed() {

        var toolTypeId = $("#ToolTypeID").text();
        var headerId = $("#HeaderId").text();

        $.ajax({
            type: "POST",
            url: "@Url.Content("~/api/awaitingdispo/markasreviewed")?tooltypeid=" + toolTypeId + "&headerid=" + headerId,
            success: function () {
            },
            error: function (e, ajaxOptions, ex) {
                DisplayWSMessage("error", "There was an error marking header as reviewed.", e, ex);
                $("#ReviewButton").prop("disabled", false);
            }
        });
    }

    function LoadDetails() {

        ShowDetailsDiv();

        LoadHeaderAttachment();

        var gridCreated = $("#DetailsGrid").data("igGrid");
        if (gridCreated)
            $("#DetailsGrid").igGrid("destroy");

        var headerId = $("#HeaderId").text();
        var toolTypeID = $("#ToolTypeID").text();

        var detailsURL = "@Url.Content("~/api/tooltypes/")" + toolTypeID + "/headers/" + headerId + "/data";

        var gridColumns = [
            { key: "AttachmentID", dataType: "string", hidden: true },
            { key: "Title", dataType: "string", hidden: true },
        ];

        for (var i = 0; i < toolTypeMetaData.length; i++) {
            var f = toolTypeMetaData[i];
            if ((f.Header == false) && (f.GridDisplayOrder > 0)) {
                var col = {
                    key: f.ColumnName,
                    headerText: f.DisplayTitle,
                    width: "150px",
                };
                if (f.GridAttributes != null)
                    jQuery.extend(col, JSON.parse(f.GridAttributes));
                if (col.formatter != null) {
                    if (col.formatter == "boolToYesNo")
                        col.formatter = boolToYesNo;
                    else
                        col.formatter = null;
                }
                gridColumns.push(col);
            }
        }

        var gridParms = {
            autoGenerateColumns: false,
            primaryKey: "ID",
            features: [
                { name: "Selection", mode: "row", rowSelectionChanging: DetailSelectionChanged },
                { name: "Resizing" },
                { name: "Sorting", type: "local" }
            ],
            columns: gridColumns,
            dataSource: detailsURL,
            responseDataKey: "Results",
            dataBound: MarkAsReviewed,

        };

        if ((toolType != null) && (toolType.DataGridAttributes != null)) {
            jQuery.extend(gridParms, JSON.parse(toolType.DataGridAttributes));
        }

        $("#DetailsGrid").igGrid(gridParms);
    }

    var initialHeaderId = @Model.HeaderID;
    var initialHeaderAttachmentId = "@Model.HeaderAttachmentID";

    function RequestHeaderData() {
        var startDate = $("#StartDate").igDatePicker("value");
        var startTime = $("#StartTime").igTimePicker("value");

        var endDate = $("#EndDate").igDatePicker("value");
        var endTime = $("#EndTime").igTimePicker("value");

        var parms = {
            datebegin: new Date(
                startDate.getFullYear(), startDate.getMonth(), startDate.getDate(),
                startTime.getHours(), startTime.getMinutes(), startTime.getSeconds()).toISOString(),
            dateend: new Date(
                endDate.getFullYear(), endDate.getMonth(), endDate.getDate(),
                endTime.getHours(), endTime.getMinutes(), endTime.getSeconds()).toISOString(),
        }

        var headerId = 0;
        if (initialHeaderId > 0) {
            headerId = initialHeaderId;
            parms.headerid = headerId;
            $("#HeaderId").text(headerId);
            $("#HeaderAttachmentId").text(initialHeaderAttachmentId);
            initialHeaderId = -1;
        }

        var headerURL = "@Url.Content("~/api/tooltypes/")" + toolType.ID + "/headers?" + $.param(parms);

        var gridColumns = [
            { key: "ID", dataType: "number", hidden: true },
            { key: "AttachmentID", dataType: "string", hidden: true },
            { key: "Title", dataType: "string", hidden: true },
        ];

        for (var i = 0; i < toolTypeMetaData.length; i++) {
            var f = toolTypeMetaData[i];
            if ((f.Header == true) && (f.GridDisplayOrder > 0)) {
                var col = {
                    key: f.ColumnName,
                    headerText: f.DisplayTitle,
                    width: "150px",
                };
                if (f.GridAttributes != null)
                    jQuery.extend(col, JSON.parse(f.GridAttributes));
                if (col.formatter != null) {
                    if (col.formatter == "boolToYesNo")
                        col.formatter = boolToYesNo;
                    else
                        col.formatter = null;
                }
                gridColumns.push(col);
            }
        }

        var gridParms = {
            autoGenerateColumns: false,
            primaryKey: "ID",
            height: "100%",
            width: "100%",
            features: [
                { name: "Paging", type: "local", recordCountKey: "TotalRows", pageSize: 100, pageSizeList: [50, 100, 250, 500], pageSizeUrlKey: "pageSize", "pageIndexUrlKey": "page" },
                { name: "Selection", mode: "row", rowSelectionChanged: HeaderSelectionChanged },
                { name: "Filtering", type: "local" },
                { name: 'Resizing' },
                { name: "Sorting", type: "local" }
            ],
            columns: gridColumns,
            dataSource: headerURL,
            responseDataKey: "Results",
        };

        if ((toolType != null) && (toolType.HeaderGridAttributes != null)) {
            jQuery.extend(gridParms, JSON.parse(toolType.HeaderGridAttributes));
        }

        $("#HeaderGrid").igGrid(gridParms);

        if (headerId > 0) {
            LoadDetails();
        }
    }

    function ReviewButton() {

        var toolTypeId = $("#ToolTypeID").text();
        var headerId = parseInt($("#HeaderId").text());

        $("#ReviewButton").prop("disabled", true);
        $.ajax({
            type: "POST",
            url: "@Url.Content("~/api/awaitingdispo/markasawaiting")?tooltypeid=" + toolTypeId + "&headerid=" + headerId,
            success: function (e) {
                DisplayWSMessage("info", "Marked as awaiting disposition", e);
                $("#ReviewButton").prop("disabled", false);
            },
            error: function (e, ajaxOptions, ex) {
                DisplayWSMessage("error", "There was an error marking header as awaiting disposition.", e, ex);
                $("#ReviewButton").prop("disabled", false);
            }
        });
    }

    function OIExportButton() {

        var headerId = $("#HeaderId").text();
        var toolTypeID = $("#ToolTypeID").text();

        $("#OIExportButton").prop("disabled", true);

        $.ajax({
            type: "POST",
            url: "@Url.Content("~/api/tooltypes/")" + toolTypeID + "/headers/" + headerId + "/oiexport",
            success: function (r) {
                $("#OIExportResult").text("Exported!");
            },
            error: function (e, ajaxOptions, ex) {
                DisplayWSMessage("error", "There was an error exporting.", e, ex);
                $("#OIExportButton").prop("disabled", false);
            }
        });
    }

    function SetInitialDateTimes() {

        var startTime = new Date(Date.now() - 6 * 60 * 60 * 1000);//6 hours back from now

        $("#StartDate").igDatePicker({
            dateInputFormat: "date",
            value: startTime,
            width: 125
        });

        $("#StartTime").igTimePicker({
            dateInputFormat: "time",
            value: startTime,
            width: 110
        });

        var endTime = new Date(Date.now());

        $("#EndDate").igDatePicker({
            dateInputFormat: "date",
            value: endTime,
            width: 125
        });

        $("#EndTime").igTimePicker({
            dateInputFormat: "time",
            value: endTime,
            width: 110
        });
    }

    $(document).ready(function () {

        $("#ToolType").igCombo({
            dataSource: '@Url.Content("~/api/tooltypes")',
            responseDataKey: "Results",
            textKey: "ToolTypeName",
            valueKey: "ID",
            mode: "dropdown",
            width: 150,
            itemsRendered: function (evt, ui) {
                LoadHeaderGrid();
            },
            selectionChanged: LoadHeaderGrid,
            initialSelectedItems: [{ value: @Model.ToolTypeID }]
        });

        SetInitialDateTimes();

        $("#HeaderGrid").on("dblclick", "tr", LoadDetails);

        $("#LoadHeadersButton").click(LoadHeaderGrid);

        $("#GetDataButton").click(LoadDetails);

        $("#ReviewButton").click(ReviewButton);

        $("#OIExportButton").click(OIExportButton);

        setInterval(function () {
            if ($("#chkAutoRefresh").is(':checked')) {
                SetInitialDateTimes();
                $("#LoadHeadersButton").click();
            }
        }, 180000);

    });

</script>