wifi-with-me/wifiwithme/apps/contribmap/templates/contribmap/wifi-form.html

{% extends "base.html" %}

{% load bootstrap %}
{% load staticfiles %}

{% block body_class %}form{% endblock %}

{% block content %}
  <script src="{% static 'form.js' %}" type="text/javascript"></script>

  <header class="jumbotron">
    <div class="container">
    <p>
L'association <a href="//www.faimaison.net">FAImaison</a> expérimente à
grande échelle (Nantes et environs) la création d'un réseau sans-fil à
longue portée à des fins, entre autres, de <em>partage</em> et
<em>fourniture</em> d'<strong>accès à internet</strong>.
    </p>

    <p>
Pour cela, nous recherchons des volontaires, tant pour <strong>partager une
partie de leur connexion</strong> que pour participer au réseau (accès à
internet, partage local…).
      </p>

      <p>
Renseigner ce formulaire nous permet de définir quelles <strong>zones
d'expérimentations</strong> (avec une grande densité de volontaires)
pourraient être intéressantes.
      </p>
    </div>
  </header>

  <section role="main" class="container">
  <form role="form" method="post">{% csrf_token %}

{% if form.non_field_errors %}
    <div id="errors" class="bg-danger">
      {{ form.non_field_errors }}
    </div>
{% endif %}

    <h2>Contact</h2>

    <div class="form-group">
      <label for="name">Nom / Pseudo</label>
      {{ form.name|formcontrol }}
      {{ form.name.errors }}
    </div>

    <div class="row">
      <div class="form-group col-md-6">
        <label for="email">Email</label>
        {{ form.email|formcontrol }}
        {{ form.email.errors }}
        <p class="help-block">
          <span class="glyphicon glyphicon-warning-sign"></span>
          Un moyen de contact au moins est nécessaire
        </p>
      </div>
      <div class="form-group col-md-6">
        <label for="phone">Téléphone</label>
        {{ form.phone|formcontrol }}
        {{ form.phone.errors }}
      </div>
    </div>


    <h2>Je souhaite</h2>
    <p class="radio">
      {{ form.contrib_type }}
      {{ form.contrib_type.errors }}
    </p>

    <div id="contrib-type-share">
    <h2>Partager une connexion</h2>

    <h3>Type de connexion</h3>
    {{ form.access_type }}
    {{ form.access_type.errors }}

    <h3>Débits</h3>
    <p class="help-block">
      Il est possible de limiter techniquement la quantité de bande passante
    partagée avec les autres expérimentateurs afin de ne pas pénaliser votre
    confort.
    </p>
    <p>
      <label for="bandwidth">Débit total</label>
      {{ form.bandwidth }}
      {{ form.bandwidth.errors }}
    </p>
    <p>
      <label for="share-part">Je souhaite partager (au max.)</label>
      {{ form.share_part }}
      {{ form.share_part.errors }}
    </p>
    </div>

    <div id="contrib-type-connect">
      <h2>Me raccorder au réseau</h2>
    <h3>J'aimerais pouvoir</h3>
    <p class="checkbox"><label>
      {{ form.connect_local }}
      Proposer et utiliser des services en local avec les autres utilisateurs du réseau
      {{ form.connect_local.errors }}
    </label></p>
    <p class="checkbox"><label>
      {{ form.connect_internet }}
      Avoir un accès à Internet
      {{ form.connect_internet.errors }}
    </label></p>
    </div>

  <h2>Ma localisation</h2>

    <div class="row">
      <div class="col-sm-6">
        <div id="map" data-json="{{geojson}}"></div>
      </div>
      <div class="form-group col-sm-6">
        <div class="form-group form-group-lg form-inline">
          <input type="text" name="search"
                 id="search" placeholder="rue du calvaire, nantes" class="form-control" />
          <span id="search-btn" class="btn btn-default btn-lg" data-loading-text="...">Recherche</span>

          <div id="search-results" class=""></div>
          <p class="help-block">Déplacer le marqueur bleu pour pointer précisément le bâtiment au besoin</p>
          <p class="help-block">
            Les ronds verts sont ceux renseignés par d'autres utilisateurs, vous
            pouvez aussi consulter <a href="map" target="_blank">la carte
            publique plus détaillée</a>.
          </p>

        </div>
        {{ form.latitude }}
        {{ form.latitude.errors }}
        {{ form.longitude }}
        {{ form.longitude.errors }}
        </div>
      </div>
    </div>

    <input type="submit" value="Envoyer" class="btn btn-primary btn-lg"/>
  </form>
  </section>


<div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="Resultats" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Fermer</span></button>
        <h4 class="modal-title" id="myModalLabel">Résultats</h4>
      </div>
      <div class="modal-body">
      </div>
    </div>
  </div>
</div>

{% endblock %}