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

add/remove series div/input-group fixup to work with bootstrap5

Browse Source
This commit is contained in:
Damien De Paoli
2022-07-06 22:29:32 +10:00
parent c31ae71dee
commit 32e0edc46c
2 changed files with 39 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
BUGs
View File

@@ -7,8 +7,6 @@
### 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

97
templates/book.html
View File

@@ -1,29 +1,26 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block main_content %} {% block main_content %}
{# 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"> <button id="series-minus-but-NUM" class="btn btn-outline-danger input-group-prepend" type="button">
<button id="series-minus-but-NUM" class="btn btn-outline-danger" type="button"> <svg width="22" height="22" fill="currentColor">
<svg width="22" height="22" fill="currentColor"> <use xlink:href="{{url_for('static', filename='icons.svg')}}#minus"/>
<use xlink:href="{{url_for('static', filename='icons.svg')}}#minus"/> </svg>
</svg> </button>
</button>
</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 input-group-text">Book&nbsp;</span>
<input type="text" id="bsl-book_num-NUM" name="bsl-book_num-NUM" class="form-control col-1" placeholder="number"> <input type="text input-group-text" id="bsl-book_num-NUM" name="bsl-book_num-NUM" class="form-control col-1" placeholder="number">
<span class="form-control col-1">&nbsp;of&nbsp;</span> <span class="form-control col-1 input-group-text">&nbsp;of&nbsp;</span>
<select class="form-select col" id="bsl-series_id-NUM" name="bsl-series_id-NUM"> <select class="form-select col" id="bsl-series_id-NUM" name="bsl-series_id-NUM">
{% for s in poss_series_list %} {% for s in poss_series_list %}
<option value="{{s.id}}">{{s.title}}</option> <option value="{{s.id}}">{{s.title}}</option>
{% endfor %} {% endfor %}
</select> </select>
<div id="series-plus-div-NUM" class="input-group-append"> <button id="series-plus-but-NUM" class="btn btn-outline-success input-group-append" type="button" onClick="AddBookToSeries()">
<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>
<svg width="22" height="22" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#plus"/></svg> </button>
</button>
</div>
</div id="tmpl-series-div"> </div id="tmpl-series-div">
<script> <script>
@@ -94,12 +91,6 @@ function ConfirmRemoveThisSubs_ParentAndSubsFromSeries(pid,bid,rem)
$('#RPS-one').attr( 'onClick', "$('#dbox').modal('hide') ; $.post( '/rem_parent_books_from_series/" +bid + "' ) ; window.location='/book/"+ bid + "'" ) $('#RPS-one').attr( 'onClick', "$('#dbox').modal('hide') ; $.post( '/rem_parent_books_from_series/" +bid + "' ) ; window.location='/book/"+ bid + "'" )
} }
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()">
<svg width="22" height="22" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#plus"/></svg>
</button></div>'
}
function AddBookToSeries() { function AddBookToSeries() {
// Read the Number from that DIV's ID (i.e: 3 from "series-div-3") -- could // Read the Number from that DIV's ID (i.e: 3 from "series-div-3") -- could
@@ -112,15 +103,16 @@ console.log( "last_div is=" + last_div.prop('id') )
// adding means at least one, so remove filler (even if its removed already) & remove active plus div, new_div below will have active plus // 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(); $('#series-div-0').hide();
last_div.find('#series-plus-div-'+num).remove() last_div.find('#series-plus-but-'+num).prop( 'disabled', true )
last_div.find('#series-plus-but-'+num).addClass( 'disabled' )
// if we have more than 1 series, lets fix the buttons (haven't inc'd num yet) // if we have more than 1 series, lets fix the buttons (haven't inc'd num yet)
if( num > 0 ) { if( num > 0 ) {
// disable minus button and hide plus button in old div // disable minus and plus button in 'active' row
last_div.find('#series-minus-but-'+num).addClass('disabled') last_div.find('#series-minus-but-'+num).addClass('disabled')
last_div.find('#series-minus-but-'+num).prop('disabled', true ) 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-but-'+num).addClass('disabled')
last_div.find('#series-plus-div'+num).remove() last_div.find('#series-plus-but-'+num).prop('disabled', true )
console.log( "reset buttons on last_div is=" + last_div.prop('id') ) console.log( "reset buttons on last_div is=" + last_div.prop('id') )
} }
@@ -134,9 +126,7 @@ console.log( "reset buttons on last_div is=" + last_div.prop('id') )
new_div.find('#bsl-book_id-NUM').prop('name', 'bsl-book_id-'+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-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('#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-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').prop('id', 'series-minus-but-'+num )
new_div.find('#series-minus-but-'+num).attr('onclick', "RemoveBookFromSeries('series-div-"+num+"')" ) new_div.find('#series-minus-but-'+num).attr('onclick', "RemoveBookFromSeries('series-div-"+num+"')" )
@@ -174,7 +164,8 @@ function RemoveBookFromSeries(sid) {
var num = parseInt( div.prop("id").match(/\d+/g), 10 ); var num = parseInt( div.prop("id").match(/\d+/g), 10 );
div.find('#series-minus-but-'+num).removeClass('disabled') div.find('#series-minus-but-'+num).removeClass('disabled')
div.find('#series-minus-but-'+num).prop('disabled', false ) div.find('#series-minus-but-'+num).prop('disabled', false )
div.append( SeriesButPlus( (num+1) ) ) div.find('#series-plus-but-'+num).removeClass('disabled')
div.find('#series-plus-but-'+num).prop('disabled', false )
} }
} }
@@ -309,11 +300,9 @@ function AddAuthorToBook(num) {
{# empty-series-dev - filler -- we use 0 AND use that number to keep track of how many series divs for add/remove #} {# 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"> <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"> <button id="series-plus-but-0" class="btn btn-outline-success input-group-append" type="button" onClick="AddBookToSeries()">
<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>
<svg width="22" height="22" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#plus"/></svg> </button>
</button>
</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 %}
{% 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-book_id-{}' value='{}'>".format(loop.index, books.id) %}
@@ -326,49 +315,41 @@ function AddAuthorToBook(num) {
{% else %} {% else %}
{% set disabled="" %} {% set disabled="" %}
{% endif %} {% 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 input-group-prepend {{disabled}}" {{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}}')">
<svg width="22" height="22" fill="currentColor"> <svg width="22" height="22" fill="currentColor">
<use xlink:href="{{url_for('static', filename='icons.svg')}}#minus"/> <use xlink:href="{{url_for('static', filename='icons.svg')}}#minus"/>
</svg> </svg>
</button> </button>
</div> <span class="form-control input-group-text bg-white">
<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> Book {{ SeriesBookNum( s.id, books.id ) }} of {{s.num_books}} in&nbsp; <a href=/series/{{s.id}}>{{s.title}}</a>
</div> </span>
{% else %} {% else %}
{% 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"> <button id="series-minus-but-{{loop.index}}" class="btn btn-outline-danger input-group-prepend" 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}}')"> <svg width="22" height="22" fill="currentColor">
<svg width="22" height="22" fill="currentColor"> <use xlink:href="{{url_for('static', filename='icons.svg')}}#minus"/>
<use xlink:href="{{url_for('static', filename='icons.svg')}}#minus"/> </svg>
</svg> </button>
</button> <span class="form-control input-group-text bg-white">
</div>
<div class="form-control input-group-text bg-white">
Contains books in&nbsp; <a href='/series/{{s.id}}'>{{s.title}}</a> Contains books in&nbsp; <a href='/series/{{s.id}}'>{{s.title}}</a>
</div> </span>
{% endif %} {% endif %}
<button id="series-plus-but-{{loop.index}}" class="btn btn-outline-success input-group-append {{disabled}}" {{disabled}} type="button" onClick="AddBookToSeries()">
<svg width="22" height="22" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#plus"/></svg>
</button>
{% if books.series|length == loop.index %} {% 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()">
<svg width="22" height="22" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#plus"/></svg>
</button>
</div>
{% endif %} {% endif %}
</div id="series-div-{{loop.index}}"> </div id="series-div-{{loop.index}}">
{% endfor %} {% endfor %}
{% set show_div_0 = 0 %} {% set show_div_0 = 0 %}
{% else %} {% else %}
{# empty-series-dev - filler -- we use 0 AND use that number to keep track of how many series divs for add/remove #} {# 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"> <div id="series-div-0" class="col 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"> <button id="series-plus-but-0" class="btn btn-outline-success input-group-append" type="button" onClick="AddBookToSeries()">
<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>
<svg width="22" height="22" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#plus"/></svg> </button>
</button>
</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 %}
</div id="series_row"> </div id="series_row">