results.html 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Search results for "{{.SearchPhrase}}"</title>
  5. <style>
  6. table, th, td {
  7. border: 1px solid black;
  8. border-collapse: collapse;
  9. }
  10. th {
  11. cursor: pointer;
  12. }
  13. </style>
  14. <script>
  15. let filterTable = function(value) {
  16. const filter = value.toUpperCase();
  17. let table = document.getElementsByTagName("tbody")[0];
  18. let tr = table.getElementsByTagName("tr");
  19. for (let i = 0; i < tr.length; i++) {
  20. tr[i].style.display = "none";
  21. let td = tr[i].getElementsByTagName("td");
  22. for (var j = 0; j < td.length; j++) {
  23. let cell = tr[i].getElementsByTagName("td")[j];
  24. if (cell) {
  25. if (cell.innerText.toUpperCase().indexOf(filter) > -1) {
  26. tr[i].style.display = "";
  27. break;
  28. }
  29. }
  30. }
  31. }
  32. };
  33. </script>
  34. </head>
  35. <body>
  36. <a href="/">Search again</a>
  37. <div>Filter:
  38. <input type="text" name="name" onchange="filterTable(this.value)" autocomplete="off">
  39. </div>
  40. <table>
  41. <thead>
  42. <tr style='text-align: left'>
  43. <th>Source</th>
  44. <th>Translation</th>
  45. <th>TM</th>
  46. </tr>
  47. </thead>
  48. <tbody>
  49. {{range $result := .Results}}
  50. {{range $segment := $result.Segments}}
  51. <tr style='text-align: left'>
  52. <td>{{$segment.Source}}</td>
  53. <td>{{$segment.Target}}</td>
  54. <td>{{$result.TMName}}</td>
  55. </tr>
  56. {{end}}
  57. {{end}}
  58. </tbody>
  59. </table>
  60. <br/>
  61. <a href="/">Search again</a>
  62. <script>
  63. // borrowed from https://stackoverflow.com/a/49041392/7342859
  64. const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
  65. const comparer = (idx, asc) => (a, b) => ((v1, v2) =>
  66. v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
  67. )(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
  68. // do the work...
  69. document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
  70. const table = th.closest('table');
  71. Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
  72. .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
  73. .forEach(tr => table.appendChild(tr) );
  74. const sorted = " (sorted)";
  75. if (!th.textContent.includes(sorted)) {
  76. th.textContent += sorted;
  77. }
  78. th.parentNode.childNodes.forEach((child) => {
  79. if (child != th) {
  80. child.textContent = child.textContent.replace(sorted, "");
  81. }
  82. });
  83. })));
  84. </script>
  85. </body>
  86. </html>