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?