107 lines
4.2 KiB
JavaScript
107 lines
4.2 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { FaInfoCircle } from "react-icons/fa";
|
|
import { AiOutlineLoading } from "react-icons/ai";
|
|
import DatePicker from "react-datepicker";
|
|
import moment from 'moment';
|
|
import axios from 'axios';
|
|
|
|
import "react-datepicker/dist/react-datepicker.css";
|
|
import './Accuracy.css';
|
|
|
|
function Accuracy({ show }) {
|
|
const [showCardInfo, setShowCardInfo] = useState(false);
|
|
const [startDate, setStartDate] = useState("");
|
|
const [endDate, setEndDate] = useState("");
|
|
const [selectedFile, setSelectedFile] = useState(null);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState(null); // New state for handling errors
|
|
|
|
const handleFileChange = (event) => {
|
|
setSelectedFile(event.target.files[0]);
|
|
};
|
|
|
|
|
|
const fetchFile = async (start_date, end_date) => {
|
|
try {
|
|
setLoading(true);
|
|
setError(null); // Reset error state before making a new request
|
|
|
|
if (selectedFile) {
|
|
const formData = new FormData();
|
|
formData.append('file', selectedFile);
|
|
|
|
const queryString = `start_date=${moment(startDate).format(
|
|
'YYYY-MM-DD'
|
|
)}&end_date=${moment(endDate).format('YYYY-MM-DD')}`;
|
|
|
|
const url = `https://asia-south1-hpos-af3cc.cloudfunctions.net/performance?${queryString}`;
|
|
|
|
// Make a POST request using the Fetch API
|
|
const response = await fetch(url, {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: {
|
|
// Add any necessary headers
|
|
// 'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
|
|
},
|
|
});
|
|
|
|
// Check if the request was successful (status code 2xx)
|
|
if (response.ok) {
|
|
// Create a blob from the response data
|
|
const blob = await response.blob();
|
|
|
|
// Create a download link and trigger a click to download the file
|
|
const link = document.createElement('a');
|
|
link.href = window.URL.createObjectURL(blob);
|
|
link.download = 'autoanlysis.xlsx'; // Set the desired file name
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
|
|
// Clean up
|
|
document.body.removeChild(link);
|
|
} else {
|
|
console.error('Error downloading file:', response.statusText);
|
|
setError('Error downloading file. Please try again.'); // Set error message
|
|
}
|
|
} else {
|
|
setError("Select file from reference device");
|
|
}
|
|
} catch (error) {
|
|
console.error('Error downloading file:', error);
|
|
setError('Error downloading file. Please try again.'); // Set error message
|
|
} finally {
|
|
setLoading(false); // Set loading back to false when the request completes
|
|
}
|
|
};
|
|
|
|
|
|
return (
|
|
<div>
|
|
<h1>Auto Analysis</h1>
|
|
<div className='file-row'>
|
|
<div className='file-label'>Reference file</div>
|
|
<input type="file" onChange={handleFileChange} />
|
|
</div>
|
|
<div className='dates'>
|
|
<div className='start-date'>
|
|
<DatePicker selected={startDate} onChange={(date) => setStartDate(date)} placeholderText='start date' />
|
|
</div>
|
|
<div className='end-date'>
|
|
<DatePicker selected={endDate} onChange={(date) => setEndDate(date)} placeholderText='end date' />
|
|
</div>
|
|
</div>
|
|
<div className='download-row'>
|
|
<div className='button' onClick={() => fetchFile(startDate, endDate)}>
|
|
{loading ? (
|
|
<AiOutlineLoading className="loading-icon" />
|
|
) : (
|
|
'Download Excel'
|
|
)}
|
|
</div>
|
|
</div>
|
|
{error && <div className="error-message">{error}</div>} {/* Display error message if there's an error */}
|
|
</div>
|
|
);
|
|
}
|
|
export default Accuracy; |