index.html 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. <!DOCTYPE html>
  2. <html lang="fr" dir="ltr">
  3. <head>
  4. <title>MobiParc</title>
  5. <meta charset="utf-8" />
  6. <link rel="manifest" href="manifest.json">
  7. <meta name="viewport" content="width=device-width, initial-scale=1" />
  8. <link rel="stylesheet" href="assets/css/template.css" type="text/css" media="all">
  9. <link rel="stylesheet" href="assets/css/custom.css" type="text/css" media="all">
  10. <noscript>
  11. <style type="text/css">body.nojs{visibility:visible;}</style>
  12. </noscript>
  13. <script src="assets/js/jquery-3.2.1.min.js" defer></script>
  14. <script src="assets/js/jquery-ui.min.js" defer></script>
  15. <script src="assets/js/handlebars.min.js" defer></script>
  16. <script src="assets/js/main.js" defer></script>
  17. </head>
  18. <body class="nojs wrapper">
  19. <!-- Header -->
  20. <header id="header">
  21. <nav class="left">
  22. <a href="#menu"><span>Menu</span></a>
  23. </nav>
  24. <a href="index.html" class="logo">MobiParc</a>
  25. <nav class="right">
  26. <button class="alt toggle-sync-dlg">Sync</button>
  27. </nav>
  28. </header>
  29. <!-- Boite de dialogue synchro -->
  30. <section id="sync-dlg" class="hidden">
  31. <div class="sync-result"></div>
  32. <span class="toggle-sync-dlg">X</span>
  33. <button class="data-sync" disabled>Sync</button>
  34. <br>
  35. </section>
  36. <section id="main" class="inner">
  37. <noscript>
  38. <h1>Suivi mobile d'Activités</h1>
  39. Pour accéder à toutes les fonctionnalités de ce site, vous devez activer JavaScript. Voici les
  40. <a href="//www.enable-javascript.com/fr/" target="js"> instructions pour activer JavaScript dans votre navigateur Web</a>
  41. </noscript>
  42. <!-- Injection Jquery -->
  43. </section>
  44. <footer>
  45. <span id="back-top" class="hidden"></span>
  46. </footer>
  47. <!-- Templates et boites de dialogues -->
  48. <script id="index" type="x-tmpl-mustache">
  49. <header class="align-center">
  50. <h1>Suivi mobile d'activités</h1>
  51. </header>
  52. </script>
  53. <script id="activites" type="x-tmpl-mustache" model="activites">
  54. <header class="align-center">
  55. <h1>Nouvel enregistrement</h1>
  56. </header>
  57. <div class="row 200% uniform">
  58. <form>
  59. <div class="row uniform">
  60. <h3 class="12u$">Activité</h3>
  61. <div class="6u 12u$(xsmall)">
  62. <input id="dateint" name="dateint" type="text" required placeholder="Date de l'intervention" value="" onfocus="(this.type='date')" onblur="(this.type='text')" />
  63. </div>
  64. <div class="6u 12u$(xsmall)">
  65. <input id="datefin" name="datefin" type="text" placeholder="Date de fin de l'intervention" onfocus="(this.type='date')" onblur="(this.type='text')" />
  66. </div>
  67. <div class="12u$">
  68. <div class="select-wrapper">
  69. <select id="localisation" name="localisation">
  70. <option value="">- Localisation -</option>
  71. <option value="6703400">BERSTETT</option>
  72. <option value="6711200">DUTTLENHEIM</option>
  73. </select>
  74. </div>
  75. </div>
  76. <div class="12u$">
  77. <select id="engin" name="engin">
  78. <option value="">- Engin -</option>
  79. <option value="01P037">MINI PELLE CASE P037</option>
  80. <option value="01P038">PELLE LIEBHERR P038 R313/2013</option>
  81. </select>
  82. </div>
  83. <div class="12u$">
  84. <select id="realisation" name="realisation">
  85. <option value="13">- Type d'intervention -</option>
  86. <option value="13">Pose d'enrochements</option>
  87. <option value="16">Terrassement:déblais,remblais,tranchées</option>
  88. </select>
  89. </div>
  90. <div class="12u$">
  91. <textarea id="commentaire" name="commentaire" type="text" placeholder="Commentaire" rows="3"/>
  92. </div>
  93. <h3 class="12u$">Heures supplémentaires</h3>
  94. <div class="4u 12u$(small)">
  95. <input id="hsjour" name="hsjour" type="number" placeholder="Jour (7h-7h30, 16h30-22h)"/>
  96. </div>
  97. <div class="4u 12u$(small)">
  98. <input id="hsnuit" name="hsnuit" type="number" placeholder="Nuit"/>
  99. </div>
  100. <div class="4u 12u$(small)">
  101. <input id="hsdim" name="hsdim" type="number" placeholder="Dimanche et jours fériés"/>
  102. </div>
  103. <h3 class="12u$">Frais</h3>
  104. <div class="12u$">
  105. <input id="nbrepas" name="nbrepas" type="number" placeholder="Nombre de repas"/>
  106. </div>
  107. <div class="12u$">
  108. <select id="depart" name="depart" placeholder="Départ">
  109. <option value="">- Lieu de départ -</option>
  110. <option value="6703400">BERSTETT</option>
  111. <option value="6711200">DUTTLENHEIM</option>
  112. </select>
  113. </div>
  114. <div class="12u$">
  115. <input id="kmstt" name="kmstt" type="number" placeholder="Kilomètres sur temps de travail (7h30 - 16h30)"/>
  116. </div>
  117. <div class="12u$">
  118. <input id="vpstt" name="vpstt" type="checkbox"/>
  119. <label for="vpstt">Avec véhicule personnel</label>
  120. </div>
  121. <div class="12u$">
  122. <input id="kmhtt" name="kmhtt" type="number" title="Kilomètres hors temps de travail" placeholder="Kilomètres hors temps de travail"/>
  123. </div>
  124. <div class="12u$">
  125. <input id="vphtt" name="vphtt" type="checkbox"/>
  126. <label for="vphtt">Avec véhicule personnel</label>
  127. </div>
  128. <div class="12u$">
  129. <button type="submit" class="fit">Enregistrer</button>
  130. </div>
  131. </div>
  132. </form>
  133. {{#if data}}
  134. <button class="del btn btn-delete" disabled>Supprimer</button>
  135. <h2>Mes données</h2>
  136. <table class="selectable">
  137. <thead>
  138. <tr>
  139. <td>Date</td>
  140. <td>Loc.</td>
  141. <td>Real.</td>
  142. <td>...</td>
  143. </tr>
  144. </thead>
  145. <tbody>
  146. {{#data}}
  147. <tr data-id="{{tstamp}}" data-type="activite">
  148. <td>{{dateint}}</td>
  149. <td>{{localisation}}</td>
  150. <td>{{realisation}}</td>
  151. <td>Voir+</td>
  152. </tr>
  153. {{/data}}
  154. </tbody>
  155. </table>
  156. {{/if}}
  157. </div>
  158. </script>
  159. </body>
  160. </html>