Improve code - Realtime Quota
This commit is contained in:
parent
47115a8ebb
commit
77e4f0cf4d
@ -215,6 +215,7 @@ const Compare = () => {
|
||||
setVerified(data.details.data.result.verified);
|
||||
setResultImageLabel(selectedImageName)
|
||||
setResultCompareImageLabel(selectedCompareImageName)
|
||||
setSelectedQuota(data.details.data.result.quota)
|
||||
setShowResult(true);
|
||||
console.log('Comparison successful:', data);
|
||||
} else {
|
||||
|
||||
@ -155,14 +155,14 @@ const Enroll = () => {
|
||||
|
||||
const handleEnrollClick = async () => {
|
||||
let hasError = false;
|
||||
|
||||
|
||||
// Validate inputs and set corresponding errors
|
||||
const validationErrors = {
|
||||
imageError: !selectedImageName ? 'Please upload a face photo before enrolling.' : '',
|
||||
applicationError: !applicationId ? 'Please select an Application ID before enrolling.' : '',
|
||||
subjectError: !subjectId ? 'Please enter a Subject ID before enrolling.' : '',
|
||||
};
|
||||
|
||||
|
||||
// Update state with errors
|
||||
if (validationErrors.imageError) {
|
||||
setImageError(validationErrors.imageError);
|
||||
@ -170,43 +170,43 @@ const Enroll = () => {
|
||||
} else {
|
||||
setImageError(''); // Clear error if valid
|
||||
}
|
||||
|
||||
|
||||
if (validationErrors.applicationError) {
|
||||
setApplicationError(validationErrors.applicationError);
|
||||
hasError = true;
|
||||
} else {
|
||||
setApplicationError(''); // Clear error if valid
|
||||
}
|
||||
|
||||
|
||||
if (validationErrors.subjectError) {
|
||||
setSubjectError(validationErrors.subjectError);
|
||||
hasError = true;
|
||||
} else {
|
||||
setSubjectError(''); // Clear error if valid
|
||||
}
|
||||
|
||||
|
||||
// If there are errors, return early
|
||||
if (hasError) return;
|
||||
|
||||
|
||||
if (!file) {
|
||||
setImageError('No file selected. Please upload a valid image file.');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('application_id', String(applicationId));
|
||||
formData.append('subject_id', subjectId);
|
||||
formData.append('file', file);
|
||||
|
||||
|
||||
console.log('Inputs:', {
|
||||
applicationId,
|
||||
subjectId,
|
||||
file: file.name,
|
||||
});
|
||||
|
||||
|
||||
setIsLoading(true);
|
||||
setErrorMessage(''); // Clear previous error message
|
||||
|
||||
|
||||
try {
|
||||
const response = await fetch(`${BASE_URL}/face_recognition/enroll`, {
|
||||
method: 'POST',
|
||||
@ -216,7 +216,7 @@ const Enroll = () => {
|
||||
'x-api-key': `${API_KEY}`,
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
if (!response.ok) {
|
||||
const errorDetails = await response.json();
|
||||
console.error('Response error details:', errorDetails);
|
||||
@ -227,22 +227,28 @@ const Enroll = () => {
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const result = await response.json();
|
||||
console.log('Enrollment response:', result);
|
||||
|
||||
|
||||
// Update quota based on the response data
|
||||
if (result.details && result.details.data && result.details.data.quota !== undefined) {
|
||||
const updatedQuota = result.details.data.quota;
|
||||
setSelectedQuota(updatedQuota); // Update the state with the new quota
|
||||
}
|
||||
|
||||
if (result.details && result.details.data && result.details.data.image_url) {
|
||||
const imageFileName = result.details.data.image_url.split('/').pop();
|
||||
console.log('Image URL:', result.details.data.image_url);
|
||||
await fetchImage(imageFileName);
|
||||
|
||||
|
||||
// Set resultImageLabel after successful enrollment
|
||||
setresultImageLabel(selectedImageName); // Set resultImageLabel after success
|
||||
} else {
|
||||
console.error('Image URL not found in response:', result);
|
||||
setErrorMessage('Image URL not found in response. Please try again.');
|
||||
}
|
||||
|
||||
|
||||
setShowResult(true);
|
||||
console.log('Enrollment successful:', result);
|
||||
} catch (error) {
|
||||
@ -251,7 +257,7 @@ const Enroll = () => {
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const fetchImage = async (imageFileName) => {
|
||||
setIsLoading(true);
|
||||
@ -659,7 +665,7 @@ const Enroll = () => {
|
||||
</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
|
||||
@ -670,6 +676,7 @@ const Enroll = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="form-group row align-items-center">
|
||||
<div className="col-md-6">
|
||||
|
||||
@ -230,15 +230,25 @@ const Verify = () => {
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
if (data.details && data.details.data && data.details.data.result && data.details.data.result.image_url) {
|
||||
const imageFileName = data.details.data.result.image_url.split('/').pop();
|
||||
await fetchImage(imageFileName);
|
||||
}
|
||||
// Log the response data for debugging
|
||||
console.log('API Response Data:', data);
|
||||
|
||||
setShowResult(true);
|
||||
setVerified(data.details.data.result.verified);
|
||||
setResultImageLabel(selectedImageName);
|
||||
if (response.ok) {
|
||||
if (data.details && data.details.data && data.details.data.result) {
|
||||
const result = data.details.data.result;
|
||||
|
||||
// Update selectedQuota with the quota received from API
|
||||
setSelectedQuota(result.quota);
|
||||
|
||||
if (result.image_url) {
|
||||
const imageFileName = result.image_url.split('/').pop();
|
||||
await fetchImage(imageFileName);
|
||||
}
|
||||
|
||||
setShowResult(true);
|
||||
setVerified(result.verified);
|
||||
setResultImageLabel(selectedImageName);
|
||||
}
|
||||
} else {
|
||||
const errorMessage = data.message || data.detail || data.details?.message || 'An unknown error occurred.';
|
||||
setErrorMessage(errorMessage);
|
||||
@ -251,6 +261,7 @@ const Verify = () => {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const fetchImage = async (imageFileName) => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
@ -745,21 +756,6 @@ const Verify = () => {
|
||||
onChange={(e) => handleImageUpload(e.target.files[0])}
|
||||
/>
|
||||
|
||||
{/* Display selected file info */}
|
||||
{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>
|
||||
)}
|
||||
|
||||
{/* Error Message */}
|
||||
{uploadError && <small style={styles.uploadError}>{uploadError}</small>}
|
||||
</div>
|
||||
|
||||
@ -47,12 +47,15 @@ const Verify = () => {
|
||||
'x-api-key': API_KEY,
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch application IDs');
|
||||
}
|
||||
|
||||
|
||||
const data = await response.json();
|
||||
// Log response data
|
||||
console.log('Response Data:', data);
|
||||
|
||||
if (data.status_code === 200) {
|
||||
setApplicationIds(data.details.data);
|
||||
} else {
|
||||
@ -63,7 +66,7 @@ const Verify = () => {
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
fetchApplicationIds();
|
||||
|
||||
@ -186,6 +189,7 @@ const Verify = () => {
|
||||
|
||||
if (result.status_code === 201) {
|
||||
const responseData = result.details.data?.['data-ktp'] || {};
|
||||
const updateQuota = result.details.data.quota
|
||||
|
||||
const data = {
|
||||
nik: responseData.nik || 'N/A',
|
||||
@ -204,6 +208,8 @@ const Verify = () => {
|
||||
nationality: responseData.kewarganegaraan || 'N/A',
|
||||
imageUrl: result.details.data?.image_url || '', // Properly access image_url
|
||||
};
|
||||
|
||||
setSelectedQuota(updateQuota)
|
||||
|
||||
console.log('Image URL from OCR:', result.details.data?.image_url); // Log the image URL correctly
|
||||
|
||||
@ -300,10 +306,10 @@ const Verify = () => {
|
||||
},
|
||||
uploadArea: {
|
||||
backgroundColor: '#e6f2ff',
|
||||
height: !isMobile? '30svh' : '50svh',
|
||||
height: !isMobile? '43svh' : '50svh',
|
||||
cursor: 'pointer',
|
||||
marginTop: '1rem',
|
||||
paddingTop: '22px',
|
||||
padding: '3rem',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
|
||||
@ -186,7 +186,8 @@ const Verify = () => {
|
||||
|
||||
if (result.status_code === 201) {
|
||||
const responseData = result.details.data?.['data-npwp'] || {};
|
||||
|
||||
const updateQuota = result.details.data.quota
|
||||
|
||||
const data = {
|
||||
npwp: responseData.npwp || 'N/A',
|
||||
npwpName: responseData.name || 'N/A',
|
||||
@ -194,6 +195,8 @@ const Verify = () => {
|
||||
npwpX: responseData.npwp_x || 'N/A',
|
||||
imageUrl: result.details.data?.image_url || '', // Properly access image_url
|
||||
};
|
||||
|
||||
setSelectedQuota(updateQuota)
|
||||
|
||||
console.log('Image URL from OCR:', result.details.data?.image_url); // Log the image URL correctly
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user