Show a very basic event page when an event is clicked.
parent
9b96e37e44
commit
3883cbad1c
|
@ -7,27 +7,18 @@ import * as ICAL from 'ical.js';
|
|||
|
||||
BigCalendar.momentLocalizer(moment);
|
||||
|
||||
class EventWrapper {
|
||||
event: ICAL.Event;
|
||||
|
||||
constructor(event: ICAL.Event) {
|
||||
this.event = event;
|
||||
}
|
||||
|
||||
get summary() {
|
||||
return this.event.summary;
|
||||
}
|
||||
class EventWrapper extends ICAL.Event {
|
||||
|
||||
get title() {
|
||||
return this.summary;
|
||||
}
|
||||
|
||||
get start() {
|
||||
return this.event.startDate.toJSDate();
|
||||
return this.startDate.toJSDate();
|
||||
}
|
||||
|
||||
get end() {
|
||||
return this.event.endDate.toJSDate();
|
||||
return this.endDate.toJSDate();
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -38,7 +29,7 @@ class Calendar extends React.Component {
|
|||
|
||||
props: {
|
||||
entries: Array<ICAL.Component>,
|
||||
onItemClick: (contact: ICAL.Component) => void,
|
||||
onItemClick: (contact: ICAL.Event) => void,
|
||||
};
|
||||
|
||||
constructor(props: any) {
|
||||
|
@ -48,7 +39,7 @@ class Calendar extends React.Component {
|
|||
|
||||
render() {
|
||||
let entries = this.props.entries.map((value) => (
|
||||
new EventWrapper(new ICAL.Event(value))
|
||||
new EventWrapper(value)
|
||||
)).sort((a, b) => {
|
||||
if (a.summary < b.summary) {
|
||||
return -1;
|
||||
|
@ -63,6 +54,9 @@ class Calendar extends React.Component {
|
|||
<div style={{width: '100%', height: 500}}>
|
||||
<BigCalendar
|
||||
events={entries}
|
||||
onSelectEvent={(event: any) => {
|
||||
this.props.onItemClick(event);
|
||||
}}
|
||||
{...{culture: 'en-GB'}}
|
||||
date={this.state.currentDate}
|
||||
onNavigate={(currentDate: Date) => { this.setState({currentDate}); }}
|
||||
|
|
|
@ -0,0 +1,23 @@
|
|||
import * as React from 'react';
|
||||
|
||||
import * as ICAL from 'ical.js';
|
||||
|
||||
class Event extends React.Component {
|
||||
props: {
|
||||
event?: ICAL.Event,
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.props.event === undefined) {
|
||||
throw Error('Event should be defined!');
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h3>{this.props.event.summary}</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Event;
|
|
@ -1,7 +1,10 @@
|
|||
import * as React from 'react';
|
||||
import 'react-big-calendar/lib/css/react-big-calendar.css';
|
||||
import { Route, Switch, withRouter } from 'react-router';
|
||||
|
||||
import { routeResolver } from './App';
|
||||
|
||||
import Calendar from './Calendar';
|
||||
import Event from './Event';
|
||||
|
||||
import * as ICAL from 'ical.js';
|
||||
|
||||
|
@ -19,19 +22,39 @@ class JournalCalendar extends React.Component {
|
|||
this.eventClicked = this.eventClicked.bind(this);
|
||||
}
|
||||
|
||||
eventClicked(contact: ICAL.Component) {
|
||||
// FIXME: do something
|
||||
eventClicked(event: ICAL.Event) {
|
||||
const uid = event.uid;
|
||||
|
||||
this.props.history.push(
|
||||
routeResolver.getRoute('journals._id.items._id', { journalUid: this.props.journal.uid, itemUid: uid }));
|
||||
}
|
||||
|
||||
render() {
|
||||
let items = this.props.entries;
|
||||
|
||||
return (
|
||||
<div style={{width: '100%', height: 500}}>
|
||||
<Calendar entries={Array.from(items.values())} onItemClick={this.eventClicked} />
|
||||
</div>
|
||||
<Switch>
|
||||
<Route
|
||||
path={routeResolver.getRoute('journals._id')}
|
||||
exact={true}
|
||||
render={() => (
|
||||
<Calendar entries={Array.from(items.values())} onItemClick={this.eventClicked} />
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path={routeResolver.getRoute('journals._id.items._id')}
|
||||
exact={true}
|
||||
render={({match}) => {
|
||||
|
||||
return (
|
||||
<Event event={new ICAL.Event(items.get(match.params.itemUid))} />
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</Switch>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default JournalCalendar;
|
||||
export default withRouter(JournalCalendar);
|
||||
|
|
10
src/Pim.tsx
10
src/Pim.tsx
|
@ -1,9 +1,12 @@
|
|||
import * as React from 'react';
|
||||
import { Route, Switch } from 'react-router';
|
||||
|
||||
import * as ICAL from 'ical.js';
|
||||
|
||||
import * as EteSync from './api/EteSync';
|
||||
|
||||
import Contact from './Contact';
|
||||
import Event from './Event';
|
||||
import PimMain from './PimMain';
|
||||
|
||||
import { routeResolver } from './App';
|
||||
|
@ -84,6 +87,13 @@ class Pim extends React.Component {
|
|||
<Contact contact={addressBookItems.get(match.params.contactUid)} />
|
||||
)}
|
||||
/>
|
||||
<Route
|
||||
path={routeResolver.getRoute('pim.events._id')}
|
||||
exact={true}
|
||||
render={({match}) => (
|
||||
<Event event={new ICAL.Event(calendarItems.get(match.params.eventUid))} />
|
||||
)}
|
||||
/>
|
||||
</Switch>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -21,8 +21,11 @@ class Pim extends React.Component {
|
|||
this.contactClicked = this.contactClicked.bind(this);
|
||||
}
|
||||
|
||||
eventClicked(contact: any) {
|
||||
// FIXME
|
||||
eventClicked(event: ICAL.Event) {
|
||||
const uid = event.uid;
|
||||
|
||||
this.props.history.push(
|
||||
routeResolver.getRoute('pim.events._id', { eventUid: uid }));
|
||||
}
|
||||
|
||||
contactClicked(contact: ICAL.Component) {
|
||||
|
|
Loading…
Reference in New Issue