filter style

static/css/style.css

@@ -1122,3 +1122,15 @@ input[type=number] {
 .clean__link:hover {
 	text-decoration: underline;
 }
+
+.is_active_filter {
+	font-weight: bold;
+}
+
+.is_active_filter:before {
+	content: '';
+	position: absolute;
+	border: 9px solid transparent;
+	border-left: 13px solid #DEDEDE;
+	margin-left: -15px;
+}

static/js/orders.js

@@ -1,4 +1,5 @@
 $(document).ready(function() {
+  var filterLinks = document.getElementsByClassName('filter__link');
 
   $('.delete_license').click(function(e){
       e.preventDefault();
@@ -31,11 +32,12 @@ $(document).ready(function() {
 
   var orderList = new List('listData', options);
 
-  console.log(orderList);
+  // console.log(orderList);
 
   $('#filterNone').click(function() {
     event.preventDefault();
     orderList.filter();
+    resetAllFilterStatus();
     return false;
   });
 
@@ -96,5 +98,52 @@ $(document).ready(function() {
     return false;
   });
 
+  function removeClass(obj, cls) {
+    var classes = obj.className.split(' ');
+
+    for (var i = 0; i < classes.length; i++) {
+      if (classes[i] === cls) {
+        classes.splice(i, 1);
+        i--;
+      }
+    }
+    obj.className = classes.join(' ');
+}
+
+
+  function setActive(element) {
+    element.className +=' is_active_filter';
+  }
+
+  function resetAllFilterStatus() {
+
+    for (var i = 0;i < filterLinks.length; i++ ) {
+      if (filterLinks[i].classList.contains('is_active_filter')) {
+        removeClass(filterLinks[i], 'is_active_filter')
+      }
+    }
+  }
+
+  function resetAnotherFilterStatus(element) {
+    for (var i = 0;i < filterLinks.length; i++ ) {
+
+      if (filterLinks[i] === element) {
+        // console.log(filterLinks[i]);
+      } else {
+        if (filterLinks[i].classList.contains('is_active_filter')) {
+          removeClass(filterLinks[i], 'is_active_filter')
+        }
+      }
+    }
+  }
+
+
+  for (var i = 0;i < filterLinks.length; i++ ) {
+    filterLinks[i].addEventListener('click', function () {
+      setActive(this);
+      resetAnotherFilterStatus(this);
+    })
+  }
+
 });
 

templates/customer/profile/orders_list.html

@@ -79,18 +79,18 @@
   <div class="filter__account">
     <div class="account__title">Счета</div>
     <ul class="account__list">
-      <li class="account__item"><a class="account__link" href="#" id="filterAccountsNone">Все счета</a></li>
-      <li class="account__item"><a class="account__link" href="#" id="filterAccountsPay">Оплаченные</a></li>
-      <li class="account__item"><a class="account__link" href="#" id="filterAccountsWaitPay">Ожидают оплаты</a></li>
-      <li class="account__item"><a class="account__link" href="#" id="filterAccountsFreezePay">Замороженные</a></li>
+      <li class="account__item"><a class="account__link filter__link" href="#" id="filterAccountsNone">Все счета</a></li>
+      <li class="account__item"><a class="account__link filter__link" href="#" id="filterAccountsPay">Оплаченные</a></li>
+      <li class="account__item"><a class="account__link filter__link" href="#" id="filterAccountsWaitPay">Ожидают оплаты</a></li>
+      <li class="account__item"><a class="account__link filter__link" href="#" id="filterAccountsFreezePay">Замороженные</a></li>
     </ul>
   </div>
   <div class="filter__license">
     <div class="license__title">Лицензии</div>
     <ul class="license__list">
-      <li class="license__item"><a class="license__link" href="#" id="filterLicenseNone">Все лицензии</a></li>
-      <li class="license__item"><a class="license__link" href="#" id="filterLicenseNow">Актуальные</a></li>
-      <li class="license__item"><a class="license__link" href="#" id="filterLicenseOld">С истёкшим сроком</a></li>
+      <li class="license__item"><a class="license__link filter__link" href="#" id="filterLicenseNone">Все лицензии</a></li>
+      <li class="license__item"><a class="license__link filter__link" href="#" id="filterLicenseNow">Актуальные</a></li>
+      <li class="license__item"><a class="license__link filter__link" href="#" id="filterLicenseOld">С истёкшим сроком</a></li>
     </ul>
   </div>
   <div class="filter__period">