First template for vegetable page
This commit is contained in:
parent
e89c7f220a
commit
04ef7f4498
3 changed files with 185 additions and 0 deletions
|
@ -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
170
src/Routes/Vegetable.js
Normal 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>» {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 >
|
||||
);
|
||||
}
|
||||
}
|
|
@ -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; */
|
||||
}
|
Loading…
Reference in a new issue