Commit b65ca6a9 authored by Maxime Chaillet's avatar Maxime Chaillet

create the new annotation form.

parent 8e07349e
......@@ -18,11 +18,7 @@ class App extends Component {
<Route path="/" component={LoginContainer} />
<Route path="/investigations" component={InvestigationsContainer} />
<Route path="/doi" component={DOIContainer} />
<Route path="/events" component={EventContainer} />
<Route path="/events/new" component={NewEvent} />
<Route path="/events" component={EventContainer}/>
<Route path="/topics" />
<Route path="/investigation/:id" component={DatasetsContainer} />
......
......@@ -21,14 +21,16 @@ class Event extends React.Component {
render() {
let toRender = () => {
let createdAt = <Moment format="YYYY/MM/DD HH:MM" date={this.props.event.createdAt} />;
let lastTimestamp = <Moment format="YYYY/MM/DD HH:MM" date={this.props.event.lastTimestamp} />;
let createdAt = <Moment format="YYYY/MM/DD HH:mm" date={this.props.event.createdAt} />;
let lastTimestamp = <Moment format="YYYY/MM/DD HH:mm" date={this.props.event.lastTimestamp} />;
let typeImg = (type) => {
if (type === 'Annotation') {
return (<div className='glyphicon glyphicon-comment padding-top-10' style={{ fontSize: '40px' }}> </div>)
} else if (type === 'Command') {
return (<div className=' glyphicon glyphicon-expand padding-top-10' style={{ fontSize: '40px' }}> </div>)
}
} else if (type === 'File') {
return (<div className=' glyphicon glyphicon-file padding-top-10' style={{ fontSize: '40px' }}> </div>)
}
}
if (this.state.showHistory === false) {
......@@ -50,7 +52,7 @@ class Event extends React.Component {
{typeImg(this.props.event.type)}
</td>
<td style={{ 'border-style': 'none' }}>
<EventHistoryItem createdAt={createdAt} item={lastUpdatedItem} toggleHistory={this.toggleHistory} toggleHistoryButton={true}> </EventHistoryItem>
<EventHistoryItem createdAt={createdAt} type={this.props.event.type} item={lastUpdatedItem} toggleHistory={this.toggleHistory} toggleHistoryButton={true}> </EventHistoryItem>
</td>
</tr>
</tbody>
......
......@@ -31,7 +31,7 @@ class EventHistory extends React.Component {
if (daydeltaFromNow <= 25) {
return "Updated " + updatedOn.fromNow().toString();
} else {
return Moment(date).format("MMM DD, HH:MM").toString();
return Moment(date).format("MMM DD, HH:mm").toString();
}
}
render() {
......@@ -39,7 +39,7 @@ class EventHistory extends React.Component {
(item, index) => {
let dateMsg = this.agofromNow(item.updatedOn);
if (index > 0) {
return (<EventHistoryItem expanded={true} item={item} paddingLeft={index * this.paddingStep} dateMsg={dateMsg}> </EventHistoryItem>)
return (<EventHistoryItem expanded={true} item={item} type={this.props.event.type} paddingLeft={index * this.paddingStep} dateMsg={dateMsg}> </EventHistoryItem>)
}
}
)
......@@ -48,6 +48,7 @@ class EventHistory extends React.Component {
<div className="grayBackground padding-top-10 padding-right-10 padding-left-10 padding-bottom-10">
<EventHistoryItem
expanded={true}
type={this.props.event.type}
dateMsg={this.agofromNow(this.state.sortedHistory[0].updatedOn)}
item={this.state.sortedHistory[0]}
quitHistoryButton={true}
......
......@@ -56,8 +56,9 @@ class EventHistoryItem extends React.Component {
<Row>
<Col xs={12}>
{/*<p> {this.props.item.content} </p> */}
{<div dangerouslySetInnerHTML={htmlContent} />}
{this.props.type === "Command" ? this.props.item.content : ""}
{this.props.type === "Annotation" ? <div dangerouslySetInnerHTML={htmlContent} /> : ""}
{this.props.type === "File" ? <div> <img width={100} src={this.props.item.url} /> <span> {this.props.item.title} </span> </div>: ""}
</Col>
</Row>
</Panel.Body>
......
......@@ -10,13 +10,39 @@ class NewEvent extends React.Component {
render() {
debugger
return (
<div style={{
position: "fixed",
top:"0px",
height:"100%",
width:"100%",
backgroundColor: "rgba(100, 100, 100, 0.3)",
}}>
<div style={{
width: "50%",
height:"75%",
top: "12%",
marginRight:"auto",
marginLeft:"auto",
<Editor
toolbarClassName="toolbarClassName"
wrapperClassName="wrapperClassName"
editorClassName="editorClassName"
onEditorStateChange={this.onEditorStateChange}
/>
padding: "10px",
position:"relative",
backgroundColor:"#ffffff",
}}>
<h1> Add a new Annotation </h1>
<Editor
toolbarClassName="toolbarClassName"
editorStyle={{
height:"100%",
width:"100%",
}}
editorClassName="editorClassName"
onEditorStateChange={this.onEditorStateChange}
/>
</div>
</div>
)
}
......
......@@ -147,10 +147,6 @@ class DatasetContainerMenu extends Component {
<ToggleButton value={1}><span className="glyphicon glyphicon-tasks"></span> Datasets</ToggleButton>
<ToggleButton value={2}><span className="glyphicon glyphicon-folder-open"></span> Files</ToggleButton>
<ToggleButton onChange={this.onLogbookButtonClicked} value={3}><span className="glyphicon glyphicon-comment"></span> Logbook</ToggleButton>
<ToggleButton value={3}>
<span className="glyphicon glyphicon-comment"></span>
<Link to={{ patname: logURL, search: "perspetive=logbook" }}>Logbook</Link>
</ToggleButton>
</ToggleButtonGroup>
</ButtonToolbar>
</Nav>
......
......@@ -2,7 +2,9 @@ import React from 'react';
import { connect } from 'react-redux';
import { Grid } from 'react-bootstrap';
import Event from '../components/Event/event';
import { Link } from 'react-router-dom';
import { Link, Route } from 'react-router-dom';
import NewEvent from '../components/Event/newEvent.jsx';
class EventContainer extends React.Component {
......@@ -21,13 +23,16 @@ class EventContainer extends React.Component {
return (
<div>
<h1> Event logbook </h1>
props container
{this.props.children}
<Grid fluid={true}>
{events}
</Grid>
<Route path="/events/new" component={NewEvent} />
</div>
);
}
......
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
File mode changed from 100644 to 100755
import { LOAD_EVENTS } from '../constants/ActionTypes';
import {annotationAndy1, annotationAndy2, annotationAndy3, annotationAndy4, annotationAndy5, annotationAndy6, annotationAndy7, annotationAndy8 } from './annotationAndy.js';
import { annotationAndy1, annotationAndy2, annotationAndy3, annotationAndy4, annotationAndy5, annotationAndy6, annotationAndy7, annotationAndy8 } from './annotationAndy.js';
const initialState = {
page: null,
......@@ -16,7 +16,7 @@ const events = (state = initialState, action) => {
...state,
list: [
{
id: 4,
id: 16,
createdAt: "2017-12-01T0:00:00.000",
type: "Annotation",
lastTimestamp: "2017-12-01T10:00:05.000",
......@@ -44,7 +44,7 @@ const events = (state = initialState, action) => {
]
},
{
id: 3,
id: 15,
createdAt: "2017-12-01T9:00:00.000",
type: "Command",
lastTimestamp: "2017-12-01T9:00:00.000",
......@@ -57,7 +57,7 @@ const events = (state = initialState, action) => {
]
},
{
id: 2,
id: 14,
createdAt: "2017-12-01T8:00:05.000",
type: "Command",
lastTimestamp: "2017-12-01T8:00:05.000",
......@@ -70,7 +70,7 @@ const events = (state = initialState, action) => {
]
},
{
id: 1,
id: 13,
createdAt: "2017-11-06T8:00:00.000",
type: "Annotation",
lastTimestamp: "2017-12-01T8:00:00.000",
......@@ -93,8 +93,9 @@ const events = (state = initialState, action) => {
},
]
},
{
id: 8,
{
id: 12,
createdAt: "2006-03-07T15:35:01.000",
type: "Annotation",
lastTimestamp: "2006-03-07T15:35:01.000",
......@@ -106,8 +107,8 @@ const events = (state = initialState, action) => {
},
]
},
{
id: 7,
{
id: 11,
createdAt: "2006-03-07T15:35:00.000",
type: "Annotation",
lastTimestamp: "2006-03-07T15:35:00.000",
......@@ -119,8 +120,23 @@ const events = (state = initialState, action) => {
},
]
},
{
id: 6,
{
id: 10,
createdAt: "2006-03-07T15:35:00.000",
type: "File",
lastTimestamp: "2006-03-07T15:35:00.000",
history: [
{
updatedOn: "2006-03-07T15:35:00.000",
logger: "Andy Goetz",
title: "ME1015_Etmt_voltage_run.jpg",
url: "ME1015_Etmt_voltage_run.jpg",
}
]
},
{
id: 9,
createdAt: "2006-03-07T13:18:00.000",
type: "Annotation",
lastTimestamp: "2006-03-07T13:18:00.000",
......@@ -132,8 +148,8 @@ const events = (state = initialState, action) => {
},
]
},
{
id: 5,
{
id: 8,
createdAt: "2006-03-05T21:56:00.000",
type: "Annotation",
lastTimestamp: "2006-03-05T21:56:00.000",
......@@ -145,8 +161,23 @@ const events = (state = initialState, action) => {
},
]
},
{
id: 4,
{
id: 7,
createdAt: "2006-03-05T21:56:00.000",
type: "File",
lastTimestamp: "2006-03-05T21:56:00.000",
history: [
{
updatedOn: "2006-03-05T21:56:00.000",
logger: "Andy Goetz",
title: "ME1015_D3_30_etmt_log.jpg",
url: "ME1015_D3_30_etmt_log.jpg",
}
]
},
{
id: 6,
createdAt: "2006-03-05T21:11:00.000",
type: "Annotation",
lastTimestamp: "2006-03-05T21:11:00.000",
......@@ -158,8 +189,8 @@ const events = (state = initialState, action) => {
},
]
},
{
id: 3,
{
id: 5,
createdAt: "2006-03-05T18:37:00.000",
type: "Annotation",
lastTimestamp: "2006-03-05T18:37:00.000",
......@@ -171,8 +202,23 @@ const events = (state = initialState, action) => {
},
]
},
{
id: 2,
{
id: 4,
createdAt: "2006-03-05T18:37:00.000",
type: "File",
lastTimestamp: "2006-03-05T18:37:00.000",
history: [
{
updatedOn: "2006-03-05T18:37:00.000",
logger: "Andy Goetz",
title: "Frelon_onthefly.jpg",
url: "Frelon_onthefly.jpg",
}
]
},
{
id: 3,
createdAt: "2006-03-05T15:42:00.000",
type: "Annotation",
lastTimestamp: "2006-03-05T15:42:00.000",
......@@ -184,7 +230,22 @@ const events = (state = initialState, action) => {
},
]
},
{
{
id: 2,
createdAt: "2006-03-05T15:42:00.000",
type: "File",
lastTimestamp: "2006-03-05T15:42:00.000",
history: [
{
updatedOn: "2006-03-05T15:42:00.000",
logger: "Andy Goetz",
title: "Me1015_frelon_control_1.jpg",
url: "Me1015_frelon_control_1.jpg",
}
]
},
{
id: 1,
createdAt: "2006-03-05T9:00:00.000",
type: "Annotation",
......@@ -200,13 +261,13 @@ const events = (state = initialState, action) => {
]
}
break;
break;
}
default: break;
}
return state
return state
}
export default events;
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