Subversion Repositories eFlore/Applications.cel

Rev

Go to most recent revision | Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1244 jpm 1
<!DOCTYPE html>
1733 isa 2
<html lang="fr" manifest="mobile.appcache">
1827 jpm 3
	<head>
4
		<base href="http://www.tela-botanica.org/eflore/cel/widget/modules/saisie/squelettes/mobile/"/>
1244 jpm 5
		<title>CEL Mobile</title>
6
 
7
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
8
		<meta http-equiv="Content-style-type" content="text/css" />
9
		<meta http-equiv="Content-script-type" content="text/javascript" />
10
		<meta http-equiv="Content-language" content="fr" />
11
 
12
		<meta name="revisit-after" content="15 days" />
1829 isa 13
		<meta name="robots" content="index,follow" />
14
		<meta name="author" content="Jean-Pascal MILCENT, Isabelle NEMBROT" />
15
		<meta name="keywords" content="Tela Botanica, CEL, mobile" />
16
		<meta name="description" content="Widget de saisie du CEL pour smartphone" />
1244 jpm 17
 
18
		<!-- Favicones -->
19
		<link rel="shortcut icon" type="image/x-icon" href="http://www.tela-botanica.org/favicon.ico" />
20
 
21
		<!-- Viewport -->
22
		<meta name="viewport" content="width=device-width, initial-scale=1">
1828 jpm 23
		<meta name="apple-mobile-web-app-capable" content="yes" />
1552 isa 24
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
1244 jpm 25
 
26
		<!-- CSS -->
1552 isa 27
		<link rel="stylesheet" href="http://www.tela-botanica.org/commun/jquery/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
1823 isa 28
		<link href="http://www.tela-botanica.org/eflore/cel/widget/modules/saisie/squelettes/mobile/css/mobile.css" rel="stylesheet" type="text/css" media="screen" />
1244 jpm 29
 
30
		<!-- Javascript -->
31
		<script src="http://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.min.js"></script>
32
 
33
		<!-- Javascript : appli saisie -->
34
		<script type="text/javascript">
35
		//<![CDATA[
1552 isa 36
			// Nombre d'observations max autorisé avant transmission
37
			var OBS_MAX_NBRE = 10;
1733 isa 38
			// Délai d'attente avant de lancer la recherche des noms latins en ms
39
			var DELAI_RECHERCHE = 500;
1552 isa 40
			// Mot-clé du widget/projet
41
			var TAG_PROJET = "WidgetSaisie";
1829 isa 42
			// Code du référentiel utilisé pour les nom scientifiques (de la forme nom:code).
43
			var NOM_SCI_REFERENTIEL = "";
1552 isa 44
			// URL du web service réalisant l'insertion des données dans la base du CEL.
1823 isa 45
			var SERVICE_SAISIE_URL = "http://www.tela-botanica.org/service:cel:CelWidgetSaisie";
46
			//var SERVICE_SAISIE_URL = "http://www.tela-botanica.org/test-service:cel:CelWidgetSaisie";
1552 isa 47
			// URL du web service annuaire des membres du réseau.
48
			var SERVICE_ANNUAIRE = "http://www.tela-botanica.org/client/annuaire_nouveau/actuelle/jrest/utilisateur/identite-par-courriel/";
49
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
50
			var SERVICE_NOM_COMMUNE_URL = "http://www.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
51
			// Texte en absence de connexion
1733 isa 52
			var TEXTE_HORS_LIGNE = 'Aucune connexion.';
53
			// Texte en absence de compte
54
			var TEXTE_NON_COMPTE = 'Aucun compte enregistré.';
55
			// Texte en presence de compte
56
			var TEXTE_OUI_COMPTE = 'Ajouter au compte ';
1552 isa 57
			// Texte d'identification des observations
1733 isa 58
			var TEXTE_OBS = 'obsId';
1552 isa 59
			// Texte d'identification des photos
1733 isa 60
			var TEXTE_PHOTO = 'photoId';
1244 jpm 61
		//]]>
62
		</script>
1733 isa 63
		<script type="text/javascript" src="js/mobile.js"></script>
64
		<script type="text/javascript" src="js/bdtfx.js"></script>
1244 jpm 65
 
66
		<!-- Javascript : Jquery Mobile -->
1552 isa 67
		<script src="http://www.tela-botanica.org/commun/jquery/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
1244 jpm 68
	</head>
1552 isa 69
 
70
 
1244 jpm 71
	<body data-theme="b">
1733 isa 72
		<div id="menu" data-role="page"> <!--data-add-back-btn="true" data-back-btn-text="Retour"-->
1244 jpm 73
			<div data-role="header">
1552 isa 74
				<h1>Accueil</h1>
75
				<a href="#infos" data-icon="info" data-iconpos="notext" class="ui-btn-right">Infos</a>
1244 jpm 76
			</div>
77
			<div data-role="content" data-theme="g">
1733 isa 78
				<p class="center">
79
					Bienvenue sur le Carnet En Ligne mobile ! <br />
80
				</p>
1244 jpm 81
				<ul data-role="listview">
82
					<li>
83
						<img src="http://www.tela-botanica.org/commun/icones/glyphish/187-pencil.png" class="ui-li-icon"/>
1733 isa 84
						<a href="#saisie" class="saisie" data-role="button">1 - Saisir une observation</a>
1244 jpm 85
					</li>
86
					<li>
87
						<img src="http://www.tela-botanica.org/commun/icones/glyphish/179-notepad.png" class="ui-li-icon"/>
1733 isa 88
						<a href="#liste" data-role="button">2 - Voir mes observations</a>
1244 jpm 89
					</li>
90
					<li>
91
						<img src="http://www.tela-botanica.org/commun/icones/glyphish/56-cloud.png" class="ui-li-icon"/>
1733 isa 92
						<a href="#transmission" data-role="button">3 - Transmettre mes observations</a>
1244 jpm 93
					</li>
1733 isa 94
					<li></li>
1244 jpm 95
				</ul>
96
			</div>
1733 isa 97
			<div data-role="footer" data-position="fixed"></div>
1244 jpm 98
		</div>
1733 isa 99
 
1244 jpm 100
		<div id="saisie" data-role="page">
101
			<div data-role="header" data-position="inline">
102
				<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
1733 isa 103
				<h1>Saisie</h1>
104
				<a href="#infos" data-icon="info" data-iconpos="notext" class="ui-btn-right">Infos</a>
1244 jpm 105
			</div>
1733 isa 106
			<form id="form-saisie-observation" method="post" action="#">
1244 jpm 107
				<div data-role="content">
1248 jpm 108
					<div id="obs-saisie-infos"></div>
1244 jpm 109
					<div data-role="fieldcontain">
1733 isa 110
						<label for="nom">Espèce : </label>
111
						<span id="nom"></span>
1244 jpm 112
 
1733 isa 113
						<br />
114
						<a href="#saisie-popup" id="saisie-popup-btn"
115
								data-role="button" data-icon="search" data-iconpos="right"
116
								data-rel="dialog" data-transition="pop" data-theme="b">
117
							Changer l'espèce
118
						</a>
119
						<hr />
120
 
121
						<label for="date">
122
							Date :
123
							<span id="date"></span>
124
						</label>
125
						<hr />
126
 
1552 isa 127
						<button id="geolocaliser"
1733 isa 128
								data-role="button" data-icon="refresh" data-iconpos="" data-ajax="false">
1552 isa 129
							Recalculer ma position
130
						</button>
1244 jpm 131
 
1552 isa 132
						<label for="lat">
133
							Latitude :
134
							<span id="lat"></span>
135
						</label>
1244 jpm 136
 
1552 isa 137
						<br />
138
						<label for="lng">
139
							Longitude :
140
							<span id="lng"></span>
141
						</label>
1244 jpm 142
 
1552 isa 143
						<br />
144
						<label for="location">
145
							Commune :
146
							<span id="location"></span>
1733 isa 147
							<input id="code-insee" type="hidden" name="code-insee" />
1552 isa 148
						</label>
149
 
150
						<br />
1733 isa 151
						<hr />
1552 isa 152
						<button id="sauver-obs" data-role="button" data-icon="check">Sauver</button>
153
 
1733 isa 154
						<input id="referentiel" type="hidden" name="referentiel" />
155
						<input id="nom-sci-select" type="hidden" name="nom-sci-select" />
156
						<input id="num-nom-select" type="hidden" name="num-nom-select" />
1244 jpm 157
					</div>
158
				</div>
159
				<div data-role="footer" data-position="fixed">
1552 isa 160
					<div data-role="navbar">
161
						<ul>
162
							<li><a href="#liste" data-role="button" data-icon="notepad" data-iconpos="notext">Liste de mes obs.</a></li>
163
							<li><a href="#transmission" data-role="button" data-icon="cloud" data-iconpos="notext">Transmission</a></li>
164
						</ul>
165
					</div>
1244 jpm 166
				</div>
167
			</form>
168
		</div>
169
 
1733 isa 170
		<div id="saisie-popup" data-role="page" data-history="false" data-close-btn="right">
171
			<div data-role="header">
172
				<h1></h1>
173
			</div>
174
			<div data-role="content">
175
				<ul id="liste-noms-latins" data-role="listview"
176
					data-inset="true" data-filter="true" data-filter-reveal="true"
177
					data-filter-placeholder="Trouver une espèce...">
178
				</ul>
179
				<div class="hidden">
180
					<button id="recherche-chargement" data-theme="a" data-textonly="true" data-textvisible="true" data-msgtext="Chargement des résultats..." ></button>
181
				</div>
182
			</div>
183
		</div>
1552 isa 184
 
1244 jpm 185
		<div id="liste" data-role="page">
186
			<div data-role="header" data-position="inline">
187
				<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
188
				<h1>Observations</h1>
1733 isa 189
				<a href="#infos" data-icon="info" data-iconpos="notext" class="ui-btn-right">Infos</a>
1244 jpm 190
			</div>
191
			<div data-role="content">
1552 isa 192
				<div id="obs-suppression-infos"></div>
1733 isa 193
				<ul id="liste-obs" data-role="listview" data-split-icon="delete" data-split-theme="g" data-theme="g" data-inset="true"></ul>
1244 jpm 194
			</div>
195
			<div data-role="footer" data-position="fixed">
196
				<div data-role="navbar">
197
					<ul>
1552 isa 198
						<li><a href="#saisie" class="saisie" data-role="button" data-icon="pencil" data-iconpos="notext">Saisie</a></li>
1244 jpm 199
						<li><a href="#transmission" data-role="button" data-icon="cloud" data-iconpos="notext">Transmission</a></li>
200
					</ul>
201
				</div>
202
			</div>
203
		</div>
204
 
1552 isa 205
		<div id="observation" data-role="page">
206
			<div data-role="header" data-position="inline">
207
				<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
208
				<h1>Détails de l'observation</h1>
1733 isa 209
				<a href="#liste" data-icon="notepad" data-iconpos="notext" ></a>
1552 isa 210
			</div>
211
			<div data-role="content">
1733 isa 212
				<label for="id-obs">Identifiant :</label> <span id="id-obs"></span>
213
				<div id="details-obs"></div>
1552 isa 214
 
1733 isa 215
				<input type="file" id="pic" name="photos-obs[]" accept="image/*" multiple>
216
				<button id="valider-photos"
1552 isa 217
						data-role="button" data-icon="search" data-iconpos="" data-ajax="false">
218
					Ajouter les images sélectionnées
219
				</button>
1733 isa 220
 
221
				<div data-role="popup" id="cache-plein" class="ui-content" data-position-to="#valider-photos">
222
					<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
223
					<p>
224
						La mémoire de cette application est pleine. <br />
225
						Veuillez supprimer des images ou transmettre vos observations.
226
					</p>
227
				</div>
1552 isa 228
 
1733 isa 229
				<div data-role="popup" id="photo-zoom" class="ui-content">
230
					<span id="photo-zoom-infos"></span>
231
					<button data-role="button" data-theme="a" onclick="$('#photo-zoom').popup('close');">
232
						Fermer cet aperçu
233
					</button>
234
				</div>
235
 
1552 isa 236
				<div id="photo-suppression-infos"></div>
1733 isa 237
				<ul id="photos-obs" data-role="listview" data-inset="true"></ul>
238
				<canvas id="photo-canvas" class="hidden"></canvas>
1552 isa 239
			</div>
240
			<div data-role="footer" data-position="fixed">
241
				<div data-role="navbar">
242
					<ul>
243
						<li><a href="#saisie" class="saisie" data-role="button" data-icon="pencil" data-iconpos="notext">Saisie</a></li>
244
						<li><a href="#liste" data-role="button" data-icon="notepad" data-iconpos="notext">Liste de mes obs.</a></li>
245
					</ul>
246
				</div>
247
			</div>
248
		</div>
249
 
1244 jpm 250
		<div id="transmission" data-role="page">
251
			<div data-role="header">
252
				<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
253
				<h1>Transmission</h1>
1733 isa 254
				<a href="#infos" data-icon="info" data-iconpos="notext" class="ui-btn-right">Infos</a>
1244 jpm 255
			</div>
1733 isa 256
			<div data-role="content" data-theme="d">
257
				<p>
258
					<span id="identification-texte">
259
						Ajouter au compte
260
					</span>
261
					<strong><span id="utilisateur-compte"></span></strong>
262
				</p>
263
				<a href="#identification-popup" id="identification-btn"
264
					data-role="button" data-icon="grid" data-iconpos="right"
265
					data-rel="dialog" data-transition="pop" data-theme="b">
266
						Modifier le compte
267
				</a>
268
				<div id="identification-infos"></div>
269
				<hr />
270
				<button data-role="button" data-icon="cloud-black" id="transmettre-obs" >
271
					Transmettre
272
				</button>
273
			</div>
274
			<div data-role="footer" data-position="fixed">
275
				<div data-role="navbar">
276
					<ul>
277
						<li><a href="#saisie" class="saisie" data-role="button" data-icon="pencil" data-iconpos="notext">Saisie</a></li>
278
						<li><a href="#liste" data-role="button" data-icon="notepad" data-iconpos="notext">Liste de mes obs.</a></li>
279
					</ul>
280
				</div>
281
			</div>
282
		</div>
283
 
284
		<div id="identification-popup" data-role="page" data-history="false" data-close-btn="right">
285
			<div data-role="header">
286
				<h1>Compte Tela Botanica</h1>
287
			</div>
288
			<form id="form-transmission" method="post" action="#">
1244 jpm 289
				<div data-role="content">
290
					<div data-role="fieldcontain">
1552 isa 291
						<label for="courriel">Courriel * :</label>
1244 jpm 292
						<input id="courriel" type="email" name="courriel"/>
1733 isa 293
						<input id="id-utilisateur" name="id-utilisateur" type="hidden"/>
1552 isa 294
 
1733 isa 295
						<button id="valider-courriel" data-role="button"
296
							data-icon="forward" data-iconpos="">
297
								Vérifier ce compte Tela
1552 isa 298
						</button>
1244 jpm 299
					</div>
1733 isa 300
					<div id="zone-courriel-confirmation" data-role="fieldcontain" class="hidden">
301
						<label for="courriel-confirmation">
302
							<strong class="obligatoire">*</strong> Courriel (confirmation) :
303
						</label>
304
						<input id="courriel-confirmation" name="courriel-confirmation" type="text"/>
305
					</div>
306
					<div id="zone-prenom-nom" data-role="fieldcontain" class="hidden">
1552 isa 307
						<div>
1733 isa 308
							<label for="nom">Nom :</label>
309
							<input id="nom-utilisateur" name="nom" type="text"/>
1552 isa 310
						</div>
311
 
312
						<div>
1733 isa 313
							<label for="prenom">Prénom :</label>
314
							<input id="prenom-utilisateur" name="prenom" type="text"/>
1552 isa 315
						</div>
316
					</div>
1733 isa 317
					<input type="checkbox" name="courriel-memoire" id="courriel-memoire" checked="checked">
318
					<label for="courriel-memoire">Se souvenir de moi</label>
319
 
320
					<button id="valider-identification" data-role="button"
321
						data-icon="check" data-iconpos="right" data-theme="b">
322
							Valider le formulaire
323
					</button>
1244 jpm 324
				</div>
325
			</form>
1733 isa 326
			<div data-role="footer"></div>
327
		</div><!-- /page popup -->
1244 jpm 328
 
1733 isa 329
		<div id="infos" data-role="page" data-add-back-btn="true" data-back-btn-text="Retour">
1244 jpm 330
			<div data-role="header">
331
				<h1>Infos</h1>
332
			</div>
333
			<div data-role="content">
1552 isa 334
				<p>
335
					Développement :
336
					<ul>
337
						<li>Jean-Pascal MILCENT</li>
338
						<li>Isabelle NEMBROT</li>
339
					</ul>
340
					sur une idée originale de Aurélien PERONNET.
341
				</p>
1244 jpm 342
			</div>
343
			<div data-role="footer" data-position="fixed">
1733 isa 344
				<p class="center">
345
					Icônes par <a href="http://glyphish.com">Joseph Wain - Glyphish</a>. <br />
346
					© Copyright <span id="annee"></span> - <a href="http://www.tela-botanica.org/site:accueil">Tela Botanica</a>
347
				</p>
1244 jpm 348
			</div>
349
		</div>
350
	</body>
1552 isa 351
</html>