mesa-fab-approval/Fab2ApprovalSystem/Views/Training/TrainingReportsView.cshtml

@model IEnumerable<Fab2ApprovalSystem.Models.Training>
@{IEnumerable<Fab2ApprovalSystem.Models.TrainingGroup> trainingGroups = ViewBag.TrainingGroups;}
<style>

    tr:nth-child(even) {
        background: #CCC
    }

    tr:nth-child(odd) {
        background: #FFF
    }
    #cover-spin {
        position: fixed;
        width: 100%;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(255,255,255,0.7);
        z-index: 9999;
        display: none;
    }

    @@-webkit-keyframes spin {
        from {
            -webkit-transform: rotate(0deg);
        }

        to {
            -webkit-transform: rotate(360deg);
        }
    }

    @@keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    #cover-spin::after {
        content: '';
        display: block;
        position: absolute;
        left: 48%;
        top: 40%;
        width: 40px;
        height: 40px;
        border-style: solid;
        border-color: black;
        border-top-color: transparent;
        border-width: 4px;
        border-radius: 50%;
        -webkit-animation: spin .8s linear infinite;
        animation: spin .8s linear infinite;
    }
</style>
<script src="~/Scripts/excel-bootstrap-table-filter-bundle.js"></script>
<script src="~/Scripts/moment.js"></script>
<link rel="stylesheet" href="~/Content/excel-bootstrap-table-filter-style.css" />
<div id="cover-spin">

</div>
<button class="btn btn-default btn-primary" id="ResetFilters">Reset Filters</button>
<table class="table" id="displayTable">
    <thead>
        <tr>
            <th class="filterableCol">
                <div>ECN#</div>
                
            </th>
            <th class="filterableCol">
                ECN Title
            </th>
            <th class="filterableCol" dateFormat="M/D/YYYY hh:mm:ss" isType="date">
                Started Date
            </th>

            <th class="filterableCol" dateFormat="M/D/YYYY hh:mm:ss" isType="date">
                Completed Date
            </th>
            <th>
                Assigned Groups
                <br />
                @Html.DropDownList("GroupFilter", new SelectList(trainingGroups, "TrainingGroupID", "TrainingGroupName"), "- Select Group Filter -")
            </th>
            <th class="filterableCol">
                Status
                <br />
                @*<select id="StatusFilter">
                    <option value="0">- Select an option -</option>
                    <option value="1">Complete</option>
                    <option value="2">In Progress</option>
                    <option value="3">Cancelled</option>
                </select>*@
            </th>
            <th>

            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.ECN)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Title)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.StartedDate)
                </td>

                <td>
                    @Html.DisplayFor(modelItem => item.CompletedDate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.ECNTrainingGroups)

                </td>
                @if (item.Deleted == true)
                {
                    <td>Cancelled</td>
                }
                else
                {
                    if (item.Status == true)
                    {
                        if (item.Deleted == true)
                        {
                            <td>Cancelled</td>
                        }
                        else
                        {
                            <td>Complete</td>
                        }

                    }
                    else
                    {
                        <td>In Progress</td>
                    }
                }

                <td>
                    <button class="btn btn-default btn-primary" id="ViewTraining" onclick="ViewTraining(@item.TrainingID)">View Training</button>
                </td>

            </tr>
        }
    </tbody>


</table>
<script type="text/javascript">
    $('#displayTable').excelTableFilter();
    $('#GroupFilter').on('change', function () {
        $('#cover-spin').show(0);
        var SelectedGroup = document.getElementById('GroupFilter').value;
        var sendInfo = {
            filterType: 1,
            filterValue: SelectedGroup

        };
        //alert(SelectedUser);
        $.ajax({
            url: '@Url.Action("TrainingReportsView", "Training")',
            contentType: "application/json; charset=utf-8",
            type: 'POST',
            data: JSON.stringify(sendInfo),
            //dataType: "json",
            success: function(data) {

                    //alert('add success');
                    $('#cover-spin').hide(0);
                    $("#DataDisplay").html(data);

            }, error: function (jqXHR, textStatus, errorThrown) {
                alert("There was an error while fetching the data. Please re-load the page. \n If continue to see this error please contact the system administrator");
                $('#cover-spin').hide(0);
            }
        });

    })
    @*$('#StatusFilter').on('change', function () {

        var SelectedStatus = document.getElementById('StatusFilter').value;
            if (SelectedStatus != '0') {
                var sendInfo = {
                filterType: 2,
                filterValue: SelectedStatus
            };
            $.ajax({
                url: '@Url.Action("TrainingReportsView", "Training")',
                contentType: "application/json; charset=utf-8",
                type: 'POST',
                data: JSON.stringify(sendInfo),
                success: function(data) {
                    $("#DataDisplay").html(data);
                }
            });
        }
    })*@
    function ViewTraining(trainingId) {
        //var SelectedAssignment = document.getElementById('GroupFilter').value;
        var sendInfo = {
            trainingID: trainingId,
            groupFilter: '@ViewBag.GroupFilter'
        };
        //alert(SelectedUser);
        //alert('test')
        $.ajax({
            url: '@Url.Action("ViewTrainingAssignmentsReportView", "Training")',
            contentType: "application/json; charset=utf-8",
            type: 'POST',
            data: JSON.stringify(sendInfo),
            //dataType: "json",
            success: function(data) {

                    //alert('add success');
                    $("#DataDisplay").html(data);

        }
        });
    }
    $('#ResetFilters').on('click', function () {
        var SelectedGroup = document.getElementById('GroupFilter').value;
        var sendInfo = {
            filterType: 0,
            filterValue: ''

        };
        //alert(SelectedUser);
        $.ajax({
            url: '@Url.Action("TrainingReportsView", "Training")',
            contentType: "application/json; charset=utf-8",
            type: 'POST',
            data: JSON.stringify(sendInfo),
            //dataType: "json",
            success: function(data) {

                    //alert('add success');
                    $("#DataDisplay").html(data);

        }
        });

    })
</script>