1.1.1 highlighting and raising routes

static/css/styles.css

@@ -688,6 +688,40 @@ header .header-second {
     display: inline-block;
 }
 
+.control_frame{
+    display: none;
+    position: absolute;
+    background-color: white;
+    border-radius: 10px;
+    width: 282px;
+    height: 175px;
+    box-shadow: -1px 4px 10px 0px rgba(198, 199, 203, 0.20), 0px -1px 10px 0px rgba(198, 199, 203, 0.20);
+    z-index: 1;
+    border: 1px solid #FF613A;
+    padding: 0 10px;
+}
+
+.control_frame.show{
+    display: block;
+}
+
+button#send_upgrade {
+
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 20px;
+    text-align: center;
+    color: #FF613A;
+    width: 100%;
+    padding: 10px;
+    margin: 10px 0;
+}
+button#send_upgrade:hover {
+    background: #FF613A;
+    color: white;
+    border-radius: 15px;
+}
+
 .from_address_point_txt.red_text{
     color: #ff0000;
 }
@@ -1044,6 +1078,16 @@ input.deactive {
     background-color: white;
 }
 
+.custom-checkbox.round+label::before {
+
+    border-radius: 20px;
+    width: 25px;
+    height: 25px;
+    border: 1px solid #E0E0E0;
+    background-color: #FAFAFA;
+
+}
+
 
 
 .custom-checkbox:not(:disabled):not(:checked)+label:hover::before {
@@ -1483,6 +1527,21 @@ span.errorlist{
     position: absolute;
     bottom: 27%;
 }
+.label_text{
+    display: inline-block;
+    position: absolute;
+    bottom: 20%;
+    font-size: 14px;
+}
+
+label.route_label {
+    margin-bottom: unset;
+    padding-top: 10px;
+}
+.sub_label_text {
+    font-size: 14px;
+    margin-left: 35px;
+}
 
 /*create new route*/
 select#id_type_transport{
@@ -1995,6 +2054,7 @@ button#raise_route {
   border-radius: 10px;
   text-align: center;
   margin-bottom: 10px;
+    margin-top: 10px;
 }
 
 .edit_route{

static/js/user_profile.js

@@ -612,6 +612,87 @@ function sendRoute(el, routeID = null){
     });
 }
 
+function confirmUpgrade(el, routeID){
+    event.preventDefault()
+    el.disabled = true
+
+    let form = el.form
+    let formData = new FormData(form);
+    formData.set('route_id', routeID)
+    let url = '/routes/'
+    let checkboxes = document.querySelectorAll('input[name="route_option"]');
+
+
+    for (let i = 0; i < checkboxes.length; i++) {
+
+        if (checkboxes[i].checked && checkboxes[i].id === "highlight_route" ) {
+            url = '/routes/highlight_route/'
+        }else if(checkboxes[i].checked && checkboxes[i].id === "raise_route"){
+            url = '/routes/raise_route/'
+        }
+    }
+
+    $.ajax({
+        headers: { "X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val() },
+        url: url,
+        type: "POST",
+        // async: true,
+        cache: false,
+        processData: false,
+        contentType: false,
+        // enctype: 'json',
+        // data:  JSON.stringify(obj_w_el_form),
+        data:  formData,
+        success: function(data){
+
+            let data_route_id = data.route_id
+            // location.href = '/profile'
+            // document.querySelector(".info_profile").innerHTML = data.html
+
+
+
+            let el_route = document.querySelector(`[data-number-of-route="${data_route_id}"]`);
+            if (routeID){
+                el_route = document.querySelector(`[data-number-of-route="${routeID}"]`);
+            }
+            el_route.scrollIntoView({
+                behavior:"smooth",
+                block:'start',
+                inline:'start'
+            });
+
+
+
+
+
+
+            // document.querySelector(".tab_user_messanger.select").scrollIntoView({behavior: "smooth",block:'nearest',inline:'nearest'});
+
+
+            let list_div = document.querySelectorAll('.menu_profile div');
+            let my_routes = document.getElementById("my_routes_id")
+            list_div.forEach(el=>{ el.classList.remove('selected'); });
+            my_routes.classList.add('selected')
+            middleWareJS()
+
+        },
+        error: function (data, exception){
+            document.querySelector(".info_profile").innerHTML = data.responseJSON.html;
+            // $(el).attr('disabled', 'false')
+
+            document.getElementById('id_type_transport').scrollIntoView({behavior: "smooth",block:'nearest',inline:'nearest'});
+
+            sliderInit();
+            init_departure_DT()
+            init_arrival_DT()
+
+
+        }
+    });
+
+
+}
+
 
 
 // function validate(el) {
@@ -836,6 +917,18 @@ function showMenu(el, event) {
        menu.classList.add('show')
     }
 }
+
+function showControlFrame(el, route_id){
+    let menu = document.getElementById('control_frame_'+ route_id );
+
+    if(menu.classList.contains('show')){
+       menu.classList.remove('show')
+    } else {
+       menu.classList.add('show')
+    }
+}
+
+
 function showLang(el) {
     let lang = document.querySelector('.dropdown-content-lang');
      if(lang.classList.contains('show')){

templates/widgets/routes/w_my_route.html

@@ -48,6 +48,44 @@
     </div>
 
     <div class="inf_carrier_container">
+
+         <div
+             class="control_frame"
+             id="control_frame_{{ route.id }}"
+         >
+             <form method="post">
+                  {% csrf_token %}
+
+                 <div class="checkbox_wrapper">
+                        <input type="radio"
+                               name="route_option"
+                               class="custom-checkbox round"
+
+                               id="raise_route">
+                        <label for="raise_route" class="route_label">
+                            <div class="label_text">{% trans "Поднять объявление" %}</div>
+                        </label>
+                 </div>
+                 <div class="sub_label_text">{% trans "Осталось поднятий " %} {{ remains_route_rising_count }}</div>
+
+                 <div class="checkbox_wrapper">
+                        <input type="radio"
+                               name="route_option"
+                               class="custom-checkbox round"
+{#                                    checked="checked"#}
+                               id="highlight_route">
+                        <label for="highlight_route" class="route_label">
+                            <div class="label_text">{% trans "Выделить объявление цветом " %}</div>
+                        </label>
+                </div>
+                <div class="sub_label_text">{% trans "Осталось выделений " %}{{ remains_route_highlight_count }}</div>
+
+                <button onclick="confirmUpgrade(this,{{ route.id }} )" id="send_upgrade"> {% trans "Подтвердить" %}</button>
+
+             </form>
+
+         </div>
+
         <div
                 class="title_container_inf_carrier"
                 {% if route.owner_type == 'mover' %}
@@ -67,6 +105,8 @@
         </div>
 
         <div name="form_carrier">
+
+
             <div class="inf_carrier">
 
                 <img class="route_contact_avatar {% if route.owner == user %} active{% endif %}" {% if route.owner.user_profile.avatar %}
@@ -88,8 +128,12 @@
                 </a>
 
              <div class="button_raise_route">
+
+
+
                     <button
-{#                            onclick="editRoute({{ route.id }})"#}
+{#                           onclick="editRoute({{ route.id }})"#}
+                           onclick="showControlFrame(this, {{ route.id }})"
                             id="raise_route">
                             {% translate "Увеличить просмотры" %}
                     </button>