0.0.1 new functional twb

RoutesApp/funcs.py

@@ -107,7 +107,7 @@ def get_profile_new_route_page_html(request, data):
         # form.errors.append({'__all__': f'Ошибка: {str(e)}'})
         print(str(e))
 
-    html = render_to_string('blocks/profile/b_create_form_poster.html', Dict, request=request)
+    html = render_to_string('v2/blocks/b_make_poster_order.html', Dict, request=request)
     return html
 
 

RoutesApp/js_views.py

@@ -382,7 +382,7 @@ def create_or_change_route_ajax(request, route_id=None):
                 'owner_type': data['owner_type'],
             })
 
-            html = render_to_string('blocks/profile/b_create_form_poster.html', Dict, request=request)
+            html = render_to_string('v2/blocks/b_make_poster_order.html', Dict, request=request)
             return JsonResponse({'html': html}, status=400)
 
         obj = form.save(commit=False)
@@ -420,7 +420,7 @@ def create_or_change_route_ajax(request, route_id=None):
         if 'errors' in routes_Dict:
             form.errors.update(routes_Dict['errors'])
             Dict.update({'form': form})
-            html = render_to_string('blocks/profile/b_create_form_poster.html', Dict, request=request)
+            html = render_to_string('v2/blocks/b_make_poster_order.html', Dict, request=request)
             return JsonResponse({'html': html}, status=400)
 
         html = render_to_string('blocks/profile/b_my_routes.html', routes_Dict, request=request)
@@ -443,5 +443,5 @@ def create_or_change_route_ajax(request, route_id=None):
         }
         # Dict = {'form': errors_Dict}
         Dict.update({'form': errors_Dict})
-        html = render_to_string('blocks/profile/b_create_form_poster.html', Dict, request=request)
+        html = render_to_string('v2/blocks/b_make_poster_order.html', Dict, request=request)
         return JsonResponse({'html': html}, status=400)

static/v2/css/blocks/b_make_poster_order.css

@@ -0,0 +1,13 @@
+.b_make_poster_order {
+    --title-font-size: 44px;
+    --title-font-weight: 700;
+    --title-margin-bottom: 60px;
+
+    .make_poster_order_title{
+        width: 100%;
+        font-size: var(--title-font-size);
+        font-weight: var(--title-font-weight);
+        margin-bottom: var(--title-margin-bottom);
+        text-align: center;
+    }
+}

static/v2/css/forms.css

@@ -0,0 +1,49 @@
+.field_container{
+    --input-border: #E6E6E6;
+    --input-font-size: 16px;
+    --input-border-radius: 10px;
+
+    --placeholder-color: #27242499;
+    --placeholder-font-size: 16px;
+
+    --label-color: #000;
+    --label-required-color: #FF613A;
+    --label-font-size: 16px;
+    --label-font-weight: 500;
+
+    label{
+        display: block;
+        color: var(--label-color);
+        font-weight: var(--label-font-weight);
+        &:has(div){
+            display: flex;
+            align-items: center;
+        }
+        .required_field_icon{
+            color: var(--label-required-color);
+        }
+    }
+
+    input{
+        padding: 20px 10px;
+        border: 1px solid var(--input-border);
+        border-radius: var(--input-border-radius);
+        font-size: var(--input-font-size);
+        &::placeholder{
+            font-size: var(--placeholder-font-size);
+            color: var(--placeholder-color);
+        }
+    }
+}
+
+.form_line{
+    --display: flex;
+    &._50_grid {
+        --display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 40px;
+    }
+    display: var(--display);
+    justify-content: space-between;
+
+}

static/v2/css/widgets/w_select_country.css

@@ -0,0 +1,59 @@
+.w_select_country {
+    position: relative;
+    --header-padding: 10px 20px;
+    --select-border: #E6E6E6;
+    --select-border-radius: 10px;
+
+    .w_select_country_header{
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        justify-content: space-between;
+        border: 1px solid var(--select-border);
+        border-radius: var(--select-border-radius);
+        padding: 10px;
+
+        .select_country_header_left_part{
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            width: calc(100% - 36px);
+
+            .container_inf_about_country{
+                display: none;
+                align-items: center;
+                gap: 5px;
+                &:has(img[src]){
+                    display: flex;
+                }
+                img{
+                    height: 12px;
+                    width: 24px;
+                    object-fit: contain;
+                }
+                div{
+                    color: #27242499;
+                    font-size: 14px;
+                }
+            }
+            input{
+                border: none;
+                outline: none;
+                background: none;
+                padding: 0;
+                flex-grow: 1;
+                border-radius: 0;
+            }
+        }
+        .w_select_country_icon{
+            height: 26px;
+        }
+    }
+    .w_select_country_content{
+        position: absolute;
+        top: 60px;
+    }
+    &.closed{
+        .w_select_country_content{display: none}
+    }
+}

static/v2/icons/widgets/w_select_country/pin.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 29H25" stroke="#FF613A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16 17C18.2091 17 20 15.2091 20 13C20 10.7909 18.2091 9 16 9C13.7909 9 12 10.7909 12 13C12 15.2091 13.7909 17 16 17Z" stroke="#FF613A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26 13C26 22 16 29 16 29C16 29 6 22 6 13C6 10.3478 7.05357 7.8043 8.92893 5.92893C10.8043 4.05357 13.3478 3 16 3C18.6522 3 21.1957 4.05357 23.0711 5.92893C24.9464 7.8043 26 10.3478 26 13V13Z" stroke="#FF613A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

static/v2/js/service/api.js

@@ -0,0 +1,33 @@
+class api {
+    constructor(props) {
+        this.url = props.url;
+        this.data = props.data;
+        this.data_type = props.data_type;
+        this.type = props.type || 'POST';
+        this.success_callback = props.success;
+        this.error_callback = props.error_callback;
+    }
+
+    ajaxRequest (){
+        if (!this.url) return;
+
+        let request_data = {
+            headers: {"X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val()},
+            url: this.url,
+            type: this.type,
+            data: this.data,
+            success: function (data) {
+                if (this.success_callback) this.success_callback(data)
+            }, error: function (data) {
+                if (this.error_callback) this.error_callback(data)
+            }
+        }
+
+        if (this.data_type === 'formData'){
+            request_data.processData = false
+            request_data.contentType = false
+        }
+
+        $.ajax(request_data);
+    }
+}

static/v2/js/widgets/w_select_country.js

@@ -0,0 +1,42 @@
+function toggleSelectCountry(el, callback) {
+    if (!el) return;
+
+    let $parent = el.closest('.w_select_country');
+    if (!$parent) return;
+
+    if ($parent.classList.contains('closed')) {
+        openSelectCountry(el, callback)
+    } else {
+        closeSelectCountry(el, callback);
+    }
+}
+
+function openSelectCountry(el, callback) {
+    let $parent = el.closest('.w_select_country');
+    if (!$parent) return;
+
+    $parent.classList.remove('closed');
+
+    if (callback) callback('opened', $parent);
+}
+
+function closeSelectCountry(el, callback) {
+    let $parent = el.closest('.w_select_country');
+    if (!$parent) return;
+
+    $parent.classList.add('closed');
+
+    if (callback) callback('closed', $parent);
+}
+
+function searchCountry(el) {
+    let request = new api({
+        url: '',
+        data: '',
+        data_type: 'formData',
+        success: function (data) {
+        }, error: function (data) {
+        }
+    });
+    request.ajaxRequest()
+}

templates/tb_base.html

@@ -20,7 +20,7 @@
 
     {% include "inter/meta_OpenGraph_Schema.html" %}
 
-
+    <script src="{% static "v2/js/service/api.js" %}"></script>
 
 <!-- Event snippet for Sign-up conversion page
 In your html page, add the snippet and call gtag_report_conversion when someone clicks on the chosen link or button. -->

templates/v2/blocks/b_make_poster_order.html

@@ -0,0 +1,10 @@
+{% load static %}
+{% load i18n %}
+<link rel="stylesheet" href="{% static "v2/css/forms.css" %}">
+<link rel="stylesheet" href="{% static "v2/css/widgets/w_select_country.css" %}">
+<link rel="stylesheet" href="{% static "v2/css/blocks/b_make_poster_order.css" %}">
+
+<div class="b_make_poster_order">
+    <div class="make_poster_order_title">{% trans "Заполните форму, чтобы отправить посылку" %}</div>
+    {% include 'v2/forms/f_make_poster_order.html' %}
+</div>

templates/v2/forms/f_make_poster_order.html

@@ -0,0 +1,13 @@
+{% load static %}
+{% load i18n %}
+
+<form name="make_poster_order" class="f_make_poster_order">
+    {% trans "Укажите город" as placeholder_for_city %}
+
+    <div class="form_line _50_grid">
+        <div class="field_container">
+            <label for="id_from_city"><div class="required_field_icon">*</div> {% trans "Откуда забрать посылку" %}</label>
+            {% include 'v2/widgets/w_select_country.html' with name='from_city' placeholder=placeholder_for_city %}
+        </div>
+    </div>
+</form>

templates/v2/widgets/w_select_country.html

@@ -0,0 +1,17 @@
+{% load static %}
+{% load i18n %}
+
+<div class="w_select_country">
+    <div class="w_select_country_header">
+        <div class="select_country_header_left_part">
+            <div class="container_inf_about_country">
+                <img class="country_flag_img_container">
+                <div class="country_code"></div>
+            </div>
+            <input type="text" name="{{ name }}" id="id_{{ name }}" placeholder="{{ placeholder }}" data-value="" data-id="">
+        </div>
+        <img class="w_select_country_icon" src="{% static "v2/icons/widgets/w_select_country/pin.svg" %}" alt="">
+    </div>
+    <div class="w_select_country_content">
+    </div>
+</div>