Front-end/add video upload button and arragne buttons position

@@ -16,7 +16,6 @@ class Subject extends PureComponent {
     this.onChangeInputImage = this.onChangeInputImage.bind(this);
     this.onChangeInputImage = this.onChangeInputImage.bind(this);
     this.onClickSaveImage = this.onClickSaveImage.bind(this);
     this.onClickSaveImage = this.onClickSaveImage.bind(this);
     this.state = {
     this.state = {
-      defaultSelectVal: 'Andromeda',
       imageFiles: [],
       imageFiles: [],
     };
     };
   }
   }
@@ -42,6 +41,7 @@ class Subject extends PureComponent {
     this.setState({
     this.setState({
       imageFiles:[],
       imageFiles:[],
     });
     });
+    // post request
   }
   }
 
 
   render() {
   render() {
@@ -57,18 +57,16 @@ class Subject extends PureComponent {
                   <p>침입자로 분류하지 않을 방문자의 사진을 업로드 하세요.</p>
                   <p>침입자로 분류하지 않을 방문자의 사진을 업로드 하세요.</p>
                 </blockquote>
                 </blockquote>
 
 
-                <FormGroup row>
+                <FormGroup style={{margin:'10px 0px 0px 0px'}}>
                   <Label md="3" className="text-md-right">
                   <Label md="3" className="text-md-right">
                     Image upload
                     Image upload
                   </Label>
                   </Label>
                   <Col md="8">
                   <Col md="8">
                     <input
                     <input
                       accept="image/*" onChange={this.onChangeInputImage}
                       accept="image/*" onChange={this.onChangeInputImage}
-                      id="fileupload2"
+                      id="fileupload"
                       type="file" name="file" className="display-none"
                       type="file" name="file" className="display-none"
                     />
                     />
-                    <div className="fileinput fileinput-new fileinput-fix">
-                      <div className="fileinput-new thumbnail">
                         {this.state.imageFiles.length > 0 ? <div>
                         {this.state.imageFiles.length > 0 ? <div>
                           {this.state.imageFiles.map((file, idx) => (
                           {this.state.imageFiles.map((file, idx) => (
                             <img alt="..." src={file.preview} key={`img-id-${idx.toString()}`} />))}
                             <img alt="..." src={file.preview} key={`img-id-${idx.toString()}`} />))}
@@ -76,10 +74,8 @@ class Subject extends PureComponent {
                           alt="..."
                           alt="..."
                           src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOTEiIGhlaWdodD0iMTQxIj48cmVjdCB3aWR0aD0iMTkxIiBoZWlnaHQ9IjE0MSIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijk1LjUiIHk9IjcwLjUiIHN0eWxlPSJmaWxsOiNhYWE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LXNpemU6MTJweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4xOTF4MTQxPC90ZXh0Pjwvc3ZnPg=="
                           src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOTEiIGhlaWdodD0iMTQxIj48cmVjdCB3aWR0aD0iMTkxIiBoZWlnaHQ9IjE0MSIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijk1LjUiIHk9IjcwLjUiIHN0eWxlPSJmaWxsOiNhYWE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LXNpemU6MTJweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4xOTF4MTQxPC90ZXh0Pjwvc3ZnPg=="
                         />}
                         />}
-                      </div>
-                    </div>
                     <div>
                     <div>
-                      <Button type="button" color="default" onClick={this.onClickSaveImage}>Select image</Button>
+                      <Button type="button" color="default" onClick={this.onClickSaveImage} style={{margin:'10px 0px 0px 0px'}}>Select image</Button>
                     </div>
                     </div>
                   </Col>
                   </Col>
                 </FormGroup>
                 </FormGroup>

-@import '../../styles/app';
-
-// .autogrow {
-//   overflow: hidden;
-//   resize: none;
-// }
-
-.root {
-  :global {
-    /*
-     * Switchery.
-     */
-
-    .display-inline-block {
-      display: inline-block;
-    }
-
-    .display-none {
-      display: none;
-    }
-
-    .switch {
-      box-sizing: content-box;
-    }
-
-    .switch input {
-      display: none;
-    }
-
-    .switch i {
-      display: inline-block;
-      cursor: pointer;
-      padding-right: 20px;
-      transition: all ease 0.2s;
-      -webkit-transition: all ease 0.2s;
-      border-radius: 20px;
-      box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
-    }
-
-    .switch i::before {
-      display: block;
-      content: '';
-      width: 30px;
-      height: 30px;
-      padding: 1px;
-      border-radius: 20px;
-      background: white;
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-    }
-
-    .switch :checked + i {
-      padding-right: 0;
-      padding-left: 20px;
-      background: rgb(100, 189, 99);
-    }
-
-    /* Datepicker */
-
-    .datepicker {
-      .input-group-addon {
-        display: inline-block;
-        position: relative;
-        top: -2px;
-        left: -2px;
-      }
-
-      i.glyphicon {
-        vertical-align: top;
-      }
-
-      .rdt {
-        display: inline-block;
-      }
-    }
-
-    /* slider */
-
-    $slider-line-height: 8px;
-    $slider-handle-size: 26px;
-
-    .slider {
-      display: inline-block;
-      vertical-align: middle;
-      position: relative;
-
-      .slider-handle {
-        position: absolute;
-        width: $slider-handle-size;
-        height: $slider-handle-size;
-        background: $white;
-        border: 0 solid transparent;
-
-        @include box-shadow(inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 5));
-
-        &:focus {
-          outline: 0;
-        }
-
-        &.round {
-          border-radius: 50%;
-        }
-
-        &.triangle {
-          background: transparent none;
-        }
-      }
-
-      &.slider-horizontal {
-        width: 210px;
-        height: $slider-line-height;
-
-        .slider-track {
-          height: $slider-line-height/2;
-          width: 100%;
-          margin-top: -$slider-line-height/4;
-          top: 50%;
-          left: 0;
-        }
-
-        .slider-selection {
-          height: 100%;
-          top: 0;
-          bottom: 0;
-        }
-
-        .slider-handle {
-          margin-left: -$slider-handle-size/2;
-          margin-top: -$slider-handle-size*3/8;
-
-          &.triangle {
-            border-width: 0 $slider-line-height/2 $slider-line-height/2 $slider-line-height/2;
-            width: 0;
-            height: 0;
-            border-bottom-color: #0480be;
-            margin-top: 0;
-          }
-        }
-      }
-
-      &.slider-vertical {
-        height: 210px;
-        width: $slider-line-height;
-
-        .slider-track {
-          width: $slider-line-height/2;
-          height: 100%;
-          margin-left: -$slider-line-height/4;
-          left: 50%;
-          top: 0;
-        }
-
-        .slider-selection {
-          width: 100%;
-          left: 0;
-          top: 0;
-          bottom: 0;
-        }
-
-        .slider-handle {
-          margin-left: -$slider-handle-size*3/8;
-          margin-top: -$slider-handle-size/2;
-
-          &.triangle {
-            border-width: $slider-line-height/2 0 $slider-line-height/2 $slider-line-height/2;
-            width: 1px;
-            height: 1px;
-            border-left-color: #0480be;
-            margin-left: 0;
-          }
-        }
-      }
-
-      &.slider-disabled {
-        .slider-handle {
-          //     @include gradient-y(#dfdfdf, #bebebe);
-        }
-
-        .slider-track {
-          @include gradient-y(#e5e5e5, #e9e9e9);
-
-          cursor: not-allowed;
-        }
-      }
-
-      input {
-        display: none;
-      }
-
-      .tooltip-inner {
-        white-space: nowrap;
-      }
-    }
-
-    .slider-selection {
-      position: absolute;
-      background: theme-color('primary');
-
-      @include box-shadow(inset 0 -1px 0 rgba(0, 0, 0, 0.15));
-
-      box-sizing: border-box;
-      border-radius: $border-radius;
-    }
-
-    .slider-danger .slider .slider-selection {
-      background: theme-color('danger'); // $brand-danger;
-    }
-
-    .slider-success .slider .slider-selection {
-      background: theme-color('success'); // $brand-success;
-    }
-
-    .slider-warning .slider .slider-selection {
-      background: theme-color('warning'); // $brand-warning;
-    }
-
-    .slider-info .slider .slider-selection {
-      background: theme-color('info'); // $brand-info;
-    }
-
-    .slider-inverse .slider .slider-selection {
-      background: $gray-700; // $gray;
-    }
-
-    .slider-track {
-      position: absolute;
-      cursor: pointer;
-      border-radius: $border-radius;
-
-      @include gradient-y(#eee, #f8f8f8);
-      @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.1));
-    }
-
-    /*  file input */
-
-    .fileinput.fileinput-new {
-      .thumbnail {
-        padding: $thumbnail-padding;
-        line-height: $line-height-base;
-        background-color: $thumbnail-bg;
-        border: $thumbnail-border-width solid $thumbnail-border-color;
-        border-radius: $thumbnail-border-radius;
-        transition: all 0.2s ease-in-out;
-
-        @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.075));
-      }
-
-      &.fileinput-fix {
-        width: 200px;
-        height: 150px;
-      }
-    }
-
-    .btn {
-      label {
-        margin-bottom: 0;
-      }
-    }
-
-    .fileinput-preview.fileinput-exists {
-      border: 1px solid $input-border-color;
-      border-radius: $border-radius;
-      padding: 5px;
-    }
-
-    .fileinput.input-group {
-      display: flex;
-    }
-
-    .fileinput-new.input-group .btn-file,
-    .fileinput-new .input-group .btn-file {
-      border-radius: 0 $border-radius $border-radius 0;
-
-      &.btn-xs,
-      &.btn-sm {
-        border-radius: 0 $border-radius-sm $border-radius-sm 0;
-      }
-
-      &.btn-lg {
-        border-radius: 0 $border-radius-lg $border-radius-lg 0;
-      }
-    }
-
-    .form-group.has-warning .fileinput {
-      .fileinput-preview {
-        color: #fff;
-      }
-
-      .thumbnail {
-        border-color: theme-color('warning');
-      }
-    }
-
-    .form-group.has-error .fileinput {
-      .fileinput-preview {
-        color: #fff;
-      }
-
-      .thumbnail {
-        border-color: theme-color('danger');
-      }
-    }
-
-    .form-group.has-success .fileinput {
-      .fileinput-preview {
-        color: #fff;
-      }
-
-      .thumbnail {
-        border-color: theme-color('success');
-      }
-    }
-
-    .btn-label {
-      background: transparent;
-      left: 2px;
-      padding: 1px 6px;
-    }
-
-    // Opposite alignment of blockquote
-    .blockquote {
-      padding: ($spacer / 2) $spacer;
-      margin-bottom: $spacer;
-      font-size: $blockquote-font-size;
-      border-left: 0.25rem solid $gray-300;
-    }
-
-    .blockquote footer {
-      display: block;
-      font-size: 80%; // back to default font-size
-      color: $blockquote-small-color;
-
-      &::before {
-        content: '\2014 \00A0'; // em dash, nbsp
-      }
-    }
-
-    .blockquote-reverse {
-      padding-right: $spacer;
-      padding-left: 0;
-      text-align: right;
-      border-right: 0.25rem solid $gray-300;
-      border-left: 0;
-    }
-
-    .blockquote-reverse footer {
-      &::before {
-        content: '';
-      }
-
-      &::after {
-        content: '\00A0 \2014'; // nbsp, em dash
-      }
-    }
-  }
-}
-
-.dropzone {
-  width: 100%;
-  text-align: center;
-  padding: 40px 10px;
-  height: 200px;
-  border: 2px dashed #ccc;
-
-  @include border-radius($border-radius);
-
-  img {
-    max-height: 100px;
-    max-width: 150px;
-    border-radius: 5px;
-  }
-}

@@ -4,22 +4,45 @@ import { connect } from 'react-redux';
 import {
 import {
   Row,
   Row,
   Col,
   Col,
+  Button,
+  Form,
+  FormGroup,
 } from 'reactstrap';
 } from 'reactstrap';
 
 
 import Widget from '../../components/Widget/Widget';
 import Widget from '../../components/Widget/Widget';
 
 
-import s from './VideoAnalysis.module.scss';
-
 class Dashboard extends React.Component {
 class Dashboard extends React.Component {
   constructor(props) {
   constructor(props) {
     super(props);
     super(props);
+    this.onChangeInputVideo = this.onChangeInputVideo.bind(this);
+    this.onClickSaveVideo = this.onClickSaveVideo.bind(this);
     this.state = {
     this.state = {
-      checkedArr: [false, false, false],
+      videoFiles: [],
     };
     };
   }
   }
 
 
-  async componentDidUpdate() {
-    const isReceivingData = true;
+  onChangeInputVideo(e) {
+    const files = [];
+    const reader = new FileReader();
+    files.push(e.target.files[0]);
+    reader.onloadend = () => {
+      files[0].preview = reader.result;
+      files[0].toUpload = true;
+      this.setState({
+        videoFiles: files,
+      });
+    };
+    reader.readAsDataURL(e.target.files[0]);
+  }
+
+  onClickSaveVideo(e) {
+    e.preventDefault();
+    console.log(this.state.videoFiles);
+    console.log("upload video");
+    this.setState({
+      videoFiles:[],
+    });
+    // post request
   }
   }
 
 
   static propTypes = {
   static propTypes = {
@@ -29,26 +52,34 @@ class Dashboard extends React.Component {
 
 
   render() {
   render() {
     return (
     return (
-      <div className={s.root}>
+      <div>
         <h1 className="page-title">Video Analysis <small><small>Performance</small></small></h1>
         <h1 className="page-title">Video Analysis <small><small>Performance</small></small></h1>
         <Row>
         <Row>
           <Col lg={9} xs={12}>
           <Col lg={9} xs={12}>
             <Widget
             <Widget
               title={<h5> Registrate <span className="fw-semi-bold">Video</span></h5>}
               title={<h5> Registrate <span className="fw-semi-bold">Video</span></h5>}
             >
             >
-              <div>
-                <div className="text-center" style={{ height: '300px' }} />
-                <p className="fs-mini text-muted">
-                </p>
-              </div>
+              <Form>
+                <FormGroup style={{margin:'15px'}}>
+                  <Col md="8">
+                    <input
+                      accept="video/*" onChange={this.onChangeInputVideo}
+                      id="fileupload"
+                      type="file" name="file" className="display-none"
+                    />
+                    <div>
+                      <Button type="button" color="default" onClick={this.onClickSaveVideo} style={{margin:'10px 0px 0px 0px'}}>Select video</Button>
+                    </div>
+                  </Col>
+                </FormGroup>
+              </Form>
             </Widget>
             </Widget>
-          </Col>
+            </Col>
         </Row>
         </Row>
         <Row>
         <Row>
           <Col lg={9} xs={12}>
           <Col lg={9} xs={12}>
             <Widget
             <Widget
               title={<h5><span className="fw-semi-bold">Results</span></h5>}
               title={<h5><span className="fw-semi-bold">Results</span></h5>}
-              fetchingData={true}
             >
             >
               <div>
               <div>
                 <div className="text-center" style={{ height: '300px' }} />
                 <div className="text-center" style={{ height: '300px' }} />

-@import '../../styles/app';
-
-.root {
-  :global {
-    .post-comments footer {
-      margin: 0 (-$widget-padding-horizontal) (-$widget-padding-vertical);
-      padding: $widget-padding-vertical $widget-padding-horizontal;
-    }
-
-    .stat-item .name {
-      margin-top: 10px;
-    }
-  }
-}
-
-.table {
-  :global(.table.table-sm) {
-    td {
-      font-size: 1rem;
-      vertical-align: middle;
-    }
-  }
-}
-.visitElement {
-  h6 {
-    font-size: 115%;
-  }
-}
\ No newline at end of file