lend.html

<!-- TEMPLATE POUR L'AFFICHAGE DE LA PAGE LEND, PAGE PRINCIPALE ACTUELLE -->
<template name="lend">
<!-- Même si déjà défini par iron router, rien ne s'affiche si l'utilisateur n'est pas connecté -->
  {{#if currentUser}}
  <div class="container panel-defaults panel">
  
  <!-- Disposition div BOOTSTRAP pour obtenir les 2 colonnes d'éléments, à gauche le template displayMyPhysicalBooks avec les 3 étagères, à droite, Displayselected book s'affiche lorsqu'un livre de la bibliothèque est sélectionné, ça vient l'afficher. Puis en dessous de ce template, searchGoogleBooks affiche la fonctionnalité de recherche de livres dans Google Books -->
  <div class="row">
  <div class="col-xs-12 col-md-8"> 
   <p class="text-center">
  <h3>MY COLLABORATIVE LIBRARY</h3></p>
  
    {{> displayMyPhysicalBooks}}
  </div>
  <div class="center-block">
  <div class="col-xs-6 col-md-4"> 
    <br><br>
    {{#if isTheAddressMissing}}
<div class="alert alert-danger alert-dismissible fade in" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
      <strong>Your books are unavailable !</strong> Please update your address in your <a href="{{pathFor route='profilepage'}}">profile</a> so as to share them. Thanks :)
    </div>

  {{/if}}
    {{> displaySelectedBook}} 
    {{> searchGoogleBooks}} 
    </div>
  </div>
  </div>
  </div>
{{/if}}
</template>

<!-- TEMPLATE pour afficher le livre actuellement sélectionné.  -->
<template name="displaySelectedBook">
  {{#if mySelectedBook}}
<div class="thumbnail">
      <img class="thumb-books" src="{{mySelectedBook.thumb}}" width="100" height="140">
      <div class="caption">
        <h3>{{mySelectedBook.title}} by {{mySelectedBook.authors}}</h3>
        <p>{{mySelectedBook.snippet}}</p>
        <p class="text-center">
          <!-- Le bouton remove est actif grâce à la class erase-book -->
        <p><a class="btn btn-danger erase-book" role="button"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Remove</a> 
          <!-- Le bouton étoile n'est pas actif pour le moment, voulait m'en servir pour ajouter aux favoris -->
        <a href="#" class="btn btn-success" role="button"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>Add</a></p>
     	</p>
      </div>
    </div>
    {{/if}}
</template>


<!-- TEMPLATE POUR AFFICHER LA BIBLIOTHEQUE DE L'UTILISATEUR -->
<template name="displayMyPhysicalBooks">  
  <!-- Système de panneau BOOTSTRAP -->
  <!-- l'ID est récupéré par les fonctions INTERACT (drag & drop) pour savoir dans quel partie de la bibliothèque ranger le livre.
  ID : 1 = livre actuellement disponible -->
  <div class="container-fluid">
  <div id="1" class="panel panel-success dropzone">
    <div class="panel-heading">
      <h4 class="panel-title">
        <!-- Un petit badge bien indiqué le nombre de livres dans chque partie de la bibliothèque -->
        Books available for lending <span class="badge">{{myPublicBooks.count}}</span>
      </h4>
    <div class="panel-body">
        <div class="row">
       {{#if myPublicBooks.count}}
         {{#each myPublicBooks}}
          <a class="img-thumbnail img-responsive">
          <div class="draggable drag-drop">
            <!-- Référence au template bookimage pour afficher l'image du livre dans une div -->
           {{> bookimage}}
         </div>
          </a>
        {{/each}} 
        {{else}}
         <!-- Phrase si pas de livre dans cette partie de la biblio...-->
          Drag & drop or add books here to share them !
          {{/if}}
    </div>
  
      </div>
    </div>
  </div>

<!-- l'ID est récupéré par les fonctions INTERACT (drag & drop) pour savoir dans quel partie de la bibliothèque ranger le livre.
  ID : 0 = livre privé-->
  <div id="0" class="dropzone panel panel-warning">
    <div class="panel-heading">
      <h4 class="panel-title">
          Private books, unavailable for lending <span class="badge">    {{myPrivateBooks.count}}</span>
   </h4>
    <div class="panel-body">
        <div class="row">
        {{#if myPrivateBooks.count}}
         {{#each myPrivateBooks}}
          <a class="img-thumbnail img-responsive">
          <div class="draggable drag-drop">
           {{> bookimage}}
          </div>

          </a>
        {{/each}} 
        {{else}}
         <!-- Phrase si pas de livre dans cette partie de la biblio...-->
          If you'd like a book to be private onbly, drag & drop it here
          {{/if}}
    </div>
      </div>
    </div>
  </div>

<!-- l'ID est récupéré par les fonctions INTERACT (drag & drop) pour savoir dans quel partie de la bibliothèque ranger le livre.
  ID : 2 = livre prêté -->
  <div id="2" class="dropzone panel panel-danger">
    <div class="panel-heading">
      <h4 class="panel-title">
          Lent books <span class="badge">    {{myLentBooks.count}}
    </span>
     </h4>
    <div class="panel-body">
        <div class="row">
         {{#if myLentBooks.count}}
         {{#each myLentBooks}}
          <a class="img-thumbnail img-responsive">
            <div class="draggable drag-drop">
             {{> bookimage}}
            </div>
          </a>
        {{/each}} 
        {{else}}
         <!-- Phrase si pas de livre dans cette partie de la biblio...-->
         If you'd like to signal that one of your book has been lent, drag & drop it here
         {{/if}}
    </div>
      </div>
    </div>
  </div>
</div>
</template>




 <!-- TEMPLATE GSEARCH POUR AFFICHER LA FONCTIONNALITÉ DE RECHERCHE DE LIVRE A AJOUTER DANS SA BIBLIOTHEQUE -->

<template name="searchGoogleBooks">
 <form>
    <div class="input-group">
      <input type="text" class="form-control" name="query" placeholder="ISBN, title, author, theme, etc.">
      <span class="input-group-btn">
        <button class="btn btn-default" type="submit">
              <span class="glyphicon glyphicon-book" aria-hidden="true"></span>
	Add to my library</button>
      </span>
    </div><!-- /input-group -->
  	

  </form>
<br> 
<!-- Affichage de "searching" pendant la recherche à l'API -->
{{#if actualGoogleBooksSearch}}
  {{#if searching}}
    <p>Searching...</p>
  {{else}}
  <!-- Affichage des résultats dans un tableauy -->
    {{#if GOOGLE_BOOKS_SEARCHFind.count}}
      <hr>  
      <table>
        {{#each GOOGLE_BOOKS_SEARCHFind}}
        <!-- Appel au template DisplaySearchGbook pour afficher individuellement les livres de la recherche Google BOOKS-->
          {{> displaySearchGoogleBooks}}
        {{/each}}
      </table>
    {{/if}}
  {{/if}}
  {{/if}}
</template>

<!-- Template pour afficher individuellement les livres de la recherche Google BOOKS-->

<template name="displaySearchGoogleBooks">  
  <tr>
    <!-- Class add-this-book pour ajouter un livre à la bibliotheque qu'on clique sur le bouton ou qu'on clique sur l'image du livre GSEARCH-->
    <td class="image add-this-book">
      {{> bookimage}}
	</td>
    <blockquote>
	<strong>{{title}}</strong> by {{authors}}
	<small>{{snippet}}</small>
	{{averageRating}} / 5
    </blockquote>
    <!-- Class add-this-book pour ajouter un livre à la bibliotheque qu'on clique sur le bouton ou qu'on clique sur l'image du livre GSEARCH-->
	<button type="button" id="myButton" data-loading-text="Loading..." class="add-this-book btn btn-primary" autocomplete="off">
  			Add to my Library
		</button>

		<script>
  		$('#myButton').on('click', function () {
    	var $btn = $(this).button('loading')
    	// business logic...
    	$btn.button('reset')
  		})
		</script>

	 </tr>
	 <br>
	 
</template>  



<!-- TEMPLATE POUR AFFICHER L'IMAGE D'UN LIVRE-->
<template name="bookimage">
  <!-- La fonction imageornot vient m'indiquer s'il y a une image ou pas à afficher. Si il n'y avait pas d'image sur l'API GOogle alors on affiche un écran gris avec le titre dedans-->
  {{#if imageOrNot}}
   <img class="thumb-books" src="{{thumb}}" alt={{title}} height="110">
  {{else}}
  <img class="thumb-books gris"  alt={{title}} height="110">

  {{/if}}
</template>