100 lines
3.6 KiB
JavaScript
100 lines
3.6 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const searchForm = document.getElementById('search-form');
|
|
const searchInput = document.getElementById('search-input');
|
|
const resultsContainer = document.getElementById('results-container');
|
|
const loadingIndicator = document.getElementById('loading-indicator');
|
|
const summaryModalEl = document.getElementById('summary-modal');
|
|
const summaryModal = new bootstrap.Modal(summaryModalEl);
|
|
const summaryModalBody = document.getElementById('summary-modal-body');
|
|
const originalArticleLink = document.getElementById('original-article-link');
|
|
|
|
searchForm.addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
const query = searchInput.value.trim();
|
|
|
|
if (query) {
|
|
fetchResults(query);
|
|
}
|
|
});
|
|
|
|
function fetchResults(query) {
|
|
resultsContainer.innerHTML = '';
|
|
loadingIndicator.style.display = 'block';
|
|
|
|
fetch(`/api/search.php?q=${encodeURIComponent(query)}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
displayResults(data.RelatedTopics);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching search results:', error);
|
|
resultsContainer.innerHTML = '<div class="alert alert-danger">Failed to fetch results. Please try again.</div>';
|
|
})
|
|
.finally(() => {
|
|
loadingIndicator.style.display = 'none';
|
|
});
|
|
}
|
|
|
|
function displayResults(results) {
|
|
if (!results || results.length === 0) {
|
|
resultsContainer.innerHTML = '<div class="alert alert-info">No results found.</div>';
|
|
return;
|
|
}
|
|
|
|
results.forEach(item => {
|
|
if(item.Text) {
|
|
const card = `
|
|
<div class="card mb-3 result-card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">${item.Text}</h5>
|
|
<p class="card-text">${item.Result}</p>
|
|
<button class="btn btn-primary btn-sm summarize-btn" data-url="${item.FirstURL}">Summarize</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
resultsContainer.innerHTML += card;
|
|
}
|
|
});
|
|
}
|
|
|
|
resultsContainer.addEventListener('click', function(e) {
|
|
if (e.target.classList.contains('summarize-btn')) {
|
|
const url = e.target.dataset.url;
|
|
getSummary(url);
|
|
}
|
|
});
|
|
|
|
function getSummary(url) {
|
|
summaryModalBody.innerHTML = `
|
|
<div class="d-flex justify-content-center">
|
|
<div class="spinner-border" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
summaryModal.show();
|
|
originalArticleLink.href = url;
|
|
|
|
const formData = new FormData();
|
|
formData.append('url', url);
|
|
|
|
fetch('/api/summarize.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.error) {
|
|
summaryModalBody.innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
|
|
} else {
|
|
summaryModalBody.innerHTML = data.summary.replace(/\n/g, '<br>');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching summary:', error);
|
|
summaryModalBody.innerHTML = '<div class="alert alert-danger">Failed to fetch summary.</div>';
|
|
});
|
|
}
|
|
});
|
|
|