const renderResultMarkup = (query, result) =>
`
${query}
${result.columns.map((column) => `${column} | `).join('')}
${result.rows.map(
(row) =>
`${Object.entries(row)
.map(([key, value]) => `${value.value} | `)
.join('')}
`,
)}
`;
const processAnalyzeResult = (data) => {
const img = document.getElementById('imgslot');
const queriesResult = document.getElementById('queriesResult');
img.src = 'none.png';
if (data.image) {
img.src = 'data:image/jpg;base64,' + data.image;
}
queriesResult.innerHTML = '';
if (data.data && data.data.response) {
for (const [query, result] of Object.entries(data.data.response)) {
queriesResult.innerHTML += renderResultMarkup(query, result);
}
} else if (data.data && data.data.error) {
queriesResult.innerHTML = `${JSON.stringify(data.data.error)}
`;
}
};
const handleFormSubmit = (event) => {
event.preventDefault();
const data = new FormData(event.target);
const loaderWrapper = document.getElementById('loaderWrapper');
loaderWrapper.classList.remove('d-none');
fetch('/analyze', { method: 'POST', body: data })
.then((res) => res.json())
.then(processAnalyzeResult)
.catch(() => {
alert('Произошла внутренняя ошибка.');
})
.finally(() => {
loaderWrapper.classList.add('d-none');
});
};
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('uploadForm').addEventListener('submit', handleFormSubmit);
});