|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Generation Data</title> |
|
<link rel="stylesheet" href="{{ url_for('static', filename='GenerationTable.css') }}"> |
|
</head> |
|
<body> |
|
<table id="generation-table"> |
|
<thead> |
|
<tr> |
|
<th onclick="sortTable(0)">User Story</th> |
|
<th onclick="sortTable(1)">Generated Story</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
{% for generation in generations %} |
|
<tr> |
|
<td>{{ generation[0] }}</td> |
|
<td>{{ generation[1] }}</td> |
|
</tr> |
|
{% endfor %} |
|
</tbody> |
|
</table> |
|
|
|
<script> |
|
|
|
function sortTable(columnIndex) { |
|
|
|
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; |
|
table = document.getElementById("generation-table"); |
|
switching = true; |
|
|
|
|
|
dir = "asc"; |
|
|
|
|
|
while (switching) { |
|
|
|
switching = false; |
|
rows = table.rows; |
|
|
|
|
|
for (i = 1; i < (rows.length - 1); i++) { |
|
|
|
shouldSwitch = false; |
|
|
|
|
|
x = rows[i].getElementsByTagName("TD")[columnIndex]; |
|
y = rows[i + 1].getElementsByTagName("TD")[columnIndex]; |
|
|
|
|
|
if (dir == "asc") { |
|
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { |
|
|
|
shouldSwitch = true; |
|
break; |
|
} |
|
} else if (dir == "desc") { |
|
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) { |
|
|
|
shouldSwitch = true; |
|
break; |
|
} |
|
} |
|
} |
|
if (shouldSwitch) { |
|
|
|
|
|
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); |
|
switching = true; |
|
|
|
switchcount ++; |
|
} else { |
|
|
|
|
|
if (switchcount == 0 && dir == "asc") { |
|
dir = "desc"; |
|
switching = true; |
|
} |
|
} |
|
} |
|
|
|
|
|
var headers = table.getElementsByTagName("TH"); |
|
for (i = 0; i < headers.length; i++) { |
|
headers[i].innerHTML = headers[i].innerHTML.replace(/ ▲| ▼/g, ""); |
|
} |
|
var arrow = document.createElement("span"); |
|
arrow.className = "arrow"; |
|
if (dir == "asc") { |
|
arrow.innerHTML = " ▲"; |
|
} else { |
|
arrow.innerHTML = " ▼"; |
|
} |
|
headers[columnIndex].appendChild(arrow); |
|
} |
|
</script> |
|
</body> |
|
</html> |