From c94a6d8d65b45a1ef9f73ff65cbf055d7dc945a6 Mon Sep 17 00:00:00 2001
From: Gabor Szabo <gabor@szabgab.com>
Date: Thu, 3 Mar 2022 10:14:37 +0200
Subject: [PATCH] devtool: use more modern string interpolation instead of
 concatenation

---
 .../librelingo_tools/templates/converter.html   | 17 ++++++++++-------
 .../templates/missing_words.html                |  2 +-
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/apps/tools/librelingo_tools/templates/converter.html b/apps/tools/librelingo_tools/templates/converter.html
index 5ba2869620d8..4a25a095a706 100644
--- a/apps/tools/librelingo_tools/templates/converter.html
+++ b/apps/tools/librelingo_tools/templates/converter.html
@@ -11,7 +11,6 @@
 <div id="output">
 <div>
 
-<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
 <script>
 $(document).ready(function(){
     var source_to_target = null;
@@ -38,13 +37,16 @@
         const cleaned = original.replace(/[^a-zA-Z-]/g, " ");
         const words = cleaned.split(" ");
         var html = `<table class="table">`;
+        html += '<thead>';
         html += '<tr>';
         if (direction == 'target-to-source') {
-            html += '<th>' + course_data['target_language_name']  + '</th><th>' + course_data['source_language_name'] + '</th>'
+            html += `<th>${course_data['target_language_name']}</th><th>${course_data['source_language_name']}</th>`;
         } else {
-            html += '<th>' + course_data['source_language_name']  + '</th><th>' + course_data['target_language_name'] + '</th>'
+            html += `<th>${course_data['source_language_name']}</th><th>${course_data['target_language_name']}</th>`;
         }
         html += '</tr>';
+        html += '</thead>';
+        html += '<tbody>';
         for (var ix = 0; ix < words.length; ix++) {
             if (words[ix] == "") {
                 continue;
@@ -55,21 +57,22 @@
             if (direction == 'target-to-source') {
                 const translation = target_to_source[word];
                 if (translation) {
-                    html += '<td><a href="target/' + word + '.html">' + words[ix] + '</a></td><td>' + translation + '</td>';
+                    html += `<td><a href="target/${word}.html">${words[ix]}</a></td><td>${translation}</td>`;
                 } else {
-                    html += '<td class="has-background-danger-light">' + words[ix] + '</td><td class="has-background-danger-light">' + '</td>';
+                    html += `<td class="has-background-danger-light">${words[ix]}</td><td class="has-background-danger-light"></td>`;
                 }
             } else {
                 const translation = source_to_target[word];
                 if (translation) {
-                    html += '<td><a href="source/' + word + '.html">' + words[ix] + '</a></td><td>' + translation + '</td>';
+                    html += `<td><a href="source/${word}.html">${words[ix]}</a></td><td>${translation}</td>`;
                 } else {
-                    html += '<td class="has-background-danger-light">' + words[ix] + '</td><td class="has-background-danger-light">' + '</td>';
+                    html += `<td class="has-background-danger-light">${words[ix]}</td><td class="has-background-danger-light"></td>`;
                 }
             }
 
             html += '</tr>';
         }
+        html += '</tbody>';
         html += "</table>";
 
         $("#output").html(html);
diff --git a/apps/tools/librelingo_tools/templates/missing_words.html b/apps/tools/librelingo_tools/templates/missing_words.html
index 424fe6b9db16..457452256c0e 100644
--- a/apps/tools/librelingo_tools/templates/missing_words.html
+++ b/apps/tools/librelingo_tools/templates/missing_words.html
@@ -48,7 +48,7 @@ <h1 class="title">Missing Words</h1>
         words_array.sort();
 
         var count_our_words = 0;
-        var html = "<table>";
+        var html = `<table class="table">`;
         html += "<tr><th>word</th><th>count</th></tr>";
         for (var ix=0; ix < words_array.length; ix++) {
             var word = words_array[ix];