Adds FB picture sync script and UI fixes

scripts/facebook_sync.py

@@ -0,0 +1,45 @@
+#!/usr/bin/env python
+# coding: utf-8
+
+"""
+This script fetches the members of the KAK facebook group, matches names against the local db, and then saves the users facebook-picture in his/her user profile.
+
+REQ:
+https://github.com/iplatform/pyFaceGraph
+INSTALL:
+$ pip install pyfacegraph
+"""
+
+import os,sys,difflib
+from facegraph import Graph
+
+ACCESS_TOKEN = ''
+PATH = '.'
+KAK_GROUP_ID = '108265352570560'
+if PATH not in sys.path:
+    sys.path.append(PATH)
+
+from django.core.management import setup_environ
+import settings
+
+setup_environ(settings)
+
+from main.models import *
+
+g = Graph(ACCESS_TOKEN)
+members = g[KAK_GROUP_ID]['members']()
+group_members = [(member.name,member.id) for member in members.data]
+names = [] # to fuzzy search for a name
+name_lookup = {} # to update the matching UserProfile object
+for u in User.objects.all().order_by('id'):
+    fullname = u.first_name + " " + u.last_name
+    names.append(fullname)
+    name_lookup[fullname] = u.id
+
+for member in group_members:
+    match = difflib.get_close_matches(member[0], names, 1) # max 1 match
+    if match:
+        u = UserProfile.objects.get(pk=name_lookup[match[0]])
+        u.image = 'https://graph.facebook.com/{0}/picture'.format(member[1])
+        u.save()
+

static/gaute/sass/screen.scss

@@ -10,15 +10,20 @@ body {
             @include inline-block-list;
 
             li {
-                padding: 1.5em;
+                padding-right: 10px;
+                padding-top: 10px;
                 text-align: center;
-                width: 100px;
+                width: 79px;
 
                 &:hover {
                     background-color: #dddddd;
                 }
                 &.marked {
-                    background-color: #dddddd;
+                    color: #468847;
+                    background-color: #DFF0D8;
+                }
+                .name {
+                    font-weight: bold;
                 }
             }
         }
@@ -30,12 +35,25 @@ body {
                 @include inline-block-list;
                 
                 li {
-                    padding: 1.5em;
+                    padding-top: 10px;
+                    padding-left: 20px;
+                    padding-right: 20px;
                     text-align: center;
 
                     &:hover {
                         background-color: #dddddd;
                     }
+                    &.marked {
+                        color: #468847;
+                        background-color: #DFF0D8;
+                    }
+                    .qty {
+                        font-size: 1.7em;
+                        font-weight: bold;
+                    }
+                    .name {
+                        font-weight: bold;
+                    }
                 }
             }
         }

static/gaute/stylesheets/screen.css

@@ -4118,15 +4118,20 @@ body #customer ul li {
   *display: inline;
 }
 body #customer ul li {
-  padding: 1.5em;
+  padding-right: 10px;
+  padding-top: 10px;
   text-align: center;
-  width: 100px;
+  width: 79px;
 }
 body #customer ul li:hover {
   background-color: #dddddd;
 }
 body #customer ul li.marked {
-  background-color: #dddddd;
+  color: #468847;
+  background-color: #DFF0D8;
+}
+body #customer ul li .name {
+  font-weight: bold;
 }
 body #register #products ul {
   margin: 0;
@@ -4156,12 +4161,25 @@ body #register #products ul li {
   *display: inline;
 }
 body #register #products ul li {
-  padding: 1.5em;
+  padding-top: 10px;
+  padding-left: 20px;
+  padding-right: 20px;
   text-align: center;
 }
 body #register #products ul li:hover {
   background-color: #dddddd;
 }
+body #register #products ul li.marked {
+  color: #468847;
+  background-color: #DFF0D8;
+}
+body #register #products ul li .qty {
+  font-size: 1.7em;
+  font-weight: bold;
+}
+body #register #products ul li .name {
+  font-weight: bold;
+}
 body #register #total div {
   color: #ffffff;
   background-color: #222;

static/js/register.js

@@ -5,6 +5,21 @@ $(document).ready(function() {
             $(this).show();
         });
     }
+    function enable_all_products() {
+        $("li.product").each(function(i) {
+            $(this).removeClass("marked");
+            $(this).show();
+        });
+    }
+    function reset_qtys() {
+        $(".qty").each(function(i) {
+            $(this).html('0');
+        });
+
+        $("input[name$=amount]").each(function(i) {
+            $(this).val("0");
+        });
+    }
     function filter_customers(typed) {
         /* FIXME: Does not work well. */
         setTimeout(function() {
@@ -42,9 +57,14 @@ $(document).ready(function() {
     });
     /* Product amount controls */
     $("li.product").click( function() {
-        var form_field = $(this).children("input[type=text]");
+        /* Mark the product as selected */
+        $(this).addClass("marked");
+        /* Update amounts */
+        var form_field = $(this).children("input[name$=amount]");
+        var display = $(this).children(".qty");
         var qty = Number(form_field.val()) + 1;
         form_field.val(qty);
+        display.html(qty);
         /* Update total*/
         var sale_price_int = Number($(this).children("span.sale_price_int").text());
         var cur_total = Number($("span.total_text").text())
@@ -56,6 +76,8 @@ $(document).ready(function() {
         $("#id_customer_typeahead").val("");
         $("span.total_text").html("");
         enable_all_customers();
+        enable_all_products();
+        reset_qtys();
     });
     /* Hide alert messages */
     $("a[data-dismiss=alert]").click(function(){

templates/deposit.html

@@ -28,11 +28,12 @@
                 {% for user in users %}
                 <li class="customer">
                 {% if user.get_profile.image %}
-                    <img class="profile" src="{{ user.get_profile.image.url }}" /><br />
+                    <img class="profile" src="{{ user.get_profile.image }}" /><br />
                 {% else %}
-                    <img class="profile" src="{% gravatar_for_user user %}" /><br />
+                    <img class="profile" src="{% gravatar_for_user user 50 %}" /><br />
                 {% endif %}
-                <span class="name">{{ user.first_name }} {{ user.last_name|slice:":1"}}</span> ({{ user.get_profile.balance }})
+                <span class="name">{{ user.first_name }} {{ user.last_name|slice:":1"}}</span><br />
+                <span class="balance">{{ user.get_profile.balance }}</span>
                 <span class="id" style="display:none;">{{ user.id }}</span>
                 </li>
                 </li>

templates/register.html

@@ -35,11 +35,12 @@
                         {% for user in users %}
                                 <li class="customer">
                                 {% if user.get_profile.image %}
-                                    <img class="profile" src="{{ user.get_profile.image.url }}" /><br />
+                                    <img class="profile" src="{{ user.get_profile.image }}" /><br />
                                 {% else %}
-                                    <img class="profile" src="{% gravatar_for_user user %}" /><br />
+                                    <img class="profile" src="{% gravatar_for_user user 50 %}" /><br />
                                 {% endif %}
-                                <span class="name">{{ user.first_name }} {{ user.last_name|slice:":1"}}</span> ({{ user.get_profile.balance }})
+                                <span class="name">{{ user.first_name }} {{ user.last_name|slice:":1"}}</span><br />
+                                <span class="balance">{{ user.get_profile.balance }}</span>
                                 <span class="id" style="display:none;">{{ user.id }}</span>
                                 </li>
                                 </li>
@@ -60,8 +61,9 @@
                     <ul class="well">
                         {% for product in products %}
                                 <li id="form-{{forloop.counter0}}" class="product"><input type="hidden" name="form-{{ forloop.counter0 }}-product" value="{{product.id }}" />
-                                <input type="text" id="form-{{ forloop.counter0 }}-amount" name="form-{{ forloop.counter0 }}-amount" value="0" class="span2" size="2" />
+                                <input type="hidden" id="form-{{ forloop.counter0 }}-amount" name="form-{{ forloop.counter0 }}-amount" value="0" class="span2" size="2" />
                                 <input type="hidden" name="form-{{ forloop.counter0 }}-unit_price" value="{{product.sale_price_int }}" />
+                                <span class="qty">0</span>
                                 {% if product.image %}
                                         <img class="product" src="{{ product.image.url }}" /><br />
                                 {% else %}