colibry/Borrow.html at master · MeteorMTL/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
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<head>

</head>
<template name="borrow">

  <div class="container panel-defaults panel">
	<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">
    	{{> searchToBorrow}}
  </div>
  <div class="center-block">
  <div class="col-xs-6 col-sm-4">


<br> <br>
    {{> mapUsers}}
    {{> displayChosenBook}}
    </div>
  </div>
  </div>


 	<h2>T</h2>


	{{> displayAvailableBooks}}
</div>
</template>


<template name="searchToBorrow">
	<!--Barre de recherche d'un livre (vient taper dans INFOS_BOOKS, pas forcément disponible) -->

   <!-- Le time out permet d'attendre un peu avant d'actualiser. Meilleure expérience utilisateur
// cherche les attributs de mon input easySearch
-->
<br>
<div class="container panel-defaults panel">
	<div class="row">
<div class="center-block">
  <div class="col-xs-6 col-sm-4">
  	 <div class="input-group">
 	<span class=" input-group-addon">
<span class="glyphicon glyphicon-book" aria-hidden="true"></span>
 	</span>
  {{> EasySearch.Input index=biIndex timeout=400 attributes=inputAttributes}}
</div>
  	  	</div>
  <div class="col-xs-6 col-sm-4">

<!-- Radio buttons so as to know from which location he'd like to borrow books  -->
  <div class="btn-group" data-toggle="buttons">

<label class="btn btn-primary"> <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Borrow from </label>
  <label class="btn btn-default active">
    <input type="radio" name="borrowLoc" id="home" autocomplete="off" checked> home
  </label>
  <label class="btn btn-default">
    <input type="radio" name="borrowLoc" id="work" autocomplete="off"> work
  </label>
  <label class="btn btn-default">
    <input type="radio" name="borrowLoc" id="my position" autocomplete="off"> my position
  </label>
</div>

  	</div>


  	</div>
  	</div>
  </div>

 <br>

<!-- Renders the content when the associated input is being searched. Allows multiple indexes. -->
{{#EasySearch.IfSearching index=biIndex}}
  <div>Searching...</div>
{{/EasySearch.IfSearching}}

 <!-- Affiche tous les bouquins correspondant à la recherche -->
{{#EasySearch.Each index=biIndex}}
<a class="img-thumbnail img-responsive">
{{> bookimage}}
</a>
{{/EasySearch.Each}}

<!-- Ça les charge 10 par 10, si il y en a besoin de plus... il suffit de cliquer -->
<br>
{{> EasySearch.LoadMore index=biIndex attributes=moreButtonAttributes}}


<br><br> Ancienne version

 {{#EasySearch.IfNoResults index=biIndex}}
    <div class="no-results">No results found!</div>
  {{/EasySearch.IfNoResults}}

	<form>

        <input type="text" name="searchedBook" placeholder="Titre du livre recherché">
        <input type="submit" value="Recherchez dans Colibry">
    </form>

    <div class="row">
	<div class="col-xs-12 col-sm-6 col-md-8"> {{> displaySearchedBooks}}
	</div>
	<div class="center-block">
	<div class="col-xs-6 col-md-4"> {{> displayChosenBook}}
    </div>
    </div>
    </div>
</template>

<template name="displayAvailableBooks">
	<h5>L'ensemble des livres disponibles dans la communauté</h5>

	<div class="panel-body">
      	<div class="row">
      	 {{#each availableBooks}}
    			<a class="img-thumbnail img-responsive">
     			<!-- Référence au template bookimage pour afficher l'image du livre dans une div -->
           {{> bookimage}}
    			</a>
  			{{/each}}
  		</div>
  	</div>
</template>

<template name="displaySearchedBooks">
	<h5>Livres disponibles à l'emprunt correspondants à votre recherche</h5>
	 <div class="panel-body">
      	<div class="row">

	      	{{#if tryToSearch}}
		      	{{#if searchInAllAvailableBooks.count}}
		      	 {{#each searchInAllAvailableBooks}}
		    			<a class="img-thumbnail img-responsive proposedBook">
		     			<!-- Référence au template bookimage pour afficher l'image du livre dans une div -->
		           {{> bookimage}}
		    			</a>
		  			{{/each}}
		  		{{else}}
		         <!-- Phrase si pas de livre dans cette partie de la biblio...-->
		         Désolé! Aucun livre de notre base de donnéee ne correspond à votre recherche!
		        {{/if}}
		    {{else}}
		    <!-- Phrase avant de faire une recherche...-->
		         Vas y cherche !
		    {{/if}}
  		</div>
  	</div>
</template>

<!-- TEMPLATE pour afficher le livre actuellement sélectionné dans la proposition suite à la recherche  -->
<template name="displayChosenBook">
	{{#if myChosenBook}}
		{{#if currentUser}}
			<!-- on valide que le livre est bien disponible  -->
			{{#if usersWhoShareIt.count}}
					<div class="thumbnail">
				      <img class="thumb-books" src="{{myChosenBook.thumb}}" width="100" height="140">
				      <div class="caption">
				        <h3>{{myChosenBook.title}} by {{myChosenBook.authors}}</h3>
				        <p>{{myChosenBook.snippet}}</p>
				        <p class="text-center"></p>
				     	<h5>Génial, ce livre est disponible ! Tu peux contacter les utilisateurs suivants :</h5>
				     	{{#each usersWhoShareIt}}
				    		<li>{{bookOwner}}</li>
						{{/each}}
				      </div>
				    </div>
			<!-- si le livre n'est pas disponible, on fait en sorte de l'ajouter à la wishliste -->
			{{else}}
				<div class="thumbnail">
				    <img class="thumb-books" src="{{myChosenBook.thumb}}" width="100" height="140">
				    <div class="caption">
				        <h3>{{myChosenBook.title}} by {{myChosenBook.authors}}</h3>
				        <p>{{myChosenBook.snippet}}</p>
				     	<h5>Ce livre est victime de son succès, tous les exemplaires sont présentement prêtés. Ajoute-le à ta wishliste et nous te préviendrons dès qu'un exemplaire sera disponible près de chez toi.</h5>
				    </div>
				    <p class="text-center">
				    <!-- même bouton étoile que dans le Lend -->
        			<a href="#" class="btn btn-success" role="button"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>Ajouter à ma Wishliste</a></p>
				</div>
			{{/if}}
	    {{else}}
	    	<!-- on valide que le livre est bien disponible  -->
	    	{{#if usersWhoShareIt.count}}
		    	<div class="thumbnail">
			      <img class="thumb-books" src="{{myChosenBook.thumb}}" width="100" height="140">
			      <div class="caption">
			        <h3>{{myChosenBook.title}} by {{myChosenBook.authors}}</h3>
			        <p>{{myChosenBook.snippet}}</p>
			        <p class="text-center"></p>
			     	<h5>Ce livre est disponible et {{usersWhoShareIt.count}} utilisateurs peuvent te le prêter</h5>
			     	<h5>Connecte-toi vite pour les contacter!</h5>
			     	<!-- Les bouton s'enregistrer et se connecter ne sont pas actifs pour l'instant -->
	        		<p><a class="se connecter" role="button"> Se connecter</a> </p> <p><a class="s'inscrire" role="button"> S'inscrire</a> </p>
			     </div>
			    </div>

			<!-- si le livre n'est pas disponible, on dit qu'il le sera bientôt et on fait en sorte que l'utilisateur s'enregistre pour commencer une wishliste  -->
			{{else}}
				<h3>caca pour user non connecté</h3>
			{{/if}}
    	{{/if}}
    {{/if}}
</template>

<!-- Template pour afficher une carte, a personnaliser !
	https://github.com/dburles/meteor-google-maps#examples-->
<template name="mapUsers">

<!-- pour l'instant on affiche ici les coordonnées des utilisateurs qui peuvent pret-->
	{{usersCoordinates}}
	  <div class="map-container">
       {{> googleMap name="mapUsers" options=mapUsersOptions coordinates=usersCoordinates}}

   </div>
</template>