diff --git a/dashboard/src/App.js b/dashboard/src/App.js index b4d1cca140dda681f21b50928479780379cdbb42..f8e80dca5427194e35c26844a02b58db7f05f207 100644 --- a/dashboard/src/App.js +++ b/dashboard/src/App.js @@ -12,12 +12,23 @@ class App extends React.Component { asts: [], contexts: {} }; + } + + componentDidMount() { + fetch('http://localhost:7070/asts/') + .then(res => res.json()) + .then((asts) => { + this.setState({ + asts: asts.reverse(), + contexts: {} + }) + }) + .catch(console.log) const ws = new WebSocket("ws://localhost:7070/ast-events"); ws.onopen = (event) => { - - ws.send("Hi"); + ws.send("Web client connected!"); }; ws.onmessage = (event) => { @@ -30,57 +41,30 @@ class App extends React.Component { asts: [event.data, ...asts], contexts: contexts }); - - console.log(event.data) } } catch (err) { console.log(err); } - ws.send("Got Something, thx"); }; } - componentDidMount() { - fetch('http://localhost:7070/asts/') - .then(res => res.json()) - .then((asts) => { - this.setState({ - asts: asts.reverse(), - contexts: {} - }) - }) - .catch(console.log) - } - render() { - const astlist = this.state.asts.map(v => { - const image = v.diagram; - return ( - <li key={v.timestamp}> - <p>{v.parseRule}</p> - <p><img src={`data:image/svg+xml;utf8,${encodeURIComponent(image)}`} alt='{v.parseRule}' /></p> - </li> - ) - }) - const astTimeline = this.state.asts.map(v => { - const image = v.diagram; - const timestamp = new Date(v.timestamp); return ( <VerticalTimelineElement className="ast-timeline-event" contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }} contentArrowStyle={{ borderRight: '7px solid rgb(33, 150, 243)' }} - date={timestamp.toLocaleTimeString('en-us', { hour12: false })} - iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }} - icon={<GiFamilyTree className='ASTIcon' />} + date={new Date(v.timestamp).toLocaleTimeString('en-us', { hour12: false })} + iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff', rotate: '180deg' }} + icon={<GiFamilyTree />} key={v.timestamp} position={'right'} > <h3 className="vertical-timeline-element-title">{v.parseRule}()</h3> <p> - <img className="AstInTimeline" src={`data:image/svg+xml;utf8,${encodeURIComponent(image)}`} alt='{v.parseRule}' /> + <img className="AstInTimeline" src={`data:image/svg+xml;utf8,${encodeURIComponent(v.diagram)}`} alt={v.parseRule} /> </p> </VerticalTimelineElement> @@ -95,12 +79,10 @@ class App extends React.Component { <ControlPanel /> </header> <main> - <div className="curent-state"> - <img className="CurrentAst" src={`data:image/svg+xml;utf8,${encodeURIComponent(lastImage.diagram)}`} alt='lastImage.parseRule' /> - </div> - {/* <div className="ast-history"> - <ol>{astlist}</ol> - </div> */} + <CurrentState + diagram={lastImage.diagram} + label={lastImage.parseRule} + /> <VerticalTimeline className='MG-Timeline'> {astTimeline} @@ -111,19 +93,19 @@ class App extends React.Component { } } -class ControlPanel extends React.Component { - constructor(props) { - super(props); - }; - - sayHello = () => { - alert('You clicked me!'); - } +function CurrentState(props) { + return ( + <div className="curent-state"> + <img className="CurrentAst" src={`data:image/svg+xml;utf8,${encodeURIComponent(props.diagram)}`} alt={props.label} /> + </div> + ) +} +class ControlPanel extends React.Component { render() { return ( <div className='ControlPanel'> - <button onClick={this.sayHello}>connect</button> + <button onClick={() => { alert('You clicked me!'); }}>connect</button> </div> ); }