DHTMLX · serhiipylypchuk1991 · Apr 16, 2025 · Apr 23, 2025 · May 1, 2025 · May 12, 2025
diff --git a/index.html b/index.html
@@ -9,7 +9,7 @@
     <!-- Icons -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/7.0.96/css/materialdesignicons.css" media="all" rel="stylesheet" type="text/css">
 
-    <title>Project Manager</title>
+    <title>DHTMLX Suite Svelte</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/App.svelte b/src/App.svelte
@@ -1,18 +1,10 @@
 <script>
-  import MainContainer from "./MainContainer.svelte";
-  import Sidebar from "./Sidebar.svelte";
+  import MainContainer from "./MainCantainer/MainContainer.svelte";
+  import Sidebar from "./Sidebar/Sidebar.svelte";
   import "@dhx/trial-suite/codebase/suite.min.css";
 </script>
 
 <main>
   <Sidebar />
   <MainContainer />
 </main>
-
-<style>
-  main {
-    height: 100%;
-    width: 100%;
-    display: flex;
-  }
-</style>
diff --git a/src/Content/Content.svelte b/src/Content/Content.svelte
@@ -3,20 +3,7 @@
   import RightContent from "./RightPanel/RightContent.svelte";
 </script>
 
-<div class="container-wrapper">
+<div class="main_container-wrapper">
   <LeftContent />
   <RightContent />
 </div>
-
-<style>
-  .container-wrapper {
-    display: flex;
-    flex-grow: 1;
-    overflow: auto;
-    padding: 12px;
-    gap: 12px;
-  }
-  :global(.container) {
-    border: var(--dhx-border);
-  }
-</style>
diff --git a/src/Content/LeftPanel/Accardion.svelte b/src/Content/LeftPanel/Accardion.svelte
diff --git a/src/Content/LeftPanel/Calendars.svelte b/src/Content/LeftPanel/Calendars.svelte
@@ -1,45 +1,39 @@
 <script>
+  import { onMount, onDestroy } from "svelte";
   import { Calendar, Timepicker } from "@dhx/trial-suite";
-  import { onMount } from "svelte";
 
-  let weekNode, timepickerNode, yearNode;
+  let week_container, timepicker_container, year_container,
+      week, timepicker, year;
 
   onMount(() => {
-    const week = new Calendar(weekNode, {
+    week = new Calendar(week_container, {
       weekStart: "monday",
       timePicker: true,
       range: true,
-      value: [new Date(), new Date(Date.now() + 200000000)],
+      value: [new Date(), new Date(Date.now() + 200000000)]
     });
-    const timePicker = new Timepicker(timepickerNode, {
+
+    timepicker = new Timepicker(timepicker_container, {
       controls: true,
-      value: new Date(),
+      value: new Date()
     });
-    const year = new Calendar(yearNode, {
+
+    year = new Calendar(year_container, {
       timePicker: true,
       mode: "year",
-      value: new Date(),
+      value: new Date()
     });
+  });
 
-    return () => {
-      week.destructor();
-      timePicker.destructor();
-      year.destructor();
-    };
+  onDestroy(() => {
+    week.destructor();
+    timepicker.destructor();
+    year.destructor();
   });
 </script>
 
-<div class="container-wrapper">
-  <div class="container dhx_layout_calendar_cell" bind:this={weekNode} />
-  <div class="container dhx_layout_calendar_cell" bind:this={timepickerNode} />
-  <div class="container dhx_layout_calendar_cell" bind:this={yearNode} />
+<div class="calendar_container-wrapper">
+  <div class="container dhx_layout_calendar_cell" bind:this={week_container} />
+  <div class="container dhx_layout_calendar_cell" bind:this={timepicker_container} />
+  <div class="container dhx_layout_calendar_cell" bind:this={year_container} />
 </div>
-
-<style>
-  .container-wrapper {
-    display: flex;
-    height: fit-content;
-    gap: 12px;
-    justify-content: space-between;
-  }
-</style>
diff --git a/src/Content/LeftPanel/Chart.svelte b/src/Content/LeftPanel/Chart.svelte
@@ -0,0 +1,56 @@
+<script>
+  import { onMount, onDestroy } from "svelte";
+  import { Chart, Layout } from "@dhx/trial-suite";
+  import { getData } from "../../data";
+
+  let layout_container, layout, chart;
+  let { seriesData, hotelsData } = getData();
+
+  onMount(() => {
+    layout = new Layout(layout_container, {
+      type: "line",
+      rows: [
+        {
+          header: "HOTELS",
+          height: "500px",
+          padding: 40,
+          id: "chart",
+          collapsable: true
+        }
+      ]
+    });
+
+    chart = new Chart(null, {
+      data: hotelsData,
+      type: "bar",
+      scales: {
+        bottom: {
+          text: "month"
+        },
+        left: {
+          maxTicks: 10,
+          max: 100,
+          min: 0
+        }
+      },
+      // @ts-ignore
+      series: seriesData,
+      legend: {
+        series: ["A", "B", "all"],
+        halign: "right",
+        valign: "top",
+        itemPadding: 20,
+        margin: 40
+      }
+    });
+
+    layout.getCell("chart").attach(chart);
+  });
+
+  onDestroy(() => {
+    layout?.destructor();
+    chart?.destructor();
+  });
+</script>
+
+<div bind:this={layout_container} class="container"></div>
diff --git a/src/Content/LeftPanel/Grid.svelte b/src/Content/LeftPanel/Grid.svelte
@@ -1,18 +1,23 @@
 <script>
+  import { onMount, onDestroy } from "svelte";
   import { Grid, Pagination } from "@dhx/trial-suite";
-  let gNode, pNode, grid, paginator;
-  import { onMount } from "svelte";
-  import store from "../../store";
+  import { getData } from "../../data";
+
+  let grid_container, pagination_container, 
+      grid, pagination;
+  let { gridData } = getData();
 
   onMount(() => {
     const gridConfig = {
+      data: gridData,
+      autoWidth: true,
       columns: [
         {
           gravity: 2,
           id: "time",
           header: [{ text: "Time", align: "center" }],
           type: "date",
-          dateFormat: "%M %d, %H:%i",
+          dateFormat: "%M %d, %H:%i"
         },
         { id: "nights", header: [{ text: "Nights" }] },
         {
@@ -21,13 +26,13 @@
           type: "number",
           numberMask: {
             groupSeparator: " ",
-            prefix: "$",
+            prefix: "$"
           }
         },
         {
           gravity: 3,
           id: "contactPerson",
-          header: [{ text: "Contact Person" }],
+          header: [{ text: "Contact Person" }]
         },
         {
           gravity: 4,
@@ -36,7 +41,7 @@
           htmlEnable: true,
           template: (text) => {
             return `<span class="contact_email";>${text}</span>`;
-          },
+          }
         },
         {
           gravity: 2,
@@ -45,47 +50,33 @@
           type: "number",
           numberMask: {
             groupSeparator: " ",
-            prefix: "$",
+            prefix: "$"
           }
-        },
+        }
       ],
-      autoWidth: true,
       css: "grid",
       multiselection: true,
       selection: "complex",
-      editable: true,
+      editable: true
     };
+
     // @ts-ignore
-    grid = new Grid(gNode, gridConfig);
+    grid = new Grid(grid_container, gridConfig);
 
-    paginator = new Pagination(pNode, {
+    pagination = new Pagination(pagination_container, {
       pageSize: 20,
       // @ts-ignore
-      data: grid.data,
+      data: grid.data
     });
-
-    return () => {
-      grid.destructor();
-      paginator.destructor();
-    };
   });
 
-  $: grid?.data.parse($store.gridDataset);
+  onDestroy(() => {
+    grid?.destructor();
+    pagination?.destructor();
+  });
 </script>
 
-<div class="container">
-  <div bind:this={gNode} class="grid_container" />
-  <div bind:this={pNode} />
+<div class="grid_container-wrapper">
+  <div bind:this={grid_container} class="grid_container" />
+  <div bind:this={pagination_container} />
 </div>
-
-<style>
-  .container {
-    display: flex;
-    flex-direction: column;
-    border: var(--dhx-border);
-    max-width: 800px;
-  }
-  .grid_container {
-    min-height: 848px;
-  }
-</style>