0.0.05 form poster

static/v2/css/forms.css

@@ -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);
+}

static/v2/css/widgets/w_additional_info.css

@@ -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);
+    }
+}

static/v2/icons/widgets/w_additional_info/Info.svg

@@ -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>

static/v2/js/forms.js

@@ -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;
+}

static/v2/js/forms/f_make_poster_order.js

@@ -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()
+}

static/v2/js/widgets/w_radio_inputs.js

@@ -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)
 }