wifi-form.tpl 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. % rebase('base.tpl', page='form')
  2. <script src="assets/form.js" type="text/javascript"></script>
  3. <header class="jumbotron">
  4. <div class="container">
  5. %if errors:
  6. <p>
  7. Veuillez corriger les <span class="label label-danger">erreurs</span>
  8. suivantes :
  9. </p>
  10. <div id="errors" class="bg-danger">
  11. <ul >
  12. %for field, err in set(errors):
  13. <li><strong>{{field}}</strong> : {{err}}</li>
  14. %end
  15. </ul>
  16. </div>
  17. %else:
  18. <p>
  19. L'association <a href="http://faimaison.net">FAIMaison</a> expérimente à
  20. grande échelle (Nantes et environs) la création d'un réseau sans-fil à
  21. longue portée à des fins, entre autres, de <em>partage</em> et
  22. <em>fourniture</em> d'<strong>accès à internet</strong>.
  23. </p>
  24. <p>
  25. Pour celà, nous recherchons des volontaires, tant pour <strong>partager une
  26. partie de leur connexion</strong> que pour participer au réseau (accès à
  27. internet, partage local…).
  28. </p>
  29. <p>
  30. Renseigner ce formulaire nous permet de définir quelles <strong>zones
  31. d'expérimentations</strong> (avec une grande densité de volontaires)
  32. pourraient-être intéressantes.
  33. </p>
  34. %end
  35. </div>
  36. </header>
  37. <section role="main" class="container">
  38. <form role="form" method="post">
  39. <h2>Contact</h2>
  40. <div class="form-group">
  41. <label for="name">Nom / Pseudo</label>
  42. <input name="name" value="{{data.get('name', '')}}"
  43. id="name" type="text" class="form-control"/>
  44. </div>
  45. <p class="help-block">
  46. Un moyen de contact au moins est nécessaire
  47. </p>
  48. <p>
  49. <div class="form-group">
  50. <label for="email">Email</label>
  51. <input name="email" value="{{data.get('email', '')}}"
  52. id="email" type="email" class="form-control">
  53. </div>
  54. <div class="form-group">
  55. <label for="phone">Téléphone</label>
  56. <input name="phone" value="{{data.get('phone', '')}}"
  57. id="phone" type="tel" class="form-control"/>
  58. </div>
  59. </p>
  60. <h2>Je souhaite</h2>
  61. <p class="radio">
  62. <label>
  63. <input type="radio" name="contrib-type" value="share"
  64. {{'checked' if data.get('contrib-type') == 'share' else ''}}/>
  65. Partager une partie de ma connexion
  66. </label>
  67. </p>
  68. <p class="radio">
  69. <label>
  70. <input type="radio" name="contrib-type" value="connect"
  71. {{'checked' if data.get('contrib-type') == 'connect' else ''}}/>
  72. Me raccorder au réseau expérimental
  73. </label>
  74. </p>
  75. <div id="contrib-type-share">
  76. <h2>Partager une connexion</h2>
  77. <h3>Type de connexion</h3>
  78. <p class="radio"><label>
  79. <input {{'checked' if data.get('access-type') == 'fiber' else ''}}
  80. type="radio" name="access-type" value="fiber"/>
  81. Fibre
  82. </label></p>
  83. <p class="radio"><label>
  84. <input {{'checked' if data.get('access-type') == 'vdsl' else ''}}
  85. type="radio" name="access-type" value="vdsl"/>
  86. VDSL
  87. </label></p>
  88. <p class="radio"><label>
  89. <input {{'checked' if data.get('access-type') == 'adsl' else ''}}
  90. type="radio" name="access-type" value="adsl"/>
  91. ADSL
  92. </label></p>
  93. <p class="radio"><label>
  94. <input {{'checked' if data.get('access-type') == 'cable' else ''}}
  95. type="radio" name="access-type" value="cable"/>
  96. Câble
  97. </label></p>
  98. <h3>Débits</h3>
  99. <p class="help-block">
  100. Il est possible de limiter techniquement la quantité de bande passante
  101. partagée avec les autres expérimentateurs afin de ne pas pénaliser votre
  102. confort.
  103. </p>
  104. <p>
  105. <label for="bandwidth">Débit total (Mbps)</label>
  106. <input name="bandwidth" value="{{data.get('bandwidth', '')}}"
  107. id="bandwidth" type="number" min="0" class="form-control"/>
  108. </p>
  109. <p>
  110. <label for="share-part">Je souhaite partager (au max.) (Mbps)</label>
  111. <input name="share-part" value="{{data.get('share-part', '')}}"
  112. id="share-part" type="number" min="0" class="form-control"/>
  113. </p>
  114. </div>
  115. <h2>Ma localisation</h2>
  116. <div class="row">
  117. <div class="col-sm-6">
  118. <div id="map"></div>
  119. </div>
  120. <div class="form-group col-sm-6">
  121. <div class="form-group form-group-lg form-inline">
  122. <input type="text" name="search"
  123. id="search" placeholder="rue du calvaire, nantes" class="form-control" />
  124. <span id="search-btn" class="btn btn-default btn-lg" data-loading-text="...">Recherche</span>
  125. <div id="search-results" class=""></div>
  126. <p class="help-block">Déplacer le marqueur pour pointer précisément le bâtiment au besoin</p>
  127. </div>
  128. <input name="latitude" value="{{data.get('latitude', '')}}"
  129. type="hidden" id="latitude" />
  130. <input name="longitude" value="{{data.get('longitude', '')}}"
  131. type="hidden" id="longitude" />
  132. </div>
  133. </div>
  134. </div>
  135. <p class="help-block">Les antennes peuvent être positionées soit sur le toit soit aux fenêtres</p>
  136. <div class="form-group">
  137. <label for="orientation" />Orientation(s) de mes fenêtres</label><br />
  138. %for val, label in orientations:
  139. <label class="checkbox-inline">
  140. <input type="checkbox" name="orientation" value="{{val}}"
  141. {{'checked' if val in data.getall('orientation') else ''}}/>
  142. {{label}}
  143. </label>
  144. %end
  145. </div>
  146. <div class="form-group">
  147. <label for="roof">Je peux accéder à mon toît
  148. <input name="roof" {{'checked' if data.get('roof', False) else ''}}
  149. type="checkbox"/>
  150. </label>
  151. </div>
  152. <p>
  153. <label for="floor">Étage</label>
  154. <input name="floor" value="{{data.get('floor', '')}}"
  155. id="floor" type="number" class="form-control" placeholder="Indiquer « 0 » pour le Rez-de-chaussée"/>
  156. </p>
  157. <h2>Remarque/commentaire</h2>
  158. <textarea name="comment" class="form-control" row="5">{{data.get('comment', '').strip()}}</textarea>
  159. <h2>Mes données</h2>
  160. <p class="help-block">
  161. Les données collectées dans ce formulaire sont, par défaut, accessibles
  162. seulement au bureau de FAIMaison.<br />
  163. Certaines données, précisées ci-dessous, et anonymisées peuvent-être exposées
  164. sur une carte publique.
  165. </p>
  166. <div class="form-group">
  167. <label for="privacy" />
  168. J'autorise qu'apparaissent sur la carte publique :
  169. </label><br />
  170. </div>
  171. <div class="checkbox">
  172. <label>
  173. <input type="checkbox" name="privacy" value="coordinates"
  174. {{'checked' if (('coordinates' in data.getall('privacy')) or not data) else ''}} />
  175. Mes coordonnées GPS
  176. </label>
  177. </div>
  178. <div class="checkbox">
  179. <label>
  180. <input type="checkbox" name="privacy" value="place_details"
  181. {{'checked' if (('place_details' in data.getall('privacy')) or not data) else ''}}/>
  182. Mon étage et mes orientations
  183. </label>
  184. </div>
  185. <div class="checkbox">
  186. <label>
  187. <input type="checkbox" name="privacy" value="name"
  188. {{'checked' if 'name' in data.getall('privacy') else ''}}/>
  189. Mon nom/pseudo
  190. </label>
  191. </div>
  192. <div class="checkbox">
  193. <label>
  194. <input type="checkbox" name="privacy" value="comment"
  195. {{'checked' if 'comment' in data.getall('privacy') else ''}}/>
  196. Mon commentaire
  197. </label>
  198. </div>
  199. <input type="submit" value="Envoyer" class="btn btn-primary btn-lg"/>
  200. </form>
  201. </section>
  202. <div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Resultats" aria-hidden="true">
  203. <div class="modal-dialog modal-lg">
  204. <div class="modal-content">
  205. <div class="modal-header">
  206. <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fermer</span></button>
  207. <h4 class="modal-title" id="myModalLabel">Résultats</h4>
  208. </div>
  209. <div class="modal-body">
  210. </div>
  211. </div>
  212. </div>
  213. </div>