Spaces:
Runtime error
Runtime error
| <html> | |
| <head> | |
| <title>Translation Data</title> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='TranslationTable.css') }}"> | |
| </head> | |
| <body> | |
| <table id="translation-table"> | |
| <thead> | |
| <tr> | |
| <th onclick="sortTable(0)">User Story</th> | |
| <th onclick="sortTable(1)">Translation</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <!-- Use Jinja templates to grab all data from the translation table --> | |
| {% for translation in translations %} | |
| <tr> | |
| <td>{{ translation[0] }}</td> | |
| <td>{{ translation[1] }}</td> | |
| </tr> | |
| {% endfor %} | |
| </tbody> | |
| </table> | |
| <script> | |
| // Function to sort the table via its headers in asc/des order | |
| function sortTable(columnIndex) { | |
| // Initialize variables | |
| var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; | |
| table = document.getElementById("translation-table"); | |
| switching = true; | |
| // Set the sorting direction to ascending: | |
| dir = "asc"; | |
| // Make a loop that will continue until no switching has been done: | |
| while (switching) { | |
| // Start by saying: no switching is done: | |
| switching = false; | |
| rows = table.rows; | |
| // Loop through all table rows (except the first, which contains table headers): | |
| for (i = 1; i < (rows.length - 1); i++) { | |
| // Start by saying there should be no switching: | |
| shouldSwitch = false; | |
| // Get the two elements you want to compare, one from current row and one from the next: | |
| x = rows[i].getElementsByTagName("TD")[columnIndex]; | |
| y = rows[i + 1].getElementsByTagName("TD")[columnIndex]; | |
| // Check if the two rows should switch place, based on the direction, asc or desc: | |
| if (dir == "asc") { | |
| if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { | |
| // If so, mark as a switch and break the loop: | |
| shouldSwitch = true; | |
| break; | |
| } | |
| } else if (dir == "desc") { | |
| if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) { | |
| // If so, mark as a switch and break the loop: | |
| shouldSwitch = true; | |
| break; | |
| } | |
| } | |
| } | |
| if (shouldSwitch) { | |
| // If a switch has been marked, make the switch and mark that a switch has been done: | |
| rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); | |
| switching = true; | |
| // Each time a switch is done, increase this count by 1: | |
| switchcount ++; | |
| } else { | |
| // If no switching has been done AND the direction is "asc", set the direction to "desc" and run the while loop again. | |
| if (switchcount == 0 && dir == "asc") { | |
| dir = "desc"; | |
| switching = true; | |
| } | |
| } | |
| } | |
| // Add arrow icons to the header cells to indicate the sort direction: | |
| 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> |