var Unibase;
(function (Unibase) {
    let Themes;
    (function (Themes) {
        let Layouts;
        (function (Layouts) {
            let Components;
            (function (Components) {
                class DashboardLayout extends Unibase.Platform.Core.BaseComponent {
                    init(containerid, dashboardid) {
                        var jsfiles = ["libs/jquery/ui/jquery-ui.min.js",
                            "libs/gridstack/gridstack.jQueryUI.min.js"];
                        this.fileCacheHelper.loadJsFiles(jsfiles, function () {
                            DashboardLayout.Instance().render(containerid);
                        });
                    }
                    render(containerid) {
                        let html = `<div id="dashboard-grid-container" class="grid-stack1 w-100"></div>`;
                        $("#" + containerid).html(html);
                        $("#dashboard-grid-container").css("min-height", $(window).height() - 140);
                    }
                    static Instance() {
                        if (this.instance === undefined || this.instance === null)
                            this.instance = new DashboardLayout();
                        return this.instance;
                    }
                    loadSampleData() {
                        var html = `<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2">
                        <div class="grid-stack-item-content card-body bg-white">my first widget1</div>
                        </div>
                        <div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4">
                        <div class="grid-stack-item-content card-body bg-white">my first widget 2</div>
                        </div>
                        <div class="grid-stack-item"data-gs-x="8" data-gs-y="0" data-gs-width="2" data-gs-height="2" data-gs-min-width="2">
                        <div class="grid-stack-item-content card-body bg-white">my first widget 3</div>
                        </div>
                        <div class="grid-stack-item"  data-gs-x="10" data-gs-y="0" data-gs-width="2" data-gs-height="2">
                        <div class="grid-stack-item-content card-body bg-white">my first widget 4</div>
                        </div>
                        <div class="grid-stack-item"  data-gs-x="0" data-gs-y="2" data-gs-width="2" data-gs-height="2">
                        <div class="grid-stack-item-content card-body bg-white">my first widget</div>
                        </div>
                        <div class="grid-stack-item"   data-gs-x="2" data-gs-y="2" data-gs-width="2" data-gs-height="4">
                        <div class="grid-stack-item-content card-body bg-white">my first widget 5</div>
                        </div>
                        <div class="grid-stack-item"  data-gs-x="0" data-gs-y="4" data-gs-width="2" data-gs-height="2">
                        <div class="grid-stack-item-content card-body bg-white">my first widget 6</div>
                        </div>
                        <div class="grid-stack-item"  data-gs-x="4" data-gs-y="4" data-gs-width="4" data-gs-height="2">
                        <div class="grid-stack-item-content card-body bg-white">my first widget 7</div>
                        </div>
                        <div class="grid-stack-item"  data-gs-x="8" data-gs-y="2" data-gs-width="4" data-gs-height="2">
                        <div class="grid-stack-item-content card-body bg-white">my first widget 8</div>
                        </div>
                        <div class="grid-stack-item"   data-gs-x="8" data-gs-y="4" data-gs-width="2" data-gs-height="2">
                        <div class="grid-stack-item-content card-body bg-white">my first widget 9</div>
                        </div>
                        <div class="grid-stack-item"  data-gs-x="10" data-gs-y="4" data-gs-width="2" data-gs-height="2">
                        <div class="grid-stack-item-content card-body bg-white">my first widget 10</div>
                        </div>`;
                        $("#dashboard-grid-container").html(html);
                    }
                }
                Components.DashboardLayout = DashboardLayout;
            })(Components = Layouts.Components || (Layouts.Components = {}));
        })(Layouts = Themes.Layouts || (Themes.Layouts = {}));
    })(Themes = Unibase.Themes || (Unibase.Themes = {}));
})(Unibase || (Unibase = {}));