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

var Unibase;
(function (Unibase) {
    let Platform;
    (function (Platform) {
        let Analytics;
        (function (Analytics) {
            let Components;
            (function (Components) {
                class MapViewerSettings extends Platform.Core.BaseComponent {
                    constructor() {
                        super();
                        this.reportManager = Analytics.Managers.ReportManager.Instance();
                        this.viewerManager = Analytics.Managers.ViewerManager.Instance();
                        this.ReportId = 0;
                    }
                    jsFiles() {
                        return ["platform/analytics/components/mapviewer/mapviewer.settings.js"];
                    }
                    cssFiles() {
                        return [];
                    }
                    html(id, containerid) {
                        var html = `<div class="b-b bg-white modal-header">
                        <strong class="text-dark">Map</strong>
                    </div>
                    <div class="modal-body" id="MapViewer_modal">
                       <div id = "divMap_ErrorMessage"></div>
                        <div class="card"> <div class="card-body"><div class="row"><div class="col-sm-6">
                        <div id="div_MapName" class="floating-label-form-group">
                            <label for="mapname" id="lbl_MapName">Map Name</label>
                            <input type="text" class="form-control value-control floating-label-control" placeholder="Map Name" data-placeholder="Map Name" data-label="Map Name" id="txt_MapName">
                                </div></div>     
                        <div class="col-sm-4">
                                <div id="div_DisplayName" class="floating-label-form-group floating-label-form-group-with-value">
                                    <label for="displayname" id="lbl_DisplayName">Display Name</label>
                                    <input type="text" id="Txt_Display_Name" class="form-control value-control floating-label-control" placeholder="Display Name" data-placeholder="Display Name" data-label="Display Name">
                                </div>
                            </div>
                         <div class="col-sm-6">
                         <div id="div_Latitude" class="">
                            <label for="latitude">Latitude</label>
                            <select type="text" class="form-control value-control floating-label-control" placeholder="Latitude" data-placeholder="Latitude" data-label="Latitude" id="txt_Latitude"><option value="0" selected="">Select Latitude Column</option></select>
                        </div>
                            </div>
                            <div class="col-sm-6">
                        <div id="div_Longitude" class="">
                            <label for="longitude" id="lbl_Longitude">Longitude</label>
                            <select type="text" class="form-control value-control floating-label-control" placeholder="Longitude" data-placeholder="Longitude" data-label="Longitude" id="txt_Longitude"> <option value="0" selected="">Select Longitude Column</option></select>
                                </div></div>                            
                            </div></div></div>
                        <div class="TemplateText_Section card"> 
                            <div class="card-header"> Template Text </div> 
                            <div class="card-body">                                
                                <div id="div_TemplateText" class="">            
                                    <textarea class="" id="input_TemplateText" placeholder="Template Text" rows="3" cols="112"></textarea>                    
                                </div>
                            </div>
                         </div>
                        <div class="HeaderTemplateText_Section card"> 
                            <div class="card-header">Header Template Text </div> 
                            <div class="card-body">                                
                                <div id="div_HeaderTemplateText" class="">            
                                    <textarea class="" id="input_HeaderTemplateText" placeholder="Header Template Text" rows="3" cols="112"></textarea>                    
                                </div>
                             </div>
                        </div>
                        <div class="DetailTemplateText_Section card"> 
                            <div class="card-header">Detail Template Text </div> 
                            <div class="card-body">                                
                                <div id="div_DetailTemplateText" class="">            
                                    <textarea class="" id="input_DetailTemplateText" placeholder="Detail Template Text" rows="3" cols="112"></textarea>                    
                                </div>
                             </div>
                        </div>
                        <div class="FooterTemplateText_Section card"> 
                            <div class="card-header">Footer Template Text </div> 
                            <div class="card-body">                                
                                <div id="div_FooterTemplateText" class="">            
                                    <textarea class="" id="input_FooterTemplateText" placeholder="Footer Template Text" rows="3" cols="112"></textarea>                    
                                </div>
                             </div>
                        </div>
                    </div>
                    </div>
                    <div class="bg-white modal-footer">
                        <a class="btn btn-light btn-sm btn-center mr-auto" id="btnClose">Close</a>
                        <a class="btn btn-primary btn-center btn-sm text-white" id="btnSave">Save</a>
                    </div>`;
                        return html;
                    }
                    load(id, containerid, callback) {
                        var instance = this;
                        var reportid = Number(instance.ReportId);
                        $("#MapViewer_modal").css("height", $(window).outerHeight() - (Number($(".modal-header").outerHeight()) + Number($(".modal-footer").outerHeight())) + 'px');
                        var data = [];
                        instance.reportManager.getColumns(reportid).then(function (response) {
                            var res = response.result;
                            for (let i = 0; i < res.length; i++) {
                                data.push({ id: res[i].ReportColumnName, text: res[i].ReportColumnName });
                            }
                            $("#txt_Latitude").select2({
                                placeholder: 'Select Latitude Column',
                                data: data,
                            });
                            $("#txt_Longitude").select2({
                                placeholder: 'Select Longitude Column',
                                data: data,
                            });
                            if (id != 0) {
                                instance.getMapById(id);
                            }
                        });
                        $("#btnClose").click(function () {
                            $('#' + containerid).modal('hide');
                            $('#' + containerid).remove();
                        });
                        jQuery("#btnSave").click(function () {
                            instance.saveMap(id, reportid, containerid, null);
                        });
                    }
                    getMapById(id) {
                        var instance = this;
                        instance.viewerManager.getMapView(id).then(function (response) {
                            instance.response = response.result;
                            $("#Txt_Display_Name").val(instance.response.DisplayName ? instance.response.DisplayName.trim() : instance.response.MapName.trim());
                            $("#txt_MapName").val(instance.response.MapName.trim()).attr("readonly", 'true').css("cursor", "not-allowed");
                            $("#txt_Latitude").val(instance.response.LatColumn).trigger("change");
                            $("#txt_Longitude").val(instance.response.LngColumn).trigger("change");
                            $("#input_TemplateText").val(instance.response.TemplateText);
                            $("#input_HeaderTemplateText").val(instance.response.HeaderTemplateText);
                            $("#input_DetailTemplateText").val(instance.response.DetailTemplateText);
                            $("#input_FooterTemplateText").val(instance.response.FooterTemplateText);
                        });
                    }
                    saveMap(id, reportid, containerid, obj) {
                        var instance = this;
                        var PostData = obj;
                        if (obj == null) {
                            PostData = {
                                LatColumn: $("#txt_Latitude option:selected").text(),
                                LngColumn: $("#txt_Longitude option:selected").text(),
                                MapName: $("#txt_MapName").val(),
                                ValueColumn: $("#txt_ColumnName").val(),
                                ReportId: Number(reportid),
                                MapViewId: Number(id),
                                TemplateText: $("#input_TemplateText").val(),
                                HeaderTemplateText: $("#input_HeaderTemplateText").val(),
                                DetailTemplateText: $("#input_DetailTemplateText").val(),
                                FooterTemplateText: $("#input_FooterTemplateText").val(),
                                DisplayModeTypeId: 1,
                                ViewAll: instance.response && instance.response.ViewAll || true,
                                DisplayName: $("#Txt_Display_Name").val().toString().trim(),
                                IsFromUI: Number(id) == 0 ? true : false,
                            };
                        }
                        instance.fileCacheHelper.loadJsFile("platform/analytics/managers/reportmanager.js", function () {
                            instance.viewerManager.saveMapView(PostData).then(function (response) {
                                if (response.status == Unibase.Data.Status.Error) {
                                    MessageHelper.Instance().showError(response.message, 'divMap_ErrorMessage');
                                }
                                else {
                                    MessageHelper.Instance().showSuccess(response.message, '');
                                    $('#' + containerid).modal('hide');
                                    $('#' + containerid).remove();
                                }
                            });
                        });
                    }
                    static Instance() {
                        if (this._instance === undefined)
                            this._instance = new Unibase.Platform.Analytics.Components.MapViewerSettings();
                        return this._instance;
                    }
                }
                Components.MapViewerSettings = MapViewerSettings;
            })(Components = Analytics.Components || (Analytics.Components = {}));
        })(Analytics = Platform.Analytics || (Platform.Analytics = {}));
    })(Platform = Unibase.Platform || (Unibase.Platform = {}));
})(Unibase || (Unibase = {}));