WebBuild/wwwroot/platform/analytics/components/mapviewer/mapviewer.js

var Unibase;
(function (Unibase) {
    let Platform;
    (function (Platform) {
        let Analytics;
        (function (Analytics) {
            let Viewers;
            (function (Viewers) {
                class MapViewer extends Platform.Core.BaseComponent {
                    constructor() {
                        super();
                        this.reportManager = Analytics.Managers.ReportManager.Instance();
                        this.viewerManager = Analytics.Managers.ViewerManager.Instance();
                        this.ViewerSettings = new Analytics.Providers.ViewerSettings();
                    }
                    loadView(reportresponse, reportid, MapViewId, page, pageSize, containerid, ViewerSettings, callback, reportwidgetdata) {
                        var instance = this;
                        var LatIdColumnName = "", LngIdColumnName = "", Template = "", HeaderTemplate = "", DetailTemplate = "", FooterTemplate = "";
                        instance.viewerManager.getMapView(MapViewId).then(function (response) {
                            var res = response.result;
                            LatIdColumnName = res.LatColumn;
                            LngIdColumnName = res.LngColumn;
                            Template = res.TemplateText;
                            HeaderTemplate = res.HeaderTemplateText;
                            DetailTemplate = res.DetailTemplateText;
                            FooterTemplate = res.FooterTemplateText;
                            let postdata = {
                                ReportId: reportid,
                                page: page,
                                pageSize: 50,
                                IsJson: true
                            };
                            $("#Table_View_" + containerid).removeClass("hidden");
                            instance.reportManager.getReportViewerData(postdata).then(function (mapresponse) {
                                Unibase.Platform.Helpers.NavigationHelper.Instance().hideLoading();
                                var Lat_columns = [];
                                var Lng_columns = [];
                                var finalvalues = [];
                                var locations = [];
                                var contentString = [];
                                var response = JSON.parse(mapresponse.result);
                                var data = "";
                                if (response.Data)
                                    data = JSON.parse(response.Data);
                                $("#ViewerFooter_" + containerid).removeClass("hidden");
                                if (!data) {
                                    $("#Viewer_" + containerid + "").removeClass("hidden");
                                    $("#Viewer_" + containerid + "").empty().append(`<div class='alert alert-primary text-center mb-0 border-0 w-100 font-14 rounded-0'>No data available</div>`);
                                    return "";
                                }
                                data = Unibase.Platform.Analytics.Viewers.MapViewer.Instance().toCamel(data);
                                let Tmplt_html = "";
                                let DetailTmplt_html = "";
                                var templateScript = Handlebars.compile(Template);
                                for (let i = 0; i < data.length; i++) {
                                    let LatValue = data[i][LatIdColumnName.toLowerCase()];
                                    let LngValue = data[i][LngIdColumnName.toLowerCase()];
                                    let ContactId = data[i]["contactid"];
                                    if ((jQuery.inArray(LatValue, Lat_columns) == -1) && (jQuery.inArray(LngValue, Lng_columns) == -1)) {
                                        finalvalues.push({ LatValue: LatValue, LngValue: LngValue, ContactId: ContactId });
                                        Lat_columns.push(LatValue);
                                        Lng_columns.push(LngValue);
                                        if (Template != "" && Template != null) {
                                            Tmplt_html = templateScript(data[i]);
                                        }
                                        else {
                                            Tmplt_html = "<strong> LatId: " + LatValue + ", LngId: " + LngValue + "</strong>";
                                        }
                                        contentString.push(Tmplt_html);
                                        let html = `<div class="tab-content" id="pills-tabContent">
                                        <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">` + DetailTemplate + `</div> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">Close Trip  </div></div></div></div></div>`;
                                        var DetailTemplateScript = Handlebars.compile(DetailTemplate);
                                        DetailTmplt_html += DetailTemplateScript(data[i]);
                                    }
                                    else {
                                        let index = 0;
                                        for (var k = 0; k < finalvalues.length; k++) {
                                            if ((finalvalues[k].LatValue == LatValue) && (finalvalues[k].LngValue == LngValue)) {
                                                index = k;
                                            }
                                        }
                                        contentString[index] = contentString[index] + templateScript(data[i]);
                                    }
                                }
                                for (var f = 0; f < finalvalues.length; f++) {
                                    if (finalvalues[f].LatValue != 0 && finalvalues[f].LngValue != 0) {
                                        locations.push({ LatId: finalvalues[f].LatValue, LngId: finalvalues[f].LngValue, ContactId: finalvalues[f].ContactId });
                                    }
                                }
                                let MapSideHtml = `<div class="row"><div class="col-md-12">
                                <div id="map_canvas_` + containerid + `" class="gmap"></div></div>
                                <div class="col-md-5 d-none pr-10 pb-10"><div id="map-sidebar"><div class="card mb-0"><div class="card-header" style="height:10vh;" id="map_header">` + HeaderTemplate + `</div><div class="card-body" id="mapside_body" style="overflow-y:scroll; height:71vh"> <div class="tab-content" id="pills-tabContent">
                                <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">` + DetailTmplt_html + ` </div> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">Close Trip  </div></div></div><div class="card-footer" style="height:10vh;" id="footer_section">` + FooterTemplate + `</div></div></div></div>`;
                                $("#Viewer_" + containerid + "").html(MapSideHtml).addClass("pa-10");
                                $(".list-content-section" + containerid + "").removeClass("hidden");
                                $(".Templateheader").addClass("hidden");
                                $(".card-footer").addClass("hidden");
                                $(".btn-list-load-more").addClass("hidden");
                                $(".list-content-section" + containerid).find("#map_canvas").css('height', $(window).outerHeight() - $(".list-content-section" + containerid).find(".card-header").outerHeight() - 55);
                                var latd = locations[0].LatId;
                                var lgtd = locations[0].LngId;
                                var myLatlng = new google.maps.LatLng(latd, lgtd);
                                var mIcon = {
                                    path: google.maps.SymbolPath.CIRCLE,
                                    fillOpacity: 1,
                                    fillColor: "green",
                                    strokeOpacity: 1,
                                    strokeWeight: 1,
                                    strokeColor: '#333',
                                    scale: 12,
                                    scaledSize: new google.maps.Size(54, 44)
                                };
                                var mapOptions = {
                                    zoom: 5,
                                    center: myLatlng,
                                };
                                var mapElement = document.getElementById("map_canvas_" + containerid);
                                var map = new google.maps.Map(mapElement, mapOptions);
                                var marker, i;
                                var infoWindow;
                                var Lng_Ltd = [];
                                for (i = 0; i < locations.length; i++) {
                                    marker = new google.maps.Marker({
                                        position: new google.maps.LatLng(locations[i].LatId, locations[i].LngId),
                                        map: map,
                                        icon: mIcon
                                    });
                                    Lng_Ltd[locations[i].LatId + "_" + locations[i].LngId] = contentString[i];
                                    infoWindow = new google.maps.InfoWindow({
                                        content: contentString[i]
                                    });
                                    infoWindow.close();
                                    google.maps.event.addListener(marker, 'click', (function (marker, i) {
                                        var k = i;
                                        return function () {
                                            infoWindow.open(map, marker);
                                            infoWindow.setContent(Lng_Ltd[marker.getPosition().lat() + "_" + marker.getPosition().lng()]);
                                        };
                                    })(marker, i));
                                    google.maps.event.addListener(marker, 'mouseover', (function (marker, i) {
                                        var k = i;
                                        return function () {
                                            infoWindow.open(map, marker);
                                            infoWindow.setContent(Lng_Ltd[marker.getPosition().lat() + "_" + marker.getPosition().lng()]);
                                        };
                                    })(marker, i));
                                    google.maps.event.addListener(marker, 'mouseout', function (e) {
                                        infoWindow.close(map, marker);
                                    });
                                }
                                let elem;
                                elem = $("#mapside_body");
                                elem.slimscroll({ color: '#d6d9da', disableFadeOut: true, borderRadius: 0, size: '6px', enableKeyNavigation: true, opacity: .8, height: "71vh" });
                            });
                        });
                    }
                    toCamel(o) {
                        var newO, origKey, newKey, value;
                        if (o instanceof Array) {
                            return o.map(function (value) {
                                if (typeof value === "object") {
                                    value = Unibase.Platform.Analytics.Viewers.MapViewer.Instance().toCamel(value);
                                }
                                return value;
                            });
                        }
                        else {
                            newO = {};
                            for (origKey in o) {
                                if (o.hasOwnProperty(origKey)) {
                                    newKey = (origKey.charAt(0).toLowerCase() + origKey.slice(1) || origKey).toString();
                                    value = o[origKey];
                                    if (value instanceof Array || (value !== null && value.constructor === Object)) {
                                        value = Unibase.Platform.Analytics.Viewers.MapViewer.Instance().toCamel(value);
                                    }
                                    newO[newKey] = value;
                                }
                            }
                        }
                        return newO;
                    }
                    static Instance() {
                        return new Unibase.Platform.Analytics.Viewers.MapViewer();
                    }
                }
                Viewers.MapViewer = MapViewer;
            })(Viewers = Analytics.Viewers || (Analytics.Viewers = {}));
        })(Analytics = Platform.Analytics || (Platform.Analytics = {}));
    })(Platform = Unibase.Platform || (Unibase.Platform = {}));
})(Unibase || (Unibase = {}));