Improve dashboard UI and some fixes
This commit is contained in:
inubimambo
151
views/revise.ejs
151
views/revise.ejs
@@ -8,11 +8,30 @@
|
||||
<h3 class="mb-0"><i class="fas fa-edit me-2"></i>Revise: <%= file.originalName %></h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<% if (extractionError) { %>
|
||||
<div class="alert alert-warning">
|
||||
<i class="fas fa-exclamation-triangle me-2"></i>
|
||||
<%= extractionError %>
|
||||
</div>
|
||||
<% } else if (extractionInfo) { %>
|
||||
<div class="alert alert-info">
|
||||
<i class="fas fa-info-circle me-2"></i>
|
||||
Text extracted using <%= extractionInfo.method %>
|
||||
<% if (extractionInfo.pages) { %>
|
||||
| <%= extractionInfo.pages %> pages
|
||||
<% } %>
|
||||
<% if (extractionInfo.sheets) { %>
|
||||
| <%= extractionInfo.sheets %> sheets
|
||||
<% } %>
|
||||
| <%= extractionInfo.totalLength %> characters
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h5>Original Notes</h5>
|
||||
<div class="border p-3 bg-light rounded" style="height: 400px; overflow-y: auto;">
|
||||
<pre class="mb-0"><%= content %></pre>
|
||||
<pre class="mb-0" style="white-space: pre-wrap; word-wrap: break-word;"><%= content %></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
@@ -58,7 +77,32 @@
|
||||
<li><strong>Name:</strong> <%= file.originalName %></li>
|
||||
<li><strong>Size:</strong> <%= Math.round(file.size / 1024) %> KB</li>
|
||||
<li><strong>Uploaded:</strong> <%= new Date(file.uploadDate).toLocaleDateString() %></li>
|
||||
<% if (extractionInfo) { %>
|
||||
<li><strong>Extraction:</strong> <%= extractionInfo.method %></li>
|
||||
<% if (extractionInfo.pages) { %>
|
||||
<li><strong>Pages:</strong> <%= extractionInfo.pages %></li>
|
||||
<% } %>
|
||||
<% if (extractionInfo.sheets) { %>
|
||||
<li><strong>Sheets:</strong> <%= extractionInfo.sheets %></li>
|
||||
<% } %>
|
||||
<li><strong>Characters:</strong> <%= extractionInfo.totalLength.toLocaleString() %></li>
|
||||
<% } %>
|
||||
</ul>
|
||||
|
||||
<% if (file.status) { %>
|
||||
<div class="mt-3">
|
||||
<strong>Processing Status:</strong>
|
||||
<% if (file.status === 'processed') { %>
|
||||
<span class="badge bg-success ms-2">Processed</span>
|
||||
<% } else if (file.status === 'processing') { %>
|
||||
<span class="badge bg-warning ms-2">Processing</span>
|
||||
<% } else if (file.status === 'failed') { %>
|
||||
<span class="badge bg-danger ms-2">Failed</span>
|
||||
<% } else { %>
|
||||
<span class="badge bg-secondary ms-2"><%= file.status %></span>
|
||||
<% } %>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -96,15 +140,20 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
const saveBtn = document.getElementById('save-btn');
|
||||
const downloadBtn = document.getElementById('download-btn');
|
||||
|
||||
const fileId = '<%= file.id %>';
|
||||
const content = <%- JSON.stringify(content) %>;
|
||||
let currentRevisedContent = '';
|
||||
let currentRevisionType = '';
|
||||
|
||||
reviseBtn.addEventListener('click', async function() {
|
||||
const type = revisionType.value;
|
||||
const content = `<%= content.replace(/"/g, '\\"').replace(/\n/g, '\\n') %>`;
|
||||
|
||||
console.log('Revise button clicked with type:', type);
|
||||
console.log('File ID:', fileId);
|
||||
|
||||
reviseBtn.disabled = true;
|
||||
revisionProgress.classList.remove('d-none');
|
||||
revisedContent.innerHTML = '<p class="text-muted text-center mt-5">Processing...</p>';
|
||||
revisedContent.innerHTML = '<div class="text-center mt-5"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Processing...</span></div><p class="mt-2">AI is processing your notes...</p></div>';
|
||||
|
||||
try {
|
||||
console.log('Sending request to /api/revise');
|
||||
@@ -115,34 +164,114 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
},
|
||||
body: JSON.stringify({
|
||||
content: content,
|
||||
revisionType: type
|
||||
revisionType: type,
|
||||
fileId: fileId
|
||||
})
|
||||
});
|
||||
|
||||
console.log('Response status:', response.status);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
console.log('Revision result:', result);
|
||||
|
||||
if (result.success) {
|
||||
revisedContent.innerHTML = '<pre class="mb-0">' + result.revisedContent + '</pre>';
|
||||
revisedContent.innerHTML = '<pre class="mb-0" style="white-space: pre-wrap; word-wrap: break-word;">' + escapeHtml(result.revisedContent) + '</pre>';
|
||||
currentRevisedContent = result.revisedContent;
|
||||
currentRevisionType = type;
|
||||
saveBtn.disabled = false;
|
||||
downloadBtn.disabled = false;
|
||||
} else {
|
||||
revisedContent.innerHTML = '<div class="alert alert-danger">Error: ' + (result.error || 'Unknown error') + '</div>';
|
||||
revisedContent.innerHTML = '<div class="alert alert-danger"><i class="fas fa-exclamation-circle me-2"></i><strong>Error:</strong> ' + escapeHtml(result.error || 'Unknown error occurred') + '</div>';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Revision error:', error);
|
||||
revisedContent.innerHTML = '<div class="alert alert-danger">Error: ' + error.message + '</div>';
|
||||
revisedContent.innerHTML = '<div class="alert alert-danger"><i class="fas fa-exclamation-circle me-2"></i><strong>Network Error:</strong> ' + escapeHtml(error.message) + '<br><small>Please check your connection and try again.</small></div>';
|
||||
} finally {
|
||||
reviseBtn.disabled = false;
|
||||
revisionProgress.classList.add('d-none');
|
||||
}
|
||||
});
|
||||
|
||||
// Save revised notes button
|
||||
saveBtn.addEventListener('click', async function() {
|
||||
if (!currentRevisedContent) {
|
||||
alert('No revised content to save. Please revise the notes first.');
|
||||
return;
|
||||
}
|
||||
|
||||
saveBtn.disabled = true;
|
||||
const originalText = saveBtn.innerHTML;
|
||||
saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Saving...';
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/save-revised', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
fileId: fileId,
|
||||
revisedContent: currentRevisedContent,
|
||||
revisionType: currentRevisionType
|
||||
})
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
// Show success message
|
||||
const successAlert = document.createElement('div');
|
||||
successAlert.className = 'alert alert-success alert-dismissible fade show mt-3';
|
||||
successAlert.innerHTML = `
|
||||
<i class="fas fa-check-circle me-2"></i>
|
||||
<strong>Success!</strong> Revised notes saved as "${result.fileInfo.originalName}"
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
`;
|
||||
document.querySelector('.card-body').appendChild(successAlert);
|
||||
|
||||
// Auto-hide after 5 seconds
|
||||
setTimeout(() => {
|
||||
successAlert.remove();
|
||||
}, 5000);
|
||||
} else {
|
||||
alert('Error saving revised notes: ' + (result.error || 'Unknown error'));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Save error:', error);
|
||||
alert('Network error while saving. Please try again.');
|
||||
} finally {
|
||||
saveBtn.disabled = false;
|
||||
saveBtn.innerHTML = originalText;
|
||||
}
|
||||
});
|
||||
|
||||
// Download revised notes button
|
||||
downloadBtn.addEventListener('click', function() {
|
||||
if (!currentRevisedContent) {
|
||||
alert('No revised content to download. Please revise the notes first.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Create download URL with content and revision type as query parameters
|
||||
const encodedContent = encodeURIComponent(currentRevisedContent);
|
||||
const encodedRevisionType = encodeURIComponent(currentRevisionType);
|
||||
const downloadUrl = `/api/download-revised/${fileId}?content=${encodedContent}&revisionType=${encodedRevisionType}`;
|
||||
|
||||
// Create temporary link and trigger download
|
||||
const link = document.createElement('a');
|
||||
link.href = downloadUrl;
|
||||
link.style.display = 'none';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
});
|
||||
|
||||
// Helper function to escape HTML
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user