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

fixed add/rem author funtionality for bs5 and converted to svg icons away from fontawesome

Browse Source
This commit is contained in:
Damien De Paoli
2022-07-04 22:25:35 +10:00
parent 419eda9c33
commit c31ae71dee
8 changed files with 85 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
BUGs
View File

@@ -1,18 +1,14 @@
### fix to get this working with bs 5... ### fix to get this working with bs 5...
editing a book needs to use input groups
+/- buttons (add/rem say authors) are in wrong spot / input-group
get rid of font-awesome and use bootstrap5 icons
upgrade bootstrap, dataTables, etc. #### BUGS (next-21)
#### BUGS (next-20)
### DB/back-end ### DB/back-end
### UI not updating after DB change: ### UI not updating after DB change:
BUG-3: alter a condition, covertype, etc. and its not in drop-down list (even though db look via index is correct, e.g books.html shows updated covertype) BUG-3: alter a condition, covertype, etc. and its not in drop-down list (even though db look via index is correct, e.g books.html shows updated covertype)
BUG-7: if you remove a series from a book, it won't appear in the series drop-down if it is the first 'missing' book in that series -- either reset the list, or show all series always? BUG-7: if you remove a series from a book, it won't appear in the series drop-down if it is the first 'missing' book in that series -- either reset the list, or show all series always?
BUG-20: broken gui with bs5:
* series add/rem needs to lose divs inside divs of input groups (and templ)
### ordering of data in UI: ### ordering of data in UI:
BUG-6: author,series, etc. do not have explicit ordering like sub-books... sort of irritating / needs code and DB fix BUG-6: author,series, etc. do not have explicit ordering like sub-books... sort of irritating / needs code and DB fix

2
README
View File

@@ -52,3 +52,5 @@ Maybe:
TODO-20: ORM all books load is slow TODO-20: ORM all books load is slow
- should I lazy load all books (ajax the 2nd->last pages in, or not use ORM, and do a quick db.execute()....) - should I lazy load all books (ajax the 2nd->last pages in, or not use ORM, and do a quick db.execute()....)
TODO-21: allow a way to add a book as a child of another existing book (opposite of rem_sub_book) TODO-21: allow a way to add a book as a child of another existing book (opposite of rem_sub_book)
TODO-22: upgrade bootstrap, dataTables, etc.

1
main.py
View File

@@ -745,7 +745,6 @@ def add_books_to_loan(id):
add_id=int(re.findall( '\d+', field )[0]) add_id=int(re.findall( '\d+', field )[0])
try: try:
db.engine.execute("insert into book_loan_link (book_id, loan_id) values ( {}, {} )".format( add_id, id )) db.engine.execute("insert into book_loan_link (book_id, loan_id) values ( {}, {} )".format( add_id, id ))
print("insert into book_loan_link (book_id, loan_id) values ( {}, {} )".format( add_id, id ))
db.session.commit() db.session.commit()
except SQLAlchemyError as e: except SQLAlchemyError as e:
st.SetAlert("danger") st.SetAlert("danger")

95
templates/book.html
View File

@@ -4,7 +4,11 @@
{# use tmpl-series-div as a template & keep it hidden always #} {# use tmpl-series-div as a template & keep it hidden always #}
<div id="tmpl-series-div" class="col input-group" style="display:none"> <div id="tmpl-series-div" class="col input-group" style="display:none">
<div id="series-minus-div-NUM" class="input-group-prepend"> <div id="series-minus-div-NUM" class="input-group-prepend">
<button id="series-minus-but-NUM" class="btn btn-outline-danger" type="button"><i class="fas fa-minus"></i></button> <button id="series-minus-but-NUM" class="btn btn-outline-danger" type="button">
<svg width="22" height="22" fill="currentColor">
<use xlink:href="{{url_for('static', filename='icons.svg')}}#minus"/>
</svg>
</button>
</div> </div>
<input type="hidden" id="bsl-book_id-NUM" name="bsl-book_id-NUM" value="{{books.id}}"> <input type="hidden" id="bsl-book_id-NUM" name="bsl-book_id-NUM" value="{{books.id}}">
<span class="form-control col-2">Book&nbsp;</span> <span class="form-control col-2">Book&nbsp;</span>
@@ -16,7 +20,9 @@
{% endfor %} {% endfor %}
</select> </select>
<div id="series-plus-div-NUM" class="input-group-append"> <div id="series-plus-div-NUM" class="input-group-append">
<button id="series-plus-but-NUM" class="btn btn-outline-success" type="button" onClick="AddBookToSeries()"><i class="fas fa-plus"></i></button> <button id="series-plus-but-NUM" class="btn btn-outline-success" type="button" onClick="AddBookToSeries()">
<svg width="22" height="22" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#plus"/></svg>
</button>
</div> </div>
</div id="tmpl-series-div"> </div id="tmpl-series-div">
@@ -89,7 +95,9 @@ function ConfirmRemoveThisSubs_ParentAndSubsFromSeries(pid,bid,rem)
} }
function SeriesButPlus(num) { function SeriesButPlus(num) {
return '<div id="series-plus-div'+num+'" class="input-group-append"><button id="series-plus-but-'+num+'" class="btn btn-outline-success" type="button" onClick="AddBookToSeries()"><i class="fas fa-plus"></i></button></div>' return '<div id="series-plus-div'+num+'" class="input-group-append"><button id="series-plus-but-'+num+'" class="btn btn-outline-success" type="button" onClick="AddBookToSeries()">
<svg width="22" height="22" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#plus"/></svg>
</button></div>'
} }
function AddBookToSeries() { function AddBookToSeries() {
@@ -172,27 +180,32 @@ function RemoveBookFromSeries(sid) {
function RemoveAuthorFromBook(num) { function RemoveAuthorFromBook(num) {
console.log("remove an author at slot: " + num ) console.log("remove an author at slot: " + num )
$('#auth-div-'+num).remove() $('#author-'+num).remove()
$('#author-rem-'+num).remove()
} }
function AddAuthorToBook(num) { function AddAuthorToBook(num) {
console.log("insert a new author at slot: " + num ) console.log("insert a new author at slot: " + num )
div = ` div = `
<div id="auth-div-NUM" class="col input-group px-0"> <button id="author-rem-NUM" class="btn btn-outline-danger input-group-append" type="button" onClick="RemoveAuthorFromBook(NUM)">
<div class="input-group-prepend"> <svg width="22" height="22" fill="currentColor">
<button class="btn btn-outline-danger" type="button" onClick="RemoveAuthorFromBook(NUM)"><i class="fas fa-minus"></i></button> <use xlink:href="{{url_for('static', filename='icons.svg')}}#minus"/>
</div> </svg>
</button>
<select class="form-select" name="author-NUM" id="author-NUM"> <select class="form-select" name="author-NUM" id="author-NUM">
{% for auth in author_list %} {% for auth in author_list %}
{% set aname=auth.surname+", "+auth.firstnames %} {% set aname=auth.surname+", "+auth.firstnames %}
<option value="{{auth.id}}">{{aname}}</option> <option value="{{auth.id}}">{{aname}}</option>
{% endfor %} {% endfor %}
</select> </select>
</div>
` `
div=div.replace( /NUM/g, num ) div=div.replace( /NUM/g, num )
$('#auth-div-'+(num-1)).after( div ) $('#author-plus').prev().after(div)
new_add_func_str='AddAuthorToBook('+(num+1)+')' new_add_func_str='AddAuthorToBook('+(num+1)+')'
$('#author-plus').attr( 'onclick', new_add_func_str ) $('#author-plus').attr( 'onclick', new_add_func_str )
$('#author-rem-'+num).hover(
function() { $('#author-'+num).prop( 'style', 'color:red' ) },
function() { $('#author-'+num).prop( 'style', '' ) } )
} }
</script> </script>
@@ -218,8 +231,7 @@ function AddAuthorToBook(num) {
</div> </div>
{% endif %} {% endif %}
{% for key in keys %} {% for key in keys %}
<div class="form-row"> <div class="form-row input-group">
<div class="input-group">
<label for="{{key}}" class="input-group-text col-2 justify-content-end">{{key}}:</label> <label for="{{key}}" class="input-group-text col-2 justify-content-end">{{key}}:</label>
{% if key == "genre" %} {% if key == "genre" %}
<div class="row col-10"> <div class="row col-10">
@@ -237,16 +249,16 @@ function AddAuthorToBook(num) {
{% endfor %} {% endfor %}
</div> </div>
{% elif key == "author" %} {% elif key == "author" %}
<div class="form-row col mx-0">
{% set cnt = namespace(idx=0) %} {% set cnt = namespace(idx=0) %}
{% for objects in books[key] %} {% for objects in books[key] %}
<div id="auth-div-{{cnt.idx}}" class="col input-group px-0">
{% if cnt.idx > 0 %} {% if cnt.idx > 0 %}
<div class="input-group-prepend"> <button id="author-rem-{{cnt.idx}}" class="btn btn-outline-danger input-group-append" type="button" onClick="RemoveAuthorFromBook({{cnt.idx}})">
<button class="btn btn-outline-danger" type="button" onClick="RemoveAuthorFromBook({{cnt.idx}})"><i class="fas fa-minus"></i></button> <svg width="22" height="22" fill="currentColor">
</div> <use xlink:href="{{url_for('static', filename='icons.svg')}}#minus"/>
</svg>
</button>
{% endif %} {% endif %}
<select class="form-select" name="author-{{cnt.idx}}" id="author-{{cnt.idx}}"> <select class="form-select input-group-append" name="author-{{cnt.idx}}" id="author-{{cnt.idx}}">
{% for auth in author_list %} {% for auth in author_list %}
{% set aname=auth.surname+", "+auth.firstnames %} {% set aname=auth.surname+", "+auth.firstnames %}
<option value="{{auth.id}}" <option value="{{auth.id}}"
@@ -256,25 +268,20 @@ function AddAuthorToBook(num) {
>{{aname}}</option> >{{aname}}</option>
{% endfor %} {% endfor %}
</select> </select>
</div class="col">
{% set cnt.idx = cnt.idx+1 %} {% set cnt.idx = cnt.idx+1 %}
{% endfor %} {% endfor %}
{% if cnt.idx == 0 %} {% if cnt.idx == 0 %}
<div id="auth-div-{{cnt.idx}}" class="col input-group px-0"> <select class="form-select input-group-append" name="author-{{cnt.idx}}" id="author-{{cnt.idx}}">
<select class="form-select" name="author-{{cnt.idx}}" id="author-{{cnt.idx}}">
{% for auth in author_list %} {% for auth in author_list %}
{% set aname=auth.surname+", "+auth.firstnames %} {% set aname=auth.surname+", "+auth.firstnames %}
<option value="{{auth.id}}">{{aname}}</option> <option value="{{auth.id}}">{{aname}}</option>
{% endfor %} {% endfor %}
</select> </select>
</div class="col">
{% endif %} {% endif %}
<div class="input-group-append"> <button id="author-plus" class="btn btn-outline-success input-group-append" type="button" onClick="AddAuthorToBook({{cnt.idx}})">
<button id="author-plus" class="btn btn-outline-success" type="button" onClick="AddAuthorToBook({{cnt.idx}})"><i class="fas fa-plus"></i></button> <svg width="22" height="22" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#plus"/></svg>
</div> </button>
</div class="form-row">
{% else %} {% else %}
<div class="col">
{% set rows=4 %} {% set rows=4 %}
{% if key == "notes" %} {% if key == "notes" %}
{% set rows=2 %} {% set rows=2 %}
@@ -287,14 +294,12 @@ function AddAuthorToBook(num) {
<input type="hidden" name="{{key}}" value="{{book_form[key].data}}"> <input type="hidden" name="{{key}}" value="{{book_form[key].data}}">
{% elif key == 'publisher' or key == 'owned' or key == 'covertype' {% elif key == 'publisher' or key == 'owned' or key == 'covertype'
or key == 'condition' or key == 'rating' %} or key == 'condition' or key == 'rating' %}
{{book_form[key](class="form-select" )}} {{book_form[key](class="form-select input-group-append" )}}
{% else %} {% else %}
{{book_form[key](class="form-control", rows=rows )}} {{book_form[key](class="form-control input-group-append", rows=rows )}}
{% endif %} {% endif %}
</div class="col">
{% endif %} {% endif %}
</div class="input-group"> </div class="form-row input-group">
</div class="form-row">
{% endfor %} {% endfor %}
<div id="series_row" class="form-row"> <div id="series_row" class="form-row">
<label for="series" class="col-2 col-form-label">Series:</label> <label for="series" class="col-2 col-form-label">Series:</label>
@@ -305,7 +310,9 @@ function AddAuthorToBook(num) {
<div id="series-div-0" class="form-row col mx-0 input-group" style="display:none"> <div id="series-div-0" class="form-row col mx-0 input-group" style="display:none">
<span class="form-control input-group-text bg-white"> </span> <span class="form-control input-group-text bg-white"> </span>
<div id="series-plus-div-0" class="input-group-append"> <div id="series-plus-div-0" class="input-group-append">
<button id="series-plus-but-0" class="btn btn-outline-success" type="button" onClick="AddBookToSeries()"><i class="fas fa-plus"></i></button> <button id="series-plus-but-0" class="btn btn-outline-success" type="button" onClick="AddBookToSeries()">
<svg width="22" height="22" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#plus"/></svg>
</button>
</div> </div>
</div id="series-div-0" class="form-row col mx-0 input-group"> </div id="series-div-0" class="form-row col mx-0 input-group">
{% for s in books.series %} {% for s in books.series %}
@@ -322,7 +329,9 @@ function AddAuthorToBook(num) {
<div id="series-minus-div-{{loop.index}}" class="input-group-prepend disabled" > <div id="series-minus-div-{{loop.index}}" class="input-group-prepend disabled" >
<button id="series-minus-but-{{loop.index}}" class="btn btn-outline-danger {{dsiabled}}" {{disabled}} type="button" <button id="series-minus-but-{{loop.index}}" class="btn btn-outline-danger {{dsiabled}}" {{disabled}} type="button"
onClick="RemoveBookFromSeries('series-div-{{loop.index}}')"> onClick="RemoveBookFromSeries('series-div-{{loop.index}}')">
<i class="fas fa-minus"></i> <svg width="22" height="22" fill="currentColor">
<use xlink:href="{{url_for('static', filename='icons.svg')}}#minus"/>
</svg>
</button> </button>
</div> </div>
<div class="form-control input-group-text bg-white"> <div class="form-control input-group-text bg-white">
@@ -332,7 +341,9 @@ function AddAuthorToBook(num) {
{% set hiddens.txt=hiddens.txt+"<input type='hidden' name='bsl-book_num-{}' value='PARENT'>".format(loop.index) %} {% set hiddens.txt=hiddens.txt+"<input type='hidden' name='bsl-book_num-{}' value='PARENT'>".format(loop.index) %}
<div id="series-minus-div-{{loop.index}}" class="input-group-prepend"> <div id="series-minus-div-{{loop.index}}" class="input-group-prepend">
<button id="series-minus-but-{{loop.index}}" class="btn btn-outline-danger" type="button" onClick="RemoveBookFromSeries('series-div-{{loop.index}}')"> <button id="series-minus-but-{{loop.index}}" class="btn btn-outline-danger" type="button" onClick="RemoveBookFromSeries('series-div-{{loop.index}}')">
<i class="fas fa-minus"></i> <svg width="22" height="22" fill="currentColor">
<use xlink:href="{{url_for('static', filename='icons.svg')}}#minus"/>
</svg>
</button> </button>
</div> </div>
<div class="form-control input-group-text bg-white"> <div class="form-control input-group-text bg-white">
@@ -342,7 +353,7 @@ function AddAuthorToBook(num) {
{% if books.series|length == loop.index %} {% if books.series|length == loop.index %}
<div id="series-plus-div-{{loop.index}}" class="input-group-append"> <div id="series-plus-div-{{loop.index}}" class="input-group-append">
<button id="series-plus-but-{{loop.index}}" class="btn btn-outline-success" type="button" onClick="AddBookToSeries()"> <button id="series-plus-but-{{loop.index}}" class="btn btn-outline-success" type="button" onClick="AddBookToSeries()">
<i class="fas fa-plus"></i> <svg width="22" height="22" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#plus"/></svg>
</button> </button>
</div> </div>
{% endif %} {% endif %}
@@ -354,7 +365,9 @@ function AddAuthorToBook(num) {
<div id="series-div-0" class="form-row col mx-0 input-group"> <div id="series-div-0" class="form-row col mx-0 input-group">
<span class="form-control input-group-text bg-white"> </span> <span class="form-control input-group-text bg-white"> </span>
<div id="series-plus-div-0" class="input-group-append"> <div id="series-plus-div-0" class="input-group-append">
<button id="series-plus-but-0" class="btn btn-outline-success" type="button" onClick="AddBookToSeries()"><i class="fas fa-plus"></i></button> <button id="series-plus-but-0" class="btn btn-outline-success" type="button" onClick="AddBookToSeries()">
<svg width="22" height="22" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#plus"/></svg>
</button>
</div> </div>
</div id="series-div-0" class="form-row col mx-0 input-group"> </div id="series-div-0" class="form-row col mx-0 input-group">
{% endif %} {% endif %}
@@ -435,8 +448,14 @@ function AddAuthorToBook(num) {
{{CheckSeriesChange.removing_series|safe}} ) {{CheckSeriesChange.removing_series|safe}} )
{% endif %} {% endif %}
{% endif %} {% endif %}
{% set cnt = namespace(idx=1) %}
{% for authors in books['author'] %}
$('#author-rem-{{cnt.idx}}').hover(
function() { $('#author-{{cnt.idx}}').prop( 'style', 'color:red' ) },
function() { $('#author-{{cnt.idx}}').prop( 'style', '' ) } )
{% set cnt.idx = cnt.idx+1 %}
{% endfor %}
} ) } )
</script> </script>
{% endblock script_content %} {% endblock script_content %}
{% endif %} {% endif %}

9
templates/books.html
View File

@@ -54,11 +54,14 @@
{% else %} {% else %}
<td align="center"> <td align="center">
{% if cond == "Good" %} {% if cond == "Good" %}
<i class="fas fa-book" style="color:black"></i> <svg width="22" height="22" fill="black">
<use xlink:href="{{url_for('static', filename='icons.svg')}}#book"/></svg>
{% elif cond == "Average" %} {% elif cond == "Average" %}
<i class="fas fa-book" style="color:orange"></i> <svg width="22" height="22" fill="orange">
<use xlink:href="{{url_for('static', filename='icons.svg')}}#book"/></svg>
{% elif cond == "Needs Replacing" %} {% elif cond == "Needs Replacing" %}
<i class="fas fa-book" style="color:red"></i> <svg width="22" height="22" fill="red">
<use xlink:href="{{url_for('static', filename='icons.svg')}}#book"/></svg>
{% endif %} {% endif %}
</td> </td>
{% endif %} {% endif %}

10
templates/books_for_series.html
View File

@@ -16,7 +16,10 @@
success: function(data){ success: function(data){
$('#books_for_series_bit').html(data); } $('#books_for_series_bit').html(data); }
} ); return false;"> } ); return false;">
<i class="fas fa-angle-double-up" style="font-size:10px"></i></button> <svg width="12" height="12" fill="currentColor">
<use xlink:href="{{url_for('static', filename='icons.svg')}}#caret-up-fill"/>
</svg>
</button>
<button name="move_button" value="down-{{book.id}}" id="down-{{book.id}}" class="btn btn-outline-primary btn-small" {{style}} <button name="move_button" value="down-{{book.id}}" id="down-{{book.id}}" class="btn btn-outline-primary btn-small" {{style}}
onClick="$.ajax({ onClick="$.ajax({
type: 'POST', url: '/books_for_series/{{series.id}}', type: 'POST', url: '/books_for_series/{{series.id}}',
@@ -24,7 +27,10 @@
success: function(data){ success: function(data){
$('#books_for_series_bit').html(data); } $('#books_for_series_bit').html(data); }
} ); return false;"> } ); return false;">
<i class="fas fa-angle-double-down" style="font-size:10px"></i></button> <svg width="12" height="12" fill="currentColor">
<use xlink:href="{{url_for('static', filename='icons.svg')}}#caret-down-fill"/>
</svg>
</button>
<a href="/book/{{book.id}}">{{book.title}}</a> <a href="/book/{{book.id}}">{{book.title}}</a>
</td> </td>
{% set num = SeriesBookNum( series.id, book.id ) %} {% set num = SeriesBookNum( series.id, book.id ) %}

2
templates/login.html
View File

@@ -43,7 +43,7 @@
<div class="row px-3 my-5 col-6" style="border: 3px solid #5bc0de; border-radius: 15px;"> <div class="row px-3 my-5 col-6" style="border: 3px solid #5bc0de; border-radius: 15px;">
<h3 class="my-3 text-center" style="color: #5bc0de"> <h3 class="my-3 text-center" style="color: #5bc0de">
<svg width="64" height="64" fill="currentColor"><use xlink:href="{{url_for('static', filename='book.svg')}}#logo" /></svg>&nbsp;Book DB Login</h3> <svg width="64" height="64" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#logo" /></svg>&nbsp;Book DB Login</h3>
<form class="" method="POST"> <form class="" method="POST">
<div class="input-group"> <div class="input-group">
<label for="username" class="text-right input-group-text col-4 text-info">Username:</label> <label for="username" class="text-right input-group-text col-4 text-info">Username:</label>

10
templates/subbooks_for_book.html
View File

@@ -17,7 +17,10 @@
success: function(data){ success: function(data){
$('#sub_book_content').html(data); } $('#sub_book_content').html(data); }
} ); return false;"> } ); return false;">
<i class="fas fa-angle-double-up" style="font-size:10px"></i></button> <svg width="12" height="12" fill="currentColor">
<use xlink:href="{{url_for('static', filename='icons.svg')}}#caret-up-fill"/>
</svg>
</button>
{% set state="" %} {% set state="" %}
{% if loop.index == sub_books|length %} {% if loop.index == sub_books|length %}
{% set state="disabled" %} {% set state="disabled" %}
@@ -29,7 +32,10 @@
success: function(data){ success: function(data){
$('#sub_book_content').html(data); } $('#sub_book_content').html(data); }
} ); return false;"> } ); return false;">
<i class="fas fa-angle-double-down" style="font-size:10px"></i></button> <svg width="12" height="12" fill="currentColor">
<use xlink:href="{{url_for('static', filename='icons.svg')}}#caret-down-fill"/>
</svg>
</button>
<a href="/book/{{book.sub_book_id}}">{{book.title}}</a> <a href="/book/{{book.sub_book_id}}">{{book.title}}</a>
</td> </td>
<td>{{book.rating}}</td><td>{{book.author}}</td><td>{{book.year_published}}</td> <td>{{book.rating}}</td><td>{{book.author}}</td><td>{{book.year_published}}</td>