Template source: list.djt.html

{% extends "base.djt.html" %} {% block title %}Display Table{% endblock %} {% block metadata %} <meta charset="utf-8"> <meta name="description" content="Display the table with a delete and change button"> <!-- other html tags here --> {% endblock %} {% block content %} <script type="application/javascript"> {% comment %} This javascript forces a page refresh when page visited from back button {% endcomment %} $(window).bind("pageshow", function(event) { if (event.originalEvent.persisted) { window.location.reload(); } {% comment %} This is another javascript attempt to force a page refresh when the page is visited from the back button {% endcomment %} if(performance.navigation.type === 2){ location.reload(true); } }); </script> <style> /* below is my styling */ table, th, td { border: 1px solid gray; margin: 5px 0; border-collapse: collapse; padding: 10px } /* below is the styling that allows editing */ table { table-layout: fixed ; width: 100% ; } td { width: 25% ; } DIV.table { display:table; } FORM.tr, DIV.tr { display:table-row; } SPAN.td { display:table-cell; } {% comment %} Linda added .btn-space to put a space between the two buttons {% endcomment %} .btn-space { margin-right: 12px; } </style> <!-- ############################################################# --> <h1>Events </h1> <p><a href="create" role="button" id="btnFA" class="btn btn-primary"> <i class="fas fa-plus-circle"></i> Add </a> </p> <!-- This message is for the case where the user requested a delete and now we're returning to the table --> <!-- It is a django alert --> {% if messages %} {% for message in messages %} <!-- loop through just in case there's more than one message --> <div class="alert alert-success" role="alert"> <!-- wrap the django alert in bootstrap --> {{ message }} </div> {% endfor %} {% endif %} <p>Click to reset by date added: <button onclick="redirect(2)">Reset</button></p> <table id="myTable" class="table table-sm table-striped table-bordered" style="font-size: 12px"> <tr class="d-flex"> <td class="col-1"><button id="toggle" onclick=" sortTable(0)">Company</button></td> <td><button id="toggle" onclick="sortTable(1)">Engine</button></td> <td><button id="toggle" onclick="sortTable(2)">Date</button></td> <td><button id="toggle" onclick="sortTable(3)">Category</button></td> <td><button id="toggle" onclick="sortTable(4)">Description</button></td> <td><button id="toggle" onclick="sortTable(5)">Reason</button></td> <td><button id="toggle" onclick="sortTable(6)">Assess Date</button></td> <td><button id="toggle" onclick="sortTable(7)">Outcome</button></td> <td>Change </td> </tr> {% for record in get_everything %} <tr class="d-flex"> <td class="col-1"> {{ record.company }} </td> <td> {{ record.engine }}</td> <td> {{ record.date }}</td> <td> {{ record.category }}</td> <td style="word-wrap: break-word; max-width: 140px"> {{ record.description | urlize }}</td> <td> {{ record.reason | urlize }}</td> <td> {{ record.assess_date }}</td> <td>{{ record.outcome }}</td> <td> <!-- NOTE ABOUT THE FORMS BELOW: I wanted to align the trash and edit button next to each other. The way I did that was by using float: right in the button styles. Notice the span below where I clear the two floats.--> <!-- FIRST FORM IS FOR EDIT --> <form action = "update" method="get" > <div> <button style="float: right;" type="submit" name="recordtobechanged" value={{record.id}} id="btnFA" class="btn btn-primary btn-xs"> <i class="fas fa-edit"></i> Edit </button> </div> </form> <!-- SECOND FORM IS FOR TRASH --> <!-- #TODO: Replace below with a better confirmation alert --> <form action="delete" method="GET" onSubmit="return confirm('Are you sure you wish to delete the record?');" > <div> <button style="float: right;" type="submit" name="recordtobedeleted" value={{ record.id }} id="btnFA" class="btn btn-danger btn-xs btn-space"> <i class="fas fa-trash-alt"></i> Trash </button> </div> </form> </td> </tr> {% endfor %} </table> <span style="clear:both"></span> <!-- This clears the two floats --> <p><a href="create" role="button" id="btnFA" class="btn btn-primary"> <i class="fas fa-plus-circle"></i> Add </a> </p> <script> function sortTable(whichcolumn) { var change_direction = document.getElementById("toggle"); if (change_direction.value==="forward") change_direction.value = "backward"; else change_direction.value = "forward"; var table, rows, switching, i, x, y, shouldSwitch; table = document.getElementById("myTable"); switching = true; /*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")[whichcolumn]; y = rows[i + 1].getElementsByTagName("TD")[whichcolumn]; //check if the two rows should switch place: if (change_direction.value === 'backward') { if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) { //if so, mark as a switch and break the loop: shouldSwitch = true; break; } } else { 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; } } } </script> <script> function redirect() { window.location.assign('list') } </script> {% endblock content %}