Subversion Repositories eFlore/Applications.cel

Rev

Rev 1516 | Go to most recent revision | 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>