Front-end/add video upload button and arragne buttons position
Showing
4 changed files
with
45 additions
and
417 deletions
... | @@ -16,7 +16,6 @@ class Subject extends PureComponent { | ... | @@ -16,7 +16,6 @@ class Subject extends PureComponent { |
16 | this.onChangeInputImage = this.onChangeInputImage.bind(this); | 16 | this.onChangeInputImage = this.onChangeInputImage.bind(this); |
17 | this.onClickSaveImage = this.onClickSaveImage.bind(this); | 17 | this.onClickSaveImage = this.onClickSaveImage.bind(this); |
18 | this.state = { | 18 | this.state = { |
19 | - defaultSelectVal: 'Andromeda', | ||
20 | imageFiles: [], | 19 | imageFiles: [], |
21 | }; | 20 | }; |
22 | } | 21 | } |
... | @@ -42,6 +41,7 @@ class Subject extends PureComponent { | ... | @@ -42,6 +41,7 @@ class Subject extends PureComponent { |
42 | this.setState({ | 41 | this.setState({ |
43 | imageFiles:[], | 42 | imageFiles:[], |
44 | }); | 43 | }); |
44 | + // post request | ||
45 | } | 45 | } |
46 | 46 | ||
47 | render() { | 47 | render() { |
... | @@ -57,18 +57,16 @@ class Subject extends PureComponent { | ... | @@ -57,18 +57,16 @@ class Subject extends PureComponent { |
57 | <p>침입자로 분류하지 않을 방문자의 사진을 업로드 하세요.</p> | 57 | <p>침입자로 분류하지 않을 방문자의 사진을 업로드 하세요.</p> |
58 | </blockquote> | 58 | </blockquote> |
59 | 59 | ||
60 | - <FormGroup row> | 60 | + <FormGroup style={{margin:'10px 0px 0px 0px'}}> |
61 | <Label md="3" className="text-md-right"> | 61 | <Label md="3" className="text-md-right"> |
62 | Image upload | 62 | Image upload |
63 | </Label> | 63 | </Label> |
64 | <Col md="8"> | 64 | <Col md="8"> |
65 | <input | 65 | <input |
66 | accept="image/*" onChange={this.onChangeInputImage} | 66 | accept="image/*" onChange={this.onChangeInputImage} |
67 | - id="fileupload2" | 67 | + id="fileupload" |
68 | type="file" name="file" className="display-none" | 68 | type="file" name="file" className="display-none" |
69 | /> | 69 | /> |
70 | - <div className="fileinput fileinput-new fileinput-fix"> | ||
71 | - <div className="fileinput-new thumbnail"> | ||
72 | {this.state.imageFiles.length > 0 ? <div> | 70 | {this.state.imageFiles.length > 0 ? <div> |
73 | {this.state.imageFiles.map((file, idx) => ( | 71 | {this.state.imageFiles.map((file, idx) => ( |
74 | <img alt="..." src={file.preview} key={`img-id-${idx.toString()}`} />))} | 72 | <img alt="..." src={file.preview} key={`img-id-${idx.toString()}`} />))} |
... | @@ -76,10 +74,8 @@ class Subject extends PureComponent { | ... | @@ -76,10 +74,8 @@ class Subject extends PureComponent { |
76 | alt="..." | 74 | alt="..." |
77 | src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOTEiIGhlaWdodD0iMTQxIj48cmVjdCB3aWR0aD0iMTkxIiBoZWlnaHQ9IjE0MSIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijk1LjUiIHk9IjcwLjUiIHN0eWxlPSJmaWxsOiNhYWE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LXNpemU6MTJweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4xOTF4MTQxPC90ZXh0Pjwvc3ZnPg==" | 75 | src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOTEiIGhlaWdodD0iMTQxIj48cmVjdCB3aWR0aD0iMTkxIiBoZWlnaHQ9IjE0MSIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijk1LjUiIHk9IjcwLjUiIHN0eWxlPSJmaWxsOiNhYWE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LXNpemU6MTJweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4xOTF4MTQxPC90ZXh0Pjwvc3ZnPg==" |
78 | />} | 76 | />} |
79 | - </div> | ||
80 | - </div> | ||
81 | <div> | 77 | <div> |
82 | - <Button type="button" color="default" onClick={this.onClickSaveImage}>Select image</Button> | 78 | + <Button type="button" color="default" onClick={this.onClickSaveImage} style={{margin:'10px 0px 0px 0px'}}>Select image</Button> |
83 | </div> | 79 | </div> |
84 | </Col> | 80 | </Col> |
85 | </FormGroup> | 81 | </FormGroup> | ... | ... |
1 | -@import '../../styles/app'; | ||
2 | - | ||
3 | -// .autogrow { | ||
4 | -// overflow: hidden; | ||
5 | -// resize: none; | ||
6 | -// } | ||
7 | - | ||
8 | -.root { | ||
9 | - :global { | ||
10 | - /* | ||
11 | - * Switchery. | ||
12 | - */ | ||
13 | - | ||
14 | - .display-inline-block { | ||
15 | - display: inline-block; | ||
16 | - } | ||
17 | - | ||
18 | - .display-none { | ||
19 | - display: none; | ||
20 | - } | ||
21 | - | ||
22 | - .switch { | ||
23 | - box-sizing: content-box; | ||
24 | - } | ||
25 | - | ||
26 | - .switch input { | ||
27 | - display: none; | ||
28 | - } | ||
29 | - | ||
30 | - .switch i { | ||
31 | - display: inline-block; | ||
32 | - cursor: pointer; | ||
33 | - padding-right: 20px; | ||
34 | - transition: all ease 0.2s; | ||
35 | - -webkit-transition: all ease 0.2s; | ||
36 | - border-radius: 20px; | ||
37 | - box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5); | ||
38 | - } | ||
39 | - | ||
40 | - .switch i::before { | ||
41 | - display: block; | ||
42 | - content: ''; | ||
43 | - width: 30px; | ||
44 | - height: 30px; | ||
45 | - padding: 1px; | ||
46 | - border-radius: 20px; | ||
47 | - background: white; | ||
48 | - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); | ||
49 | - } | ||
50 | - | ||
51 | - .switch :checked + i { | ||
52 | - padding-right: 0; | ||
53 | - padding-left: 20px; | ||
54 | - background: rgb(100, 189, 99); | ||
55 | - } | ||
56 | - | ||
57 | - /* Datepicker */ | ||
58 | - | ||
59 | - .datepicker { | ||
60 | - .input-group-addon { | ||
61 | - display: inline-block; | ||
62 | - position: relative; | ||
63 | - top: -2px; | ||
64 | - left: -2px; | ||
65 | - } | ||
66 | - | ||
67 | - i.glyphicon { | ||
68 | - vertical-align: top; | ||
69 | - } | ||
70 | - | ||
71 | - .rdt { | ||
72 | - display: inline-block; | ||
73 | - } | ||
74 | - } | ||
75 | - | ||
76 | - /* slider */ | ||
77 | - | ||
78 | - $slider-line-height: 8px; | ||
79 | - $slider-handle-size: 26px; | ||
80 | - | ||
81 | - .slider { | ||
82 | - display: inline-block; | ||
83 | - vertical-align: middle; | ||
84 | - position: relative; | ||
85 | - | ||
86 | - .slider-handle { | ||
87 | - position: absolute; | ||
88 | - width: $slider-handle-size; | ||
89 | - height: $slider-handle-size; | ||
90 | - background: $white; | ||
91 | - border: 0 solid transparent; | ||
92 | - | ||
93 | - @include box-shadow(inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 5)); | ||
94 | - | ||
95 | - &:focus { | ||
96 | - outline: 0; | ||
97 | - } | ||
98 | - | ||
99 | - &.round { | ||
100 | - border-radius: 50%; | ||
101 | - } | ||
102 | - | ||
103 | - &.triangle { | ||
104 | - background: transparent none; | ||
105 | - } | ||
106 | - } | ||
107 | - | ||
108 | - &.slider-horizontal { | ||
109 | - width: 210px; | ||
110 | - height: $slider-line-height; | ||
111 | - | ||
112 | - .slider-track { | ||
113 | - height: $slider-line-height/2; | ||
114 | - width: 100%; | ||
115 | - margin-top: -$slider-line-height/4; | ||
116 | - top: 50%; | ||
117 | - left: 0; | ||
118 | - } | ||
119 | - | ||
120 | - .slider-selection { | ||
121 | - height: 100%; | ||
122 | - top: 0; | ||
123 | - bottom: 0; | ||
124 | - } | ||
125 | - | ||
126 | - .slider-handle { | ||
127 | - margin-left: -$slider-handle-size/2; | ||
128 | - margin-top: -$slider-handle-size*3/8; | ||
129 | - | ||
130 | - &.triangle { | ||
131 | - border-width: 0 $slider-line-height/2 $slider-line-height/2 $slider-line-height/2; | ||
132 | - width: 0; | ||
133 | - height: 0; | ||
134 | - border-bottom-color: #0480be; | ||
135 | - margin-top: 0; | ||
136 | - } | ||
137 | - } | ||
138 | - } | ||
139 | - | ||
140 | - &.slider-vertical { | ||
141 | - height: 210px; | ||
142 | - width: $slider-line-height; | ||
143 | - | ||
144 | - .slider-track { | ||
145 | - width: $slider-line-height/2; | ||
146 | - height: 100%; | ||
147 | - margin-left: -$slider-line-height/4; | ||
148 | - left: 50%; | ||
149 | - top: 0; | ||
150 | - } | ||
151 | - | ||
152 | - .slider-selection { | ||
153 | - width: 100%; | ||
154 | - left: 0; | ||
155 | - top: 0; | ||
156 | - bottom: 0; | ||
157 | - } | ||
158 | - | ||
159 | - .slider-handle { | ||
160 | - margin-left: -$slider-handle-size*3/8; | ||
161 | - margin-top: -$slider-handle-size/2; | ||
162 | - | ||
163 | - &.triangle { | ||
164 | - border-width: $slider-line-height/2 0 $slider-line-height/2 $slider-line-height/2; | ||
165 | - width: 1px; | ||
166 | - height: 1px; | ||
167 | - border-left-color: #0480be; | ||
168 | - margin-left: 0; | ||
169 | - } | ||
170 | - } | ||
171 | - } | ||
172 | - | ||
173 | - &.slider-disabled { | ||
174 | - .slider-handle { | ||
175 | - // @include gradient-y(#dfdfdf, #bebebe); | ||
176 | - } | ||
177 | - | ||
178 | - .slider-track { | ||
179 | - @include gradient-y(#e5e5e5, #e9e9e9); | ||
180 | - | ||
181 | - cursor: not-allowed; | ||
182 | - } | ||
183 | - } | ||
184 | - | ||
185 | - input { | ||
186 | - display: none; | ||
187 | - } | ||
188 | - | ||
189 | - .tooltip-inner { | ||
190 | - white-space: nowrap; | ||
191 | - } | ||
192 | - } | ||
193 | - | ||
194 | - .slider-selection { | ||
195 | - position: absolute; | ||
196 | - background: theme-color('primary'); | ||
197 | - | ||
198 | - @include box-shadow(inset 0 -1px 0 rgba(0, 0, 0, 0.15)); | ||
199 | - | ||
200 | - box-sizing: border-box; | ||
201 | - border-radius: $border-radius; | ||
202 | - } | ||
203 | - | ||
204 | - .slider-danger .slider .slider-selection { | ||
205 | - background: theme-color('danger'); // $brand-danger; | ||
206 | - } | ||
207 | - | ||
208 | - .slider-success .slider .slider-selection { | ||
209 | - background: theme-color('success'); // $brand-success; | ||
210 | - } | ||
211 | - | ||
212 | - .slider-warning .slider .slider-selection { | ||
213 | - background: theme-color('warning'); // $brand-warning; | ||
214 | - } | ||
215 | - | ||
216 | - .slider-info .slider .slider-selection { | ||
217 | - background: theme-color('info'); // $brand-info; | ||
218 | - } | ||
219 | - | ||
220 | - .slider-inverse .slider .slider-selection { | ||
221 | - background: $gray-700; // $gray; | ||
222 | - } | ||
223 | - | ||
224 | - .slider-track { | ||
225 | - position: absolute; | ||
226 | - cursor: pointer; | ||
227 | - border-radius: $border-radius; | ||
228 | - | ||
229 | - @include gradient-y(#eee, #f8f8f8); | ||
230 | - @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.1)); | ||
231 | - } | ||
232 | - | ||
233 | - /* file input */ | ||
234 | - | ||
235 | - .fileinput.fileinput-new { | ||
236 | - .thumbnail { | ||
237 | - padding: $thumbnail-padding; | ||
238 | - line-height: $line-height-base; | ||
239 | - background-color: $thumbnail-bg; | ||
240 | - border: $thumbnail-border-width solid $thumbnail-border-color; | ||
241 | - border-radius: $thumbnail-border-radius; | ||
242 | - transition: all 0.2s ease-in-out; | ||
243 | - | ||
244 | - @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.075)); | ||
245 | - } | ||
246 | - | ||
247 | - &.fileinput-fix { | ||
248 | - width: 200px; | ||
249 | - height: 150px; | ||
250 | - } | ||
251 | - } | ||
252 | - | ||
253 | - .btn { | ||
254 | - label { | ||
255 | - margin-bottom: 0; | ||
256 | - } | ||
257 | - } | ||
258 | - | ||
259 | - .fileinput-preview.fileinput-exists { | ||
260 | - border: 1px solid $input-border-color; | ||
261 | - border-radius: $border-radius; | ||
262 | - padding: 5px; | ||
263 | - } | ||
264 | - | ||
265 | - .fileinput.input-group { | ||
266 | - display: flex; | ||
267 | - } | ||
268 | - | ||
269 | - .fileinput-new.input-group .btn-file, | ||
270 | - .fileinput-new .input-group .btn-file { | ||
271 | - border-radius: 0 $border-radius $border-radius 0; | ||
272 | - | ||
273 | - &.btn-xs, | ||
274 | - &.btn-sm { | ||
275 | - border-radius: 0 $border-radius-sm $border-radius-sm 0; | ||
276 | - } | ||
277 | - | ||
278 | - &.btn-lg { | ||
279 | - border-radius: 0 $border-radius-lg $border-radius-lg 0; | ||
280 | - } | ||
281 | - } | ||
282 | - | ||
283 | - .form-group.has-warning .fileinput { | ||
284 | - .fileinput-preview { | ||
285 | - color: #fff; | ||
286 | - } | ||
287 | - | ||
288 | - .thumbnail { | ||
289 | - border-color: theme-color('warning'); | ||
290 | - } | ||
291 | - } | ||
292 | - | ||
293 | - .form-group.has-error .fileinput { | ||
294 | - .fileinput-preview { | ||
295 | - color: #fff; | ||
296 | - } | ||
297 | - | ||
298 | - .thumbnail { | ||
299 | - border-color: theme-color('danger'); | ||
300 | - } | ||
301 | - } | ||
302 | - | ||
303 | - .form-group.has-success .fileinput { | ||
304 | - .fileinput-preview { | ||
305 | - color: #fff; | ||
306 | - } | ||
307 | - | ||
308 | - .thumbnail { | ||
309 | - border-color: theme-color('success'); | ||
310 | - } | ||
311 | - } | ||
312 | - | ||
313 | - .btn-label { | ||
314 | - background: transparent; | ||
315 | - left: 2px; | ||
316 | - padding: 1px 6px; | ||
317 | - } | ||
318 | - | ||
319 | - // Opposite alignment of blockquote | ||
320 | - .blockquote { | ||
321 | - padding: ($spacer / 2) $spacer; | ||
322 | - margin-bottom: $spacer; | ||
323 | - font-size: $blockquote-font-size; | ||
324 | - border-left: 0.25rem solid $gray-300; | ||
325 | - } | ||
326 | - | ||
327 | - .blockquote footer { | ||
328 | - display: block; | ||
329 | - font-size: 80%; // back to default font-size | ||
330 | - color: $blockquote-small-color; | ||
331 | - | ||
332 | - &::before { | ||
333 | - content: '\2014 \00A0'; // em dash, nbsp | ||
334 | - } | ||
335 | - } | ||
336 | - | ||
337 | - .blockquote-reverse { | ||
338 | - padding-right: $spacer; | ||
339 | - padding-left: 0; | ||
340 | - text-align: right; | ||
341 | - border-right: 0.25rem solid $gray-300; | ||
342 | - border-left: 0; | ||
343 | - } | ||
344 | - | ||
345 | - .blockquote-reverse footer { | ||
346 | - &::before { | ||
347 | - content: ''; | ||
348 | - } | ||
349 | - | ||
350 | - &::after { | ||
351 | - content: '\00A0 \2014'; // nbsp, em dash | ||
352 | - } | ||
353 | - } | ||
354 | - } | ||
355 | -} | ||
356 | - | ||
357 | -.dropzone { | ||
358 | - width: 100%; | ||
359 | - text-align: center; | ||
360 | - padding: 40px 10px; | ||
361 | - height: 200px; | ||
362 | - border: 2px dashed #ccc; | ||
363 | - | ||
364 | - @include border-radius($border-radius); | ||
365 | - | ||
366 | - img { | ||
367 | - max-height: 100px; | ||
368 | - max-width: 150px; | ||
369 | - border-radius: 5px; | ||
370 | - } | ||
371 | -} |
... | @@ -4,22 +4,45 @@ import { connect } from 'react-redux'; | ... | @@ -4,22 +4,45 @@ import { connect } from 'react-redux'; |
4 | import { | 4 | import { |
5 | Row, | 5 | Row, |
6 | Col, | 6 | Col, |
7 | + Button, | ||
8 | + Form, | ||
9 | + FormGroup, | ||
7 | } from 'reactstrap'; | 10 | } from 'reactstrap'; |
8 | 11 | ||
9 | import Widget from '../../components/Widget/Widget'; | 12 | import Widget from '../../components/Widget/Widget'; |
10 | 13 | ||
11 | -import s from './VideoAnalysis.module.scss'; | ||
12 | - | ||
13 | class Dashboard extends React.Component { | 14 | class Dashboard extends React.Component { |
14 | constructor(props) { | 15 | constructor(props) { |
15 | super(props); | 16 | super(props); |
17 | + this.onChangeInputVideo = this.onChangeInputVideo.bind(this); | ||
18 | + this.onClickSaveVideo = this.onClickSaveVideo.bind(this); | ||
16 | this.state = { | 19 | this.state = { |
17 | - checkedArr: [false, false, false], | 20 | + videoFiles: [], |
18 | }; | 21 | }; |
19 | } | 22 | } |
20 | 23 | ||
21 | - async componentDidUpdate() { | 24 | + onChangeInputVideo(e) { |
22 | - const isReceivingData = true; | 25 | + const files = []; |
26 | + const reader = new FileReader(); | ||
27 | + files.push(e.target.files[0]); | ||
28 | + reader.onloadend = () => { | ||
29 | + files[0].preview = reader.result; | ||
30 | + files[0].toUpload = true; | ||
31 | + this.setState({ | ||
32 | + videoFiles: files, | ||
33 | + }); | ||
34 | + }; | ||
35 | + reader.readAsDataURL(e.target.files[0]); | ||
36 | + } | ||
37 | + | ||
38 | + onClickSaveVideo(e) { | ||
39 | + e.preventDefault(); | ||
40 | + console.log(this.state.videoFiles); | ||
41 | + console.log("upload video"); | ||
42 | + this.setState({ | ||
43 | + videoFiles:[], | ||
44 | + }); | ||
45 | + // post request | ||
23 | } | 46 | } |
24 | 47 | ||
25 | static propTypes = { | 48 | static propTypes = { |
... | @@ -29,18 +52,27 @@ class Dashboard extends React.Component { | ... | @@ -29,18 +52,27 @@ class Dashboard extends React.Component { |
29 | 52 | ||
30 | render() { | 53 | render() { |
31 | return ( | 54 | return ( |
32 | - <div className={s.root}> | 55 | + <div> |
33 | <h1 className="page-title">Video Analysis <small><small>Performance</small></small></h1> | 56 | <h1 className="page-title">Video Analysis <small><small>Performance</small></small></h1> |
34 | <Row> | 57 | <Row> |
35 | <Col lg={9} xs={12}> | 58 | <Col lg={9} xs={12}> |
36 | <Widget | 59 | <Widget |
37 | title={<h5> Registrate <span className="fw-semi-bold">Video</span></h5>} | 60 | title={<h5> Registrate <span className="fw-semi-bold">Video</span></h5>} |
38 | > | 61 | > |
62 | + <Form> | ||
63 | + <FormGroup style={{margin:'15px'}}> | ||
64 | + <Col md="8"> | ||
65 | + <input | ||
66 | + accept="video/*" onChange={this.onChangeInputVideo} | ||
67 | + id="fileupload" | ||
68 | + type="file" name="file" className="display-none" | ||
69 | + /> | ||
39 | <div> | 70 | <div> |
40 | - <div className="text-center" style={{ height: '300px' }} /> | 71 | + <Button type="button" color="default" onClick={this.onClickSaveVideo} style={{margin:'10px 0px 0px 0px'}}>Select video</Button> |
41 | - <p className="fs-mini text-muted"> | ||
42 | - </p> | ||
43 | </div> | 72 | </div> |
73 | + </Col> | ||
74 | + </FormGroup> | ||
75 | + </Form> | ||
44 | </Widget> | 76 | </Widget> |
45 | </Col> | 77 | </Col> |
46 | </Row> | 78 | </Row> |
... | @@ -48,7 +80,6 @@ class Dashboard extends React.Component { | ... | @@ -48,7 +80,6 @@ class Dashboard extends React.Component { |
48 | <Col lg={9} xs={12}> | 80 | <Col lg={9} xs={12}> |
49 | <Widget | 81 | <Widget |
50 | title={<h5><span className="fw-semi-bold">Results</span></h5>} | 82 | title={<h5><span className="fw-semi-bold">Results</span></h5>} |
51 | - fetchingData={true} | ||
52 | > | 83 | > |
53 | <div> | 84 | <div> |
54 | <div className="text-center" style={{ height: '300px' }} /> | 85 | <div className="text-center" style={{ height: '300px' }} /> | ... | ... |
1 | -@import '../../styles/app'; | ||
2 | - | ||
3 | -.root { | ||
4 | - :global { | ||
5 | - .post-comments footer { | ||
6 | - margin: 0 (-$widget-padding-horizontal) (-$widget-padding-vertical); | ||
7 | - padding: $widget-padding-vertical $widget-padding-horizontal; | ||
8 | - } | ||
9 | - | ||
10 | - .stat-item .name { | ||
11 | - margin-top: 10px; | ||
12 | - } | ||
13 | - } | ||
14 | -} | ||
15 | - | ||
16 | -.table { | ||
17 | - :global(.table.table-sm) { | ||
18 | - td { | ||
19 | - font-size: 1rem; | ||
20 | - vertical-align: middle; | ||
21 | - } | ||
22 | - } | ||
23 | -} | ||
24 | -.visitElement { | ||
25 | - h6 { | ||
26 | - font-size: 115%; | ||
27 | - } | ||
28 | -} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
-
Please register or login to post a comment