From 778282ea7fc9b306f4ccc32bba7585cc0c961409 Mon Sep 17 00:00:00 2001
From: booblegum <booblegum42@gmail.com>
Date: Fri, 23 Dec 2016 12:47:06 +0300
Subject: [PATCH] =?UTF-8?q?=D0=9F=D1=80=D0=B0=D0=B2=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Правки для PR-45
+ исправлено загрузка и  отображение Аватарки
---
 assets/js/build/user_profile_edit.js          | 111 +++++
 assets/js/src/seeds/avatar_upload.js          |  42 ++
 assets/js/src/user.js                         |  56 ---
 assets/js/src/user_profile_edit.js            |   5 +
 .../sass/parts/_selected-container.sass       |   1 +
 users/models.py                               |   7 +-
 users/static/sass/customer-profile.sass       |  20 +-
 .../partials/inc-customer_profile-info.html   |  40 +-
 users/templates/user_profile_edit.html        | 471 +++++++++---------
 webpack.config.js                             |   3 +-
 10 files changed, 433 insertions(+), 323 deletions(-)
 create mode 100644 assets/js/build/user_profile_edit.js
 create mode 100644 assets/js/src/seeds/avatar_upload.js
 delete mode 100644 assets/js/src/user.js
 create mode 100644 assets/js/src/user_profile_edit.js

diff --git a/assets/js/build/user_profile_edit.js b/assets/js/build/user_profile_edit.js
new file mode 100644
index 0000000..d4fd163
--- /dev/null
+++ b/assets/js/build/user_profile_edit.js
@@ -0,0 +1,111 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 0:
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+	var _avatar_upload = __webpack_require__(27);
+
+	$(function () {
+	    (0, _avatar_upload.avatarUploadInit)();
+	});
+
+/***/ },
+
+/***/ 27:
+/***/ function(module, exports) {
+
+	'use strict';
+
+	Object.defineProperty(exports, "__esModule", {
+	    value: true
+	});
+	// Live image avatar (single) upload ---------------------------------
+	var LIVE_IMAGE_UPLOAD_URL = '/common/live-image-upload/create/';
+
+	function avatarUploadInit() {
+	    var $container = $('.-live-image-avatar-upload-container').first();
+
+	    var $avatarImage = $container.find('.-avatar-image').first();
+	    var $liveImageUpload = $container.find('.-live-image-upload').first();
+	    var $liveImageId = $container.find('.-live-image-id').first();
+	    var $liveImageDelete = $container.find('.-live-image-delete').first();
+
+	    $avatarImage.attr('orig-src', $avatarImage.attr('src'));
+
+	    $liveImageUpload.fileupload({
+	        url: LIVE_IMAGE_UPLOAD_URL,
+	        dataType: 'json',
+
+	        done: function done($evt, data) {
+	            var image = data.result;
+
+	            $avatarImage.attr('src', image.thumbnailUrl);
+	            $liveImageId.val(image.id);
+
+	            $liveImageDelete.data('url', image.deleteUrl);
+	            $liveImageDelete.css('display', 'block');
+	        }
+	    });
+
+	    $liveImageDelete.on('click', function ($evt) {
+	        var $that = $(this);
+
+	        $.post($that.data('url')).then(function (res) {
+	            if (res.status == 'success') {
+	                $avatarImage.attr('src', $avatarImage.attr('orig-src') || STUB_IMAGE_URL);
+	                $liveImageId.val('');
+	                $that.css('display', 'none');
+	            }
+	        });
+	    });
+	}
+
+	exports.avatarUploadInit = avatarUploadInit;
+
+/***/ }
+
+/******/ });
\ No newline at end of file
diff --git a/assets/js/src/seeds/avatar_upload.js b/assets/js/src/seeds/avatar_upload.js
new file mode 100644
index 0000000..5c7ba60
--- /dev/null
+++ b/assets/js/src/seeds/avatar_upload.js
@@ -0,0 +1,42 @@
+// Live image avatar (single) upload ---------------------------------
+var LIVE_IMAGE_UPLOAD_URL = '/common/live-image-upload/create/';
+
+function avatarUploadInit() {
+    var $container = $('.-live-image-avatar-upload-container').first();
+
+    var $avatarImage = $container.find('.-avatar-image').first();
+    var $liveImageUpload = $container.find('.-live-image-upload').first();
+    var $liveImageId = $container.find('.-live-image-id').first();
+    var $liveImageDelete = $container.find('.-live-image-delete').first();
+
+    $avatarImage.attr('orig-src', $avatarImage.attr('src'));
+
+    $liveImageUpload.fileupload({
+        url: LIVE_IMAGE_UPLOAD_URL,
+        dataType: 'json',
+
+        done: function($evt, data) {
+            var image = data.result;
+
+            $avatarImage.attr('src', image.thumbnailUrl);
+            $liveImageId.val(image.id);
+
+            $liveImageDelete.data('url', image.deleteUrl);
+            $liveImageDelete.css('display', 'block')
+        }
+    });
+
+    $liveImageDelete.on('click', function($evt) {
+        var $that = $(this);
+
+        $.post($that.data('url')).then(function(res) {
+            if (res.status == 'success') {
+                $avatarImage.attr('src', $avatarImage.attr('orig-src') || STUB_IMAGE_URL);
+                $liveImageId.val('');
+                $that.css('display', 'none')
+            }
+        })
+    })
+}
+
+export {avatarUploadInit}
\ No newline at end of file
diff --git a/assets/js/src/user.js b/assets/js/src/user.js
deleted file mode 100644
index 7e39f9b..0000000
--- a/assets/js/src/user.js
+++ /dev/null
@@ -1,56 +0,0 @@
-
-function onBind(target, name, descriptor) {
-    const method = descriptor.value;
-
-    descriptor.value = function (...args) {
-        let binds = [];
-        args = Array.from(args);
-        for (let arg of args.slice()) {
-            if (typeof arg === 'object') {
-                binds.push(arg);
-                args.splice(args.indexOf(arg), 1);
-            }
-        }
-        method.apply(this, args);
-        for (let bind of binds) {
-            bind.func.bind(this)();
-        }
-        return this;
-    }
-}
-
-class Base {
-    constructor() {
-        this.attr1 = 'attr1';
-        console.log("Constructor")
-    }
-
-    @onBind
-    method1(a = 1, b = 2) {
-        console.log("this.attr1 = ", this.attr1);
-        console.log("a = ", a, "b = ", b);
-    }
-
-    on(methodName, func) {
-        this[methodName] = this[methodName].bind(this, {func});
-    }
-}
-
-let b = new Base();
-
-b.on("method1", () => console.log("Another message..."));
-b.on("method1", function () {
-    console.log("bind this.attr1 =", this.attr1);
-});
-
-b.method1("one", 2);
-b.method1("bbb");
-
-if (NODE_ENV == 'dev') {
-    console.log("Dev mode message")
-}
-
-
-function a({a=2, b=a+4}) {
-
-}
\ No newline at end of file
diff --git a/assets/js/src/user_profile_edit.js b/assets/js/src/user_profile_edit.js
new file mode 100644
index 0000000..f4653b2
--- /dev/null
+++ b/assets/js/src/user_profile_edit.js
@@ -0,0 +1,5 @@
+import {avatarUploadInit} from './seeds/avatar_upload'
+
+$(function () {
+    avatarUploadInit();
+});
\ No newline at end of file
diff --git a/assets/lib/proekton-components/sass/parts/_selected-container.sass b/assets/lib/proekton-components/sass/parts/_selected-container.sass
index fff89f4..59e6a94 100644
--- a/assets/lib/proekton-components/sass/parts/_selected-container.sass
+++ b/assets/lib/proekton-components/sass/parts/_selected-container.sass
@@ -23,6 +23,7 @@
     .header
       font-size: 7pt
       color: #676363
+      display: block
     .name
       font-size: 11pt
       display: inline-block
diff --git a/users/models.py b/users/models.py
index 794f3b0..2f8d01e 100644
--- a/users/models.py
+++ b/users/models.py
@@ -171,13 +171,13 @@ class User(AbstractBaseUser, PermissionsMixin):
         try:
             return self.location.parent.parent.name
         except AttributeError:
-            return 'None'
+            return 'Не задан'
 
     def city(self):
         try:
             return self.location.name
         except AttributeError:
-            return 'None'
+            return "Не задан"
     # @property
     # def is_staff(self):
     #     return self.is_superuser
@@ -189,7 +189,8 @@ class User(AbstractBaseUser, PermissionsMixin):
         return self.email
 
     def get_full_name(self):
-        full_name = self.first_name + ' ' + self.last_name + ' ' + self.patronym
+        full_name = '{last_name} {first_name} {patronym}'.format(**self.__dict__)
+        # full_name = self.first_name + ' ' + self.last_name + ' ' + self.patronym
         return full_name or self.username
 
     def get_profile_image(self):
diff --git a/users/static/sass/customer-profile.sass b/users/static/sass/customer-profile.sass
index c4b268b..4cbd5a3 100644
--- a/users/static/sass/customer-profile.sass
+++ b/users/static/sass/customer-profile.sass
@@ -1,14 +1,8 @@
 @import "base/variavles"
 @import "modules/mods"
 
-//.avatarInset
-//  //width: 100%
-//  height: 224px
-//  img
-//    width: 100%
-//    height: 100%
-//  //padding: 10%
-//  background-color: #e4e4e4
+.avatar
+  border: 15px solid #F1F1F1
 
 .count
   display: inline-block
@@ -44,7 +38,6 @@
   font-size: 16pt
   line-height: 100%
 
-
 .border.add_line:before
   content: ''
   position: relative
@@ -54,13 +47,14 @@
   background-color: black
   left: 62px
   top: 0
-  //z-index: 1
-  //-webkit-transition: all 0.3s ease-out
-  //-moz-transition: all 0.3s ease-out
-  //transition: all 0.3s ease-out
+//z-index: 1
+//-webkit-transition: all 0.3s ease-out
+//-moz-transition: all 0.3s ease-out
+//transition: all 0.3s ease-out
 
 .nav-tabs a
   color: #0b0b0b
+
 table.ratings
   font-size: 14pt
   td
diff --git a/users/templates/partials/inc-customer_profile-info.html b/users/templates/partials/inc-customer_profile-info.html
index 195de31..9bd0387 100644
--- a/users/templates/partials/inc-customer_profile-info.html
+++ b/users/templates/partials/inc-customer_profile-info.html
@@ -4,20 +4,18 @@
 {% load user_tags %}
 <div class="row">
     <div class="col-lg-3">
-        <div class="avatar new-mar">
-            <div class="avatarInset">
-                {% if customer.avatar %}
-                    {% thumbnail customer.avatar "235x224" crop="center" as im %}
-                        <img src="{{ im.url }}" alt="profile-image">
-                    {% endthumbnail %}
-                {% else %}
-                    <img src="{% static 'img/profile.jpg' %}" alt="profile-image">
-                {% endif %}
-            </div>
+        <div class="avatar">
+            {% if customer.avatar %}
+                {% thumbnail customer.avatar "220x220" crop="center" as im %}
+                    <img src="{{ im.url }}" alt="profile-image">
+                {% endthumbnail %}
+            {% else %}
+                <img src="{% static 'img/profile.jpg' %}" width="220" height="220" alt="profile-image">
+            {% endif %}
         </div>
     </div>
     <div class="col-lg-9">
-        <div class="row mod-row-eq-height" style="padding-bottom: 40px">
+        <div class="row mod-row-eq-height" style="padding-bottom: 30px">
             <div class="col-lg-5">
                 <span class="user_name">{{ customer.get_full_name }} <br>[{{ customer.username }}]</span>
                 <table style="margin-top: 10px; margin-bottom: 10px">
@@ -35,10 +33,10 @@
                     </tr>
                 </table>
                 {% if request.user == customer %}
-                <a href="{% url 'users:user-profile-edit' pk=pk %}" class="btn btn-simple mod-align-center-inline"
-                    style="padding: px 20px; font-size: 12pt">
-                    <span type="submit" class="icon-edit"> </span> редактировать профиль
-                </a>
+                    <a href="{% url 'users:user-profile-edit' pk=pk %}" class="btn btn-simple mod-align-center-inline"
+                       style="padding: 8px 20px; font-size: 12pt">
+                        <span type="submit" class="icon-edit"> </span> редактировать профиль
+                    </a>
                 {% endif %}
             </div>
 
@@ -79,22 +77,26 @@
                     <ul class="nav nav-tabs nav-justified">
                         <li class="active">
                             <a data-toggle="tab" href="#objects">
-                                <div class="mod-align-center-inline"> Объекты <span class="count">{{ objects.count }}</span></div>
+                                <div class="mod-align-center-inline"> Объекты <span
+                                        class="count">{{ objects.count }}</span></div>
                             </a>
                         </li>
                         <li>
                             <a data-toggle="tab" href="#open_projects">
-                                <div class="mod-align-center-inline"> Открытые заказы <span class="count">{{ open_projects.count }}</span></div>
+                                <div class="mod-align-center-inline"> Открытые заказы <span
+                                        class="count">{{ open_projects.count }}</span></div>
                             </a>
                         </li>
                         <li>
                             <a data-toggle="tab" href="#in_work_projects">
-                                <div class="mod-align-center-inline"> Заказы в работе <span class="count">{{ projects_in_work.count }}</span></div>
+                                <div class="mod-align-center-inline"> Заказы в работе <span
+                                        class="count">{{ projects_in_work.count }}</span></div>
                             </a>
                         </li>
                         <li>
                             <a data-toggle="tab" href="#rewiews">
-                                <div class="mod-align-center-inline"> Отзывы <span class="count">{{ reviews.count }}</span></div>
+                                <div class="mod-align-center-inline"> Отзывы <span
+                                        class="count">{{ reviews.count }}</span></div>
                             </a>
                         </li>
                     </ul>
diff --git a/users/templates/user_profile_edit.html b/users/templates/user_profile_edit.html
index c6cee9d..89e7a42 100644
--- a/users/templates/user_profile_edit.html
+++ b/users/templates/user_profile_edit.html
@@ -15,301 +15,305 @@
 {% block content %}
     <div class="container main-scope">
         <div class="row main-content">
-{#            <div class="old-main">#}
-                <form method="POST" enctype="multipart/form-data" novalidate>
-                    {% csrf_token %}
-                    {% if request.user.is_customer %}
-                        <input type="hidden" name="next" value="{% url 'users:customer-profile' pk=pk %}">
-                    {% else %}
-                        <input type="hidden" name="next" value="{% url 'users:contractor-profile' pk=pk %}">
-                    {% endif %}
+            {#            <div class="old-main">#}
+            <form method="POST" enctype="multipart/form-data" novalidate>
+                {% csrf_token %}
+                {% if request.user.is_customer %}
+                    <input type="hidden" name="next" value="{% url 'users:customer-profile' pk=pk %}">
+                {% else %}
+                    <input type="hidden" name="next" value="{% url 'users:contractor-profile' pk=pk %}">
+                {% endif %}
 
-                    <div class="col-lg-12">
-                        <div class="row row-eq-height">
-                            <div class="col-lg-3 -live-image-avatar-upload-container">
-                                <div class="avatar" style="float: none">
-                                    <div class="avatarInset -position-relative-parent">
-                                        <a href="#" onclick="return false" class="btn close -live-image-delete"
-                                           style="display: none">&times;</a>
+                <div class="col-lg-12">
+                    <div class="row row-eq-height">
+                        <div class="col-lg-3 -live-image-avatar-upload-container">
+                            <div class="avatar" style="float: none">
+                                <div class="avatarInset -position-relative-parent">
+                                    <a href="#" onclick="return false" class="btn close -live-image-delete"
+                                       style="display: none">&times;</a>
 
-                                        {% if request.user.avatar %}
-                                            {% thumbnail request.user.avatar "208x208" crop="center" as avatar %}
-                                                <img src="{{ avatar.url }}" alt="profile-image" class="-avatar-image">
-                                            {% endthumbnail %}
-                                        {% else %}
-                                            <img src="{% static 'img/profile.jpg' %}" alt="profile-image"
-                                                 class="-avatar-image">
-                                        {% endif %}
-                                    </div>
+                                    {% if request.user.avatar %}
+                                        {% thumbnail request.user.avatar "208x208" crop="center" as avatar %}
+                                            <img src="{{ avatar.url }}" alt="profile-image" class="-avatar-image">
+                                        {% endthumbnail %}
+                                    {% else %}
+                                        <img src="{% static 'img/profile.jpg' %}" width="208" height="208" alt="profile-image" class="-avatar-image">
+{#                                        {% with "/static/img/profile.jpg" as path %}#}
+{#                                            {% thumbnail path "100x100" crop="center" as im %}#}
+{#                                                <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" alt="profile-image" class="-avatar-image">#}
+{#                                            {% endthumbnail %}#}
+{#                                        {% endwith %}#}
+                                    {% endif %}
                                 </div>
-                                <div style="margin-top: 15px">
-                                    <div class="upload-new">
-                                        {#                                    <div class="upload2 up-l1">#}
-                                        <input type="file" name="image" class="-live-image-upload">
+                            </div>
+                            <div style="margin-top: 15px; margin-bottom: 15px">
+                                <div class="upload-new">
+                                    {#                                    <div class="upload2 up-l1">#}
+                                    <input type="file" name="image" class="-live-image-upload">
 
-                                        <p>Загрузить фотографию</p>
-                                        {#                                    </div>#}
-                                    </div>
-                                </div>
-                                <div {% if not TESTING %}style="display: none"{% endif %}>
-                                    <input type="text" name="live_image" class="-live-image-id">
+                                    <p>Загрузить фотографию</p>
+                                    {#                                    </div>#}
                                 </div>
                             </div>
-                            <div class="col-lg-9">
-                                <div class="row">
-                                    <div class="col-lg-12">
-                                        <div class="bottom-line">
-                                            {% if request.user.is_customer %}
-                                                <span class="header">
+                            <div {% if not TESTING %}style="display: none"{% endif %}>
+                                <input type="text" name="live_image" class="-live-image-id">
+                            </div>
+                        </div>
+                        <div class="col-lg-9">
+                            <div class="row">
+                                <div class="col-lg-12">
+                                    <div class="bottom-line">
+                                        {% if request.user.is_customer %}
+                                            <span class="header">
                                                 Полное заполнение профиля влияет на количество откликиков исполнителей и “безопасную сделку”
                                                 <i class="fa fa-question-circle-o" aria-hidden="true" title=""></i>
                                             </span>
-                                            {% else %}
-                                                <span class="header">
+                                        {% else %}
+                                            <span class="header">
                                                 Параметры заполнения прифоля влияют на фильтр поиска специалистов, ранжирования в списке
                                                 <i class="fa fa-question-circle-o" aria-hidden="true" title=""></i>
                                             </span>
-                                            {% endif %}
+                                        {% endif %}
 
 
-                                        </div>
                                     </div>
                                 </div>
-                                <div class="row">
-                                    <div class="col-lg-12" style="padding-bottom: 10px">
+                            </div>
+                            <div class="row">
+                                <div class="col-lg-12" style="padding-bottom: 10px">
                                 <span class="header block-header">
                                     Личная информация <i class="fa fa-question-circle-o" aria-hidden="true"
                                                          title=""></i>
                                 </span>
-                                    </div>
                                 </div>
+                            </div>
 
-                                <div class="row">
-                                    <div class="col-lg-4">
-                                        <input value="{{ form.last_name.value }}" name="{{ form.last_name.html_name }}"
-                                               class="simple-input" placeholder="Фамилия">
-                                    </div>
-                                    <div class="col-lg-4">
-                                        <input value="{{ form.first_name.value }}"
-                                               name="{{ form.first_name.html_name }}"
-                                               class="simple-input" placeholder="Имя">
-                                    </div>
-                                    <div class="col-lg-4">
-                                        <input value="{{ form.patronym.value }}" name="{{ form.patronym.html_name }}"
-                                               class="simple-input" placeholder="Отчество">
-                                    </div>
-                                    <div class="col-lg-4">
-                                        <div class="vertical-child" id="sb-location-1">
-                                        </div>
+                            <div class="row">
+                                <div class="col-lg-4">
+                                    <input value="{{ form.last_name.value }}" name="{{ form.last_name.html_name }}"
+                                           class="simple-input" placeholder="Фамилия">
+                                </div>
+                                <div class="col-lg-4">
+                                    <input value="{{ form.first_name.value }}"
+                                           name="{{ form.first_name.html_name }}"
+                                           class="simple-input" placeholder="Имя">
+                                </div>
+                                <div class="col-lg-4">
+                                    <input value="{{ form.patronym.value }}" name="{{ form.patronym.html_name }}"
+                                           class="simple-input" placeholder="Отчество">
+                                </div>
+                                <div class="col-lg-4">
+                                    <div class="vertical-child" id="sb-location-1">
                                     </div>
-                                    <div class="col-lg-4">
-                                        <div class="vertical-child" id="sb-location-2">
-                                        </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <div class="vertical-child" id="sb-location-2">
                                     </div>
-                                    <div class="col-lg-4">
-                                        <div class="vertical-child" id="sb-location-3">
-                                        </div>
+                                </div>
+                                <div class="col-lg-4">
+                                    <div class="vertical-child" id="sb-location-3">
                                     </div>
-                                    <div class="col-lg-8">
-                                        <div class="selected-container horizontal vertical-child no-margin"
-                                             id="selected-location">
-                                            <div class="header">&nbsp;</div>
-                                            <input type="hidden" name="location"
-                                                   value="{{ form.location.value }}">
-                                        </div>
+                                </div>
+                                <div class="col-lg-8">
+                                    <div class="selected-container horizontal vertical-child no-margin"
+                                         id="selected-location">
+                                        <div class="header">&nbsp;</div>
+                                        <input type="hidden" name="location"
+                                               value="{{ form.location.value }}">
                                     </div>
                                 </div>
                             </div>
-                        </div> <!-- top -->
-                        {% if request.user.is_contractor %}
-                            <div class="row">
-                                <div style="padding-bottom: 10px" class="col-lg-12">
-                                    <div class="row">
-                                        <div class="col-lg-offset-3 col-lg-9">
-                                            <div class="top-line">
+                        </div>
+                    </div> <!-- top -->
+                    {% if request.user.is_contractor %}
+                        <div class="row">
+                            <div style="padding-bottom: 10px" class="col-lg-12">
+                                <div class="row">
+                                    <div class="col-lg-offset-3 col-lg-9">
+                                        <div class="top-line">
                                 <span class="header block-header">
                                     Мой опыт работы в проектировании / дизайне / сопровождении проектной документации
                                     <i class="fa fa-question-circle-o" aria-hidden="true" title=""></i>
                                 </span>
-                                            </div>
                                         </div>
                                     </div>
-                                    <div class="row">
-                                        <div class="col-lg-12">
-                                            <div class="" id="select-box-1">
-                                            </div>
+                                </div>
+                                <div class="row">
+                                    <div class="col-lg-12">
+                                        <div class="" id="select-box-1">
                                         </div>
                                     </div>
-                                    <div class="row">
-                                        <div class="col-lg-3">
-                                            <div class="vertical-child" id="select-box-2">
-                                            </div>
-                                        </div>
-                                        <div class="col-lg-3">
-                                            <div class="vertical-child" id="select-box-3">
-                                            </div>
-                                        </div>
-                                        <div class="col-lg-3">
-                                            <div class="vertical-child" id="select-box-4">
-                                            </div>
-                                        </div>
-                                        <div class="col-lg-3">
-                                            <div class="vertical-child" id="select-box-5">
-                                            </div>
+                                </div>
+                                <div class="row">
+                                    <div class="col-lg-3">
+                                        <div class="vertical-child" id="select-box-2">
                                         </div>
                                     </div>
-                                    <div class="row">
-                                        <div class="col-lg-12">
-                                            <div class="selected-container horizontal" id="selected-spec">
-                                                <input type="hidden"
-                                                       name="{{ form.contractor_specializations.html_name }}"
-                                                       value="{{ form.contractor_specializations.value }}">
-                                            </div>
+                                    <div class="col-lg-3">
+                                        <div class="vertical-child" id="select-box-3">
                                         </div>
                                     </div>
-                                    <div class="row">
-                                        <div class="col-lg-3">
-                                            <div class="vertical-child" id="sb-building-classification">
-                                            </div>
-                                            <div class="vertical-child" id="sb-building-sub-classification">
-                                            </div>
-                                            <div class="selected-container" id="selected-building-classification">
-                                                <input type="hidden"
-                                                       name="{{ form.contractor_building_classifications.html_name }}"
-                                                       value="{{ form.contractor_building_classifications.value }}">
-                                            </div>
-                                        </div>
-                                        <div class="col-lg-3">
-                                            <div class="vertical-child" id="sb-construction-type">
-                                            </div>
-                                            <div class="selected-container" id="selected-construction-type">
-                                                <input type="hidden"
-                                                       name="{{ form.contractor_construction_types.html_name }}"
-                                                       value="{{ form.contractor_construction_types.value }}">
-                                            </div>
+                                    <div class="col-lg-3">
+                                        <div class="vertical-child" id="select-box-4">
                                         </div>
-                                        <div class="col-lg-3">
-                                            <div class="select-box-header vertical-child">
-                                                <span style="width: 180px" class="header">Требуется допуск (СРО)</span>
-                                                <i class="fa fa-question-circle-o" aria-hidden="true"
-                                                   title="bla-bla-bla..."></i>
-                                            </div>
-
-                                            <div class="custom-check">
-                                                <div class="checked"></div>
-                                                <div style="display: none" class="not-checked"></div>
-                                                <input name="{{ form.cro.html_name }}" type="checkbox" hidden
-                                                        {% if form.cro.value %} checked{% endif %}>
-                                            </div>
+                                    </div>
+                                    <div class="col-lg-3">
+                                        <div class="vertical-child" id="select-box-5">
                                         </div>
                                     </div>
                                 </div>
-                            </div> <!-- center -->
-                        {% endif %}
-                        <div class="row">
-                            <div class="col-lg-12">
                                 <div class="row">
                                     <div class="col-lg-12">
-                                        <div class="top-line" style="padding-top: 15px">
-                                            <div class="btn-group toggle" role="group" aria-label="...">
-                                                <a style="z-index: 0" href="#"
-                                                        {#                                            <a style="z-index: 0" href="{% url 'users:user-profile-edit' pk=pk %}"#}
-                                                   role="button"
-                                                   class="btn btn-default active">Общая информация</a>
-                                                <a href="#"
-                                                   class="btn btn-default" role="button">Финансовая информация</a>
-                                            </div>
+                                        <div class="selected-container horizontal" id="selected-spec">
+                                            <input type="hidden"
+                                                   name="{{ form.contractor_specializations.html_name }}"
+                                                   value="{{ form.contractor_specializations.value }}">
                                         </div>
                                     </div>
                                 </div>
-                                <div class="row info">
+                                <div class="row">
                                     <div class="col-lg-3">
-                                        <div class="header"> Дата рождения</div>
-                                        <div class="birth_edit_dat">
-                                            {{ form.date_of_birth }}
+                                        <div class="vertical-child" id="sb-building-classification">
                                         </div>
-                                    </div>
-                                    <div class="col-lg-3">
-                                        <div style="position: relative" class="select-box-container custom-select"
-                                             id="gender">
-                                            <div class="select-box-header">
-                                                <div class="header">Пол</div>
-                                            </div>
-                                            <input class="simple-select" placeholder="Выберите"
-                                                   value="{{ form.get_gender_display }}" readonly>
-                                            <input type="hidden" name="{{ form.gender.html_name }}"
-                                                   value="{{ form.gender.value }}">
-                                            <div class="select-box-options" style="width: 100%; display: none">
-                                                <div style="min-width: inherit" class="box-wrapper">
-                                                    <ul>
-                                                        {% for id, text in form.gender.field.choices %}
-                                                            <li data-id="{{ id }}">{{ text }}</li>
-                                                        {% endfor %}
-                                                    </ul>
-                                                </div>
-                                            </div>
+                                        <div class="vertical-child" id="sb-building-sub-classification">
+                                        </div>
+                                        <div class="selected-container" id="selected-building-classification">
+                                            <input type="hidden"
+                                                   name="{{ form.contractor_building_classifications.html_name }}"
+                                                   value="{{ form.contractor_building_classifications.value }}">
                                         </div>
-
                                     </div>
                                     <div class="col-lg-3">
-                                        <div style="position: relative" class="select-box-container custom-select"
-                                             id="gender">
-                                            <div class="select-box-header">
-                                                <div class="header">Статус</div>
-                                            </div>
-                                            <input class="simple-select" placeholder="Выберите"
-                                                   value="{{ form.get_status_display }}" readonly>
-                                            <input type="hidden" name="{{ form.contractor_status.html_name }}"
-                                                   value="{{ form.contractor_status.value }}">
-                                            <div class="select-box-options" style="width: 100%; display: none">
-                                                <div style="min-width: inherit" class="box-wrapper">
-                                                    <ul>
-                                                        {% for id, text in form.contractor_status.field.choices %}
-                                                            <li data-id="{{ id }}">{{ text }}</li>
-                                                        {% endfor %}
-                                                    </ul>
-                                                </div>
-                                            </div>
+                                        <div class="vertical-child" id="sb-construction-type">
+                                        </div>
+                                        <div class="selected-container" id="selected-construction-type">
+                                            <input type="hidden"
+                                                   name="{{ form.contractor_construction_types.html_name }}"
+                                                   value="{{ form.contractor_construction_types.value }}">
                                         </div>
                                     </div>
                                     <div class="col-lg-3">
-                                        <div class="header">Skype</div>
-                                        <input name="{{ form.skype.html_name }}" class="simple-input"
-                                               placeholder="skype id"
-                                               value="{{ form.skype.value }}">
+                                        <div class="select-box-header vertical-child">
+                                            <span style="width: 180px" class="header">Требуется допуск (СРО)</span>
+                                            <i class="fa fa-question-circle-o" aria-hidden="true"
+                                               title="bla-bla-bla..."></i>
+                                        </div>
+
+                                        <div class="custom-check">
+                                            <div class="checked"></div>
+                                            <div style="display: none" class="not-checked"></div>
+                                            <input name="{{ form.cro.html_name }}" type="checkbox" hidden
+                                                    {% if form.cro.value %} checked{% endif %}>
+                                        </div>
                                     </div>
-                                    <div class="clearfix visible-lg"></div>
-                                    <div class="col-lg-3 vertical-child">
-                                        <div class="header">Сайт</div>
-                                        <input name="{{ form.website.html_name }}" class="simple-input"
-                                               placeholder="example.com"
-                                               value="{{ form.website.value }}">
+                                </div>
+                            </div>
+                        </div> <!-- center -->
+                    {% endif %}
+                    <div class="row">
+                        <div class="col-lg-12">
+                            <div class="row">
+                                <div class="col-lg-12">
+                                    <div class="top-line" style="padding-top: 15px">
+                                        <div class="btn-group toggle" role="group" aria-label="...">
+                                            <a style="z-index: 0" href="#"
+                                                    {#                                            <a style="z-index: 0" href="{% url 'users:user-profile-edit' pk=pk %}"#}
+                                               role="button"
+                                               class="btn btn-default active">Общая информация</a>
+                                            <a href="#"
+                                               class="btn btn-default" role="button">Финансовая информация</a>
+                                        </div>
                                     </div>
-                                    <div class="col-lg-3 vertical-child">
-                                        <div class="header">Телефон</div>
-                                        <input name="{{ form.phone.html_name }}" class="simple-input phone"
-                                               placeholder="+7 909 999 00 00"
-                                               value="{{ form.phone.value }}"
-                                               type="tel">
+                                </div>
+                            </div>
+                            <div class="row info">
+                                <div class="col-lg-3">
+                                    <div class="header"> Дата рождения</div>
+                                    <div class="birth_edit_dat">
+                                        {{ form.date_of_birth }}
                                     </div>
-                                    <div class="col-lg-3 vertical-child">
-                                        <div class="header">Второй телефон</div>
-                                        <input name="{{ form.phone2.html_name }}" class="simple-input phone"
-                                               placeholder="+7 909 999 00 00"
-                                               value="{{ form.phone2.value }}"
-                                               type="tel">
+                                </div>
+                                <div class="col-lg-3">
+                                    <div style="position: relative" class="select-box-container custom-select"
+                                         id="gender">
+                                        <div class="select-box-header">
+                                            <div class="header">Пол</div>
+                                        </div>
+                                        <input class="simple-select" placeholder="Выберите"
+                                               value="{{ form.get_gender_display }}" readonly>
+                                        <input type="hidden" name="{{ form.gender.html_name }}"
+                                               value="{{ form.gender.value }}">
+                                        <div class="select-box-options" style="width: 100%; display: none">
+                                            <div style="min-width: inherit" class="box-wrapper">
+                                                <ul>
+                                                    {% for id, text in form.gender.field.choices %}
+                                                        <li data-id="{{ id }}">{{ text }}</li>
+                                                    {% endfor %}
+                                                </ul>
+                                            </div>
+                                        </div>
                                     </div>
-                                    <div class="col-lg-3 vertical-child" style="text-align: center">
-                                        <div class="header">&nbsp;</div>
-                                        <input type="submit" class="btn btn-simple" value="СОХРАНИТЬ">
+
+                                </div>
+                                <div class="col-lg-3">
+                                    <div style="position: relative" class="select-box-container custom-select"
+                                         id="gender">
+                                        <div class="select-box-header">
+                                            <div class="header">Статус</div>
+                                        </div>
+                                        <input class="simple-select" placeholder="Выберите"
+                                               value="{{ form.get_status_display }}" readonly>
+                                        <input type="hidden" name="{{ form.contractor_status.html_name }}"
+                                               value="{{ form.contractor_status.value }}">
+                                        <div class="select-box-options" style="width: 100%; display: none">
+                                            <div style="min-width: inherit" class="box-wrapper">
+                                                <ul>
+                                                    {% for id, text in form.contractor_status.field.choices %}
+                                                        <li data-id="{{ id }}">{{ text }}</li>
+                                                    {% endfor %}
+                                                </ul>
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
-
+                                <div class="col-lg-3">
+                                    <div class="header">Skype</div>
+                                    <input name="{{ form.skype.html_name }}" class="simple-input"
+                                           placeholder="skype id"
+                                           value="{{ form.skype.value }}">
+                                </div>
+                                <div class="clearfix visible-lg"></div>
+                                <div class="col-lg-3 vertical-child">
+                                    <div class="header">Сайт</div>
+                                    <input name="{{ form.website.html_name }}" class="simple-input"
+                                           placeholder="example.com"
+                                           value="{{ form.website.value }}">
+                                </div>
+                                <div class="col-lg-3 vertical-child">
+                                    <div class="header">Телефон</div>
+                                    <input name="{{ form.phone.html_name }}" class="simple-input phone"
+                                           placeholder="+7 909 999 00 00"
+                                           value="{{ form.phone.value }}"
+                                           type="tel">
+                                </div>
+                                <div class="col-lg-3 vertical-child">
+                                    <div class="header">Второй телефон</div>
+                                    <input name="{{ form.phone2.html_name }}" class="simple-input phone"
+                                           placeholder="+7 909 999 00 00"
+                                           value="{{ form.phone2.value }}"
+                                           type="tel">
+                                </div>
+                                <div class="col-lg-3 vertical-child" style="text-align: center">
+                                    <div class="header">&nbsp;</div>
+                                    <input type="submit" class="btn btn-simple" value="СОХРАНИТЬ">
+                                </div>
                             </div>
-                        </div> <!-- bottom -->
-                    </div>
-                </form>
-{#            </div>#}
+
+                        </div>
+                    </div> <!-- bottom -->
+                </div>
+            </form>
+            {#            </div>#}
         </div>
     </div>
 
@@ -318,6 +322,11 @@
     {{ block.super }}
     <script src='{% static "lib/proekton-components/js/build/init_user_profile.js" %}'></script>
     <script src='{% static "projects-filter.js" %}'></script>
+    <script src='{% static "lib/jquery.fileupload/js/vendor/jquery.ui.widget.js" %}'></script>
+    <script src='{% static "lib/jquery.fileupload/js/jquery.iframe-transport.js" %}'></script>
+    <script src='{% static "lib/jquery.fileupload/js/jquery.fileupload.js" %}'></script>
+    <script src='{% static "lib/jquery.fileupload/js/jquery.fileupload-process.js" %}'></script>
+    <script src='{% static "js/build/user_profile_edit.js" %}'></script>
     <script src='{% static "js/jquery.mask.min.js" %}'></script>
     <script>
         $(function () {
diff --git a/webpack.config.js b/webpack.config.js
index 3b61529..2ca09b1 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -17,7 +17,8 @@ module.exports = {
         //home
         home_page: "./assets/js/src/home_page.js",
         //profile
-        customer_profile: "./assets/js/src/customer_profile.js"
+        customer_profile: "./assets/js/src/customer_profile.js",
+        user_profile_edit: "./assets/js/src/user_profile_edit.js"
 
     },