WebBuild/wwwroot/apps/tm/targets/components/employeebreakupwisetarget.js

var Bizgaze;
(function (Bizgaze) {
    let Apps;
    (function (Apps) {
        let TM;
        (function (TM) {
            let Targets;
            (function (Targets) {
                let Components;
                (function (Components) {
                    class EmployeeBreakupWiseTarget extends Unibase.Platform.Core.BaseComponent {
                        jsFiles() {
                            return [];
                        }
                        cssFiles() {
                            return [];
                        }
                        html(id, containerid) {
                            var html = ``;
                            return html;
                        }
                        load(formId, containerid, callback) {
                            var instance = this;
                            $('.modal-body').css('overflow', '');
                            $("#btn_CloseTargetemp").click(function () {
                                $('#' + containerid).modal('hide');
                                $('#' + containerid).remove();
                            });
                        }
                        loadForm(FormId, Pk_Value, AppConfigurationId, Callback, ElementId) {
                            var instance = this;
                            var InstalledAppId = Unibase.Themes.Providers.DetailHelper.installedAppId;
                        }
                        init(containerid) {
                            var instance = this;
                            var ContactId = Unibase.Themes.Providers.DetailHelper.recordId;
                            this.fileCacheHelper.loadJsFile('apps/tm/targets/managers/targetmanager.js', function () {
                                Bizgaze.Apps.TM.Targets.Managers.TargetManager.Instance().getContactWiseTargetDetails(ContactId).then(function (response) {
                                    instance.employeebrack(containerid, response);
                                });
                            });
                        }
                        employeebrack(containerid, response) {
                            let html = '';
                            html = `<div class="row employee-target-row"></div>`;
                            $(`#${containerid}`).append(html);
                            if (response.result !== '') {
                                let data = response.result;
                                for (let i = 0; i < data.length; i++) {
                                    var breakuplistArr = data[i].breakuplist.split(',');
                                    var progressDeg;
                                    var progressNo = data[i].AchievePercentage;
                                    var from_date = moment(response.result[i].FromDate).format("DD MMMM YYYY");
                                    var to_date = moment(response.result[i].ToDate).format("DD MMMM YYYY");
                                    progressDeg = 270;
                                    if (progressNo < 50) {
                                        progressDeg = progressDeg - (progressNo * 3.6);
                                    }
                                    var progressAngle = 90;
                                    if (progressNo == 50) {
                                        progressAngle = -progressAngle;
                                    }
                                    else if (progressNo > 50) {
                                        progressAngle = -(progressAngle - (3.6 * (progressNo - 50)));
                                    }
                                    let html = `<div class="col-md-6"><div class="card font-weight-500"> <ul class="d-flex flex-row align-items-center w-100"> <li> <div class="progress-circle-container"> <div class="progress-circle progress-10 m-3" style="background-image: linear-gradient(` + progressAngle + `deg, #66b8ff 50%, transparent 50%, transparent), linear-gradient(` + progressDeg + `deg, #66b8ff 50%, #ebebeb 50%, #ebebeb)"><span>` + data[i].AchievePercentage.toFixed(0) + ` </span></div></div></li><li class="d-flex flex-column ml-2"> <h5>` + data[i].TargetDefinitionname + `</h5> <p>` + data[i].TagName + `</p><p>From :<span class="text-primary pl-1"> ` + from_date + ` </span> To :<span class="text-primary pl-1"> ` + to_date + ` </span></p></li></ul> <ul class="d-flex ml-2"> <li class="mt-2 mx-2 w-5"> <a href="javascript:void(0);" class="left text-dark left-arrow"><i class="rounded-50 px-2 p-1 border border-light-20 fa fa-angle-left"></i></a> </li><li class="my-auto pr-1 contentScrolling w-90" style="overflow-x: hidden;"> <ul class="d-flex flex-row mx-2 timeline_ul timeline_ul-` + i + `"></ul> </li><li class="mt-2 mx-2 mr-3 text-right w-5"> <a href="javascript:void(0);" class="right text-dark right-arrow"><i class="rounded-50 px-2 p-1 border border-light-20 fa fa-angle-right"></i></a> </li></ul> <ul class="d-flex ml-3 mr-1 py-2 mt-1 justify-content-between font-weight-600"> <li class="d-flex flex-row"> <span><i class="font-25 text-primary fa fa-bullseye" aria-hidden="true"></i></span> <p class="mx-3 text-dark"> ` + data[i].TotalT + ` <span class="text-light-60 font-weight-500">Target</span> </p></li><li class="d-flex flex-row"> <span><i class="font-18 text-danger fa fa-hourglass-half" aria-hidden="true"></i></span> <p class="mx-3 text-dark"> ` + data[i].PendingTarget + ` <span class="text-light-60 font-weight-500">Pending</span> </p></li><li class="d-flex flex-row"> <span><i class="font-25 text-success fa fa-check-circle-o" aria-hidden="true"></i></span> <p class="mx-3 text-dark"> ` + data[i].TotalA + ` <span class="text-light-60 font-weight-500">Acheived</span> </p></li></ul></div></div>`;
                                    $('.employee-target-row').append(html);
                                    for (let j = 0; j < data[i].AchieveStatus.length; j++) {
                                        var progressDeg1;
                                        var progressNo1 = data[i].AchieveStatus[j];
                                        progressDeg1 = 270;
                                        if (progressNo1 < 50) {
                                            progressDeg1 = progressDeg1 - (progressNo1 * 3.6);
                                        }
                                        var progressAngle1 = 90;
                                        if (progressNo1 == 50) {
                                            progressAngle1 = -progressAngle1;
                                        }
                                        else if (progressNo1 > 50) {
                                            progressAngle1 = -(progressAngle1 - (3.6 * (progressNo1 - 50)));
                                        }
                                        let html_li = `<li class="d-flex flex-column"> <div class="d-flex flex-row"> <hr class="bg-success" width="85px" style="height: 5px;"> <div class="my-auto progress-circle-timeline progress-10" style="background-image: linear-gradient(` + progressAngle1 + `deg, #66b8ff 50%, transparent 50%, transparent), linear-gradient(` + progressDeg1 + `deg, #66b8ff 50%, #ebebeb 50%, #ebebeb);"><span>` + data[i].AchieveStatus[j].toFixed(0) + `%</span></div></div><span class="text-right px-1 ">` + breakuplistArr[j] + `</span> </li>`;
                                        $(`.timeline_ul-${i}`).append(html_li);
                                    }
                                }
                                function changeContentScroll(pos, x, elem) {
                                    var content = $($(elem).parent().siblings('.contentScrolling '));
                                    var currentPos = content.scrollLeft();
                                    content.scrollLeft(currentPos + pos);
                                }
                                $('.left-arrow').click(function (e) {
                                    changeContentScroll(-36, 0, this);
                                });
                                $('.right-arrow').click(function (e) {
                                    changeContentScroll(+36, 0, this);
                                });
                                return html;
                            }
                            else {
                                let message = response.message;
                                let html = '<div class="alert alert-warning text-center w-100">' + message + '</div>';
                                $('.employee-target-row').append(html);
                            }
                        }
                        static Instance() {
                            if (this._instance === undefined) {
                                this._instance = new EmployeeBreakupWiseTarget();
                            }
                            return this._instance;
                        }
                    }
                    Components.EmployeeBreakupWiseTarget = EmployeeBreakupWiseTarget;
                })(Components = Targets.Components || (Targets.Components = {}));
            })(Targets = TM.Targets || (TM.Targets = {}));
        })(TM = Apps.TM || (Apps.TM = {}));
    })(Apps = Bizgaze.Apps || (Bizgaze.Apps = {}));
})(Bizgaze || (Bizgaze = {}));