Subversion Repositories eFlore/Applications.cel

Rev

Rev 1516 | Rev 1733 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
1244 jpm 1 
<?php
1552 isa 2 
 
1244 jpm 3 
?>
4 
<!DOCTYPE html>
1552 isa 5 
<html lang="fr">
1244 jpm 6 
	<head>
7 
		<title>CEL Mobile</title>
8 
 
9 
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
10 
		<meta http-equiv="Content-style-type" content="text/css" />
11 
		<meta http-equiv="Content-script-type" content="text/javascript" />
12 
		<meta http-equiv="Content-language" content="fr" />
13 
 
14 
		<meta name="revisit-after" content="15 days" />
15 
        <meta name="robots" content="index,follow" />
16 
        <meta name="author" content="Jean-Pascal MILCENT, Mathilde SALTHUN-LASSALLE" />
17 
        <meta name="keywords" content="Tela Botanica, CEL, mobile" />
18 
        <meta name="description" content="Widget de saisie du CEL pour smartphone" />
19 
 
20 
		<!-- Favicones -->
21 
		<link rel="shortcut icon" type="image/x-icon" href="http://www.tela-botanica.org/favicon.ico" />
22 
 
23 
		<!-- Viewport -->
24 
		<meta name="viewport" content="width=device-width, initial-scale=1">
1552 isa 25 
		<meta name="apple-mobile-web-app-capable" content="yes" />
26 
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
1244 jpm 27 
 
28 
		<!-- CSS -->
1552 isa 29 
		<link rel="stylesheet" href="http://www.tela-botanica.org/commun/jquery/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
30 
		<link href="http://162.38.234.16/cel/widget/modules/saisie/squelettes/mobile/css/mobile.css" rel="stylesheet" type="text/css" media="screen" />
1244 jpm 31 
 
32 
		<!-- Javascript -->
33 
		<script src="http://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.min.js"></script>
34 
 
35 
		<!-- Javascript : appli saisie -->
36 
		<script type="text/javascript">
37 
		//<![CDATA[
1552 isa 38 
			//$url_base =  "http://www.tela-botanica.org/widget-test:cel:";
39 
			// manifest="<?=$url_base?>modules/saisie/squelettes/mobile/mobile.appcache";
1244 jpm 40 
			// La présence du parametre 'debug' dans l'URL enclenche le dégogage
41 
			var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
1552 isa 42 
			// Nombre d'observations max autorisé avant transmission
43 
			var OBS_MAX_NBRE = 10;
44 
			// Mot-clé du widget/projet
45 
			var TAG_PROJET = "WidgetSaisie";
46 
			// URL du web service réalisant l'insertion des données dans la base du CEL.
47 
			var SERVICE_SAISIE_URL = "http://www.tela-botanica.org/service:cel:CelWidgetSaisie";
48 
			// URL du web service annuaire des membres du réseau.
49 
			var SERVICE_ANNUAIRE = "http://www.tela-botanica.org/client/annuaire_nouveau/actuelle/jrest/utilisateur/identite-par-courriel/";
50 
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
51 
			var SERVICE_NOM_COMMUNE_URL = "http://www.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
52 
			// URL de l'icône du calendrier
53 
			var PAS_DE_PHOTO_ICONE_URL = "http://www.tela-botanica.org/widget-test:cel:modules/saisie/squelettes/defaut/img/icones/pasdephoto.png";
54 
			// Texte en absence de connexion
55 
			var TEXTE_HORS_LIGNE = "Aucune connexion.";
56 
			// Texte d'identification des observations
57 
			var TEXTE_OBS = "obsId";
58 
			// Texte d'identification des photos
59 
			var TEXTE_PHOTO = "photoId";
1244 jpm 60 
		//]]>
61 
		</script>
1552 isa 62 
		<script type="text/javascript" src="http://162.38.234.16/cel/widget/modules/saisie/squelettes/mobile/js/mobile.js"></script>
1244 jpm 63 
 
64 
		<!-- Javascript : Jquery Mobile -->
1552 isa 65 
		<script src="http://www.tela-botanica.org/commun/jquery/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
1244 jpm 66 
	</head>
1552 isa 67 
 
68 
 
1244 jpm 69 
	<body data-theme="b">
70 
		<div id="menu" data-role="page" data-add-back-btn="true" data-back-btn-text="Retour">
71 
			<div data-role="header">
1552 isa 72 
				<h1>Accueil</h1>
73 
				<a href="#infos" data-icon="info" data-iconpos="notext" class="ui-btn-right">Infos</a>
1244 jpm 74 
			</div>
75 
			<div data-role="content" data-theme="g">
76 
				<ul data-role="listview">
77 
					<li>
78 
						<img src="http://www.tela-botanica.org/commun/icones/glyphish/187-pencil.png" class="ui-li-icon"/>
1552 isa 79 
						<a href="#saisie" class="saisie" data-role="button">Saisir une observation</a>
1244 jpm 80 
					</li>
81 
					<li>
82 
						<img src="http://www.tela-botanica.org/commun/icones/glyphish/179-notepad.png" class="ui-li-icon"/>
83 
						<a href="#liste" data-role="button">Voir mes observations</a>
84 
					</li>
85 
					<li>
86 
						<img src="http://www.tela-botanica.org/commun/icones/glyphish/56-cloud.png" class="ui-li-icon"/>
87 
						<a href="#transmission" data-role="button">Transmettre mes observations</a>
88 
					</li>
89 
				</ul>
90 
			</div>
91 
			<div data-role="footer" data-position="fixed">
92 
			</div>
93 
		</div>
94 
 
1552 isa 95 
 
1244 jpm 96 
		<div id="saisie" data-role="page">
97 
			<div data-role="header" data-position="inline">
98 
				<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
1552 isa 99 
				<h1>Saisie</h1>
100 
<!-- 			<a href="#liste" data-icon="notepad" data-iconpos="notext">Liste des obs</a> -->
1244 jpm 101 
			</div>
102 
			<form id="form_saisie_observation" method="post" action="#">
103 
				<div data-role="content">
1248 jpm 104 
					<div id="obs-saisie-infos"></div>
1244 jpm 105 
					<div data-role="fieldcontain">
1552 isa 106 
						<label for="nom">Espèce :</label>
107 
						<input id="nom" type="text" name="nom" value="<?=$_GET['nom_sci']?>" />
108 
<!--
109 
<div data-role="fieldcontain">
110 
<ul data-role="listview" style="height:120px; overflow:scroll; width: 90%" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search cars...">
111 
    <li><a href="#">Acura</a></li>
112 
    <li><a href="#">Audi</a></li>
113 
    <li><a href="#">BMW</a></li>
114 
    <li><a href="#">Cadillac</a></li>
115 
    <li><a href="#">Chrysler</a></li>
116 
    <li><a href="#">Dodge</a></li>
117 
    <li><a href="#">Ferrari</a></li>
118 
    <li><a href="#">Ford</a></li>
119 
    <li><a href="#">GMC</a></li>
120 
    <li><a href="#">Honda</a></li>
121 
    <li><a href="#">Hyundai</a></li>
122 
    <li><a href="#">Infiniti</a></li>
123 
    <li><a href="#">Jeep</a></li>
124 
    <li><a href="#">Kia</a></li>
125 
    <li><a href="#">Lexus</a></li>
126 
    <li><a href="#">Mini</a></li>
127 
    <li><a href="#">Nissan</a></li>
128 
    <li><a href="#">Porsche</a></li>
129 
    <li><a href="#">Subaru</a></li>
130 
    <li><a href="#">Toyota</a></li>
131 
    <li><a href="#">Volkswagen</a></li>
132 
    <li><a href="#">Volvo</a></li>
133 
</ul>
134 
</div>
135 
-->
136 
						<label for="date">Date :</label>
137 
						<input id="date" type="text" name="date" />
1244 jpm 138 
 
1552 isa 139 
						<button id="geolocaliser"
140 
								data-role="button" data-icon="search" data-iconpos="" data-ajax="false">
141 
							Recalculer ma position
142 
						</button>
1244 jpm 143 
 
1552 isa 144 
						<label for="lat">
145 
							Latitude :
146 
							<span id="lat"></span>
147 
						</label>
1244 jpm 148 
 
1552 isa 149 
						<br />
150 
						<label for="lng">
151 
							Longitude :
152 
							<span id="lng"></span>
153 
						</label>
1244 jpm 154 
 
1552 isa 155 
						<br />
156 
						<label for="location">
157 
							Commune :
158 
							<span id="location"></span>
159 
							<input id="code_insee" type="hidden" name="code_insee" />
160 
						</label>
161 
 
162 
						<br />
163 
						<button id="sauver-obs" data-role="button" data-icon="check">Sauver</button>
164 
 
165 
						<input id="referentiel" type="hidden" name="referentiel" value="<?=$_GET['ref']?>"/>
166 
						<input id="nom_sci_select" type="hidden" name="nom_sci_select" value="<?=$_GET['nom_sci']?>"/>
167 
						<input id="num_nom_select" type="hidden" name="num_nom_select" value="<?=$_GET['num_nom']?>"/>
1244 jpm 168 
					</div>
169 
				</div>
170 
				<div data-role="footer" data-position="fixed">
1552 isa 171 
					<div data-role="navbar">
172 
						<ul>
173 
							<li><a href="#liste" data-role="button" data-icon="notepad" data-iconpos="notext">Liste de mes obs.</a></li>
174 
							<li><a href="#transmission" data-role="button" data-icon="cloud" data-iconpos="notext">Transmission</a></li>
175 
						</ul>
176 
					</div>
1244 jpm 177 
				</div>
178 
			</form>
179 
		</div>
180 
 
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>
186 
			</div>
187 
			<div data-role="content">
1552 isa 188 
				<div id="obs-suppression-infos"></div>
189 
				<ul id="liste_obs" data-role="listview" data-split-icon="delete" data-split-theme="g" data-theme="g" data-inset="true"></ul>
1244 jpm 190 
			</div>
191 
			<div data-role="footer" data-position="fixed">
192 
				<div data-role="navbar">
193 
					<ul>
1552 isa 194 
						<li><a href="#saisie" class="saisie" data-role="button" data-icon="pencil" data-iconpos="notext">Saisie</a></li>
1244 jpm 195 
						<li><a href="#transmission" data-role="button" data-icon="cloud" data-iconpos="notext">Transmission</a></li>
196 
					</ul>
197 
				</div>
198 
			</div>
199 
		</div>
200 
 
1552 isa 201 
 
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>
206 
			</div>
207 
			<div data-role="content">
208 
				<label for="id_obs">Identifiant :</label> <span id="id_obs"></span>
209 
				<div id="details_obs"></div>
210 
 
211 
				<input type="file" id="pic" name="photos_obs[]" accept="image/*" multiple>
212 
				<button id="valider_photos"
213 
						data-role="button" data-icon="search" data-iconpos="" data-ajax="false">
214 
					Ajouter les images sélectionnées
215 
				</button>
216 
 
217 
				<div id="photo-suppression-infos"></div>
218 
				<ul id="photos_obs" data-role="listview" data-inset="true"></ul>
219 
			</div>
220 
			<div data-role="footer" data-position="fixed">
221 
				<div data-role="navbar">
222 
					<ul>
223 
						<li><a href="#saisie" class="saisie" data-role="button" data-icon="pencil" data-iconpos="notext">Saisie</a></li>
224 
						<li><a href="#liste" data-role="button" data-icon="notepad" data-iconpos="notext">Liste de mes obs.</a></li>
225 
					</ul>
226 
				</div>
227 
			</div>
228 
		</div>
229 
 
230 
 
1244 jpm 231 
		<div id="transmission" data-role="page">
232 
			<div data-role="header">
233 
				<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
234 
				<h1>Transmission</h1>
1552 isa 235 
<!--			<a href="#liste" data-icon="notepad" data-iconpos="notext">Observations</a> -->
1244 jpm 236 
			</div>
1552 isa 237 
			<form id="form_transmission" method="post" action="#">
1244 jpm 238 
				<div data-role="content">
239 
					<div data-role="fieldcontain">
1552 isa 240 
						<label for="courriel">Courriel * :</label>
1244 jpm 241 
						<input id="courriel" type="email" name="courriel"/>
1552 isa 242 
						<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
243 
 
244 
						<input type="checkbox" name="courriel_memoire" id="courriel_memoire" checked="checked">
245 
						<label for="courriel_memoire">Se souvenir de moi</label>
246 
						<button id="valider_courriel"
247 
								data-role="button" data-icon="search" data-iconpos="" data-ajax="false">
248 
							Valider cet email
249 
						</button>
1244 jpm 250 
					</div>
1552 isa 251 
					<div id="zone_prenom_nom" data-role="fieldcontain" class="hidden">
252 
						<div>
253 
							<label for="prenom">Prénom :</label>
254 
							<input id="prenom_utilisateur" name="prenom" type="text"/>
255 
						</div>
256 
 
257 
						<div>
258 
							<label for="nom">Nom :</label>
259 
							<input id="nom_utilisateur" name="nom" type="text"/>
260 
						</div>
261 
					</div>
262 
					<div id="zone_courriel_confirmation" data-role="fieldcontain" class="hidden">
263 
						<label for="courriel_confirmation">
264 
							<strong class="obligatoire">*</strong> Courriel (confirmation) : <br />
265 
						</label>
266 
						<input id="courriel_confirmation" name="courriel_confirmation" type="text"/>
267 
					</div>
268 
					<button data-role="button" data-icon="cloud-black" onclick="transmettreObs();" >Transmettre</button>
1244 jpm 269 
				</div>
270 
				<div data-role="footer" data-position="fixed">
1552 isa 271 
					<div data-role="navbar">
272 
						<ul>
273 
							<li><a href="#saisie" class="saisie" data-role="button" data-icon="pencil" data-iconpos="notext">Saisie</a></li>
274 
							<li><a href="#liste" data-role="button" data-icon="notepad" data-iconpos="notext">Liste de mes obs.</a></li>
275 
						</ul>
276 
					</div>
1244 jpm 277 
				</div>
278 
			</form>
279 
		</div>
1552 isa 280 
 
1244 jpm 281 
 
282 
		<div id="infos" data-role="page">
283 
			<div data-role="header">
284 
				<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
285 
				<h1>Infos</h1>
286 
			</div>
287 
			<div data-role="content">
288 
				<p>Icônes par <a href="http://glyphish.com">Joseph Wain - Glyphish</a>.</p>
1552 isa 289 
				<p>
290 
					Développement :
291 
					<ul>
292 
						<li>Jean-Pascal MILCENT</li>
293 
						<li>Isabelle NEMBROT</li>
294 
					</ul>
295 
					sur une idée originale de Aurélien PERONNET.
296 
				</p>
1244 jpm 297 
			</div>
298 
			<div data-role="footer" data-position="fixed">
1552 isa 299 
				<p>© Copyright <span id="annee"></span> - <a href="http://www.tela-botanica.org/site:accueil">Tela Botanica</a></p>
1244 jpm 300 
			</div>
301 
		</div>
302 
	</body>
1552 isa 303 
</html>