ddp/books
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

using font awesome, datatables, bootstrap and fixed so class attributes are serialized via marshmallow and it all works with jinja2 now

Browse Source
This commit is contained in:
Damien De Paoli
2020-11-04 19:26:36 +11:00
parent 3a42b944df
commit 2a7cbe5845
3 changed files with 67 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
templates/books.html
View File

@@ -8,37 +8,50 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css">
<script src="https://kit.fontawesome.com/9b4c7cf470.js" crossorigin="anonymous"></script>
</head>
<body>
<form method="POST" action="/">
<input type="text" name="title">
<input type="submit" value="Add">
</form>
{% if books is not mapping %}
<h3>All Books</h1>
{% if books is iterable %}
<table id="book_table" class="table table-striped table-sm" data-toolbar="#toolbar" data-search="true">
<thead>
<tr class="thead-light"><th>Title</th><th>Author</th></tr>
<tr class="thead-light"><th>Title</th><th>Author</th><th>Publisher</th><th>Condition</th><th>Owned</th><th>Covertype</th></tr>
</thead>
<tbody>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
{% for book in books %}
<tr><td data-sort="{{book.id}}">{{book.title}}</td><td>{{ book.author[0]['surname'] }}, {{ book.author[0]['firstnames'] }}</td></tr>
<tr>
<td data-sort="{{book.id}}"><a href="/book/{{book.id}}">{{book.title}}</a></td>
<td>{{ book.author[0]['surname'] }}, {{book.author[0]['firstnames']}}</td>
<td>{{ book.publisher}}</td>
<td align="center">
{% if book.condition == "Good" %}
<i class="fas fa-book" style="color:black"></i>
{% elif book.condition == "Average" %}
<i class="fas fa-book" style="color:orange"></i>
{% else %}
<i class="fas fa-book" style="color:red"></i>
{% endif %}
</td>
<td>{{ book.owned}}</td>
<td>{{ book.covertype}}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<h3>Book</h1>
<p>{{books.title}}, {{ books.author[0]['surname'] }}, {{books.author[0]['firstnames']}} </p>
{% endif %}
<!-- code to get bootstrap & bootstrap datatable to work -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function() {
$('#book_table').DataTable();
$('#book_table').DataTable( { 'pageLength': 25 } );
} );
</script>
</body>