Colibry/lend.html at master · martwerlen/Colibry · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!-- 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}}
  <body>
  <div class="container-fluid">
  <h5>MY COLLABORATIVE LIBRARY</h5>
  <!-- Disposition div BOOTSTRAP pour obtenir les 2 colonnes d'éléments, à gauche le template DisplayBooks 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, GSearch affiche la fonctionnalité de recherche de livres dans Google Books -->
  <div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">{{> DisplayBooks}}
  </div>
  <div class="center-block">
  <div class="col-xs-6 col-md-4"> {{> DisplaySelectedBook}} {{> GSearch}}
    </div>
  </div>
  </div>
  </div>
</body>
{{/if}}
</template>

<!-- TEMPLATE pour afficher le livre actuellement sélectionné.  -->
<template name="DisplaySelectedBook">
	 {{#each MySelectedBook}}
<div class="thumbnail">
      <img class="ThumbBooks" src="{{Thumb}}" width="100" height="140">
      <div class="caption">
        <h3>{{Title}} by {{Authors}}</h3>
        <p>{{Snippet}}</p>
        <p class="text-center">
          <!-- Le bouton remove est actif grâce à la class EraseBook -->
        <p><a class="btn btn-danger EraseBook" 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>

	{{/each}}

</template>


<!-- TEMPLATE POUR AFFICHER LA BIBLIOTHEQUE DE L'UTILISATEUR -->
<template name="DisplayBooks">
  <!-- 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 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">
      	 {{#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}}

		</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">    {{MyLendedBooks.count}}
		</span>
     </h4>
    <div class="panel-body">
        <div class="row">
      	 {{#if MyLendedBooks.count}}
         {{#each MyLendedBooks}}
    			<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>
</template>


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

<template name="GSearch">
 <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 ActualGSearch}}
  {{#if searching}}
    <p>Searching...</p>
  {{else}}
  <!-- Affichage des résultats dans un tableauy -->
    {{#if GBOOKSFIND.count}}
      <hr>
      <table>
        {{#each GBOOKSFIND}}
        <!-- Appel au template DisplaySearchGbook pour afficher individuellement les livres de la recherche Google BOOKS-->
          {{> DisplaySearchGbook}}
        {{/each}}
      </table>
    {{/if}}
  {{/if}}
  {{/if}}
</template>

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

<template name="DisplaySearchGbook">
  <tr>
    <!-- Class Addthisbook 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 Addthisbook">
      {{> bookimage}}
	</td>
    <blockquote>
	<strong>{{Title}}</strong> by {{Authors}}
	<small>{{Snippet}}</small>
	{{AverageRating}} / 5
    </blockquote>
    <!-- Class Addthisbook 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="Addthisbook 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="ThumbBooks" src="{{Thumb}}" alt={{Title}} height="110">
  {{else}}
  <img class="ThumbBooks gris"  alt={{Title}} >

  {{/if}}
</template>