333 lines
14 KiB
HTML
333 lines
14 KiB
HTML
{% 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 </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"> of </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 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') )
|
|
|
|
// 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-'+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 = $('#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, and plus/minus divs&buttons)
|
|
new_div.prop('id', '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 );
|
|
new_div.show()
|
|
}
|
|
|
|
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" )
|
|
$('#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');
|
|
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) ) )
|
|
}
|
|
}
|
|
|
|
function RemoveAuthorFromBook(num) {
|
|
console.log("remove an author at slot: " + num )
|
|
$('#auth-div-'+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>
|
|
<select class="form-control" 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 )
|
|
new_add_func_str='AddAuthorToBook('+(num+1)+')'
|
|
$('#author-plus').attr( 'onclick', new_add_func_str )
|
|
}
|
|
</script>
|
|
|
|
{% set keys = [ 'title', 'author', 'publisher', 'genre', 'owned', 'covertype', 'condition', 'year_published', 'rating', 'notes', 'blurb' ] %}
|
|
<div class="container-fluid">
|
|
<div class="form-row col-lg-10"><h3 class="offset-lg-2">{{page_title}}</h3></div>
|
|
<div class="row">
|
|
<form role="form" class="form col-lg-10" action="" method="POST">
|
|
{{ book_form.id }}
|
|
{{ book_form.csrf_token }}
|
|
{% if b.parent|length %}
|
|
{{b.parent}}
|
|
<div class="form-row">
|
|
<label class="col-lg-2 col-form-label bg-secondary text-white">Parent Book:</label>
|
|
<div class="col">
|
|
<button disabled class="col btn btn-outline-primary">
|
|
<i><a href="/book/{{b.parent.id}}">{{b.parent.title}}</a></i>
|
|
</button>
|
|
</div>
|
|
<input type="hidden" name="parent_id" value="{{b.parent.id}}">
|
|
</div>
|
|
{% endif %}
|
|
{% for key in keys %}
|
|
<div class="form-row">
|
|
<label for="{{key}}" class="col-lg-2 col-form-label">{{key}}:</label>
|
|
{% if key == "genre" %}
|
|
<div class="form-row col-lg-10">
|
|
{% for genre in genre_list %}
|
|
<div class="form-control col" style="margin-left:5px;margin-right:-5px;">
|
|
<input id="genre-{{genre.id}}" name="genre-{{genre.id}}" type="checkbox"
|
|
{% for book_g in books.genre %}
|
|
{% if book_g['name'] == genre.name %}
|
|
checked
|
|
{% endif %}
|
|
{% endfor %}
|
|
></input>
|
|
<label style="display:inline" for="{{genre.name}}" class="col-form-label">{{genre.name}}</label>
|
|
</div>
|
|
{% 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>
|
|
{% endif %}
|
|
<select class="form-control" name="author-{{cnt.idx}}" id="author-{{cnt.idx}}">
|
|
{% for auth in author_list %}
|
|
{% set aname=auth.surname+", "+auth.firstnames %}
|
|
<option value="{{auth.id}}"
|
|
{% if books.author[cnt.idx].id == auth.id %}
|
|
selected
|
|
{% endif %}
|
|
>{{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-control" 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">
|
|
{% else %}
|
|
<div class="col">
|
|
{% set rows=4 %}
|
|
{% if key == "notes" %}
|
|
{% set rows=2 %}
|
|
{% endif %}
|
|
{% if b.parent|length and
|
|
(key == 'publisher' or key == 'owned' or key == 'covertype'
|
|
or key == 'condition' or key == 'blurb' ) %}
|
|
{{book_form[key](class="form-control", rows=rows, disabled="disabled" )}}
|
|
{# disabled fields do not come through in form post, so add hidden to make it work #}
|
|
<input type="hidden" name={{key}} value={{book_form[key].data}}>
|
|
{% else %}
|
|
{{book_form[key](class="form-control", rows=rows )}}
|
|
{% endif %}
|
|
</div class="col">
|
|
{% endif %}
|
|
</div class="form-row">
|
|
{% endfor %}
|
|
<div id="series_row" class="form-row">
|
|
<label for="series" class="col-lg-2 col-form-label">Series:</label>
|
|
{# 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 %}
|
|
{# 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 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 <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 <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">
|
|
{% if books.child_ref|length %}
|
|
<div class="form-row">
|
|
<label class="col-lg-2 col-form-label">Sub Books:</label>
|
|
<div class="col" id="sub_book_content">
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<div id="spacer"><br></div>
|
|
<div class="form-row">
|
|
<div class="form-row col mx-0">
|
|
{{ book_form.submit( class="btn btn-primary offset-lg-2 col-lg-2" )}}
|
|
{% if 'Edit' in page_title %}
|
|
{{ book_form.delete( class="btn btn-outline-danger col-lg-2" )}}
|
|
{% endif %}
|
|
</div class="form-row">
|
|
</div class="form-row">
|
|
{{ hiddens.txt|safe }}
|
|
</form>
|
|
{% if b.parent|length == 0 and 'Edit' in page_title %}
|
|
<form role="form" class="form col-lg-10" action="{{url_for('new_book')}}" method="POST">
|
|
<input type="hidden" name="add_sub_parent_id" value="{{books.id}}">
|
|
{{ book_form.add_sub( class="btn btn-outline-success offset-lg-2 col-lg-2" )}}
|
|
</form>
|
|
{% endif %}
|
|
{% if books.loan|length %}
|
|
<div class="col">
|
|
<div class="card border-primary">
|
|
<div class="card-header bg-primary text-white">Loaned to</div>
|
|
<div class="card-body text-primary">
|
|
<h5 class="card-title">{{books.loan[0].firstnames}} {{books.loan[0].surname}}</h5>
|
|
<p class="card-text">
|
|
When: {{books.loan[0].date_lent}}<br>
|
|
Contact: {{books.loan[0].contact_details}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div class="row">
|
|
</div class="container">
|
|
|
|
{% endblock main_content %}
|
|
{% if books.child_ref|length %}
|
|
{% block script_content %}
|
|
<script>
|
|
$(document).ready( function() {
|
|
$("#sub_book_content").load("/subbooks_for_book/{{books.id}}")
|
|
} )
|
|
</script>
|
|
{% endblock script_content %}
|
|
{% endif %}
|