From be4b1b719ea51132a9eb0e0b2f8e0c03334d4196 Mon Sep 17 00:00:00 2001
From: Brandon Waldon <32781952+bwaldon@users.noreply.github.com>
Date: Fri, 27 Sep 2024 16:10:00 -0400
Subject: [PATCH 1/2] refactor dom editing in html templates w/ jquery

Co-authored-by: Meru Gopalan <merugopalan2007@gmail.com>
---
 templates/annotate.html | 33 +++++++++++++++++----------------
 templates/edittree.html | 10 +++++++---
 templates/layout.html   |  1 +
 3 files changed, 25 insertions(+), 19 deletions(-)
diff --git a/templates/annotate.html b/templates/annotate.html
index d9d492c..15ec755 100644
--- a/templates/annotate.html
+++ b/templates/annotate.html
@@ -41,34 +41,34 @@
 	</div>
 </form>
 
+{%block script %}
 <script>
 	function makeEditable() {
 		event.preventDefault();
-		document.getElementById('editableSent').style.display = "none";
-		document.getElementById('editInput').style.display = "inline";
-		document.getElementById('cancelButton').style.display = "inline";
-		document.getElementById('reTokenizeButton').style.display = "inline";
+		$("#editableSent").hide();
+		$("#editInput").css("display", "inline");
+		$("#cancelButton").css("display", "inline");
+		$("#reTokenizeButton").css("display", "inline");
 	}
 	
 	function cancelEdit() {
 		event.preventDefault();
-		document.getElementById('editableSent').style.display = "inline";
-		document.getElementById('editInput').style.display = "none";
-		document.getElementById('cancelButton').style.display = "none";
-		document.getElementById('reTokenizeButton').style.display = "none";
+		$("#editableSent").css("display", "inline");
+		$("#editInput").hide();
+		$("#cancelButton").hide();
+		$("#reTokenizeButton").hide();
 	}
 	
 	function reTokenize(sentno) {
-		var newtext = document.getElementById('editInput').value;
+		var newtext = $("#editInput").val();
 		newtext = newtext.trim();
 		newtext = newtext.replace(/\s+/g, ' ');
-		document.getElementById('editInput').value = newtext;
-		var sentno = document.getElementById('sentno').value;
-		document.getElementById('editableSent').innerText = newtext;
-		document.getElementById('editableSent').style.display = "inline";
-		document.getElementById('editInput').style.display = "none";
-		document.getElementById('cancelButton').style.display = "none";
-		document.getElementById('reTokenizeButton').style.display = "none";
+		var sentno = $("#sentno").val();
+		$("#editableSent").text(newtext)
+		$("#editableSent").css("display", "inline");
+		$("#editInput").hide();
+		$("#cancelButton").hide();
+		$("#reTokenizeButton").hide();
 		fetch('/retokenize', {
 			method: 'POST',
 			headers: {
@@ -83,6 +83,7 @@
 		});
 		}
 </script>
+{% endblock %}
 
 <div style="display: none; " id=constraintdiv>
 	Required: [<span id=showrequire></span>]; Blocked: [<span id=showblock></span>]
diff --git a/templates/edittree.html b/templates/edittree.html
index 3bb655e..07c9a05 100644
--- a/templates/edittree.html
+++ b/templates/edittree.html
@@ -32,14 +32,17 @@
 </div>
 {{ msg }}
 
+{%block script %}
 <script>
+	/*goback() is called by the Go back button, which is passed into this page 
+	from the above jinja {{ msg }} tag */
 	function goback() {
-		var sentno = document.getElementById('sentno').value;
+		var sentno = $('#sentno').val();
 		window.location.href = '/annotate/annotate/' + sentno;
 	}
 	function undoAccept() {
-		var sentid = document.getElementById('sentid').value;
-		var sentno = document.getElementById('sentno').value;
+		var sentid = $('#sentid').val();
+		var sentno = $('#sentno').val();
 		fetch('/undoaccept', {
 			method: 'POST',
 			headers: {
@@ -59,6 +62,7 @@
 		});
 	}
 </script>
+{% endblock %}
 
 <div id=help style="display: none;">
 	<ul>
diff --git a/templates/layout.html b/templates/layout.html
index 660b046..9dc7808 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <title>Treebank Annotation</title>
 <script src="/annotate/static/script.js"></script>
+<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
 <link rel=stylesheet type=text/css href="/annotate/static/style.css">
 {%- for message in get_flashed_messages() %}
 <div class=flash>{{ message }}</div>

From d198dfd79c2a199f3eaf56735130d20931191e9d Mon Sep 17 00:00:00 2001
From: Brandon Waldon <32781952+bwaldon@users.noreply.github.com>
Date: Fri, 27 Sep 2024 16:24:14 -0400
Subject: [PATCH 2/2] jquery ajax method call in undoAccept and reTokenize

Co-authored-by: Meru Gopalan <merugopalan2007@gmail.com>
---
 templates/annotate.html | 11 ++++++-----
 templates/edittree.html | 17 +++++++----------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/templates/annotate.html b/templates/annotate.html
index 15ec755..09fb400 100644
--- a/templates/annotate.html
+++ b/templates/annotate.html
@@ -69,15 +69,16 @@
 		$("#editInput").hide();
 		$("#cancelButton").hide();
 		$("#reTokenizeButton").hide();
-		fetch('/retokenize', {
+		$.ajax({
 			method: 'POST',
+			url: '/retokenize',
 			headers: {
-				'Content-Type': 'application/json',
+				"Content-Type":'application/json'
 			},
-			body: JSON.stringify({newtext: newtext, sentno: sentno}),
+			data: JSON.stringify({newtext: newtext, sentno: sentno})
+		}).then(data => {
+			console.log('Success', data);
 		})
-		.then(response => response.json())
-		.then(data => console.log('Success:', data))
 		.catch((error) => {
 			console.error('Error:', error);
 		});
diff --git a/templates/edittree.html b/templates/edittree.html
index 07c9a05..c98afdb 100644
--- a/templates/edittree.html
+++ b/templates/edittree.html
@@ -43,20 +43,17 @@
 	function undoAccept() {
 		var sentid = $('#sentid').val();
 		var sentno = $('#sentno').val();
-		fetch('/undoaccept', {
+		$.ajax({
 			method: 'POST',
+			url: '/undoaccept',
 			headers: {
-				'Content-Type': 'application/json',
+				"Content-Type":'application/json'
 			},
-			body: JSON.stringify({sentid: sentid}),
+			data: JSON.stringify({sentid: sentid})
+		}).then(data => {
+			console.log('Success', data);
+			$(location).attr('href', '/annotate/annotate/' + sentno);
 		})
-		.then(response => response.json())
-		.then(data => {
-			console.log('Success:', data);
-			window.location.href = '/annotate/annotate/' + sentno;
-		}
-		)
-		.then(redirect('/annotate/annotate/1'))
 		.catch((error) => {
 			console.error('Error:', error);
 		});
