First template for vegetable page

This commit is contained in:
dbroqua 2018-11-21 08:16:11 +01:00
parent e89c7f220a
commit 04ef7f4498
3 changed files with 185 additions and 0 deletions

View file

@ -7,6 +7,7 @@ import {
import Map from '../Routes/Map';
import Home from '../Routes/Home';
import Vegetables from '../Routes/Vegetables';
import Vegetable from '../Routes/Vegetable';
class App extends Component {
constructor(props) {
@ -44,6 +45,7 @@ class App extends Component {
<Route exact path="/" component={Home} />
<Route exact path="/carte" component={Map} />
<Route exact path="/vegetaux/:typeId-:typeSlug" component={Vegetables} />
<Route exact path="/vegetaux/:typeId-:typeSlug/:vegetableId-:vegetableSlug" component={Vegetable} />
</Switch>
</Router>
</div>

170
src/Routes/Vegetable.js Normal file
View file

@ -0,0 +1,170 @@
import React from 'react';
import {
Container,
Row,
Col,
ListGroup,
ListGroupItem,
Carousel,
CarouselItem,
CarouselControl,
CarouselIndicators,
CarouselCaption
} from 'reactstrap';
import {
NotificationContainer,
NotificationManager,
} from 'react-notifications';
import Api from '../Components/Api';
import MapItem from '../Components/Map';
export default class RouterVegetable extends React.Component {
constructor(props) {
super(props);
this.state = {
typeId: props.match.params.typeId,
vegetableId: props.match.params.vegetableId,
selectedType: {
name: '',
Vegetables: []
},
item: {},
activeIndex: 0
};
this.getItem = this.getItem.bind(this);
this.next = this.next.bind(this);
this.previous = this.previous.bind(this);
this.goToIndex = this.goToIndex.bind(this);
this.onExiting = this.onExiting.bind(this);
this.onExited = this.onExited.bind(this);
this.getItem();
}
onExiting() {
this.animating = true;
}
onExited() {
this.animating = false;
}
next() {
if (this.animating) return;
const nextIndex = this.state.activeIndex === this.state.item.Pictures.length - 1 ? 0 : this.state.activeIndex + 1;
this.setState({ activeIndex: nextIndex });
}
previous() {
if (this.animating) return;
const nextIndex = this.state.activeIndex === 0 ? this.state.item.Pictures.length - 1 : this.state.activeIndex - 1;
this.setState({ activeIndex: nextIndex });
}
goToIndex(newIndex) {
if (this.animating) return;
this.setState({ activeIndex: newIndex });
}
getItem() {
Api.get(`/types/${this.state.typeId}/vegetables/${this.state.vegetableId}`)
.then((res) => {
this.setState({
selectedType: {
id: res.data.Type.id,
name: res.data.Type.name,
Vegetables: [
res.data
]
},
item: res.data,
});
})
.catch(() => {
NotificationManager.error('Erreur lors de la récupération du végétal');
});
}
render() {
const { activeIndex } = this.state;
return (
<Container>
<NotificationContainer />
<Row>
<Col xs="12">
<Row className="with-margin">
<Col className=" with-border with-background">
<h1>&raquo; {this.state.item.name}</h1>
</Col>
</Row>
</Col>
<Col xs="12">
<MapItem
selectedType={this.state.selectedType}
selectedVegetable={this.state.item}
selectVegetable={() => { }}
/>
</Col>
<Col xs="12">
<Row className="with-margin">
<Col className=" with-border with-background">
<ListGroup className="double">
{this.state.item &&
this.state.item.Properties &&
this.state.item.Properties.map((item, key) => {
return (
item.Property !== null &&
item.Property !== undefined ?
(
<ListGroupItem key={key}>
<strong>{item.Property.name}</strong> : {item.value}
</ListGroupItem>
)
:
(null)
)
})}
</ListGroup>
</Col>
</Row>
</Col>
<Col xs="12">
<Row className="with-margin">
<Col className="with-border with-background">
{this.state.item &&
this.state.item.Pictures ?
(
<Carousel
activeIndex={activeIndex}
next={this.next}
previous={this.previous}
>
<CarouselIndicators items={this.state.item.Pictures} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
{this.state.item &&
this.state.item.Pictures &&
this.state.item.Pictures.map((picture) => (
<CarouselItem
onExiting={this.onExiting}
onExited={this.onExited}
key={picture.url}
>
<img src={picture.url} alt={picture.url} />
</CarouselItem>
))}
<CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
<CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
</Carousel>
) : (null)
}
</Col>
</Row>
</Col>
</Row>
</Container >
);
}
}

View file

@ -35,4 +35,17 @@ body {
.container {
margin-top: 116px;
}
.double {
display: inherit;
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
.double li {
/* width:50%;
float:left;
display:inline; */
}