olinox14
/
modelepwa


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
							<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
    <title>ModelePWA</title>
	<meta charset="utf-8" />
    <link rel="manifest" href="manifest.json">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="assets/css/template.css" type="text/css" media="all">
    <link rel="stylesheet" href="assets/css/custom.css" type="text/css" media="all">
    <noscript>
        <style type="text/css">body.nojs{visibility:visible;}</style>
    </noscript>
    <script src="assets/js/jquery-3.2.1.min.js" defer></script> 
    <script src="assets/js/jquery-ui.min.js" defer></script> 
    <script src="assets/js/jquery.redirect.js" defer></script> 
    <script src="assets/js/handlebars.min.js" defer></script>
    <script src="assets/js/main.js" defer></script>
   
</head>
<body class="nojs wrapper">
	<!-- Header -->
	<header id="header">
		<nav class="left">
			<a href="#menu"><span>Menu</span></a>
		</nav>

		<a href="index.html" class="logo">ModelePWA</a>
		
        <nav class="right">
            <button class="start-sync alt">Sync</button>
		</nav>
	</header>

    <div id="sync" class="align-center">
        <h3>Synchronisation des données</h3>
        <div class="status"></div>
        <button class="end-sync" style="display: none;">Retour</button>
    </div>

    <section id="main" class="inner">
        <noscript>
            <h1>Suivi mobile d'Activités</h1>
            Pour accéder à toutes les fonctionnalités de ce site, vous devez activer JavaScript. Voici les 
            <a href="//www.enable-javascript.com/fr/" target="js"> instructions pour activer JavaScript dans votre navigateur Web</a>
        </noscript>

        <!--  Injection Jquery  -->
        <!-- Le contenu de la section 'main' est injecté depuis les sections plus bas dans ce document; chaque url injecte la section qui a l'id correspondant -->

    </section>

    <footer>
        <span id="back-top" class="hidden"></span>
    </footer>


    <!-- Templates et boites de dialogues -->

    <!-- IMPORTANT: si la section nécessite un acces à la localDb,pensez à ajouter l'attribut 'model'
        c'est lui qui donne le nom du store à utiliser. -->

    <script id="index" type="x-tmpl-mustache" model="activites">

        <header class="align-center">
            <h1>Mes données</h1>
        </header>
      
        {{#if data}}
        <div class="table-wrapper">
            <table class="selectable">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Loc.</th>
                        <th>Real.</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {{#data}}
                    <tr data-id="{{guid}}" data-type="activite">
                        <td>{{dateint}}</td>
                        <td>{{localisation}}</td>
                        <td>{{realisation}}</td>
                        <td><i class="fa fa-ellipsis-v"></i></td>
                    </tr>
                    {{/data}}
                </tbody>
            </table>
        </div>

        <ul class="actions">
            <li>
                <a href="#activites" class="button">Ajouter</a>
            </li>
            <li>
                <button class="edit button" disabled>Editer</button>
            </li>
            <li>
                <button class="del button alt" disabled>Supprimer</button>
            </li>
            <!--<li>
                <button class="sync alt">Envoyer</button>
            </li>-->
        </ul>
        {{else}}

        <p class="align-center"><i>(Aucune donnée enregistrée)</i></p>

        <ul class="actions">
            <li>
                <a href="#activites" class="button">Ajouter</a>
            </li>
        </ul>

        {{/if}}

    </script>

    <script id="activites" type="x-tmpl-mustache" model="activites">
        
        <header class="align-center">
            <h1>Nouvel enregistrement</h1>
        </header>

        <div class="row 200% uniform">

            <form>
                <div class="row uniform">

                    <h3 class="12u$">Activité</h3>

                    <div class="6u 12u$(xsmall)">
                        <input id="dateint" name="dateint" type="text" required placeholder="Date de l'intervention" value="" onfocus="(this.type='date')" onblur="(this.type='text')" />
                    </div>

                    <div class="6u 12u$(xsmall)">
                        <input id="datefin" name="datefin" type="text" placeholder="Date de fin de l'intervention" onfocus="(this.type='date')" onblur="(this.type='text')" />
                    </div>

                    <div class="12u$">
                        <div class="select-wrapper">
                            <select id="localisation" name="localisation">
                                <option value="">- Localisation -</option>
                                <option value="6703400">BERSTETT</option>
                                <option value="6711200">DUTTLENHEIM</option>
                            </select>
                        </div>
                    </div>

                    <div class="12u$">
                        <div class="select-wrapper">
                            <select id="engin" name="engin">
                                <option value="">- Engin -</option>
                                <option value="01P037">MINI PELLE CASE P037</option>
                                <option value="01P038">PELLE LIEBHERR P038 R313/2013</option>
                            </select>
                        </div>
                    </div>

                    <div class="12u$">
                        <div class="select-wrapper">
                            <select id="realisation" name="realisation">
                                <option value="">- Type d'intervention -</option>
                                <option value="13">Pose d'enrochements</option>
                                <option value="16">Terrassement:déblais,remblais,tranchées</option>
                            </select>
                        </div>
                    </div>

                    <div class="12u$">
                        <textarea id="commentaire" name="commentaire" type="text" placeholder="Commentaire" rows="3"/>
                    </div>

                    <h3 class="12u$">Heures supplémentaires</h3>

                    <div class="4u 12u$(small)">
                        <input id="hsjour" name="hsjour" type="number" placeholder="Jour (7h-7h30, 16h30-22h)"/>
                    </div>

                    <div class="4u 12u$(small)">
                        <input id="hsnuit" name="hsnuit" type="number" placeholder="Nuit"/>
                    </div>

                    <div class="4u 12u$(small)">
                        <input id="hsdim" name="hsdim" type="number" placeholder="Dimanche et jours fériés"/>
                    </div>

                    <h3 class="12u$">Frais</h3>

                    <div class="12u$">
                        <input id="nbrepas" name="nbrepas" type="number" placeholder="Nombre de repas"/>
                    </div>

                    <div class="12u$">
                        <select id="depart" name="depart" placeholder="Départ">
                            <option value="">- Lieu de départ -</option>
                            <option value="6703400">BERSTETT</option>
                            <option value="6711200">DUTTLENHEIM</option>
                        </select>
                    </div>

                    <div class="12u$">
                        <input id="kmstt" name="kmstt" type="number" placeholder="Kilomètres sur temps de travail (7h30 - 16h30)"/>
                    </div>

                    <div class="12u$">
                        <input id="vpstt" name="vpstt" type="checkbox"/>
                        <label for="vpstt">Avec véhicule personnel</label>
                    </div>

                    <div class="12u$">
                        <input id="kmhtt" name="kmhtt" type="number" title="Kilomètres hors temps de travail" placeholder="Kilomètres hors temps de travail"/>
                    </div>

                    <div class="12u$">
                        <input id="vphtt" name="vphtt" type="checkbox"/>
                        <label for="vphtt">Avec véhicule personnel</label>
                    </div>

                    <div class="12u$">
                        <button type="submit" class="fit">Enregistrer</button>
                    </div>

                </div>

            </form>

        </div>
    </script>

</body>
</html>