161 lines
4.8 KiB
HTML
161 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
|
|
<title>Odczyt faktur</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background-color: #f4f4f9;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
}
|
|
|
|
.container {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
padding: 20px;
|
|
width: 90%;
|
|
max-width: 500px;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
color: #333;
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
|
|
input[type="file"] {
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
button {
|
|
padding: 10px;
|
|
background-color: #007BFF;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
|
|
.results {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.results table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.results table, .results th, .results td {
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
.results th, .results td {
|
|
padding: 10px;
|
|
text-align: left;
|
|
}
|
|
|
|
.error {
|
|
color: red;
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Odczyt faktur</h1>
|
|
<form id="invoiceForm" enctype="multipart/form-data">
|
|
<input type="file" id="fileInput" name="file" accept=".pdf" required>
|
|
<button type="submit">Wyślij</button>
|
|
</form>
|
|
<div id="responseMessage"></div>
|
|
<div class="results" id="results" style="display: none;">
|
|
<h2>Wyniki</h2>
|
|
<table>
|
|
<tr>
|
|
<th>Sprzedawca</th>
|
|
<td id="sellerName">-</td>
|
|
</tr>
|
|
<tr>
|
|
<th>NIP</th>
|
|
<td id="vatId">-</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Wartość brutto</th>
|
|
<td id="total">-</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="error" id="error" style="display: none;"></div>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('invoiceForm').addEventListener('submit', function (event) {
|
|
event.preventDefault();
|
|
|
|
const fileInput = document.getElementById('fileInput');
|
|
const results = document.getElementById('results');
|
|
const errorDiv = document.getElementById('error');
|
|
const sellerName = document.getElementById('sellerName');
|
|
const vatId = document.getElementById('vatId');
|
|
const total = document.getElementById('total');
|
|
|
|
results.style.display = 'none';
|
|
errorDiv.style.display = 'none';
|
|
|
|
if (!fileInput.files.length) {
|
|
errorDiv.textContent = 'Proszę wybrać plik PDF.';
|
|
errorDiv.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
const formData = new FormData();
|
|
formData.append('file', fileInput.files[0]);
|
|
const controller = new AbortController();
|
|
const timeoutId = setTimeout(() => controller.abort(), 2 * 60 * 1000); // 2 minutes timeout
|
|
|
|
fetch('http://{URL}/invoice', {
|
|
method: 'POST',
|
|
body: formData,
|
|
signal: controller.signal,
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Błąd podczas przetwarzania pliku.');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
sellerName.textContent = data.seller || '-';
|
|
vatId.textContent = data.vat_id || '-';
|
|
total.textContent = data.total || '-';
|
|
results.style.display = 'block';
|
|
})
|
|
.catch(error => {
|
|
errorDiv.textContent = error.message;
|
|
errorDiv.style.display = 'block';
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|