Files
books/templates/book.html

442 lines
19 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-2">Book&nbsp;</span>
<input type="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>
<select class="form-select 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 ConfirmRemoveParentAndSubsFromSeries(pid,bid,rem)
{
$('#dbox-title').html('Confirm: Removing Parent Book from Series')
if( rem.length > 1 )
all='<span style="background:red" class="text-white"><em>ALL</em></span>'
else
all='this '
div=`
<div class="row col-12">
<p class="lead">You have chosen to remove this (parent) book from a series.
What should we do with the sub-books for
`
div += all
div += `
series?</p>
</div class="row">
<div class="row col-12">
<button id="RPS" class="btn btn-primary col-2">Remove all children</button>
<button onClick="$('#dbox').modal('hide')"
class="btn btn-outline-danger offset-8 col-2"> Cancel Series change</button>
</div class="row">
`
$('#dbox-content').html(div)
$('#dbox').modal('show')
// have to do this AFTER modal show otherwise it doesnt exist... (grrr)
$('#RPS').attr( 'onClick', "$('#dbox').modal('hide') ; $.post( '/rem_parent_books_from_series/" +pid + "' ) ; window.location='/book/"+ bid + "'" )
}
function ConfirmRemoveThisSubs_ParentAndSubsFromSeries(pid,bid,rem)
{
$('#dbox-title').html('Confirm: Removing Sub Book from Series')
div=`
<div class="row col-12">
<p class="lead">You have chosen to remove this (sub) book from a series.
What should we do with the sub-books <span id="RPS-text"></span>
</p>
</div class="row">
<div class="row col-12">
<button id="RPS" class="btn btn-primary col"></button>
<button id="RPS-one" onClick="alert('not yet')" class="btn btn-outline-primary col"></button>
<button onClick="$('#dbox').modal('hide')" class="btn btn-outline-danger col">
Cancel Series change</button>
</div class="row">
`
if( rem.length > 1 )
{
all='for <span style="background:red" class="text-white"><em>ALL</em></span> series'
b_RPS="Remove parent and all children too " + all
b_RPS_one="Remove just this (sub) book " + all
}
else
{
all='for this series '
b_RPS="Remove parent and all children too"
b_RPS_one="Remove just this (sub) book"
}
$('#dbox-content').html(div)
$('#dbox').modal('show')
// have to do this AFTER modal show otherwise it doesnt exist... (grrr)
$('#RPS-text').html(all)
$('#RPS').html(b_RPS)
$('#RPS').attr( 'onClick', "$('#dbox').modal('hide') ; $.post( '/rem_parent_books_from_series/" +pid + "' ) ; window.location='/book/"+ bid + "'" )
$('#RPS-one').html(b_RPS_one)
$('#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()"><i class="fas fa-plus"></i></button></div>'
}
function AddBookToSeries() {
// 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) {
$('#'+sid).remove()
var num = parseInt( sid.match(/\d+/g), 10 );
// move real DB data or delete 'new' bsl data (its appended outside of div to avoid bootstrap issues)
if( $('input:hidden[name=bsl-series_id-'+num+']').length )
{
$('[name=bsl-book_id-'+num+']').attr('name', 'removed-book_id-'+num)
$('[name=bsl-series_id-'+num+']').attr('name', 'removed-series_id-'+num)
$('[name=bsl-book_num-'+num+']').attr('name', 'removed-book_num-'+num)
}
else
{
$('[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-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 )
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-10"><h3 class="offset-2">{{page_title}}</h3></div>
<div class="row" id="main-row">
<form role="form" class="form col-10" action="" method="POST">
{{ book_form.id }}
{{ book_form.csrf_token }}
{% if b.parent|length %}
<div class="form-row">
<div class="input-group">
<label class="input-group-text col-2 col-form-label bg-secondary text-white"><i>Parent Book:</i></label>
<div class="col">
<span class="col-12 d-flex h-100 border rounded-end border-primary">
<i class="col-12 d-flex h-100 justify-content-center"><a href="/book/{{b.parent[0].id}}">{{b.parent[0].title}}</a></i>
</span>
</div>
<input type="hidden" name="parent_id" value="{{b.parent[0].id}}">
<input type="hidden" name="parent_title" value="{{b.parent[0].title}}">
</div>
</div>
{% endif %}
{% for key in keys %}
<div class="form-row">
<div class="input-group">
<label for="{{key}}" class="input-group-text col-2 justify-content-end">{{key}}:</label>
{% if key == "genre" %}
<div class="row col-10">
{% for genre in genre_list %}
<div class="form-control col">
<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-select" 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-select" 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}}">
{% elif key == 'publisher' or key == 'owned' or key == 'covertype'
or key == 'condition' or key == 'rating' %}
{{book_form[key](class="form-select" )}}
{% else %}
{{book_form[key](class="form-control", rows=rows )}}
{% endif %}
</div class="col">
{% endif %}
</div class="input-group">
</div class="form-row">
{% endfor %}
<div id="series_row" class="form-row">
<label for="series" class="col-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&nbsp; <a href=/series/{{s.id}}>{{s.title}}</a>
</div>
{% else %}
{% 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>
</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">
{% if books.child_ref|length %}
<div class="form-row">
<label class="col-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-2 col-2" )}}
{% if 'Edit' in page_title %}
{% if GetOwnedById(b.owned) == 'Sold' %}
{{ book_form.delete( class="btn btn-outline-danger col-2" )}}
{% else %}
<span class="col-2" tabindex="0" data-toggle="tooltip"
title="Cannot Delete unless the book is saved as Sold">
{{ book_form.delete( class="btn btn-outline-danger col disabled", disabled="true", style="pointer-events: none;" )}}
</span>
{% endif %}
{% endif %}
</div class="form-row">
</div class="form-row">
{{ hiddens.txt|safe }}
</form>
{% 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 class="card-body">
</div class="card-header">
</div class="card">
</div class="col">
{% endif %}
</div class="row" id="main-row">
{% if 'Edit' in page_title %}
<div class="form-row">
{% if b.parent|length == 0 %}
<form role="form" class="form col-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-2 col-2" )}}
</form>
{% else %}
<form role="form" class="form col-10" action="{{url_for('remove_sub_book')}}" method="POST">
<input type="hidden" name="rem_sub_sub_book_id" value="{{books.id}}">
<input type="hidden" name="rem_sub_parent_id" value="{{b.parent[0].id}}">
{{ book_form.rem_sub( class="btn btn-outline-danger offset-2 col-3" )}}
</form>
{% endif %}
</div class="form-row">
{% endif %}
</div class="container">
{% endblock main_content %}
{% if books.child_ref|length %}
{% block script_content %}
<script>
$(document).ready( function() {
$('[data-toggle="tooltip"]').tooltip()
$("#sub_book_content").load("/subbooks_for_book/{{books.id}}")
{% if CheckSeriesChange is defined and CheckSeriesChange != None %}
{% if CheckSeriesChange.type == 'parent' %}
ConfirmRemoveParentAndSubsFromSeries( {{CheckSeriesChange.pid}}, {{CheckSeriesChange.bid}},
{{CheckSeriesChange.removing_series|safe}} )
{% else %}
ConfirmRemoveThisSubs_ParentAndSubsFromSeries( {{CheckSeriesChange.pid}}, {{CheckSeriesChange.bid}},
{{CheckSeriesChange.removing_series|safe}} )
{% endif %}
{% endif %}
} )
</script>
{% endblock script_content %}
{% endif %}