mailing settings counties select

static/mailing_settings/css/main.css

@@ -119,6 +119,14 @@ h3{
     padding-top: 50px;
 }
 
+.themes_block{
+    padding-bottom: 55px;
+}
+
+.themes_block h3 {
+    margin-bottom: 30px;
+}
+
 .subjects_block{
     padding: 50px 0;
 }

static/mailing_settings/js/main.js

@@ -35,9 +35,13 @@
                             .addClass('has_items')
                             .append($sub_item);
 
-                        $tags_select.find('option').each(function () {
-                            $themes_modal.find('.sub.has_items input[name="tg"][value="' + $(this).val() + '"]').prop('checked', true);
-                        });
+                        // $tags_select.find('option').each(function () {
+                        //     $themes_modal.find('.sub.has_items input[name="tg"][value="' + $(this).val() + '"]').prop('checked', true);
+                        // });
+
+                        for (var id in user_choice['tg']){
+                            $themes_modal.find('.sub.has_items input[name="tg"][value="' + id + '"]').prop('checked', true);
+                        }
                     });
 
                     $loader.hide();
@@ -121,6 +125,40 @@
 
         $.fancybox.close();
     });
+
+
+    var removeCheckbox = function (type, id) {
+        delete user_choice[type][id];
+        $('.modal_checkboxes').find('input[name="' + type + '"][value="' + id + '"]').prop('checked', false);
+        console.log('#id_' + type);
+        console.log('option[value="' + id + '"]');
+        $('#id_' + type).find('option[value="' + id + '"]').remove();
+    };
+
+
+    // Удаление выбранной темы
+    $selected_themes.on('click', 'a', function (event) {
+        event.preventDefault();
+
+        var $input = $(this).siblings('input');
+
+        removeCheckbox($input.attr('name'), $input.val());
+
+        $(this).parent('li').remove();
+    });
+
+
+    // Удаление выбранного тега
+    $selected_tags.find('a').on('click', function (event) {
+        event.preventDefault();
+
+        var $input = $(this).siblings('input');
+
+        removeCheckbox($input.attr('name'), $input.val());
+
+        $(this).parent('li').remove();
+    });
+
 })();
 
 
@@ -173,7 +211,21 @@
         }
 
         $.fancybox.close();
-    })
+    });
+
+
+    // Удаление выбранного тега
+    $selected_cities.on('click', 'a', function (event) {
+        event.preventDefault();
+
+        var $input = $(this).siblings('input');
+
+        delete selected_cities[$input.val()];
+        $('.modal_checkboxes').find('input[name="' + $input.attr('name') + '"][value="' + $input.val() + '"]').prop('checked', false);
+        $('#id_' + $input.attr('name')).find('option[value="' + $input.val() + '"]').remove();
+
+        $(this).parent('li').remove();
+    });
 })();
 
 // Выбор стран
@@ -209,6 +261,10 @@
                         $sub_list
                             .addClass('has_items')
                             .append($sub_item);
+
+                        for (var id in user_countries['co']){
+                            $countries_modal.find('.sub.has_items input[name="co"][value="' + id + '"]').prop('checked', true);
+                        }
                     });
 
                     $loader.hide();
@@ -222,6 +278,12 @@
                         text +
                         '<a href="#">&times;</a>' +
                     '</li>'
+        },
+
+        removeCheckbox = function (type, id) {
+            delete user_countries[type][id];
+            $('.modal_checkboxes').find('input[name="' + type + '"][value="' + id + '"]').prop('checked', false);
+            $('#id_' + type).find('option[value="' + id + '"]').removeAttr('selected');
         };
 
     // Записываем данные в user_countries при инициализации
@@ -235,17 +297,13 @@
     });
 
     $co_select.find('option[selected]').each(function () {
+        user_countries['co'][$(this).val()] = $(this).text();
+
         var $co = $(renderSelectedThemes($(this).val(), 'co', $(this).text()));
         $selected_co.append($co);
     });
 
-
-    // Записываем данные в user_chice при инициализации
-    // $tags_select.find('option').each(function () {
-    //     user_choice['tg'][$(this).val()] = $(this).text();
-    //     var $tag = $(renderSelectedThemes($(this).val(), 'tg', $(this).text()));
-    //     $selected_tags.append($tag);
-    // });
+    console.log(user_countries);
 
     // открываем список тегов в теме
     $countries_modal.on('click', '.trigger', function (e) {
@@ -260,6 +318,11 @@
             $sub_list.slideToggle(100);
         } else {
             renderSublist($link.attr('href'), $sub_list);
+
+            for( var city_id in user_countries['co'] ){
+                console.log(city_id);
+
+            }
         }
     });
 
@@ -281,22 +344,45 @@
     $countries_modal.on('click', '.modal-approve', function (e) {
         e.preventDefault();
 
-        var $selected_countries = $('#selected_countries');
+        $selected_co.html('');
+        $selected_areas.html('');
 
-        $selected_countries.html('');
 
         for (var area_id in user_countries['area']) {
-            var $theme = $(renderSelectedThemes(area_id, 'area', user_countries['area'][area_id]));
-            $selected_countries.append($theme);
+            var $area = $(renderSelectedThemes(area_id, 'area', user_countries['area'][area_id]));
+            $selected_areas.append($area);
         }
 
         for (var co_id in user_countries['co']) {
-            var $tag = $(renderSelectedThemes(co_id, 'co', user_countries['co'][co_id]));
-            $selected_countries.append($tag);
+            var $co = $(renderSelectedThemes(co_id, 'co', user_countries['co'][co_id]));
+            $selected_co.append($co);
         }
 
         $.fancybox.close();
-    })
+    });
+
+    // Удаление выбранного континента
+    $selected_areas.on('click', 'a', function (event) {
+        event.preventDefault();
+
+        var $input = $(this).siblings('input');
+
+        removeCheckbox($input.attr('name'), $input.val());
+
+        $(this).parent('li').remove();
+    });
+
+
+    // Удаление выбранной страны
+    $selected_co.find('a').on('click', function (event) {
+        event.preventDefault();
+
+        var $input = $(this).siblings('input');
+
+        removeCheckbox($input.attr('name'), $input.val());
+
+        $(this).parent('li').remove();
+    });
 })();
 
 $(function () {

templates/client/accounts/mailing_settings.html

@@ -69,9 +69,6 @@
                                     </label>
                                     <a href="#cities-modal" class="modal_trigger">{% trans 'Выбрать города' %}</a>
                                     <ul id="selected_cities" class="selected"></ul>
-                                </li>
-
-                                <li>
                                     {{ form.r_cities }}
                                 </li>
 
@@ -87,9 +84,6 @@
                                     <a href="#countries_modal" class="modal_trigger">{% trans 'Выбрать страны' %}</a>
                                     <ul id="selected_areas" class="selected"></ul>
                                     <ul id="selected_countries" class="selected"></ul>
-                                </li>
-
-                                <li>
                                     {{ form.area }}
                                     {{ form.f_countries }}
                                 </li>

templates/client/popups/mailing_settings_countries.html

@@ -17,7 +17,7 @@
                             {% for value, text in form.area.field.choices %}
                                 <li class="level1 level">
                                     <label>
-                                        <input type="checkbox" name="area"  id="id_{{ prefix }}{{ value }}" class="csb-menu-input"  value="{{ value }}">
+                                        <input type="checkbox" name="area" class="hidden_checkbox"  id="id_{{ prefix }}{{ value }}" class="csb-menu-input"  value="{{ value }}">
                                         <span class="custom_checkbox"></span>
                                         <span class="label hidden">{{ text }}</span>
                                     </label>