Luckycall/ReportWebCore/SuperAdmin/Views/LuckySpin/Ranking.cshtml


@{
    ViewBag.Title = "Search Spin";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@using ReportWeb;
@using ReportWeb.Models;
@using SuperCms.Extensions;
@model SearchModel

@{
    var listService = Context.Session.GetComplexData<List<Services>>("listService");
    Users user = Context.Session.GetComplexData<Users>("user");
}

<!-- BEGIN: Content-->
<div class="app-content content">
    <div class="content-wrapper">
        <div class="content-body">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Search</h4>
                    <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <form class="form">
                            <div class="row">
                                <div class="col-md-4 col-sm-4 col-6">
                                    <div class="form-group">
                                        <label>Month</label>
                                        <div class='input-group'>
                                            <input type="text" class="form-control fromDate" id="fromDate">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-4 col-6">
                                    <div class="form-group">
                                        <label>Msisdn</label>
                                        <div class='input-group'>
                                            <input type="text" class="form-control" id="msisdn">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4 col-sm-4 col-12">
                                    <label>Action</label>
                                    <div class="form-group ">
                                        <button type="button" class="btn btn-primary btn-min-width "
                                                onclick="SearchHistory();" id="btnSearch">
                                            Search
                                        </button>
                                        <button type="button" class="btn btn-fill btn-warning" onclick="exportExcel()" id="btnExportExcel">
                                            <i class="icon-export"></i> Export Excel
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Spin Log</h4>
                </div>
                <div class="card-content collapse show">
                    <h5 class="px-2">Remain spin: <span id="remainSpin"></span></h5>
                    <div class="card-body">
                        <table class="table table-striped table-bordered base-style" id="grid_detail">
                            <thead>
                                <tr>
                                    <th>No.</th>
                                    <th>Msisdn</th>
                                    <th>Total coin</th>
                                    <th>Month</th>
                                    <th>Package</th>
                                    <th>Last Update</th>
                                </tr>
                            </thead>
                            <tbody id="gridbody1">
                                @if (Model != null && Model.rankingCoin != null && Model.rankingCoin.Count > 0)
                                {
                                    for (int i = 0; i < Model.rankingCoin.Count; i++)
                                    {
                                        var his = Model.rankingCoin[i];
                                <tr>
                                    <td class="text-right">@(his.rank)</td>
                                    <td class="text-center">@his.msisdn</td>
                                    <td class="text-center">@his.total_coin</td>
                                    <td class="text-right">@his.start_time.Value.ToString("MM/yyyy")</td>
                                    <td class="text-right">@his.product_name</td>
                                    <td class="text-right">@his.last_update.Value.ToString("dd/MM/yyyy HH:mm:ss")</td>
                                </tr>
                                    }
                                }
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="hidden">
    <div class="row">
        <div class="col-lg-12 mb-1">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <span class="fa fa-calendar-o"></span>
                    </span>
                </div>
                <input id="picker_from" class="form-control datepicker" type="date">
            </div>
        </div>
        <div class="col-lg-12">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <span class="fa fa-calendar-o"></span>
                    </span>
                </div>
                <input id="picker_to" class="form-control datepicker" type="date">
            </div>
        </div>
    </div>
</div>
<!-- END: Content-->
@section Scripts {


    <script src="~/admin-assets/js/scripts/tables/datatables/datatable-styling.min.js"></script>
    <script src="~/admin-assets/js/scripts/pickers/dateTime/bootstrap-datetime.min.js"></script>
    <script src="~/admin-assets/js/scripts/pickers/dateTime/pick-a-datetime.min.js"></script>

    <script>

        var opts = {
            lines: 8, // The number of lines to draw
            length: 5, // The length of each line
            width: 3, // The line thickness
            radius: 5, // The radius of the inner circle
            scale: 1, // Scales overall size of the spinner
            corners: 1, // Corner roundness (0..1)
            color: '#ffffff', // CSS color or array of colors
            fadeColor: 'transparent', // CSS color or array of colors
            speed: 1, // Rounds per second
            rotate: 0, // The rotation offset
            animation: 'spinner-line-fade-quick', // The CSS animation name for the lines
            direction: 1, // 1: clockwise, -1: counterclockwise
            zIndex: 2e9, // The z-index (defaults to 2000000000)
            className: 'spinner', // The CSS class to assign to the spinner
            //top: '50%', // Top position relative to parent
            //left: '50%', // Left position relative to parent
            shadow: '0 0 1px transparent', // Box-shadow for the lines
            //position: 'absolute' // Element positioning
        };

        var spinner = new Spinner(opts);

        function startSpinner(obj) {
            var target = document.getElementById(obj);
            $("#" + obj).prop("disabled", true);
            spinner.spin(target);
        }


        function stopSpinner(obj) {
            $("#" + obj).prop("disabled", false);
            if (spinner != undefined) {
                spinner.stop();
            }
        }

        //$( document ).ready(function() {
        //    $("#timerange").datetimepicker({
        //        format: "d/MM/YYYY hh:mm a - d/MM/YYYY hh:mm a"
        //    })
        //});
        var tableDetail;
        function resetTableDetail() {
            tableDetail = $("#grid_detail").DataTable({
                orderCellsTop: true,
                fixedHeader: true
            });
        }

        function clearTable(table) {
            if (table != null && table != undefined) {
                table
                    .clear()
                    .destroy();
            }
        }

        resetTableDetail();


        function SearchHistory() {
            var msisdn = $("#msisdn").val();
            var fromDate = $("#fromDate").val();
            startSpinner('btnSearch');
            clearTable(tableDetail);

            $.ajax({
                url: subDomain + "/LuckySpin/GetRanking",
                data: {
                    __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val(),
                    month: fromDate,
                    msisdn: msisdn
                },
                type: "POST",
                success: function (data) {
                    stopSpinner('btnSearch');
                    console.log(data);
                    if (data.error != "0") {
                        console.log(data.content);
                        swal("Warning", data.content, "warning");
                    } else {
                        updateGridRegInfo("gridbody1", data.model.rankingCoin);
                        resetTableDetail();
                    }
                },
                error: function (data) {
                    stopSpinner('btnSearch');
                    console.log(data);
                    resetTableDetail();
                }
            })
        }

        function updateGridRegInfo(gridbody, val) {
            $("#" + gridbody).html("");
            console.log(val);
            var html = "";
            if (val != undefined) {
                for (var i = 0; i < val.length; i++) {
                    var news = val[i];
                    html += "<tr>";
                    html += '<td class="text-right">' + news.rank + '</td>';
                    html += "<td class='text-left'> " + news.msisdn + "</td> ";
                    html += "<td class='text-right'> " + news.total_coin + "</td> ";
                    html += "<td class='text-center'> " + moment(news.start_time).format("MM/YYYY") + "</td> ";
                    html += "<td class='text-right'> " + news.product_name + "</td> ";
                    html += "<td class='text-center'> " + moment(news.last_update).format("DD/MM/YYYY HH:mm:ss") + "</td> ";
                    html += "</tr>";
                }
            }
            $("#" + gridbody).html(html);
        }


        function exportExcel() {
            console.log("Export data");
            startSpinner('btnExportExcel');
            var msisdn = $("#msisdn").val();
            var fromDate = $("#fromDate").val();

            $.ajax({
                url: subDomain + "/LuckySpin/RankingExport",
                data: {
                    __RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val(),
                    month: fromDate,
                    msisdn: msisdn
                },
                type: "POST",
                xhr: function () {
                    var xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 2) {
                            if (xhr.status == 200) {
                                xhr.responseType = "blob";
                                console.log("blob");
                            } else {
                                xhr.responseType = "text";
                                console.log("text");
                            }
                        }
                    };
                    return xhr;
                },
                success: function (data, status, xhr) {
                    stopSpinner('btnExportExcel');
                    let filename = "";
                    let disposition = xhr.getResponseHeader('Content-Disposition');
                    if (disposition && disposition.indexOf('attachment') !== -1) {
                        let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                        let matches = filenameRegex.exec(disposition);
                        if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
                    }
                    let a = document.createElement('a');
                    let url = window.URL.createObjectURL(data);
                    a.href = url;
                    a.download = filename.replace('UTF-8', '');;
                    document.body.append(a);
                    a.click();
                    a.remove();
                    window.URL.revokeObjectURL(url);
                    $("#overlay").fadeOut(300);
                },
                error: function (data) {
                    stopSpinner('btnExportExcel');
                    console.log(data);
                }
            })
        }


        $(document).ready(function () {
            $("#fromDate").datetimepicker({
                format: "MM/YYYY",
                defaultDate: moment().startOf('month')
            });
        });
    </script>
}