Mr.Combet Webshell 🔥

View File Name : MrcMidBIDashboard.cshtml


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


}



    <div class="wrapper wrapper-content animated fadeInRight" style="padding:0px">
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-md-12">
                <ol class="breadcrumb">
                    <li class="active">
                        <strong>MRCMID BI Dashboard</strong>
                    </li>
                </ol>

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


        <div class="row">

            <div class="filter col-lg-12">
                <div class="ibox-content" style="margin-bottom:10px">
                 
                    <div class="col-lg-12">
                        <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>
                    </div>

                    <input type="hidden" id="FromDateNepali" name="FromDateNepali" />
                    <input type="hidden" id="FromDate" name="FromDate" />

                    <input type="hidden" id="ToDateNepali" name="ToDateNepali" />
                    <input type="hidden" id="ToDate" name="ToDate" />


                    <div class="row">
                        <div class="form-group col-md-3">
                            <label><strong>Province</strong></label>
                            <select type="text" class="form-control  " name="ProvinceId" id="ProvinceId" data-api="/province/select/threeStates">
                            </select>
                        </div>
                        <div class="form-group col-md-3">
                            <label><strong>District</strong></label>
                            <select type="text" class="form-control  disabled" name="DistrictId" id="DistrictId" data-api="/districts/select">
                            </select>
                        </div>

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

                        <div class="form-group col-md-3">
                            <label><strong>Mrc Mid Staff</strong></label>
                            <select class="form-control" name="MrcMidId" style="width: 100%" id="MrcMidId" data-api="/mrc_mid_staff/select"> </select>
                            <input type="hidden" id="HiddenMrcMidId" name="HiddenMrcMidId" />
                        </div>

                    </div>



                    <div class="row">
                        <div class="form-group col-md-3">
                            <label><strong>From Date</strong></label>
                            <input type="text" class=" form-control required" id="fromDatePicker" />
                        </div>

                        <div class="form-group col-md-3">
                            <label><strong>To Date</strong></label>
                            <input type="text" class=" form-control required" id="toDatePicker" />
                        </div>

                        <div class="form-group">

                            <button style="margin-top:20px" type="button" id="filter" name="filter" class="btn btn-primary center-orientation">&nbsp;<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>
    </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>
<script src="~/Scripts/NepaliDatePicker/jquery.nepaliDatePicker.min.js"></script>
<link href="~/Content/NepaliDatePicker/nepaliDatePicker.min.css" rel="stylesheet" />


<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        initializeDatePicker();
        window.initializeSelectApis2();
        window.initializeCascadeLocation2();
        loadBIMrcMidReport('', '', 0, 0, 0, 0);

        $('#MrcMidId').select2({

            width: 'resolve'

        });


    })

    $('#filter').off("click").on("click", function () {

        var fromDate = $('#FromDate').val();

        var toDate = $('#ToDate').val();

        var province = $('#ProvinceId').val();

        var district = $('#DistrictId').val();

        var municipality = $('#MunicipalityId').val();

        var mrcMid = $('#MrcMidId').val();



        loadBIMrcMidReport(fromDate, toDate, province, district, municipality, mrcMid);
    })

    function loadBIMrcMidReport(fromDate, toDate, provinceId, districtId, municipalityId, mrcMid) {
        WorkForce.loader.show();
        const ajax = request();

        function request() {

            //const url = '/mrc_mid/bi_report/data?fromDate=' + fromDate + "&toDate=" + toDate;
            debugger;
            const url = '/mrc_mid/bi_report/data?fromDate=' + fromDate + "&toDate=" + toDate + "&province=" + provinceId + "&district=" + districtId + "&municipality=" + municipalityId + "&mrc=" + mrcMid;

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


        ajax.done(function (response) {

            setToPivotTable(response);
            console.log(response);
            WorkForce.loader.hide();

        });

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

    function setToPivotTable(response) {

        $("#output").pivotUI(
            response,
            {
                rows: ["Province", "District"],
                cols: ["Gender"]
            }, true
        );
    }



    var tableToExcel = (function () {

        //WorkForce.loader.show();

        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))
        }

        //WorkForce.loader.hide();
    })()

    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);
        })
    }



</script>

<style>


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

    .axis_0 {
        display: none !important;
    }
</style>