first commit for removing books from a loan itself, works and the scaffold is there for adding new books, code to be written

2021-01-04 16:23:09 +11:00
parent cc13ecfc87
commit 17c0c2a024
5 changed files with 140 additions and 11 deletions
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,3 +1,4 @@
+{% if not InDBox %}
 <html>
 	<head>
 	  <!-- Required meta tags -->
@@ -14,6 +15,46 @@
 	</head>
 	<body>

+
+	<div id="dbox" class="modal fade" tabindex="-1" role="dialog">
+		<div class="modal-dialog mw-100 w-75">
+		    <div class="modal-content">
+				<div class="modal-header">
+					<h5 id="dbox-title" class="modal-title">Add / Remove Books to / from Loan</h5>
+					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body">
+					<div class="container-fluid">
+						<div id="dbox-content" class="row">
+							<div id="bfl-existing" class="col-lg-10 px-0">
+							</div>
+							<div class="col">
+								<button id="bfl-remsel-btn" class="btn btn-danger disabled" disabled onClick="RemoveSelFromLoan()">Remove Selected</button>
+							</div>
+							<div id="bfl-search" class="input-group">
+								<input class="form-control" type="text" id="bfl-search-term" placeholder="title of book(s) to add">
+								<div class="input-group-append">
+									<button type="button" class="btn btn-primary" onClick="FindNewBFL()">Search</button>
+								</div>
+							</div>
+							<br>
+							<div id="bfl-new" class="col-lg-10 px-0 py-4">
+							</div>
+							<div class="col py-4">
+                                <button id="bfl-addsel-btn" class="btn btn-success disabled" disabled style="display:none" onClick="">Add Selected</button>
+                            </div>
+						</div>
+					</div>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
 	<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-between">
 		<a class="navbar-brand" href="/">Books DB</a>
 		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
@@ -81,9 +122,12 @@
 			{{ ClearStatus() }}
 		</div>
 	{% endif %}
+{% endif %}
+
 	{% block main_content %}
 	{% endblock main_content %}

+{% if not InDBox %}
 	<!-- code to get bootstrap & bootstrap datatable to work -->
 	<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
 	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
@@ -97,3 +141,4 @@
 	{%block script_content %}{% endblock script_content %}
 	</body>
 </html>
+{% endif %}
--- a/templates/books.html
+++ b/templates/books.html
@@ -1,10 +1,17 @@
 {% extends "base.html" %}
 {% block main_content %}

+{% if not InDBox %}
 <h3>All Books</h1>
+{% endif %}
 	<table id="book_table" class="table table-striped table-sm" data-toolbar="#toolbar" data-search="true">
 	  <thead>
-	  <tr class="thead-light"><th>Title</th><th>Author(s)</th><th>Publisher</th><th>Condition</th><th>Owned</th><th>Covertype</th></tr>
+	  <tr class="thead-light"><th>Title</th><th>Author(s)</th>
+	  {% if not InDBox %}
+	  <th>Publisher</th><th>Condition</th><th>Owned</th> <th>Covertype</th></tr>
+	  {% else %}
+	  <th>Covertype</th><th>Add?</th></tr>
+	  {% endif %}
 	  </thead>
 	  <tbody>
      {% for book in books %}
@@ -19,6 +26,7 @@
 			  {{ auth['surname'] }}, {{auth['firstnames']}}
 		  {% endfor %}
 		  </td>
+		  {% if not InDBox %}
 		  <td>{{ GetPublisherById(book.publisher)}}</td>
 		  <td align="center">
 		  	{% set cond = GetConditionById(book.condition) %}
@@ -31,7 +39,11 @@
 			{% endif %}
 		  </td>
 		  <td>{{ GetOwnedById(book.owned)}}</td>
+		  {% endif %}
 		  <td>{{ GetCovertypeById(book.covertype) }}</td>
+		  {% if InDBox %}
+		  	<td> <input type="checkbox"></td>
+		  {% endif %}
 		</tr>
      {% endfor %}
 	</tbody>
--- a/templates/books_for_loan.html
+++ b/templates/books_for_loan.html
@@ -1,7 +1,43 @@
-	<h3>Loaned Books</h1>
+    <script>
+    function ActivateBFLRemSelButton()
+	{
+		$('#bfl-remsel-btn').removeClass('disabled')
+		$('#bfl-remsel-btn').attr('disabled',false)
+	}
+	
+    function RemoveSelFromLoan()
+	{
+		var params=$("#book_table :input").serializeArray()
+		$('#dbox').modal('hide')
+		$.post( "/rem_books_from_loan/" + {{loan_id}}, params, function(data) { $('#bfl-existing').html('U SHOULD NEVER SEE THIS: calling the rem_books_from_loan page') } )
+		window.location = "/loan/" + {{loan_id}}
+	}
+
+    function ShowDBox()
+	{
+		$('#dbox').modal('show')
+		$.post( "/books_for_loan/" + {{loan_id}}, function(data) {$('#bfl-existing').html(data) } );
+	}
+    function FindNewBFL()
+    {
+		$.post( "/search",{ 'term': $('#bfl-search-term').val(), 'InDBox': 1 }, function(data) { $('#bfl-new').html(data) ; $('#bfl-addsel-btn').show() } );
+    }
+    </script>
+
+	{% if not InDBox %}
+		<h3>Loaned Books</h3>
+	{% endif %}
+
 	<table id="book_table" class="table table-striped table-sm" data-toolbar="#toolbar" data-search="true">
 	  <thead>
-	  <tr class="thead-light"><th>Title</th></tr>
+	  <tr class="thead-light">
+	  	<th>Title</th>
+	  	<th>Author(s)</th>
+	  	<th>Covertype</th>
+		{% if InDBox %}
+	  	<th>Remove?</th>
+		{% endif %}
+	  </tr>
 	  </thead>
 	  <tbody>
      {% for book in books %}
@@ -11,7 +47,20 @@
 		  {% else %}
 		  	<td data-sort="{{book.id}}"><a href="/book/{{book.id}}">{{book.title}}</a></td>
 		  {% endif %}
+		  <td>
+          {% for auth in book.author %}
+              {{ auth['surname'] }}, {{auth['firstnames']}}
+          {% endfor %}
+          </td>
+          <td>{{ GetCovertypeById(book.covertype) }}</td>
+		  {% if InDBox %}
+		    <td><input name="bfl-rem-{{book.id}}" type="checkbox" onClick="ActivateBFLRemSelButton()"></td>
+		  {% endif %}
 		</tr>
      {% endfor %}
 	</tbody>
 	</table>
+
+	{% if not InDBox %}
+		<button type="button" class="btn btn-primary" onClick="ShowDBox()">Add/Remove Books in Loan</button>
+	{% endif %}
--- a/templates/loan.html
+++ b/templates/loan.html
@@ -1,9 +1,9 @@
 {% extends "base.html" %}
 {% block main_content %}
-	<div class="container">
+	<div class="container-fluid">
 		<h3 class="col-lg-12"><center>{{page_title}}</center></h3>
 		<div class="row">
-			<div class="col-lg-8">
+			<div class="col-lg-6">
 			<form class="form form-inline col-lg-12" action="" method="POST">
 				{{ form.csrf_token }}
 				{{ form.id }}
@@ -33,11 +33,11 @@
 					{% endif %}
 				</div class="form-row">
 			</form>
-			</div class="col-lg-8">
-			<div class="col-lg-4">
+			</div class="col-lg-6">
+			<div class="col-lg-6">
 				<div id="books_for_loan_bit">
 				</div id="books_for_loan_bit">
-			</div class="col-lg-4">
+			</div class="col-lg-6">
 		</div class="row">
 	</div class="container">
 {% endblock main_content %}