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