Account/Checkout data K-Psul + Style

- Template: Ajout d'un style "Sogé" (couleurs de la K-Fêt...)
- K-Psul: Optimisation requête checkout data avec dernier relevé
- K-Psul: Rework JS account et checkout data

kfet/forms.py

@@ -145,6 +145,8 @@ class KPsulCheckoutForm(forms.Form):
             widget=forms.Select(attrs={'id':'id_checkout_select'}))
 
 class KPsulOperationForm(forms.ModelForm):
+    article = forms.ModelChoiceField(
+        queryset=Article.objects.select_related('category').all())
     class Meta:
         model  = Operation
         fields = ['type', 'amount', 'is_checkout', 'article', 'article_nb']

kfet/static/kfet/css/index.css

@@ -0,0 +1,31 @@
+@import url("nav.css");
+
+body {
+    margin-top:50px;
+    font-family:'Open Sans';
+}
+
+a:focus, a:hover {
+    color:#C8102E;
+}
+
+.btn, .btn-lg, .btn-group-lg>.btn {
+    border-radius:0;
+}
+
+.container-fluid .row:first-child {
+    background-color:rgba(200,16,46,1);
+    color:#FFF;
+}
+
+.row.row-page-header {
+    border-bottom:3px solid #000;
+}
+
+.page-header {
+    border:0;
+    padding:0;
+    margin:15px 20px;
+    text-transform:uppercase;
+    font-weight:bold;
+}

kfet/static/kfet/css/nav.css

@@ -0,0 +1,55 @@
+nav {
+    background:#000;
+    color:#DDD;
+}
+
+.navbar-fixed-top {
+    border:0;
+}
+
+nav .navbar-brand:focus, .navbar-brand:hover {
+    color:#FFF;
+}
+
+nav .navbar-toggle .icon-bar {
+    background-color:#FFF;
+}
+
+nav a {
+    color:#DDD;
+}
+
+.navbar-nav {
+    font-weight:bold;
+    font-size:14px;
+    text-transform:uppercase;
+}
+
+.nav>li>a:focus, .nav>li>a:hover {
+    background-color:#C8102E;
+    color:#FFF;
+}
+
+.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
+    background-color:#C8102E;
+}
+
+.dropdown-menu {
+    padding:0;
+}
+
+.dropdown-menu>li>a {
+    padding:8px 20px;
+}
+
+
+
+@media (max-width: 767px) {
+    .navbar-nav .open .dropdown-menu {
+        background-color:#FFF;
+    }
+
+    .navbar-nav {
+        margin:0 -15px;
+    }
+}

kfet/templates/kfet/account.html

@@ -1,10 +1,17 @@
 {% extends "kfet/base.html" %}
 
 {% block title %}Liste des comptes{% endblock %}
+{% block content-header-title %}Comptes{% endblock %}
 
 {% block content %}
 
-<a href="{% url 'kfet.account.create' %}">Créer un compte</a>
+<div class="row">
+  <div class="col-lg-12">
+    <div class="btn-group btn-group-lg">
+      <a class="btn btn-primary" href="{% url 'kfet.account.create' %}">Créer un compte</a>
+    </div>
+  </div>
+</div>
 
 <ul>
 {% for account in accounts %}

kfet/templates/kfet/account_create.html

@@ -1,14 +1,15 @@
 {% extends "kfet/base.html" %}
 {% load staticfiles %}
 
-{% block title %}Création d'un nouveau compte{% endblock %}
+{% block title %}Nouveau compte{% endblock %}
 
 {% block extra_head %}
 <script src="{% static "autocomplete_light/autocomplete.js" %}" type="text/javascript"></script>
 {% endblock %}
 
+{% block content-header-title %}Création d'un compte{% endblock %}
+
 {% block content %}
-<h1>Création d'un nouveau compte</h1>
 
 {% if post %}
     {% if success %}

kfet/templates/kfet/account_read.html

@@ -2,19 +2,32 @@
 
 {% block title %}
 {% if account.user == request.user %}
-    Mes informations
+    Mon compte
 {% else %}
     Informations du compte {{ account.trigramme }}
 {% endif %}
 {% endblock %}
 
+{% block content-header-title %}
+{% if account.user == request.user %}
+    Mon compte
+{% else %}
+    Compte - {{ account.trigramme }}
+{% endif %}
+{% endblock %}
+
 {% block content %}
 
-<p>
+<div class="row">
-    <a href="{% url 'kfet.account.update' account.trigramme %}">
+  <div class="col-lg-12">
-        Modifier les informations
+    <div class="btn-group btn-group-lg">
+      <a class="btn btn-primary" href="{% url 'kfet.account.update' account.trigramme %}">
+        Modifier
       </a>
-</p>
+      <a class="btn btn-default disabled">Recharger par CB</a>
+    </div>
+  </div>
+</div>
 
 <p>Prénom: {{ account.first_name }}</p>
 <p>Nom: {{ account.last_name }}</p>

kfet/templates/kfet/account_update.html

@@ -2,9 +2,17 @@
 
 {% block title %}
 {% if account.user == request.user %}
-    Edition de mes informations
+    Modification de mes informations
 {% else %}
-    Edition des informations du compte {{ account.trigramme }}
+    {{ account.trigramme }} - Édition
+{% endif %}
+{% endblock %}
+
+{% block content-header-title %}
+{% if account.user == request.user %}
+    Modification de mes informations
+{% else %}
+    Édition du compte {{ account.trigramme }}
 {% endif %}
 {% endblock %}
 

kfet/templates/kfet/article.html

@@ -1,16 +1,21 @@
 {% extends 'kfet/base.html' %}
 
-{% block title %}Liste des articles{% endblock %}
+{% block title %}Articles{% endblock %}
+{% block content-header-title %}Articles{% endblock %}
 
 {% block content %}
 
-<p><a href="{% url 'kfet.article.create' %}">Créer un article</a></p>
+<div class="row">
+  <div class="col-lg-12">
+    <div class="btn-group btn-group-lg">
+      <a class="btn btn-default" href="{% url 'kfet.article.create' %}">Créer un article</a>
+    </div>
+  </div>
+</div>
 
 <ul>
 {% for article in articles %}
-    <li>
+    <li><a href="{% url 'kfet.article.read' article.pk %}">{{ article }}</a></li>
-        <a href="{% url 'kfet.article.read' article.pk %}">{{ article }}</a>
-    </li>
 {% endfor %}
 </ul>
 

kfet/templates/kfet/article_create.html

@@ -1,6 +1,7 @@
 {% extends 'kfet/base.html' %}
 
-{% block title %}Création d'un article{% endblock %}
+{% block title %}Nouvel article{% endblock %}
+{% block content-header-title %}Création d'un article{% endblock %}
 
 {% block content %}
 

kfet/templates/kfet/article_read.html

@@ -1,10 +1,17 @@
 {% extends 'kfet/base.html' %}
 
 {% block title %}Informations sur l'article {{ article }}{% endblock %}
+{% block content-header-title %}Article - {{ article.name }}{% endblock %}
 
 {% block content %}
 
-<p><a href="{% url 'kfet.article.update' article.pk %}">Editer les informations</a></p>
+<div class="row">
+  <div class="col-lg-12">
+    <div class="btn-group btn-group-lg">
+      <a class="btn btn-default" href="{% url 'kfet.article.update' article.pk %}">Modifier</a>
+    </div>
+  </div>
+</div>
 
 <p>Nom: {{ article.name }}</p>
 <p>Catégorie: {{ article.category }}</p>

kfet/templates/kfet/article_update.html

@@ -1,6 +1,7 @@
 {% extends 'kfet/base.html' %}
 
-{% block title %}Édition de l'article {{ article }}{% endblock %}
+{% block title %}Édition de l'article {{ article.name }}{% endblock %}
+{% block content-header-title %}Article {{ article.name }} - Édition{% endblock %}
 
 {% block content %}
 

kfet/templates/kfet/base.html

@@ -5,28 +5,36 @@
     <meta charset="utf-8">
     <title>{% block title %}{% endblock %} | K-Fêt - ENS Ulm</title>
 
-    {# jQuery #}
+    {# CSS #}
-    <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
-
-    {# <script type="text/javascript" src="{% static 'moment.js' %}"></script> #}
-
-    {# Bootstrap #}
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" type="text/css" href="{% static 'kfet/css/index.css' %}">
+
+    {# JS #}
+    <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 
     {% block extra_head %}{% endblock %}
 
-    {# Vieux IE pas comprendre HTML5 #}
+    {# Vieux IE pas comprendre HTML5 et Media Queries #}
     <!--[if lt IE 9]>
         <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->
 </head>
 <body>
   {% include "kfet/base_nav.html" %}
+  <div class="container-fluid">
+    {% block content-header %}
+      <div class="row row-page-header">
+        <div class="col-lg-12">
+          <h1 class="page-header">{% block content-header-title %}{% endblock %}</h1>
+        </div>
+      </div>
+    {% endblock %}
     {% include "kfet/base_messages.html" %}
-    <section id="content">
+    {% block content %}{% endblock %}
-        {% block content %}TGTG{% endblock %}
-    </section>
     {% include "kfet/base_footer.html" %}
+  </div>
 </body>
 </html>

kfet/templates/kfet/base_nav.html

@@ -1,23 +1,36 @@
-<nav>
+<nav class="navbar navbar-fixed-top">
-    Standard
+  <div class="container-fluid">
-    <ul>
+    <div class="navbar-header">
-        <li><a href="{% url "kfet.home" %}">Home</a></li>
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
-        <li>
+        <span class="sr-only"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a class="navbar-brand" href="#">K-Fêt</a>
+    </div>
+    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+      <ul class="nav navbar-nav">
+        <li><a href="{% url 'kfet.home' %}">Home</a></li>
+      </ul>
+      <ul class="nav navbar-nav navbar-right">
         {% if request.user.profile.account_kfet %}
-            <a href="{% url "kfet.account.read" request.user.profile.account_kfet.trigramme %}">
+          <li>
-                Mes infos
+            <a href="{% url 'kfet.account.read' request.user.profile.account_kfet.trigramme %}">Mes infos</a>
-            </a>
-        {% endif %}
           </li>
-    </ul>
-    {% if perms.kfet.is_team %}
-    Equipe
-    <ul>
-        <li><a href="{% url "kfet.kpsul" %}">K-Psul</a></li>
-        <li><a href="{% url "kfet.account" %}">Comptes</a></li>
-        <li><a href="{% url "kfet.checkout" %}">Caisses</a></li>
-        <li><a href="{% url "kfet.article" %}">Articles</a></li>
-    </ul>
         {% endif %}
+        {% if perms.kfet.is_team %}
+          <li class="dropdown">
+            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Admin <span class="caret"></span></a>
+            <ul class="dropdown-menu">
+              <li><a href="{% url 'kfet.kpsul' %}">K-Psul</a></li>
+              <li><a href="{% url 'kfet.account' %}">Comptes</a></li>
+              <li><a href="{% url 'kfet.checkout' %}">Caisses</a></li>
+              <li><a href="{% url 'kfet.article' %}">Articles</a></li>
+            </ul>
+          </li>
+        {% endif %}
+      </ul>
+    </div>
 </nav>
 

kfet/templates/kfet/checkout.html

@@ -1,10 +1,17 @@
 {% extends "kfet/base.html" %}
 
 {% block title %}Caisses{% endblock %}
+{% block content-header-title %}Caisses{% endblock %}
 
 {% block content %}
 
-<a href="{% url 'kfet.checkout.create' %}">Nouvelle caisse</a>
+<div class="row">
+  <div class="col-lg-12">
+    <div class="btn-group btn-group-lg">
+      <a class="btn btn-default" href="{% url 'kfet.checkout.create' %}">Créer une caisse</a>
+    </div>
+  </div>
+</div>
 
 <ul>
 {% for checkout in checkouts %}

kfet/templates/kfet/checkout_create.html

@@ -1,7 +1,8 @@
 {% extends "kfet/base.html" %}
 {% block extra_head %}{{ form.media }}{% endblock %}
 
-{% block title %}Création d'une caisse{% endblock %}
+{% block title %}Nouvelle caisse{% endblock %}
+{% block content-header-title %}Création d'une caisse{% endblock %}
 
 {% block content %}
 

kfet/templates/kfet/checkout_read.html

@@ -1,22 +1,18 @@
 {% extends 'kfet/base.html' %}
 
-{% block title %}Informations sur la caisse {{ checkout }}{% endblock %}
+{% block title %}Informations sur la caisse {{ checkout.name }}{% endblock %}
+{% block content-header-title %}Caisse - {{ checkout.name }}{% endblock %}
 
 {% block content %}
 
-{% if not checkout.is_protected %}
+<div class="row">
-<p>
+  <div class="col-lg-12">
-    <a href="{% url 'kfet.checkout.update' checkout.pk %}">
+    <div class="btn-group btn-group-lg">
-        Modifier les informations
+        <a class="btn btn-default{% if checkout.is_protected %} disabled{% endif %}" href="{% url 'kfet.checkout.update' checkout.pk %}">Modifier</a>
-    </a>
+        <a class="btn btn-default" href="{% url 'kfet.checkoutstatement.create' checkout.pk %}">Effectuer un relevé</a>
-</p>
+    </div>
-{% endif %}
+  </div>
-
+</div>
-<p>
-    <a href="{% url 'kfet.checkoutstatement.create' checkout.pk %}">
-        Effectuer un relevé
-    </a>
-<p>
 
 <p>Nom: {{ checkout.name }}</p>
 <p>Valide du {{ checkout.valid_from|date:'l j F Y, G:i' }} au {{ checkout.valid_to|date:'l j F Y, G:i' }}</p>

kfet/templates/kfet/checkout_update.html

@@ -1,7 +1,8 @@
 {% extends 'kfet/base.html' %}
 {% block extra_head %}{{ form.media }}{% endblock %}
 
-{% block title %}Edition de la caisse {{ checkout }}{% endblock %}
+{% block title %}Édition de la caisse {{ checkout.name }}{% endblock %}
+{% block content-header-title %}Caisse {{ checkout.name }} - Édition{% endblock %}
 
 {% block content %}
 

kfet/templates/kfet/checkoutstatement_create.html

@@ -1,6 +1,7 @@
 {% extends "kfet/base.html" %}
 
 {% block title %}Nouveau relevé{% endblock %}
+{% block content-header-title %}Caisse {{ checkout.name }} - Nouveau relevé{% endblock %}
 
 {% block content %}
 

kfet/templates/kfet/kpsul.html

@@ -7,6 +7,8 @@
 
 {% block title %}K-Psul{% endblock %}
 
+{% block content-header %}{% endblock %}
+
 {% block content %}
 
 {% csrf_token %}
@@ -31,6 +33,11 @@
     <p id="checkout-balance"></p>
     <p id="checkout-valid_from"></p>
     <p id="checkout-valid_to"></p>
+    <p id="checkout-last_statement_balance"></p>
+    <p id="checkout-last_statement_at"></p>
+    <p id="checkout-last_statement_by_trigramme"></p>
+    <p id="checkout-last_statement_by_first_name"></p>
+    <p id="checkout-last_statement_by_last_name"></p>
 </div>
 
 <form id="operation_formset">
@@ -75,17 +82,7 @@ $(document).ready(function() {
     var triInput = $('#id_trigramme')
     var triPattern = /^[^a-z]{3}$/
     var account_data = {}
-
+    var account_data_default = {
-    // Display data
-    function displayAccountData() {
-        for (var elem in account_data) {
-            $('#account-'+elem).text(account_data[elem]);
-        }
-    }
-
-    // Clear data
-    function resetAccountData() {
-        account_data = {
         'pk'   : 0,
         'name' : '',
         'email': '',
@@ -96,15 +93,24 @@ $(document).ready(function() {
         'departement': '',
         'nickname'   : '',
     }
+
+    // Display data
+    function displayAccountData() {
+        for (var elem in account_data) {
+            $('#account-'+elem).text(account_data[elem]);
+        }
+    }
+
+    // Clear data
+    function resetAccountData() {
+        account_data = account_data_default;
         $('#id_on_acc').val(0);
         displayAccountData();
     }
 
     // Store data
     function storeAccountData(data) {
-        for (var elem in data) {
+        account_data = data
-            account_data[elem] = data[elem];
-        }
         $('#id_on_acc').val(account_data['pk']);
         displayAccountData();
     }
@@ -139,33 +145,39 @@ $(document).ready(function() {
     // Initializing
     var checkoutInput = $('#id_checkout_select');
     var checkout_data = {}
+    var checkout_data_default = {
+        'id'  : 0,
+        'name': '',
+        'balance'   : '',
+        'valid_from': '',
+        'valid_to'  : '',
+        'last_statement_balance': '',
+        'last_statement_at'     : '',
+        'last_statement_by_trigramme' : '',
+        'last_statement_by_first_name': '',
+        'last_statement_by_last_name' : '' ,
+    }
 
     // Display data
     function displayCheckoutData() {
-        for (var elem in checkout_data) {
+        for (var elem in checkout_data_default) {
-            $('#checkout-'+elem).text(checkout_data[elem]);
+            $('#checkout-'+elem).text(
+                checkout_data[elem] ? checkout_data[elem] : checkout_data_default[elem]
+            );
         }
     }
 
     // Clear data
     function resetCheckoutData() {
-        checkout_data = {
+        checkout_data = checkout_data_default;
-            'pk'  : 0,
-            'name': '',
-            'balance'   : '',
-            'valid_from': '',
-            'valid_to'  : '',
-        }
         $('#id_checkout').val(0);
         displayCheckoutData();
     }
 
     // Store data
     function storeCheckoutData(data) {
-        for (var elem in data) {
+        checkout_data = data;
-            checkout_data[elem] = data[elem];
+        $('#id_checkout').val(checkout_data['id']);
-        }
-        $('#id_checkout').val(checkout_data['pk']);
         displayCheckoutData();
     }
 

kfet/views.py

@@ -426,9 +426,28 @@ def kpsul_account_data(request):
 @permission_required('kfet.is_team')
 def kpsul_checkout_data(request):
     pk   = request.POST.get('pk', 0)
-    checkout = get_object_or_404(Checkout, pk=pk)
+    try:
-    data = { 'pk': checkout.pk, 'name': checkout.name, 'balance': checkout.balance,
+        data = (Checkout.objects
-        'valid_from': checkout.valid_from, 'valid_to': checkout.valid_to }
+            .annotate(
+                last_statement_by_first_name=F('statements__by__cofprofile__user__first_name'),
+                last_statement_by_last_name=F('statements__by__cofprofile__user__last_name'),
+                last_statement_by_trigramme=F('statements__by__trigramme'),
+                last_statement_balance=F('statements__balance_new'),
+                last_statement_at=F('statements__at'))
+            .values(
+                'id', 'name', 'balance', 'valid_from', 'valid_to',
+                'last_statement_balance', 'last_statement_at',
+                'last_statement_by_trigramme', 'last_statement_by_last_name',
+                'last_statement_by_first_name')
+            .select_related(
+                'statements'
+                'statements__by',
+                'statements__by__cofprofile__user')
+            .filter(pk=pk)
+            .order_by('statements__at')
+            .last())
+    except Checkout.DoesNotExist:
+        raise http404
     return JsonResponse(data)
 
 def get_missing_perms(required_perms, user):