박선진 / video-emergency-detection

Go to a project
Toggle navigation Toggle navigation pinning
박선진
514bc788 1 parent f2359ae9

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

Inline Side-by-side
Showing 4 changed files with 48 additions and 420 deletions
......@@ -16,7 +16,6 @@ class Subject extends PureComponent {
this.onChangeInputImage = this.onChangeInputImage.bind(this);
this.onClickSaveImage = this.onClickSaveImage.bind(this);
this.state = {
defaultSelectVal: 'Andromeda',
imageFiles: [],
};
}
......@@ -42,6 +41,7 @@ class Subject extends PureComponent {
this.setState({
imageFiles:[],
});
// post request
}
render() {
......@@ -57,18 +57,16 @@ class Subject extends PureComponent {
<p>침입자로 분류하지 않을 방문자의 사진을 업로드 하세요.</p>
</blockquote>
<FormGroup row>
<FormGroup style={{margin:'10px 0px 0px 0px'}}>
<Label md="3" className="text-md-right">
Image upload
</Label>
<Col md="8">
<input
accept="image/*" onChange={this.onChangeInputImage}
id="fileupload2"
id="fileupload"
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.map((file, idx) => (
<img alt="..." src={file.preview} key={`img-id-${idx.toString()}`} />))}
......@@ -76,10 +74,8 @@ class Subject extends PureComponent {
alt="..."
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOTEiIGhlaWdodD0iMTQxIj48cmVjdCB3aWR0aD0iMTkxIiBoZWlnaHQ9IjE0MSIgZmlsbD0iI2VlZSIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9Ijk1LjUiIHk9IjcwLjUiIHN0eWxlPSJmaWxsOiNhYWE7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LXNpemU6MTJweDtmb250LWZhbWlseTpBcmlhbCxIZWx2ZXRpY2Esc2Fucy1zZXJpZjtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj4xOTF4MTQxPC90ZXh0Pjwvc3ZnPg=="
/>}
</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>
</Col>
</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 {
Row,
Col,
Button,
Form,
FormGroup,
} from 'reactstrap';
import Widget from '../../components/Widget/Widget';
import s from './VideoAnalysis.module.scss';
class Dashboard extends React.Component {
constructor(props) {
super(props);
this.onChangeInputVideo = this.onChangeInputVideo.bind(this);
this.onClickSaveVideo = this.onClickSaveVideo.bind(this);
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 = {
......@@ -29,26 +52,34 @@ class Dashboard extends React.Component {
render() {
return (
<div className={s.root}>
<div>
<h1 className="page-title">Video Analysis <small><small>Performance</small></small></h1>
<Row>
<Col lg={9} xs={12}>
<Widget
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>
</Col>
</Col>
</Row>
<Row>
<Col lg={9} xs={12}>
<Widget
title={<h5><span className="fw-semi-bold">Results</span></h5>}
fetchingData={true}
>
<div>
<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