Plugin enhancement - search form for members

makinacorpus · Apr 9, 2013 · b125afa · b125afa
1 parent ce23e98
commit b125afa
Show file tree

Hide file tree

Showing 8 changed files with 259 additions and 61 deletions.
diff --git a/page_coop_exchange/static/css/page_coop_exchange.css b/page_coop_exchange/static/css/page_coop_exchange.css
@@ -54,7 +54,8 @@
 
 }
 
-.coop_exchange .exchange_button_detail {
+.coop_exchange .exchange_button_detail,
+#search_submit input[type='submit'] {
     -moz-border-radius: 5px;
     border-radius: 5px;
     border: 2px solid #f8b133;
@@ -103,17 +104,12 @@
     );
 }
 
-#search_form .search_block,
-#search_form .search_block_bottom {
-    border-bottom: 1px solid #ccc;
+#search_form .search_block{
     float: left;
-    padding: 5px;
+    padding: 3px;
     width: 220px;
 }
 
-#search_form .search_block_bottom {
-    border-bottom: none;
-}
 
 #search_form .search_title {
     font-weight: bold;
@@ -126,9 +122,6 @@
     line-height: 25px;
 }
 
-#search_form input[type=checkbox] {
-    float: left;
-}
 
 #search_form .search_column {
     width: 230px;
@@ -145,6 +138,13 @@
     width: 260px;
 }
 
+#search_form #search_column1 #looking_for {
+    width: 115px;
+}
+#search_form #search_column1 #type {
+    width: 140px;
+}
+
 
 #search_form #search_column2,
 #search_form #search_column3 {
@@ -158,36 +158,36 @@
 }
 
 
-
-#search_form #search_column2,
-#search_form #skills {
-    border-left: 1px solid #ccc;
-    border-right: 1px solid #ccc;
-}
-
-#search_form #search_bottom {
-    border-top: 1px solid #ccc;
-    clear: left;
-}
-
-#search_form #search_submit {
-    background: #fad722;
-    color: #fff;
-}
-
 #search_form #search_submit .nb_results {
     font-weight: bold;
     font-size: 30px;
 }
 
 #search_form #search_submit #results_block {
-
+    float: left;
+    line-height: 30px;
+    padding-left: 10px;    
 }
 
 #search_form ul {
     list-style: none;
     margin: 0;
 }
-#search_form ul li {
+
+#search_form #mode ul li,
+#search_form #skills ul li {
     float: left;
+    width: 100px;
+}
+
+
+#search_submit input[type='submit'] {
+    float: left;
+}
+
+
+#search_form #leaflet_map {
+    margin: 5px;
+    width: 250px;
+    height: 270px;
 }
diff --git a/page_coop_exchange/templates/page_coop_exchange/index.html b/page_coop_exchange/templates/page_coop_exchange/index.html
@@ -1,51 +1,73 @@
 {% load i18n %}
 
-<div id="exchanges_top"></div>
+{% block extra_head %}
+    <link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.css" />
+{% endblock %}
+
+<div id="exchanges_top_search"></div>
 <div id="search_form">
     <form action="{{ base_url }}" method="post">{% csrf_token %}
         <div class="search_column" id="search_column1">
-            <div class="search_block" id="looking_for">
+            <div class="search_block checkbox_custom" id="looking_for">
                 <span class="search_title">{% trans "I'm looking for" %}</span>
                 {{ form.type_exchange }}
             </div>
-            <div class="search_block_bottom" id="type">
+            <div class="search_block checkbox_custom" id="type">
                 <span class="search_title">{% trans "Type" %}</span>
                 {{ form.type }}
             </div>
+            <div class="search_block" id="free_search">
+                <span class="search_title">{% trans "Free search" %}</span>
+                {{ form.free_search }}
+            </div>
+            <div class="search_block" id="search_submit">
+                <input type="submit" value="{% trans "Search" %}" />                
+                <div id="results_block"><span class="nb_results">{{ exchanges.count }}</span> <span class="label_results">{% trans "Results" %}</span></div>
+
+            </div>
         </div>
         <div class="search_column" id="search_column2">
             <div class="search_block" id="activity">
                 <span class="search_title">{% trans "Activity" %}</span>
                 {% trans "Experience" %} : {{ form.activity }}
             </div>
-            <div class="search_block_bottom" id="free_search">
-                <span class="search_title">{% trans "Free search" %}</span>
-                {{ form.free_search }}
+            <div class="search_block" id="thematic">
+                <span class="search_title">{% trans "Thematic" %}</span>
+                {{ form.thematic }}
             </div>
         </div>
         <div class="search_column" id="search_column3">
             <div class="search_block" id="location">
                 <span class="search_title">{% trans "Location" %}</span>
                 {{ form.location }}
             </div>
-            <div class="search_block_bottom" id="thematic">
-                <span class="search_title">{% trans "Thematic" %}</span>
-                {{ form.thematic }}
-            </div>
-        </div>
-        <div id="search_bottom">
-            <div class="search_block_bottom" id="mode">
+            <div class="search_block checkbox_custom" id="mode">
                 <span class="search_title">{% trans "Exchange mode" %}</span>
                 {{ form.mode }}
             </div>
-            <div class="search_block_bottom" id="skills">
+            <div class="search_block checkbox_custom" id="skills">
                 <span class="search_title">{% trans "If skills" %}</span>
                 {{ form.skills }}
             </div>
-            <div class="search_block_bottom" id="search_submit">
-                <div id="results_block"><span class="nb_results">{{ exchanges.count }}</span> <span class="label_results">{% trans "Results" %}</span></div>
-                <input type="submit" value="{% trans "Search" %}" />
-            </div>
+        </div>
+        <div class="search_column" id="search_column4">
+            <div id="leaflet_map"></div>
+                <script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>
+                <script type="text/javascript">
+
+                    var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
+                        cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
+                        cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
+
+                    var centre = new L.LatLng({{ center.x }}, {{ center.y }});
+                    var map = new L.Map('leaflet_map');
+                    map.setView(centre, 8).addLayer(cloudmade);
+
+                </script>
+
+                </div>
+
+
         </div>
     </form>
 </div>

diff --git a/page_coop_exchange/views.py b/page_coop_exchange/views.py
@@ -25,7 +25,8 @@ def index_view(request, page_app):
 
     exchanges = Exchange.objects.all()
 
-    if request.method == 'POST': # If the form has been submitted
+    if request.method == 'POST': # If the form has been submitted        
+        # TODO: other filters
         form = PageApp_CoopExchangeForm(request.POST)
         if form.is_valid():
             if form.cleaned_data['free_search']:
@@ -39,14 +40,10 @@ def index_view(request, page_app):
 
     else:
         form = PageApp_CoopExchangeForm() # An empty form
-        # TODO: temporary
-        form.fields['activity'].widget.attrs['readonly'] = True
-        form.fields['location'].widget.attrs['readonly'] = True
-        form.fields['thematic'].widget.attrs['readonly'] = True
-        form.fields['mode'].widget.attrs['disabled'] = True
-        form.fields['skills'].widget.attrs['disabled'] = True
 
-    rdict = {'exchanges': exchanges, 'base_url': base_url, 'form': form}
+    center_map = settings.COOP_MAP_DEFAULT_CENTER
+
+    rdict = {'exchanges': exchanges, 'base_url': base_url, 'form': form, 'center': center_map}
 
     return render_view('page_coop_exchange/index.html',
                        rdict,

diff --git a/page_members/forms.py b/page_members/forms.py
@@ -2,9 +2,20 @@
 
 import floppyforms as forms
 from ionyweb.forms import ModuloModelForm
+from django.forms import ModelForm
 from .models import PageApp_Members
+from django.utils.translation import ugettext, ugettext_lazy as _
 
-class PageApp_MembersForm(ModuloModelForm):
+class PageApp_MembersForm(ModelForm):
 
+    type = forms.CharField(required=False, label=_('Type'))
+
+    activity = forms.CharField(required=False, label=_('Activity'))
+    location = forms.CharField(required=False, label=_('Location'))
+    location_buffer = forms.CharField(required=False, label=_('Location buffer'))
+    thematic = forms.CharField(required=False, label=_('Thematic'))
+
+    free_search = forms.CharField(required=False, label=_('Free search'))
+
     class Meta:
         model = PageApp_Members
diff --git a/page_members/static/css/page_members.css b/page_members/static/css/page_members.css
@@ -35,10 +35,17 @@
 .member .member_desc,
 .member .member_link,
 .member .member_address,
-.member .member_email {
+.member .member_email,
+.member .member_location {
     margin-left: 100px;
 }
 
 .member .member_acronym {
     color: #ccc;
+}
+
+.member .member_location #leaflet_map {
+    height: 350px;
+    width: 500px;
+    border: 1px solid #ccc;
 }
diff --git a/page_members/templates/page_members/detail.html b/page_members/templates/page_members/detail.html
@@ -1,5 +1,9 @@
 {% load i18n %}
 
+{% block extra_head %}
+    <link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.css" />
+{% endblock %}
+
 <div id="members_top"></div>
 <div id="members">
     <div class="member member_detail">
@@ -21,6 +25,38 @@ <h3 class="member_title">{{ member.title }} <span class="member_acronym">({{ mem
             Email: {{ member.pref_email|safe }}
         </div>
 
+        <div class="member_location">
+            {% trans "Location" %} :</br>
+            {% for l in member.located.all %}
+                {{ l.location.label|safe }}<br/>
+                {{ l.location.adr1|safe }}<br/>
+                {{ l.location.adr2l|safe }}<br/>
+                {{ l.location.zipcodel|safe }}<br/>
+                {{ l.location.city|safe }}<br/>
+            {% endfor %}
+            <div id="leaflet_map"></div>
+                <script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>
+                <script type="text/javascript">
+
+                    var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
+                        cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
+                        cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
+
+                    var map = new L.Map('leaflet_map');
+
+                    {% for l in member.located.all %}
+                        var centre = new L.LatLng({{ l.location.point.y|safe }}, {{ l.location.point.x|safe }});
+                        L.marker([{{ l.location.point.y|safe }}, {{ l.location.point.x|safe }}]).addTo(map)
+                                .bindPopup('{{ l.location.label|safe }}')
+                                .openPopup();
+                    {% endfor %}
+
+
+                    map.setView(centre, 8).addLayer(cloudmade);
+
+                </script>
+        </div>
+
         <div class="member_link">
             <a href="{{ member.web|safe }}" />{{ member.web|safe }}</a>
         </div>