|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
|
<title>Health Reports Processor</title> |
|
|
<style> |
|
|
body { |
|
|
font-family: Arial, sans-serif; |
|
|
margin: 2rem; |
|
|
max-width: 800px; |
|
|
} |
|
|
label { |
|
|
display: block; |
|
|
margin-top: 1rem; |
|
|
font-weight: bold; |
|
|
} |
|
|
input, textarea, button { |
|
|
width: 100%; |
|
|
padding: 0.5rem; |
|
|
margin-top: 0.25rem; |
|
|
box-sizing: border-box; |
|
|
font-size: 1rem; |
|
|
} |
|
|
button { |
|
|
margin-top: 1rem; |
|
|
cursor: pointer; |
|
|
} |
|
|
pre { |
|
|
background: #f4f4f4; |
|
|
padding: 1rem; |
|
|
overflow-x: auto; |
|
|
white-space: pre-wrap; |
|
|
word-wrap: break-word; |
|
|
border: 1px solid #ccc; |
|
|
margin-top: 1rem; |
|
|
} |
|
|
.error { |
|
|
color: red; |
|
|
margin-top: 1rem; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<h1>Health Reports Processor</h1> |
|
|
|
|
|
|
|
|
<form id="uploadForm" enctype="multipart/form-data"> |
|
|
<label for="uploadPatientId">Patient ID:</label> |
|
|
<input type="text" id="uploadPatientId" name="patient_id" required /> |
|
|
|
|
|
<label for="files">Upload Reports:</label> |
|
|
<input type="file" id="files" name="files" multiple required /> |
|
|
|
|
|
<button type="submit">Upload Reports</button> |
|
|
</form> |
|
|
|
|
|
<div id="uploadResult"></div> |
|
|
|
|
|
<hr /> |
|
|
|
|
|
|
|
|
<form id="reportForm"> |
|
|
<label for="patientId">Patient ID:</label> |
|
|
<input type="text" id="patientId" name="patientId" required /> |
|
|
|
|
|
<label for="filenames">Filenames (comma-separated):</label> |
|
|
<input type="text" id="filenames" name="filenames" placeholder="e.g. cbc.pdf, thyroid.pdf" required /> |
|
|
|
|
|
<button type="submit">Process Reports</button> |
|
|
</form> |
|
|
|
|
|
<div id="result"></div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const uploadForm = document.getElementById('uploadForm'); |
|
|
const uploadResult = document.getElementById('uploadResult'); |
|
|
|
|
|
uploadForm.addEventListener('submit', async (e) => { |
|
|
e.preventDefault(); |
|
|
uploadResult.innerHTML = ''; |
|
|
|
|
|
const patientId = document.getElementById('uploadPatientId').value.trim(); |
|
|
const filesInput = document.getElementById('files'); |
|
|
|
|
|
if (!patientId || filesInput.files.length === 0) { |
|
|
uploadResult.innerHTML = '<p class="error">Please enter a Patient ID and select at least one file.</p>'; |
|
|
return; |
|
|
} |
|
|
|
|
|
const formData = new FormData(); |
|
|
formData.append('patient_id', patientId); |
|
|
for (let f of filesInput.files) { |
|
|
formData.append('files', f); |
|
|
} |
|
|
|
|
|
try { |
|
|
const response = await fetch('/upload_reports', { |
|
|
method: 'POST', |
|
|
body: formData |
|
|
}); |
|
|
|
|
|
if (!response.ok) { |
|
|
const errData = await response.json(); |
|
|
uploadResult.innerHTML = `<p class="error">Error: ${errData.error || response.statusText}</p>`; |
|
|
return; |
|
|
} |
|
|
|
|
|
const data = await response.json(); |
|
|
uploadResult.innerHTML = `<h2>Upload Result</h2><pre>${JSON.stringify(data, null, 2)}</pre>`; |
|
|
} catch (err) { |
|
|
uploadResult.innerHTML = `<p class="error">Upload failed: ${err.message}</p>`; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const form = document.getElementById('reportForm'); |
|
|
const resultDiv = document.getElementById('result'); |
|
|
|
|
|
form.addEventListener('submit', async (e) => { |
|
|
e.preventDefault(); |
|
|
resultDiv.innerHTML = ''; |
|
|
|
|
|
const patientId = form.patientId.value.trim(); |
|
|
const filenamesRaw = form.filenames.value.trim(); |
|
|
if (!patientId || !filenamesRaw) { |
|
|
resultDiv.innerHTML = '<p class="error">Please enter both Patient ID and filenames.</p>'; |
|
|
return; |
|
|
} |
|
|
|
|
|
const filenames = filenamesRaw.split(',').map(f => f.trim()).filter(f => f.length > 0); |
|
|
|
|
|
try { |
|
|
const response = await fetch('/process_reports', { |
|
|
method: 'POST', |
|
|
headers: { 'Content-Type': 'application/json' }, |
|
|
body: JSON.stringify({ patient_id: patientId, filenames: filenames }) |
|
|
}); |
|
|
|
|
|
if (!response.ok) { |
|
|
const errorData = await response.json(); |
|
|
resultDiv.innerHTML = `<p class="error">Error: ${errorData.error || response.statusText}</p>`; |
|
|
return; |
|
|
} |
|
|
|
|
|
const data = await response.json(); |
|
|
resultDiv.innerHTML = `<h2>Processed Result</h2><pre>${JSON.stringify(data, null, 2)}</pre>`; |
|
|
} catch (err) { |
|
|
resultDiv.innerHTML = `<p class="error">Request failed: ${err.message}</p>`; |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
