From f553510a59b12412b4abc59487d3f0fb9378ff54 Mon Sep 17 00:00:00 2001
From: Dmitry <nerosketch@gmail.com>
Date: Sun, 22 Apr 2018 23:39:22 +0000
Subject: [PATCH] Refactoring abon view template to bootstrap3 lib

---
 abonapp/forms.py                        |  6 +-
 abonapp/templates/abonapp/editAbon.html | 90 +++++++++++--------------
 djing/settings.py                       | 10 +++
 3 files changed, 54 insertions(+), 52 deletions(-)

diff --git a/abonapp/forms.py b/abonapp/forms.py
index 6f26e20..f3e5bd1 100644
--- a/abonapp/forms.py
+++ b/abonapp/forms.py
@@ -53,11 +53,11 @@ class AbonForm(forms.ModelForm):
                                    'placeholder': _('login'),
                                    'required': '',
                                    'pattern': r'^\w{1,127}$'
-                               }))
+                               }), label=_('login'))
 
     password = forms.CharField(max_length=64, initial=generate_random_password, widget=forms.TextInput(attrs={
-        'class': 'form-control', 'type': 'password', 'autocomplete': 'new-password'
-    }))
+        'type': 'password', 'autocomplete': 'new-password'
+    }), label=_('Password'))
 
     ip_address = forms.CharField(widget=forms.TextInput(attrs={
         'pattern': IP_ADDR_REGEX
diff --git a/abonapp/templates/abonapp/editAbon.html b/abonapp/templates/abonapp/editAbon.html
index 993f6de..23f789f 100644
--- a/abonapp/templates/abonapp/editAbon.html
+++ b/abonapp/templates/abonapp/editAbon.html
@@ -17,66 +17,62 @@
 
                     <form autocomplete="off" class="form-horizontal" action="{{ ahlink|default:'#' }}" method="post">{% csrf_token %}
 
-                        {% bootstrap_field form.username label_class='col-sm-4' field_class='col-sm-8' form_group_class='form-group-sm' %}
-                        {% bootstrap_field form.fio label_class='col-sm-4' field_class='col-sm-8' form_group_class='form-group-sm' %}
+                        {% bootstrap_field form.username form_group_class='form-group-sm' %}
+                        {% bootstrap_field form.fio form_group_class='form-group-sm' %}
+
+
+                        {# telephone field #}
+                        {% trans 'Call to' as tx %}
+                        {% bootstrap_button '' button_type='link' icon='earphone' button_class='btn-default' title=tx href='sip:'|add:form.telephone.value size='sm' as btn_call %}
+
+                        {% trans 'Additional telephones' as tx %}
+                        {% url 'abonapp:telephones' group.pk abon.username as url %}
+                        {% bootstrap_button '' button_type='link' icon='list' button_class='btn-default btn-modal' title=tx href=url size='sm' as btn_teleph_list %}
+
+                        {% trans 'Add telephone' as tx %}
+                        {% url 'abonapp:telephone_new' group.pk abon.username as url %}
+                        {% bootstrap_button '' button_type='link' icon='plus' button_class='btn-default btn-modal' title=tx href=url size='sm' as btn_teleph_add %}
+
+                        {% with ''|add:btn_call|add:btn_teleph_list|add:btn_teleph_add as bt %}
+                            {% bootstrap_field form.telephone form_group_class='form-group-sm' addon_after_class='input-group-btn' addon_after=bt %}
+                        {% endwith %}
 
-                        <div class="form-group-sm">
-                            <label for="id_telephone" class="col-sm-4 control-label">{% trans 'Telephone' %}</label>
-                            <div class="col-sm-8">
-                                <div class="input-group input-group-sm">
-                                    {{ form.telephone }}{{ form.telephone.errors }}
-                                    <span class="input-group-btn">
-                                        <a href="sip:{{ form.telephone.value }}" class="btn btn-default" data-toggle="tooltip" title="{% trans 'Call to' %}">
-                                            <span class="glyphicon glyphicon-earphone"></span>
-                                        </a>
-                                        <a href="{% url 'abonapp:telephones' group.pk abon.username %}" class="btn btn-default btn-modal" data-toggle="tooltip" title="{% trans 'Additional telephones' %}">
-                                            <span class="glyphicon glyphicon-list"></span>
-                                        </a>
-                                        <a href="{% url 'abonapp:telephone_new' group.pk abon.username %}" class="btn btn-default btn-modal" data-toggle="tooltip" title="{% trans 'Add telephone' %}">
-                                            <span class="glyphicon glyphicon-plus"></span>
-                                        </a>
-                                    </span>
-                                </div>
-                            </div>
-                        </div>
 
                         {# Ip address field #}
                         {% trans 'Reset ip' as tx %}
                         {% url 'abonapp:reset_ip' group.pk abon.username as url %}
                         {% bootstrap_button '' button_type='link' icon='refresh' button_class='btn-default btn-cmd' id='iprefreshbtn' href=url size='sm' title=tx as bt %}
-                        {% bootstrap_field form.ip_address label_class='col-sm-4' field_class='col-sm-8' form_group_class='form-group-sm' addon_after_class='input-group-btn' addon_after=bt %}
+                        {% bootstrap_field form.ip_address form_group_class='form-group-sm' addon_after_class='input-group-btn' addon_after=bt %}
+
+
+                        {% bootstrap_field form.street form_group_class='form-group-sm' %}
+                        {% bootstrap_field form.house form_group_class='form-group-sm' %}
+                        {% bootstrap_field form.is_active form_group_class='form-group-sm' %}
+                        {% bootstrap_field form.group form_group_class='form-group-sm' %}
+
+
+                        {# password field #}
+                        {% bootstrap_button '' button_type='button' icon='eye-open' button_class='btn-default' id='passwdtoggler' size='sm' as bt %}
+                        {% bootstrap_field form.password form_group_class='form-group-sm' addon_after_class='input-group-btn' addon_after=bt %}
+
 
                         <script type="text/javascript">
                             $(function () {
                                 $("#iprefreshbtn").on('click', function(){
                                     $("#{{ form.ip_address.id_for_label }}").val('');
                                 });
+                                $('#passwdtoggler').on('mousedown', function(){
+                                    document.getElementById("{{ form.password.id_for_label }}").type='text';
+                                }).on('mouseup', function(){
+                                    document.getElementById("{{ form.password.id_for_label }}").type='password';
+                                });
                             });
                         </script>
 
-                        {% bootstrap_field form.street label_class='col-sm-4' field_class='col-sm-8' form_group_class='form-group-sm' %}
-                        {% bootstrap_field form.house label_class='col-sm-4' field_class='col-sm-8' form_group_class='form-group-sm' %}
-                        {% bootstrap_field form.is_active label_class='col-sm-4' field_class='col-sm-8' form_group_class='form-group-sm' %}
-                        {% bootstrap_field form.group label_class='col-sm-4' field_class='col-sm-8' form_group_class='form-group-sm' %}
-
-                        <div class="form-group-sm">
-                            <label for="id_password" class="col-sm-4 control-label">{% trans 'Password' %}</label>
-                            <div class="col-sm-8">
-                                <div class="input-group input-group-sm">
-                                    {{ form.password }}{{ form.password.errors }}
-                                    <span class="input-group-btn">
-                                        <button type="button" class="btn btn-default" onmousedown="document.getElementById('id_password').type='text'" onmouseup="document.getElementById('id_password').type='password'">
-                                            <span class="glyphicon glyphicon-eye-open"></span>
-                                        </button>
-                                    </span>
-                                </div>
-                            </div>
-                        </div>
-
-                        {% bootstrap_field form.description label_class='col-sm-4' field_class='col-sm-8' form_group_class='form-group-sm' %}
+                        {% bootstrap_field form.description form_group_class='form-group-sm' %}
 
                         <div class="form-group-sm">
-                            <div class="col-sm-offset-4 col-sm-8 btn-group btn-group-sm">
+                            <div class="btn-group btn-group-sm">
 
                                 {% trans 'Save' as tx %}
                                 {% if perms.abonapp.change_abon %}
@@ -88,19 +84,15 @@
                                 {% if perms.taskapp.add_task %}
                                     <a href="{% url 'taskapp:add' %}?uid={{ abon.username }}" class="btn btn-success" title="{% trans 'Add new task' %}">
 					                    <span class="glyphicon glyphicon-plus"></span>
-                                        <span class="hidden-xs">{% trans 'Add new task' %}</span>
+                                        {% trans 'Add new task' %}
                                     </a>
                                 {% else %}
                                     <a href="#" class="btn btn-success disabled" title="{% trans 'Permission denied' %}">
                                         <span class="glyphicon glyphicon-plus"></span>
-                                        <span class="hidden-xs">{% trans 'Add new task' %}</span>
+                                        {% trans 'Add new task' %}
                                     </a>
                                 {% endif %}
-                            </div>
-                        </div>
 
-                        <div class="form-group-sm">
-                            <div class="col-sm-offset-4 col-sm-8 btn-group btn-group-sm">
                                 {% if form.ip_address.value %}
                                     {% if perms.abonapp.can_ping %}
                                         <a href="{% url 'abonapp:ping' %}" class="btn btn-default btn-cmd" title="Ping" data-param="{{ form.ip_address.value }}">
diff --git a/djing/settings.py b/djing/settings.py
index bb38d4e..c5a3629 100644
--- a/djing/settings.py
+++ b/djing/settings.py
@@ -184,3 +184,13 @@ API_AUTH_SUBNET = local_settings.API_AUTH_SUBNET
 
 # Company name
 COMPANY_NAME = local_settings.COMPANY_NAME
+
+
+# bootstrap3 settings
+BOOTSTRAP3 = {
+    # Label class to use in horizontal forms
+    'horizontal_label_class': 'col-md-3',
+
+    # Field class to use in horizontal forms
+    'horizontal_field_class': 'col-md-9',
+}
\ No newline at end of file