dungnh/Face_Classify_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'feature/login-role' (#10) from feature/login-role into dev

Browse Source 
Reviewed-on: huyt/fsi_project#10
This commit is contained in:
huyt 2022-01-14 16:11:19 +00:00
commit 8916e9622d
11 changed files with 209 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/src/components/LabelImg/LabelImage.js
View File

@ -281,6 +281,7 @@ export default function LabelImage() {
</button>
</div>
</div>
{dataRole?.indexOf('person:edit') !== -1 ?
<div className="m-portlet__head-tools col-xl-1 d-flex align-items-center">
<button
onClick={(e) => {
@ -302,7 +303,7 @@ export default function LabelImage() {
<span>Thêm mới</span>
</span>
</button>
</div>
</div> : "" }
</div>
{/*begin: Datatable */}
<table className="table table-striped- table-bordered table-hover table-checkable" id="m_table_1">

3
app/src/components/List/ListItem.js
View File

@ -275,6 +275,7 @@ export default function ListItem() {
</button>
</div>
</div>
{dataRole?.indexOf('famous:edit') !== -1 ?
<div className="m-portlet__head-tools col-xl-1 d-flex align-items-center">
<button
onClick={(e) => {
@ -296,7 +297,7 @@ export default function ListItem() {
<span>Thêm mới</span>
</span>
</button>
</div>
</div> : "" }
</div>
{/*begin: Datatable */}
<table className="table table-striped- table-bordered table-hover table-checkable" id="m_table_1">

137
app/src/components/Modal/ModaEditLabel.js
View File

@ -154,7 +154,70 @@ const ModalEditLabel = (props) => {
// const uploadImage = async (options) => {
// const { file } = options;
// const base64 = await convertBase64(file)
// let dataUploadImg = {
// obj_id: crrData._id ? crrData._id : "",
// base64_image_list: [base64.split(',')[1]]
// }
// let promises = [];
// promises.push(
// axios
// .post(`${HOST}/api/face_images/famous_person`, dataUploadImg, {
// headers: {
// 'Accept': 'application/json',
// 'Content-Type': 'application/json',
// }
// })
// )
// await Promise.all(promises)
// .then((data) => {
// let success = false
// let manyFace = false
// let noFace = false
// for (let i = 0; i < data.length; i++) {
// const element = data[i];
// if (element.data.status === 10000) {
// let listImg = dataUpload
// setHostImg(element.data.image_host)
// listImg.unshift(element.data.data.toString())
// setDataUpload(...dataUpload)
// success = true
// } else if (element.data.status === 10003 && element.data.message === "Too many face in image") {
// manyFace = true
// } else if (element.data.status === 10003 && element.data.message === "No face in image") {
// noFace = true
// } else {
// success = false
// }
// }
// if (success) {
// let originData = crrImages
// originData.unshift(dataUpload[0].toString())
// let arrSet = [...new Set(originData)]
// setCrrImages(arrSet)
// setCheckDeleteMulti(false)
// } else if (manyFace) {
// swal("Thất bại", "Ảnh có nhiều khuôn mặt!", "error");
// } else if (noFace) {
// swal("Thất bại", "Ảnh không có khuôn mặt!", "error");
// } else {
// swal("Thất bại", "Lỗi hệ thống!", "error");
// }
// })
// .catch((err) => {
// console.log(err)
// });
// };
const uploadImage = async (options) => {
if (crrImages.length >= 3) {
swal("Cảnh báo", "Bạn chỉ được tải lên tối đa 3 ảnh!", "warning");
return
} else {
const { file } = options;
const base64 = await convertBase64(file)
@ -163,54 +226,32 @@ const ModalEditLabel = (props) => {
base64_image_list: [base64.split(',')[1]]
}
let promises = [];
promises.push(
axios
.post(`${HOST}/api/face_images/famous_person`, dataUploadImg, {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
}
})
)
await Promise.all(promises)
.then((data) => {
let success = false
let manyFace = false
let noFace = false
for (let i = 0; i < data.length; i++) {
const element = data[i];
if (element.data.status === 10000) {
let listImg = dataUpload
setHostImg(element.data.image_host)
listImg.unshift(element.data.data.toString())
setDataUpload(...dataUpload)
success = true
} else if (element.data.status === 10003 && element.data.message === "Too many face in image") {
manyFace = true
} else if (element.data.status === 10003 && element.data.message === "No face in image") {
noFace = true
} else {
success = false
}
}
if (success) {
let originData = crrImages
originData.unshift(dataUpload[0].toString())
let arrSet = [...new Set(originData)]
setCrrImages(arrSet)
setCheckDeleteMulti(false)
} else if (manyFace) {
swal("Thất bại", "Ảnh có nhiều khuôn mặt!", "error");
} else if (noFace) {
swal("Thất bại", "Ảnh không có khuôn mặt!", "error");
} else {
swal("Thất bại", "Lỗi hệ thống!", "error");
}
fetch(`${HOST}/api/face_images/famous_person`, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
// 'Authorization': token
},
body: JSON.stringify(dataUploadImg)
})
.catch((err) => {
console.log(err)
});
.then(res => res.json())
.then(data => {
if (data.status === 10000) {
setHostImg(data.image_host)
let listImg = [...crrImages]
listImg.unshift(data.data.toString())
setCrrImages(listImg)
setCheckDeleteMulti(false)
} else if (data.status === 10003) {
if (data.message === "Too many face in image") {
swal("Thất bại", "Ảnh có nhiều khuôn mặt!", "error");
} else {
swal("Thất bại", "Ảnh không hợp lệ", "error");
}
}
})
}
};
@ -351,7 +392,7 @@ const ModalEditLabel = (props) => {
customRequest = {uploadImage}
accept="image/*"
// multiple={true}
beforeUpload={checkLength}
// beforeUpload={checkLength}
showUploadList={false}
disabled={disableBtn}
>

141
app/src/components/Modal/ModalEdit.js
View File

@ -152,7 +152,70 @@ const Modaledit = (props) => {
}
}
// const uploadImage = async (options) => {
// const { file } = options;
// const base64 = await convertBase64(file)
// let dataUploadImg = {
// obj_id: crrData._id ? crrData._id : "",
// base64_image_list: [base64.split(',')[1]]
// }
// let promises = [];
// promises.push(
// axios
// .post(`${HOST}/api/face_images/famous_person`, dataUploadImg, {
// headers: {
// 'Accept': 'application/json',
// 'Content-Type': 'application/json',
// }
// })
// )
// await Promise.all(promises)
// .then((data) => {
// let success = false
// let manyFace = false
// let noFace = false
// for (let i = 0; i < data.length; i++) {
// const element = data[i];
// if (element.data.status === 10000) {
// let listImg = dataUpload
// setHostImg(element.data.image_host)
// listImg.unshift(element.data.data.toString())
// setDataUpload(...dataUpload)
// success = true
// } else if (element.data.status === 10003 && element.data.message === "Too many face in image") {
// manyFace = true
// } else if (element.data.status === 10003 && element.data.message === "No face in image") {
// noFace = true
// } else {
// success = false
// }
// }
// if (success) {
// let originData = crrImages
// originData.unshift(dataUpload[0].toString())
// let arrSet = [...new Set(originData)]
// setCrrImages(arrSet)
// setCheckDeleteMulti(false)
// } else if (manyFace) {
// swal("Thất bại", "Ảnh có nhiều khuôn mặt!", "error");
// } else if (noFace) {
// swal("Thất bại", "Ảnh không có khuôn mặt!", "error");
// } else {
// swal("Thất bại", "Lỗi hệ thống!", "error");
// }
// })
// .catch((err) => {
// console.log(err)
// });
// };
const uploadImage = async (options) => {
if (crrImages.length >= 3) {
swal("Cảnh báo", "Bạn chỉ được tải lên tối đa 3 ảnh!", "warning");
return
} else {
const { file } = options;
const base64 = await convertBase64(file)
@ -161,58 +224,34 @@ const Modaledit = (props) => {
base64_image_list: [base64.split(',')[1]]
}
let promises = [];
promises.push(
axios
.post(`${HOST}/api/face_images/famous_person`, dataUploadImg, {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
}
})
)
await Promise.all(promises)
.then((data) => {
let success = false
let manyFace = false
let noFace = false
for (let i = 0; i < data.length; i++) {
const element = data[i];
if (element.data.status === 10000) {
let listImg = dataUpload
setHostImg(element.data.image_host)
listImg.unshift(element.data.data.toString())
setDataUpload(...dataUpload)
success = true
} else if (element.data.status === 10003 && element.data.message === "Too many face in image") {
manyFace = true
} else if (element.data.status === 10003 && element.data.message === "No face in image") {
noFace = true
} else {
success = false
}
}
if (success) {
let originData = crrImages
originData.unshift(dataUpload[0].toString())
let arrSet = [...new Set(originData)]
setCrrImages(arrSet)
setCheckDeleteMulti(false)
} else if (manyFace) {
swal("Thất bại", "Ảnh có nhiều khuôn mặt!", "error");
} else if (noFace) {
swal("Thất bại", "Ảnh không có khuôn mặt!", "error");
} else {
swal("Thất bại", "Lỗi hệ thống!", "error");
}
fetch(`${HOST}/api/face_images/famous_person`, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
// 'Authorization': token
},
body: JSON.stringify(dataUploadImg)
})
.catch((err) => {
console.log(err)
});
.then(res => res.json())
.then(data => {
if (data.status === 10000) {
setHostImg(data.image_host)
let listImg = [...crrImages]
listImg.unshift(data.data.toString())
setCrrImages(listImg)
setCheckDeleteMulti(false)
} else if (data.status === 10003) {
if (data.message === "Too many face in image") {
swal("Thất bại", "Ảnh có nhiều khuôn mặt!", "error");
} else {
swal("Thất bại", "Ảnh không hợp lệ", "error");
}
}
})
}
};
const convertBase64 = (file) => {
return new Promise((resolve, reject) => {
const fileReader = new FileReader();
@ -348,8 +387,8 @@ const Modaledit = (props) => {
<Upload
customRequest = {uploadImage}
accept="image/*"
multiple={true}
beforeUpload={checkLength}
// multiple={true}
// beforeUpload={checkLength}
showUploadList={false}
disabled={disableBtn}
>

6
app/src/components/Modal/ModalRole.js
View File

@ -302,17 +302,19 @@ class ModalRole extends Component {
var nameTablee = ""
if (value.name === "user") {
nameTablee = "Quản lí người dùng"
nameTablee = "Quản lý người dùng"
} else if (value.name === "import") {
nameTablee = "Kho ảnh"
} else if (value.name === "search") {
nameTablee = "Tìm kiếm ảnh"
} else if (value.name === "famous") {
nameTablee = "Quản lí người nổi tiếng"
nameTablee = "Quản lý người nổi tiếng"
} else if (value.name === "person") {
nameTablee = "Gán nhãn"
} else if (value.name === "level") {
nameTablee = "Thiết lập quyền"
} else {
nameTablee = value.name
}
return (
<div className="m-accordion__item" key={index}>

3
app/src/components/Role/Role.js
View File

@ -222,6 +222,7 @@ class Role extends Component {
</h3>
</div>
</div>
{this.state.dataRole?.indexOf('level:edit') !== -1 ?
<div className="m-portlet__head-tools pr-3">
<ul className="m-portlet__nav">
<li className="m-portlet__nav-item">
@ -245,7 +246,7 @@ class Role extends Component {
</button>
</li>
</ul>
</div>
</div> : "" }
</div>
<div className="m-portlet__body m-portlet__body--no-padding">
<div className="row m-row--no-padding m-row--col-separator-xl">

21
app/src/components/User/User.js
View File

@ -16,9 +16,9 @@ import { useSelector } from 'react-redux';
const initialDataPost = {
index: 1,
item_per_page: 5,
item_per_page: 10,
search_data: "",
is_deleted: -1,
is_deleted: 0,
}
export default function User() {
@ -48,7 +48,7 @@ export default function User() {
const [offset, setOffset] = useState(0)
const [dataPost, setDataPost] = useState(initialDataPost)
const itemsPerPage = 5
const itemsPerPage = 10
const location = useLocation();
@ -191,7 +191,7 @@ export default function User() {
<td>{gender}</td>
<td>{value.birthday !== "" ? momment(value.birthday).format("DD-MM-YYYY") : ""}</td>
<td>{value.phone_number}</td>
<td>
{/* <td>
{
value.is_deleted === 1
?
@ -199,7 +199,7 @@ export default function User() {
:
<span className="m-badge m-badge--accent m-badge--wide">Hoạt động</span>
}
</td>
</td> */}
{(dataRole?.indexOf('user:edit') === -1 && dataRole?.indexOf('user:delete') === -1) ? "" :
<td>
{dataRole?.indexOf('user:edit') !== -1 ?
@ -284,10 +284,11 @@ export default function User() {
<div className="m-portlet__head-caption pl-3">
<div className="m-portlet__head-title">
<h3 className="m-portlet__head-text">
Quản lí người dùng
Quản lý người dùng
</h3>
</div>
</div>
{dataRole?.indexOf('user:edit') !== -1 ?
<div className="m-portlet__head-tools pr-3">
<ul className="m-portlet__nav">
<li className="m-portlet__nav-item">
@ -320,7 +321,7 @@ export default function User() {
} */}
</li>
</ul>
</div>
</div> : "" }
</div>
<div className="m-portlet__body m-portlet__body--no-padding">
<div className="row m-row--no-padding m-row--col-separator-xl">
@ -339,13 +340,13 @@ export default function User() {
placeholder="Tên đăng nhập/Họ tên..."
data-col-index={0} />
</div>
<div className="form-group m-form__group col-xl-2">
{/* <div className="form-group m-form__group col-xl-2">
<Select
value={valueSelected}
onChange={changeHandleFilter}
options={optionSelect}
/>
</div>
</div> */}
<div className="pl-3">
<button
onClick={() => {
@ -383,7 +384,7 @@ export default function User() {
<th style={{ 'verticalAlign': 'middle' }}>Giới tính</th>
<th style={{ 'verticalAlign': 'middle' }}>Ngày sinh</th>
<th style={{ 'verticalAlign': 'middle' }}>Số điện thoại</th>
<th style={{ 'verticalAlign': 'middle' }}>Trạng thái</th>
{/* <th style={{ 'verticalAlign': 'middle' }}>Trạng thái</th> */}
{(dataRole?.indexOf('user:edit') === -1 && dataRole?.indexOf('user:delete') === -1) ? "" : <th style={{ 'verticalAlign': 'middle', 'width': '150px' }}>Thao tác</th>}
</tr>
</thead>

14
app/src/components/layouts/Footer.js
View File

@ -21,20 +21,6 @@ class Footer extends Component {
2019 © BeetInnovators
</span>
</div>
<div className="m-stack__item m-stack__item--right m-stack__item--middle m-stack__item--first">
<ul className="m-footer__nav m-nav m-nav--inline m--pull-right">
<li className="m-nav__item">
<a href="http://reva.com.vn" target="blank" className="m-nav__link">
<span className="m-nav__link-text">Giới thiệu</span>
</a>
</li>
<li className="m-nav__item">
<a href="http://reva.com.vn#contact" target="blank" className="m-nav__link">
<span className="m-nav__link-text">Trung tâm hỗ trợ</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>

5
app/src/components/layouts/Header.js
View File

@ -111,9 +111,10 @@ class Header extends Component {
</div>
</div>
</div>
<div className="m-stack__item m-stack__item--middle m-stack__item--center" style={{ 'width': '160px' }}>
<div className="m-stack__item m-stack__item--middle m-stack__item--center" style={{ 'width': '460px' }}>
<a href="/" className="m-brand m-brand--desktop">
<img alt="" src="/img/logo.png" className="logo_img" />
<img style={{paddingBottom: "7px"}} alt="" src="/img/logo.png" className="logo_img" />
<div style={{fontSize: '10px', color: 'black', paddingLeft: "10px"}}><b> by Beet Innovators</b></div>
</a>
</div>
<div className="m-stack__item m-stack__item--right">

5
app/src/components/layouts/MenuBar.js
View File

@ -103,7 +103,7 @@ class MenuBar extends Component {
<i className="m-menu__link-icon flaticon-users" />
<span className="m-menu__link-title">
<span className="m-menu__link-wrap">
<span className="m-menu__link-text">Quản lí người dùng</span>
<span className="m-menu__link-text">Quản lý người dùng</span>
</span>
</span>
</NavLink>
@ -123,7 +123,7 @@ class MenuBar extends Component {
</li>
: ""}
{this.state.dataRole?.indexOf('level:view') !== -1 ?
<li className="m-menu__item m-menu__item--submenu" aria-haspopup="true" m-menu-submenu-toggle="hover">
<NavLink to="/test" className={"m-menu__link " + active} activeClassName="m-menu__item--active" onClick={() => this.onClickClose()}>
<i className="m-menu__link-icon flaticon-edit" />
@ -134,6 +134,7 @@ class MenuBar extends Component {
</span>
</NavLink>
</li>
: ""}
</ul>
</div>
{/* END: Aside Menu */}

7
app/src/router/ReactRouter.js
View File

@ -91,16 +91,15 @@ class ReactRouter extends Component {
:
''
}
{/* {
this.state.dataRole?.indexOf('test:view') !== -1
{
this.state.dataRole?.indexOf('level:view') !== -1
?
<>
<Route path='/test' component={Test} />
</>
:
''
} */}
<Route path='/test' component={Test} />
}
{
this.state.dataRole?.indexOf('famous:view') !== -1
?