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>Actions</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 on separate lines. --> <!-- FIRST FORM IS FOR EDIT --> <form action = "update" method="get" > <div> <button style="float: center;" type="submit" name="recordtobechanged" value={{record.id}} id="btnFA" class="btn btn-primary btn-xs"> <i class="fas fa-edit"></i> Edit </button> </div> <br /> </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: center;" 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 redirect() { window.location.assign('list') } </script> {% endblock content %}