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

okay, I have series add/remove working with crazy bootstrap input-groups and jscript/jquery adding/modifying/removing divs on the fly. It works but its way complex.... Sadly, author is not properly in the input-group and should be fixed, and may well then need more crazy on-the-fly updating of divs/buttons, etc. to move plus/minus buttons into/out of the input-group appropriately

Browse Source
This commit is contained in:
Damien De Paoli
2020-12-24 17:11:28 +11:00
parent 2cf3f971a2
commit 6a72c6d9dd
1 changed files with 113 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
templates/book.html
View File

@@ -1,43 +1,71 @@
{% extends "base.html" %}
{% block main_content %}
{# 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>
</div>
<input type="hidden" id="bsl-book_id-NUM" name="bsl-book_id-NUM" value="{{books.id}}">
<span class="form-control col-lg-2">Book&nbsp;</span>
<input type="text" id="bsl-book_num-NUM" name="bsl-book_num-NUM" class="form-control col-lg-1" placeholder="number">
<span class="form-control col-lg-1">&nbsp;of&nbsp;</span>
<select class="form-control col" id="bsl-series_id-NUM" name="bsl-series_id-NUM">
{% for s in poss_series_list %}
<option value="{{s.id}}">{{s.title}}</option>
{% 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>
</div>
</div id="tmpl-series-div">
<script>
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>'
}
function AddBookToSeries() {
console.log("add Book to series")
// Read the Number from that DIV's ID (i.e: 3 from "series-div-3") -- could
// also be the template (series-div-0), thats ok too
// also be the filler (series-div-0), thats ok too
var last_div = $('div[id^="series-div-"]:last');
var num = parseInt( last_div.prop("id").match(/\d+/g), 10 );
console.log( "num=" + num )
console.log( "last_div is=" + last_div.prop('id') )
// Is it shown? IF yes, copy / add a new one ELSE its the first one, so don't make another, just show it
$('#series_plus_only').hide();
num++
// if we have more than 1 series, lets fix the buttons
if( num > 1 ) {
// adding means at least one, so remove filler (even if its removed already) & remove active plus div, new_div below will have active plus
$('#series-div-0').hide();
last_div.find('#series-plus-div-'+num).remove()
// if we have more than 1 series, lets fix the buttons (haven't inc'd num yet)
if( num > 0 ) {
// disable minus button and hide plus button in old div
last_div.find('#series_minus_but').addClass('disabled')
last_div.find('#series_minus_but').prop('disabled', true )
last_div.find('#series_plus_but_div').hide()
last_div.find('#series-minus-but-'+num).addClass('disabled')
last_div.find('#series-minus-but-'+num).prop('disabled', true )
//remove completely this plus button so it draws correctly in the input group
last_div.find('#series-plus-div'+num).remove()
console.log( "reset buttons on last_div is=" + last_div.prop('id') )
}
// clone the template
var new_div = $('#series-div-0').clone()
var new_div = $('#tmpl-series-div').clone()
num++
// reset id/names to new series-div- created (for id on div, name on select
// for series_id and input text for book_num)
// for series_id and input text for book_num, and plus/minus divs&buttons)
new_div.prop('id', 'series-div-'+num );
new_div.find('#series_minus_but').attr('onclick', "RemoveBookFromSeries('series-div-"+num+"')" )
new_div.find('#bsl-book_id-NUM').prop('name', 'bsl-book_id-'+num )
new_div.find('#bsl-series_id-NUM').prop('name', 'bsl-series_id-'+num )
new_div.find('#bsl-book_num-NUM').prop('name', 'bsl-book_num-'+num )
new_div.find('#series-plus-div-NUM').prop('id', 'series-plus-div-'+num )
new_div.find('#series-plus-but-NUM').prop('id', 'series-plus-but-'+num )
new_div.find('#series-minus-div-NUM').prop('id', 'series-minus-div-'+num )
new_div.find('#series-minus-but-NUM').prop('id', 'series-minus-but-'+num )
new_div.find('#series-minus-but-'+num).attr('onclick', "RemoveBookFromSeries('series-div-"+num+"')" )
// insert new_div after the old div
last_div.after( new_div );
@@ -47,21 +75,25 @@ console.log( "reset buttons on last_div is=" + last_div.prop('id') )
function RemoveBookFromSeries(sid) {
console.log("remove Book from Series: " + sid )
$('#'+sid).remove()
var num = parseInt( sid.match(/\d+/g), 10 );
// remove the bsl data (its appended outside of div to avoid bootstrap issues
$('[name=bsl-book_id-'+num+']').remove()
$('[name=bsl-series_id-'+num+']').remove()
$('[name=bsl-book_num-'+num+']').remove()
if( sid == 'series-div-1' ) {
console.log("remove Book: and it was the only series, so hide series-div-1 and put 'plus / empty' div back" )
if( $('#series_plus_only').length == 0 ) {
new_div = $('#series_plus_only_tmpl').clone()
new_div.prop('id', 'series_plus_only')
$('#series-div-0').after( new_div )
}
$('#series_plus_only').show();
$('#series-div-0').show();
console.log("okay, there prob. is a div-0, but no plus button, need to add it back like below")
} else {
console.log("remove Book: and there are more than 1 'new' series (not in DB), so delete this one")
//now find 'last div still visible, re-enable its minus button and add back plus button
var div = $('div[id^="series-div-"]:last');
div.find('#series_minus_but').removeClass('disabled')
div.find('#series_minus_but').prop('disabled', false )
div.find('#series_plus_but_div').show()
var num = parseInt( div.prop("id").match(/\d+/g), 10 );
div.find('#series-minus-but-'+num).removeClass('disabled')
div.find('#series-minus-but-'+num).prop('disabled', false )
div.append( SeriesButPlus( (num+1) ) )
}
}
@@ -91,13 +123,6 @@ function AddAuthorToBook(num) {
}
</script>
<div id="series_plus_only_tmpl" class="col input-group px-0" style="display:none">
<span class="form-control"> </span>
<div id="series_plus_but_div" class="input-group-append">
<button class="btn btn-outline-success" type="button" onClick="AddBookToSeries()"><i class="fas fa-plus"></i></button>
</div>
</div>
{% set keys = [ 'title', 'author', 'publisher', 'genre', 'owned', 'covertype', 'condition', 'year_published', 'rating', 'notes', 'blurb' ] %}
<div class="container-fluid">
{% if message|length %}
@@ -193,62 +218,66 @@ function AddAuthorToBook(num) {
{% endfor %}
<div id="series_row" class="form-row">
<label for="series" class="col-lg-2 col-form-label">Series:</label>
<div class="form-row col mx-0">
{# use series-div-0 as a template & keep it hidden always #}
<div id="series-div-0" class="col input-group px-0" style="display:none">
<div class="input-group-prepend">
<button id="series_minus_but" class="btn btn-outline-danger" type="button"><i class="fas fa-minus"></i></button>
</div>
<input type="hidden" id="bsl-book_id-NUM" name="bsl-book_id-NUM" value="{{books.id}}">
<span class="form-control col-lg-2">Book&nbsp;</span>
<input type="text" id="bsl-book_num-NUM" name="bsl-book_num-NUM" class="form-control col-lg-1" placeholder="number">
<span class="form-control col-lg-1">&nbsp;of&nbsp;</span>
<select class="form-control col" id="bsl-series_id-NUM" name="bsl-series_id-NUM">
{% for s in poss_series_list %}
<option value="{{s.id}}">{{s.title}}</option>
{% endfor %}
</select>
<div id="series_plus_but_div" class="input-group-append">
<button class="btn btn-outline-success" type="button" onClick="AddBookToSeries()"><i class="fas fa-plus"></i></button>
</div>
</div id="series-div-0">
{# putting hidden inputs in between input-groups breaks formatting, so use this var to collect them and add just before form ends #}
{% set hiddens=namespace(txt='') %}
{% if books.series|length %}
{% for s in books.series %}
<div id="series-div-{{loop.index}}" class="col input-group px-0">
{% if SeriesBookNum( s.id, books.id ) %}
<div class="input-group-prepend">
<button class="btn btn-outline-danger" type="button" onClick="RemoveBookFromSeries('series-div-{{loop.index}}')"><i class="fas fa-minus"></i></button>
</div>
<div class="form-control">
Book {{ SeriesBookNum( s.id, books.id ) }} of {{s.num_books}} in <a href=/series/{{s.id}}>{{s.title}}</a>
</div>
<input type="hidden" name="bsl-book_num-{{loop.index}}" value={{SeriesBookNum( s.id, books.id )}}>
{% else %}
<div class="input-group-prepend">
<button class="btn btn-outline-danger" type="button" onClick="RemoveBookFromSeries('series-div-{{loop.index}}')"><i class="fas fa-minus"></i></button>
</div>
<div class="form-control">
Contains books in <a href='/series/{{s.id}}'>{{s.title}}</a>
</div>
<input type="hidden" name="bsl-book_num-{{loop.index}}" value="">
{% endif %}
<input type="hidden" name="bsl-book_id-{{loop.index}}" value={{books.id}}>
<input type="hidden" name="bsl-series_id-{{loop.index}}" value={{s.id}}>
</div id="series-div-{{loop.index}}>
{% endfor %}
<div id="series_plus_but_div" class="input-group-append">
<button class="btn btn-outline-success" type="button" onClick="AddBookToSeries()"><i class="fas fa-plus"></i></button>
</div>
{% else %}
<div id="series_plus_only" class="col input-group px-0">
<span class="form-control"> </span>
<div id="series_plus_but_div" class="input-group-append">
<button class="btn btn-outline-success" type="button" onClick="AddBookToSeries()"><i class="fas fa-plus"></i></button>
{# empty-series-dev - filler -- we use 0 AND use that number to keep track of how many series divs for add/remove #}
<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>
</div>
</div>
</div id="series-div-0" class="form-row col mx-0 input-group">
{% for s in books.series %}
{% set hiddens.txt=hiddens.txt+"<input type='hidden' name='bsl-book_id-{}' value='{}'>".format(loop.index, books.id) %}
{% set hiddens.txt=hiddens.txt+"<input type='hidden' name='bsl-series_id-{}' value='{}'>".format(loop.index,s.id) %}
<div id="series-div-{{loop.index}}" class="col input-group">
{% if SeriesBookNum( s.id, books.id ) %}
{% set hiddens.txt=hiddens.txt+"<input type='hidden' name='bsl-book_num-{}' value='{}'>".format(loop.index, SeriesBookNum( s.id, books.id )) %}
{% if books.series|length > loop.index %}
{% set disabled=" disabled" %}
{% else %}
{% set disabled="" %}
{% endif %}
<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>
</button>
</div>
<div class="form-control input-group-text bg-white">
Book {{ SeriesBookNum( s.id, books.id ) }} of {{s.num_books}} in&nbsp; <a href=/series/{{s.id}}>{{s.title}}</a>
</div>
{% else %}
<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>
</button>
</div>
<div class="form-control input-group-text bg-white">
Contains books in&nbsp; <a href='/series/{{s.id}}'>{{s.title}}</a>
</div>
{% endif %}
{% 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>
</button>
</div>
{% endif %}
</div id="series-div-{{loop.index}}">
{% endfor %}
{% set show_div_0 = 0 %}
{% else %}
{# empty-series-dev - filler -- we use 0 AND use that number to keep track of how many series divs for add/remove #}
<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>
</div>
</div id="series-div-0" class="form-row col mx-0 input-group">
{% endif %}
</div id="series_row" class="form-row col mx-0">
</div id="wwwww" class="form-row">
</div id="series_row">
{% if books.child_ref|length %}
<div class="form-row">
<label class="col-lg-2 col-form-label">Sub Books:</label>
@@ -267,6 +296,7 @@ function AddAuthorToBook(num) {
{% endif %}
</div class="form-row">
</div class="form-row">
{{ hiddens.txt|safe }}
</form>
{% if books.loan|length %}
<div class="col">