Mr.Combet Webshell 🔥

View File Name : DashboardBIReport.cshtml


@{
    ViewBag.Title = "Dashboard BI Report";
    Layout = "~/Views/Shared/_Layout.cshtml";
}



<div class="wrapper wrapper-content animated fadeInRight" style="padding:0px 0px 0px">

    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-md-8">
            <ol class="breadcrumb">
                <li class="active">
                    <strong>Beneficiary BI Analysis</strong>
                </li>
            </ol>

        </div>
    </div>
    <br />
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox-content" style="margin-bottom:2%">
                <button type="button" class="btn btn-primary pull-right" onclick="tableToExcel('pvtTable','PivotDownload')">
                    <i class="fa fa-file-excel-o" aria-hidden="true"></i>&nbsp;&nbsp;Download Data
                </button>
                <br />
                <br />
                <div class="form">
                    <div class="row">
                        <input type="hidden" id="FromDate" name="FromDate" />
                        <input type="hidden" id="ToDate" name="ToDate" />
                        <input type="hidden" id="FromDateNepali" name="FromDateNepali" />
                        <input type="hidden" id="ToDateNepali" name="ToDateNepali" />
                        <div class="form-group col-md-2">
                            <label><strong>Province</strong></label>
                            <select type="text" class="form-control required" name="ProvinceId" id="ProvinceId" data-api="/province/select/threeStates"></select>
                        </div>

                        <div class="form-group col-md-2">
                            <label><strong>District</strong></label>
                            <select type="text" class="form-control required" name="DistrictId" id="DistrictId" data-api="/districts/select" disabled></select>

                        </div>

                        <div class="form-group col-md-2">
                            <label><strong>Municipality</strong></label>
                            <select type="text" class="form-control required" id="MunicipalityId" name="MunicipalityId" data-api="/municipality/select" disabled></select>

                        </div>


                        <div class="form-group col-md-2">
                            <label><strong>Commodity</strong></label>
                            <select type="text" class="form-control required" id="CommodityId" name="CommodityId" data-api="/commodity/select/exceptother"></select>

                        </div>

                        <div class="form-group col-md-2">
                            <label><strong>From Date</strong></label>
                            <input type="text" class=" form-control required" id="FromDatePicker" />
                        </div>
                        <div class="form-group col-md-2">
                            <label><strong>To Date</strong></label>
                            <input type="text" class=" form-control required" id="ToDatePicker" />
                        </div>
                        <div class="form-group col-md-1" style="margin-top:22px">

                            <button type="button" id="filter" name="filter" class="btn btn-primary center-orientation"><i class="fa fa-search" aria-hidden="true"></i></button>

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">

            <div class="ibox float-e-margins">
                <div id="output" style="margin: 10px;"></div>
            </div>
        </div>
    </div>
</div>




<script src="~/Content/plugins/pivotTable/jquery-1.8.3.min.js"></script>
<script src="~/Content/plugins/pivotTable/jquery-ui-1.9.2.custom.min.js"></script>
<script src="~/Content/plugins/pivotTable/pivot.js"></script>
<link href="~/Content/NepaliDatePicker/nepaliDatePicker.min.css" rel="stylesheet" />
<script src="~/Scripts/NepaliDatePicker/jquery.nepaliDatePicker.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        window.initializeSelectApis2();
        window.initializeCascadeLocation2();
        initializeDatePicker();
        loadBIReportGroupAndAgeWise(0, 0, 0, 0);
    })

    function initializeDatePicker() {
        $("#FromDatePicker").nepaliDatePicker({
            dateFormat: "%y-%M-%d",
            closeOnDateSelect: true
        });

        $("#FromDatePicker").on("dateSelect", function (event) {
            var datePickerData = event.datePickerData;
            $("#FromDate").val(datePickerData.adDate.toLocaleDateString());
            $("#FromDateNepali").val(datePickerData.bsYear + "-" + datePickerData.bsMonth + "-" + datePickerData.bsDate);
        })

        $("#ToDatePicker").nepaliDatePicker({
            dateFormat: "%y-%M-%d",
            closeOnDateSelect: true
        });

        $("#ToDatePicker").on("dateSelect", function (event) {
            var datePickerData = event.datePickerData;
            $("#ToDate").val(datePickerData.adDate.toLocaleDateString());
            $("#ToDateNepali").val(datePickerData.bsYear + "-" + datePickerData.bsMonth + "-" + datePickerData.bsDate);
        })
    }


    function loadBIReportGroupAndAgeWise(province, district, municipality, commodity) {
        debugger;
        const ajax = request();

        function request() {

            var fromDate = document.getElementById('FromDate').value;
            var toDate = document.getElementById('ToDate').value;
            debugger;
            const url = `/dashboard/bi_report/data?province=${province}&district=${district}&municipality=${municipality}&commodity=${commodity}&fromDate=${fromDate}&toDate=${toDate}`;

            return window.getAjaxRequest(url, "Get", 1);
        }


        ajax.done(function (response) {
            console.log(response);
            setToPivotTable(response);
        });

        ajax.fail(function (xhr) {
            ShowMessage("error", xhr.responseText);
        });
    }

    $('#filter').off("click").on("click", function () {
        //var fromDate = $('#FromDate').val();

        //var toDate = $('#ToDate').val();
        var provinceId = $('#ProvinceId').val();
        if (provinceId == "") {
            provinceId = 0;
        }
        else {
            provinceId = Number(provinceId);
        }
        var districtId = $('#DistrictId').val();
        if (districtId == "") {
            districtId = 0;
        }
        else {
            districtId = Number(districtId)
        }

        var municipalityId = $('#MunicipalityId').val();
        if (municipalityId == "") {
            municipalityId = 0;
        } else {
            municipalityId = Number(municipalityId);
        }
        var commodityId = $('#CommodityId').val();
        if (commodityId == "") {
            commodityId = 0;
        }
        else {
            commodityId = Number(commodityId);
        }
        loadBIReportGroupAndAgeWise(provinceId, districtId, municipalityId, commodityId);
    })

    function setToPivotTable(response) {

        $("#output").pivotUI(
            response,
            {
                rows: ["MigrantStatus", "AgeGroup"],
                cols: ["Ethnicity", "Origin", "Gender"]
            },
            {
                onRefresh: function (config) {
                    var config_copy = JSON.parse(JSON.stringify(config));
                    //delete some values which are functions
                    delete config_copy["aggregators"];
                    delete config_copy["renderers"];
                    //delete some bulky default values
                    delete config_copy["rendererOptions"];
                    delete config_copy["localeStrings"];
                    $("#output").text(JSON.stringify(config_copy, undefined, 2));
                }
            }
        );
    }


    var tableToExcel = (function () {
        var uri = 'data:application/vnd.ms-excel;base64,'
            , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><style> table, td {border:2em solid black;padding:20px !important;border-spacing: 10px}table {border-collapse:collapse}</style> <!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
            , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
            , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
        return function (table, name) {
            debugger;
            if (!table.nodeType) table = document.getElementsByClassName(table)[0]
            var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
            window.location.href = uri + base64(format(template, ctx))
        }
    })()


</script>

<style>


    @@import url('../../Content/plugins/pivotTable/pivot.css');

    #output {
        display: block;
        width: 100%;
        overflow: auto;
    }
</style>