From 82f0dd9638d6e460b9ac4a400bf2c6b116953642 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aur=C3=A9lien=20Delobelle?= Date: Tue, 16 Aug 2016 03:36:14 +0200 Subject: [PATCH] Interface K-Psul MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Création style kpsul.css - Affichage trigramme et données du compte. Couleurs en fonction de l'état du compte (négatif, pas beaucoup, gelé, ok) - Affichage de la sélection et des données de la caisse - Ajout des boutons pour les charges et retraits (juste les boutons) - Ajout du champ d'autocomplétion pour les articles (et ça autocomplète bien) - Correction css général - K-Psul JS: utilisation de $.extend pour les données récupérées en ajax/websocket pour utiliser les valeurs par défaut (plus joli) --- kfet/forms.py | 6 +- kfet/static/kfet/css/index.css | 10 +- kfet/static/kfet/css/kpsul.css | 236 +++++++++++++++++++++++++++++++++ kfet/templates/kfet/base.html | 2 +- kfet/templates/kfet/kpsul.html | 217 +++++++++++++++++++++++------- kfet/views.py | 3 +- 6 files changed, 414 insertions(+), 60 deletions(-) create mode 100644 kfet/static/kfet/css/kpsul.css diff --git a/kfet/forms.py b/kfet/forms.py index 5cd4f470..fc4e6937 100644 --- a/kfet/forms.py +++ b/kfet/forms.py @@ -136,7 +136,11 @@ class KPsulAccountForm(forms.ModelForm): model = Account fields = ['trigramme'] widgets = { - 'trigramme': forms.TextInput(attrs={'autocomplete': 'off'}), + 'trigramme': forms.TextInput( + attrs={ + 'autocomplete': 'off', + 'spellcheck': 'false', + }), } class KPsulCheckoutForm(forms.Form): diff --git a/kfet/static/kfet/css/index.css b/kfet/static/kfet/css/index.css index fe72b1f0..b7cf2e09 100644 --- a/kfet/static/kfet/css/index.css +++ b/kfet/static/kfet/css/index.css @@ -1,4 +1,5 @@ @import url("nav.css"); +@import url("kpsul.css"); body { margin-top:50px; @@ -13,8 +14,8 @@ a:focus, a:hover { color:#C8102E; } -.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group { - margin-left:5px; +:focus { + outline:none; } .btn, .btn-lg, .btn-group-lg>.btn { @@ -33,12 +34,9 @@ a:focus, a:hover { color:#FFF; } -.container-fluid .row:first-child { +.row-page-header { background-color:rgba(200,16,46,1); color:#FFF; -} - -.row.row-page-header { border-bottom:3px solid #000; } diff --git a/kfet/static/kfet/css/kpsul.css b/kfet/static/kfet/css/kpsul.css new file mode 100644 index 00000000..40008749 --- /dev/null +++ b/kfet/static/kfet/css/kpsul.css @@ -0,0 +1,236 @@ +/* + * Top row + */ + +.row.kpsul_top { + padding:0 15px; + color:#000; +} + +.row.kpsul_top > div { + margin-top:15px; +} + +/* Account */ + +#account { + border:1px solid #ddd; + color:black; + height:160px; +} + +#account[data-balance="ok"] { border-color:#009011; } +#account[data-balance="ok"] #account_form input { background:#009011; color:#FFF;} +#account[data-balance="low"] { border-color:#EC6400; } +#account[data-balance="low"] #account_form input { background:#EC6400; color:#FFF; } +#account[data-balance="neg"] { border-color:#C8102E; } +#account[data-balance="neg"] #account_form input { background:#C8102E; color:#FFF; } +#account[data-balance="frozen"] { border-color:#000FBA; } +#account[data-balance="frozen"] #account_form input { background:#000FBA; color:#FFF; } + +#account_form { + padding:0; + height:100%; +} + +#account_form input { + width:100%; + height:100%; + + padding:0; + padding-bottom:10px; + + border:0; + border-radius:0; + + background:#ddd; + + font-family:'Roboto Mono'; + font-size:70px; + font-weight:bold; + + text-align:center; + text-transform:uppercase; +} + +@media (min-width: 768px) { + #account { + margin-right:0; + } + + #account_form input { + font-size:85px; + } + + @media (min-width: 992px) { + #account_form input { + font-size:100px; + } + } +} + +#account_data { + height:100%; +} + +#account_data .data_line { + line-height:24px; + + font-family:'Roboto Mono'; + font-size:14px; +} + +#account_data #account-balance{ + height:60px; + line-height:60px; + + font-size:60px; + font-weight:bold; +} + +#account_data #account-name { + font-weight:bold; +} + +/* Checkout */ + +#checkout { + border:1px solid #ddd; + padding:0; + height:160px; + font-family:'Roboto Mono'; +} + +#checkout_form select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor:pointer; + outline:none; + border:0; + + width:100%; + height:50px; + padding:0 15px; + + background:#ddd; + + font-weight:bold; + font-size:18px; +} + +#checkout_form select option { + height:25px; + padding:0 15px; + line-height:25px; + font-weight:normal; + font-size:14px; +} + +#checkout_data { + padding:0 15px; +} + +/* + * Second part + */ + +.row.kpsul_middle { + padding:0 15px; + font-family:'Roboto Mono'; + color:#000; +} + +.row.kpsul_middle > div { + margin-top:15px; + padding:0; +} + +.row.kpsul_middle > div:first-child > div { + margin-right:0; +} + +@media (min-width:768px) { + .row.kpsul_middle > div:first-child > div { + margin-right:15px + } +} + +/* Special operations */ + +#special_operations { + height:40px; +} + +#special_operations button { + height:100%; + width:50%; + + float:left; + + background:#ddd; + color:#000; + + font-size:18px; + font-weight:bold; +} + +#special_operations button:focus { + outline:none; +} + +#operation_deposit:focus, #operation_deposit:hover { + background:#009011; + color:#FFF; +} + +#operation_withdraw:focus, #operation_withdraw:hover { + background:#C8102E; + color:#FFF; +} + +/* Article autocomplete */ + +#article_selection { + height:40px; + width:100%; +} + +#article_selection input { + height:100%; + float:left; + border:1px solid #ddd; + border-radius:0; + border-top:0; + font-size:16px; + font-weight:bold; +} + +#article_selection input+input { + border-left:0; +} + +#article_selection input[type=number] { + -moz-appearance:textfield; +} + +#article_selection input[type=number]::-webkit-inner-spin-button, +#article_selection input[type=number]::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} + + +#article_autocomplete { + width:95%; + padding-left:10px; +} + +#article_number { + width:5%; + text-align:center; +} + +/* Article data */ + + diff --git a/kfet/templates/kfet/base.html b/kfet/templates/kfet/base.html index 4d8a5b4e..8c0d4713 100644 --- a/kfet/templates/kfet/base.html +++ b/kfet/templates/kfet/base.html @@ -9,7 +9,7 @@ {# CSS #} - + {# JS #} diff --git a/kfet/templates/kfet/kpsul.html b/kfet/templates/kfet/kpsul.html index 1212f625..1874b941 100644 --- a/kfet/templates/kfet/kpsul.html +++ b/kfet/templates/kfet/kpsul.html @@ -16,48 +16,79 @@
{{ operationgroup_form }}
-{{ trigramme_form.as_p }} -
-

-

-

-

-

-

-

-

+
+
+
+
+ {{ trigramme_form.trigramme }} +
+
+
+
+
+
+ + + +
+
+
+
+
+
+
+ {{ checkout_form.checkout }} +
+
+
+ En caisse: € +
+
+ Dernier relevé:
+ € + à + par +
+
+
-{{ checkout_form.as_p }} -
-

-

-

-

-

-

-

-

-

+
+
+
+
+ + +
+
+ + + +
+
+ + + + + + + + + + + +
NomCatégoriePrixStock
+
+
+
+
+
{{ operation_formset.as_p }}
- - - - - - - - - - - -
NomCatégoriePrixStock
-
@@ -106,6 +137,7 @@ $(document).ready(function() { 'is_cof' : false, 'promo' : '', 'balance': '', + 'trigramme' : '', 'is_frozen' : false, 'departement': '', 'nickname' : '', @@ -113,10 +145,19 @@ $(document).ready(function() { // Display data function displayAccountData() { - for (var elem in account_data_default) { - $('#account-'+elem).text( - account_data[elem] ? account_data[elem] : account_data_default[elem] - ); + for (var elem in account_data) { + $('#account-'+elem).text(account_data[elem]); + } + if (account_data['is_frozen']) { + $('#account').attr('data-balance', 'frozen'); + } else if (account_data['balance'] == '') { + $('#account').attr('data-balance', ''); + } else if (account_data['balance'] >= 5 || account_data['trigramme'] == 'LIQ') { + $('#account').attr('data-balance', 'ok'); + } else if (account_data['balance'] >= 0) { + $('#account').attr('data-balance', 'low'); + } else { + $('#account').attr('data-balance', 'neg'); } } @@ -129,7 +170,7 @@ $(document).ready(function() { // Store data function storeAccountData(data) { - account_data = data + account_data = $.extend({}, account_data_default, data); $('#id_on_acc').val(account_data['pk']); displayAccountData(); } @@ -148,7 +189,7 @@ $(document).ready(function() { // Event listener triInput.on('input', function() { - var tri = triInput.val() + var tri = triInput.val().toUpperCase(); // Checking if tri is valid to avoid sending requests if (tri.match(triPattern)) { retrieveAccountData(tri); @@ -179,10 +220,8 @@ $(document).ready(function() { // Display data function displayCheckoutData() { - for (var elem in checkout_data_default) { - $('#checkout-'+elem).text( - checkout_data[elem] ? checkout_data[elem] : checkout_data_default[elem] - ); + for (var elem in checkout_data) { + $('#checkout-'+elem).text(checkout_data[elem]); } } @@ -195,7 +234,7 @@ $(document).ready(function() { // Store data function storeCheckoutData(data) { - checkout_data = data; + checkout_data = $.extend({}, checkout_data_default, data); $('#id_checkout').val(checkout_data['id']); displayCheckoutData(); } @@ -290,6 +329,8 @@ $(document).ready(function() { article_html.find('.'+elem).text(article[elem]) } articles_container.append(article_html); + // Pour l'autocomplétion + articlesList.push([article['name'],article['id']]); } function getArticlesData() { @@ -305,6 +346,81 @@ $(document).ready(function() { }); } + // ----- + // Article selection + // ----- + + var articleSelect = $('#article_autocomplete'); + var articleId = $('#article_id'); + var articleNb = $('#article_number'); + // 8:Backspace|9:Tab|13:Enter|116:F5|117:F6|122:F11|123:F12 + var normalKeys = /^(8|9|13|116|117|122|123)$/; + var articlesList = []; + var articlesMatch = []; + + function deleteNonMatching(array, str) { + var dup = []; + var lower_str = str.toLowerCase(); + for (var i=0; i diff --git a/kfet/views.py b/kfet/views.py index 6ffee3f5..5ea708d3 100644 --- a/kfet/views.py +++ b/kfet/views.py @@ -417,7 +417,8 @@ def kpsul_account_data(request): data = { 'pk': account.pk, 'name': account.name, 'email': account.email, 'is_cof': account.is_cof, 'promo': account.promo, 'balance': account.balance, 'is_frozen': account.is_frozen, - 'departement': account.departement, 'nickname': account.nickname } + 'departement': account.departement, 'nickname': account.nickname, + 'trigramme': account.trigramme } return JsonResponse(data) @permission_required('kfet.is_team')