kqjy/EduCatWeb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve dashboard UI and some fixes

Browse Source
This commit is contained in:
inubimambo
2025-07-08 23:14:31 +08:00
parent 9644f62dc5
commit bcd5a52995
5 changed files with 918 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
views/dashboard.ejs
View File

@@ -31,7 +31,7 @@
<div class="card border-0 shadow-sm h-100">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<div class="file-icon bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
<div class="dashboard-file-icon bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3">
<i class="fas fa-file-alt"></i>
</div>
<div class="flex-grow-1">
@@ -109,6 +109,73 @@
<% }); %>
</div>
<% } %>
<!-- Revised Files Section -->
<% if (typeof revisedFiles !== 'undefined' && revisedFiles.length > 0) { %>
<div class="ai-revised-section revised-files-section">
<div class="d-flex justify-content-between align-items-center mb-4">
<h3><i class="fas fa-brain me-2 text-success"></i>AI-Revised Notes</h3>
<small class="text-muted bg-white px-2 py-1 rounded-pill">
<%= revisedFiles.length %> revised file<%= revisedFiles.length !== 1 ? 's' : '' %>
</small>
</div>
<div class="row">
<% revisedFiles.forEach(function(file, index) { %>
<div class="col-md-6 col-lg-4 mb-4">
<div class="card border-0 shadow-sm h-100 border-start border-4 border-success">
<div class="card-body p-3">
<div class="d-flex align-items-start mb-3">
<div class="file-icon bg-success text-white rounded-circle d-flex align-items-center justify-content-center me-3 ai-icon" style="width: 50px; height: 50px; min-width: 50px; font-size: 1.2rem; font-weight: bold; letter-spacing: 1px;">
AI
</div>
<div class="flex-grow-1 min-w-0">
<h6 class="mb-1 file-name-truncate" title="<%= file.originalName %>">
<%= file.originalName %>
</h6>
<div class="d-flex flex-wrap align-items-center gap-1 mb-1">
<small class="text-muted"><%= Math.round(file.size / 1024) %> KB</small>
<span class="badge bg-success text-white">
<%= file.revisionType.charAt(0).toUpperCase() + file.revisionType.slice(1) %>
</span>
</div>
</div>
</div>
<div class="mb-3">
<div class="small text-muted mb-1">
<i class="fas fa-calendar me-1"></i>
<%= new Date(file.uploadDate).toLocaleDateString() %>
</div>
<% if (file.originalFileName) { %>
<div class="small text-muted file-name-truncate" title="From: <%= file.originalFileName %>">
<i class="fas fa-file-alt me-1"></i>
From: <%= file.originalFileName %>
</div>
<% } %>
</div>
<div class="mt-auto">
<div class="d-grid gap-2">
<button type="button" class="btn btn-outline-primary btn-sm" onclick="previewRevisedFile('<%= file.id %>')">
<i class="fas fa-eye me-1"></i>Preview
</button>
<div class="btn-group w-100" role="group">
<a href="/uploads/revised-notes/<%= file.filename %>" download class="btn btn-success btn-sm">
<i class="fas fa-download me-1"></i>Download
</a>
<button type="button" class="btn btn-outline-danger btn-sm" onclick="deleteRevisedFile('<%= file.id %>')" title="Delete">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<% }); %>
</div>
</div>
<% } %>
</div>
</div>
</div>
@@ -806,6 +873,73 @@ document.addEventListener('DOMContentLoaded', function() {
}, 10000);
}
});
// Preview revised file function
async function previewRevisedFile(fileId) {
try {
// Get file information by making an API call instead of using template data
const response = await fetch(`/api/revised-files/${fileId}/info`);
if (!response.ok) {
throw new Error('Failed to get file info');
}
const fileInfo = await response.json();
if (!fileInfo.success) {
throw new Error(fileInfo.error || 'Failed to get file info');
}
const file = fileInfo.file;
// Download the file content
const contentResponse = await fetch(`/uploads/revised-notes/${file.filename}`);
if (!contentResponse.ok) {
throw new Error('Failed to load file content');
}
const content = await contentResponse.text();
const modal = new bootstrap.Modal(document.getElementById('previewModal'));
document.getElementById('preview-content').innerHTML = `
<div class="alert alert-info">
<i class="fas fa-brain me-2"></i>
<strong>AI-Revised Content</strong> • ${file.revisionType} • From: ${file.originalFileName || 'Unknown'}
</div>
<div class="border p-3 bg-light rounded" style="max-height: 400px; overflow-y: auto;">
<pre style="white-space: pre-wrap; word-wrap: break-word;">${escapeHtml(content)}</pre>
</div>
`;
modal.show();
} catch (error) {
console.error('Error previewing revised file:', error);
alert('Failed to preview file: ' + error.message);
}
}
// Delete revised file function
async function deleteRevisedFile(fileId) {
if (!confirm('Are you sure you want to delete this revised file? This action cannot be undone.')) {
return;
}
try {
const response = await fetch(`/api/revised-files/${fileId}`, {
method: 'DELETE'
});
const result = await response.json();
if (result.success) {
// Reload the page to update the file list
location.reload();
} else {
alert('Error deleting file: ' + (result.error || 'Unknown error'));
}
} catch (error) {
console.error('Error deleting revised file:', error);
alert('Network error: ' + error.message);
}
}
</script>
<%- include('partials/footer') %>

10
views/quiz.ejs
View File

@@ -377,8 +377,8 @@ document.addEventListener('DOMContentLoaded', function() {
`;
});
html += '</div>';
} else if (question.correct === 'True' || question.correct === 'False') {
// True/False
} else if ((question.correct === 'True' || question.correct === 'False') && !question.answer) {
// True/False (only if it's not a short-answer question)
html += `
<div class="mb-3">
<div class="form-check mb-2">
@@ -766,8 +766,8 @@ document.addEventListener('DOMContentLoaded', function() {
`;
});
html += '</div>';
} else if (question.correct === 'True' || question.correct === 'False') {
// True/False
} else if ((question.correct === 'True' || question.correct === 'False') && !question.answer) {
// True/False (only if it's not a short-answer question)
const userSelected = userAnswers[index];
const correctAnswer = question.correct;
@@ -803,7 +803,7 @@ document.addEventListener('DOMContentLoaded', function() {
} else {
// Short answer
const userAnswer = userAnswers[index] || '';
const correctAnswer = question.correct || '';
const correctAnswer = question.answer || question.correct || '';
html += `
<div class="mb-3">

151
views/revise.ejs
View File

@@ -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>