From 6a72c6d9dd9eae801e7bdb7318cc935f1f6f2153 Mon Sep 17 00:00:00 2001
From: Damien De Paoli <ddp@depaoli.id.au>
Date: Thu, 24 Dec 2020 17:11:28 +1100
Subject: [PATCH] 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

---
 templates/book.html | 196 +++++++++++++++++++++++++-------------------
 1 file changed, 113 insertions(+), 83 deletions(-)

diff --git a/templates/book.html b/templates/book.html
index 0aa6349..9cdfc7d 100644
--- a/templates/book.html
+++ b/templates/book.html
@@ -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">