sysadminix/tripwithbonus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.0.05 form poster

Browse Source
This commit is contained in:
SBD
2025-01-10 20:58:13 +03:00
parent 72f04e0d48
commit 0ac84ed6e0
11 changed files with 220 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
static/v2/css/forms.css
View File

@@ -11,6 +11,8 @@
--label-font-size: 16px;
--label-font-weight: 500;
--checkbox-label-font-size: 16px;
--textarea-min-width: 100%;
--textarea-max-width: 100%;
--textarea-width: 100%;
@@ -18,6 +20,13 @@
--textarea-resize: none;
box-sizing: border-box;
&.line{
display: flex;
align-items: center;
gap: 10px;
}
label{
display: block;
color: var(--label-color);
@@ -69,6 +78,23 @@
color: var(--placeholder-color);
}
}
.checkbox{
background: #FFFFFF;
border: 1px solid #E6E6E6;
height: 30px;
width: 30px;
border-radius: 10px;
&:hover{
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
&.checked{
background: #FF613A;
box-shadow: 0 -1px 10px rgba(198, 199, 203, 0.2), -1px 4px 10px rgba(198, 199, 203, 0.2);
}
}
.checkbox_label{
font-size: var(--checkbox-label-font-size);
}
}
.form_line{
@@ -80,5 +106,33 @@
}
display: var(--display);
justify-content: space-between;
}
button[type="submit"]{
--submit-button-bg: #FF613A;
--submit-button-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
--submit-button-border: none;
--submit-button-border-radius: 10px;
--submit-button-font-size: 18px;
--submit-button-color: #FFFFFF;
--submit-button-font-weight: 600;
--submit-button-width: 100%; /* initial */
--submit-button-padding: 17px;
outline: none;
background: var(--submit-button-bg);
box-shadow: var(--submit-button-box-shadow);
width: var(--submit-button-width);
padding: var(--submit-button-padding);
border: var(--submit-button-border);
border-radius: var(--submit-button-border-radius);
color: var(--submit-button-color);
font-size: var(--submit-button-font-size);
font-weight: var(--submit-button-font-weight);
}

31
static/v2/css/widgets/w_additional_info.css Normal file
View File

@@ -0,0 +1,31 @@
.additional_info{
position: relative;
--info-modal-bg: #FFFFFF;
--info-modal-drop-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
--info-modal-padding: 10px;
--info-modal-border-radius: 10px;
--info-modal-font-size: 10px;
&.opened{
.additional_info_modal{display: block;}
}
img{
width: 20px;
height: 20px;
display: block;
}
.additional_info_modal{
position: absolute;
z-index: 100;
left: 15px;
top: 0;
display: none;
background: var(--info-modal-bg);
box-shadow: var(--info-modal-drop-shadow);
padding: var(--info-modal-padding);
border-radius: var(--info-modal-border-radius);
font-size: var(--info-modal-font-size);
}
}

5
static/v2/icons/widgets/w_additional_info/Info.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z" stroke="#FF613A" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.375 9.375H10V13.75H10.625" stroke="#FF613A" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.84375 7.5C10.3615 7.5 10.7812 7.08027 10.7812 6.5625C10.7812 6.04473 10.3615 5.625 9.84375 5.625C9.32598 5.625 8.90625 6.04473 8.90625 6.5625C8.90625 7.08027 9.32598 7.5 9.84375 7.5Z" fill="#FF613A"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 637 B

77
static/v2/js/forms.js Normal file
View File

@@ -0,0 +1,77 @@
function chooseCheckbox(el) {
if (!el) return;
let $parent = el.closest('.field_container');
let $checkbox = $parent.querySelector('.checkbox')
$checkbox.classList.toggle("checked");
}
function getFormData(form) {
if (!form) return;
let formData = new FormData();
let default_element_types = ['input', 'textarea', 'date'];
let form_elements = getFormElements(form);
if (!form_elements) return;
for (let el of form_elements) {
let $parent = el.closest('.field_container');
let field_type = ''
if ($parent) field_type = $parent.dataset.type;
let name = $parent ? $parent.dataset.name : '';
if (!name) name = el.name
if (!name) name = el.dataset.name;
let value = el.value || ''
if (field_type) {
if (default_element_types.indexOf(field_type) > -1) {
formData.append(name, value);
} else if ($parent && !($parent.dataset.type in default_element_types)) {
formData = addCustomDataToFormData($parent, formData)
}
} else {
formData.append(name, value);
}
}
return formData;
}
function getFormElements(form) {
let form_elements = form.querySelectorAll('.field_container');
return form_elements;
}
function addCustomDataToFormData(el, formData) {
let name = el.dataset.name;
switch (el.dataset.type) {
case 'checkbox':
let $checkbox = el.querySelector('.checkbox');
let c_value = $checkbox.classList.contains('checked');
formData.append(name, c_value);
break;
case 'radio':
let $radio = el.querySelector('.radio.checked');
if (!$radio){
formData.append(name, '');
break;
}
let r_value = $radio.closest(".cw_w_radio_inputs_radio_input").dataset.name;
formData.append(name, r_value);
break;
case 'location':
let $location = el.querySelector('input');
let l_value = $location.dataset.id;
formData.append(name, l_value);
break;
}
return formData;
}

19
static/v2/js/forms/f_make_poster_order.js Normal file
View File

@@ -0,0 +1,19 @@
function makePosterOrder(form) {
event.preventDefault()
let formData = getFormData(form);
formData.append('owner_type', 'customer');
let request = new api({
url: '/routes/create_or_change_route/',
data: formData,
data_type: 'formData',
success: function (res) {
}, error: function (res) {
}
})
request.ajaxRequest()
}

7
static/v2/js/widgets/w_radio_inputs.js
View File

@@ -7,8 +7,11 @@ function chooseRadioInput(el, callback){
$radios.forEach(radio => {
radio.classList.remove('checked')
})
el.classList.toggle("checked");
let checked_state = el.classList.contains("checked");
$parent = el.closest('.cw_w_radio_inputs_radio_input');
let $radio = $parent.querySelector('.radio');
$radio.classList.toggle("checked");
let checked_state = $radio.classList.contains("checked");
if (callback) callback(checked_state)
}

1
templates/pages/profile/p_user_profile.html
View File

@@ -34,6 +34,7 @@
<script src='{% static "v2/js/widgets/w_radio_inputs.js" %}'></script>
<script src='{% static "v2/js/widgets/w_daterangepicker.js" %}'></script>
<script src='{% static "v2/js/widgets/w_textarea_w_counter.js" %}'></script>
<script src='{% static "v2/js/forms/f_make_poster_order.js" %}'></script>
{% include "connect_ws_js.html" %}

2
templates/tb_base.html
View File

@@ -88,6 +88,7 @@ function gtag_report_conversion(url) {
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<link rel="stylesheet" href="{% static 'css/styles(boris).css' %}" >
<link rel="stylesheet" href="{% static 'css/mobile_styles.css' %}">
<link rel="stylesheet" href="{% static 'v2/css/widgets/w_additional_info.css' %}">
{% if page_type == 'profile' %}
<link rel="stylesheet" href="{% static 'css/create_poster.css' %}">
@@ -100,6 +101,7 @@ function gtag_report_conversion(url) {
<script src="{% static "js/user_profile.js" %}"></script>
<script src="{% static "js/user_profile_2.js" %}"></script>
<script src="{% static "js/ion.rangeSlider.min.js" %}"></script>
<script src="{% static "v2/js/forms.js" %}"></script>
<link rel="stylesheet" href="{% static "css/ion.rangeSlider.min.css" %}">

2
templates/v2/content_widgets/cw_w_radio_inputs_radio_input.html
View File

@@ -3,5 +3,5 @@
<div class="cw_w_radio_inputs_radio_input" data-name="{{ item.0 }}">
<div class="radio" onclick="chooseRadioInput(this)"></div>
<div class="radio_label">{{ item.1 }}</div>
<div class="radio_label" onclick="chooseRadioInput(this)">{{ item.1 }}</div>
</div>

26
templates/v2/forms/f_make_poster_order.html
View File

@@ -5,29 +5,30 @@
{% trans "Укажите город" as placeholder_for_city %}
<div class="form_line _50_grid">
<div class="field_container" data-name="from_city">
<div class="field_container" data-type="location" data-name="from_city">
<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 %}
{% if form.errors.from_city %}<div class="error_container">{{ form.errors.from_city }}</div>{% endif %}
</div>
<div class="field_container" data-name="to_city">
<div class="field_container" data-type="location" data-name="to_city">
<label for="id_from_city"><div class="required_field_icon">*</div> {% trans "Куда доставить посылку" %}</label>
{% include 'v2/widgets/w_select_country.html' with name='to_city' placeholder=placeholder_for_city %}
</div>
</div>
<div class="form_line">
<div class="field_container" data-name="cargo_type">
<div class="field_container" data-type="radio" data-name="cargo_type">
<label for="id_cargo_type"><div class="required_field_icon">*</div> {% trans "Выберите кого (что) вы можете перевезти:" %}</label>
{% include 'v2/widgets/w_radio_inputs.html' with name='cargo_type' list=form.fields.cargo_type.choices %}
</div>
</div>
<div class="form_line _50_grid">
<div class="field_container" data-name="cargo_type">
<label for="id_cargo_type"><div class="required_field_icon">*</div> {% trans "Дата доставки посылки" %}</label>
<div class="field_container" data-type="date" data-name="arrival_DT">
<label for="id_arrival_DT"><div class="required_field_icon">*</div> {% trans "Дата доставки посылки" %}</label>
{% include 'v2/widgets/w_daterangepicker.html' with name='arrival_DT' %}
</div>
</div>
<div class="form_line">
<div class="field_container" data-name="type_transport">
<div class="field_container" data-type="radio" data-name="type_transport">
{% trans "Обязательно учитывайте Правила и особенности перевозки выбранным Вами видом транспорта" as attention_type_transport %}
<label for="id_cargo_type"><div class="required_field_icon">*</div> {% trans "Каким способом Вы хотите отправить?" %}</label>
{% include 'v2/widgets/w_radio_inputs.html' with name='type_transport' list=form.fields.type_transport.choices %}
@@ -35,7 +36,7 @@
</div>
</div>
<div class="form_line">
<div class="field_container" style="width: 100%" data-name="phone">
<div class="field_container" data-type="input" style="width: 100%" data-name="phone">
{% trans "Если вы оставите это поле пустым - перевозчики смогут только написать вам в личные сообщения на нашем сайте TripWB.com" as attention_phone %}
<label for="id_cargo_type">{% trans "Контактный номер телефона, по которому с Вами могут связаться перевозчики" %}</label>
<input style="height: unset;width: calc(50% - 40px);" type="text" name="phone" id="id_phone" placeholder="{% trans 'Укажите телефон' %}">
@@ -43,16 +44,19 @@
</div>
</div>
<div class="form_line">
<div class="field_container" style="width: 100%;--textarea-height: 130px;" data-name="comment">
<div class="field_container" data-type="textarea" style="width: 100%;--textarea-height: 130px;" data-name="comment">
{% trans 'Если желаете, то здесь можно указать важную информацию, например: вес, габариты посылки, количество попутчиков и т.д.)' as comment_placeholder %}
<label for="id_cargo_type">{% trans "Примечание (необязательно)" %}</label>
<label for="id_comment">{% trans "Примечание (необязательно)" %}</label>
{% include 'v2/widgets/w_textarea_w_counter.html' with name='comment' placeholder=comment_placeholder max_val='300' %}
</div>
</div>
<div class="form_line">
<div class="field_container line" data-name="comment">
<div class="checkbox"></div>
<div class="field_container line" data-type="checkbox" data-name="receive_msg_by_email">
<div class="checkbox" onclick="chooseCheckbox(this)"></div>
<div class="checkbox_label" onclick="chooseCheckbox(this)">{% trans "Хочу получать уведомления на E-mail о появлении перевозчика по моим критериям" %}</div>
{% include 'v2/widgets/w_additional_info.html' %}
</div>
</div>
<button type="submit" onclick="makePosterOrder(this.form)">{% trans "Разместить объявление" %}</button>
</form>

9
templates/v2/widgets/w_additional_info.html Normal file
View File

@@ -0,0 +1,9 @@
{% load static %}
{% load i18n %}
<div class="additional_info">
<img src="{% static "v2/icons/widgets/w_additional_info/info.svg" %}" alt="">
<div class="additional_info_modal">
asd
</div>
</div>