pczajkowski
/
tmsearch


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
							<!doctype html>
<html>
	<head>
		<title>Search results for "{{.SearchPhrase}}"</title>
		<style>
			table, th, td {
				border: 1px solid black;
				border-collapse: collapse;
			}
			th {
				cursor: pointer;
			}
		</style>
		<script>
			let filterTable = function(value) {
				const filter = value.toUpperCase();
				let table = document.getElementsByTagName("tbody")[0];
				let tr = table.getElementsByTagName("tr");

				for (let i = 0; i < tr.length; i++) {
					tr[i].style.display = "none";

					let td = tr[i].getElementsByTagName("td");
					for (var j = 0; j < td.length; j++) {
						let cell = tr[i].getElementsByTagName("td")[j];
						if (cell) {
							if (cell.innerText.toUpperCase().indexOf(filter) > -1) {
								tr[i].style.display = "";
								break;
							} 
						}
					}
				}
			};

			let clearFilter = function() {
				let table = document.getElementsByTagName("tbody")[0];
				let tr = table.getElementsByTagName("tr");

				for (let i = 0; i < tr.length; i++) {
					tr[i].style.display = "";
				}

				let filter = document.getElementById("filter");
				filter.value = "";
			};
		</script>
	</head>
	<body>
		<a href="/">Search again</a>
		<div>Filter: 
			<input id="filter" type="text" name="name" onchange="filterTable(this.value)" autocomplete="off">
			<button class="btn" onclick="clearFilter()">Clear</button>
		</div>
		<table>
			<thead>
				<tr style='text-align: left'>
					<th>Source</th>
					<th>Translation</th>
					<th>TM</th>
				</tr>
			</thead>
			<tbody>
			{{range $result := .Results}}
				{{range $segment := $result.Segments}}
				<tr style='text-align: left'>
					<td>{{$segment.Source}}</td>
					<td>{{$segment.Target}}</td>
					<td>{{$result.TMName}}</td>
				</tr>
				{{end}}
			{{end}}
			</tbody>
		</table>
		<br/>
		<a href="/">Search again</a>
		<script>
			// borrowed from https://stackoverflow.com/a/49041392/7342859
			const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;

			const comparer = (idx, asc) => (a, b) => ((v1, v2) => 
				v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
				)(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));

			// do the work...
			document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
				const table = th.closest('table');
				Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
					.sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
					.forEach(tr => table.appendChild(tr) );

				const sorted = " (sorted)";
				if (!th.textContent.includes(sorted)) {
					th.textContent += sorted;
				}

				th.parentNode.childNodes.forEach((child) => {
					if (child != th) {
						child.textContent = child.textContent.replace(sorted, "");
					}
				});
			})));
		</script>
	</body>
</html>