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

95
templates/book.html
View File

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