Built files from Bizgaze WebServer
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

dashboard.component.js 4.4KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. var Unibase;
  2. (function (Unibase) {
  3. let Themes;
  4. (function (Themes) {
  5. let Layouts;
  6. (function (Layouts) {
  7. let Components;
  8. (function (Components) {
  9. class DashboardLayout extends Unibase.Platform.Core.BaseComponent {
  10. init(containerid, dashboardid) {
  11. var jsfiles = ["libs/jquery/ui/jquery-ui.min.js",
  12. "libs/gridstack/gridstack.jQueryUI.min.js"];
  13. this.fileCacheHelper.loadJsFiles(jsfiles, function () {
  14. DashboardLayout.Instance().render(containerid);
  15. });
  16. }
  17. render(containerid) {
  18. let html = `<div id="dashboard-grid-container" class="grid-stack1 w-100"></div>`;
  19. $("#" + containerid).html(html);
  20. $("#dashboard-grid-container").css("min-height", $(window).height() - 140);
  21. }
  22. static Instance() {
  23. if (this.instance === undefined || this.instance === null)
  24. this.instance = new DashboardLayout();
  25. return this.instance;
  26. }
  27. loadSampleData() {
  28. var html = `<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2">
  29. <div class="grid-stack-item-content card-body bg-white">my first widget1</div>
  30. </div>
  31. <div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4">
  32. <div class="grid-stack-item-content card-body bg-white">my first widget 2</div>
  33. </div>
  34. <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">
  35. <div class="grid-stack-item-content card-body bg-white">my first widget 3</div>
  36. </div>
  37. <div class="grid-stack-item" data-gs-x="10" data-gs-y="0" data-gs-width="2" data-gs-height="2">
  38. <div class="grid-stack-item-content card-body bg-white">my first widget 4</div>
  39. </div>
  40. <div class="grid-stack-item" data-gs-x="0" data-gs-y="2" data-gs-width="2" data-gs-height="2">
  41. <div class="grid-stack-item-content card-body bg-white">my first widget</div>
  42. </div>
  43. <div class="grid-stack-item" data-gs-x="2" data-gs-y="2" data-gs-width="2" data-gs-height="4">
  44. <div class="grid-stack-item-content card-body bg-white">my first widget 5</div>
  45. </div>
  46. <div class="grid-stack-item" data-gs-x="0" data-gs-y="4" data-gs-width="2" data-gs-height="2">
  47. <div class="grid-stack-item-content card-body bg-white">my first widget 6</div>
  48. </div>
  49. <div class="grid-stack-item" data-gs-x="4" data-gs-y="4" data-gs-width="4" data-gs-height="2">
  50. <div class="grid-stack-item-content card-body bg-white">my first widget 7</div>
  51. </div>
  52. <div class="grid-stack-item" data-gs-x="8" data-gs-y="2" data-gs-width="4" data-gs-height="2">
  53. <div class="grid-stack-item-content card-body bg-white">my first widget 8</div>
  54. </div>
  55. <div class="grid-stack-item" data-gs-x="8" data-gs-y="4" data-gs-width="2" data-gs-height="2">
  56. <div class="grid-stack-item-content card-body bg-white">my first widget 9</div>
  57. </div>
  58. <div class="grid-stack-item" data-gs-x="10" data-gs-y="4" data-gs-width="2" data-gs-height="2">
  59. <div class="grid-stack-item-content card-body bg-white">my first widget 10</div>
  60. </div>`;
  61. $("#dashboard-grid-container").html(html);
  62. }
  63. }
  64. Components.DashboardLayout = DashboardLayout;
  65. })(Components = Layouts.Components || (Layouts.Components = {}));
  66. })(Layouts = Themes.Layouts || (Themes.Layouts = {}));
  67. })(Themes = Unibase.Themes || (Unibase.Themes = {}));
  68. })(Unibase || (Unibase = {}));