Subversion Repositories eFlore/Applications.cel

Rev

Rev 1516 | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 1516 Rev 1552
Line 1... Line 1...
1
<?php
1
<?php
2
$annee = date('Y');
-
 
3
$aujourdhui = date('d/m/Y');
-
 
-
 
2
 
4
?>
3
?>
5
<!DOCTYPE html>
4
<!DOCTYPE html>
6
<html lang="fr" manifest="<?=$url_base?>modules/saisie/squelettes/mobile/mobile.appcache"> 
5
<html lang="fr"> 
7
	<head> 
6
	<head> 
8
		<title>CEL Mobile</title> 
7
		<title>CEL Mobile</title> 
Line 9... Line 8...
9
		
8
		
10
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
9
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
Line 21... Line 20...
21
		<!-- Favicones -->
20
		<!-- Favicones -->
22
		<link rel="shortcut icon" type="image/x-icon" href="http://www.tela-botanica.org/favicon.ico" />
21
		<link rel="shortcut icon" type="image/x-icon" href="http://www.tela-botanica.org/favicon.ico" />
Line 23... Line 22...
23
		
22
		
24
		<!-- Viewport -->
23
		<!-- Viewport -->
-
 
24
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
-
 
25
		<meta name="apple-mobile-web-app-capable" content="yes" />    
Line 25... Line 26...
25
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
26
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
26
		
27
		
27
		<!-- CSS -->
28
		<!-- CSS -->
Line 28... Line 29...
28
		<link rel="stylesheet" href="http://www.tela-botanica.org/commun/jquery/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
29
		<link rel="stylesheet" href="http://www.tela-botanica.org/commun/jquery/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
29
		<link href="<?=$url_base?>modules/saisie/squelettes/mobile/css/<?=isset($_GET['style']) ? $_GET['style'] : 'mobile'?>.css" rel="stylesheet" type="text/css" media="screen" />
30
		<link href="http://162.38.234.16/cel/widget/modules/saisie/squelettes/mobile/css/mobile.css" rel="stylesheet" type="text/css" media="screen" />
Line 30... Line 31...
30
		
31
		
31
		<!-- Javascript -->
32
		<!-- Javascript -->
32
		<script src="http://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.min.js"></script>
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 -->
33
		
36
		<script type="text/javascript">
34
		<!-- Javascript : appli saisie -->
37
		//<![CDATA[
-
 
38
			//$url_base =  "http://www.tela-botanica.org/widget-test:cel:";
-
 
39
			// manifest="<?=$url_base?>modules/saisie/squelettes/mobile/mobile.appcache";
-
 
40
			// La présence du parametre 'debug' dans l'URL enclenche le dégogage
-
 
41
			var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
-
 
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.";
35
		<script type="text/javascript">
56
			// Texte d'identification des observations
36
		//<![CDATA[
57
			var TEXTE_OBS = "obsId";
37
			// La présence du parametre 'debug' dans l'URL enclenche le dégogage
58
			// Texte d'identification des photos
Line 38... Line 59...
38
			var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
59
			var TEXTE_PHOTO = "photoId";
39
		//]]>
60
		//]]>
40
		</script>
61
		</script>
-
 
62
		<script type="text/javascript" src="http://162.38.234.16/cel/widget/modules/saisie/squelettes/mobile/js/mobile.js"></script>
-
 
63
		
41
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/mobile/js/mobile.js"></script>
64
		<!-- Javascript : Jquery Mobile -->
42
		
65
		<script src="http://www.tela-botanica.org/commun/jquery/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
43
		<!-- Javascript : Jquery Mobile -->
66
	</head>
44
		<script src="http://www.tela-botanica.org/commun/jquery/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
-
 
45
	</head>
67
	
46
	<body data-theme="b">
-
 
47
		<div id="menu" data-role="page" data-add-back-btn="true" data-back-btn-text="Retour">
68
	
48
			<div data-role="header">
-
 
49
				<?php if($titre == 'defaut' ) { ?>
69
	<body data-theme="b">
50
					<h1>Accueil</h1>
70
		<div id="menu" data-role="page" data-add-back-btn="true" data-back-btn-text="Retour">
51
				<?php } else { ?>
71
			<div data-role="header">
52
					<h1><?= $titre ?></h1>
72
				<h1>Accueil</h1>
53
				<?php } ?>
73
				<a href="#infos" data-icon="info" data-iconpos="notext" class="ui-btn-right">Infos</a>
54
			</div>
74
			</div>
55
			<div data-role="content" data-theme="g">
75
			<div data-role="content" data-theme="g">
56
				<ul data-role="listview">
76
				<ul data-role="listview">
57
					<li>
77
					<li>
58
						<img src="http://www.tela-botanica.org/commun/icones/glyphish/187-pencil.png" class="ui-li-icon"/>
78
						<img src="http://www.tela-botanica.org/commun/icones/glyphish/187-pencil.png" class="ui-li-icon"/>
59
						<a href="#saisie" data-role="button">Saisir une observation</a>
79
						<a href="#saisie" class="saisie" data-role="button">Saisir une observation</a>
Line 67... Line 87...
67
						<a href="#transmission" data-role="button">Transmettre mes observations</a>
87
						<a href="#transmission" data-role="button">Transmettre mes observations</a>
68
					</li>
88
					</li>
69
				</ul>
89
				</ul>
70
			</div>
90
			</div>
71
			<div data-role="footer" data-position="fixed">
91
			<div data-role="footer" data-position="fixed">
72
				<a href="#infos" data-role="button">Infos</a>
-
 
73
			</div>
92
			</div>
74
		</div>
93
		</div>
Line -... Line 94...
-
 
94
		
75
		
95
		
76
		<div id="saisie" data-role="page">
96
		<div id="saisie" data-role="page">
77
			<div data-role="header" data-position="inline">
97
			<div data-role="header" data-position="inline">
78
				<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
98
				<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
79
				<h1>Saisie</h1>
99
				<h1>Saisie</h1>				
80
				<a href="#liste" data-icon="notepad" data-iconpos="notext">Liste des obs</a>
100
<!-- 			<a href="#liste" data-icon="notepad" data-iconpos="notext">Liste des obs</a> -->
81
			</div>
101
			</div>
82
			<form id="form_saisie_observation" method="post" action="#">
102
			<form id="form_saisie_observation" method="post" action="#">
83
				<div data-role="content">
103
				<div data-role="content">
84
					<div id="obs-saisie-infos"></div>
104
					<div id="obs-saisie-infos"></div>
85
					<div data-role="fieldcontain">
-
 
86
						<!-- 
105
					<div data-role="fieldcontain">
87
						<label for="location">Commune :</label>
106
						<label for="nom">Espèce :</label>
88
						<input type="text" name="location" id="location"/>
107
						<input id="nom" type="text" name="nom" value="<?=$_GET['nom_sci']?>" />
-
 
108
<!--  
89
						 -->
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>
90
						<button id="geolocaliser" data-role="button" data-icon="search" data-iconpos="">Trouver ma position</button>
135
-->
91
						<label for="lat">Latitude :</label>
136
						<label for="date">Date :</label>
Line 92... Line 137...
92
						<input id="lat" type="text" name="lat"/>
137
						<input id="date" type="text" name="date" />
93
						
138
						
-
 
139
						<button id="geolocaliser" 
-
 
140
								data-role="button" data-icon="search" data-iconpos="" data-ajax="false">
Line 94... Line 141...
94
						<label for="lng">Longitude :</label>
141
							Recalculer ma position
-
 
142
						</button>
95
						<input id="lng" type="text" name="lng"/>
143
						
-
 
144
						<label for="lat">
-
 
145
							Latitude :
-
 
146
							<span id="lat"></span>
-
 
147
						</label>
-
 
148
						
-
 
149
						<br />
-
 
150
						<label for="lng">
Line -... Line 151...
-
 
151
							Longitude :
96
						
152
							<span id="lng"></span>
-
 
153
						</label>
-
 
154
						
97
						<label for="date">Date :</label>
155
						<br />
-
 
156
						<label for="location">
Line -... Line 157...
-
 
157
							Commune :
-
 
158
							<span id="location"></span>
-
 
159
							<input id="code_insee" type="hidden" name="code_insee" />
-
 
160
						</label>
-
 
161
						
98
						<input id="date" type="text" name="date" value="<?=$aujourdhui?>"/>
162
						<br />
99
						
163
						<button id="sauver-obs" data-role="button" data-icon="check">Sauver</button>
100
						<label for="nom">Espece :</label>
164
						
101
						<input id="nom" type="text" name="nom"/>
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']?>"/>
-
 
168
					</div>
102
						
169
				</div>
-
 
170
				<div data-role="footer" data-position="fixed">
-
 
171
					<div data-role="navbar">
103
						<input id="num_nom" type="hidden" name="num_nom"/>
172
						<ul>
104
					</div>
173
							<li><a href="#liste" data-role="button" data-icon="notepad" data-iconpos="notext">Liste de mes obs.</a></li>
105
				</div>
174
							<li><a href="#transmission" data-role="button" data-icon="cloud" data-iconpos="notext">Transmission</a></li>
Line -... Line 175...
-
 
175
						</ul>
106
				<div data-role="footer" data-position="fixed">
176
					</div>
107
					<button id="sauver-obs" data-role="button" data-icon="check">Sauver</button>
177
				</div>
108
				</div>
178
			</form>
109
			</form>
179
		</div>
110
		</div>
180
		
111
		
181
		
-
 
182
		<div id="liste" data-role="page">
112
		<div id="liste" data-role="page">
183
			<div data-role="header" data-position="inline">
113
			<div data-role="header" data-position="inline">
184
				<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
114
				<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
185
				<h1>Observations</h1>
115
				<h1>Observations</h1>
186
			</div>
116
			</div>
187
			<div data-role="content">
117
			<div data-role="content">
188
				<div id="obs-suppression-infos"></div>
118
				<ul id="liste-obs" data-role="listview" data-split-icon="delete" data-split-theme="g" data-theme="g" data-inset="true"></ul>
189
				<ul id="liste_obs" data-role="listview" data-split-icon="delete" data-split-theme="g" data-theme="g" data-inset="true"></ul>
119
			</div>
190
			</div>
120
			<div data-role="footer" data-position="fixed">
191
			<div data-role="footer" data-position="fixed">
121
				<div data-role="navbar">
192
				<div data-role="navbar">
122
					<ul>
193
					<ul>
Line -... Line 194...
-
 
194
						<li><a href="#saisie" class="saisie" data-role="button" data-icon="pencil" data-iconpos="notext">Saisie</a></li>
-
 
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
		
-
 
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>
123
						<li><a href="#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>
124
						<li><a href="#transmission" data-role="button" data-icon="cloud" data-iconpos="notext">Transmission</a></li>
225
					</ul>
125
					</ul>
226
				</div>
126
				</div>
227
			</div>
127
			</div>
228
		</div>
128
		</div>
229
		
129
		
230
		
130
		<div id="transmission" data-role="page">
231
		<div id="transmission" data-role="page">
131
			<div data-role="header">
232
			<div data-role="header">
132
				<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
233
				<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
133
				<h1>Transmission</h1>
234
				<h1>Transmission</h1>
-
 
235
<!--			<a href="#liste" data-icon="notepad" data-iconpos="notext">Observations</a> -->
-
 
236
			</div>
-
 
237
			<form id="form_transmission" method="post" action="#">
-
 
238
				<div data-role="content">
-
 
239
					<div data-role="fieldcontain"> 
-
 
240
						<label for="courriel">Courriel * :</label>
-
 
241
						<input id="courriel" type="email" name="courriel"/>
-
 
242
						<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
134
				<a href="#saisie" data-icon="notepad" data-iconpos="notext">Saisie</a>
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>
-
 
250
					</div>
-
 
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>
135
			</div>
262
					<div id="zone_courriel_confirmation" data-role="fieldcontain" class="hidden">
136
			<form id="form-transmission" method="post" action="#">
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"/>
137
				<div data-role="content">
267
					</div>
-
 
268
					<button data-role="button" data-icon="cloud-black" onclick="transmettreObs();" >Transmettre</button>
-
 
269
				</div>
138
					<div data-role="fieldcontain"> 
270
				<div data-role="footer" data-position="fixed">
139
						<label for="courriel">Courriel :</label>
271
					<div data-role="navbar">
140
						<input id="courriel" type="email" name="courriel"/>
272
						<ul>
-
 
273
							<li><a href="#saisie" class="saisie" data-role="button" data-icon="pencil" data-iconpos="notext">Saisie</a></li>
Line 141... Line 274...
141
					</div>
274
							<li><a href="#liste" data-role="button" data-icon="notepad" data-iconpos="notext">Liste de mes obs.</a></li>
142
				</div>
275
						</ul>
143
				<div data-role="footer" data-position="fixed">
276
					</div>
144
					<button data-role="button" data-icon="cloud">Transmettre</button>
277
				</div>
145
				</div>
278
			</form>
146
			</form>
279
		</div>
147
		</div>
280
						
-
 
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>
148
		
289
				<p>
149
		<div id="infos" data-role="page">
290
					Développement : 
150
			<div data-role="header">
291
					<ul>
151
				<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
292
						<li>Jean-Pascal MILCENT</li>
152
				<h1>Infos</h1>
293
						<li>Isabelle NEMBROT</li>
153
			</div>
294
					</ul>
154
			<div data-role="content">
-
 
155
				<p>Icônes par <a href="http://glyphish.com">Joseph Wain - Glyphish</a>.</p>
295
					sur une idée originale de Aurélien PERONNET.
-
 
296
				</p>