Subversion Repositories eFlore/Applications.cel

Compare Revisions

Ignore whitespace Rev 1343 → Rev 1344

/trunk/widget/modules/saisie/squelettes/mobile/css/mobile.css
New file
0,0 → 1,30
@CHARSET "UTF-8";
/*+--------------------------------------------------------------------------------------------------------+*/
/* Balises */
 
/*+--------------------------------------------------------------------------------------------------------+*/
/* Générique */
.ui-icon-pencil{
background:url(http://www.tela-botanica.org/commun/icones/glyphish/187-pencil-white.png) no-repeat;
}
.ui-icon-notepad{
background:url(http://www.tela-botanica.org/commun/icones/glyphish/179-notepad-white.png) no-repeat;
}
.ui-icon-cloud{
background:url(http://www.tela-botanica.org/commun/icones/glyphish/56-cloud-white.png) no-repeat;
}
.ui-icon-radar{
background:url(http://www.tela-botanica.org/commun/icones/glyphish/73-radar-white.png) no-repeat;
}
/*+--------------------------------------------------------------------------------------------------------+*/
/* Formulaire à l'application */
#conteneur_reponse{
display:none;
}
.reponse{
background-color:#D5F2B6;
padding:20px;
text-align:center;
font-size:1.2 em;
font-weight:bold;
}
/trunk/widget/modules/saisie/squelettes/mobile/mobile.tpl.html
New file
0,0 → 1,158
<?php
$annee = date('Y');
$aujourdhui = date('d/m/Y');
?>
<!DOCTYPE html>
<html lang="fr" manifest="<?=$url_base?>modules/saisie/squelettes/mobile/mobile.appcache">
<head>
<title>CEL Mobile</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-style-type" content="text/css" />
<meta http-equiv="Content-script-type" content="text/javascript" />
<meta http-equiv="Content-language" content="fr" />
<meta name="revisit-after" content="15 days" />
<meta name="robots" content="index,follow" />
<meta name="author" content="Jean-Pascal MILCENT, Mathilde SALTHUN-LASSALLE" />
<meta name="keywords" content="Tela Botanica, CEL, mobile" />
<meta name="description" content="Widget de saisie du CEL pour smartphone" />
<!-- Favicones -->
<link rel="shortcut icon" type="image/x-icon" href="http://www.tela-botanica.org/favicon.ico" />
<!-- Viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<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" />
<link href="<?=$url_base?>modules/saisie/squelettes/mobile/css/<?=isset($_GET['style']) ? $_GET['style'] : 'mobile'?>.css" rel="stylesheet" type="text/css" media="screen" />
<!-- Javascript -->
<script src="http://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.min.js"></script>
<!-- Javascript : appli saisie -->
<script type="text/javascript">
//<![CDATA[
// La présence du parametre 'debug' dans l'URL enclenche le dégogage
var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
//]]>
</script>
<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/mobile/js/mobile.js"></script>
<!-- Javascript : Jquery Mobile -->
<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>
</head>
<body data-theme="b">
<div id="menu" data-role="page" data-add-back-btn="true" data-back-btn-text="Retour">
<div data-role="header">
<h1>Accueil</h1>
</div>
<div data-role="content" data-theme="g">
<ul data-role="listview">
<li>
<img src="http://www.tela-botanica.org/commun/icones/glyphish/187-pencil.png" class="ui-li-icon"/>
<a href="#saisie" data-role="button">Saisir une observation</a>
</li>
<li>
<img src="http://www.tela-botanica.org/commun/icones/glyphish/179-notepad.png" class="ui-li-icon"/>
<a href="#liste" data-role="button">Voir mes observations</a>
</li>
<li>
<img src="http://www.tela-botanica.org/commun/icones/glyphish/56-cloud.png" class="ui-li-icon"/>
<a href="#transmission" data-role="button">Transmettre mes observations</a>
</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<a href="#infos" data-role="button">Infos</a>
</div>
</div>
<div id="saisie" data-role="page">
<div data-role="header" data-position="inline">
<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
<h1>Saisie</h1>
<a href="#liste" data-icon="notepad" data-iconpos="notext">Liste des obs</a>
</div>
<form id="form_saisie_observation" method="post" action="#">
<div data-role="content">
<div id="obs-saisie-infos"></div>
<div data-role="fieldcontain">
<!--
<label for="location">Commune :</label>
<input type="text" name="location" id="location"/>
-->
<button id="geolocaliser" data-role="button" data-icon="search" data-iconpos="">Trouver ma position</button>
<label for="lat">Latitude :</label>
<input id="lat" type="text" name="lat"/>
<label for="lng">Longitude :</label>
<input id="lng" type="text" name="lng"/>
<label for="date">Date :</label>
<input id="date" type="text" name="date" value="<?=$aujourdhui?>"/>
<label for="nom">Espece :</label>
<input id="nom" type="text" name="nom"/>
<input id="num_nom" type="hidden" name="num_nom"/>
</div>
</div>
<div data-role="footer" data-position="fixed">
<button id="sauver-obs" data-role="button" data-icon="check">Sauver</button>
</div>
</form>
</div>
<div id="liste" data-role="page">
<div data-role="header" data-position="inline">
<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
<h1>Observations</h1>
</div>
<div data-role="content">
<ul id="liste-obs" data-role="listview" data-split-icon="delete" data-split-theme="g" data-theme="g" data-inset="true"></ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#saisie" data-role="button" data-icon="pencil" data-iconpos="notext">Saisie</a></li>
<li><a href="#transmission" data-role="button" data-icon="cloud" data-iconpos="notext">Transmission</a></li>
</ul>
</div>
</div>
</div>
<div id="transmission" data-role="page">
<div data-role="header">
<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
<h1>Transmission</h1>
<a href="#saisie" data-icon="notepad" data-iconpos="notext">Saisie</a>
</div>
<form id="form-transmission" method="post" action="#">
<div data-role="content">
<div data-role="fieldcontain">
<label for="courriel">Courriel :</label>
<input id="courriel" type="email" name="courriel"/>
</div>
</div>
<div data-role="footer" data-position="fixed">
<button data-role="button" data-icon="cloud">Transmettre</button>
</div>
</form>
</div>
<div id="infos" data-role="page">
<div data-role="header">
<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
<h1>Infos</h1>
</div>
<div data-role="content">
<p>Icônes par <a href="http://glyphish.com">Joseph Wain - Glyphish</a>.</p>
</div>
<div data-role="footer" data-position="fixed">
<p>©Copyright <?=$annee?> - <a href="http://www.tela-botanica.org/site:accueil">Tela Botanica</a></p>
</div>
</div>
</body>
</html>
/trunk/widget/modules/saisie/squelettes/mobile/mobile.appcache
New file
0,0 → 1,18
CACHE MANIFEST
# v2 - 2012-03-28
# Fichier Manifest pour le cache du widget Mobile.
CACHE:
http://localhost/eflore/applications/cel-widget_cisaille/modules/saisie/squelettes/mobile/css/mobile.css
http://localhost/eflore/applications/cel-widget_cisaille/modules/saisie/squelettes/mobile/js/mobile.js
http://www.tela-botanica.org/favicon.ico
http://www.tela-botanica.org/commun/jquery/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css
http://www.tela-botanica.org/commun/jquery/mobile/1.1.0-rc.1/images/*
http://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.min.js
http://www.tela-botanica.org/commun/jquery/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js
http://www.tela-botanica.org/commun/icones/glyphish/187-pencil.png
http://www.tela-botanica.org/commun/icones/glyphish/179-notepad.png
http://www.tela-botanica.org/commun/icones/glyphish/56-cloud.png
http://www.tela-botanica.org/commun/icones/glyphish/73-radar-white.png
http://www.tela-botanica.org/commun/icones/glyphish/187-pencil-white.png
http://www.tela-botanica.org/commun/icones/glyphish/179-notepad-white.png
http://www.tela-botanica.org/commun/icones/glyphish/56-cloud-white.png
/trunk/widget/modules/saisie/squelettes/mobile/js/mobile.js
New file
0,0 → 1,124
//+----------------------------------------------------------------------------------------------------------+
// Initialisation de Jquery mobile
$(document).bind("mobileinit", function(){
$.mobile.defaultPageTransition = "fade";
});
 
//+----------------------------------------------------------------------------------------------------------+
// Géolocalisation
var gps = navigator.geolocation;
 
$(document).ready(function() {
$('#geolocaliser').on('click', geolocaliser);
});
 
function geolocaliser(event) {
if (gps) {
navigator.geolocation.getCurrentPosition(surSuccesGeoloc, surErreurGeoloc);
} else {
var erreur = {code:'0', message:'Géolocalisation non supportée par le navigateur'};
surErreurGeoloc(erreur);
}
event.stopPropagation();
event.preventDefault();
}
function surSuccesGeoloc(position){
if (position){
var lat = position.coords.latitude;
var lng = position.coords.longitude;
$('#lat').val(lat);
$('#lng').val(lng);
}
}
function surErreurGeoloc(error){
alert("Echec de la géolocalisation, code: " + error.code + " message: "+ error.message);
}
//+----------------------------------------------------------------------------------------------------------+
// Local Storage
var bdd = window.localStorage;
bdd.clear();
$(document).ready(function() {
$('#sauver-obs').on('click', ajouterObs);
$('body').on('pageshow', '#liste', chargerListeObs);
});
 
function ajouterObs(event) {
var obs = {num:0, date:'', lat:'', lng:'', nom:''};
obs.num = (bdd.length + 1);
obs.date = $('#date').val();
obs.lat = $('#lat').val();
obs.lng = $('#lng').val();
obs.nom = $('#nom').val();
var cle = 'obs'+obs.num;
var val = JSON.stringify(obs);
bdd.setItem(cle, val);
var txt = 'Observation n°'+obs.num+'/'+bdd.length+' créée';
$('#obs-saisie-infos').html('<p class="reponse ui-btn-inner ui-btn-corner-all">'+txt+'</p>')
.fadeIn("slow")
.delay(1600)
.fadeOut("slow");
event.stopPropagation();
event.preventDefault();
}
 
function supprimerObs(event) {
var cle = 'obs'+obs.num;
bdd.removeItem(cle);
var txt = 'Observation n°'+obs.num+' supprimée';
$('#obs-saisie-infos').html('<p class="reponse ui-btn-inner ui-btn-corner-all">'+txt+'</p>')
.fadeIn("slow")
.delay(1600)
.fadeOut("slow");
event.stopPropagation();
event.preventDefault();
}
 
function chargerListeObs() {
$('#liste-obs').empty();
var nbre = bdd.length;
for (var i = 0; i < nbre; i++) {
var cle = 'obs'+(i+1);
var obs = JSON.parse(bdd.getItem(cle));
$('#liste-obs').append(
'<li>'+
'<img src="http://www.tela-botanica.org/widget-test:cel:modules/saisie/squelettes/defaut/img/icones/pasdephoto.png" />'+
'<a href="#'+cle+'" data-split-icon="next" data-split-theme="a" title="Voir la fiche" data-obs-num="'+obs.num+'">'+
'<strong>'+obs.nom+'</strong> observé le '+obs.date+' à lat : '+obs.lat+' lng : '+obs.lng+
'</a>'+
'<a href="#" title="Supprimer l\'observation" data-obs-num="'+obs.num+'">'+
'Supprimer'+
'</a>'+
'</li>'
);
}
$('#liste-obs').listview('refresh');
}
 
 
//+----------------------------------------------------------------------------------------------------------+
// Manifest Cache
var appCache = window.applicationCache;
 
$(document).ready(function() {
appCache.addEventListener('updateready', function() {
alert('Mise à jour :'+appCache.status);
});
if (appCache.status === appCache.UPDATEREADY) {
surMiseAJourCache();
}
});
 
function surMiseAJourCache() {
// Browser downloaded a new app cache.
// Swap it in and reload the page to get the new hotness.
appCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
}