112 lines
4.1 KiB
HTML
112 lines
4.1 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}View Data Capsule{% endblock %}
|
|
|
|
{% block content_title %}Data Capsule Details{% endblock %}
|
|
{% block content_description %}View information about this EvAI Data Capsule and its content.{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mt-5">
|
|
<!-- Basic Information Section -->
|
|
<h4 class="mb-3">Basis Informatie</h4>
|
|
<table class="table table-bordered">
|
|
<tr>
|
|
<th>ID</th>
|
|
<td>{{ data_capsule.id }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Type</th>
|
|
<td>{{ data_capsule.type }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Type Version</th>
|
|
<td>{{ data_capsule.type_version }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Created At</th>
|
|
<td>{{ data_capsule.created_at }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Chat Session ID</th>
|
|
<td>
|
|
<a href="{{ url_for('interaction_bp.view_chat_session', chat_session_id=data_capsule.chat_session_id) }}">
|
|
{{ data_capsule.chat_session_id }}
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- Chat Session Information Section -->
|
|
<h4 class="mb-3 mt-4">Chat Sessie Informatie</h4>
|
|
<table class="table table-bordered">
|
|
<tr>
|
|
<th>Session ID</th>
|
|
<td>{{ chat_session.session_id }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Session Start</th>
|
|
<td>{{ chat_session.session_start }}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Session End</th>
|
|
<td>{{ chat_session.session_end }}</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- Configuration Data Section -->
|
|
{% if data_capsule.configuration %}
|
|
<h4 class="mb-3 mt-4">Configuratie</h4>
|
|
<div id="configuration-viewer" class="json-viewer" style="height: 300px; width: 100%; border: 1px solid #dee2e6;"></div>
|
|
<div id="configuration-viewer-data" class="d-none">{{ data_capsule.configuration | tojson(indent=2) }}</div>
|
|
{% endif %}
|
|
|
|
<!-- Capsule Data Section -->
|
|
{% if data_capsule.data %}
|
|
<h4 class="mb-3 mt-4">Data</h4>
|
|
<div id="data-viewer" class="json-viewer" style="height: 300px; width: 100%; border: 1px solid #dee2e6;"></div>
|
|
<div id="data-viewer-data" class="d-none">{{ data_capsule.data | tojson(indent=2) }}</div>
|
|
{% endif %}
|
|
|
|
<!-- Navigation Buttons -->
|
|
<div class="mt-5 mb-4">
|
|
<a href="{{ url_for('interaction_bp.eveai_data_capsules') }}" class="btn btn-primary">
|
|
<i class="fas fa-arrow-left"></i> Back to Data Capsules
|
|
</a>
|
|
<a href="{{ url_for('interaction_bp.view_chat_session', chat_session_id=data_capsule.chat_session_id) }}" class="btn btn-secondary">
|
|
<i class="fas fa-comments"></i> View Chat Session
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Initialize JSON Editor for the data fields -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize Configuration JSON Editor if available
|
|
if (document.getElementById('configuration-viewer')) {
|
|
const configurationData = JSON.parse(document.getElementById('configuration-viewer-data').textContent);
|
|
const configurationViewer = new JSONEditor(document.getElementById('configuration-viewer'), {
|
|
mode: 'view',
|
|
mainMenuBar: false,
|
|
navigationBar: false,
|
|
statusBar: false,
|
|
readOnly: true,
|
|
onChangeJSON: function() { /* read only */ }
|
|
}, configurationData);
|
|
}
|
|
|
|
// Initialize Data JSON Editor if available
|
|
if (document.getElementById('data-viewer')) {
|
|
const capsuleData = JSON.parse(document.getElementById('data-viewer-data').textContent);
|
|
const dataViewer = new JSONEditor(document.getElementById('data-viewer'), {
|
|
mode: 'view',
|
|
mainMenuBar: false,
|
|
navigationBar: false,
|
|
statusBar: false,
|
|
readOnly: true,
|
|
onChangeJSON: function() { /* read only */ }
|
|
}, capsuleData);
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|