Mr.Combet Webshell 🔥

View File Name : Create.cshtml

@model RER_Project.DataAccess.ViewModels.Activity.ActivityReportingViewModel
<style>
    .btn {
        border-radius: 0px;
    }

    .select2-selection .select2-selection--multiple {
        border-radius: 0px !important;
    }

    .select2-container--default.select2-container--focus .select2-selection--multiple {
        border: solid #f5f5f5 1px !important;
        outline: 0;
    }

    .s {
        height: 20px;
        overflow-y: scroll
    }
</style>
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-md-8">
        <ol class="breadcrumb">
            <li class="active">
                <strong>Create Activity/Event</strong>
            </li>
        </ol>
    </div>
</div>

<div id="pop-up-div" class="modal fade" role="dialog">
</div>

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <ul id="mytabs" class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#Activity">Event/Activity</a></li>
                        <li><a data-toggle="tab" href="#PM">Group Members</a></li>
                        <li><a data-toggle="tab" href="#PO">Other Beneficiary</a></li>
                    </ul>
                    <div class="tab-content">
                        <div id="Activity" class="tab-pane fade in active">
                            <form id="main" name="CreateForm">
                                <br />
                                <input type="hidden" id="nepaliStartDate" name="NepaliStartDate" />
                                <input type="hidden" id="startDate" name="StartDate" />
                                <input type="hidden" id="nepaliEndDate" name="NepaliEndDate" />
                                <input type="hidden" id="endDate" name="EndDate" />
                                <div class="row">
                                    @if (Model.ActivityId != null)
                                    {
                                        <div class="form-group col-md-6">
                                            <label><strong>Fiscal Year</strong></label>
                                            <select class="form-control required" name="FiscalYearId" id="FiscalYearId" data-api="/fiscal_year_unlocked/select" data-api-selected-value="@Model.FiscalYearId" disabled=""></select>
                                            <input type="hidden" name="FiscalYearId" id="FiscalYearId" value="@Model.FiscalYearId">
                                        </div>

                                        <div class="form-group col-md-6">
                                            <label><strong>Event Name</strong></label>
                                            <select class="form-control required" name="ActivityId" id="ActivityId" data-api="/activity/select" data-api-selected-value="@Model.ActivityId" disabled=""></select>
                                            <input type="hidden" name="ActivityId" id="ActivityId" value="@Model.ActivityId" />
                                        </div>
                                    }
                                    else
                                    {
                                        <div class="form-group col-md-6">
                                            <label><strong>Fiscal Year</strong></label>
                                            <select class="form-control required" name="FiscalYearId" id="FiscalYearId" data-api="/fiscal_year_unlocked/select"></select>
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label><strong>Event Name</strong></label>
                                            <select class="form-control required" name="ActivityId" id="ActivityId" data-api="/activity/select"></select>
                                        </div>
                                    }


                                </div>

                                <div class="row">
                                    <div class="form-group col-md-6">
                                        <label><strong>Start Date</strong></label>
                                        <input placeholder="Start Date" type="text" class="form-control required" id="nepaliStartDatePicker" />
                                        @*<input type="date" class="form-control required" id="StartDate" name="StartDate" />*@
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label><strong>End Date</strong></label>
                                        <input placeholder="End Date" type="text" class="form-control required" id="nepaliEndDatePicker" />
                                        @*<input type="date" class="form-control required" id="EndDate" name="EndDate" />*@
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="form-group col-md-6">
                                        <label><strong>Commodity(If applicable)</strong></label>
                                        <select class="form-control" name="CommodityId" id="CommodityId" data-api="/commodity/select"></select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label><strong>Planned Budget</strong></label>
                                        <div class="inputWithIcon">
                                            <input type="text" class="curr form-control required currencyFormatter" onchange="return isNumberKey(this,event)" placeholder="Planned Budget" maxlength="10" id="PlannedBudget" name="PlannedBudget" value="@Model.PlannedBudget" readonly>
                                            <span><strong>Rs</strong></span>
                                        </div>

                                    </div>
                                    <div class="col-md-6">
                                        <label><strong>Actual Expense</strong></label>
                                        <div class="inputWithIcon">
                                            <input type="text" class="curr form-control required currencyFormatter" onkeypress="return isNumberKey(this,event)" maxlength="10" id="ActualExpense" name="ActualExpense" placeholder="Actual Expense">
                                            <span><strong>Rs</strong></span>
                                        </div>


                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-md-6">
                                        <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-6">
                                        <label><strong>District</strong></label>
                                        <select type="text" class="form-control required" name="DistrictId" id="DistrictId" data-api="/districts/select" disabled=""></select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-md-6">
                                        <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="col-md-6">
                                        <label><strong>In cordination Of(If Any)</strong></label>
                                        <input type="text" class="form-control" name="InCoordinationOf" placeholder="In Coordination Of" />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label><strong>Facilitator</strong></label>
                                        <input type="text" class="form-control" name="Facilitator" placeholder="Facilitator" />
                                    </div>
                                    <div class="col-md-6">
                                        <label><strong>Objectives</strong></label>
                                        <textarea name="Objectives" id="Objectives" maxlength="1000" class="form-control required" placeholder="Objectives"></textarea>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label><strong>Details Of Activity</strong></label>
                                        <textarea name="DetailsOfActivity" id="DetailsOfActivity" maxlength="1000" class="form-control required" placeholder="Details Of Activity"></textarea>
                                    </div>
                                    <div class="col-md-6">
                                        <label><strong>Output</strong></label>
                                        <textarea name="Output" id="Output" maxlength="1000" class="form-control required" placeholder="Output"></textarea>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <label><strong>Issues/Challenges Identified</strong></label>
                                        <textarea name="IssuesIdentified" id="IssuesIdentified" maxlength="1000" class="form-control required" placeholder="Issues Identified"></textarea>
                                    </div>
                                    <div class="col-md-6">
                                        <label><strong>Recommendation</strong></label>
                                        <textarea name="Recommendation" id="Recommendation" maxlength="1000" class="form-control required" placeholder="Recommendation"></textarea>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label>
                                            <input type="checkbox" id="MetObjectives" name="MetObjectives"
                                                   value="@(Model.ActivityReporting.MetObjectives ? "true" : "false")"
                                                   onchange="$(this).val(this.checked)"
                                                   @(Model.ActivityReporting.MetObjectives ? "checked=checked" : "") />
                                            Did This Event Met its Objectives ?
                                        </label>
                                    </div>
                                </div>
                                <div class="row">
                                    <button type="button" id="nexttab" class="btn btn-sm btn-primary pull-right">Next</button>
                                </div>
                            </form>
                        </div>
                        <div id="PM" class="tab-pane fade">
                            <br />
                            <h4><b>Search & Add Group Members</b></h4>
                            <form id="tpm">
                                <br />
                                <div class="row">
                                    <div class="form-group col-md-3">
                                        <label><strong>Province</strong></label>
                                        <select type="text" class="form-control required clear" name="ProvinceId" id="PId" 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 required clear" name="DistrictId" id="DId" data-api="/districts/select" disabled=""></select>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label><strong>Commodity</strong></label>
                                        <select class="form-control clear" name="CommodityId" id="CId" data-api="/commodity/select" disabled=""></select>
                                    </div>
                                    <div class="form-group col-md-3">
                                        <label><strong>Group</strong></label>
                                        <select type="text" class="form-control required clear" name="GroupId" id="GId" data-api="/groups/commodity/select" disabled="" onchange="showMembers()"></select>
                                    </div>
                                </div>


                                <div class="row">
                                    <div class="form-group col-md-12">
                                        <div class="table-responsive" style="margin-top:16px;">
                                            <table class="footable table table-hover" id="tblPMember" name="tblPMember">
                                                <thead>
                                                    <tr>
                                                        <th>Group</th>
                                                        <th>Member Name </th>
                                                        <th>Age</th>
                                                        <th>Ethnicity</th>
                                                        <th>Gender</th>
                                                        <th>Contact</th>
                                                        <th>Origin</th>
                                                        <th>Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @*@foreach (var item in Model.ActivityParticipantMemberList)
                                                        {
                                                            <tr>
                                                                <td><input type="hidden" name="MemberId" value="@item.MemberId" />@item.FullName</td>
                                                                <td>@item.ShgName</td>
                                                                <td><a class="btn btn-default btn-xs" onclick="deleteRow(this)" title="Delete" style="color:red"><i class="fa fa-remove"></i></a></td>
                                                            </tr>
                                                        }*@
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <button type="button" id="previous" class="btn btn-sm btn-primary">Previous</button>
                                    <button type="button" id="last" class="btn btn-sm btn-primary">Next</button>
                                </div>
                            </form>

                        </div>
                        <div id="PO" class="tab-pane fade">
                            <br />
                            <h4><b>Add Other Beneficiary</b></h4>
                            <form id="tpo">
                                <br />
                                <div class="row">
                                    <div class="form-group col-md-2">
                                        <label><strong>Member Name</strong></label>
                                        <input type="text" class="form-control clear" name="MemberName" placeholder="Member Name" />
                                    </div>
                                    <div class="form-group col-md-2">
                                        <label><strong>Ethnicity</strong></label>
                                        <select type="text" class="form-control required clear" name="EthnicityId" id="EthnicityId" data-api="/ethnicity/select"></select>
                                    </div>
                                    <div class="form-group col-md-2">
                                        <label><strong>Gender</strong></label>
                                        <select type="text" class="form-control required clear" name="Gender" id="Gender" data-api="/genders/select"></select>
                                    </div>
                                    <div class="form-group col-md-2">
                                        <label><strong>Origin</strong></label>
                                        <select type="text" class="form-control required clear" name="Origin" id="Origin" data-api="/origin/select"></select>
                                    </div>
                                    <div class="form-group col-md-2">
                                        <label><strong>Age</strong></label>
                                        <input type="number" class="form-control required clear" id="Age" name="Age" min="0" />
                                    </div>
                                    <div class="form-group col-md-2">
                                        <label><strong>Contact</strong></label>
                                        <input type="text" class="form-control required clear" id="Contact" name="Contact" maxlength="10" />
                                    </div>
                                    <div class="form-group col-md-2">
                                        <label class="align-label-btm">&nbsp;&nbsp;</label>
                                        <a class="btn btn-sm btn-primary" onclick="addPOtherMember()" title="Add">Add</a>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col-md-12">
                                        <div class="table-responsive" style="margin-top:16px;">
                                            <table class="footable table table-hover" id="tblPOther">
                                                <thead>
                                                    <tr>
                                                        <th>Member Name</th>
                                                        <th>Ethnicity</th>
                                                        <th>Gender</th>
                                                        <th>Age</th>
                                                        <th>Contact</th>
                                                        <th>Origin</th>
                                                        <th>Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <div class="row">
                                <div class="pull-right">
                                    <button type="button" id="previouslast" class="btn btn-sm btn-primary">Previous</button>
                                    <a class="btn btn-primary btn-sm" id="SubmitButton">Save</a>
                                    <a href="/workplan/activities/leveltwo" class="btn btn-default btn-sm">Back</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/NepaliDatePicker/jquery.nepaliDatePicker.min.js"></script>
<link href="~/Content/NepaliDatePicker/nepaliDatePicker.min.css" rel="stylesheet" />
<script type="text/javascript">

    function showMembers() {
        debugger;
        var group = $('#GId option:selected').val();
        AjaxForm.popup("/group/member/memberList?groupId=" + group);
    }
    $(document).ready(function () {
        debugger;
        window.initializeSelectApis();
        window.initializeCascadeLocation();
        window.initializeCasecadeMembers();
        var todayDate = new Date();
        var todayNepaliDate = calendarFunctions.getBsDateByAdDate(todayDate.getFullYear(), todayDate.getMonth() + 1, todayDate.getDate());
        var formatedTodayNepaliDate = calendarFunctions.bsDateFormat("%y-%M-%d", todayNepaliDate.bsYear, todayNepaliDate.bsMonth, todayNepaliDate.bsDate);
        $("#nepaliStartDatePicker").nepaliDatePicker({
            dateFormat: "%y-%M-%d",

            closeOnDateSelect: true,
            //maxDate: formatedTodayNepaliDate
        });

        $("#nepaliStartDatePicker").on("dateSelect", function (event) {
            var datePickerData = event.datePickerData;

            $("#startDate").val(datePickerData.adDate.toLocaleDateString());

            $("#nepaliStartDate").val(datePickerData.bsYear + "-" + datePickerData.bsMonth + "-" + datePickerData.bsDate);

        });

        $("#nepaliEndDatePicker").nepaliDatePicker({
            dateFormat: "%y-%M-%d",

            closeOnDateSelect: true,
            //maxDate: formatedTodayNepaliDate
        });

        $("#nepaliEndDatePicker").on("dateSelect", function (event) {
            var datePickerData = event.datePickerData;

            $("#endDate").val(datePickerData.adDate.toLocaleDateString());

            $("#nepaliEndDate").val(datePickerData.bsYear + "-" + datePickerData.bsMonth + "-" + datePickerData.bsDate);

        });
        $('#nexttab').click(function (e) {
            e.preventDefault();
            $('#mytabs a[href="#PM"]').tab('show');
        });
        $('#previous').click(function (e) {
            e.preventDefault();
            $('#mytabs a[href="#Activity"]').tab('show');
        });
        $('#last').click(function (e) {
            e.preventDefault();
            $('#mytabs a[href="#PO"]').tab('show');
        });
        $('#previouslast').click(function (e) {
            e.preventDefault();
            $('#mytabs a[href="#PM"]').tab('show');
        });
    });

    const id = $("#ActivityReportingId").val();
    function addPMember(l) {
        const form = $("#tpm")
        var table = $("#tblPMember tbody");
        var b = l;
        $.validator.unobtrusive.parse(form);

        for (var i = 0; i < b.length; i++) {
            if (b[i].value !== "") {

                var sp = b[i];
                var row = "<tr>";
                row += "<td>" + sp[0] + "</td>";
                row += "<td>" + sp[1] + "</td>";
                row += "<td>" + sp[2] + "</td>";
                row += "<td>" + sp[3] + "</td>";
                row += "<td>" + sp[4] + "</td>";
                row += "<td>" + sp[5] + "</td>";
                row += "<td>" + sp[6] + "</td>";
                row += "<td><a class='btn btn-default btn-xs' onclick='deleteRow(this)' title='Delete'><i class='fa fa-remove' style='color: red;'></i></a></td>"
                table.append(row);
            }
        }
        clearAll();
    };
    function addPOtherMember() {

        const ethnicityId = $("#EthnicityId option:selected");
        const gender = $("#Gender option:selected");
        const form = $("#tpo")
        var table = $("#tblPOther tbody");
        $.validator.unobtrusive.parse(form);


        const model = window.serializeForm(form);
        var row = "<tr>";
        row += "<td>" + model.MemberName + "</td>";
        row += "<td>" + ethnicityId.text() + "<input type=hidden name='EthnicityId' value=" + ethnicityId.val() + "></td>";
        row += "<td>" + gender.text() + "<input type=hidden name='Gender' value=" + gender.text() + "></td>";
        row += "<td>" + model.Age + "</td>";
        row += "<td>" + model.Contact + "</td>";
        row += "<td>" + model.Origin + "</td>";
        row += "<td><a class='btn btn-default btn-xs' onclick='deleteRow(this)' title='Delete'><i class='fa fa-remove' style='color: red;'></i></a></td>"
        table.append(row);
        clearAll();
    };

    function deleteRow(e) {
        $(e).closest("tr").remove();
    };

    function clearAll() {
        $(".clear").val('');
    };

    function getActivityParticipantList() {
        var participantList = [];
        debugger
        $("#tblPMember tbody tr").each(function () {
            const groupId = $(this).find("td:eq(0)").find("input[type='hidden']").val();
            const memberId = $(this).find("td:eq(1)").find("input[type='hidden']").val();
            const ethnicityId = $(this).find("td:eq(3)").find("input[type='hidden']").val();
            const gender = $(this).find("td:eq(4)").html();
            const contact = $(this).find("td:eq(5)").html();
            const origin = $(this).find("td:eq(6)").html();
            participantList.push({
                MemberId: memberId,
                GroupId: groupId,
                EthnicityId: ethnicityId,
                Gender: gender,
                Origin: origin,
                Contact: contact,
                ActivityReportingId: id
            });
        })
        $("#tblPOther tbody tr").each(function () {
            const memberName = $(this).find("td:eq(0)").text();
            const ethnicity = $(this).find("td:eq(1)").find("input[type='hidden']").val();
            const gender = $(this).find("td:eq(2)").find("input[type='hidden']").val();
            const age = $(this).find("td:eq(3)").text();
            const contact = $(this).find("td:eq(4)").text();
            const origin = $(this).find("td:eq(5)").text();
            participantList.push({
                ActivityReportingId: id,
                MemberName: memberName,
                Contact: contact,
                Age: age,
                Gender: gender,
                EthnicityId: ethnicity,
                Origin: origin
            });
        })

        return participantList;
    };



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

        function request(model) {
            const url = "/activities/reporting/create";
            const data = JSON.stringify(model);
            return window.getAjaxRequest(url, "POST", data);
        }


        const form = $("form[name=CreateForm]");

        $.validator.unobtrusive.parse(form);

        if (!(form).valid()) {
            return false;
        }

        if (!window.confirmAction()) {
            return;
        }

        $('#PlannedBudget').val(removeCommaFromString($('#PlannedBudget').val()))
        $('#ActualExpense').val(removeCommaFromString($('#ActualExpense').val()))

        let a = window.serializeForm(form);
        debugger;
        WorkForce.loader.show();
        const activityId = $("#ActivityReportingId").val();


        function getModel() {
            return ({
                ActivityReporting: a,
                ActivityParticipantList: getActivityParticipantList()
            });
        }

        const model = getModel();
        //const model = window.serializeForm(form);

        const ajax = request(model);

        ajax.done(function (response) {
            WorkForce.loader.hide();
            showNotification("success");

            window.location = "/activityreporting/reporting";
        });

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

    function isNumberKey(element, evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode
        if (charCode > 31 && (charCode < 48 || charCode > 57) && !(charCode == 46 || charCode == 8))
            return false;
        else {
            var len = $(element).val().length;
            var index = $(element).val().indexOf('.');
            if (index > 0 && charCode == 46) {
                return false;
            }
            if (index > 0) {
                var CharAfterdot = (len + 1) - index;
                if (CharAfterdot > 3) {
                    return false;
                }
            }

        }
        return true;
    }


    function getNumberWithComma(value) {
        value = value || 0
        return Number(parseFloat(value).toFixed(2)).toLocaleString("en-IN", { minimumFractionDigits: 0 })
    }

    function removeCommaFromString(value) {
        var result = parseFloat(value.replace(/,/g, ''));
        if (isNaN(result)) {
            return 0;
        }
        else {
            return result;
        }
    }


</script>