dist/examples/main.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf8" />
    <meta name="viewport" content="width=device-width" />
    <title>GSTC main example</title>
    <style>
      body {
        font-family: Roboto, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      }
      .gantt-shedule-timeline-calendar__chart-gantt-items-row-item-content {
        padding: 0px 5px !important;
        border-radius: 14px;
      }
    </style>
    <link rel="stylesheet" href="../style.css" />
  </head>

  <body>
    <div>
      <input type="range" min="0" max="100" value="100" id="percent" />
      <input type="range" min="10" max="22" value="20" id="zoom" />
      <button id="change-something">Change something</button>
      <button onclick="deleteRow()">Delete row</button>
      <button onclick="deleteItem()">Delete item</button>
      <button onclick="clearItems()">Clear</button>
    </div>
    <div id="app"></div>
    <script src="../ItemMovement.plugin.js"></script>
    <script src="../Selection.plugin.js"></script>
    <script src="../CalendarScroll.plugin.js"></script>
    <script src="../index.umd.js?12345"></script>
    <script>
      const iterations = 10;

      const rows = {};
      for (let i = 0; i < iterations; i++) {
        const withParent = i > 0 && i % 2 === 0;
        const id = i.toString();
        rows[id] = {
          id,
          label: `row id: ${id}`,
          progress: 50,
          parentId: withParent ? (i - 1).toString() : undefined,
          expanded: false
        };
      }

      const startDate = GSTC.api
        .date()
        .subtract(1, 'month')
        .valueOf();

      const items = {};
      for (let i = 0; i < iterations; i++) {
        const id = i.toString();
        let startDayjs = GSTC.api
          .date(startDate)
          .startOf('day')
          .add(Math.floor(Math.random() * 100), 'days');
        items[id] = {
          id,
          label: 'item id ' + i,
          time: {
            start: startDayjs.valueOf(),
            end: startDayjs
              .clone()
              .add(4, 'days')
              .valueOf()
          },
          progress: 50,
          rowId: id
        };
      }

      const columns = {
        percent: 100,
        resizer: {
          inRealTime: true
        },
        data: {
          id: {
            id: 'id',
            data: 'id',
            width: 50,
            header: {
              content: 'ID'
            }
          },
          label: {
            id: 'label',
            data: 'label',
            expander: true,
            isHTML: false,
            width: 230,
            header: {
              content: 'Label'
            }
          },
          progress: {
            id: 'progress',
            data: 'progress',
            width: 30,
            header: {
              content: '%'
            }
          }
        }
      };
      let selectionApi;
      const config = {
        plugins: [
          ItemMovement({
            moveable: true,
            resizeable: true,
            collisionDetection: true
          }),
          Selection(),
          CalendarScroll({ speed: 2 })
        ],
        height: 800,
        list: {
          rows,
          columns
        },
        chart: {
          items,
          time: {
            period: 'day'
          }
        },
        classNames: {},
        actions: {},
        locale: {
          name: 'pl',
          weekdays: 'Niedziela_Poniedziałek_Wtorek_Środa_Czwartek_Piątek_Sobota'.split('_'),
          weekdaysShort: 'Ndz_Pon_Wt_Śr_Czw_Pt_Sob'.split('_'),
          weekdaysMin: 'Nd_Pn_Wt_Śr_Cz_Pt_So'.split('_'),
          months: 'Styczeń_Luty_Marzec_Kwiecień_Maj_Czerwiec_Lipiec_Sierpień_Wrzesień_Październik_Listopad_Grudzień'.split(
            '_'
          ),
          monthsShort: 'sty_lut_mar_kwi_maj_cze_lip_sie_wrz_paź_lis_gru'.split('_'),
          weekStart: 1
        }
      };

      let GSTCState = (window.state = GSTC.api.stateFromConfig(config));

      const app = GSTC({
        element: document.getElementById('app'),
        state: GSTCState
      });

      function deleteRow() {
        const random = r => r[Math.floor(Math.random()*r.length)];
        GSTCState.update('config.list.rows', rows => {
          const rando = random(Object.keys(rows));
          if (rows[rando]){
            console.log('deleting', rando, Object.keys(rows), rows[rando]);
            delete rows[rando];
          }
          return rows;
        });
      };

      function deleteItem() {
        const random = r => r[Math.floor(Math.random()*r.length)];
        GSTCState.update('config.chart.items', items => {
          const rando = random(Object.keys(items));
          if (items[rando]){
            console.log('deleting', rando, Object.keys(items), items[rando]);
            delete items[rando];
          }
          return items;
        });
      };
      
      function clearItems(){
        GSTCState.update('config.chart.items', items =>{
          Object.keys(items).forEach(k=>{
            delete items[k];
          });
          return items;
        });

        GSTCState.update('config.list.rows', rows =>{
          Object.keys(rows).forEach(k=>{
            delete rows[k];
          });
          return rows;
        });
      };


      document.getElementById('percent').addEventListener('input', ev => {
        app.state.update('config.list.columns.percent', ev.target.value);
      });
      document.getElementById('zoom').addEventListener('input', ev => {
        app.state.update('config.chart.time.zoom', ev.target.value);
      });
      document.getElementById('change-something').addEventListener('click', () => {
        app.state.update('config.list.rows', rows => {
          for (const rowId in rows) {
            rows[rowId].label += ' !';
          }
          rows['3'].parentId = '1';
          rows['5'].parentId = '3';
          rows['9'].parentId = '3';
          rows['7'].parentId = '5';
          rows['11'].parentId = '10';
          rows['13'].parentId = '12';
          for (let i = 20; i < 50; i++) {
            rows[i.toString()].parentId = '15';
          }
          return rows;
        });
      });
    </script>
  </body>
</html>