Edward Betts
0e2c95117c
Add /trip/<start>/debug endpoint that displays the complete trip object data in pretty-printed JSON format with syntax highlighting. Includes both raw data and computed properties for debugging purposes. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
128 lines
3.4 KiB
HTML
128 lines
3.4 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Debug: {{ trip.title }} ({{ trip.start }}) - Edward Betts{% endblock %}
|
|
|
|
{% block style %}
|
|
<style>
|
|
.json-display {
|
|
background-color: #f8f9fa;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 0.375rem;
|
|
padding: 1rem;
|
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
font-size: 0.875rem;
|
|
line-height: 1.4;
|
|
white-space: pre-wrap;
|
|
overflow-x: auto;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.debug-header {
|
|
background-color: #fff3cd;
|
|
border: 1px solid #ffeaa7;
|
|
border-radius: 0.375rem;
|
|
padding: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.debug-header h1 {
|
|
color: #856404;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.debug-header p {
|
|
color: #856404;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.debug-header .btn {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
/* Basic JSON syntax highlighting using CSS */
|
|
.json-display .json-key {
|
|
color: #d73a49;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.json-display .json-string {
|
|
color: #032f62;
|
|
}
|
|
|
|
.json-display .json-number {
|
|
color: #005cc5;
|
|
}
|
|
|
|
.json-display .json-boolean {
|
|
color: #e36209;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.json-display .json-null {
|
|
color: #6f42c1;
|
|
font-weight: bold;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<div class="debug-header">
|
|
<h1>🐛 Trip Debug Information</h1>
|
|
<p>Raw trip object data for: <strong>{{ trip.title }}</strong></p>
|
|
<a href="{{ url_for('trip_page', start=start) }}" class="btn btn-primary">← Back to Trip Page</a>
|
|
<button onclick="copyToClipboard()" class="btn btn-secondary">📋 Copy JSON</button>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h3>Trip Object (JSON)</h3>
|
|
<div class="json-display" id="jsonDisplay">{{ trip_json }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
function copyToClipboard() {
|
|
const jsonText = document.getElementById('jsonDisplay').textContent;
|
|
navigator.clipboard.writeText(jsonText).then(function() {
|
|
// Show a temporary notification
|
|
const btn = event.target;
|
|
const originalText = btn.textContent;
|
|
btn.textContent = '✅ Copied!';
|
|
btn.classList.remove('btn-secondary');
|
|
btn.classList.add('btn-success');
|
|
|
|
setTimeout(function() {
|
|
btn.textContent = originalText;
|
|
btn.classList.remove('btn-success');
|
|
btn.classList.add('btn-secondary');
|
|
}, 2000);
|
|
}).catch(function(err) {
|
|
console.error('Failed to copy: ', err);
|
|
alert('Failed to copy to clipboard');
|
|
});
|
|
}
|
|
|
|
// Simple JSON syntax highlighting
|
|
function highlightJSON() {
|
|
const display = document.getElementById('jsonDisplay');
|
|
let content = display.textContent;
|
|
|
|
// Highlight different JSON elements
|
|
content = content.replace(/"([^"]+)":/g, '<span class="json-key">"$1":</span>');
|
|
content = content.replace(/"([^"]*)"(?=\s*[,\]\}])/g, '<span class="json-string">"$1"</span>');
|
|
content = content.replace(/\b(\d+\.?\d*)\b/g, '<span class="json-number">$1</span>');
|
|
content = content.replace(/\b(true|false)\b/g, '<span class="json-boolean">$1</span>');
|
|
content = content.replace(/\bnull\b/g, '<span class="json-null">null</span>');
|
|
|
|
display.innerHTML = content;
|
|
}
|
|
|
|
// Apply highlighting when page loads
|
|
document.addEventListener('DOMContentLoaded', highlightJSON);
|
|
</script>
|
|
{% endblock %} |