index.html 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  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" model="activites">
  49. <header class="align-center">
  50. <h1>Mes données</h1>
  51. </header>
  52. {{#if data}}
  53. <div class="table-wrapper">
  54. <table class="selectable">
  55. <thead>
  56. <tr>
  57. <th>Date</th>
  58. <th>Loc.</th>
  59. <th>Real.</th>
  60. <th>...</th>
  61. </tr>
  62. </thead>
  63. <tbody>
  64. {{#data}}
  65. <tr data-id="{{tstamp}}" data-type="activite">
  66. <td>{{dateint}}</td>
  67. <td>{{localisation}}</td>
  68. <td>{{realisation}}</td>
  69. <td>Voir+</td>
  70. </tr>
  71. {{/data}}
  72. </tbody>
  73. </table>
  74. </div>
  75. <ul class="actions">
  76. <li>
  77. <a href="#activites" class="button">Ajouter</a>
  78. </li>
  79. <li>
  80. <button class="del btn btn-delete" disabled>Supprimer</button>
  81. </li>
  82. </ul>
  83. {{/if}}
  84. </script>
  85. <script id="activites" type="x-tmpl-mustache" model="activites">
  86. <header class="align-center">
  87. <h1>Nouvel enregistrement</h1>
  88. </header>
  89. <div class="row 200% uniform">
  90. <form>
  91. <div class="row uniform">
  92. <h3 class="12u$">Activité</h3>
  93. <div class="6u 12u$(xsmall)">
  94. <input id="dateint" name="dateint" type="text" required placeholder="Date de l'intervention" value="" onfocus="(this.type='date')" onblur="(this.type='text')" />
  95. </div>
  96. <div class="6u 12u$(xsmall)">
  97. <input id="datefin" name="datefin" type="text" placeholder="Date de fin de l'intervention" onfocus="(this.type='date')" onblur="(this.type='text')" />
  98. </div>
  99. <div class="12u$">
  100. <div class="select-wrapper">
  101. <select id="localisation" name="localisation">
  102. <option value="">- Localisation -</option>
  103. <option value="6703400">BERSTETT</option>
  104. <option value="6711200">DUTTLENHEIM</option>
  105. </select>
  106. </div>
  107. </div>
  108. <div class="12u$">
  109. <select id="engin" name="engin">
  110. <option value="">- Engin -</option>
  111. <option value="01P037">MINI PELLE CASE P037</option>
  112. <option value="01P038">PELLE LIEBHERR P038 R313/2013</option>
  113. </select>
  114. </div>
  115. <div class="12u$">
  116. <select id="realisation" name="realisation">
  117. <option value="13">- Type d'intervention -</option>
  118. <option value="13">Pose d'enrochements</option>
  119. <option value="16">Terrassement:déblais,remblais,tranchées</option>
  120. </select>
  121. </div>
  122. <div class="12u$">
  123. <textarea id="commentaire" name="commentaire" type="text" placeholder="Commentaire" rows="3"/>
  124. </div>
  125. <h3 class="12u$">Heures supplémentaires</h3>
  126. <div class="4u 12u$(small)">
  127. <input id="hsjour" name="hsjour" type="number" placeholder="Jour (7h-7h30, 16h30-22h)"/>
  128. </div>
  129. <div class="4u 12u$(small)">
  130. <input id="hsnuit" name="hsnuit" type="number" placeholder="Nuit"/>
  131. </div>
  132. <div class="4u 12u$(small)">
  133. <input id="hsdim" name="hsdim" type="number" placeholder="Dimanche et jours fériés"/>
  134. </div>
  135. <h3 class="12u$">Frais</h3>
  136. <div class="12u$">
  137. <input id="nbrepas" name="nbrepas" type="number" placeholder="Nombre de repas"/>
  138. </div>
  139. <div class="12u$">
  140. <select id="depart" name="depart" placeholder="Départ">
  141. <option value="">- Lieu de départ -</option>
  142. <option value="6703400">BERSTETT</option>
  143. <option value="6711200">DUTTLENHEIM</option>
  144. </select>
  145. </div>
  146. <div class="12u$">
  147. <input id="kmstt" name="kmstt" type="number" placeholder="Kilomètres sur temps de travail (7h30 - 16h30)"/>
  148. </div>
  149. <div class="12u$">
  150. <input id="vpstt" name="vpstt" type="checkbox"/>
  151. <label for="vpstt">Avec véhicule personnel</label>
  152. </div>
  153. <div class="12u$">
  154. <input id="kmhtt" name="kmhtt" type="number" title="Kilomètres hors temps de travail" placeholder="Kilomètres hors temps de travail"/>
  155. </div>
  156. <div class="12u$">
  157. <input id="vphtt" name="vphtt" type="checkbox"/>
  158. <label for="vphtt">Avec véhicule personnel</label>
  159. </div>
  160. <div class="12u$">
  161. <button type="submit" class="fit">Enregistrer</button>
  162. </div>
  163. </div>
  164. </form>
  165. </div>
  166. </script>
  167. </body>
  168. </html>