rizqikaibnu/rekan_veri_fe_new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve code - Search and Quota

Browse Source
This commit is contained in:
Rizqika 2024-11-15 14:06:08 +07:00
parent 77e4f0cf4d
commit b1f0405ac9
2 changed files with 36 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/screens/Biometric/FaceRecognition/Section/Search.jsx
View File

@ -213,7 +213,9 @@ const Search = () => {
console.log('Response Data:', data); 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.result) ? data.details.data.result : [];
const updateQuota = data.details.data.quota
const processedResults = resultsArray.map(item => ({ const processedResults = resultsArray.map(item => ({
identity: item.identity, identity: item.identity,
similarity: item.similarity, similarity: item.similarity,
@ -230,6 +232,7 @@ const Search = () => {
setResults(processedResults); setResults(processedResults);
setResultImageLabel(selectedImageName) setResultImageLabel(selectedImageName)
setSelectedQuota(updateQuota)
setShowResult(true); setShowResult(true);
} else { } else {
console.error('Error response:', JSON.stringify(data, null, 2)); console.error('Error response:', JSON.stringify(data, null, 2));
@ -439,39 +442,29 @@ const Search = () => {
borderRadius: '8px', borderRadius: '8px',
margin: '1rem', margin: '1rem',
width: '100%', // Full width for large screens width: '100%', // Full width for large screens
}, },resultGrid: {
resultContainer: { display: 'grid',
display: 'flex', gridTemplateColumns: 'repeat(5, 1fr)', // Membuat 5 kolom dalam grid
flexDirection: 'row', gap: '16px', // Jarak antar card
flexWrap: 'wrap',
gap: '1rem',
justifyContent: 'center',
}, },
resultItem: { resultItem: {
display: 'flex', border: '1px solid #ddd',
flexDirection: 'column', borderRadius: '8px',
alignItems: 'center', padding: '10px',
textAlign: 'center', boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)',
padding: '0.5rem', textAlign: 'center',
backgroundColor: '#fff',
border: '1px solid #ddd',
borderRadius: '8px',
boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)',
width: '150px', // Default width for larger screens
}, },
resultTextContainer: { resultTextContainer: {
marginBottom: '0.5rem', marginBottom: '10px',
}, },
resultText: { resultText: {
fontSize: '0.9rem', fontSize: '14px',
color: '#333', color: '#333',
margin: '0.2rem 0',
}, },
resultImage: { resultImage: {
width: '80px', width: '100%',
height: '80px', height: 'auto',
borderRadius: '50%', borderRadius: '8px',
marginTop: '0.5rem',
}, },
// Media query for mobile responsiveness // Media query for mobile responsiveness
@ -603,11 +596,7 @@ const Search = () => {
accept="image/jpeg, image/jpg" accept="image/jpeg, image/jpg"
onChange={e => handleImageUpload(e.target.files[0])} onChange={e => handleImageUpload(e.target.files[0])}
/> />
{(imageError || errorMessage) && ( {imageError && <small style={styles.uploadError}>{imageError}</small>}
<small style={{ color: 'red' }}>
{imageError || errorMessage}
</small>
)}
</div> </div>
</div> </div>
@ -638,23 +627,23 @@ const Search = () => {
{ {
showResult && results.length > 0 && ( showResult && results.length > 0 && (
<div style={styles.containerResultStyle}> <div style={styles.containerResultStyle}>
<h1 style={{ color: '#0542cc', textAlign: 'center' }}>Results</h1> <h1 style={{ color: '#0542cc', textAlign: 'center' }}>Results</h1>
<div style={styles.resultContainer}> <div style={styles.resultGrid}>
{results.slice(0, limitId).map((result, index) => ( {results.slice(0, limitId).map((result, index) => (
<div key={index} style={styles.resultItem}> <div key={index} style={styles.resultItem}>
<div style={styles.resultTextContainer}> <div style={styles.resultTextContainer}>
{/* Displaying the dynamically set resultImageLabel */} <p style={styles.resultText}>Image Name: {resultImageLabel}</p>
<p style={styles.resultText}>Image Name: {resultImageLabel}</p> {/* Updated here */} <p style={styles.resultText}>Similarity: {result.similarity}%</p>
<p style={styles.resultText}>Similarity: {result.similarity}%</p> <p style={styles.resultText}>Distance: {result.distance}</p>
<p style={styles.resultText}>Distance: {result.distance}</p> </div>
</div> <img src={imageUrls[index]} alt={`Result ${index + 1}`} style={styles.resultImage} />
<img src={imageUrls[index]} alt={`Result ${index + 1}`} style={styles.resultImage} /> </div>
</div> ))}
))} </div>
</div>
</div> </div>
) )
} }
</div> </div>
); );
} }

7
src/screens/Home/Applications/CreateApps.jsx
View File

@ -83,14 +83,11 @@ const CreateApps = () => {
// Tampilkan pesan sukses // Tampilkan pesan sukses
alert('Application ID created successfully!'); alert('Application ID created successfully!');
// Navigasikan kembali ke halaman sebelumnya navigate(-1);
navigate(-1); // Jika menggunakan react-router-dom
// Atau jika menggunakan React Native:
// navigation.goBack();
} catch (error) { } catch (error) {
console.error('Error creating application ID:', error); console.error('Error creating application ID:', error);
setError('Failed to create Application ID. Please try again.'); setError(`Application ID already exists`);
} }
} }
}; };