Commit 73956b0c authored by Linh Nguyen's avatar Linh Nguyen

Message of event's changement

parent 7a0c0e57
import React, { Component } from 'react';
import Scheduler from './components/Scheduler';
import Toolbar from './components/Toolbar';
import React, { Component } from "react";
import Scheduler from "./components/Scheduler";
import Toolbar from "./components/Toolbar";
import MessageArea from "./components/MessageArea";
import "./App.css";
import './App.css';
const data = [
{ start_date:'2020-06-10 6:00', end_date:'2020-06-10 8:00', text:'C SR03', id: 1 },
{ start_date:'2020-06-10 8:15', end_date:'2020-06-10 10:15', text:'TD SR03', id: 2 },
{ start_date:'2020-06-13 10:00', end_date:'2020-06-13 18:00', text:'Event 2', id: 3 }
{
start_date: "2020-06-10 6:00",
end_date: "2020-06-10 8:00",
text: "C SR03",
id: 1,
},
{
start_date: "2020-06-10 8:15",
end_date: "2020-06-10 10:15",
text: "TD SR03",
id: 2,
},
{
start_date: "2020-06-13 10:00",
end_date: "2020-06-13 18:00",
text: "Event 2",
id: 3,
},
];
class App extends Component {
state = {
currentTimeFormatState: true
currentTimeFormatState: true,
messages: [],
};
addMessage(message) {
const maxLogLength = 5;
const newMessage = { message };
const messages = [newMessage, ...this.state.messages];
if (messages.length > maxLogLength) {
messages.length = maxLogLength;
}
this.setState({ messages });
}
logDataUpdate = (action, ev, id) => {
const text = ev && ev.text ? ` (${ev.text})` : "";
const message = `event ${action}: ${id} ${text}`;
this.addMessage(message);
};
handleTimeFormatStateChange = (state) => {
this.setState({
currentTimeFormatState: state
currentTimeFormatState: state,
});
}
};
render() {
const { currentTimeFormatState } = this.state;
const { currentTimeFormatState, messages } = this.state;
return (
<div>
<div className="tool-bar">
<Toolbar
timeFormatState={currentTimeFormatState}
onTimeFormatStateChange={this.handleTimeFormatStateChange}
/>
</div>
<div className='scheduler-container'>
<Scheduler
events={data}
timeFormatState={currentTimeFormatState}
/>
</div>
<div>
<div className="tool-bar">
<Toolbar
timeFormatState={currentTimeFormatState}
onTimeFormatStateChange={this.handleTimeFormatStateChange}
/>
</div>
<div className="scheduler-container">
<Scheduler
events={data}
timeFormatState={currentTimeFormatState}
onDataUpdated={this.logDataUpdate}
/>
</div>
<MessageArea messages={messages} />
</div>
);
}
}
}
export default App;
\ No newline at end of file
export default App;
.message-area {
background: #ebebeb;
height: 200px;
overflow: auto;
padding: 10px;
box-sizing:border-box;
}
.message-area ul{
margin: 0;
padding: 0;
list-style: none;
}
.message-area li:before {
content: "\003e";
padding-right: 10px;
}
\ No newline at end of file
import React, { Component } from 'react';
export default class MessageArea extends Component {
render() {
const messages = this.props.messages.map(({ message }) => {
return <li key={ Math.random() }>{message}</li>
});
return (
<div className="message-area">
<h3>Messages:</h3>
<ul>
{ messages }
</ul>
</div>
);
}
}
MessageArea.defaultProps = {
messages: []
};
\ No newline at end of file
import MessageArea from './MessageArea';
import './MessageArea.css';
export default MessageArea;
\ No newline at end of file
.scheduler-container {
height: calc(100vh - 50px);
height: calc(100vh - 50px - 200px);
width: 100vw;
}
\ No newline at end of file
......@@ -5,6 +5,33 @@ import 'dhtmlx-scheduler/codebase/dhtmlxscheduler_material.css';
const scheduler = window.scheduler;
export default class Scheduler extends Component {
initSchedulerEvents() {
if (scheduler._$initialized) {
return;
}
const onDataUpdated = this.props.onDataUpdated;
scheduler.attachEvent('onEventAdded', (id, ev) => {
if (onDataUpdated) {
onDataUpdated('create', ev, id);
}
});
scheduler.attachEvent('onEventChanged', (id, ev) => {
if (onDataUpdated) {
onDataUpdated('update', ev, id);
}
});
scheduler.attachEvent('onEventDeleted', (id, ev) => {
if (onDataUpdated) {
onDataUpdated('delete', ev, id);
}
});
scheduler._$initialized = true;
}
componentDidMount() {
scheduler.skin = 'material';
scheduler.config.header = [
......@@ -19,11 +46,14 @@ export default class Scheduler extends Component {
scheduler.config.hour_date = '%g:%i %A';
scheduler.xy.scale_width = 70;
this.initSchedulerEvents();
const { events } = this.props;
scheduler.init(this.schedulerContainer, new Date(2020, 5, 10));
scheduler.clearAll();
scheduler.parse(events);
}
shouldComponentUpdate(nextProps) {
return this.props.timeFormatState !== nextProps.timeFormatState;
}
......@@ -36,7 +66,7 @@ export default class Scheduler extends Component {
scheduler.config.hour_date = state ? '%H:%i' : '%g:%i %A';
scheduler.templates.hour_scale = scheduler.date.date_to_str(scheduler.config.hour_date);
}
render() {
const { timeFormatState } = this.props;
this.setTimeFormat(timeFormatState);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment