Browse Source

Refactoring abon view template to bootstrap3 lib

devel
Dmitry 8 years ago
parent
commit
f553510a59
  1. 6
      abonapp/forms.py
  2. 90
      abonapp/templates/abonapp/editAbon.html
  3. 10
      djing/settings.py

6
abonapp/forms.py

@ -53,11 +53,11 @@ class AbonForm(forms.ModelForm):
'placeholder': _('login'), 'placeholder': _('login'),
'required': '', 'required': '',
'pattern': r'^\w{1,127}$' 'pattern': r'^\w{1,127}$'
}))
}), label=_('login'))
password = forms.CharField(max_length=64, initial=generate_random_password, widget=forms.TextInput(attrs={ 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={ ip_address = forms.CharField(widget=forms.TextInput(attrs={
'pattern': IP_ADDR_REGEX 'pattern': IP_ADDR_REGEX

90
abonapp/templates/abonapp/editAbon.html

@ -17,66 +17,62 @@
<form autocomplete="off" class="form-horizontal" action="{{ ahlink|default:'#' }}" method="post">{% csrf_token %} <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 #} {# Ip address field #}
{% trans 'Reset ip' as tx %} {% trans 'Reset ip' as tx %}
{% url 'abonapp:reset_ip' group.pk abon.username as url %} {% 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_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"> <script type="text/javascript">
$(function () { $(function () {
$("#iprefreshbtn").on('click', function(){ $("#iprefreshbtn").on('click', function(){
$("#{{ form.ip_address.id_for_label }}").val(''); $("#{{ 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> </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="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 %} {% trans 'Save' as tx %}
{% if perms.abonapp.change_abon %} {% if perms.abonapp.change_abon %}
@ -88,19 +84,15 @@
{% if perms.taskapp.add_task %} {% if perms.taskapp.add_task %}
<a href="{% url 'taskapp:add' %}?uid={{ abon.username }}" class="btn btn-success" title="{% trans 'Add new 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="glyphicon glyphicon-plus"></span>
<span class="hidden-xs">{% trans 'Add new task' %}</span>
{% trans 'Add new task' %}
</a> </a>
{% else %} {% else %}
<a href="#" class="btn btn-success disabled" title="{% trans 'Permission denied' %}"> <a href="#" class="btn btn-success disabled" title="{% trans 'Permission denied' %}">
<span class="glyphicon glyphicon-plus"></span> <span class="glyphicon glyphicon-plus"></span>
<span class="hidden-xs">{% trans 'Add new task' %}</span>
{% trans 'Add new task' %}
</a> </a>
{% endif %} {% 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 form.ip_address.value %}
{% if perms.abonapp.can_ping %} {% if perms.abonapp.can_ping %}
<a href="{% url 'abonapp:ping' %}" class="btn btn-default btn-cmd" title="Ping" data-param="{{ form.ip_address.value }}"> <a href="{% url 'abonapp:ping' %}" class="btn btn-default btn-cmd" title="Ping" data-param="{{ form.ip_address.value }}">

10
djing/settings.py

@ -184,3 +184,13 @@ API_AUTH_SUBNET = local_settings.API_AUTH_SUBNET
# Company name # Company name
COMPANY_NAME = local_settings.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',
}
Loading…
Cancel
Save