pieter/eveAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve HTML Processing + Introduction of Processed File viewer

Browse Source
This commit is contained in:
Josako
2025-05-19 17:18:16 +02:00
parent d2bb51a4a8
commit 70de4c0328
8 changed files with 222 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
eveai_app/templates/document/document_versions.html
View File

@@ -13,6 +13,7 @@
{{ render_selectable_table(headers=["ID", "URL", "Object Name", "File Type", "Process.", "Proces. Start", "Proces. Finish", "Proces. Error"], rows=rows, selectable=True, id="versionsTable") }}
<div class="form-group mt-3">
<button type="submit" name="action" value="edit_document_version" class="btn btn-primary">Edit Document Version</button>
<button type="submit" name="action" value="view_document_version_markdown" class="btn btn-danger">View Processed Document</button>
<button type="submit" name="action" value="process_document_version" class="btn btn-danger">Process Document Version</button>
</div>
</form>
@@ -21,4 +22,4 @@
{% block content_footer %}
{{ render_pagination(pagination, 'document_bp.documents') }}
{% endblock %}
{% endblock %}

1
eveai_app/templates/document/document_versions_list_view.html
View File

@@ -37,6 +37,7 @@
<div class="form-group mt-3 d-flex justify-content-between">
<div>
<button type="submit" name="action" value="edit_document_version" class="btn btn-primary" onclick="return validateTableSelection('documentVersionsForm')">Edit Document Version</button>
<button type="submit" name="action" value="view_document_version_markdown" class="btn btn-danger">View Processed Document</button>
<button type="submit" name="action" value="process_document_version" class="btn btn-danger" onclick="return validateTableSelection('documentVersionsForm')">Process Document Version</button>
</div>
</div>

115
eveai_app/templates/document/view_document_version_markdown.html Normal file
View File

@@ -0,0 +1,115 @@
{% extends "base.html" %}
{% block title %}Document Version Markdown{% endblock %}
{% block content_title %}Document Version Markdown{% endblock %}
{% block content_description %}Markdown inhoud van document versie {{ document_version.id }}.{% endblock %}
{% block content %}
<div class="container mt-5">
<div class="card">
<div class="card-header bg-light">
<h5>Document Informatie</h5>
</div>
<div class="card-body">
<p><strong>Document ID:</strong> {{ document_version.doc_id }}</p>
<p><strong>Versie ID:</strong> {{ document_version.id }}</p>
<p><strong>Object Naam:</strong> {{ document_version.object_name }}</p>
<p><strong>Taal:</strong> {{ document_version.language }}</p>
</div>
</div>
<div class="card mt-4">
<div class="card-header bg-light d-flex justify-content-between align-items-center">
<h5>Markdown Content</h5>
<div class="btn-group" role="group">
<button class="btn btn-sm btn-outline-secondary" id="showRaw">Toon ruw</button>
<button class="btn btn-sm btn-outline-primary active" id="showRendered">Toon gerenderd</button>
</div>
</div>
<div class="card-body">
<!-- Ruwe markdown weergave (standaard verborgen) -->
<div id="rawMarkdown" class="code-wrapper" style="display: none;">
<pre><code class="language-markdown">{{ markdown_content }}</code></pre>
</div>
<!-- Gerenderde markdown weergave -->
<div id="renderedMarkdown" class="markdown-body">
{{ markdown_content | markdown }}
</div>
</div>
</div>
</div>
{% endblock %}
{% block styles %}
{{ super() }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css">
<style>
pre, code {
margin: 0;
padding: 0;
white-space: pre-wrap !important;
word-wrap: break-word !important;
max-width: 100%;
}
pre code {
padding: 1rem !important;
border-radius: 4px;
font-size: 0.75rem;
line-height: 1.5;
white-space: pre-wrap !important;
}
.code-wrapper {
position: relative;
width: 100%;
}
.markdown-body {
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
line-height: 1.6;
}
/* Zorg ervoor dat de markdown goed uitziet in de donkere modus van de app (optioneel) */
@media (prefers-color-scheme: dark) {
.markdown-body {
color: #c9d1d9;
background-color: #0d1117;
}
}
</style>
{% endblock %}
{% block scripts %}
{{ super() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
// Initialize syntax highlighting
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightElement(block);
});
// Schakelknoppen voor weergave
const showRawBtn = document.getElementById('showRaw');
const showRenderedBtn = document.getElementById('showRendered');
const rawMarkdown = document.getElementById('rawMarkdown');
const renderedMarkdown = document.getElementById('renderedMarkdown');
showRawBtn.addEventListener('click', function() {
rawMarkdown.style.display = 'block';
renderedMarkdown.style.display = 'none';
showRawBtn.classList.add('active');
showRenderedBtn.classList.remove('active');
});
showRenderedBtn.addEventListener('click', function() {
rawMarkdown.style.display = 'none';
renderedMarkdown.style.display = 'block';
showRawBtn.classList.remove('active');
showRenderedBtn.classList.add('active');
});
});
</script>
{% endblock %}