Catalog filters

frontend/src/assets/css/catalog.css

@@ -212,10 +212,12 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .sugg__img {
-    flex-basis: 30%;
-    height: 460px;
+    width: 100%;
+    height: 100%;
     margin: 4% 0 1% auto;
-    background: linear-gradient(to top, rgba(1, 80, 140, 1), rgba(37, 45, 45, 0.6));
+    /*background: linear-gradient(to top, rgba(1, 80, 140, 1), rgba(37, 45, 45, 0.6));*/
+    background-repeat: no-repeat;
+    background-size: cover;
     transition: transform .2s linear;
 }
 
@@ -255,6 +257,7 @@ h1, h2, h3, h4, h5, h6 {
 .podlozhka {
     position: relative;
     width: 369px;
+    height: 460px;
 }
 
 .podlozhka:hover .sugg__img {
@@ -426,8 +429,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 /* изменяем цвет фона при наведении курсора */
-.parametrs__block a:hover {
-
+.parametrs__block a:hover, .parametrs__block__selected {
     background-color: #000000;
 }
 

frontend/src/views/CatalogView.vue

@@ -36,31 +36,45 @@
       <ul>
         <li><a href="#">Тип</a>
           <ul>
-            <li><a href="#">Квартира</a></li>
-            <li><a href="#">Участок</a></li>
-            <li><a href="#">Дом</a></li>
+            <li @click="addSortParam('type', 'Flat')">
+              <a href="#" :class="isSelected('type', 'Flat')">Квартира</a>
+            </li>
+            <li @click="addSortParam('type', 'Land')">
+              <a href="#" :class="isSelected('type', 'Land')">Участок</a>
+            </li>
+            <li @click="addSortParam('type', 'House')">
+              <a href="#" :class="isSelected('type', 'House')">Дом</a>
+            </li>
           </ul>
         </li>
         <li><a href="#">Площадь</a>
           <ul>
-            <li><b href="#">От: <input type="text"></b></li>
-            <li><b href="#">До: <input type="text"></b></li>
-            <li><a href="#">Сортировать</a></li>
+            <li><b href="#">От: <input type="text" v-model.trim="spaceParams.min"></b></li>
+            <li><b href="#">До: <input type="text" v-model.trim="spaceParams.max"></b></li>
+            <li @click="addRangeSortParam('spaceParams', 'Space')"><a href="#">Сортировать</a></li>
           </ul>
         </li>
         <li><a href="#">Кол - во комнат</a>
           <ul>
-            <li><a href="#">Студия</a></li>
-            <li><a href="#">1 комната</a></li>
-            <li><a href="#">2 комнаты</a></li>
-            <li><a href="#">3 комнаты и более</a></li>
+            <li @click="addSortParam('rooms', 'Studio')">
+              <a href="#" :class="isSelected('rooms', 'Studio')">Студия</a>
+            </li>
+            <li @click="addSortParam('rooms', 'Room1')">
+              <a href="#" :class="isSelected('rooms', 'Room1')">1 комната</a>
+            </li>
+            <li @click="addSortParam('rooms', 'Room2')">
+              <a href="#" :class="isSelected('rooms', 'Room2')">2 комнаты</a>
+            </li>
+            <li @click="addSortParam('rooms', 'Room3More')">
+              <a href="#" :class="isSelected('rooms', 'Room3More')">3 комнаты и более</a>
+            </li>
           </ul>
         </li>
         <li><a href="#">Цена</a>
           <ul>
-            <li><b href="#">От: <input type="text"></b></li>
-            <li><b href="#">До: <input type="text"></b></li>
-            <li><a href="#">Сортировать</a></li>
+            <li><b href="#">От: <input type="text" v-model.trim="priceParams.min"></b></li>
+            <li><b href="#">До: <input type="text" v-model.trim="priceParams.max"></b></li>
+            <li @click="addRangeSortParam('priceParams', 'Price')"><a href="#">Сортировать</a></li>
           </ul>
         </li>
       </ul>
@@ -92,12 +106,48 @@ export default {
   data ()  {
     return {
       offers: [],
-      componentForm: ''
+      sortParams: [],
+      spaceParams: {
+        min: null,
+        max: null,
+      },
+      priceParams: {
+        min: null,
+        max: null,
+      },
     }
   },
   methods: {
     url(path) {
       return `url(${getURL(path)})`;
+    },
+    isSelected(name, value) {
+      return this.sortParams.some((e) => e.name === name && e.value === value) ? 'parametrs__block__selected' : '';
+    },
+    addSortParam(name, value, isRange = false) {
+      const element = this.sortParams.findIndex((e) => e.name === name && e.value === value);
+
+      if (~element && !isRange) {
+        this.sortParams.splice(element, 1);
+        return;
+      }
+
+      this.sortParams = this.sortParams.filter((e) => e.name !== name);
+      this.sortParams.push({ name, value });
+    },
+    addRangeSortParam(range, paramName) {
+      const min = this[range].min;
+      const max = this[range].max;
+
+      if (min)
+        this.addSortParam('start' + paramName, min, true);
+      else
+        this.addSortParam('start' + paramName, min);
+
+      if (max)
+        this.addSortParam('end' + paramName, max, true);
+      else
+        this.addSortParam('end' + paramName, max);
     }
   },
   async mounted() {

frontend/src/views/OfferView.vue

@@ -58,7 +58,7 @@
 
           <h4>Адрес: {{ offer.location }}</h4>
 
-          <h4>Кол-во комнат: {{ offer.rooms }}</h4>
+          <h4>Кол-во комнат: {{ roomType }}</h4>
 
           <h4>Общая площадь: {{ offer.space }} м²</h4>
         </div>
@@ -127,6 +127,14 @@ export default {
         'House': 'Дом',
         'Land': 'Участок',
       }[this.offer.type];
+    },
+    roomType() {
+      return {
+        'Studio': 'Студия',
+        'Room1': '1 комната',
+        'Room2': '2 комнаты',
+        'Room3More': '3 комнаты и больше',
+      }[this.offer.rooms]
     }
   },
   async mounted() {