@@ -321,143 +214,25 @@ class Vegetable extends Component {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- this.onImageChange(e)}
- />
-
-
-
-
-
- {$imagePreview}
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
-
-
-
- this.onPictureChange(e)}
- />
-
-
-
-
- {this.state.imagesPreviewUrls
- && this.state.imagesPreviewUrls.length > 0
- ? (
-
- {this.state.imagesPreviewUrls.map( (item, key) => (
-
- 
-
- ))}
-
-
- )
- : (null)
- }
-
-
+
diff --git a/src/Vegetable/Carousel.js b/src/Vegetable/Carousel.js
new file mode 100644
index 0000000..773a263
--- /dev/null
+++ b/src/Vegetable/Carousel.js
@@ -0,0 +1,145 @@
+import React, {
+ Component,
+} from 'react';
+import {
+ Row,
+ Col,
+ FormGroup,
+ Label,
+ Input,
+ Carousel,
+ CarouselItem,
+ CarouselControl,
+ CarouselIndicators,
+} from 'reactstrap';
+import {
+ FaFileImage,
+} from 'react-icons/fa';
+
+class VegetableCarousel extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ imagesPreviewUrls: this.props.imagesPreviewUrls,
+ activeIndex: 0
+ };
+
+ this.onPictureChange = this.onPictureChange.bind(this);
+ this.next = this.next.bind(this);
+ this.previous = this.previous.bind(this);
+ this.goToIndex = this.goToIndex.bind(this);
+ this.onExited = this.onExited.bind(this);
+ this.onExiting = this.onExiting.bind(this);
+ }
+
+ componentWillReceiveProps(nextProps) {
+ if ( nextProps.imagesPreviewUrls) {
+ this.setState({
+ imagesPreviewUrls: nextProps.imagesPreviewUrls
+ });
+ }
+ if ( nextProps.activeIndex) {
+ this.setState({
+ activeIndex: nextProps.activeIndex
+ });
+ }
+ }
+
+ onPictureChange(e) {
+ e.preventDefault();
+
+ const reader = new FileReader();
+ const file = e.target.files[0];
+
+ reader.onloadend = () => {
+ this.props.addPicture(file, reader);
+ };
+
+ reader.readAsDataURL(file);
+ }
+
+ next() {
+ if (this.animating) return;
+ const nextIndex = this.state.activeIndex === this.state.imagesPreviewUrls.length - 1 ? 0 : this.state.activeIndex + 1;
+ this.setState({
+ activeIndex: nextIndex,
+ });
+ }
+
+ previous() {
+ if (this.animating) return;
+ const nextIndex = this.state.activeIndex === 0 ? this.state.imagesPreviewUrls.length - 1 : this.state.activeIndex - 1;
+ this.setState({
+ activeIndex: nextIndex,
+ });
+ }
+
+ goToIndex(newIndex) {
+ if (this.animating) return;
+ this.setState({
+ activeIndex: newIndex,
+ });
+ }
+
+ onExiting() {
+ this.animating = true;
+ }
+
+ onExited() {
+ this.animating = false;
+ }
+
+ render() {
+ const {
+ activeIndex,
+ } = this.state;
+
+ return (
+
+
+
+
+
+ this.onPictureChange(e)}
+ />
+
+
+
+
+ {this.state.imagesPreviewUrls
+ && this.state.imagesPreviewUrls.length > 0
+ ? (
+
+ {this.state.imagesPreviewUrls.map( (item, key) => (
+
+
+
+ ))}
+
+
+ )
+ : (null)
+ }
+
+
+ )
+ }
+}
+
+export default VegetableCarousel;
diff --git a/src/Vegetable/Main.js b/src/Vegetable/Main.js
new file mode 100644
index 0000000..5e3326e
--- /dev/null
+++ b/src/Vegetable/Main.js
@@ -0,0 +1,142 @@
+import React, {
+ Component,
+} from 'react';
+import {
+ Row,
+ Col,
+ FormGroup,
+ Label,
+ Input,
+} from 'reactstrap';
+import {
+ FaFileImage,
+} from 'react-icons/fa';
+
+class VegetableMain extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ Vegetable: {
+ name: '',
+ lat: 0,
+ lng: 0,
+ description: '',
+ Pictures: [],
+ },
+ imagePreviewUrl: '',
+ };
+
+ this.handleChange = this.handleChange.bind(this);
+ }
+
+ componentWillReceiveProps(nextProps) {
+ console.log(nextProps)
+ if (nextProps.Vegetable) {
+ this.setState({
+ Vegetable: nextProps.Vegetable
+ });
+ }
+ if (nextProps.imagePreviewUrl) {
+ this.setState({
+ imagePreviewUrl: nextProps.imagePreviewUrl
+ });
+ }
+ }
+
+ handleChange(event) {
+ const target = event.target;
+ const value = target.type === 'checkbox' ? target.checked : target.value;
+ const name = target.name;
+
+ this.setState(prevState => ({
+ Vegetable: {
+ ...prevState.Vegetable,
+ [name]: value,
+ },
+ }));
+
+ this.props.updateValue(name, value)
+ }
+
+ onImageChange(e) {
+ e.preventDefault();
+
+ const reader = new FileReader();
+ const file = e.target.files[0];
+
+ reader.onloadend = () => {
+ this.props.changeMainPicture(file, reader);
+ };
+
+ reader.readAsDataURL(file);
+ }
+
+ render() {
+ const {
+ imagePreviewUrl,
+ } = this.state;
+
+ let $imagePreview = null;
+ if (imagePreviewUrl) {
+ $imagePreview = (
);
+ } else if (this.state.Vegetable.mainPicture) {
+ $imagePreview = (
);
+ } else {
+ $imagePreview = (
);
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ this.onImageChange(e)}
+ />
+
+
+
+
+
+ {$imagePreview}
+
+
+
+ );
+ }
+}
+
+export default VegetableMain;
diff --git a/src/Vegetable/Map.js b/src/Vegetable/Map.js
new file mode 100644
index 0000000..8514760
--- /dev/null
+++ b/src/Vegetable/Map.js
@@ -0,0 +1,145 @@
+import React, {
+ Component,
+} from 'react';
+import {
+ Row,
+ Col,
+ FormGroup,
+ Label,
+ Input,
+} from 'reactstrap';
+import {
+ FaMapMarkerAlt
+} from 'react-icons/fa';
+
+const Map = {
+ width: 734,
+ height: 530,
+};
+
+class VegetableMap extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ Vegetable: {
+ name: '',
+ lat: 0,
+ lng: 0,
+ description: '',
+ Pictures: [],
+ },
+ Map: {
+ width: '20px',
+ height: '20px',
+ },
+ };
+
+ this.setMap = this.setMap.bind(this);
+ this.handleChange = this.handleChange.bind(this);
+ }
+
+ componentWillReceiveProps(nextProps) {
+ if (nextProps.Vegetable) {
+ this.setState({
+ Vegetable: nextProps.Vegetable
+ });
+ }
+
+ setTimeout( () => {
+ this.setMap();
+ }, 200);
+ }
+
+ componentDidMount() {
+ window.addEventListener('resize', this.setMap);
+ this.setMap();
+ }
+
+ componentWillUnmount() {
+ window.removeEventListener('resize', this.setMap);
+ }
+
+ handleChange(event) {
+ const target = event.target;
+ const value = target.type === 'checkbox' ? target.checked : target.value;
+ const name = target.name;
+
+ this.setState(prevState => ({
+ Vegetable: {
+ ...prevState.Vegetable,
+ [name]: value,
+ },
+ }));
+
+ this.props.updateValue(name, value)
+ }
+
+ setMap() {
+ const width = document.getElementById('MapContainer').clientWidth;
+ let MapWidth = Map.width;
+ let MapHeight = Map.height;
+
+ if (width < Map.width) {
+ MapWidth = width;
+ MapHeight = Math.round(Map.height * MapWidth / Map.width);
+ }
+
+ this.setState({
+ Map: {
+ width: MapWidth,
+ height: MapHeight,
+ },
+ });
+ }
+
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+}
+
+export default VegetableMap