Improve code
This commit is contained in:
parent
83f9bd135c
commit
dae4f6a9a1
@ -3,7 +3,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|||||||
import { faChevronLeft, faChevronDown, faTimes, faImage } from '@fortawesome/free-solid-svg-icons';
|
import { faChevronLeft, faChevronDown, faTimes, faImage } from '@fortawesome/free-solid-svg-icons';
|
||||||
import { FileUploader } from 'react-drag-drop-files';
|
import { FileUploader } from 'react-drag-drop-files';
|
||||||
import Select from 'react-select'
|
import Select from 'react-select'
|
||||||
import { height } from '@fortawesome/free-solid-svg-icons/fa0';
|
|
||||||
|
|
||||||
const Compare = () => {
|
const Compare = () => {
|
||||||
|
|
||||||
@ -425,34 +424,20 @@ const Compare = () => {
|
|||||||
|
|
||||||
{/* Display uploaded image name */}
|
{/* Display uploaded image name */}
|
||||||
{selectedImageName && (
|
{selectedImageName && (
|
||||||
<div className="mt-4" style={styles.wrapper}>
|
<div className="mt-3">
|
||||||
<div style={styles.fileWrapper}>
|
<p><strong>File:</strong> {selectedImageName}</p>
|
||||||
<FontAwesomeIcon icon={faImage} style={styles.imageIcon} />
|
{file && (
|
||||||
<div style={styles.textContainer}>
|
<p style={styles.fileSize}>
|
||||||
<h5>Uploaded File:</h5>
|
Size: {formatFileSize(file.size)}
|
||||||
<p>{selectedImageName}</p>
|
</p>
|
||||||
{file && (
|
)}
|
||||||
<p style={styles.fileSize}>
|
<button className="btn btn-danger" onClick={handleImageCancel}>
|
||||||
Size: {formatFileSize(file.size)}
|
<FontAwesomeIcon icon={faTimes} className="me-2" />Cancel
|
||||||
</p>
|
</button>
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div style={styles.closeButtonContainer}>
|
|
||||||
<button
|
|
||||||
style={styles.closeButton}
|
|
||||||
onClick={handleImageCancel}
|
|
||||||
aria-label="Remove uploaded image"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon={faTimes}
|
|
||||||
style={styles.closeIcon}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
{errorMessage && <small style={styles.uploadError}>{errorMessage}</small>}
|
||||||
|
|
||||||
{/* Upload Image #2 */}
|
{/* Upload Image #2 */}
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
@ -479,31 +464,16 @@ const Compare = () => {
|
|||||||
|
|
||||||
{/* Display uploaded image name */}
|
{/* Display uploaded image name */}
|
||||||
{selectedCompareImageName && (
|
{selectedCompareImageName && (
|
||||||
<div className="mt-4" style={styles.wrapper}>
|
<div className="mt-3">
|
||||||
<div style={styles.fileWrapper}>
|
<p><strong>File:</strong> {selectedCompareImageName}</p>
|
||||||
<FontAwesomeIcon icon={faImage} style={styles.imageIcon} />
|
{compareFile && (
|
||||||
<div style={styles.textContainer}>
|
<p style={styles.fileSize}>
|
||||||
<h5>Uploaded File:</h5>
|
Size: {formatFileSize(compareFile.size)}
|
||||||
<p>{selectedCompareImageName}</p>
|
</p>
|
||||||
{file && (
|
)}
|
||||||
<p style={styles.fileSize}>
|
<button className="btn btn-danger" onClick={handleCompareImageCancel}>
|
||||||
Size: {formatFileSize(file.size)}
|
<FontAwesomeIcon icon={faTimes} className="me-2" />Cancel
|
||||||
</p>
|
</button>
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div style={styles.closeButtonContainer}>
|
|
||||||
<button
|
|
||||||
style={styles.closeButton}
|
|
||||||
onClick={handleImageCancel}
|
|
||||||
aria-label="Remove uploaded image"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon={faTimes}
|
|
||||||
style={styles.closeIcon}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@ -518,7 +488,14 @@ const Compare = () => {
|
|||||||
|
|
||||||
{/* Results Section */}
|
{/* Results Section */}
|
||||||
{showResult && (
|
{showResult && (
|
||||||
<ResultsSection/>
|
<ResultsSection
|
||||||
|
showResult={showResult}
|
||||||
|
verified={verified}
|
||||||
|
imageUrl={imageUrl}
|
||||||
|
selectedImageName={selectedImageName}
|
||||||
|
imageCompareUrl={imageCompareUrl}
|
||||||
|
selectedCompareImageName={selectedCompareImageName}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -334,17 +334,16 @@ const Enroll = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const styles = {
|
const styles = {
|
||||||
// Existing styles
|
|
||||||
formGroup: {
|
formGroup: {
|
||||||
marginTop: '-45px',
|
marginTop: '-45px',
|
||||||
},
|
},
|
||||||
selectWrapper: {
|
selectWrapper: {
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
marginTop: '0',
|
marginTop: '0',
|
||||||
},
|
},
|
||||||
select: {
|
select: {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
paddingRight: '30px',
|
paddingRight: '30px',
|
||||||
},
|
},
|
||||||
chevronIcon: {
|
chevronIcon: {
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
@ -354,10 +353,10 @@ const Enroll = () => {
|
|||||||
pointerEvents: 'none',
|
pointerEvents: 'none',
|
||||||
},
|
},
|
||||||
remainingQuota: {
|
remainingQuota: {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
marginTop: '4px',
|
marginTop: '4px',
|
||||||
},
|
},
|
||||||
quotaText: {
|
quotaText: {
|
||||||
fontSize: '40px',
|
fontSize: '40px',
|
||||||
@ -367,36 +366,34 @@ const Enroll = () => {
|
|||||||
timesText: {
|
timesText: {
|
||||||
marginLeft: '8px',
|
marginLeft: '8px',
|
||||||
verticalAlign: 'super',
|
verticalAlign: 'super',
|
||||||
fontSize: '20px',
|
fontSize: '20px',
|
||||||
},
|
},
|
||||||
uploadArea: {
|
uploadArea: {
|
||||||
backgroundColor: '#e6f2ff',
|
backgroundColor: '#e6f2ff',
|
||||||
height: '250px', // Default height for non-mobile devices
|
height: '250px',
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
marginTop: '1rem',
|
marginTop: '1rem',
|
||||||
paddingTop: '22px',
|
paddingTop: '22px',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
border: '1px solid #ced4da',
|
border: '1px solid #ced4da',
|
||||||
borderRadius: '0.25rem',
|
borderRadius: '0.25rem',
|
||||||
},
|
},
|
||||||
|
|
||||||
// Mobile responsive styles for upload area
|
|
||||||
uploadAreaMobile: {
|
uploadAreaMobile: {
|
||||||
backgroundColor: '#e6f2ff',
|
backgroundColor: '#e6f2ff',
|
||||||
height: '50svh', // Reduced height for mobile
|
height: '50svh',
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
marginTop: '1rem',
|
marginTop: '1rem',
|
||||||
paddingTop: '18px', // Adjusted padding for mobile
|
paddingTop: '18px',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
border: '1px solid #ced4da',
|
border: '1px solid #ced4da',
|
||||||
borderRadius: '0.25rem',
|
borderRadius: '0.25rem',
|
||||||
padding: '20px'
|
padding: '20px',
|
||||||
},
|
},
|
||||||
uploadIcon: {
|
uploadIcon: {
|
||||||
fontSize: '40px',
|
fontSize: '40px',
|
||||||
@ -410,81 +407,79 @@ const Enroll = () => {
|
|||||||
lineHeight: '13px',
|
lineHeight: '13px',
|
||||||
},
|
},
|
||||||
wrapper: {
|
wrapper: {
|
||||||
border: '1px solid #ddd',
|
border: '1px solid #ddd',
|
||||||
borderRadius: '6px',
|
borderRadius: '6px',
|
||||||
padding: '18px 10px 0 8px', // Padding lebih seragam
|
padding: '18px 10px 0 8px',
|
||||||
height: '13svh', // Tinggi lebih kecil untuk menyesuaikan tampilan
|
height: '13svh',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'space-between',
|
justifyContent: 'space-between',
|
||||||
backgroundColor: '#f9f9f9',
|
backgroundColor: '#f9f9f9',
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
},
|
},
|
||||||
fileWrapper: {
|
fileWrapper: {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
flex: '1',
|
flex: '1',
|
||||||
},
|
},
|
||||||
textContainer: {
|
textContainer: {
|
||||||
flex: '1',
|
flex: '1',
|
||||||
fontSize: '16px', // Ukuran font lebih kecil
|
fontSize: '16px',
|
||||||
marginLeft: '6px',
|
marginLeft: '6px',
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
whiteSpace: 'nowrap',
|
whiteSpace: 'nowrap',
|
||||||
textOverflow: 'ellipsis',
|
textOverflow: 'ellipsis',
|
||||||
marginTop: '1rem'
|
marginTop: '1rem',
|
||||||
},
|
},
|
||||||
fileSize: {
|
fileSize: {
|
||||||
fontSize: '12px',
|
fontSize: '12px',
|
||||||
color: '#555',
|
color: '#555',
|
||||||
marginBottom: '2rem',
|
marginBottom: '2rem',
|
||||||
},
|
},
|
||||||
closeButtonContainer: {
|
closeButtonContainer: {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
marginLeft: 'auto',
|
marginLeft: 'auto',
|
||||||
},
|
},
|
||||||
closeButton: {
|
closeButton: {
|
||||||
background: 'transparent',
|
background: 'transparent',
|
||||||
border: 'none',
|
border: 'none',
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
padding: '0',
|
padding: '0',
|
||||||
},
|
},
|
||||||
imageIcon: {
|
imageIcon: {
|
||||||
color: '#0542cc',
|
color: '#0542cc',
|
||||||
fontSize: '18px', // Ukuran ikon sedikit lebih kecil
|
fontSize: '18px',
|
||||||
marginRight: '6px',
|
marginRight: '6px',
|
||||||
},
|
},
|
||||||
closeIcon: {
|
closeIcon: {
|
||||||
color: 'red',
|
color: 'red',
|
||||||
fontSize: '18px',
|
fontSize: '18px',
|
||||||
},
|
},
|
||||||
submitButton: {
|
submitButton: {
|
||||||
marginLeft: 'auto',
|
marginLeft: 'auto',
|
||||||
marginTop: '4rem',
|
marginTop: '4rem',
|
||||||
textAlign: 'start',
|
textAlign: 'start',
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
},
|
},
|
||||||
uploadError: {
|
uploadError: {
|
||||||
color: 'red',
|
color: 'red',
|
||||||
fontSize: '12px',
|
fontSize: '12px',
|
||||||
marginTop: '5px',
|
marginTop: '5px',
|
||||||
},
|
},
|
||||||
|
|
||||||
// New styles added and merged
|
|
||||||
containerResultStyle: {
|
containerResultStyle: {
|
||||||
padding: '20px',
|
padding: '20px',
|
||||||
border: '1px solid #0053b3',
|
border: '1px solid #0053b3',
|
||||||
borderRadius: '5px',
|
borderRadius: '5px',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
margin: '20px auto',
|
margin: '20px auto',
|
||||||
},
|
},
|
||||||
resultContainer: {
|
resultContainer: {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
justifyContent: 'space-between', // Horizontal alignment
|
justifyContent: 'space-between',
|
||||||
alignItems: 'flex-start', // Align items at the top
|
alignItems: 'flex-start',
|
||||||
flexDirection: isMobile ? 'column' : 'row', // Stack vertically on mobile
|
flexDirection: isMobile ? 'column' : 'row',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
},
|
},
|
||||||
resultsTable: {
|
resultsTable: {
|
||||||
@ -512,9 +507,9 @@ const Enroll = () => {
|
|||||||
imageContainer: {
|
imageContainer: {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
alignItems: isMobile ? 'center' : 'flex-start', // Center image on mobile
|
alignItems: isMobile ? 'center' : 'flex-start',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
marginTop: isMobile ? '10px' : '0', // Add margin for spacing on mobile
|
marginTop: isMobile ? '10px' : '0',
|
||||||
},
|
},
|
||||||
imageStyle: {
|
imageStyle: {
|
||||||
width: '300px',
|
width: '300px',
|
||||||
@ -522,13 +517,13 @@ const Enroll = () => {
|
|||||||
borderRadius: '5px',
|
borderRadius: '5px',
|
||||||
},
|
},
|
||||||
imageStyleMobile: {
|
imageStyleMobile: {
|
||||||
width: '100%', // Make image responsive on mobile
|
width: '100%',
|
||||||
height: 'auto',
|
height: 'auto',
|
||||||
borderRadius: '5px',
|
borderRadius: '5px',
|
||||||
},
|
},
|
||||||
imageDetails: {
|
imageDetails: {
|
||||||
marginTop: '10px',
|
marginTop: '10px',
|
||||||
fontSize: isMobile ? '14px' : '16px', // Adjust font size on mobile
|
fontSize: isMobile ? '14px' : '16px',
|
||||||
color: '#1f2d3d',
|
color: '#1f2d3d',
|
||||||
},
|
},
|
||||||
loadingOverlay: {
|
loadingOverlay: {
|
||||||
@ -539,7 +534,7 @@ const Enroll = () => {
|
|||||||
bottom: 0,
|
bottom: 0,
|
||||||
backgroundColor: 'rgba(0, 0, 0, 0.2)',
|
backgroundColor: 'rgba(0, 0, 0, 0.2)',
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
zIndex: 1000,
|
zIndex: 1000,
|
||||||
@ -573,34 +568,14 @@ const Enroll = () => {
|
|||||||
marginTop: '0.2rem',
|
marginTop: '0.2rem',
|
||||||
},
|
},
|
||||||
uploadedFileText: {
|
uploadedFileText: {
|
||||||
fontSize: '16px',
|
fontSize: '16px',
|
||||||
color: '#1f2d3d',
|
color: '#1f2d3d',
|
||||||
},
|
|
||||||
resultsTable: {
|
|
||||||
width: '60%',
|
|
||||||
borderCollapse: 'collapse',
|
|
||||||
},
|
|
||||||
resultsRow: {
|
|
||||||
border: '0.1px solid gray',
|
|
||||||
padding: '8px',
|
|
||||||
},
|
|
||||||
resultsCell: {
|
|
||||||
padding: '8px',
|
|
||||||
width: '30%',
|
|
||||||
},
|
|
||||||
resultsValueCell: {
|
|
||||||
padding: '8px',
|
|
||||||
width: '70%',
|
|
||||||
color: 'red',
|
|
||||||
},
|
|
||||||
resultsTrueValue: {
|
|
||||||
color: 'inherit',
|
|
||||||
},
|
},
|
||||||
customLabel: {
|
customLabel: {
|
||||||
fontWeight: 600, fontSize: '14px', color: '#212529'
|
fontWeight: 600,
|
||||||
|
fontSize: '14px',
|
||||||
|
color: '#212529',
|
||||||
},
|
},
|
||||||
|
|
||||||
// Mobile responsiveness adjustments (if necessary)
|
|
||||||
responsiveImageStyle: {
|
responsiveImageStyle: {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
maxHeight: '250px',
|
maxHeight: '250px',
|
||||||
@ -644,195 +619,168 @@ const Enroll = () => {
|
|||||||
color: 'white',
|
color: 'white',
|
||||||
marginTop: '10px',
|
marginTop: '10px',
|
||||||
},
|
},
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{/* Inject keyframes for the spinner */}
|
<style>
|
||||||
<style>
|
{`
|
||||||
{`
|
@keyframes spin {
|
||||||
@keyframes spin {
|
0% { transform: rotate(0deg); }
|
||||||
0% { transform: rotate(0deg); }
|
100% { transform: rotate(360deg); }
|
||||||
100% { transform: rotate(360deg); }
|
}
|
||||||
}
|
.select-wrapper {
|
||||||
|
max-height: 200px;
|
||||||
.select-wrapper {
|
overflow-y: auto;
|
||||||
max-height: 200px; /* Limit the height of the container */
|
}
|
||||||
overflow-y: auto; /* Enable vertical scroll if the content overflows */
|
`}
|
||||||
}
|
</style>
|
||||||
`}
|
|
||||||
</style>
|
{isLoading && (
|
||||||
|
<div style={styles.loadingOverlay}>
|
||||||
{isLoading && (
|
<div style={styles.spinner}></div>
|
||||||
<div style={styles.loadingOverlay}>
|
<p style={styles.loadingText}>Loading...</p>
|
||||||
<div style={styles.spinner}></div>
|
</div>
|
||||||
<p style={styles.loadingText}>Loading...</p>
|
)}
|
||||||
</div>
|
|
||||||
)}
|
<div className="form-group row align-items-center">
|
||||||
|
<div className="col-md-6">
|
||||||
{/* Application ID Selection */}
|
<div className="select-wrapper">
|
||||||
<div className="form-group row align-items-center">
|
<Select
|
||||||
<div className="col-md-6">
|
id="applicationId"
|
||||||
<div className="select-wrapper">
|
value={applicationOptions.find(option => option.value === applicationId)}
|
||||||
<Select
|
onChange={handleApplicationChange}
|
||||||
id="applicationId"
|
options={applicationOptions}
|
||||||
value={applicationOptions.find(option => option.value === applicationId)}
|
placeholder="Select Application ID"
|
||||||
onChange={handleApplicationChange}
|
isSearchable
|
||||||
options={applicationOptions}
|
menuPortalTarget={document.body}
|
||||||
placeholder="Select Application ID"
|
menuPlacement="auto"
|
||||||
isSearchable
|
inputValue={inputValueApplication}
|
||||||
menuPortalTarget={document.body}
|
onInputChange={handleInputChangeApplication}
|
||||||
menuPlacement="auto"
|
|
||||||
inputValue={inputValueApplication}
|
|
||||||
onInputChange={handleInputChangeApplication} // Limit input length for Application ID
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{applicationError && <small style={{ color: 'red' }}>{applicationError}</small>}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-md-6">
|
|
||||||
<p className="text-secondary" style={{ fontSize: '16px', fontWeight: '400', margin: '0', marginTop: '8px' }}>
|
|
||||||
Remaining Quota
|
|
||||||
</p>
|
|
||||||
<div style={styles.remainingQuota}>
|
|
||||||
<span style={styles.quotaText}>{selectedQuota}</span>
|
|
||||||
<span style={styles.timesText}>(times)</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Subject ID Input */}
|
|
||||||
<div className="form-group row align-items-center">
|
|
||||||
<div className="col-md-6">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="subjectId"
|
|
||||||
className="form-control"
|
|
||||||
placeholder="Enter Subject ID"
|
|
||||||
value={subjectId}
|
|
||||||
onChange={handleSubjectIdChange}
|
|
||||||
onFocus={() => fetchSubjectIds(applicationId)}
|
|
||||||
maxLength={15}
|
|
||||||
/>
|
|
||||||
{subjectError && <small style={{ color: 'red' }}>{subjectError}</small>}
|
|
||||||
{subjectAvailabilityMessage && (
|
|
||||||
<small style={{ color: subjectAvailabilityMessage.includes('available') ? 'green' : 'red' }}>
|
|
||||||
{subjectAvailabilityMessage}
|
|
||||||
</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Upload Section */}
|
|
||||||
<div className='col-md-6'>
|
|
||||||
<div className="row form-group mt-4">
|
|
||||||
<CustomLabel htmlFor="uploadPhoto" style={styles.customLabel}>
|
|
||||||
Upload Face Photo
|
|
||||||
</CustomLabel>
|
|
||||||
<FileUploader
|
|
||||||
handleChange={handleImageUpload}
|
|
||||||
name="file"
|
|
||||||
types={fileTypes}
|
|
||||||
multiple={false}
|
|
||||||
onDrop={(files) => {
|
|
||||||
if (files && files[0]) {
|
|
||||||
handleImageUpload(files[0]);
|
|
||||||
} else {
|
|
||||||
console.error('No valid files dropped');
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
children={(
|
|
||||||
<div style={isMobile ? styles.uploadAreaMobile : styles.uploadArea}>
|
|
||||||
<i className="fas fa-cloud-upload-alt" style={styles.uploadIcon}></i>
|
|
||||||
<p style={styles.uploadText}>Drag and Drop Here</p>
|
|
||||||
<p>Or</p>
|
|
||||||
<a href="#" onClick={() => fileInputRef.current.click()}>Browse</a>
|
|
||||||
<p className="text-muted">Recommended size: 300x300 (Max File Size: 2MB)</p>
|
|
||||||
<p className="text-muted">Supported file types: JPG, JPEG</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
id="fileUpload"
|
|
||||||
ref={fileInputRef}
|
|
||||||
style={{ display: 'none' }}
|
|
||||||
accept="image/jpeg, image/jpg"
|
|
||||||
onChange={e => handleImageUpload(e.target.files[0])}
|
|
||||||
/>
|
|
||||||
{imageError && <small style={{ color: 'red' }}>{imageError}</small>}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Display uploaded image name */}
|
|
||||||
{selectedImageName && (
|
|
||||||
<div className="col-md-6 mt-4" style={styles.wrapper}>
|
|
||||||
<div style={styles.fileWrapper}>
|
|
||||||
<FontAwesomeIcon icon={faImage} style={styles.imageIcon} />
|
|
||||||
<div style={styles.textContainer}>
|
|
||||||
<h5>Uploaded File:</h5>
|
|
||||||
<p>{selectedImageName}</p>
|
|
||||||
{file && (
|
|
||||||
<p style={styles.fileSize}>
|
|
||||||
Size: {formatFileSize(file.size)}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div style={styles.closeButtonContainer}>
|
|
||||||
<button
|
|
||||||
style={styles.closeButton}
|
|
||||||
onClick={handleImageCancel}
|
|
||||||
aria-label="Remove uploaded image"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon={faTimes}
|
|
||||||
style={styles.closeIcon}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Submit Button */}
|
|
||||||
<div style={styles.submitButton}>
|
|
||||||
<button onClick={handleEnrollClick} className="btn d-flex justify-content-center align-items-center me-2" style={{ backgroundColor: '#0542CC' }}>
|
|
||||||
<p className="text-white mb-0">Enroll Now</p>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Result Section */}
|
|
||||||
{showResult && (
|
|
||||||
<div style={styles.containerResultStyle}>
|
|
||||||
<h1 style={{ color: '#0542cc', fontSize: isMobile ? '1.5rem' : '2rem' }}>Results</h1>
|
|
||||||
<div style={styles.resultContainer}>
|
|
||||||
{/* Table Styling: responsive */}
|
|
||||||
<table style={isMobile ? styles.resultsTableMobile : styles.resultsTable}>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td style={{ ...styles.resultsCell, width: '40%' }}>Similarity</td>
|
|
||||||
<td style={{ ...styles.resultsValueCell, ...styles.resultsTrueValue }}>True</td>
|
|
||||||
</tr>
|
|
||||||
{/* More rows can go here */}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
{/* Image and Details Container */}
|
|
||||||
<div style={styles.imageContainer}>
|
|
||||||
<img
|
|
||||||
src={imageUrl || "path-to-your-image"}
|
|
||||||
alt="Contoh Foto"
|
|
||||||
style={isMobile ? styles.imageStyleMobile : styles.imageStyle}
|
|
||||||
/>
|
/>
|
||||||
<p style={isMobile ? { ...styles.imageDetails, fontSize: '14px' } : styles.imageDetails}>
|
</div>
|
||||||
{selectedImageName}
|
{applicationError && <small style={{ color: 'red' }}>{applicationError}</small>}
|
||||||
</p>
|
</div>
|
||||||
|
|
||||||
|
<div className="col-md-6">
|
||||||
|
<p className="text-secondary" style={{ fontSize: '16px', fontWeight: '400', margin: '0', marginTop: '8px' }}>
|
||||||
|
Remaining Quota
|
||||||
|
</p>
|
||||||
|
<div style={styles.remainingQuota}>
|
||||||
|
<span style={styles.quotaText}>{selectedQuota}</span>
|
||||||
|
<span style={styles.timesText}>(times)</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
<div className="form-group row align-items-center">
|
||||||
|
<div className="col-md-6">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="subjectId"
|
||||||
|
className="form-control"
|
||||||
|
placeholder="Enter Subject ID"
|
||||||
|
value={subjectId}
|
||||||
|
onChange={handleSubjectIdChange}
|
||||||
|
onFocus={() => fetchSubjectIds(applicationId)}
|
||||||
|
maxLength={15}
|
||||||
|
/>
|
||||||
|
{subjectError && <small style={{ color: 'red' }}>{subjectError}</small>}
|
||||||
|
{subjectAvailabilityMessage && (
|
||||||
|
<small style={{ color: subjectAvailabilityMessage.includes('available') ? 'green' : 'red' }}>
|
||||||
|
{subjectAvailabilityMessage}
|
||||||
|
</small>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='col-md-6'>
|
||||||
|
<div className="row form-group mt-4">
|
||||||
|
<CustomLabel htmlFor="uploadPhoto" style={styles.customLabel}>
|
||||||
|
Upload Face Photo
|
||||||
|
</CustomLabel>
|
||||||
|
<FileUploader
|
||||||
|
handleChange={handleImageUpload}
|
||||||
|
name="file"
|
||||||
|
types={fileTypes}
|
||||||
|
multiple={false}
|
||||||
|
onDrop={(files) => {
|
||||||
|
if (files && files[0]) {
|
||||||
|
handleImageUpload(files[0]);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
children={
|
||||||
|
<div style={isMobile ? styles.uploadAreaMobile : styles.uploadArea}>
|
||||||
|
<i className="fas fa-cloud-upload-alt" style={styles.uploadIcon}></i>
|
||||||
|
<p style={styles.uploadText}>Drag and Drop Here</p>
|
||||||
|
<p>Or</p>
|
||||||
|
<a href="#" onClick={() => fileInputRef.current.click()}>Browse</a>
|
||||||
|
<p className="text-muted">Recommended size: 300x300 (Max File Size: 2MB)</p>
|
||||||
|
<p className="text-muted">Supported file types: JPG, JPEG</p>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
id="fileUpload"
|
||||||
|
ref={fileInputRef}
|
||||||
|
style={{ display: 'none' }}
|
||||||
|
accept="image/jpeg, image/jpg"
|
||||||
|
onChange={e => handleImageUpload(e.target.files[0])}
|
||||||
|
/>
|
||||||
|
{imageError && <small style={{ color: 'red' }}>{imageError}</small>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{selectedImageName && (
|
||||||
|
<div className="mt-3">
|
||||||
|
<p><strong>File:</strong> {selectedImageName}</p>
|
||||||
|
{file && (
|
||||||
|
<p style={styles.fileSize}>
|
||||||
|
Size: {formatFileSize(file.size)}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<button className="btn btn-danger" onClick={handleImageCancel}>
|
||||||
|
<FontAwesomeIcon icon={faTimes} className="me-2" />Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{errorMessage && <small style={styles.uploadError}>{errorMessage}</small>}
|
||||||
|
|
||||||
|
<div style={styles.submitButton}>
|
||||||
|
<button onClick={handleEnrollClick} className="btn d-flex justify-content-center align-items-center me-2" style={{ backgroundColor: '#0542CC' }}>
|
||||||
|
<p className="text-white mb-0">Enroll Now</p>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showResult && (
|
||||||
|
<div style={styles.containerResultStyle}>
|
||||||
|
<h1 style={{ color: '#0542cc', fontSize: isMobile ? '1.5rem' : '2rem' }}>Results</h1>
|
||||||
|
<div style={styles.resultContainer}>
|
||||||
|
<table style={isMobile ? styles.resultsTableMobile : styles.resultsTable}>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td style={{ ...styles.resultsCell, width: '40%' }}>Similarity</td>
|
||||||
|
<td style={{ ...styles.resultsValueCell, ...styles.resultsTrueValue }}>True</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<div style={styles.imageContainer}>
|
||||||
|
<img
|
||||||
|
src={imageUrl || "path-to-your-image"}
|
||||||
|
alt="Contoh Foto"
|
||||||
|
style={isMobile ? styles.imageStyleMobile : styles.imageStyle}
|
||||||
|
/>
|
||||||
|
<p style={isMobile ? { ...styles.imageDetails, fontSize: '14px' } : styles.imageDetails}>
|
||||||
|
{selectedImageName}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
}
|
}
|
||||||
export default Enroll;
|
export default Enroll;
|
||||||
|
|
||||||
|
|||||||
@ -121,25 +121,25 @@ const Search = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleImageUpload = (file) => {
|
const handleImageUpload = (file) => {
|
||||||
// Ensure file exists before accessing its properties
|
// Ensure the file is not undefined or null before accessing its properties
|
||||||
if (!file) {
|
if (file && file.name) {
|
||||||
console.error('File is undefined');
|
const fileExtension = file.name.split('.').pop().toUpperCase();
|
||||||
setImageError('Please upload a valid image file.');
|
if (fileTypes.includes(fileExtension)) {
|
||||||
return;
|
setSelectedImageName(file.name);
|
||||||
}
|
setFile(file);
|
||||||
|
setUploadedFile(file); // Set uploadedFile to the selected file
|
||||||
const fileExtension = file.name.split('.').pop().toUpperCase();
|
setImageError(''); // Clear any previous errors
|
||||||
if (fileTypes.includes(fileExtension)) {
|
} else {
|
||||||
setSelectedImageName(file.name);
|
alert('Image format is not supported');
|
||||||
setFile(file);
|
setImageError('Image format is not supported');
|
||||||
setImageError(''); // Clear any previous errors
|
setFile(null);
|
||||||
|
setUploadedFile(null); // Clear uploadedFile if the file is unsupported
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
// Show an alert if the file type is not supported
|
console.error('No file selected or invalid file object.');
|
||||||
alert('Image format is not supported');
|
|
||||||
setImageError('Image format is not supported'); // Optionally set error message to display on the UI
|
|
||||||
setFile(null); // Optionally clear the selected file
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const handleImageCancel = () => {
|
const handleImageCancel = () => {
|
||||||
@ -156,87 +156,86 @@ const Search = () => {
|
|||||||
setLimitIdError('');
|
setLimitIdError('');
|
||||||
setImageError('');
|
setImageError('');
|
||||||
setErrorMessage('');
|
setErrorMessage('');
|
||||||
|
|
||||||
// Initialize validation flags
|
// Initialize validation flags
|
||||||
let hasError = false;
|
let hasError = false;
|
||||||
|
|
||||||
// Validate Application ID
|
// Validate Application ID
|
||||||
if (!applicationId) {
|
if (!applicationId) {
|
||||||
setApplicationIdError('Please select an Application ID before searching.');
|
setApplicationIdError('Please select an Application ID before searching.');
|
||||||
hasError = true; // Set error flag
|
hasError = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Validate Limit ID
|
// Validate Limit ID
|
||||||
if (!limitId) {
|
if (!limitId) {
|
||||||
setLimitIdError('Please select a Limit before searching.');
|
setLimitIdError('Please select a Limit before searching.');
|
||||||
hasError = true; // Set error flag
|
hasError = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Validate Image Upload
|
// Validate Image Upload
|
||||||
if (!selectedImageName) {
|
if (!selectedImageName) {
|
||||||
setImageError('Please upload an image file.');
|
setImageError('Please upload an image file.');
|
||||||
hasError = true; // Set error flag
|
hasError = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Check if the file is uploaded
|
// Check if the file is uploaded
|
||||||
if (!uploadedFile) {
|
if (!uploadedFile) {
|
||||||
setErrorMessage('Please upload an image file.');
|
setErrorMessage('Please upload an image file.');
|
||||||
hasError = true; // Set error flag
|
hasError = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
// If any errors were found, do not proceed
|
// If any errors were found, do not proceed
|
||||||
if (hasError) {
|
if (hasError) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const parsedLimitId = parseInt(limitId, 10);
|
const parsedLimitId = parseInt(limitId, 10);
|
||||||
|
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
formData.append('application_id', applicationId);
|
formData.append('application_id', applicationId);
|
||||||
formData.append('threshold', 1);
|
formData.append('threshold', 1);
|
||||||
formData.append('limit', parsedLimitId);
|
formData.append('limit', parsedLimitId);
|
||||||
formData.append('file', uploadedFile, uploadedFile.name); // Use the uploaded file
|
formData.append('file', uploadedFile, uploadedFile.name); // Use the uploaded file
|
||||||
|
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await fetch(`${BASE_URL}/face_recognition/search`, {
|
const response = await fetch(`${BASE_URL}/face_recognition/search`, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: {
|
headers: {
|
||||||
'accept': 'application/json',
|
'accept': 'application/json',
|
||||||
'x-api-key': `${API_KEY}`,
|
'x-api-key': `${API_KEY}`,
|
||||||
},
|
},
|
||||||
body: formData,
|
body: formData,
|
||||||
});
|
});
|
||||||
|
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
|
|
||||||
console.log('Response Data:', data); // Log the response
|
console.log('Response Data:', data);
|
||||||
|
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
const resultsArray = Array.isArray(data.details.data) ? data.details.data : [];
|
const resultsArray = Array.isArray(data.details.data) ? data.details.data : [];
|
||||||
const processedResults = resultsArray.map(item => ({
|
const processedResults = resultsArray.map(item => ({
|
||||||
identity: item.identity,
|
identity: item.identity,
|
||||||
similarity: item.similarity,
|
similarity: item.similarity,
|
||||||
imageUrl: item.image_url,
|
imageUrl: item.image_url,
|
||||||
distance: item.distance,
|
distance: item.distance,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
// Fetch images using their URLs
|
// Fetch images using their URLs
|
||||||
await Promise.all(processedResults.map(async result => {
|
await Promise.all(processedResults.map(async result => {
|
||||||
const imageFileName = result.imageUrl.split('/').pop(); // Extract file name if needed
|
const imageFileName = result.imageUrl.split('/').pop(); // Extract file name if needed
|
||||||
await fetchImage(imageFileName); // Fetch image
|
await fetchImage(imageFileName); // Fetch image
|
||||||
console.log('multiple image data: ', result.imageUrl); // Log the URL
|
console.log('multiple image data: ', result.imageUrl);
|
||||||
}));
|
}));
|
||||||
|
|
||||||
setResults(processedResults);
|
setResults(processedResults);
|
||||||
setShowResult(true);
|
setShowResult(true);
|
||||||
|
} else {
|
||||||
} else {
|
console.error('Error response:', JSON.stringify(data, null, 2));
|
||||||
console.error('Error response:', JSON.stringify(data, null, 2));
|
const errorMessage = data.message || data.detail || data.details?.message || 'An unknown error occurred.';
|
||||||
const errorMessage = data.message || data.detail || data.details?.message || 'An unknown error occurred.';
|
setErrorMessage(errorMessage);
|
||||||
setErrorMessage(errorMessage);
|
}
|
||||||
}
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error:', error);
|
console.error('Error:', error);
|
||||||
setErrorMessage('An error occurred while making the request.');
|
setErrorMessage('An error occurred while making the request.');
|
||||||
@ -245,6 +244,7 @@ const Search = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const fetchImage = async (imageFileName) => {
|
const fetchImage = async (imageFileName) => {
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
try {
|
try {
|
||||||
@ -322,7 +322,7 @@ const Search = () => {
|
|||||||
},
|
},
|
||||||
uploadArea: {
|
uploadArea: {
|
||||||
backgroundColor: '#e6f2ff',
|
backgroundColor: '#e6f2ff',
|
||||||
height: '50svh',
|
height: '40svh',
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
marginTop: '1rem',
|
marginTop: '1rem',
|
||||||
padding: '1rem',
|
padding: '1rem',
|
||||||
@ -438,18 +438,18 @@ const Search = () => {
|
|||||||
backgroundColor: '#f7f7f7',
|
backgroundColor: '#f7f7f7',
|
||||||
borderRadius: '8px',
|
borderRadius: '8px',
|
||||||
margin: '1rem',
|
margin: '1rem',
|
||||||
width: isMobile ? '100%' : '50%',
|
width: '100%', // Full width for large screens
|
||||||
},
|
},
|
||||||
resultContainer: {
|
resultContainer: {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: isMobile ? 'column' : 'row',
|
flexDirection: 'row',
|
||||||
flexWrap: 'wrap',
|
flexWrap: 'wrap',
|
||||||
gap: '1rem',
|
gap: '1rem',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
},
|
},
|
||||||
resultItem: {
|
resultItem: {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: isMobile ? 'row' : 'column',
|
flexDirection: 'column',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
padding: '0.5rem',
|
padding: '0.5rem',
|
||||||
@ -457,10 +457,10 @@ const Search = () => {
|
|||||||
border: '1px solid #ddd',
|
border: '1px solid #ddd',
|
||||||
borderRadius: '8px',
|
borderRadius: '8px',
|
||||||
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
|
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
|
||||||
width: isMobile ? '100%' : '150px',
|
width: '150px', // Default width for larger screens
|
||||||
},
|
},
|
||||||
resultTextContainer: {
|
resultTextContainer: {
|
||||||
marginBottom: isMobile ? '0' : '0.5rem',
|
marginBottom: '0.5rem',
|
||||||
},
|
},
|
||||||
resultText: {
|
resultText: {
|
||||||
fontSize: '0.9rem',
|
fontSize: '0.9rem',
|
||||||
@ -471,9 +471,21 @@ const Search = () => {
|
|||||||
width: '80px',
|
width: '80px',
|
||||||
height: '80px',
|
height: '80px',
|
||||||
borderRadius: '50%',
|
borderRadius: '50%',
|
||||||
marginTop: isMobile ? '0' : '0.5rem',
|
marginTop: '0.5rem',
|
||||||
|
},
|
||||||
|
|
||||||
|
// Media query for mobile responsiveness
|
||||||
|
'@media screen and (max-width: 768px)': {
|
||||||
|
containerResultStyle: {
|
||||||
|
width: '100%', // Full width on mobile
|
||||||
|
},
|
||||||
|
resultContainer: {
|
||||||
|
flexDirection: 'column', // Stack results vertically on small screens
|
||||||
|
},
|
||||||
|
resultItem: {
|
||||||
|
width: '100%', // Make result items take full width on mobile
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -599,34 +611,21 @@ const Search = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{selectedImageName && (
|
{selectedImageName && (
|
||||||
<div className="col-md-6 mt-4" style={styles.wrapper}>
|
<div className="mt-3">
|
||||||
<div style={styles.fileWrapper}>
|
<p><strong>File:</strong> {selectedImageName}</p>
|
||||||
<FontAwesomeIcon icon={faImage} style={styles.imageIcon} />
|
{file && (
|
||||||
<div style={styles.textContainer}>
|
<p style={styles.fileSize}>
|
||||||
<h5>Uploaded File:</h5>
|
Size: {formatFileSize(file.size)}
|
||||||
<p>{selectedImageName}</p>
|
</p>
|
||||||
{file && (
|
)}
|
||||||
<p style={styles.fileSize}>
|
<button className="btn btn-danger" onClick={handleImageCancel}>
|
||||||
Size: {formatFileSize(file.size)}
|
<FontAwesomeIcon icon={faTimes} className="me-2" />Cancel
|
||||||
</p>
|
</button>
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div style={styles.closeButtonContainer}>
|
|
||||||
<button
|
|
||||||
style={styles.closeButton}
|
|
||||||
onClick={handleImageCancel}
|
|
||||||
aria-label="Remove uploaded image"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon={faTimes}
|
|
||||||
style={styles.closeIcon}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
|
||||||
|
{errorMessage && <small style={styles.uploadError}>{errorMessage}</small>}
|
||||||
|
|
||||||
{/* Submit Button */}
|
{/* Submit Button */}
|
||||||
<div style={styles.submitButton}>
|
<div style={styles.submitButton}>
|
||||||
|
|||||||
@ -78,203 +78,6 @@ const Verify = () => {
|
|||||||
return () => window.removeEventListener('resize', handleResize);
|
return () => window.removeEventListener('resize', handleResize);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const styles = {
|
|
||||||
formGroup: {
|
|
||||||
marginTop: '-45px',
|
|
||||||
},
|
|
||||||
selectWrapper: {
|
|
||||||
position: 'relative',
|
|
||||||
marginTop: '0',
|
|
||||||
},
|
|
||||||
select: {
|
|
||||||
width: '100%',
|
|
||||||
paddingRight: '30px',
|
|
||||||
},
|
|
||||||
chevronIcon: {
|
|
||||||
position: 'absolute',
|
|
||||||
right: '10px',
|
|
||||||
top: '50%',
|
|
||||||
transform: 'translateY(-50%)',
|
|
||||||
pointerEvents: 'none',
|
|
||||||
},
|
|
||||||
remainingQuota: {
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
marginTop: '4px',
|
|
||||||
},
|
|
||||||
quotaText: {
|
|
||||||
fontSize: '40px',
|
|
||||||
color: '#0542cc',
|
|
||||||
fontWeight: '600',
|
|
||||||
},
|
|
||||||
timesText: {
|
|
||||||
marginLeft: '8px',
|
|
||||||
verticalAlign: 'super',
|
|
||||||
fontSize: '20px',
|
|
||||||
},
|
|
||||||
uploadArea: {
|
|
||||||
backgroundColor: '#e6f2ff',
|
|
||||||
height: '250px',
|
|
||||||
cursor: 'pointer',
|
|
||||||
marginTop: '1rem',
|
|
||||||
padding: '22px 10px 0 20px',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
border: '1px solid #ced4da',
|
|
||||||
borderRadius: '0.25rem',
|
|
||||||
},
|
|
||||||
uploadIcon: {
|
|
||||||
fontSize: '40px',
|
|
||||||
color: '#0542cc',
|
|
||||||
marginBottom: '7px',
|
|
||||||
},
|
|
||||||
uploadText: {
|
|
||||||
color: '#1f2d3d',
|
|
||||||
fontWeight: '400',
|
|
||||||
fontSize: '16px',
|
|
||||||
lineHeight: '13px',
|
|
||||||
},
|
|
||||||
wrapper: {
|
|
||||||
border: '1px solid #ddd',
|
|
||||||
borderRadius: '6px',
|
|
||||||
padding: '18px 10px 0 8px', // Padding lebih seragam
|
|
||||||
height: '13svh', // Tinggi lebih kecil untuk menyesuaikan tampilan
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
backgroundColor: '#f9f9f9',
|
|
||||||
overflow: 'hidden',
|
|
||||||
},
|
|
||||||
fileWrapper: {
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
flex: '1',
|
|
||||||
},
|
|
||||||
textContainer: {
|
|
||||||
flex: '1',
|
|
||||||
fontSize: '16px', // Ukuran font lebih kecil
|
|
||||||
marginLeft: '6px',
|
|
||||||
overflow: 'hidden',
|
|
||||||
whiteSpace: 'nowrap',
|
|
||||||
textOverflow: 'ellipsis',
|
|
||||||
marginTop: '1rem'
|
|
||||||
},
|
|
||||||
fileSize: {
|
|
||||||
fontSize: '12px',
|
|
||||||
color: '#555',
|
|
||||||
marginBottom: '2rem',
|
|
||||||
},
|
|
||||||
closeButtonContainer: {
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
marginLeft: 'auto',
|
|
||||||
},
|
|
||||||
closeButton: {
|
|
||||||
background: 'transparent',
|
|
||||||
border: 'none',
|
|
||||||
cursor: 'pointer',
|
|
||||||
padding: '0',
|
|
||||||
},
|
|
||||||
imageIcon: {
|
|
||||||
color: '#0542cc',
|
|
||||||
fontSize: '18px', // Ukuran ikon sedikit lebih kecil
|
|
||||||
marginRight: '6px',
|
|
||||||
},
|
|
||||||
closeIcon: {
|
|
||||||
color: 'red',
|
|
||||||
fontSize: '18px',
|
|
||||||
},
|
|
||||||
submitButton: {
|
|
||||||
marginLeft: 'auto',
|
|
||||||
marginTop: '4rem',
|
|
||||||
textAlign: 'start',
|
|
||||||
position: 'relative',
|
|
||||||
zIndex: 1,
|
|
||||||
},
|
|
||||||
uploadError: {
|
|
||||||
color: 'red',
|
|
||||||
fontSize: '12px',
|
|
||||||
marginTop: '5px',
|
|
||||||
},
|
|
||||||
containerResultStyle: {
|
|
||||||
padding: '20px',
|
|
||||||
border: '1px solid #0053b3',
|
|
||||||
borderRadius: '5px',
|
|
||||||
width: '100%',
|
|
||||||
maxWidth: '600px',
|
|
||||||
margin: '20px auto',
|
|
||||||
},
|
|
||||||
resultContainer: {
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
width: '100%',
|
|
||||||
},
|
|
||||||
tableStyle: {
|
|
||||||
width: '60%',
|
|
||||||
borderCollapse: 'collapse',
|
|
||||||
},
|
|
||||||
resultsTableMobile: {
|
|
||||||
width: '100%',
|
|
||||||
borderCollapse: 'collapse',
|
|
||||||
fontSize: '14px',
|
|
||||||
},
|
|
||||||
resultsCell: {
|
|
||||||
border: '0.1px solid gray',
|
|
||||||
padding: '8px',
|
|
||||||
},
|
|
||||||
resultsValueCell: {
|
|
||||||
border: '0.1px solid gray',
|
|
||||||
padding: '8px',
|
|
||||||
width: '60%',
|
|
||||||
},
|
|
||||||
imageContainer: {
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
alignItems: 'center',
|
|
||||||
marginTop: isMobile ? '20px' : '0',
|
|
||||||
},
|
|
||||||
imageStyle: {
|
|
||||||
width: '300px',
|
|
||||||
height: '300px',
|
|
||||||
borderRadius: '5px',
|
|
||||||
objectFit: 'cover',
|
|
||||||
},
|
|
||||||
imageStyleMobile: {
|
|
||||||
width: '100%',
|
|
||||||
height: 'auto',
|
|
||||||
},
|
|
||||||
loadingOverlay: {
|
|
||||||
position: 'fixed',
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0,
|
|
||||||
backgroundColor: 'rgba(0, 0, 0, 0.2)',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
zIndex: 1000,
|
|
||||||
},
|
|
||||||
spinner: {
|
|
||||||
border: '4px solid rgba(0, 0, 0, 0.1)',
|
|
||||||
borderLeftColor: '#0542cc',
|
|
||||||
borderRadius: '50%',
|
|
||||||
width: '90px',
|
|
||||||
height: '90px',
|
|
||||||
animation: 'spin 1s ease-in-out infinite',
|
|
||||||
},
|
|
||||||
loadingText: {
|
|
||||||
marginTop: '10px',
|
|
||||||
fontSize: '1.2rem',
|
|
||||||
color: '#fff',
|
|
||||||
textAlign: 'center',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleApplicationChange = async (selectedOption) => {
|
const handleApplicationChange = async (selectedOption) => {
|
||||||
if (!selectedOption) {
|
if (!selectedOption) {
|
||||||
console.error("Selected option is undefined");
|
console.error("Selected option is undefined");
|
||||||
@ -325,35 +128,23 @@ const Verify = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const handleFocus = () => {
|
|
||||||
setIsSelectOpen(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleBlur = () => {
|
|
||||||
setIsSelectOpen(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleImageUpload = (file) => {
|
const handleImageUpload = (file) => {
|
||||||
// Ensure file exists before accessing its properties
|
// Ensure the file is not undefined or null before accessing its properties
|
||||||
if (!file) {
|
if (file && file.name) {
|
||||||
console.error('File is undefined');
|
const fileExtension = file.name.split('.').pop().toUpperCase();
|
||||||
setUploadError('Please upload a valid image file.');
|
if (fileTypes.includes(fileExtension)) {
|
||||||
return;
|
setSelectedImageName(file.name);
|
||||||
}
|
setFile(file);
|
||||||
|
setUploadError(''); // Clear any previous errors
|
||||||
const fileExtension = file.name.split('.').pop().toUpperCase();
|
} else {
|
||||||
if (fileTypes.includes(fileExtension)) {
|
alert('Image format is not supported');
|
||||||
setSelectedImageName(file.name);
|
setUploadError('Image format is not supported');
|
||||||
setFile(file);
|
setFile(null);
|
||||||
setUploadError(''); // Clear any previous errors
|
}
|
||||||
} else {
|
} else {
|
||||||
// Show an alert if the file type is not supported
|
console.error('No file selected or invalid file object.');
|
||||||
alert('Image format is not supported');
|
|
||||||
setUploadError('Image format is not supported'); // Optionally set error message to display on the UI
|
|
||||||
setFile(null); // Optionally clear the selected file
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const handleImageCancel = () => {
|
const handleImageCancel = () => {
|
||||||
@ -509,6 +300,295 @@ const Verify = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const styles = {
|
||||||
|
formGroup: {
|
||||||
|
marginTop: '-45px',
|
||||||
|
},
|
||||||
|
selectWrapper: {
|
||||||
|
position: 'relative',
|
||||||
|
marginTop: '0',
|
||||||
|
},
|
||||||
|
select: {
|
||||||
|
width: '100%',
|
||||||
|
paddingRight: '30px',
|
||||||
|
},
|
||||||
|
chevronIcon: {
|
||||||
|
position: 'absolute',
|
||||||
|
right: '10px',
|
||||||
|
top: '50%',
|
||||||
|
transform: 'translateY(-50%)',
|
||||||
|
pointerEvents: 'none',
|
||||||
|
},
|
||||||
|
remainingQuota: {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginTop: '4px',
|
||||||
|
},
|
||||||
|
quotaText: {
|
||||||
|
fontSize: '40px',
|
||||||
|
color: '#0542cc',
|
||||||
|
fontWeight: '600',
|
||||||
|
},
|
||||||
|
timesText: {
|
||||||
|
marginLeft: '8px',
|
||||||
|
verticalAlign: 'super',
|
||||||
|
fontSize: '20px',
|
||||||
|
},
|
||||||
|
uploadArea: {
|
||||||
|
backgroundColor: '#e6f2ff',
|
||||||
|
height: '250px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
marginTop: '1rem',
|
||||||
|
paddingTop: '22px',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
border: '1px solid #ced4da',
|
||||||
|
borderRadius: '0.25rem',
|
||||||
|
},
|
||||||
|
uploadAreaMobile: {
|
||||||
|
backgroundColor: '#e6f2ff',
|
||||||
|
height: '50svh', // Use viewport height for a more responsive size
|
||||||
|
cursor: 'pointer',
|
||||||
|
marginTop: '1rem',
|
||||||
|
paddingTop: '18px',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
border: '1px solid #ced4da',
|
||||||
|
borderRadius: '0.25rem',
|
||||||
|
padding: '20px',
|
||||||
|
},
|
||||||
|
uploadIcon: {
|
||||||
|
fontSize: '40px',
|
||||||
|
color: '#0542cc',
|
||||||
|
marginBottom: '7px',
|
||||||
|
},
|
||||||
|
uploadText: {
|
||||||
|
color: '#1f2d3d',
|
||||||
|
fontWeight: '400',
|
||||||
|
fontSize: '16px',
|
||||||
|
lineHeight: '13px',
|
||||||
|
},
|
||||||
|
wrapper: {
|
||||||
|
border: '1px solid #ddd',
|
||||||
|
borderRadius: '6px',
|
||||||
|
padding: '18px 10px 0 8px',
|
||||||
|
height: '13svh',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
backgroundColor: '#f9f9f9',
|
||||||
|
overflow: 'hidden',
|
||||||
|
},
|
||||||
|
fileWrapper: {
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
flex: '1',
|
||||||
|
},
|
||||||
|
textContainer: {
|
||||||
|
flex: '1',
|
||||||
|
fontSize: '16px',
|
||||||
|
marginLeft: '6px',
|
||||||
|
overflow: 'hidden',
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
textOverflow: 'ellipsis',
|
||||||
|
marginTop: '1rem',
|
||||||
|
},
|
||||||
|
fileSize: {
|
||||||
|
fontSize: '12px',
|
||||||
|
color: '#555',
|
||||||
|
marginBottom: '2rem',
|
||||||
|
},
|
||||||
|
closeButtonContainer: {
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginLeft: 'auto',
|
||||||
|
},
|
||||||
|
closeButton: {
|
||||||
|
background: 'transparent',
|
||||||
|
border: 'none',
|
||||||
|
cursor: 'pointer',
|
||||||
|
padding: '0',
|
||||||
|
},
|
||||||
|
imageIcon: {
|
||||||
|
color: '#0542cc',
|
||||||
|
fontSize: '18px',
|
||||||
|
marginRight: '6px',
|
||||||
|
},
|
||||||
|
closeIcon: {
|
||||||
|
color: 'red',
|
||||||
|
fontSize: '18px',
|
||||||
|
},
|
||||||
|
submitButton: {
|
||||||
|
marginLeft: 'auto',
|
||||||
|
marginTop: '4rem',
|
||||||
|
textAlign: 'start',
|
||||||
|
position: 'relative',
|
||||||
|
zIndex: 1,
|
||||||
|
},
|
||||||
|
uploadError: {
|
||||||
|
color: 'red',
|
||||||
|
fontSize: '12px',
|
||||||
|
marginTop: '5px',
|
||||||
|
},
|
||||||
|
containerResultStyle: {
|
||||||
|
padding: '20px',
|
||||||
|
border: '1px solid #0053b3',
|
||||||
|
borderRadius: '5px',
|
||||||
|
width: '100%',
|
||||||
|
margin: '20px auto',
|
||||||
|
},
|
||||||
|
resultContainer: {
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
flexDirection: 'row',
|
||||||
|
width: '100%',
|
||||||
|
flexWrap: 'wrap', // Allow wrapping on smaller screens
|
||||||
|
},
|
||||||
|
resultsTable: {
|
||||||
|
width: '60%',
|
||||||
|
borderCollapse: 'collapse',
|
||||||
|
},
|
||||||
|
resultsTableMobile: {
|
||||||
|
width: '100%',
|
||||||
|
borderCollapse: 'collapse',
|
||||||
|
},
|
||||||
|
resultsCell: {
|
||||||
|
padding: '8px',
|
||||||
|
width: '30%',
|
||||||
|
fontSize: '16px',
|
||||||
|
},
|
||||||
|
resultsValueCell: {
|
||||||
|
padding: '8px',
|
||||||
|
width: '70%',
|
||||||
|
fontSize: '16px',
|
||||||
|
color: 'red',
|
||||||
|
},
|
||||||
|
resultsTrueValue: {
|
||||||
|
color: 'inherit',
|
||||||
|
},
|
||||||
|
imageContainer: {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
width: '100%',
|
||||||
|
marginTop: '20px',
|
||||||
|
},
|
||||||
|
imageStyle: {
|
||||||
|
width: isMobile ? '200px' : '320px', // 200px for mobile, 320px for larger screens
|
||||||
|
height: isMobile ? '200px' : '320px',
|
||||||
|
borderRadius: '5px',
|
||||||
|
objectFit: 'cover', // Ensures the image fits within the specified dimensions
|
||||||
|
},
|
||||||
|
imageStyleMobile: {
|
||||||
|
width: '100%',
|
||||||
|
height: 'auto',
|
||||||
|
borderRadius: '5px',
|
||||||
|
},
|
||||||
|
imageDetails: {
|
||||||
|
marginTop: '10px',
|
||||||
|
fontSize: '16px',
|
||||||
|
color: '#1f2d3d',
|
||||||
|
},
|
||||||
|
loadingOverlay: {
|
||||||
|
position: 'fixed',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.2)',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
zIndex: 1000,
|
||||||
|
},
|
||||||
|
spinner: {
|
||||||
|
border: '4px solid rgba(0, 0, 0, 0.1)',
|
||||||
|
borderLeftColor: '#0542cc',
|
||||||
|
borderRadius: '50%',
|
||||||
|
width: '90px',
|
||||||
|
height: '90px',
|
||||||
|
animation: 'spin 1s ease-in-out infinite',
|
||||||
|
},
|
||||||
|
loadingText: {
|
||||||
|
marginTop: '10px',
|
||||||
|
fontSize: '1.2rem',
|
||||||
|
color: '#fff',
|
||||||
|
textAlign: 'center',
|
||||||
|
},
|
||||||
|
uploadedFileWrapper: {
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
border: '0.2px solid gray',
|
||||||
|
padding: '15px 0 0 17px',
|
||||||
|
borderRadius: '5px',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '10px',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
},
|
||||||
|
uploadedFileInfo: {
|
||||||
|
marginRight: '18rem',
|
||||||
|
marginTop: '0.2rem',
|
||||||
|
},
|
||||||
|
uploadedFileText: {
|
||||||
|
fontSize: '16px',
|
||||||
|
color: '#1f2d3d',
|
||||||
|
},
|
||||||
|
customLabel: {
|
||||||
|
fontWeight: 600,
|
||||||
|
fontSize: '14px',
|
||||||
|
color: '#212529',
|
||||||
|
},
|
||||||
|
responsiveImageStyle: {
|
||||||
|
width: '100%',
|
||||||
|
maxHeight: '250px',
|
||||||
|
objectFit: 'cover',
|
||||||
|
marginTop: '20px',
|
||||||
|
},
|
||||||
|
responsiveResultContainer: {
|
||||||
|
padding: '1rem',
|
||||||
|
border: '1px solid #ccc',
|
||||||
|
borderRadius: '8px',
|
||||||
|
marginTop: '20px',
|
||||||
|
},
|
||||||
|
responsiveImageContainer: {
|
||||||
|
marginTop: '20px',
|
||||||
|
textAlign: 'center',
|
||||||
|
},
|
||||||
|
responsiveSubmitButton: {
|
||||||
|
marginTop: '1rem',
|
||||||
|
},
|
||||||
|
responsiveLoadingOverlay: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: '0',
|
||||||
|
left: '0',
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
backgroundColor: 'rgba(0,0,0,0.5)',
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
zIndex: '10',
|
||||||
|
},
|
||||||
|
responsiveSpinner: {
|
||||||
|
border: '4px solid #f3f3f3',
|
||||||
|
borderTop: '4px solid #3498db',
|
||||||
|
borderRadius: '50%',
|
||||||
|
width: '50px',
|
||||||
|
height: '50px',
|
||||||
|
animation: 'spin 2s linear infinite',
|
||||||
|
},
|
||||||
|
responsiveLoadingText: {
|
||||||
|
color: 'white',
|
||||||
|
marginTop: '10px',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
@ -533,16 +613,16 @@ const Verify = () => {
|
|||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<div className="select-wrapper">
|
<div className="select-wrapper">
|
||||||
<Select
|
<Select
|
||||||
id="applicationId"
|
id="applicationId"
|
||||||
value={applicationOptions.find(option => option.value === applicationId)}
|
value={applicationOptions.find(option => option.value === applicationId)}
|
||||||
onChange={handleApplicationChange}
|
onChange={handleApplicationChange}
|
||||||
options={applicationOptions}
|
options={applicationOptions}
|
||||||
placeholder="Select Application ID"
|
placeholder="Select Application ID"
|
||||||
isSearchable
|
isSearchable
|
||||||
menuPortalTarget={document.body} // Use this for scroll behavior
|
menuPortalTarget={document.body} // Use this for scroll behavior
|
||||||
menuPlacement="auto"
|
menuPlacement="auto"
|
||||||
inputValue={inputValueApplication}
|
inputValue={inputValueApplication}
|
||||||
onInputChange={handleInputChangeApplication} // Limit input length for Application ID
|
onInputChange={handleInputChangeApplication} // Limit input length for Application ID
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{applicationError && <small style={styles.uploadError}>{applicationError}</small>}
|
{applicationError && <small style={styles.uploadError}>{applicationError}</small>}
|
||||||
@ -559,166 +639,145 @@ const Verify = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Subject ID Input */}
|
{/* Subject ID Input */}
|
||||||
<div className="form-group row align-items-center">
|
<div className="form-group row align-items-center">
|
||||||
<div className="col-md-6">
|
|
||||||
<Select
|
|
||||||
id="subjectId"
|
|
||||||
options={options}
|
|
||||||
value={options.find(option => option.value === subjectId)}
|
|
||||||
onChange={selectedOption => setSubjectId(selectedOption ? selectedOption.value : '')}
|
|
||||||
onInputChange={(value) => {
|
|
||||||
// Check if input value length is within the 15-character limit
|
|
||||||
if (value.length <= 15) {
|
|
||||||
setInputValue(value); // Set the input value if within limit
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onFocus={() => fetchSubjectIds(applicationId)} // Fetch subject IDs on focus
|
|
||||||
placeholder="Enter Subject ID"
|
|
||||||
isClearable
|
|
||||||
noOptionsMessage={() => (
|
|
||||||
<div style={{ color: 'red' }}>Subject ID not registered.</div>
|
|
||||||
)}
|
|
||||||
inputValue={inputValue} // Bind the inputValue state to control the input
|
|
||||||
/>
|
|
||||||
{subjectError && <small style={{ color: 'red' }}>{subjectError}</small>}
|
|
||||||
{subjectAvailabilityMessage && (
|
|
||||||
<small style={{ color: subjectAvailabilityMessage.includes('available') ? 'green' : 'red' }}>
|
|
||||||
{subjectAvailabilityMessage}
|
|
||||||
</small>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="col-md-6">
|
|
||||||
<div style={styles.selectWrapper}>
|
|
||||||
<select
|
|
||||||
id="thresholdId"
|
|
||||||
className="form-control"
|
|
||||||
style={styles.select}
|
|
||||||
value={thresholdId}
|
|
||||||
onChange={(e) => {
|
|
||||||
setThresholdId(e.target.value);
|
|
||||||
setThresholdError(''); // Clear error if valid
|
|
||||||
}}
|
|
||||||
onFocus={handleFocus}
|
|
||||||
onBlur={handleBlur}
|
|
||||||
>
|
|
||||||
<option value="">Select Threshold</option>
|
|
||||||
{thresholdIds.map((app) => (
|
|
||||||
<option key={app.id} value={app.name}>
|
|
||||||
{app.displayName}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon={isSelectOpen ? faChevronDown : faChevronLeft}
|
|
||||||
style={styles.chevronIcon}
|
|
||||||
/>
|
|
||||||
{thresholdError && <small style={styles.uploadError}>{thresholdError}</small>}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Upload Section */}
|
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<div className="row form-group mt-4">
|
<Select
|
||||||
<CustomLabel htmlFor="uploadPhoto" style={styles.customLabel}>
|
id="subjectId"
|
||||||
Upload Face Photo
|
options={options}
|
||||||
</CustomLabel>
|
value={options.find(option => option.value === subjectId)}
|
||||||
<FileUploader
|
onChange={selectedOption => setSubjectId(selectedOption ? selectedOption.value : '')}
|
||||||
handleChange={handleImageUpload}
|
onInputChange={(value) => {
|
||||||
name="file"
|
if (value.length <= 15) {
|
||||||
types={fileTypes}
|
setInputValue(value); // Set the input value if within limit
|
||||||
multiple={false}
|
|
||||||
onDrop={(files) => handleImageUpload(files[0])}
|
|
||||||
children={
|
|
||||||
<div style={styles.uploadArea}>
|
|
||||||
<i className="fas fa-cloud-upload-alt" style={styles.uploadIcon}></i>
|
|
||||||
<p style={styles.uploadText}>Drag and Drop Here</p>
|
|
||||||
<p>Or</p>
|
|
||||||
<a href="#" onClick={() => fileInputRef.current.click()}>Browse</a>
|
|
||||||
<p className="text-muted">Recommended size: 300x300 (Max File Size: 2MB)</p>
|
|
||||||
<p className="text-muted">Supported file types: JPG, JPEG</p>
|
|
||||||
</div>
|
|
||||||
}
|
}
|
||||||
|
}}
|
||||||
|
onFocus={() => fetchSubjectIds(applicationId)} // Fetch subject IDs on focus
|
||||||
|
placeholder="Enter Subject ID"
|
||||||
|
isClearable
|
||||||
|
noOptionsMessage={() => (
|
||||||
|
<div style={{ color: 'red' }}>Subject ID not registered.</div>
|
||||||
|
)}
|
||||||
|
inputValue={inputValue} // Bind the inputValue state to control the input
|
||||||
|
/>
|
||||||
|
{subjectError && <small style={{ color: 'red' }}>{subjectError}</small>}
|
||||||
|
{subjectAvailabilityMessage && (
|
||||||
|
<small style={{ color: subjectAvailabilityMessage.includes('available') ? 'green' : 'red' }}>
|
||||||
|
{subjectAvailabilityMessage}
|
||||||
|
</small>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-md-6">
|
||||||
|
<div style={styles.selectWrapper}>
|
||||||
|
<select
|
||||||
|
id="thresholdId"
|
||||||
|
className="form-control"
|
||||||
|
style={styles.select}
|
||||||
|
value={thresholdId}
|
||||||
|
onChange={(e) => {
|
||||||
|
setThresholdId(e.target.value);
|
||||||
|
setThresholdError(''); // Clear error if valid
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<option value="">Select Threshold</option>
|
||||||
|
{thresholdIds.map((app) => (
|
||||||
|
<option key={app.id} value={app.name}>
|
||||||
|
{app.displayName}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon={faChevronDown}
|
||||||
|
style={styles.chevronIcon}
|
||||||
/>
|
/>
|
||||||
{uploadError && <small style={styles.uploadError}>{uploadError}</small>}
|
{thresholdError && <small style={styles.uploadError}>{thresholdError}</small>}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
{/* Display uploaded image name */}
|
|
||||||
{selectedImageName && (
|
{/* Upload Section */}
|
||||||
<div className="col-md-6 mt-4" style={styles.wrapper}>
|
<div className="col-md-6">
|
||||||
<div style={styles.fileWrapper}>
|
<div className="row form-group mt-4">
|
||||||
<FontAwesomeIcon icon={faImage} style={styles.imageIcon} />
|
<CustomLabel htmlFor="uploadPhoto" style={styles.customLabel}>
|
||||||
<div style={styles.textContainer}>
|
Upload Face Photo
|
||||||
<h5>Uploaded File:</h5>
|
</CustomLabel>
|
||||||
<p>{selectedImageName}</p>
|
<FileUploader
|
||||||
{file && (
|
handleChange={handleImageUpload}
|
||||||
<p style={styles.fileSize}>
|
name="file"
|
||||||
Size: {formatFileSize(file.size)}
|
types={fileTypes}
|
||||||
</p>
|
multiple={false}
|
||||||
)}
|
onDrop={(files) => handleImageUpload(files[0])}
|
||||||
</div>
|
children={
|
||||||
<div style={styles.closeButtonContainer}>
|
<div style={styles.uploadArea}>
|
||||||
<button
|
<i className="fas fa-cloud-upload-alt" style={styles.uploadIcon}></i>
|
||||||
style={styles.closeButton}
|
<p style={styles.uploadText}>Drag and Drop Here</p>
|
||||||
onClick={handleImageCancel}
|
<p>Or</p>
|
||||||
aria-label="Remove uploaded image"
|
<a href="#" onClick={() => fileInputRef.current.click()}>Browse</a>
|
||||||
>
|
<p className="text-muted">Recommended size: 300x300 (Max File Size: 2MB)</p>
|
||||||
<FontAwesomeIcon
|
<p className="text-muted">Supported file types: JPG, JPEG</p>
|
||||||
icon={faTimes}
|
|
||||||
style={styles.closeIcon}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
}
|
||||||
)}
|
/>
|
||||||
|
{uploadError && <small style={styles.uploadError}>{uploadError}</small>}
|
||||||
{/* Submit Button */}
|
</div>
|
||||||
<div style={styles.submitButton}>
|
</div>
|
||||||
<button onClick={handleCheckClick} className="btn d-flex justify-content-center align-items-center me-2" style={{ backgroundColor: '#0542CC' }}>
|
|
||||||
<p className="text-white mb-0">Check Now</p>
|
{/* Display uploaded image name */}
|
||||||
|
{selectedImageName && (
|
||||||
|
<div className="mt-3">
|
||||||
|
<p><strong>File:</strong> {selectedImageName}</p>
|
||||||
|
{file && (
|
||||||
|
<p style={styles.fileSize}>
|
||||||
|
Size: {formatFileSize(file.size)}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<button className="btn btn-danger" onClick={handleImageCancel}>
|
||||||
|
<FontAwesomeIcon icon={faTimes} className="me-2" />Cancel
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
{errorMessage && <small style={styles.uploadError}>{errorMessage}</small>}
|
||||||
|
|
||||||
{/* Results Section */}
|
{/* Submit Button */}
|
||||||
{showResult && (
|
<div style={styles.submitButton}>
|
||||||
<div style={styles.containerResultStyle}>
|
<button onClick={handleCheckClick} className="btn d-flex justify-content-center align-items-center me-2" style={{ backgroundColor: '#0542CC' }}>
|
||||||
<h1 style={{ color: '#0542cc', fontSize: isMobile ? '1.5rem' : '2rem' }}>Results</h1>
|
<p className="text-white mb-0">Check Now</p>
|
||||||
<div style={{ ...styles.resultContainer, flexDirection: isMobile ? 'column' : 'row' }}>
|
</button>
|
||||||
<table style={isMobile ? styles.resultsTableMobile : styles.tableStyle}>
|
</div>
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td style={{ ...styles.resultsCell, width: '40%' }}>Similarity</td>
|
|
||||||
<td
|
|
||||||
style={{
|
|
||||||
...styles.resultsValueCell,
|
|
||||||
color: verified ? 'green' : verified === false ? 'red' : 'black',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<strong>{verified !== null ? (verified ? 'True' : 'False') : 'N/A'}</strong>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<div style={{ ...styles.imageContainer, width: isMobile ? '100%' : '30%' }}>
|
{/* Results Section */}
|
||||||
<img
|
{showResult && (
|
||||||
src={imageUrl || "path-to-your-image"}
|
<div style={styles.containerResultStyle}>
|
||||||
alt="Example Image"
|
<h1 style={{ color: '#0542cc', fontSize: '2rem' }}>Results</h1>
|
||||||
style={isMobile ? styles.imageStyleMobile : styles.imageStyle}
|
<div style={styles.resultContainer}>
|
||||||
/>
|
<table style={styles.resultsTableMobile}>
|
||||||
<p style={{ marginTop: '10px', fontSize: isMobile ? '12px' : '16px' }}>
|
<tbody>
|
||||||
File Name: {selectedImageName}
|
<tr>
|
||||||
</p>
|
<td style={styles.resultsCell}>Similarity</td>
|
||||||
</div>
|
<td style={{ ...styles.resultsValueCell, color: verified ? 'green' : 'red' }}>
|
||||||
|
<strong>{verified !== null ? (verified ? 'True' : 'False') : 'N/A'}</strong>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<div style={styles.imageContainer}>
|
||||||
|
<img
|
||||||
|
src={imageUrl || "path-to-your-image"}
|
||||||
|
alt="Example Image"
|
||||||
|
style={styles.imageStyle}
|
||||||
|
/>
|
||||||
|
<p style={{ marginTop: '10px' }}>
|
||||||
|
File Name: {selectedImageName}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Verify;
|
export default Verify;
|
||||||
|
|||||||
@ -27,6 +27,7 @@ const Verify = () => {
|
|||||||
const [data, setData] = useState(null);
|
const [data, setData] = useState(null);
|
||||||
const [showResult, setShowResult] = useState(false);
|
const [showResult, setShowResult] = useState(false);
|
||||||
const [inputValueApplication, setInputValueApplication] = useState('');
|
const [inputValueApplication, setInputValueApplication] = useState('');
|
||||||
|
const [selectedQuota, setSelectedQuota] = useState(0);
|
||||||
|
|
||||||
// Validation state
|
// Validation state
|
||||||
const [validationErrors, setValidationErrors] = useState({
|
const [validationErrors, setValidationErrors] = useState({
|
||||||
@ -87,7 +88,14 @@ const Verify = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleApplicationChange = (selectedOption) => {
|
const handleApplicationChange = (selectedOption) => {
|
||||||
|
const selectedId = selectedOption.value;
|
||||||
|
const selectedApp = applicationIds.find(app => app.id === parseInt(selectedId));
|
||||||
|
|
||||||
setApplicationId(selectedOption ? selectedOption.value : '');
|
setApplicationId(selectedOption ? selectedOption.value : '');
|
||||||
|
|
||||||
|
if (selectedApp) {
|
||||||
|
setSelectedQuota(selectedApp.quota);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const applicationOptions = applicationIds.map(app => ({
|
const applicationOptions = applicationIds.map(app => ({
|
||||||
@ -220,8 +228,6 @@ const Verify = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// The fetchImage function you already have in your code
|
// The fetchImage function you already have in your code
|
||||||
const fetchImage = async (imageFileName) => {
|
const fetchImage = async (imageFileName) => {
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
@ -257,6 +263,132 @@ const Verify = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const styles = {
|
||||||
|
selectWrapper: {
|
||||||
|
position: 'relative',
|
||||||
|
display: 'inline-block',
|
||||||
|
width: '100%',
|
||||||
|
},
|
||||||
|
select: {
|
||||||
|
fontSize: '16px',
|
||||||
|
padding: '10px',
|
||||||
|
width: '100%',
|
||||||
|
borderRadius: '4px',
|
||||||
|
border: '1px solid #ccc',
|
||||||
|
},
|
||||||
|
remainingQuota: {
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
quotaText: {
|
||||||
|
fontSize: '24px',
|
||||||
|
fontWeight: '600',
|
||||||
|
},
|
||||||
|
timesText: {
|
||||||
|
fontSize: '16px',
|
||||||
|
fontWeight: '300',
|
||||||
|
},
|
||||||
|
customLabel: {
|
||||||
|
fontSize: '18px',
|
||||||
|
fontWeight: '600',
|
||||||
|
color: '#1f2d3d',
|
||||||
|
},
|
||||||
|
uploadWrapper: {
|
||||||
|
marginTop: '1rem',
|
||||||
|
},
|
||||||
|
uploadArea: {
|
||||||
|
backgroundColor: '#e6f2ff',
|
||||||
|
height: !isMobile? '30svh' : '50svh',
|
||||||
|
cursor: 'pointer',
|
||||||
|
marginTop: '1rem',
|
||||||
|
paddingTop: '22px',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
border: '1px solid #ced4da',
|
||||||
|
borderRadius: '0.25rem',
|
||||||
|
textAlign: 'center',
|
||||||
|
},
|
||||||
|
uploadIcon: {
|
||||||
|
fontSize: '40px',
|
||||||
|
color: '#0542cc',
|
||||||
|
marginBottom: '10px',
|
||||||
|
},
|
||||||
|
uploadText: {
|
||||||
|
color: '#1f2d3d',
|
||||||
|
fontWeight: '400',
|
||||||
|
fontSize: '16px',
|
||||||
|
},
|
||||||
|
browseLink: {
|
||||||
|
color: '#0542cc',
|
||||||
|
textDecoration: 'none',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
},
|
||||||
|
uploadError: {
|
||||||
|
color: 'red',
|
||||||
|
fontSize: '12px',
|
||||||
|
marginTop: '10px',
|
||||||
|
},
|
||||||
|
errorContainer: {
|
||||||
|
marginTop: '10px',
|
||||||
|
padding: '10px',
|
||||||
|
backgroundColor: '#f8d7da',
|
||||||
|
border: '1px solid #f5c6cb',
|
||||||
|
borderRadius: '4px',
|
||||||
|
},
|
||||||
|
errorText: {
|
||||||
|
color: '#721c24',
|
||||||
|
fontSize: '14px',
|
||||||
|
margin: '0',
|
||||||
|
},loadingOverlay: {
|
||||||
|
position: 'fixed', // Gunakan fixed untuk overlay penuh layar
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0, // Pastikan menutupi seluruh layar
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center', // Posisikan spinner di tengah secara horizontal
|
||||||
|
alignItems: 'center', // Posisikan spinner di tengah secara vertikal
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semitransparan di background
|
||||||
|
color: 'white',
|
||||||
|
fontSize: '24px',
|
||||||
|
zIndex: 1000, // Pastikan overlay muncul di atas konten lainnya
|
||||||
|
},
|
||||||
|
spinner: {
|
||||||
|
border: '4px solid #f3f3f3', // Border gray untuk spinner
|
||||||
|
borderTop: '4px solid #3498db', // Border biru untuk spinner
|
||||||
|
borderRadius: '50%', // Membuat spinner bulat
|
||||||
|
width: '50px', // Ukuran spinner
|
||||||
|
height: '50px', // Ukuran spinner
|
||||||
|
animation: 'spin 2s linear infinite', // Menambahkan animasi spin
|
||||||
|
},
|
||||||
|
loadingText: {
|
||||||
|
marginLeft: '20px',
|
||||||
|
},
|
||||||
|
tableStyle: {
|
||||||
|
width: '100%',
|
||||||
|
borderCollapse: 'collapse',
|
||||||
|
marginTop: '20px',
|
||||||
|
},
|
||||||
|
tableCell: {
|
||||||
|
padding: '8px 15px',
|
||||||
|
border: '1px solid #ccc',
|
||||||
|
textAlign: 'left',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatFileSize = (sizeInBytes) => {
|
||||||
|
if (sizeInBytes < 1024) {
|
||||||
|
return `${sizeInBytes} bytes`; // Jika ukuran lebih kecil dari 1 KB
|
||||||
|
} else if (sizeInBytes < 1048576) {
|
||||||
|
return `${(sizeInBytes / 1024).toFixed(2)} KB`; // Jika ukuran lebih kecil dari 1 MB
|
||||||
|
} else {
|
||||||
|
return `${(sizeInBytes / 1048576).toFixed(2)} MB`; // Jika ukuran lebih besar dari 1 MB
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container" style={{ marginTop: '3%' }}>
|
<div className="container" style={{ marginTop: '3%' }}>
|
||||||
{/* Inject keyframes for the spinner */}
|
{/* Inject keyframes for the spinner */}
|
||||||
@ -315,11 +447,11 @@ const Verify = () => {
|
|||||||
{validationErrors.applicationId && <p style={styles.errorText}>{validationErrors.applicationId}</p>}
|
{validationErrors.applicationId && <p style={styles.errorText}>{validationErrors.applicationId}</p>}
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<p className="text-secondary" style={{ fontSize: '16px', fontWeight: '400', marginTop: '8px' }}>
|
<p className="text-secondary" style={{ fontSize: '16px', fontWeight: '400', margin: '0', marginTop: '8px' }}>
|
||||||
Remaining Quota
|
Remaining Quota
|
||||||
</p>
|
</p>
|
||||||
<div style={styles.remainingQuota}>
|
<div style={styles.remainingQuota}>
|
||||||
<span style={styles.quotaText}>0</span>
|
<span style={styles.quotaText}>{selectedQuota}</span>
|
||||||
<span style={styles.timesText}>(times)</span>
|
<span style={styles.timesText}>(times)</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -362,6 +494,11 @@ const Verify = () => {
|
|||||||
{selectedImageName && (
|
{selectedImageName && (
|
||||||
<div className="mt-3">
|
<div className="mt-3">
|
||||||
<p><strong>File:</strong> {selectedImageName}</p>
|
<p><strong>File:</strong> {selectedImageName}</p>
|
||||||
|
{file && (
|
||||||
|
<p style={styles.fileSize}>
|
||||||
|
Size: {formatFileSize(file.size)}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
<button className="btn btn-danger" onClick={handleImageCancel}>
|
<button className="btn btn-danger" onClick={handleImageCancel}>
|
||||||
<FontAwesomeIcon icon={faTimes} className="me-2" />Cancel
|
<FontAwesomeIcon icon={faTimes} className="me-2" />Cancel
|
||||||
</button>
|
</button>
|
||||||
@ -477,117 +614,3 @@ const Verify = () => {
|
|||||||
|
|
||||||
export default Verify;
|
export default Verify;
|
||||||
|
|
||||||
const styles = {
|
|
||||||
selectWrapper: {
|
|
||||||
position: 'relative',
|
|
||||||
display: 'inline-block',
|
|
||||||
width: '100%',
|
|
||||||
},
|
|
||||||
select: {
|
|
||||||
fontSize: '16px',
|
|
||||||
padding: '10px',
|
|
||||||
width: '100%',
|
|
||||||
borderRadius: '4px',
|
|
||||||
border: '1px solid #ccc',
|
|
||||||
},
|
|
||||||
remainingQuota: {
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
},
|
|
||||||
quotaText: {
|
|
||||||
fontSize: '24px',
|
|
||||||
fontWeight: '600',
|
|
||||||
},
|
|
||||||
timesText: {
|
|
||||||
fontSize: '16px',
|
|
||||||
fontWeight: '300',
|
|
||||||
},
|
|
||||||
customLabel: {
|
|
||||||
fontSize: '18px',
|
|
||||||
fontWeight: '600',
|
|
||||||
color: '#1f2d3d',
|
|
||||||
},
|
|
||||||
uploadWrapper: {
|
|
||||||
marginTop: '1rem',
|
|
||||||
},
|
|
||||||
uploadArea: {
|
|
||||||
backgroundColor: '#e6f2ff',
|
|
||||||
height: '58svh',
|
|
||||||
cursor: 'pointer',
|
|
||||||
marginTop: '1rem',
|
|
||||||
paddingTop: '22px',
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column',
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
border: '1px solid #ced4da',
|
|
||||||
borderRadius: '0.25rem',
|
|
||||||
textAlign: 'center',
|
|
||||||
},
|
|
||||||
uploadIcon: {
|
|
||||||
fontSize: '40px',
|
|
||||||
color: '#0542cc',
|
|
||||||
marginBottom: '10px',
|
|
||||||
},
|
|
||||||
uploadText: {
|
|
||||||
color: '#1f2d3d',
|
|
||||||
fontWeight: '400',
|
|
||||||
fontSize: '16px',
|
|
||||||
},
|
|
||||||
browseLink: {
|
|
||||||
color: '#0542cc',
|
|
||||||
textDecoration: 'none',
|
|
||||||
fontWeight: 'bold',
|
|
||||||
},
|
|
||||||
uploadError: {
|
|
||||||
color: 'red',
|
|
||||||
fontSize: '12px',
|
|
||||||
marginTop: '10px',
|
|
||||||
},
|
|
||||||
errorContainer: {
|
|
||||||
marginTop: '10px',
|
|
||||||
padding: '10px',
|
|
||||||
backgroundColor: '#f8d7da',
|
|
||||||
border: '1px solid #f5c6cb',
|
|
||||||
borderRadius: '4px',
|
|
||||||
},
|
|
||||||
errorText: {
|
|
||||||
color: '#721c24',
|
|
||||||
fontSize: '14px',
|
|
||||||
margin: '0',
|
|
||||||
},loadingOverlay: {
|
|
||||||
position: 'fixed', // Gunakan fixed untuk overlay penuh layar
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
bottom: 0, // Pastikan menutupi seluruh layar
|
|
||||||
display: 'flex',
|
|
||||||
justifyContent: 'center', // Posisikan spinner di tengah secara horizontal
|
|
||||||
alignItems: 'center', // Posisikan spinner di tengah secara vertikal
|
|
||||||
backgroundColor: 'rgba(0, 0, 0, 0.5)', // Semitransparan di background
|
|
||||||
color: 'white',
|
|
||||||
fontSize: '24px',
|
|
||||||
zIndex: 1000, // Pastikan overlay muncul di atas konten lainnya
|
|
||||||
},
|
|
||||||
spinner: {
|
|
||||||
border: '4px solid #f3f3f3', // Border gray untuk spinner
|
|
||||||
borderTop: '4px solid #3498db', // Border biru untuk spinner
|
|
||||||
borderRadius: '50%', // Membuat spinner bulat
|
|
||||||
width: '50px', // Ukuran spinner
|
|
||||||
height: '50px', // Ukuran spinner
|
|
||||||
animation: 'spin 2s linear infinite', // Menambahkan animasi spin
|
|
||||||
},
|
|
||||||
loadingText: {
|
|
||||||
marginLeft: '20px',
|
|
||||||
},
|
|
||||||
tableStyle: {
|
|
||||||
width: '100%',
|
|
||||||
borderCollapse: 'collapse',
|
|
||||||
marginTop: '20px',
|
|
||||||
},
|
|
||||||
tableCell: {
|
|
||||||
padding: '8px 15px',
|
|
||||||
border: '1px solid #ccc',
|
|
||||||
textAlign: 'left',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user