Our state of the art Gantt chart


Post by fortran »

Please see Attachment.

The component code shows below:

const GanttApp = ({
  sid,
  onClose,
}) => {
  const socket = useContext(SocketContext);
  const ganttRef = useRef(null);

  const [project, setProject] = useState({});

  const ws = useRef(null);

  const handleDataChange = (event) => {
    // console.log(event);
    if (!event.source.changes) {
      return;
    }

const {changes} = event.source;
event.source.acceptChanges();

ws.current.send(JSON.stringify({command: 'projectChange', project: 1, changes}))
  }

  React.useEffect(() => {
    ws.current = new WebSocket('ws://192.168.102.7:8080');
    ws.current.onopen = () => {
      console.log('ws opened');

  ws.current.send(JSON.stringify({command: 'login', login: 'admin', password: 'admin'}));
  
};

ws.current.addEventListener('message', async (event) => {
  const data = JSON.parse(event.data);
  // console.log('onmessage', data);

  if (data.command === 'login') {
    ws.current.send(JSON.stringify({command: 'dataset', project: 1}));
  } else if (data.command === 'dataset') {
    setProject(data.dataset);
  } else if (data.command === 'projectChange') {
    // console.log('ganttRef.current', ganttRef.current.instance.crudManager);
    ganttRef.current.instance.crudManager.applyChangeset(data.changes);
    await ganttRef.current.instance.crudManager.commitAsync();
  }
});
  }, []);

  return (
    <>
      <BryntumGantt ref={ganttRef} project={{...project, onHasChanges: handleDataChange}} {...ganttConfig} />
    </>
  );
};

I am using a websocket server cloned from https://github.com/bryntum/gantt-websocket-server

The server logs below:

<<< {
        "command": "projectChange",
        "project": 1,
        "changes": {
                "tasks": {
                        "updated": [
                                {
                                        "parentIndex": 1,
                                        "id": 13
                                },
                                {
                                        "parentIndex": 2,
                                        "id": 14
                                },
                                {
                                        "parentIndex": 3,
                                        "id": 15
                                },
                                {
                                        "parentId": 11,
                                        "parentIndex": 0,
                                        "id": 12
                                },
                                {
                                        "percentDone": 40,
                                        "effort": 528,
                                        "id": 1
                                },
                                {
                                        "effort": 4032,
                                        "percentDone": 33.70860927152318,
                                        "id": 1000
                                },
                                {
                                        "inactive": false,
                                        "id": 11
                                }
                        ]
                }
        }
}

Can someone help?

Attachments
QQ20230316-000501-HD.mp4
(3.13 MiB) Downloaded 19 times

Post by alex.l »

Hi, looks like your data has duplicated ids. Please check all JSON you got from the server if it contains same ids for different records.

All the best,
Alex


Post Reply