· 6 years ago · Oct 18, 2019, 05:26 AM
1import React, { Component } from 'react';
2import {Form, Row, Col, Button, Alert, Spinner} from 'react-bootstrap';
3import FormList from './FormList';
4import config from '../config/config';
5//import Alert from './Alert';
6
7class AddArt extends Component {
8 constructor(props) {
9 super(props);
10
11 this.state = {
12 loading: true,
13 statuses: [],
14 sizes: [],
15 pourtype: [],
16 artType: [],
17 sel_status: "",
18 sel_size: "",
19 sel_pourType: "",
20 sel_artType: "",
21 sel_name: "",
22 sel_description: "",
23 sel_colors: "",
24 sel_files: [],
25 sending: false
26 }
27
28 this.handleChange = this.handleChange.bind(this);
29 this.handleSubmit = this.handleSubmit.bind(this);
30 this.fileSelectedHandler = this.fileSelectedHandler.bind(this);
31 }
32
33 handleChange(event) {
34 const target = event.target;
35 const value = target.type === 'checkbox' ? target.checked : target.value;
36 const name = target.name;
37 this.setState({
38 [name]: value
39 });
40 }
41 fileSelectedHandler(file){
42 this.setState({ sel_files: file.target.files});
43 }
44 componentDidMount(){
45 let initialList = {};
46 fetch(config.backendServer + 'api/options')
47 .then(response => {
48 return response.json();
49 }).then(data => {
50
51 initialList = data.pourtypes.map(datum => {
52 return datum;
53 });
54 this.setState({pourtype:initialList})
55 initialList = data.arttype.map(datum => {
56 return datum;
57 });
58 this.setState({artType:initialList})
59 initialList = data.sizes.map(datum => {
60 return datum;
61 });
62 this.setState({sizes:initialList})
63 initialList = data.statuses.map(datum => {
64 return datum;
65 });
66 this.setState({statuses:initialList})
67 this.setState({loading:false})
68 }).catch(err => {
69 // console.log("Error while getting states: " +err)
70 this.setState({loading:false})
71 this.setState({Error: true});
72 });
73
74 }
75
76
77 handleSubmit(event) {
78 event.preventDefault();
79 this.setState({sending:true});
80 const data = {
81 name: this.state.sel_name,
82 status: this.state.sel_status,
83 size: this.state.sel_size,
84 pourType: this.state.sel_pourType,
85 artType: this.state.sel_artType
86 }
87
88 const sdata = new FormData()
89 sdata.append("name", this.state.sel_name);
90 sdata.append("status", this.state.sel_status);
91 sdata.append("size", this.state.sel_size);
92 sdata.append("pourType", this.state.sel_pourType);
93 sdata.append("artType", this.state.sel_artType);
94 sdata.append("description", this.state.sel_description);
95 sdata.append("colors", this.state.sel_colors);
96 // sdata.append("picture", this.state.sel_files);
97 for(var x = 0; x<this.state.sel_files.length; x++) {
98 sdata.append('picture', this.state.sel_files[x])
99 }
100
101
102 console.log(JSON.stringify(sdata))
103
104 console.log(data);
105 fetch(config.backendServer + 'api/test', {
106 method: 'POST',
107 credentials: 'include',
108 body: sdata,
109 })
110 .then(()=>{
111 this.setState({sending:false});
112 })
113 .catch(()=>{
114 this.setState({sending:false});
115 })
116 }
117
118 render() {
119 const statusList = this.state.statuses.map(x => (
120 <option key={x.Name}>{x.Name}</option>
121 ));
122 const sizesList = this.state.sizes.map(x => (
123 <option key={x.Name}>{x.Name}</option>
124 ));
125 const artList = this.state.artType.map(x => (
126 <option key={x.Name}>{x.Name}</option>
127 ));
128 const pourList = this.state.pourtype.map(x => (
129 <option key={x.Name}>{x.Name}</option>
130 ));
131
132 let alert, submitting;
133 let button = <Button variant="primary" type="submit" >Add Artwork</Button>;
134 if(this.state.Error){
135 alert = <Alert key="1" variant="danger">Error: Issue connecting to the API. Refresh to try again.</Alert>;
136 button = <Button variant="primary" type="submit" disabled>Add Artwork</Button>;
137 }
138
139 if(this.state.sending){
140 submitting = <Spinner animation="border" variant="dark"/>;
141 }
142
143
144
145 return (
146 <div>
147 <div className="pagealert">
148 {alert}
149 </div>
150
151 <div className="registerForm">
152 <h1>Register a Painting</h1>
153
154 <Form onSubmit={this.handleSubmit}>
155 <Form.Group controlId="Art.Name">
156 <Form.Row>
157 <Col xs md={{span:1,offset:4}} lg={{span:1,offset:4}}>
158 <Form.Label>Name of Artwork</Form.Label>
159 </Col>
160 <Col md="3">
161 <Form.Control onChange={this.handleChange} name="sel_name" size="lg" type="input" placeholder="untitled"></Form.Control>
162 </Col>
163 </Form.Row>
164 </Form.Group>
165 <Form.Group name="sel_status" onChange={this.handleChange} controlId="Art.Status">
166 <FormList name="sel_status" title="Status" loading={this.state.loading} data={statusList}/>
167 </Form.Group>
168 <Form.Group onChange={this.handleChange} controlId="Art.Sizes">
169 <FormList name="sel_size" title="Size" loading={this.state.loading} data={sizesList}/>
170 </Form.Group>
171 <Form.Group onChange={this.handleChange} controlId="Art.Art">
172 <FormList name="sel_artType" title="Artwork Type" loading={this.state.loading} data={artList}/>
173 </Form.Group>
174 <Form.Group onChange={this.handleChange} controlId="Art.Pour">
175 <FormList name="sel_pourType" title="Pour Type" loading={this.state.loading} data={pourList}/>
176 </Form.Group>
177 <Form.Group>
178 <Form.Row>
179 <Col xs md={{span:1,offset:4}} lg={{span:1,offset:4}}>
180 <Form.Label>Colors</Form.Label>
181 </Col>
182 <Col md="3">
183 <Form.Control onChange={this.handleChange} name="sel_colors" type="input" placeholder="Blue, Red, Green"></Form.Control>
184 </Col>
185 </Form.Row>
186 </Form.Group>
187 <Form.Group>
188 <Form.Row>
189 <Col xs md={{span:1,offset:4}} lg={{span:1,offset:4}}>
190 <Form.Label>Description</Form.Label>
191 </Col>
192 <Col md="3">
193 <Form.Control onChange={this.handleChange} name="sel_description" type="input" as="textarea" placeholder="Awesome artwork stuff!"></Form.Control>
194 </Col>
195 </Form.Row>
196 </Form.Group>
197 <Form.Group>
198 <Form.Row>
199 <Col xs md={{span:1,offset:4}} lg={{span:1,offset:4}}>
200 <Form.Label>Pictures (up to 10)</Form.Label>
201 </Col>
202 <Col md="3">
203 <input type="file" multiple name="picture" onChange={this.fileSelectedHandler}></input>
204 </Col>
205 </Form.Row>
206 </Form.Group>
207
208
209 <Row>
210 <Col xs md={{offset:4,span:2}} lg={{offset:4,span:2}}>
211 {button}
212 </Col>
213 <Col>
214 {submitting}
215 </Col>
216 </Row>
217
218 </Form>
219 </div>
220 </div>
221 )
222 }
223}