diff --git a/apps/kassa/templates/kassa/register.html b/apps/kassa/templates/kassa/register.html index 25625b3..c9ed6f1 100644 --- a/apps/kassa/templates/kassa/register.html +++ b/apps/kassa/templates/kassa/register.html @@ -6,27 +6,31 @@
{% csrf_token %}

{% trans "Register card" %}

- - -
+

+

+
+ +
+
{{ add_card_form|bootstrap }} -

Registering a card number with a phone number already tied to an existing user, will add the card to that user.

+
-

{% trans "Search existing users" %}

+

{% trans "Search members" %}

{{ search_user_form|bootstrap_inline }} - +
diff --git a/static/app/scripts/app.js b/static/app/scripts/app.js index a44baa4..eb4cedd 100644 --- a/static/app/scripts/app.js +++ b/static/app/scripts/app.js @@ -47,7 +47,7 @@ function render_selected_user(user_data) { context = {placeholder: true}; // dummy card } else { user_data = update_user_with_card_details(user_data); - context = {res: user_data, checked: true}; + context = {res: user_data, checked: true, no_user_actions: true}; } var selected_user_html = nunjucksEnv.render('search_result.html', context); _dom.selectedUserWrap.html(selected_user_html); @@ -132,6 +132,14 @@ function resetCardForm(reset_native) { /* Disable submit button */ _dom.registerSubmitButton.prop('disabled', true); } +function resetSearchForm(reset_native) { + if(reset_native) { + _dom.searchResetButton.get(0).reset(); + } + /* Clear search results */ + users = null; + _dom.results.html(''); +} function cardFormIsValid() { return _.all(_.values(cardForm.fields)); @@ -217,7 +225,8 @@ $(document).ready(function(){ userIdField: $('#id_user_id'), selectedUserWrap: $('.register-card-form--selected-user-wrap'), toastWrap: $('.toast-wrap'), - registerResetButton: $('.register-reset-btn') + registerResetButton: $('.register-reset-btn'), + searchResetButton: $('.search-reset-btn') }; var urls = { insideUserApi: '/inside/user/', @@ -251,7 +260,7 @@ $(document).ready(function(){ set_selected_user(data.results[0], true); } else { set_field_state(_dom.phoneNumberField, ''); - set_selected_user('', true); + set_selected_user(null, true); } cardForm.fields.phoneNumber = true; update_submit_button(); @@ -295,9 +304,10 @@ $(document).ready(function(){ }); /* User search as you type */ - _dom.query.on('keyup', function() { + _dom.query.on('input', function() { var val = _dom.query.val().trim(); if(val.length <= 2) { + _dom.results.html(''); return; } $.getJSON(urls.insideUserApi, {q: val}, function(data) { @@ -321,7 +331,7 @@ $(document).ready(function(){ /* On search result click */ _dom.results.on('click', '.search-result input', function(e){ - var label = $(this).parent().parent(); + var label = $(this).parent(); var number = label.attr('data-phone-number'); var user_id = label.attr('data-user-id'); @@ -382,10 +392,13 @@ $(document).ready(function(){ } render_selected_user(); }); + /* Reset buttons */ _dom.registerResetButton.on('click', function() { - console.log('reset!'); resetCardForm(); }); + _dom.searchResetButton.on('click', function() { + resetSearchForm(); + }); /* Ninja add some icons to bootstrap form */ var iconMobile = ''; @@ -393,7 +406,7 @@ $(document).ready(function(){ _dom.phoneNumberField.before(iconMobile); /* Render initial placeholder user */ - var selected_user_html = nunjucksEnv.render('search_result.html', {placeholder: true, res: {number: '+4748105885'}}); + var selected_user_html = nunjucksEnv.render('search_result.html', {placeholder: true}); _dom.selectedUserWrap.html(selected_user_html); /* Initial focus */ diff --git a/static/app/styles/app.scss b/static/app/styles/app.scss index 24fef0b..3ec44a4 100644 --- a/static/app/styles/app.scss +++ b/static/app/styles/app.scss @@ -57,12 +57,13 @@ input[type=number] { } .register-card-form--selected-user-wrap { min-height: 78px; - margin: 10px 0; + margin-bottom: 10px; } .query-form { margin-bottom: 20px; } +/* Search result / User */ .search-result { font-weight: normal; line-height: 2; @@ -88,7 +89,10 @@ input[type=number] { background-color: $active-color; } [type=radio] { - margin-right: 4px; + position: absolute; + top: 42px; + transform: scale(1.5); + left: 10px; &:focus { outline: none; @@ -100,7 +104,21 @@ input[type=number] { visibility: visible; } } + .name { + margin-left: 21px; + } } +.user-actions { + position: absolute; + right: 16px; + top: 40px; + visibility: hidden; +} +.selected .user-actions { + visibility: visible; +} + + /* Search form */ .selected-icon { visibility: hidden; @@ -119,11 +137,12 @@ input[type=number] { display: inline-block; } - -.results-wrap { - overflow-y: auto; - max-height: 550px; -} +/*@media (min-width: $screen-sm-min) { + .results-wrap { + overflow-y: auto; + max-height: 550px; + } +}*/ /* Footer */ .credits { diff --git a/static/app/templates/search_result.html b/static/app/templates/search_result.html index 25a1d44..bba43ff 100644 --- a/static/app/templates/search_result.html +++ b/static/app/templates/search_result.html @@ -1,15 +1,7 @@ {% if not placeholder %} - {% if not res.card_number_active %} - - {% else %} + {% if not no_user_actions %} +
+
+ Membership + Reg. card +
+ + +
+
{% endif %} + {% else %}
- - New member +
+ + New member +
{{ number|phoneNumber }}
New card diff --git a/static/dist/scripts/app.js b/static/dist/scripts/app.js index a44baa4..eb4cedd 100644 --- a/static/dist/scripts/app.js +++ b/static/dist/scripts/app.js @@ -47,7 +47,7 @@ function render_selected_user(user_data) { context = {placeholder: true}; // dummy card } else { user_data = update_user_with_card_details(user_data); - context = {res: user_data, checked: true}; + context = {res: user_data, checked: true, no_user_actions: true}; } var selected_user_html = nunjucksEnv.render('search_result.html', context); _dom.selectedUserWrap.html(selected_user_html); @@ -132,6 +132,14 @@ function resetCardForm(reset_native) { /* Disable submit button */ _dom.registerSubmitButton.prop('disabled', true); } +function resetSearchForm(reset_native) { + if(reset_native) { + _dom.searchResetButton.get(0).reset(); + } + /* Clear search results */ + users = null; + _dom.results.html(''); +} function cardFormIsValid() { return _.all(_.values(cardForm.fields)); @@ -217,7 +225,8 @@ $(document).ready(function(){ userIdField: $('#id_user_id'), selectedUserWrap: $('.register-card-form--selected-user-wrap'), toastWrap: $('.toast-wrap'), - registerResetButton: $('.register-reset-btn') + registerResetButton: $('.register-reset-btn'), + searchResetButton: $('.search-reset-btn') }; var urls = { insideUserApi: '/inside/user/', @@ -251,7 +260,7 @@ $(document).ready(function(){ set_selected_user(data.results[0], true); } else { set_field_state(_dom.phoneNumberField, ''); - set_selected_user('', true); + set_selected_user(null, true); } cardForm.fields.phoneNumber = true; update_submit_button(); @@ -295,9 +304,10 @@ $(document).ready(function(){ }); /* User search as you type */ - _dom.query.on('keyup', function() { + _dom.query.on('input', function() { var val = _dom.query.val().trim(); if(val.length <= 2) { + _dom.results.html(''); return; } $.getJSON(urls.insideUserApi, {q: val}, function(data) { @@ -321,7 +331,7 @@ $(document).ready(function(){ /* On search result click */ _dom.results.on('click', '.search-result input', function(e){ - var label = $(this).parent().parent(); + var label = $(this).parent(); var number = label.attr('data-phone-number'); var user_id = label.attr('data-user-id'); @@ -382,10 +392,13 @@ $(document).ready(function(){ } render_selected_user(); }); + /* Reset buttons */ _dom.registerResetButton.on('click', function() { - console.log('reset!'); resetCardForm(); }); + _dom.searchResetButton.on('click', function() { + resetSearchForm(); + }); /* Ninja add some icons to bootstrap form */ var iconMobile = ''; @@ -393,7 +406,7 @@ $(document).ready(function(){ _dom.phoneNumberField.before(iconMobile); /* Render initial placeholder user */ - var selected_user_html = nunjucksEnv.render('search_result.html', {placeholder: true, res: {number: '+4748105885'}}); + var selected_user_html = nunjucksEnv.render('search_result.html', {placeholder: true}); _dom.selectedUserWrap.html(selected_user_html); /* Initial focus */ diff --git a/static/dist/scripts/templates.js b/static/dist/scripts/templates.js index 2400ac1..db4fb67 100644 --- a/static/dist/scripts/templates.js +++ b/static/dist/scripts/templates.js @@ -4,9 +4,7 @@ var colno = null; var output = ""; try { if(!runtime.contextOrFrameLookup(context, frame, "placeholder")) { -output += "\n "; -if(!runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "res")),"card_number_active", env.opts.autoescape)) { -output += "\n