Initial commit
This commit is contained in:
Aherobo Ovie Victor
@@ -0,0 +1,713 @@
|
||||
/* Base styles */
|
||||
:root {
|
||||
--primary-color: #3498db;
|
||||
--secondary-color: #2980b9;
|
||||
--accent-color: #f39c12;
|
||||
--success-color: #2ecc71;
|
||||
--warning-color: #f1c40f;
|
||||
--danger-color: #e74c3c;
|
||||
--info-color: #3498db;
|
||||
--light-color: #f8f9fa;
|
||||
--dark-color: #343a40;
|
||||
--gray-color: #6c757d;
|
||||
--border-color: #dee2e6;
|
||||
--font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-family);
|
||||
line-height: 1.6;
|
||||
color: var(--dark-color);
|
||||
background-color: #f4f7fa;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
/* Header styles */
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
padding: 1.5rem;
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
header h1 {
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
header p {
|
||||
color: var(--gray-color);
|
||||
}
|
||||
|
||||
/* Main content sections */
|
||||
main {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.main-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.documents-section {
|
||||
grid-column: 1 / -1; /* Span all columns */
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
section h2 {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
/* Upload area styles */
|
||||
.upload-container {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
border: 2px dashed var(--primary-color);
|
||||
border-radius: 8px;
|
||||
padding: 3rem 1.5rem;
|
||||
text-align: center;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.upload-area:hover {
|
||||
background-color: rgba(52, 152, 219, 0.05);
|
||||
}
|
||||
|
||||
.upload-area i {
|
||||
font-size: 3rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.upload-area p {
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--gray-color);
|
||||
}
|
||||
|
||||
.file-info {
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.file-details {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
font-size: 2rem;
|
||||
color: var(--primary-color);
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
color: var(--gray-color);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
transition: background-color 0.3s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: var(--secondary-color);
|
||||
}
|
||||
|
||||
.upload-button {
|
||||
background-color: var(--success-color);
|
||||
}
|
||||
|
||||
.upload-button:hover {
|
||||
background-color: #27ae60;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
background-color: var(--gray-color);
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.cancel-button:hover {
|
||||
background-color: #5a6268;
|
||||
}
|
||||
|
||||
/* Documents list */
|
||||
.documents-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.document-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 0.5rem;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.document-item:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.document-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.document-icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary-color);
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.document-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.document-date {
|
||||
color: var(--gray-color);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.document-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
font-size: 1rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
.view-button {
|
||||
background-color: var(--info-color);
|
||||
}
|
||||
|
||||
.view-button:hover {
|
||||
background-color: #2980b9;
|
||||
}
|
||||
|
||||
.resubmit-button {
|
||||
background-color: var(--warning-color);
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.resubmit-button:hover {
|
||||
background-color: #f39c12;
|
||||
}
|
||||
|
||||
/* Report section */
|
||||
.report-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.report-container {
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
/* Summary section in report */
|
||||
.summary {
|
||||
background-color: #e9f7ef;
|
||||
padding: 1.5rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1.5rem;
|
||||
border-left: 4px solid var(--success-color);
|
||||
}
|
||||
|
||||
.applied-standards {
|
||||
margin-top: 1rem;
|
||||
padding: 0.75rem 1rem;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 5px;
|
||||
border-left: 3px solid var(--info-color);
|
||||
}
|
||||
|
||||
.applied-standards h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1rem;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.standards-list {
|
||||
margin: 0 0 0 1.5rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.standards-list li {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
/* Issues section in report */
|
||||
.issues-container {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.issue {
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
background-color: #f8f9fa;
|
||||
border-left: 4px solid var(--gray-color);
|
||||
}
|
||||
|
||||
.issue.critical {
|
||||
background-color: #fdedec;
|
||||
border-left-color: var(--danger-color);
|
||||
}
|
||||
|
||||
.issue.major {
|
||||
background-color: #fef9e7;
|
||||
border-left-color: var(--warning-color);
|
||||
}
|
||||
|
||||
.issue.minor {
|
||||
background-color: #eafaf1;
|
||||
border-left-color: var(--success-color);
|
||||
}
|
||||
|
||||
.issue.info {
|
||||
background-color: #ebf5fb;
|
||||
border-left-color: var(--info-color);
|
||||
}
|
||||
|
||||
.issue-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.issue-section {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge.critical {
|
||||
background-color: var(--danger-color);
|
||||
}
|
||||
|
||||
.badge.major {
|
||||
background-color: var(--warning-color);
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.badge.minor {
|
||||
background-color: var(--success-color);
|
||||
}
|
||||
|
||||
.badge.info {
|
||||
background-color: var(--info-color);
|
||||
}
|
||||
|
||||
.issue-description {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.issue-recommendation {
|
||||
background-color: #f8f9fa;
|
||||
padding: 0.75rem;
|
||||
border-radius: 4px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Loading overlay */
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 5px solid #f3f3f3;
|
||||
border-top: 5px solid var(--primary-color);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.loading-overlay p {
|
||||
color: white;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Stats display */
|
||||
.stats-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.stat-box {
|
||||
flex: 1;
|
||||
min-width: 100px;
|
||||
background-color: #f8f9fa;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: var(--gray-color);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Score display */
|
||||
.score-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.score-circle {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
background-color: var(--success-color);
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.score-label {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
padding: 1rem;
|
||||
color: var(--gray-color);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Standards section */
|
||||
.standards-section {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.standards-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.standards-header p {
|
||||
color: var(--gray-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.standards-upload {
|
||||
margin-bottom: 1.5rem;
|
||||
border: 1px dashed var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.standards-list-container {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.standards-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.standard-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.standard-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.standard-icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary-color);
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.standard-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.standard-description {
|
||||
color: var(--gray-color);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.standard-requirements {
|
||||
color: var(--gray-color);
|
||||
font-size: 0.9rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.standard-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.no-standards {
|
||||
color: var(--gray-color);
|
||||
text-align: center;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
/* Modal styles */
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
width: 80%;
|
||||
max-width: 800px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: var(--gray-color);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.standard-detail-header {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.standard-detail-header h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.standard-requirements-list {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.standard-requirements-list h4 {
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.requirement-item {
|
||||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.requirement-item.critical {
|
||||
border-left: 4px solid var(--danger-color);
|
||||
}
|
||||
|
||||
.requirement-item.major {
|
||||
border-left: 4px solid var(--warning-color);
|
||||
}
|
||||
|
||||
.requirement-item.minor {
|
||||
border-left: 4px solid var(--success-color);
|
||||
}
|
||||
|
||||
.requirement-item.info {
|
||||
border-left: 4px solid var(--info-color);
|
||||
}
|
||||
|
||||
.requirement-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.requirement-id {
|
||||
font-weight: bold;
|
||||
color: var(--gray-color);
|
||||
}
|
||||
|
||||
.requirement-description {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.requirement-details {
|
||||
font-size: 0.9rem;
|
||||
color: var(--gray-color);
|
||||
padding: 0.5rem;
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Responsive design */
|
||||
@media (max-width: 992px) {
|
||||
.main-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 95%;
|
||||
max-height: 90vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.document-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.document-actions {
|
||||
margin-top: 1rem;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.stats-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stat-box {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.standard-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.standard-actions {
|
||||
margin-top: 1rem;
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mini SpecsComply Pro</title>
|
||||
<link rel="stylesheet" href="static/css/styles.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1><i class="fas fa-clipboard-check"></i> Mini SpecsComply Pro</h1>
|
||||
<p>Document Compliance and Validation Tool</p>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div class="main-grid">
|
||||
<section class="upload-section">
|
||||
<h2>Upload Document</h2>
|
||||
<div class="upload-container" id="upload-container">
|
||||
<div class="upload-area" id="upload-area">
|
||||
<i class="fas fa-cloud-upload-alt"></i>
|
||||
<p>Drag and drop your document here</p>
|
||||
<p>or</p>
|
||||
<label for="file-input" class="button">Browse Files</label>
|
||||
<input type="file" id="file-input" accept=".md,.txt,.json,.yaml,.html,.doc,.docx,.pdf" hidden>
|
||||
</div>
|
||||
<div class="file-info" id="file-info" style="display: none;">
|
||||
<div class="file-details">
|
||||
<i class="fas fa-file-alt file-icon"></i>
|
||||
<div>
|
||||
<p class="file-name" id="file-name">document.md</p>
|
||||
<p class="file-size" id="file-size">0 KB</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button upload-button" id="upload-button">Upload for Analysis</button>
|
||||
<button class="button cancel-button" id="cancel-button">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="standards-section">
|
||||
<h2>Compliance Standards</h2>
|
||||
<div class="standards-container" id="standards-container">
|
||||
<div class="standards-header">
|
||||
<p>Manage the compliance standards used for document analysis</p>
|
||||
<button class="button" id="upload-standard-button">
|
||||
<i class="fas fa-plus"></i> Add Standard
|
||||
</button>
|
||||
</div>
|
||||
<div class="standards-upload" id="standards-upload" style="display: none;">
|
||||
<div class="upload-area" id="standard-upload-area">
|
||||
<i class="fas fa-cloud-upload-alt"></i>
|
||||
<p>Drag and drop your standard JSON file here</p>
|
||||
<p>or</p>
|
||||
<label for="standard-file-input" class="button">Browse Files</label>
|
||||
<input type="file" id="standard-file-input" accept=".json" hidden>
|
||||
</div>
|
||||
<div class="file-info" id="standard-file-info" style="display: none;">
|
||||
<div class="file-details">
|
||||
<i class="fas fa-file-code file-icon"></i>
|
||||
<div>
|
||||
<p class="file-name" id="standard-file-name">standard.json</p>
|
||||
<p class="file-size" id="standard-file-size">0 KB</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button upload-button" id="standard-upload-button">Upload Standard</button>
|
||||
<button class="button cancel-button" id="standard-cancel-button">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="standards-list-container">
|
||||
<p class="no-standards" id="no-standards">No custom standards have been added yet.</p>
|
||||
<ul class="standards-list" id="standards-list">
|
||||
<!-- Standards will be added here dynamically -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="documents-section">
|
||||
<h2>Recent Documents</h2>
|
||||
<div class="documents-container" id="documents-container">
|
||||
<p class="no-documents" id="no-documents">No documents have been analyzed yet.</p>
|
||||
<ul class="documents-list" id="documents-list">
|
||||
<!-- Document items will be added here dynamically -->
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="report-section" id="report-section" style="display: none;">
|
||||
<div class="report-header">
|
||||
<h2>Compliance Report</h2>
|
||||
<button class="button" id="close-report-button">Close Report</button>
|
||||
</div>
|
||||
<div class="report-container" id="report-container">
|
||||
<!-- Report content will be loaded here -->
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div class="loading-overlay" id="loading-overlay" style="display: none;">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>Analyzing document...</p>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 Mini SpecsComply Pro</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="static/js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,825 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Document Elements
|
||||
const uploadArea = document.getElementById('upload-area');
|
||||
const fileInput = document.getElementById('file-input');
|
||||
const fileInfo = document.getElementById('file-info');
|
||||
const fileName = document.getElementById('file-name');
|
||||
const fileSize = document.getElementById('file-size');
|
||||
const uploadButton = document.getElementById('upload-button');
|
||||
const cancelButton = document.getElementById('cancel-button');
|
||||
const noDocuments = document.getElementById('no-documents');
|
||||
const documentsList = document.getElementById('documents-list');
|
||||
const reportSection = document.getElementById('report-section');
|
||||
const reportContainer = document.getElementById('report-container');
|
||||
const closeReportButton = document.getElementById('close-report-button');
|
||||
const loadingOverlay = document.getElementById('loading-overlay');
|
||||
|
||||
// Standards Elements
|
||||
const uploadStandardButton = document.getElementById('upload-standard-button');
|
||||
const standardsUpload = document.getElementById('standards-upload');
|
||||
const standardUploadArea = document.getElementById('standard-upload-area');
|
||||
const standardFileInput = document.getElementById('standard-file-input');
|
||||
const standardFileInfo = document.getElementById('standard-file-info');
|
||||
const standardFileName = document.getElementById('standard-file-name');
|
||||
const standardFileSize = document.getElementById('standard-file-size');
|
||||
const standardUploadButton = document.getElementById('standard-upload-button');
|
||||
const standardCancelButton = document.getElementById('standard-cancel-button');
|
||||
const noStandards = document.getElementById('no-standards');
|
||||
const standardsList = document.getElementById('standards-list');
|
||||
|
||||
// API endpoint base URL
|
||||
const API_BASE_URL = '/api';
|
||||
|
||||
// Local storage keys
|
||||
const DOCUMENTS_STORAGE_KEY = 'specscomply_documents';
|
||||
const STANDARDS_STORAGE_KEY = 'specscomply_standards';
|
||||
|
||||
// Drag and drop functionality
|
||||
uploadArea.addEventListener('dragover', function(e) {
|
||||
e.preventDefault();
|
||||
uploadArea.classList.add('dragover');
|
||||
});
|
||||
|
||||
uploadArea.addEventListener('dragleave', function() {
|
||||
uploadArea.classList.remove('dragover');
|
||||
});
|
||||
|
||||
uploadArea.addEventListener('drop', function(e) {
|
||||
e.preventDefault();
|
||||
uploadArea.classList.remove('dragover');
|
||||
|
||||
if (e.dataTransfer.files.length) {
|
||||
handleFileSelection(e.dataTransfer.files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
// File input change
|
||||
fileInput.addEventListener('change', function() {
|
||||
if (fileInput.files.length) {
|
||||
handleFileSelection(fileInput.files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
// Upload button click
|
||||
uploadButton.addEventListener('click', function() {
|
||||
if (fileInput.files.length) {
|
||||
uploadDocument(fileInput.files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
// Cancel button click
|
||||
cancelButton.addEventListener('click', function() {
|
||||
resetFileInput();
|
||||
});
|
||||
|
||||
// Close report button click
|
||||
closeReportButton.addEventListener('click', function() {
|
||||
reportSection.style.display = 'none';
|
||||
});
|
||||
|
||||
// Load stored documents and standards on page load
|
||||
loadDocuments();
|
||||
loadStandards();
|
||||
|
||||
// Standards upload button click
|
||||
uploadStandardButton.addEventListener('click', function() {
|
||||
standardsUpload.style.display = 'block';
|
||||
});
|
||||
|
||||
// Standard drag and drop functionality
|
||||
standardUploadArea.addEventListener('dragover', function(e) {
|
||||
e.preventDefault();
|
||||
standardUploadArea.classList.add('dragover');
|
||||
});
|
||||
|
||||
standardUploadArea.addEventListener('dragleave', function() {
|
||||
standardUploadArea.classList.remove('dragover');
|
||||
});
|
||||
|
||||
standardUploadArea.addEventListener('drop', function(e) {
|
||||
e.preventDefault();
|
||||
standardUploadArea.classList.remove('dragover');
|
||||
|
||||
if (e.dataTransfer.files.length) {
|
||||
handleStandardFileSelection(e.dataTransfer.files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
// Standard file input change
|
||||
standardFileInput.addEventListener('change', function() {
|
||||
if (standardFileInput.files.length) {
|
||||
handleStandardFileSelection(standardFileInput.files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
// Standard upload button click
|
||||
standardUploadButton.addEventListener('click', function() {
|
||||
if (standardFileInput.files.length) {
|
||||
uploadStandard(standardFileInput.files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
// Standard cancel button click
|
||||
standardCancelButton.addEventListener('click', function() {
|
||||
resetStandardFileInput();
|
||||
});
|
||||
|
||||
// Handle file selection
|
||||
function handleFileSelection(file) {
|
||||
// Update file info display
|
||||
fileName.textContent = file.name;
|
||||
fileSize.textContent = formatFileSize(file.size);
|
||||
|
||||
// Show file info section
|
||||
uploadArea.style.display = 'none';
|
||||
fileInfo.style.display = 'block';
|
||||
}
|
||||
|
||||
// Reset file input
|
||||
function resetFileInput() {
|
||||
fileInput.value = '';
|
||||
uploadArea.style.display = 'block';
|
||||
fileInfo.style.display = 'none';
|
||||
}
|
||||
|
||||
// Format file size
|
||||
function formatFileSize(bytes) {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
// Upload document
|
||||
async function uploadDocument(file) {
|
||||
try {
|
||||
// Show loading overlay
|
||||
loadingOverlay.style.display = 'flex';
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
const response = await fetch(`${API_BASE_URL}/documents/upload`, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Error uploading document: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log('Upload response:', data);
|
||||
|
||||
// Store document in local storage
|
||||
const document = {
|
||||
id: data.document_id,
|
||||
name: file.name,
|
||||
status: data.status,
|
||||
date: new Date().toISOString(),
|
||||
size: file.size
|
||||
};
|
||||
|
||||
saveDocument(document);
|
||||
resetFileInput();
|
||||
loadDocuments(); // This should now work correctly
|
||||
checkDocumentStatus(data.document_id);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error uploading document:', error);
|
||||
alert('Failed to upload document. Please try again.');
|
||||
} finally {
|
||||
loadingOverlay.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Save document to local storage
|
||||
function saveDocument(document) {
|
||||
let documents = JSON.parse(localStorage.getItem(DOCUMENTS_STORAGE_KEY) || '[]');
|
||||
|
||||
// Check if document already exists
|
||||
const existingIndex = documents.findIndex(doc => doc.id === document.id);
|
||||
|
||||
if (existingIndex !== -1) {
|
||||
// Update existing document
|
||||
documents[existingIndex] = {...documents[existingIndex], ...document};
|
||||
} else {
|
||||
// Add new document
|
||||
documents.push(document);
|
||||
}
|
||||
|
||||
// Sort documents by date (newest first)
|
||||
documents.sort((a, b) => new Date(b.date) - new Date(a.date));
|
||||
|
||||
// Keep only the 10 most recent documents
|
||||
if (documents.length > 10) {
|
||||
documents = documents.slice(0, 10);
|
||||
}
|
||||
|
||||
// Save to local storage
|
||||
localStorage.setItem(DOCUMENTS_STORAGE_KEY, JSON.stringify(documents));
|
||||
}
|
||||
|
||||
// Load documents from local storage
|
||||
function loadDocuments() {
|
||||
const documents = JSON.parse(localStorage.getItem(DOCUMENTS_STORAGE_KEY) || '[]');
|
||||
|
||||
// Clear documents list
|
||||
documentsList.innerHTML = '';
|
||||
|
||||
if (documents.length === 0) {
|
||||
noDocuments.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
noDocuments.style.display = 'none';
|
||||
|
||||
// Add documents to list
|
||||
documents.forEach(doc => { // Changed parameter name to 'doc'
|
||||
const li = createDocumentListItem(doc);
|
||||
documentsList.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
// Create document list item
|
||||
function createDocumentListItem(doc) { // Changed parameter name to 'doc'
|
||||
try {
|
||||
const li = window.document.createElement('li'); // Use window.document to be explicit
|
||||
li.className = 'document-item';
|
||||
|
||||
let dateStr = 'Unknown date';
|
||||
try {
|
||||
dateStr = new Date(doc.date).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
} catch (e) {
|
||||
console.warn('Error formatting date:', e);
|
||||
}
|
||||
|
||||
li.innerHTML = `
|
||||
<div class="document-info">
|
||||
<i class="fas fa-file-alt document-icon"></i>
|
||||
<div>
|
||||
<p class="document-name">${doc.name || 'Unnamed document'}</p>
|
||||
<p class="document-date">${dateStr}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="document-actions">
|
||||
<button class="button action-button view-button" data-id="${doc.id}">
|
||||
<i class="fas fa-eye"></i> View Report
|
||||
</button>
|
||||
<button class="button action-button resubmit-button" data-id="${doc.id}">
|
||||
<i class="fas fa-redo"></i> Resubmit
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Add event listeners to buttons
|
||||
const viewButton = li.querySelector('.view-button');
|
||||
const resubmitButton = li.querySelector('.resubmit-button');
|
||||
|
||||
viewButton.addEventListener('click', function() {
|
||||
const documentId = this.getAttribute('data-id');
|
||||
viewDocumentReport(documentId);
|
||||
});
|
||||
|
||||
resubmitButton.addEventListener('click', function() {
|
||||
const documentId = this.getAttribute('data-id');
|
||||
resubmitDocument(documentId);
|
||||
});
|
||||
|
||||
return li;
|
||||
} catch (error) {
|
||||
console.error('Error creating document list item:', error);
|
||||
const li = window.document.createElement('li'); // Use window.document here too
|
||||
li.className = 'document-item';
|
||||
li.textContent = 'Error displaying document';
|
||||
return li;
|
||||
}
|
||||
}
|
||||
|
||||
// View document report
|
||||
async function viewDocumentReport(documentId) {
|
||||
try {
|
||||
// Show loading overlay
|
||||
loadingOverlay.style.display = 'flex';
|
||||
|
||||
// Fetch document analysis
|
||||
const response = await fetch(`${API_BASE_URL}/documents/${documentId}/analysis`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Error fetching document analysis: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Check if analysis is complete
|
||||
if (data.status === 'pending' || data.status === 'processing') {
|
||||
alert('Document analysis is still in progress. Please try again later.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.status === 'failed') {
|
||||
alert('Document analysis failed. Please try resubmitting the document.');
|
||||
return;
|
||||
}
|
||||
|
||||
// If no report is available
|
||||
if (!data.report) {
|
||||
alert('No analysis report available for this document.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Render report
|
||||
renderReport(data.report);
|
||||
|
||||
// Show report section
|
||||
reportSection.style.display = 'block';
|
||||
|
||||
// Scroll to report section
|
||||
reportSection.scrollIntoView({ behavior: 'smooth' });
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error viewing document report:', error);
|
||||
alert('Failed to load document report. Please try again.');
|
||||
} finally {
|
||||
// Hide loading overlay
|
||||
loadingOverlay.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Handle standard file selection
|
||||
function handleStandardFileSelection(file) {
|
||||
// Check if file is JSON
|
||||
if (!file.name.toLowerCase().endsWith('.json')) {
|
||||
alert('Please select a JSON file for standards');
|
||||
return;
|
||||
}
|
||||
|
||||
// Update file info display
|
||||
standardFileName.textContent = file.name;
|
||||
standardFileSize.textContent = formatFileSize(file.size);
|
||||
|
||||
// Show file info section
|
||||
standardUploadArea.style.display = 'none';
|
||||
standardFileInfo.style.display = 'block';
|
||||
}
|
||||
|
||||
// Reset standard file input
|
||||
function resetStandardFileInput() {
|
||||
standardFileInput.value = '';
|
||||
standardUploadArea.style.display = 'block';
|
||||
standardFileInfo.style.display = 'none';
|
||||
standardsUpload.style.display = 'none';
|
||||
}
|
||||
|
||||
// Upload standard
|
||||
async function uploadStandard(file) {
|
||||
try {
|
||||
// Show loading overlay
|
||||
loadingOverlay.style.display = 'flex';
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
const response = await fetch(`${API_BASE_URL}/standards/upload`, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Error uploading standard: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log('Standard upload response:', data);
|
||||
|
||||
// Store standard in local storage
|
||||
const standard = {
|
||||
id: data.standard_id,
|
||||
name: data.name,
|
||||
requirement_count: data.requirement_count,
|
||||
date: new Date().toISOString()
|
||||
};
|
||||
|
||||
saveStandard(standard);
|
||||
resetStandardFileInput();
|
||||
loadStandards();
|
||||
|
||||
alert(`Standard "${data.name}" uploaded successfully with ${data.requirement_count} requirements.`);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error uploading standard:', error);
|
||||
alert('Failed to upload standard. Please try again.');
|
||||
} finally {
|
||||
loadingOverlay.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Save standard to local storage
|
||||
function saveStandard(standard) {
|
||||
let standards = JSON.parse(localStorage.getItem(STANDARDS_STORAGE_KEY) || '[]');
|
||||
|
||||
// Check if standard already exists
|
||||
const existingIndex = standards.findIndex(std => std.id === standard.id);
|
||||
|
||||
if (existingIndex !== -1) {
|
||||
// Update existing standard
|
||||
standards[existingIndex] = {...standards[existingIndex], ...standard};
|
||||
} else {
|
||||
// Add new standard
|
||||
standards.push(standard);
|
||||
}
|
||||
|
||||
// Sort standards by date (newest first)
|
||||
standards.sort((a, b) => new Date(b.date) - new Date(a.date));
|
||||
|
||||
// Save to local storage
|
||||
localStorage.setItem(STANDARDS_STORAGE_KEY, JSON.stringify(standards));
|
||||
}
|
||||
|
||||
// Load standards from local storage
|
||||
function loadStandards() {
|
||||
const standards = JSON.parse(localStorage.getItem(STANDARDS_STORAGE_KEY) || '[]');
|
||||
|
||||
// Clear standards list
|
||||
standardsList.innerHTML = '';
|
||||
|
||||
if (standards.length === 0) {
|
||||
noStandards.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
noStandards.style.display = 'none';
|
||||
|
||||
// Add standards to list
|
||||
standards.forEach(standard => {
|
||||
const li = createStandardListItem(standard);
|
||||
standardsList.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
// Create standard list item
|
||||
function createStandardListItem(standard) {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'standard-item';
|
||||
|
||||
let dateStr = 'Unknown date';
|
||||
try {
|
||||
dateStr = new Date(standard.date).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric'
|
||||
});
|
||||
} catch (e) {
|
||||
console.warn('Error formatting date:', e);
|
||||
}
|
||||
|
||||
li.innerHTML = `
|
||||
<div class="standard-info">
|
||||
<i class="fas fa-book standard-icon"></i>
|
||||
<div>
|
||||
<p class="standard-name">${standard.name || 'Unnamed standard'}</p>
|
||||
<p class="standard-description">Added on ${dateStr}</p>
|
||||
<p class="standard-requirements">${standard.requirement_count} requirements</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="standard-actions">
|
||||
<button class="button action-button view-standard-button" data-id="${standard.id}">
|
||||
<i class="fas fa-eye"></i> View
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Add event listeners to buttons
|
||||
const viewButton = li.querySelector('.view-standard-button');
|
||||
|
||||
viewButton.addEventListener('click', function() {
|
||||
const standardId = this.getAttribute('data-id');
|
||||
viewStandard(standardId);
|
||||
});
|
||||
|
||||
return li;
|
||||
}
|
||||
|
||||
// View standard details
|
||||
async function viewStandard(standardId) {
|
||||
try {
|
||||
// Show loading overlay
|
||||
loadingOverlay.style.display = 'flex';
|
||||
|
||||
// Fetch standard details
|
||||
const response = await fetch(`${API_BASE_URL}/standards/${standardId}`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Error fetching standard: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const standard = await response.json();
|
||||
|
||||
// Create modal content
|
||||
const modalContent = `
|
||||
<div class="standard-detail-header">
|
||||
<h3>${standard.name}</h3>
|
||||
<p>${standard.description || 'No description available'}</p>
|
||||
</div>
|
||||
<div class="standard-requirements-list">
|
||||
<h4>Requirements (${standard.requirements.length})</h4>
|
||||
${standard.requirements.length === 0 ? '<p>No requirements defined</p>' : ''}
|
||||
<ul>
|
||||
${standard.requirements.map(req => `
|
||||
<li class="requirement-item ${req.severity}">
|
||||
<div class="requirement-header">
|
||||
<span class="requirement-id">${req.id}</span>
|
||||
<span class="badge ${req.severity}">${req.severity}</span>
|
||||
</div>
|
||||
<div class="requirement-description">${req.description}</div>
|
||||
${req.details ? `<div class="requirement-details">${req.details}</div>` : ''}
|
||||
</li>
|
||||
`).join('')}
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Create modal
|
||||
const modal = document.createElement('div');
|
||||
modal.className = 'modal';
|
||||
modal.innerHTML = `
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>Standard Details</h2>
|
||||
<button class="close-button">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
${modalContent}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Add modal to body
|
||||
document.body.appendChild(modal);
|
||||
|
||||
// Add close button event listener
|
||||
modal.querySelector('.close-button').addEventListener('click', function() {
|
||||
document.body.removeChild(modal);
|
||||
});
|
||||
|
||||
// Close modal when clicking outside
|
||||
modal.addEventListener('click', function(e) {
|
||||
if (e.target === modal) {
|
||||
document.body.removeChild(modal);
|
||||
}
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error viewing standard:', error);
|
||||
alert('Failed to load standard details. Please try again.');
|
||||
} finally {
|
||||
// Hide loading overlay
|
||||
loadingOverlay.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Render report
|
||||
function renderReport(report) {
|
||||
// Calculate issue counts
|
||||
const criticalCount = report.issues.filter(issue => issue.level === 'critical').length;
|
||||
const majorCount = report.issues.filter(issue => issue.level === 'major').length;
|
||||
const minorCount = report.issues.filter(issue => issue.level === 'minor').length;
|
||||
const infoCount = report.issues.filter(issue => issue.level === 'info').length;
|
||||
|
||||
// Format score as percentage
|
||||
const scorePercentage = (report.compliance_score * 100).toFixed(1);
|
||||
|
||||
// Determine score color based on percentage
|
||||
let scoreColor = '#2ecc71'; // Default green
|
||||
if (scorePercentage < 50) {
|
||||
scoreColor = '#e74c3c'; // Red for low score
|
||||
} else if (scorePercentage < 80) {
|
||||
scoreColor = '#f39c12'; // Orange for medium score
|
||||
}
|
||||
|
||||
// Create HTML
|
||||
let html = `
|
||||
<div class="score-container">
|
||||
<div class="score-circle" style="background-color: ${scoreColor}">
|
||||
${scorePercentage}%
|
||||
</div>
|
||||
<div class="score-label">Compliance Score</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-container">
|
||||
<div class="stat-box">
|
||||
<div class="stat-value" style="color: #e74c3c">${criticalCount}</div>
|
||||
<div class="stat-label">Critical Issues</div>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<div class="stat-value" style="color: #f39c12">${majorCount}</div>
|
||||
<div class="stat-label">Major Issues</div>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<div class="stat-value" style="color: #2ecc71">${minorCount}</div>
|
||||
<div class="stat-label">Minor Issues</div>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<div class="stat-value" style="color: #3498db">${infoCount}</div>
|
||||
<div class="stat-label">Info Issues</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="summary">
|
||||
<h3>Summary</h3>
|
||||
<p>${report.summary}</p>
|
||||
|
||||
${report.applied_standards && report.applied_standards.length > 0 ? `
|
||||
<div class="applied-standards">
|
||||
<h4>Applied Standards</h4>
|
||||
<ul class="standards-list">
|
||||
${report.applied_standards.map(std => `<li>${std}</li>`).join('')}
|
||||
</ul>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
|
||||
<div class="issues-container">
|
||||
<h3>Compliance Issues</h3>
|
||||
`;
|
||||
|
||||
if (report.issues.length === 0) {
|
||||
html += '<p>No compliance issues found. Great job!</p>';
|
||||
} else {
|
||||
// Sort issues by level (critical first)
|
||||
const sortedIssues = [...report.issues].sort((a, b) => {
|
||||
const levelOrder = { 'critical': 0, 'major': 1, 'minor': 2, 'info': 3 };
|
||||
return levelOrder[a.level] - levelOrder[b.level];
|
||||
});
|
||||
|
||||
// Add issues to HTML
|
||||
sortedIssues.forEach(issue => {
|
||||
html += `
|
||||
<div class="issue ${issue.level}">
|
||||
<div class="issue-header">
|
||||
<div class="issue-section">${issue.section}</div>
|
||||
<span class="badge ${issue.level}">${issue.level}</span>
|
||||
</div>
|
||||
<div class="issue-description">
|
||||
${issue.description}
|
||||
</div>
|
||||
${issue.reasoning ? `
|
||||
<div class="issue-reasoning">
|
||||
<strong>Reasoning:</strong> ${issue.reasoning}
|
||||
</div>` : ''}
|
||||
${issue.standard_references && issue.standard_references.length > 0 ? `
|
||||
<div class="issue-references">
|
||||
<strong>Standard References:</strong>
|
||||
<ul class="reference-list">
|
||||
${issue.standard_references.map(ref => `<li>${ref}</li>`).join('')}
|
||||
</ul>
|
||||
</div>` : ''}
|
||||
<div class="issue-recommendation">
|
||||
<strong>Recommendation:</strong> ${issue.recommendation}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
||||
// Set report HTML
|
||||
reportContainer.innerHTML = html;
|
||||
}
|
||||
|
||||
// Check document status
|
||||
async function checkDocumentStatus(documentId) {
|
||||
try {
|
||||
// Start with a short delay
|
||||
let delay = 2000;
|
||||
const maxAttempts = 10;
|
||||
|
||||
for (let attempt = 0; attempt < maxAttempts; attempt++) {
|
||||
// Wait for the delay
|
||||
await new Promise(resolve => setTimeout(resolve, delay));
|
||||
|
||||
// Fetch document status
|
||||
const response = await fetch(`${API_BASE_URL}/documents/${documentId}`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Error checking document status: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Update document in local storage
|
||||
const documents = JSON.parse(localStorage.getItem(DOCUMENTS_STORAGE_KEY) || '[]');
|
||||
const documentIndex = documents.findIndex(doc => doc.id === documentId);
|
||||
|
||||
if (documentIndex !== -1) {
|
||||
documents[documentIndex].status = data.status;
|
||||
localStorage.setItem(DOCUMENTS_STORAGE_KEY, JSON.stringify(documents));
|
||||
}
|
||||
|
||||
// If processing is complete or failed, stop checking
|
||||
if (data.status === 'completed' || data.status === 'failed') {
|
||||
// If completed, show the report
|
||||
if (data.status === 'completed' && data.reports && data.reports.length > 0) {
|
||||
viewDocumentReport(documentId);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
// Increase delay for next attempt (exponential backoff)
|
||||
delay = Math.min(delay * 1.5, 10000);
|
||||
}
|
||||
|
||||
// Refresh document list
|
||||
loadDocuments();
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error checking document status:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Resubmit document
|
||||
function resubmitDocument(documentId) {
|
||||
// Trigger file input for resubmission
|
||||
fileInput.setAttribute('data-resubmit-id', documentId);
|
||||
fileInput.click();
|
||||
|
||||
// Listen for file selection (one-time event listener)
|
||||
const handleResubmitFileSelection = async function() {
|
||||
if (fileInput.files.length) {
|
||||
const resubmitId = fileInput.getAttribute('data-resubmit-id');
|
||||
|
||||
if (resubmitId) {
|
||||
// Handle resubmission
|
||||
await handleDocumentResubmission(resubmitId, fileInput.files[0]);
|
||||
|
||||
// Remove attribute and event listener
|
||||
fileInput.removeAttribute('data-resubmit-id');
|
||||
fileInput.removeEventListener('change', handleResubmitFileSelection);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
fileInput.addEventListener('change', handleResubmitFileSelection);
|
||||
}
|
||||
|
||||
// Handle document resubmission
|
||||
async function handleDocumentResubmission(documentId, file) {
|
||||
try {
|
||||
// Show loading overlay
|
||||
loadingOverlay.style.display = 'flex';
|
||||
|
||||
// Create form data
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
// Send request to API
|
||||
const response = await fetch(`${API_BASE_URL}/documents/${documentId}/resubmit`, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Error resubmitting document: ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Update document in local storage
|
||||
const document = {
|
||||
id: data.document_id,
|
||||
name: file.name,
|
||||
status: data.status,
|
||||
date: new Date().toISOString(),
|
||||
size: file.size
|
||||
};
|
||||
|
||||
saveDocument(document);
|
||||
|
||||
// Load updated document list
|
||||
loadDocuments();
|
||||
|
||||
// Check document status and show report if ready
|
||||
checkDocumentStatus(data.document_id);
|
||||
|
||||
// Show success message
|
||||
alert('Document resubmitted successfully! The analysis is in progress.');
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error resubmitting document:', error);
|
||||
alert('Failed to resubmit document. Please try again.');
|
||||
} finally {
|
||||
// Hide loading overlay
|
||||
loadingOverlay.style.display = 'none';
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user