You can loan a movie but not yet return it

project/templates/index.html

@@ -8,6 +8,7 @@
         <title>{% block title %}My Movie Library{% endblock %}</title>
 
         <link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.ico') }}">
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/ui-darkness/jquery-ui-1.10.4.custom.min.css') }}">
         <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bootstrap-slate.min.css') }}">
         <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}">
 
@@ -68,6 +69,7 @@
         <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
         <!-- Include all compiled plugins (below), or include individual files as needed -->
         <script src="{{ url_for('static', filename='lib/bootstrap.min.js') }}"></script>
+        <script src="{{ url_for('static', filename='lib/jquery-ui-1.10.4.custom.min.js') }}"></script>
 
         {% block javascript %}
         {% endblock %}

project/templates/library/library.html

@@ -23,14 +23,20 @@
                     </tr>
                 {% else %}
                     {% for movie in library.hydrateList() %}
+                    {% set loan = movie.getLoan(user) %}
                         <tr class='clickable' data-id='{{ loop.index }}'>
                         <td>
                             <img src="{{ movie.poster|default('') }}" style="max-width: 200px;" alt="{{ movie.title }}">
                             <p>{{ movie.title }}</p>
                              <div class="btn-group hidden-md hidden-lg">
-                              <button type="button" class="btn btn-default btn-small lend-movie" data-id='{{ loop.index }}'>Lend</button>
-                              <button type="button" class="btn btn-default btn-small borrow-movie" data-id='{{ loop.index }}'>Edit</button>
+                              {% if loan == None %}  
+                                <button type="button" class="btn btn-default btn-small lend-movie" data-toggle="modal" data-target="#loan-form" data-id='{{ movie.id }}'>Lend</button>
+                              {% else %}  
+                                This movie is loaned to {{ loan.email }} and is due back on {{ loan.expected_return_date.strftime('%m-%d-%Y') }}
+                              {% endif %}
+                              {% if library.name != "Master" or loan == None %}
                                 <button type="button" class="btn btn-default btn-small remove-movie" data-id='{{ loop.index }}'>Remove</button>
+                              {% endif %}
                             </div>
                         </td>
                         <td>
@@ -51,9 +57,15 @@
                         </td>
                         <td class="hidden-xs">
                             <div class="btn-group-vertical">
-                              <button type="button" class="btn btn-default btn-small lend-movie" data-id='{{ loop.index }}'>Lend</button>
-                              <button type="button" class="btn btn-default btn-small borrow-movie" data-id='{{ loop.index }}'>Edit</button>
+                              {% if loan == None %}    
+                                  <button type="button" class="btn btn-default btn-small lend-movie" data-toggle="modal" data-target="#loan-form" data-id='{{ movie.id }}'>Lend</button>
+                              {% else %}  
+                                This movie is loaned to {{ loan.borrower_email }} and is due back on {{ loan.expected_return_date.strftime('%m-%d-%Y') }}
+                              {% endif %}
+                              {% if library.name != "Master" or loan == None %}
                                 <button type="button" class="btn btn-default btn-small remove-movie" data-id='{{ loop.index }}'>Remove</button>
+                              {% endif %}
+                              
                             </div>
                         </td>
                     </tr>
@@ -114,4 +126,5 @@
 
 {% block modals %}
     {% include 'library/addmovie_modal.html' %}
+    {% include 'library/loanMovie_modal.html' %}
 {% endblock %}
\ No newline at end of file

project/templates/library/loanMovie_modal.html

+{% extends "modal_base.html" %}
+{% block modal_title %} Lend Movie {% endblock %}
+{% block modal_content %}
+		<form class="form-horizontal" id="loan" role="form" method="post" action="{{ url_for('createLoan') }}">
+			<div class="form-group">
+				<label for="email" class="col-sm-3 control-label">Borrowers Email</label>
+				<div class="col-xs-9 col-md-6">
+					<input type="text" class="form-control" name="email" placeholder="Email">
+				</div>
+			</div>
+			<div class="form-group">
+				<label for="returnDate" class="col-sm-3 control-label">Return Date <i class="glyphicon glyphicon-calendar"> </i></label>
+		        <div class="col-xs-9 col-md-6">
+		            <input id="returnDate" type="text" name="date" class="date-picker form-control" />
+		        </div>
+	        </div>
+		    <div class="form-group">
+			    <div class="col-xs-9 col-md-6">
+		        	<input type="hidden" class="hidden" name="movie" />
+		    	</div>
+			</div>
+		</form>
+{% endblock %}
+{% block accept_button_text %}Create{% endblock %}
+{% block ajax_url %}'{{ url_for('createLoan') }}'{% endblock %}
+{% block form_id %}loan{% endblock %}
+{% block validation_rules %}
+rules: {
+	email: {
+		required: true,
+		email: true
+	},
+	date: "required",
+	movie: "required"
+}
+{% endblock %} 
+{% block additional_javascripts %}
+	<script>
+		$(function(){
+			$(".date-picker").datepicker();
+		});
+		$(".lend-movie").on('click', function (event) {
+			event.stopPropagation();
+			event.preventDefault();
+			modal = $(this).data('target');
+			$(modal).modal('toggle');
+	    	$(".modal-body input[name='movie']").val( $(this).data('id')); 
+	    });
+		
+	</script>
+{% endblock %}
\ No newline at end of file

project/templates/library/master.html

@@ -17,7 +17,7 @@
                 </tr>
             </thead>
             <tbody>
-            {% for library in libraries %}
+            {% for library in libraries if not library.name == 'Borrowed' %}
                 <tr class='clickable' data-name='{{ library.name }}'>
                     <td>
                         <a href="#">{{ library.name }}</a>

project/templates/modal_base.html

@@ -35,7 +35,9 @@
         $(function(){
             var $form = $(document.getElementById("{{ self.form_id() }}"));
             var $acceptButton = $(document.getElementById("{{ self.form_id() }}-accept"));
-            $acceptButton.on('click',function(){
+            $acceptButton.on('click',function(event){
+                event.stopPropagation();
+                event.preventDefault();
                 $.ajax({
                     url: {% block ajax_url %}{% endblock %},
                     data: $form.serialize(),
@@ -75,7 +77,16 @@
                     $acceptButton.click();
                 }
             });
+            $('[data-dismiss]').on('click',function(){
+               $('input')
+                  .not(':button, :submit, :reset, :hidden')
+                  .val('')
+                  .removeAttr('checked')
+                  .removeAttr('selected');
+                  $(".{{ self.form_id() }}-error").html('').addClass('hide');
             });
+        });
+              
     </script>
 {% endblock %}
 {% block additional_javascripts %}