Merge pull request 'them search image' (#1) from feature/search-img into dev
Reviewed-on: huyt/fsi_project#1
This commit is contained in:
commit
ff58a9f573
|
|
@ -9,11 +9,15 @@
|
|||
"@testing-library/user-event": "^13.5.0",
|
||||
"antd": "^4.18.2",
|
||||
"axios": "^0.24.0",
|
||||
"html-react-parser": "^1.4.5",
|
||||
"jquery": "^3.6.0",
|
||||
"moment": "^2.29.1",
|
||||
"node-sass": "^7.0.1",
|
||||
"react": "^17.0.2",
|
||||
"react-bootstrap": "1.0.1",
|
||||
"react-datepicker": "^4.6.0",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-file-reader": "^1.1.4",
|
||||
"react-js-pagination": "^3.0.3",
|
||||
"react-router-dom": "^6.2.1",
|
||||
"react-scripts": "5.0.0",
|
||||
|
|
|
|||
9387
app/public/css/core.css
Normal file
9387
app/public/css/core.css
Normal file
File diff suppressed because it is too large
Load Diff
3
app/public/css/semantic.min.css
vendored
Normal file
3
app/public/css/semantic.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
app/public/img/photo-placeholder.png
Normal file
BIN
app/public/img/photo-placeholder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
|
@ -33,6 +33,7 @@
|
|||
<link href="%PUBLIC_URL%/assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
|
||||
<!--RTL version:<link href="assets/vendors/base/vendors.bundle.rtl.css" rel="stylesheet" type="text/css" />-->
|
||||
<link href="%PUBLIC_URL%/assets/demo/demo9/base/style.bundle.css" rel="stylesheet" type="text/css" />
|
||||
<link rel="stylesheet" href="%PUBLIC_URL%/css/core.css">
|
||||
<title>FSI</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -276,3 +276,45 @@ button.close:hover {
|
|||
height: 50px !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
.col_xxl-4 {
|
||||
-webkit-box-flex: 0!important;
|
||||
flex: 0 0 33.33333%!important;
|
||||
max-width: 33.33333%!important;
|
||||
}
|
||||
.col_xxl-6 {
|
||||
-webkit-box-flex: 0!important;
|
||||
flex: 0 0 50%!important;
|
||||
max-width: 50%!important;
|
||||
}
|
||||
}
|
||||
|
||||
/* .box {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
|
||||
.box-block {
|
||||
padding: 1.25rem;
|
||||
} */
|
||||
|
||||
.ant-card-body {
|
||||
padding: 10px!important;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.hide_desktop {
|
||||
display: none;
|
||||
}
|
||||
.modal-90w {
|
||||
width: 90%;
|
||||
max-width: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-control-next-icon, .carousel-control-prev-icon {
|
||||
background-image: none;
|
||||
}
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import React from 'react'
|
||||
import ListItem from './components/List/ListItem';
|
||||
import Login from './components/Login/Login';
|
||||
import SearchImage from './components/SearchImg/SearchImage';
|
||||
import 'antd/dist/antd.css';
|
||||
import "./App.css";
|
||||
import { BrowserRouter as Router, Navigate, Route, Routes } from 'react-router-dom';
|
||||
|
|
@ -13,6 +14,7 @@ function App() {
|
|||
<Routes>
|
||||
<Route path="/" element={<Navigate replace to="/list-famous" />} />
|
||||
<Route path='/login' element={<Login />} />
|
||||
<Route path='/search-image' element={<SearchImage />} />
|
||||
<Route path="/list-famous" element={<ListItem />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
|
|
|
|||
592
app/src/components/SearchImg/SearchImage.js
Normal file
592
app/src/components/SearchImg/SearchImage.js
Normal file
|
|
@ -0,0 +1,592 @@
|
|||
import React, { Component } from 'react';
|
||||
import swal from 'sweetalert';
|
||||
import { Redirect } from 'react-router-dom';
|
||||
import $ from 'jquery';
|
||||
import Pagination from "react-js-pagination";
|
||||
import moment from 'moment';
|
||||
import { Row, Col, Image, ProgressBar } from 'react-bootstrap';
|
||||
import { PulseLoader } from 'react-spinners';
|
||||
// import { css } from '@emotion/core';
|
||||
import DatePicker from "react-datepicker";
|
||||
import "react-datepicker/dist/react-datepicker.css";
|
||||
// import ReactTooltip from 'react-tooltip'
|
||||
import ReactFileReader from 'react-file-reader';
|
||||
import Parser from 'html-react-parser';
|
||||
import { HOST } from '../../config/index';
|
||||
import { Card, Avatar, Image as ImageAntd } from 'antd';
|
||||
import { UserOutlined } from '@ant-design/icons';
|
||||
// import ModalViewHistory from '../../modal/ModalViewHistory';
|
||||
|
||||
// const override = css`
|
||||
// display: block;
|
||||
// margin: 0 auto;
|
||||
// border-color: red;
|
||||
// `;
|
||||
|
||||
|
||||
class SearchImage extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
// isLogin: Store.getState().isLogin.isLogin,
|
||||
// access_token: Store.getState().isLogin.access_token,
|
||||
// box_engine_cf: Store.getState().boxai.box_engine_cf[0],
|
||||
loading: false,
|
||||
listHistory: [],
|
||||
crrHistory: [],
|
||||
dataVerification: null,
|
||||
filesImagePerson: "",
|
||||
page_num: 1,
|
||||
page_size: 10,
|
||||
total_count: 0,
|
||||
// startDate: new Date(moment().format("YYYY-MM-DD") + ' 00:00:00'),
|
||||
// endDate: new Date(moment().format("YYYY-MM-DD") + ' 23:59:59'),
|
||||
valueRes: 1,
|
||||
threshold: 50,
|
||||
similarity: 70,
|
||||
value: 0,
|
||||
selectedEncoding: [],
|
||||
boxs: [],
|
||||
slides: [],
|
||||
encodings: [],
|
||||
plugins: [],
|
||||
nimages: [],
|
||||
startDate: new Date(),
|
||||
endDate: new Date(),
|
||||
showModal: false,
|
||||
crrdatainfo: null,
|
||||
offset: 0,
|
||||
showFirst: 0,
|
||||
showLast: 0,
|
||||
totalLength: 0,
|
||||
};
|
||||
this.onchange = this.onchange.bind(this);
|
||||
this.closeModal = this.closeModal.bind(this);
|
||||
|
||||
var itemsPerPage = 1;
|
||||
if ($(window).width() < 768) {
|
||||
itemsPerPage = 6
|
||||
} else {
|
||||
itemsPerPage = 6
|
||||
}
|
||||
this.itemsPerPage = itemsPerPage;
|
||||
// Store.subscribe(() => {
|
||||
// if (Store.getState().boxai.box_engine_cf.length !== 0) {
|
||||
// this.setState({
|
||||
// ...this.state,
|
||||
// loading: false,
|
||||
// valueRes: 1,
|
||||
// listHistory: [],
|
||||
// crrHistory: [],
|
||||
// // isLogin: Store.getState().isLogin.isLogin,
|
||||
// // access_token: Store.getState().isLogin.access_token,
|
||||
// // box_engine_cf: Store.getState().boxai.box_engine_cf[0],
|
||||
// dataImageMoveChange: null,
|
||||
// });
|
||||
// } else {
|
||||
// this.setState({
|
||||
// ...this.state,
|
||||
// loading: false,
|
||||
// valueRes: 1,
|
||||
// listHistory: [],
|
||||
// crrHistory: [],
|
||||
// // isLogin: Store.getState().isLogin.isLogin,
|
||||
// // access_token: Store.getState().isLogin.access_token,
|
||||
// // box_engine_cf: Store.getState().boxai.box_engine_cf[0],
|
||||
// dataImageMoveChange: null,
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
|
||||
}
|
||||
componentDidMount() {
|
||||
window.$('.carousel').carousel({
|
||||
interval: false,
|
||||
wrap: false
|
||||
}).on('slid.bs.carousel', function () {
|
||||
var curSlide = window.$('.active');
|
||||
if (curSlide.is(':first-child')) {
|
||||
window.$('.carousel-control-prev').hide();
|
||||
window.$('.carousel-control-next').show();
|
||||
} else if (curSlide.is(':last-child')) {
|
||||
window.$('.carousel-control-prev').show();
|
||||
window.$('.carousel-control-next').hide();
|
||||
} else {
|
||||
window.$('.carousel-control-prev').show();
|
||||
window.$('.carousel-control-next').show();
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
onchange(value) {
|
||||
this.setState({ value });
|
||||
}
|
||||
closeModal() {
|
||||
this.setState({
|
||||
showModal: false,
|
||||
})
|
||||
}
|
||||
handlePrevChange() {
|
||||
var index = this.state.value;
|
||||
index = index - 1
|
||||
if (index > 0)
|
||||
this.setState({
|
||||
pageNumber: 1,
|
||||
value: index,
|
||||
selectedEncoding: this.state.encodings[index],
|
||||
|
||||
}, () => {
|
||||
this.getPerson()
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
handleNextChange() {
|
||||
var index = this.state.value;
|
||||
if (index < (this.state.encodings.length - 1))
|
||||
index = index + 1
|
||||
this.setState({
|
||||
pageNumber: 1,
|
||||
value: index,
|
||||
selectedEncoding: this.state.encodings[index],
|
||||
|
||||
}, () => {
|
||||
this.getPerson()
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
changeFace(index) {
|
||||
|
||||
this.setState({
|
||||
pageNumber: 1,
|
||||
value: index,
|
||||
selectedEncoding: this.state.encodings[index],
|
||||
|
||||
}, () => {
|
||||
this.getPerson()
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
getPerson() {
|
||||
// if (this.state.box_engine_cf === undefined || !this.state.filesImagePerson) return;
|
||||
if (!this.state.valueRes || !this.state.threshold) {
|
||||
return swal('Cảnh báo!', 'Vui lòng điền đầy đủ các trường', 'warning');
|
||||
}
|
||||
|
||||
this.setState({
|
||||
loading: true,
|
||||
});
|
||||
fetch(`${HOST}/api/search_people`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6WyJjbGFzc2lmeS9sb2dpbiJdLCJleHAiOjE2NDE5NzQ5NjV9.2F2PAUKjpfjPJKzgvzgCDtyBuTXDRl86EnJJGdYgWTM'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
encodings: this.state.selectedEncoding,
|
||||
image: "",
|
||||
threshold: parseInt(this.state.threshold) / 100,
|
||||
result_number: this.state.valueRes,
|
||||
})
|
||||
}).then((response) => {
|
||||
return response.json()
|
||||
}).then((rs) => {
|
||||
console.log(rs)
|
||||
if (rs.status === 10000) {
|
||||
var data = rs.data;
|
||||
this.setState({
|
||||
listHistory: data,
|
||||
loading: false,
|
||||
// total_count: rs.count,
|
||||
});
|
||||
this.FilterSearch(this.state.page_num)
|
||||
}
|
||||
else {
|
||||
swal("Lỗi!", "Ảnh không hợp lệ!", "error");
|
||||
this.setState({
|
||||
listHistory: [],
|
||||
loading: false,
|
||||
total_count: 0,
|
||||
});
|
||||
}
|
||||
}).catch((error) => {
|
||||
if (error) {
|
||||
console.log(error)
|
||||
swal("Lỗi!", "Ảnh không hợp lệ!", "error");
|
||||
this.setState({
|
||||
listHistory: [],
|
||||
loading: false,
|
||||
total_count: 0,
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
getFaces() {
|
||||
var image_base64;
|
||||
image_base64 = this.state.filesImagePerson.replace('data:image/png;base64,', '');
|
||||
image_base64 = image_base64.replace('data:image/jpg;base64,', '');
|
||||
image_base64 = image_base64.replace('data:image/jpeg;base64,', '');
|
||||
|
||||
fetch(`${HOST}/api/face_images/faces`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
image: image_base64
|
||||
})
|
||||
}).then((response) => {
|
||||
return response.json()
|
||||
}).then((rs) => {
|
||||
if (rs.status === 10000) {
|
||||
var boxs = []
|
||||
var slides = []
|
||||
var item = ""
|
||||
var encodings = []
|
||||
rs.imgs.map((value, index) => {
|
||||
var item_active = "<div class='carousel-item active pt-3'>"
|
||||
+ "<img style='margin-left: 5px;width: 75px; opacity: 1;cursor: pointer;' src=" + `data:image/png;base64,` + " dangerouslySetInnerHTML={{__html:this.state.userText}} onClick={this.toggleTranspose()} />"
|
||||
+ "</div>"
|
||||
// var item_inactive = "<div class='carousel-item'>"
|
||||
// + "<img src="+`data:image/png;base64,${value} `+ "style={{ marginLeft: '5px', width: '75px', opacity: 1, cursor: 'pointer' }} alt='...' />"
|
||||
// + "</div>"
|
||||
if (index === 0) {
|
||||
item += "<div class='carousel-item active pt-3'>"
|
||||
item += "<img style='margin-left: 5px;width: 75px; opacity: 1;cursor: pointer;' alt='...' src=" + `data:image/png;base64,${value} ` + " />"
|
||||
|
||||
}
|
||||
else if (index % 2 === 0) {
|
||||
item += "<div class='carousel-item pt-3'>"
|
||||
}
|
||||
console.log("index % 2", index % 2)
|
||||
if (index !== 0 && (index % 2 === 0)) {
|
||||
item += "<img style='margin-left: 5px;width: 75px; opacity: 1;cursor: pointer;' src=" + `data:image/png;base64,${value} ` + " />"
|
||||
|
||||
}
|
||||
else if (index !== 0) {
|
||||
item += "<img style='margin-left: 5px;width: 75px; opacity: 1;cursor: pointer;' src=" + `data:image/png;base64,${value} ` + " />"
|
||||
item += "</div>"
|
||||
}
|
||||
|
||||
item = item_active
|
||||
var id_image = "img_" + index
|
||||
boxs.push(rs.boxes[index])
|
||||
encodings.push(rs.encodings[index])
|
||||
});
|
||||
this.setState({
|
||||
encodings: encodings,
|
||||
slides: Parser(item),
|
||||
boxs: boxs,
|
||||
value: 0,
|
||||
selectedEncoding: encodings[0],
|
||||
listHistory: [],
|
||||
nimages: rs.imgs,
|
||||
total_count: 0,
|
||||
|
||||
numbershow: (rs.imgs.length > 3 ? 3 : rs.imgs.length),
|
||||
}, () => {
|
||||
if (this.state.encodings.length === 1) {
|
||||
window.$('.carousel-control-prev').hide();
|
||||
window.$('.carousel-control-next').hide();
|
||||
}
|
||||
else {
|
||||
window.$('.carousel-control-prev').show();
|
||||
window.$('.carousel-control-next').show();
|
||||
}
|
||||
|
||||
if (this.state.encodings.length >= 1)
|
||||
this.changeFace(0)
|
||||
})
|
||||
|
||||
//console.log("numbershow", this.state.numbershow)
|
||||
}
|
||||
else {
|
||||
swal("Lỗi!", "Ảnh không hợp lệ!", "error");
|
||||
this.setState({
|
||||
listHistory: [],
|
||||
loading: false,
|
||||
total_count: 0,
|
||||
});
|
||||
}
|
||||
}).catch((error) => {
|
||||
if (error) {
|
||||
console.log(error)
|
||||
swal("Lỗi!", "Ảnh không hợp lệ!", "error");
|
||||
this.setState({
|
||||
listHistory: [],
|
||||
loading: false,
|
||||
total_count: 0,
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onFilesChangeImagePerson = async (files) => {
|
||||
document.getElementById('previewImagePerson').src = files.base64;
|
||||
this.setState({
|
||||
filesImagePerson: files.base64,
|
||||
loading: false,
|
||||
plugins: []
|
||||
});
|
||||
this.getFaces();
|
||||
|
||||
}
|
||||
|
||||
isChangeRes = (event) => {
|
||||
this.setState({
|
||||
// listHistory: [],
|
||||
// loading: true,
|
||||
pageNumber: 1,
|
||||
valueRes: event.target.value,
|
||||
}, () => {
|
||||
//this.getPerson()
|
||||
})
|
||||
}
|
||||
|
||||
isChangeThreshold = (event) => {
|
||||
this.setState({
|
||||
// listHistory: [],
|
||||
// loading: true,
|
||||
pageNumber: 1,
|
||||
threshold: event.target.value,
|
||||
}, () => {
|
||||
//this.getPerson()
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
FilterSearch = (activePage) => {
|
||||
const offset = (activePage - 1) * this.itemsPerPage;
|
||||
console.log(offset)
|
||||
console.log(offset + this.itemsPerPage)
|
||||
|
||||
console.log("base",this.state.listHistory)
|
||||
|
||||
const crrHistory = this.state.listHistory.slice(offset, offset + this.itemsPerPage);
|
||||
this.setState({
|
||||
crrHistory,
|
||||
offset,
|
||||
showFirst: offset + 1,
|
||||
showLast: crrHistory.length + offset,
|
||||
totalLength: this.state.listHistory.length
|
||||
});
|
||||
}
|
||||
|
||||
handlePageChange = (pageNumber) => {
|
||||
this.setState({
|
||||
...this.state,
|
||||
// loading: true,
|
||||
page_num: pageNumber,
|
||||
}, () => {
|
||||
this.FilterSearch(pageNumber);
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
// if (this.state.isLogin === false) {
|
||||
// return (
|
||||
// <Redirect to={'/login'} />
|
||||
// )
|
||||
// }
|
||||
let rsImages = this.state.nimages.map((value, index) => {
|
||||
var item_active = ""
|
||||
if (index === 0) {
|
||||
|
||||
item_active =
|
||||
(
|
||||
<div key={value} class={"carousel-item active pt-3"}>
|
||||
<img alt="" src={`data:image/png;base64,${value} `} style={{ marginLeft: '5px', width: '75px', opacity: 1, cursor: 'pointer' }} onClick={() => this.changeFace(index)} class={"img-responsive"} />
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
else if (index > 0) {
|
||||
item_active =
|
||||
(
|
||||
<div key={value} class={"carousel-item pt-3"}>
|
||||
<img alt="" src={`data:image/png;base64,${value} `} style={{ marginLeft: '5px', width: '75px', opacity: 1, cursor: 'pointer' }} onClick={() => this.changeFace(index)} class={"img-responsive"} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return item_active
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
let bulletedImg = this.state.crrHistory.map((value, index) => {
|
||||
return (
|
||||
<div className="col-md-4 mb-4">
|
||||
<Card
|
||||
style={{ width: 300 }}
|
||||
// cover={<img style={{ height: '250px' }} alt="example" src={value.image_url} />}
|
||||
cover={<ImageAntd
|
||||
// width={200}
|
||||
preview={false}
|
||||
src={value.image_url}
|
||||
/>}
|
||||
>
|
||||
<p style={{wordWrap: "break-word"}}><strong>facebookID: </strong>{value.person_id}</p>
|
||||
<p style={{wordWrap: "break-word"}}><strong>ImageID: </strong>{value.image_id}</p>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="m-portlet m-portlet--mobile pb-3">
|
||||
<div className="m-portlet__head">
|
||||
<div className="m-portlet__head-caption">
|
||||
<div className="m-portlet__head-title">
|
||||
<h3 className="m-portlet__head-text">
|
||||
Tìm kiếm ảnh
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="m-portlet__body pt-2">
|
||||
<div className="m-grid__item m-grid__item--fluid m-wrapper" style={{ backgroundColor: 'white' }}>
|
||||
<div className="m-content mt-3-phone pd_phone_0 p-3">
|
||||
<div className="m-form m-form--fit m-form--label-align-right">
|
||||
<div className="row m-0">
|
||||
<div className="col-md-2 px-0">
|
||||
<img src="./img/photo-placeholder.png" id="previewImagePerson" className="text-center" height="350px" width='100%' alt="" />
|
||||
{/* <div style={this.state.outline}></div> */}
|
||||
<div className="text-center p-8">
|
||||
<ReactFileReader fileTypes={['image/png', 'image/jpg', 'image/jpeg']} base64={true} multipleFiles={false} handleFiles={this.onFilesChangeImagePerson} >
|
||||
<button style={{ marginTop: '10px' }} className={'btn m-btn--icon m-btn btn-default m-loader--success m-loader--right'}>
|
||||
<span >
|
||||
<i className="la la-cloud-upload"></i>
|
||||
<span>Tải lên ảnh chân dung</span>
|
||||
</span>
|
||||
</button>
|
||||
</ReactFileReader>
|
||||
|
||||
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
|
||||
<div class="carousel-inner" data-interval="false">
|
||||
{rsImages}
|
||||
</div>
|
||||
<a className={`carousel-control-prev ${rsImages.length <= 1 ? "d-none" : ""}`} href="#carouselExampleControls" role="button" data-slide="prev" onClick={() => this.handlePrevChange()}>
|
||||
<span class="carousel-control-prev-icon fa fa-chevron-left" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a className={`carousel-control-next ${rsImages.length <= 1 ? "d-none" : ""}`} href="#carouselExampleControls" role="button" data-slide="next" onClick={() => this.handleNextChange()}>
|
||||
<span class="carousel-control-next-icon fa fa-chevron-right" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
<div style={{ marginTop: '10px', textAlign: 'left' }}>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<span>Số kết quả: </span>
|
||||
</td>
|
||||
<td>
|
||||
<input className="form-control form-control-sm" type="number" step="1" min="1" name="m_table_1_length" value={this.state.valueRes} onChange={(event) => this.isChangeRes(event)} aria-controls="m_table_1" />
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span>Tỷ lệ giống:</span>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<input className="form-control form-control-sm" type="number" min="1" max="100" step="1" name="m_table_1_length" value={this.state.threshold} onChange={(event) => this.isChangeThreshold(event)} aria-controls="m_table_1" />
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<div style={{ marginTop: '10px' }} className="ml-2 mb-mobile-10">
|
||||
<button
|
||||
onClick={() => {
|
||||
this.setState({
|
||||
page_num: 1,
|
||||
listHistory: []
|
||||
}, () => {
|
||||
this.getPerson();
|
||||
})
|
||||
}}
|
||||
className="btn btn-accent m-btn m-btn--icon">
|
||||
<span>
|
||||
<i className="la la-search" />
|
||||
<span>Tìm kiếm</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="col-md-10">
|
||||
<div className="pl-2 row">
|
||||
<Pagination
|
||||
prevPageText='Trang trước'
|
||||
nextPageText='Trang sau'
|
||||
firstPageText='Trang đầu'
|
||||
lastPageText='Trang cuối'
|
||||
activePage={this.state.page_num}
|
||||
itemsCountPerPage={this.itemsPerPage}
|
||||
totalItemsCount={this.state.totalLength}
|
||||
pageRangeDisplayed={5}
|
||||
onChange={this.handlePageChange}
|
||||
/>
|
||||
</div>
|
||||
<div className='row-sm row pl-3 pr-3 pb-3'>
|
||||
{bulletedImg}
|
||||
<PulseLoader
|
||||
// css={override}
|
||||
sizeUnit={"px"}
|
||||
size={12}
|
||||
margin={'2px'}
|
||||
color={'#36D7B7'}
|
||||
loading={this.state.loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* <div className="hide_desktop pl-2" style={{ 'paddingBottom': '50px' }}>
|
||||
<Pagination
|
||||
prevPageText='Trang trước'
|
||||
nextPageText='Trang sau'
|
||||
firstPageText='Trang đầu'
|
||||
lastPageText='Trang cuối'
|
||||
activePage={this.state.page_num}
|
||||
itemsCountPerPage={this.state.page_size}
|
||||
totalItemsCount={this.state.total_count}
|
||||
pageRangeDisplayed={pageRangeDisplayed}
|
||||
onChange={this.handlePageChange}
|
||||
/>
|
||||
</div> */}
|
||||
{/* <ModalViewHistory show={this.state.showModal} onHide={this.closeModal} box_engine_cf={this.state.box_engine_cf} crrdatainfo={this.state.crrdatainfo} /> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default SearchImage;
|
||||
15124
app/yarn.lock
15124
app/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user