DGNum/Stirling-PDF
15
0
Fork 0
Code Issues 4 Pull requests 1 Projects Releases Packages Wiki Activity

compare imrpove

Browse source
This commit is contained in:
Anthony Stirling 2023-05-11 21:55:57 +01:00
parent 55fe47d4f3
commit 8ce900acca
1 changed files with 88 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
src/main/resources/templates/other/compare.html
View file

@ -12,12 +12,14 @@
<br> <br> <br> <br>
<div class="container"> <div class="container">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-md-6"> <div class="col-md-9">
<h2 th:text="#{repair.header}"></h2> <h2 th:text="#{repair.header}"></h2>
<div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div> <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
<div th:replace="~{fragments/common :: fileSelector(name='fileInput2', multiple=false, accept='application/pdf')}"></div> <div th:replace="~{fragments/common :: fileSelector(name='fileInput2', multiple=false, accept='application/pdf')}"></div>
<button onclick="comparePDFs()">Compare</button> <button onclick="comparePDFs()">Compare</button>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<h3>Document 1</h3> <h3>Document 1</h3>
@ -32,12 +34,25 @@
.result-column { .result-column {
border: 1px solid #ccc; border: 1px solid #ccc;
padding: 15px; padding: 15px;
overflow-y: scroll; overflow-y: auto;
height: 400px; height: calc(100vh - 400px);
white-space: pre-wrap; white-space: pre-wrap;
} }
</style> </style>
<script> <script>
// get the elements
var result1 = document.getElementById('result1');
var result2 = document.getElementById('result2');
// add event listeners
result1.addEventListener('scroll', function() {
result2.scrollTop = result1.scrollTop;
});
result2.addEventListener('scroll', function() {
result1.scrollTop = result2.scrollTop;
});
async function comparePDFs() { async function comparePDFs() {
const file1 = document.getElementById("fileInput-input").files[0]; const file1 = document.getElementById("fileInput-input").files[0];
const file2 = document.getElementById("fileInput2-input").files[0]; const file2 = document.getElementById("fileInput2-input").files[0];
@ -73,9 +88,46 @@
return; return;
} }
const diff = (text1, text2) => { const diff = (text1, text2) => {
// ... Keep the same diff function from the previous response ... const words1 = text1.split(' ');
const words2 = text2.split(' ');
// Create a 2D array to hold our "matrix"
const matrix = Array(words1.length + 1).fill(null).map(() => Array(words2.length + 1).fill(0));
// Perform standard LCS algorithm
for (let i = 1; i <= words1.length; i++) {
for (let j = 1; j <= words2.length; j++) {
if (words1[i - 1] === words2[j - 1]) {
matrix[i][j] = matrix[i - 1][j - 1] + 1;
} else {
matrix[i][j] = Math.max(matrix[i][j - 1], matrix[i - 1][j]);
}
}
}
let i = words1.length;
let j = words2.length;
const differences = [];
// Backtrack through the matrix to create the diff
while (i > 0 || j > 0) {
if (i > 0 && j > 0 && words1[i - 1] === words2[j - 1]) {
differences.unshift(['black', words1[i - 1]]);
i--;
j--;
} else if (j > 0 && (i === 0 || matrix[i][j - 1] >= matrix[i - 1][j])) {
differences.unshift(['green', words2[j - 1]]);
j--;
} else if (i > 0 && (j === 0 || matrix[i][j - 1] < matrix[i - 1][j])) {
differences.unshift(['red', words1[i - 1]]);
i--;
}
}
return differences;
}; };
const differences = diff(text1, text2); const differences = diff(text1, text2);
const displayDifferences = (differences) => { const displayDifferences = (differences) => {
@ -84,44 +136,48 @@
resultDiv1.innerHTML = ""; resultDiv1.innerHTML = "";
resultDiv2.innerHTML = ""; resultDiv2.innerHTML = "";
let doc1Pointer = 0;
let doc2Pointer = 0;
differences.forEach(([color, word]) => { differences.forEach(([color, word]) => {
const span1 = document.createElement("span"); const span1 = document.createElement("span");
const span2 = document.createElement("span"); const span2 = document.createElement("span");
// If it's an addition, show it in green in the second document and transparent in the first
if (color === "green") { if (color === "green") {
span1.style.color = color; span1.style.color = "transparent";
span1.textContent = word; span1.style.userSelect = "none";
resultDiv1.appendChild(span1);
doc1Pointer++;
} else if (color === "red") {
span2.style.color = color; span2.style.color = color;
span2.textContent = word; }
resultDiv2.appendChild(span2); // If it's a deletion, show it in red in the first document and transparent in the second
doc2Pointer++; else if (color === "red") {
} else { span1.style.color = color;
span2.style.color = "transparent";
span2.style.userSelect = "none";
}
// If it's unchanged, show it in black in both
else {
span1.style.color = color; span1.style.color = color;
span1.textContent = word;
resultDiv1.appendChild(span1);
doc1Pointer++;
span2.style.color = color; span2.style.color = color;
span2.textContent = word;
resultDiv2.appendChild(span2);
doc2Pointer++;
} }
// Add space after each word span1.textContent = word;
const space1 = document.createElement("span"); span2.textContent = word;
const space2 = document.createElement("span"); resultDiv1.appendChild(span1);
space1.textContent = " "; resultDiv2.appendChild(span2);
space2.textContent = " ";
resultDiv1.appendChild(space1); // Add space after each word, or a new line if the word ends with a full stop
resultDiv2.appendChild(space2); const spaceOrNewline1 = document.createElement("span");
const spaceOrNewline2 = document.createElement("span");
if (word.endsWith(".")) {
spaceOrNewline1.innerHTML = "<br>";
spaceOrNewline2.innerHTML = "<br>";
} else {
spaceOrNewline1.textContent = " ";
spaceOrNewline2.textContent = " ";
}
resultDiv1.appendChild(spaceOrNewline1);
resultDiv2.appendChild(spaceOrNewline2);
}); });
return result;
}; };
console.log('Differences:', differences); console.log('Differences:', differences);
displayDifferences(differences); displayDifferences(differences);
} }