thethreemagi/bookapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding comarison for json refinement

Browse Source
This commit is contained in:
=
2026-02-04 22:43:41 -05:00
parent dbc5878fe2
commit 346dbe3f64
1 changed files with 34 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
templates/bible_comparison.html
View File

@@ -5,6 +5,7 @@
.diff-changed { background-color: #fff3cd; transition: background 0.5s; }
.diff-added { background-color: #d1e7dd; transition: background 0.5s; }
.diff-removed { background-color: #f8d7da; text-decoration: line-through; opacity: 0.7; transition: background 0.5s; }
.diff-moved { background-color: #cff4fc; transition: background 0.5s; }
.select-checkbox { transform: scale(1.2); cursor: pointer; }
</style>
@@ -59,7 +60,7 @@
<h6 class="text-muted text-uppercase small fw-bold border-bottom pb-1">Characters ({{ bible.characters|length }})</h6>
<ul class="list-unstyled small">
{% for c in bible.characters %}
<li class="mb-2" data-diff-key="char.{{ loop.index0 }}">
<li class="mb-2" data-diff-key="char.{{ loop.index0 }}" data-stable-id="char:{{ c.name|e }}">
<input type="checkbox" class="select-checkbox me-2 d-none" value="char.{{ loop.index0 }}">
<strong data-diff-key="char.{{ loop.index0 }}.name">{{ c.name }}</strong> <span class="badge bg-light text-dark border" data-diff-key="char.{{ loop.index0 }}.role">{{ c.role }}</span><br>
<span class="text-muted ms-4" data-diff-key="char.{{ loop.index0 }}.desc">{{ c.description }}</span>
@@ -71,13 +72,13 @@
<div class="mb-3">
<h6 class="text-muted text-uppercase small fw-bold border-bottom pb-1">Plot Structure</h6>
{% for book in bible.books %}
<div class="mb-2" data-diff-key="book.{{ book.book_number }}">
<div class="mb-2" data-diff-key="book.{{ book.book_number }}" data-stable-id="book:{{ book.title|e }}">
<input type="checkbox" class="select-checkbox me-2 d-none" value="book.{{ book.book_number }}">
<strong data-diff-key="book.{{ book.book_number }}.title">Book {{ book.book_number }}: {{ book.title }}</strong>
<p class="fst-italic small text-muted mb-1 ms-4" data-diff-key="book.{{ book.book_number }}.instr">{{ book.manual_instruction }}</p>
<ol class="small ps-3 mb-0">
{% for beat in book.plot_beats %}
<li><input type="checkbox" class="select-checkbox me-2 d-none" value="book.{{ book.book_number }}.beat.{{ loop.index0 }}"><span data-diff-key="book.{{ book.book_number }}.beat.{{ loop.index0 }}">{{ beat }}</span></li>
<li><input type="checkbox" class="select-checkbox me-2 d-none" value="book.{{ book.book_number }}.beat.{{ loop.index0 }}"><span data-diff-key="book.{{ book.book_number }}.beat.{{ loop.index0 }}" data-stable-id="beat:{{ beat|e }}">{{ beat }}</span></li>
{% endfor %}
</ol>
</div>
@@ -184,11 +185,31 @@ document.addEventListener('DOMContentLoaded', function() {
const btnRefine = document.getElementById('btnRefine');
const btnSelectAll = document.getElementById('btnSelectAll');
function findCounterpart(el, contextRoot) {
const key = el.getAttribute('data-diff-key');
const stableParent = el.closest('[data-stable-id]');
if (stableParent) {
const stableId = stableParent.getAttribute('data-stable-id');
const otherParent = contextRoot.querySelector(`[data-stable-id="${stableId.replace(/"/g, '\\"')}"]`);
if (otherParent) {
const parentKey = stableParent.getAttribute('data-diff-key');
if (key.startsWith(parentKey)) {
const suffix = key.substring(parentKey.length);
const otherParentKey = otherParent.getAttribute('data-diff-key');
return contextRoot.querySelector(`[data-diff-key="${otherParentKey + suffix}"]`);
}
return otherParent;
}
return null;
}
return contextRoot.querySelector(`[data-diff-key="${key}"]`);
}
// 1. Highlight Differences
const newElements = newDraft.querySelectorAll('[data-diff-key]');
newElements.forEach(el => {
const key = el.getAttribute('data-diff-key');
const origEl = original.querySelector(`[data-diff-key="${key}"]`);
const origEl = findCounterpart(el, original);
// Find associated checkbox (it might be a sibling or parent wrapper)
// In our macro, checkbox is usually a sibling of the span with data-diff-key
@@ -215,6 +236,14 @@ document.addEventListener('DOMContentLoaded', function() {
checkbox.classList.remove('d-none');
checkbox.checked = true;
}
} else if (el.getAttribute('data-diff-key') !== origEl.getAttribute('data-diff-key')) {
// Moved (Index changed but content matched by ID)
el.classList.add('diff-moved');
el.title = "Moved from original position";
if (checkbox) {
checkbox.classList.remove('d-none');
checkbox.checked = true;
}
} else if (el.innerText.trim() !== origEl.innerText.trim()) {
el.classList.add('diff-changed');
origEl.classList.add('diff-changed');
@@ -229,8 +258,7 @@ document.addEventListener('DOMContentLoaded', function() {
// Check for removed items
const origElements = original.querySelectorAll('[data-diff-key]');
origElements.forEach(el => {
const key = el.getAttribute('data-diff-key');
const newEl = newDraft.querySelector(`[data-diff-key="${key}"]`);
const newEl = findCounterpart(el, newDraft);
if (!newEl) {
el.classList.add('diff-removed');
el.title = "Removed in new draft";