176 lines
9.1 KiB
HTML
176 lines
9.1 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% macro render_node_tree(node) %}
|
|
{% if node %}
|
|
<ul class="list-unstyled ms-4">
|
|
{% if node.yes_node %}
|
|
<li>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<span class="badge bg-success me-2">Yes</span>
|
|
<a href="{{ url_for('admin.edit_node', node_id=node.yes_node.id) }}" class="text-decoration-none">
|
|
{{ node.yes_node.question }}
|
|
</a>
|
|
{% if node.yes_node.is_terminal %}
|
|
<span class="badge bg-secondary ms-2">Terminal</span>
|
|
{% endif %}
|
|
</div>
|
|
{{ render_node_tree(node.yes_node) }}
|
|
</li>
|
|
{% endif %}
|
|
|
|
{% if node.no_node %}
|
|
<li>
|
|
<div class="d-flex align-items-center mb-2">
|
|
<span class="badge bg-danger me-2">No</span>
|
|
<a href="{{ url_for('admin.edit_node', node_id=node.no_node.id) }}" class="text-decoration-none">
|
|
{{ node.no_node.question }}
|
|
</a>
|
|
{% if node.no_node.is_terminal %}
|
|
<span class="badge bg-secondary ms-2">Terminal</span>
|
|
{% endif %}
|
|
</div>
|
|
{{ render_node_tree(node.no_node) }}
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
{% endif %}
|
|
{% endmacro %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid mt-4">
|
|
<div class="row">
|
|
<div class="col-md-12 mb-4">
|
|
<div class="card shadow">
|
|
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
|
|
<h6 class="m-0 font-weight-bold text-primary">Edit Decision Tree: {{ product.title }}</h6>
|
|
<div>
|
|
<a href="{{ url_for('admin.admin_dashboard') }}" class="btn btn-sm btn-outline-primary">
|
|
Back to Dashboard
|
|
</a>
|
|
<!-- Update this link to use the correct route -->
|
|
<a href="{{ url_for('user.product_detail', product_id=product.id) }}" class="btn btn-sm btn-outline-success" target="_blank">
|
|
View Product
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h5>Root Node</h5>
|
|
<div class="card mb-4">
|
|
<div class="card-body">
|
|
<h6>{{ product.root_node.question }}</h6>
|
|
<p class="text-muted small">{{ product.root_node.content|truncate(100) }}</p>
|
|
<a href="{{ url_for('admin.edit_node', node_id=product.root_node.id) }}" class="btn btn-sm btn-primary">
|
|
Edit Root Node
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h5>Tree Structure</h5>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="tree-container">
|
|
<div class="d-flex align-items-center mb-2">
|
|
<span class="badge bg-primary me-2">Root</span>
|
|
<a href="{{ url_for('admin.edit_node', node_id=product.root_node.id) }}" class="text-decoration-none">
|
|
{{ product.root_node.question }}
|
|
</a>
|
|
{% if product.root_node.is_terminal %}
|
|
<span class="badge bg-secondary ms-2">Terminal</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6 class="text-success">Yes Branch</h6>
|
|
{% if product.root_node.yes_node %}
|
|
{{ render_node_tree(product.root_node.yes_node) }}
|
|
{% else %}
|
|
<p class="text-muted">No 'Yes' branch defined yet.</p>
|
|
<a href="{{ url_for('admin.edit_node', node_id=product.root_node.id) }}" class="btn btn-sm btn-outline-success">
|
|
Add 'Yes' Branch
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-danger">No Branch</h6>
|
|
{% if product.root_node.no_node %}
|
|
{{ render_node_tree(product.root_node.no_node) }}
|
|
{% else %}
|
|
<p class="text-muted">No 'No' branch defined yet.</p>
|
|
<a href="{{ url_for('admin.edit_node', node_id=product.root_node.id) }}" class="btn btn-sm btn-outline-danger">
|
|
Add 'No' Branch
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<h5>Tree Visualization</h5>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div id="tree-visualization" class="overflow-auto" style="height: 500px;"></div>
|
|
<input type="hidden" id="tree-data" value="{{ tree_json }}">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Debug data section -->
|
|
<div class="mt-3">
|
|
<button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#debugData">
|
|
Debug Tree Data
|
|
</button>
|
|
<div class="collapse mt-2" id="debugData">
|
|
<div class="card card-body">
|
|
<pre id="debug-output" style="max-height: 200px; overflow: auto;"></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card shadow">
|
|
<div class="card-header py-3">
|
|
<h6 class="m-0 font-weight-bold text-primary">Preview Decision Tree</h6>
|
|
</div>
|
|
<div class="card-body text-center">
|
|
<p>Test your decision tree from the user's perspective:</p>
|
|
<!-- Update this link to use the correct route -->
|
|
<a href="{{ url_for('user.start_decision_tree', product_id=product.id) }}" class="btn btn-success" target="_blank">
|
|
Test Decision Tree
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Include D3.js for tree visualization -->
|
|
<script src="https://d3js.org/d3.v7.min.js"></script>
|
|
<script src="{{ url_for('static', filename='js/tree-visualizer.js') }}"></script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const debugOutput = document.getElementById('debug-output');
|
|
const treeData = document.getElementById('tree-data');
|
|
if (debugOutput && treeData) {
|
|
try {
|
|
const data = JSON.parse(treeData.value);
|
|
debugOutput.textContent = JSON.stringify(data, null, 2);
|
|
} catch (e) {
|
|
debugOutput.textContent = "Error parsing tree data: " + e.message;
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |