v1.0.0

web/lib/pages/territory/index.html

@@ -1,15 +1,11 @@
 <div class="page-territory">
-  <div class="buttons-list">
-    <button onclick="Rotation()" id="rotationButton" style="display: none;">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
-        <path
-          d="M16.5 25.5c-.52.893-1.476 1.5-2.584 1.5-1.657 0-3-1.343-3-3s1.343-3 3-3c1.108 0 2.064.607 2.584 1.5H23v-11C23 8.468 20.533 6 17.5 6h-6C8.467 6 6 8.468 6 11.5v25c0 3.032 2.467 5.5 5.5 5.5h6c3.033 0 5.5-2.468 5.5-5.5v-11H16.5zM36.5 6h-6C27.467 6 25 8.468 25 11.5v11h7.879l-1.439-1.439c-.586-.586-.586-1.535 0-2.121s1.535-.586 2.121 0l4 4c.586.586.586 1.535 0 2.121l-4 4C33.268 29.354 32.884 29.5 32.5 29.5s-.768-.146-1.061-.439c-.586-.586-.586-1.535 0-2.121l1.439-1.439H25v11c0 3.032 2.467 5.5 5.5 5.5h6c3.033 0 5.5-2.468 5.5-5.5v-25C42 8.468 39.533 6 36.5 6z"
-        />
-      </svg>
-      <span id="rotationButton-title">Провести ротацію</span>
-    </button>
-
-    <a href="/constructor" data-route id="constructorButton" style="display: none;">
+  <div class="buttons-list" id="buttons-list">
+    <a
+      href="/constructor"
+      data-route
+      id="constructorButton"
+      style="display: none"
+    >
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
         <path
           d="M 14.5 4 C 12.015 4 10 6.015 10 8.5 L 10 39.5 C 10 41.985 12.015 44 14.5 44 L 22.042969 44 C 22.079969 43.749 22.138516 43.502672 22.228516 43.263672 L 22.283203 43.285156 C 22.353203 42.961156 23.236422 40.161109 23.982422 37.787109 C 24.272422 36.865109 24.779891 36.029703 25.462891 35.345703 L 33.904297 27 L 27.5 27 C 26.672 27 26 26.328 26 25.5 L 26 16 L 38 16 L 38 23.054688 C 38.72 22.587688 39.4975 22.254422 40.3125 22.107422 C 40.5365 22.067422 40.769 22.062922 41 22.044922 L 41 14.5 C 41 13.672 40.328 13 39.5 13 L 34 13 L 34 8.5 C 34 6.015 31.985 4 29.5 4 L 14.5 4 z M 30.5 18 A 1.50015 1.50015 0 1 0 30.5 21 L 33.5 21 A 1.50015 1.50015 0 1 0 33.5 18 L 30.5 18 z M 41.498047 24 C 41.224047 24.001 40.946969 24.025172 40.667969 24.076172 C 39.783969 24.235172 38.939563 24.696156 38.226562 25.410156 L 26.427734 37.208984 C 26.070734 37.565984 25.807969 38.011141 25.667969 38.494141 L 24.097656 43.974609 C 24.025656 44.164609 23.993 44.365406 24 44.566406 C 24.013 44.929406 24.155594 45.288406 24.433594 45.566406 C 24.710594 45.843406 25.067688 45.986 25.429688 46 C 25.630688 46.007 25.834391 45.975344 26.025391 45.902344 L 31.505859 44.332031 C 31.988859 44.192031 32.431062 43.930266 32.789062 43.572266 L 44.589844 31.773438 C 45.303844 31.060437 45.764828 30.216031 45.923828 29.332031 C 45.973828 29.053031 45.997047 28.775953 45.998047 28.501953 C 46.001047 27.307953 45.540687 26.179312 44.679688 25.320312 C 43.820687 24.460313 42.692047 23.998 41.498047 24 z M 22 35 C 22.828 35 23.5 35.672 23.5 36.5 C 23.5 37.328 22.828 38 22 38 C 21.172 38 20.5 37.328 20.5 36.5 C 20.5 35.672 21.172 35 22 35 z"
@@ -19,11 +15,86 @@
     </a>
   </div>
 
-  <div class="list-controls"></div>
+  <div class="list-controls">
+    <div id="page-territory-sort">
+      <button id="sort_1" onclick="Territory.sort('2')" data-state="active">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+          <path
+            d="M 32.476562 5.9785156 A 1.50015 1.50015 0 0 0 31 7.5 L 31 37.878906 L 26.560547 33.439453 A 1.50015 1.50015 0 1 0 24.439453 35.560547 L 31.439453 42.560547 A 1.50015 1.50015 0 0 0 33.560547 42.560547 L 40.560547 35.560547 A 1.50015 1.50015 0 1 0 38.439453 33.439453 L 34 37.878906 L 34 7.5 A 1.50015 1.50015 0 0 0 32.476562 5.9785156 z M 14.375 8.0058594 C 14.257547 8.01575 14.139641 8.0379219 14.025391 8.0761719 L 11.025391 9.0761719 C 10.239391 9.3381719 9.8141719 10.188609 10.076172 10.974609 C 10.338172 11.760609 11.190609 12.188828 11.974609 11.923828 L 13 11.580078 L 13 20.5 C 13 21.329 13.671 22 14.5 22 C 15.329 22 16 21.329 16 20.5 L 16 9.5 C 16 9.018 15.767953 8.5652031 15.376953 8.2832031 C 15.082953 8.0717031 14.727359 7.9761875 14.375 8.0058594 z M 14 27 C 11.344 27 9.387625 28.682109 9.015625 31.287109 C 8.898625 32.107109 9.4671094 32.867375 10.287109 32.984375 C 11.106109 33.102375 11.867375 32.533891 11.984375 31.712891 C 12.096375 30.931891 12.537 30 14 30 C 15.103 30 16 30.897 16 32 C 16 33.103 15.103 34 14 34 C 11.592 34 9 35.721 9 39.5 C 9 40.329 9.672 41 10.5 41 L 17.5 41 C 18.329 41 19 40.329 19 39.5 C 19 38.671 18.329 38 17.5 38 L 12.308594 38 C 12.781594 37.093 13.664 37 14 37 C 16.757 37 19 34.757 19 32 C 19 29.243 16.757 27 14 27 z"
+          ></path>
+        </svg>
+      </button>
+      <button id="sort_2" onclick="Territory.sort('3')" data-state="">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+          <path
+            d="M 31.478516 6 A 1.50015 1.50015 0 0 0 30.439453 6.4394531 L 23.439453 13.439453 A 1.50015 1.50015 0 1 0 25.560547 15.560547 L 30 11.121094 L 30 41.5 A 1.50015 1.50015 0 1 0 33 41.5 L 33 11.121094 L 37.439453 15.560547 A 1.50015 1.50015 0 1 0 39.560547 13.439453 L 32.560547 6.4394531 A 1.50015 1.50015 0 0 0 31.478516 6 z M 13.375 8.0058594 C 13.257547 8.01575 13.139641 8.0379219 13.025391 8.0761719 L 10.025391 9.0761719 C 9.2393906 9.3381719 8.8141719 10.188609 9.0761719 10.974609 C 9.3381719 11.760609 10.190609 12.188828 10.974609 11.923828 L 12 11.580078 L 12 20.5 C 12 21.329 12.671 22 13.5 22 C 14.329 22 15 21.329 15 20.5 L 15 9.5 C 15 9.018 14.767953 8.5652031 14.376953 8.2832031 C 14.082953 8.0717031 13.727359 7.9761875 13.375 8.0058594 z M 13 27 C 10.344 27 8.387625 28.682109 8.015625 31.287109 C 7.898625 32.107109 8.4671094 32.867375 9.2871094 32.984375 C 10.106109 33.102375 10.867375 32.533891 10.984375 31.712891 C 11.096375 30.931891 11.537 30 13 30 C 14.103 30 15 30.897 15 32 C 15 33.103 14.103 34 13 34 C 10.592 34 8 35.721 8 39.5 C 8 40.329 8.672 41 9.5 41 L 16.5 41 C 17.329 41 18 40.329 18 39.5 C 18 38.671 17.329 38 16.5 38 L 11.308594 38 C 11.781594 37.093 12.664 37 13 37 C 15.757 37 18 34.757 18 32 C 18 29.243 15.757 27 13 27 z"
+          ></path>
+        </svg>
+      </button>
+      <button id="sort_3" onclick="Territory.sort('4')" data-state="">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+          <path
+            transform="rotate(180 32.5 24.5106)"
+            id="svg_1"
+            d="m32.47852,6a1.50015,1.50015 0 0 0 -1.03907,0.43945l-7,7a1.50015,1.50015 0 1 0 2.1211,2.1211l4.43945,-4.43946l0,30.37891a1.50015,1.50015 0 1 0 3,0l0,-30.37891l4.43945,4.43946a1.50015,1.50015 0 1 0 2.1211,-2.1211l-7,-7a1.50015,1.50015 0 0 0 -1.08203,-0.43945z"
+          ></path>
+          <path
+            d="m16,6c-5.511,0 -10,4.489 -10,10c0,5.511 4.489,10 10,10c5.511,0 10,-4.489 10,-10c0,-5.511 -4.489,-10 -10,-10zm0,2c4.43012,0 8,3.56988 8,8c0,4.43012 -3.56988,8 -8,8c-4.43012,0 -8,-3.56988 -8,-8c0,-4.43012 3.56988,-8 8,-8zm-1,2l0,6.41406l4.29297,4.29297l1.41406,-1.41406l-3.70703,-3.70703l0,-5.58594l-2,0z"
+          ></path>
+        </svg>
+      </button>
+      <button id="sort_4" onclick="Territory.sort('1')" data-state="">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+          <path
+            id="svg_1"
+            d="m32.47852,6a1.50015,1.50015 0 0 0 -1.03907,0.43945l-7,7a1.50015,1.50015 0 1 0 2.1211,2.1211l4.43945,-4.43946l0,30.37891a1.50015,1.50015 0 1 0 3,0l0,-30.37891l4.43945,4.43946a1.50015,1.50015 0 1 0 2.1211,-2.1211l-7,-7a1.50015,1.50015 0 0 0 -1.08203,-0.43945z"
+          ></path>
+          <path
+            d="m16,22.85262c-5.511,0 -10,4.489 -10,10c0,5.511 4.489,10 10,10c5.511,0 10,-4.489 10,-10c0,-5.511 -4.489,-10 -10,-10zm0,2c4.43012,0 8,3.56988 8,8c0,4.43012 -3.56988,8 -8,8c-4.43012,0 -8,-3.56988 -8,-8c0,-4.43012 3.56988,-8 8,-8zm-1,2l0,6.41406l4.29297,4.29297l1.41406,-1.41406l-3.70703,-3.70703l0,-5.58594l-2,0z"
+          ></path>
+        </svg>
+      </button>
+    </div>
+
+    <select
+      id="list-controls-filter-status"
+      name="status"
+      onchange="Territory.filter()"
+    >
+      <option value="0" selected>Всі території</option>
+      <option value="1">Зайняті території</option>
+      <option value="2">Вільні території</option>
+    </select>
+  </div>
 
   <details open>
     <summary>
       <span>Багатоквартирні будинки</span>
+      <div>
+        <button
+          id="territory_entrances_true"
+          onclick="Territory.house.territoryType('true')"
+          data-state=""
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+            <path
+              d="M 14.5 4 C 11.480226 4 9 6.4802259 9 9.5 L 9 41.5 C 9 42.863594 10.136406 44 11.5 44 L 19.5 44 C 20.863594 44 22 42.863594 22 41.5 L 22 37.5 C 22 37.204955 22.204955 37 22.5 37 L 25.5 37 C 25.795045 37 26 37.204955 26 37.5 L 26 41.5 C 26 42.863594 27.136406 44 28.5 44 L 36.5 44 C 37.863594 44 39 42.863594 39 41.5 L 39 9.5 C 39 6.4802259 36.519774 4 33.5 4 L 14.5 4 z M 14.5 7 L 33.5 7 C 34.898226 7 36 8.1017741 36 9.5 L 36 41 L 29 41 L 29 37.5 C 29 35.585045 27.414955 34 25.5 34 L 22.5 34 C 20.585045 34 19 35.585045 19 37.5 L 19 41 L 12 41 L 12 9.5 C 12 8.1017741 13.101774 7 14.5 7 z M 16.5 10 A 1.50015 1.50015 0 1 0 16.5 13 L 17.5 13 A 1.50015 1.50015 0 1 0 17.5 10 L 16.5 10 z M 23.5 10 A 1.50015 1.50015 0 1 0 23.5 13 L 24.5 13 A 1.50015 1.50015 0 1 0 24.5 10 L 23.5 10 z M 30.5 10 A 1.50015 1.50015 0 1 0 30.5 13 L 31.5 13 A 1.50015 1.50015 0 1 0 31.5 10 L 30.5 10 z M 16.5 16 A 1.50015 1.50015 0 1 0 16.5 19 L 17.5 19 A 1.50015 1.50015 0 1 0 17.5 16 L 16.5 16 z M 23.5 16 A 1.50015 1.50015 0 1 0 23.5 19 L 24.5 19 A 1.50015 1.50015 0 1 0 24.5 16 L 23.5 16 z M 30.5 16 A 1.50015 1.50015 0 1 0 30.5 19 L 31.5 19 A 1.50015 1.50015 0 1 0 31.5 16 L 30.5 16 z M 16.5 22 A 1.50015 1.50015 0 1 0 16.5 25 L 17.5 25 A 1.50015 1.50015 0 1 0 17.5 22 L 16.5 22 z M 23.5 22 A 1.50015 1.50015 0 1 0 23.5 25 L 24.5 25 A 1.50015 1.50015 0 1 0 24.5 22 L 23.5 22 z M 30.5 22 A 1.50015 1.50015 0 1 0 30.5 25 L 31.5 25 A 1.50015 1.50015 0 1 0 31.5 22 L 30.5 22 z M 16.5 28 A 1.50015 1.50015 0 1 0 16.5 31 L 17.5 31 A 1.50015 1.50015 0 1 0 17.5 28 L 16.5 28 z M 23.5 28 A 1.50015 1.50015 0 1 0 23.5 31 L 24.5 31 A 1.50015 1.50015 0 1 0 24.5 28 L 23.5 28 z M 30.5 28 A 1.50015 1.50015 0 1 0 30.5 31 L 31.5 31 A 1.50015 1.50015 0 1 0 31.5 28 L 30.5 28 z"
+            />
+          </svg>
+        </button>
+
+        <button
+          id="territory_entrances_false"
+          onclick="Territory.house.territoryType('false')"
+          data-state=""
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
+            <path
+              d="M 14.5 6 A 1.50015 1.50015 0 0 0 13 7.5 L 13 25 L 7.5 25 A 1.50015 1.50015 0 0 0 6 26.5 L 6 42.5 A 1.50015 1.50015 0 1 0 9 42.5 L 9 28 L 14.253906 28 A 1.50015 1.50015 0 0 0 14.740234 28 L 19 28 L 19 42.5 A 1.50015 1.50015 0 1 0 22 42.5 L 22 26.746094 A 1.50015 1.50015 0 0 0 22 26.259766 L 22 22 L 33.253906 22 A 1.50015 1.50015 0 0 0 33.740234 22 L 39 22 L 39 42.5 A 1.50015 1.50015 0 1 0 42 42.5 L 42 20.5 A 1.50015 1.50015 0 0 0 40.5 19 L 35 19 L 35 7.5 A 1.50015 1.50015 0 0 0 33.5 6 L 14.5 6 z M 16 9 L 32 9 L 32 19 L 20.5 19 A 1.50015 1.50015 0 0 0 19 20.5 L 19 25 L 16 25 L 16 9 z M 20 12 C 19.448 12 19 12.448 19 13 L 19 15 C 19 15.552 19.448 16 20 16 L 22 16 C 22.552 16 23 15.552 23 15 L 23 13 C 23 12.448 22.552 12 22 12 L 20 12 z M 26 12 C 25.448 12 25 12.448 25 13 L 25 15 C 25 15.552 25.448 16 26 16 L 28 16 C 28.552 16 29 15.552 29 15 L 29 13 C 29 12.448 28.552 12 28 12 L 26 12 z M 26 25 C 25.448 25 25 25.448 25 26 L 25 28 C 25 28.552 25.448 29 26 29 L 28 29 C 28.552 29 29 28.552 29 28 L 29 26 C 29 25.448 28.552 25 28 25 L 26 25 z M 33 25 C 32.448 25 32 25.448 32 26 L 32 28 C 32 28.552 32.448 29 33 29 L 35 29 C 35.552 29 36 28.552 36 28 L 36 26 C 36 25.448 35.552 25 35 25 L 33 25 z M 13 31 C 12.448 31 12 31.448 12 32 L 12 34 C 12 34.552 12.448 35 13 35 L 15 35 C 15.552 35 16 34.552 16 34 L 16 32 C 16 31.448 15.552 31 15 31 L 13 31 z M 26 31 C 25.448 31 25 31.448 25 32 L 25 34 C 25 34.552 25.448 35 26 35 L 28 35 C 28.552 35 29 34.552 29 34 L 29 32 C 29 31.448 28.552 31 28 31 L 26 31 z M 33 31 C 32.448 31 32 31.448 32 32 L 32 34 C 32 34.552 32.448 35 33 35 L 35 35 C 35.552 35 36 34.552 36 34 L 36 32 C 36 31.448 35.552 31 35 31 L 33 31 z M 13 37 C 12.448 37 12 37.448 12 38 L 12 40 C 12 40.552 12.448 41 13 41 L 15 41 C 15.552 41 16 40.552 16 40 L 16 38 C 16 37.448 15.552 37 15 37 L 13 37 z M 26 37 C 25.448 37 25 37.448 25 38 L 25 40 C 25 40.552 25.448 41 26 41 L 28 41 C 28.552 41 29 40.552 29 40 L 29 38 C 29 37.448 28.552 37 28 37 L 26 37 z M 33 37 C 32.448 37 32 37.448 32 38 L 32 40 C 32 40.552 32.448 41 33 41 L 35 41 C 35.552 41 36 40.552 36 40 L 36 38 C 36 37.448 35.552 37 35 37 L 33 37 z"
+            />
+          </svg>
+        </button>
+      </div>
     </summary>
 
     <div id="list-house"></div>

web/lib/pages/territory/script.js

@@ -3,128 +3,250 @@ const Territory = {
         let html = await fetch('/lib/pages/territory/index.html').then((response) => response.text());
         app.innerHTML = html;
 
-        if (USER.administrator.uuid) document.getElementById('rotationButton').style.display = "";
-        if (USER.administrator.uuid || (USER.moderator.uuid && USER.moderator.can_add_territory)) document.getElementById("constructorButton").style.display = "";
+        let selectStatus = document.getElementById('list-controls-filter-status');
+        let filterStatus = localStorage.getItem("filterStatus") ? Number(localStorage.getItem("filterStatus")) : 0;
+        selectStatus.value = filterStatus;
+
+        if (USER.mode == 2) {
+            document.getElementById("buttons-list").style.display = "flex";
+        }
+        if (USER.possibilities.can_add_territory) {
+            document.getElementById("buttons-list").style.display = "flex";
+            document.getElementById("constructorButton").style.display = "";
+        }
+
+        // Застосовуємо режим сортування
+        Territory.sort(localStorage.getItem('territory_sort_mode'));
+
+
+        if (localStorage.getItem('territory_entrances') == 'true') {
+            document.getElementById('territory_entrances_true').setAttribute('data-state', '')
+            document.getElementById('territory_entrances_false').setAttribute('data-state', 'active')
+        } else {
+            document.getElementById('territory_entrances_true').setAttribute('data-state', 'active')
+            document.getElementById('territory_entrances_false').setAttribute('data-state', '')
+        }
+    },
+
+    // Сортування
+    sort(mode) {
+        const idx = Math.max(1, Math.min(4, Number(mode) || 1));
+        ['sort_1', 'sort_2', 'sort_3', 'sort_4'].forEach((id, i) => {
+            document.getElementById(id)?.setAttribute('data-state', i + 1 === idx ? 'active' : '');
+        });
+        localStorage.setItem('territory_sort_mode', idx);
 
         Territory.house.setHTML();
         Territory.homestead.setHTML();
     },
-    house: {
-        loadAPI: async function () {
-            let uuid = localStorage.getItem("uuid");
 
-            const URL = `${CONFIG.api}houses/list`;
-            return await fetch(URL, {
+    house: {
+        list: [],
+        loadAPI: async function (url) {
+            const uuid = localStorage.getItem("uuid");
+            const response = await fetch(url, {
                 method: 'GET',
                 headers: {
                     "Content-Type": "application/json",
                     "Authorization": uuid
                 }
-            }).then((response) => response.json());
+            });
+            Territory.house.list = await response.json();
+            return Territory.house.list;
         },
         setHTML: async function () {
-            let list = await Territory.house.loadAPI();
+            const block_house = document.getElementById('list-house');
+            const territory_entrances = localStorage.getItem('territory_entrances') === 'true';
+            const sort_mode = localStorage.getItem('territory_sort_mode') ?? "1";
+            const filterStatus = Number(localStorage.getItem("filterStatus") ?? 0);
 
-            list.sort((a, b) => b.id - a.id);
+            const url = `${CONFIG.api}houses/list${territory_entrances ? '/entrances' : ''}`;
+            let list = this.list.length > 0 ? this.list : await this.loadAPI(url);
 
-            console.log(list);
-            let block_house = document.getElementById('list-house')
-            block_house.innerHTML = "";
+            const compare = {
+                "1": (a, b) => this.compareAB(a, b, territory_entrances, 'asc'),
+                "2": (a, b) => this.compareAB(a, b, territory_entrances, 'desc'),
+                "3": (a, b) => a.history?.date?.start - b.history?.date?.start,
+                "4": (a, b) => b.history?.date?.start - a.history?.date?.start,
+            }[sort_mode] ?? ((a, b) => a.id - b.id);
 
-            for (let i = 0; i < list.length; i++) {
-                const element = list[i];
+            list.sort(compare);
 
-                let progress = ((element.entrance.working / element.entrance.quantity) * 100);
+            let html = "";
+            for (const element of list) {
+                const qty = element.entrance?.quantity ?? 0;
+                const work = element.entrance?.working ?? 0;
 
-                let pageURL = () => {
-                    if (USER.administrator.uuid || (USER.moderator.uuid && USER.moderator.can_manager_territory)) return `/territory/manager/house/${element.id}`;
-                    else return `/territory/card/house/${element.id}`
+                const statusMatch =
+                    filterStatus === 0 ||
+                    (filterStatus === 1 && qty === work && !territory_entrances) ||
+                    (filterStatus === 1 && element.working === true) ||
+                    (filterStatus === 2 && qty !== work && !territory_entrances) ||
+                    (filterStatus === 2 && element.working === false);
+
+                if (statusMatch) {
+                    html += this.renderCard({ element, territory_entrances });
                 }
+            }
 
-                block_house.innerHTML += `
+            block_house.innerHTML = html;
+        },
+        compareAB: (a, b, entrances, order = 'asc') => {
+            const dir = order === 'asc' ? 1 : -1;
+            const ah = entrances ? a.house : a;
+            const bh = entrances ? b.house : b;
+
+            const tA = ah.title?.toLowerCase() ?? '';
+            const tB = bh.title?.toLowerCase() ?? '';
+            if (tA < tB) return -1 * dir;
+            if (tA > tB) return 1 * dir;
+
+            const nA = ah.number?.toLowerCase() ?? '';
+            const nB = bh.number?.toLowerCase() ?? '';
+            if (nA < nB) return -1 * dir;
+            if (nA > nB) return 1 * dir;
+
+            return 0;
+        },
+        renderCard: ({ element, territory_entrances }) => {
+            if (territory_entrances) {
+                const working = element.working;
+                const bg = working ? `background: ${colorGroup(element.history.group_id)} color: #fff;` : "";
+
+                const person = working
+                    ? `<span>Територію опрацьовує:</span> <p>${element.history.name === 'Групова' ? 'Група ' + element.history.group_id : element.history.name}</p>`
+                    : `<span>Територія не опрацьовується</span>`;
+                
+                return `
+                    <div class="card">
+                        <i style="background-image: url(https://sheep-service.com/cards/house/T${element.house.id}.webp);"></i>
+                        <div class="contents">
+                            <div class="info">
+                                <div>
+                                    <p>${element.house.title} ${element.house.number} (${element.title})</p>
+                                </div>
+                            </div>
+                            <div class="sheep" style="${bg}">
+                                ${person}
+                            </div>
+                        </div>
+                        <a href="/territory/manager/house/${element.house.id}" data-route></a>
+                    </div>
+                `;
+            } else {
+                const qty = element.entrance.quantity;
+                const work = element.entrance.working;
+                const progress = ((work / qty) * 100).toFixed(1);
+                return `
                     <div class="card">
                         <i style="background-image: url(https://sheep-service.com/cards/house/T${element.id}.webp);"></i>
                         <div class="contents">
-                            <div class="group" style="background: ${colorGroup(element.group_id)}">
-                                <span>Група №${element.group_id}</span>
+                            <div class="info">
+                                <div>
+                                    <p>${element.title} ${element.number}</p>
+                                </div>
                             </div>
                             <div class="info">
                                 <div>
                                     <div class="progress" style="width: ${progress}%"></div>
                                     <span>Вільні під'їзди:</span>
-                                    <p>${element.entrance.quantity - element.entrance.working} / ${element.entrance.quantity}</p>
-                                </div>
-                                <div>
-                                    <p>${element.title} ${element.number}</p>
+                                    <p>${qty - work} / ${qty}</p>
                                 </div>
                             </div>
                         </div>
-                        <a href="${pageURL()}" data-route></a>
+                        <a href="/territory/manager/house/${element.id}" data-route></a>
                     </div>
                 `;
             }
+        },
+        territoryType: (type) => {
+            localStorage.setItem('territory_entrances', type);
+            document.getElementById('territory_entrances_true').setAttribute('data-state', type === 'false' ? 'active' : '');
+            document.getElementById('territory_entrances_false').setAttribute('data-state', type === 'true' ? 'active' : '');
+            Territory.house.list = [];
+            Territory.house.setHTML();
         }
     },
     homestead: {
+        list: [],
         loadAPI: async function () {
-            let uuid = localStorage.getItem("uuid");
-
+            const uuid = localStorage.getItem("uuid");
             const URL = `${CONFIG.api}homestead/list`;
-            return await fetch(URL, {
+
+            const response = await fetch(URL, {
                 method: 'GET',
                 headers: {
                     "Content-Type": "application/json",
                     "Authorization": uuid
                 }
-            }).then((response) => response.json());
+            });
+
+            this.list = await response.json();
+            return this.list;
         },
         setHTML: async function () {
-            let list = await Territory.homestead.loadAPI();
+            const block = document.getElementById('list-homestead');
+            const sortMode = localStorage.getItem('territory_sort_mode') ?? "1";
+            const filterStatus = Number(localStorage.getItem("filterStatus") ?? 0);
 
-            list.sort((a, b) => b.id - a.id);
+            let list = this.list.length > 0 ? this.list : await this.loadAPI();
 
-            console.log(list);
-            let block_homestead = document.getElementById('list-homestead')
-            block_homestead.innerHTML = "";
+            const compare = {
+                "1": (a, b) => a.id - b.id,
+                "2": (a, b) => b.id - a.id,
+                "3": (a, b) => (a.history?.date?.start ?? 0) - (b.history?.date?.start ?? 0),
+                "4": (a, b) => (b.history?.date?.start ?? 0) - (a.history?.date?.start ?? 0),
+            }[sortMode] ?? ((a, b) => a.id - b.id);
 
-            for (let i = 0; i < list.length; i++) {
-                const element = list[i];
+            list.sort(compare);
 
-                let block_history = () => {
-                    if (element.working) {
-                        return `
+            let html = "";
+
+            for (const element of list) {
+                const statusMatch =
+                    filterStatus === 0 ||
+                    (filterStatus === 1 && element.working) ||
+                    (filterStatus === 2 && !element.working);
+
+                if (statusMatch) {
+                    html += this.renderCard(element);
+                }
+            }
+
+            block.innerHTML = html;
+        },
+        renderCard: (element) => {
+            const working = element.working;
+            const bg = working ? `background: ${colorGroup(element.history.group_id)} color: #fff;` : "";
+            const person = working
+                ? `<span>Територію опрацьовує:</span> <p>${element.history.name === 'Групова' ? 'Група ' + element.history.group_id : element.history.name}</p>`
+                : `<span>Територія не опрацьовується</span>`;
+
+            return `
+                <div class="card">
+                    <i style="background-image: url(https://sheep-service.com/cards/homestead/H${element.id}.webp);"></i>
+                    <div class="contents">
+                        <div class="info">
                             <div>
-                                <div class="progress" style="width: 100%"></div>
-                                <p>${element.history.name}</p>
-                            </div>
-                        `
-                    }
-                    return ''
-                }
-
-                let pageURL = () => {
-                    if (USER.administrator.uuid || (USER.moderator.uuid && USER.moderator.can_manager_territory)) return `/territory/manager/homestead/${element.id}`;
-                    else return `/territory/card/homestead/${element.id}`
-                }
-
-                block_homestead.innerHTML += `
-                    <div class="card">
-                       <i style="background-image: url(https://sheep-service.com/cards/homestead/H${element.id}.webp);"></i>
-                        <div class="contents">
-                            <div class="group" style="background: ${colorGroup(element.group_id)}">
-                                <span>Група №${element.group_id}</span>
-                            </div>
-                            <div class="info">
-                                ${block_history()}
-                                <div>
-                                    <p>${element.title} ${element.number}</p>
-                                </div>
+                                <p>${element.title} ${element.number}</p>
                             </div>
                         </div>
-                        <a href="${pageURL()}" data-route></a>
+                        <div class="sheep" style="${bg}">
+                            ${person}
+                        </div>
                     </div>
-                `;
-            }
+                    <a href="/territory/manager/homestead/${element.id}" data-route></a>
+                </div>
+            `;
         }
+    },
+    filter: () => {
+        let selectStatus = document.getElementById('list-controls-filter-status').value;
+
+        localStorage.setItem("filterStatus", selectStatus);
+
+
+        Territory.house.setHTML();
+        Territory.homestead.setHTML();
     }
 }

web/lib/pages/territory/style.css

@@ -8,20 +8,20 @@
 
 .page-territory>.buttons-list {
     padding: 10px;
-    margin-bottom: 20px;
+    margin-bottom: 40px;
     background: var(--ColorThemes1);
     color: var(--ColorThemes3);
     border: 1px solid var(--ColorThemes2);
     box-shadow: var(--shadow-l1);
-    border-radius: 15px;
+    border-radius: var(--border-radius);
     overflow: auto;
-    display: flex;
+    display: none;
 }
 
 .page-territory>.buttons-list>button,
 .page-territory>.buttons-list>a {
     cursor: pointer;
-    border-radius: 10px;
+    border-radius: calc(var(--border-radius) - 5px);
     padding: 0 10px;
     margin-right: 20px;
     min-width: fit-content;
@@ -35,7 +35,7 @@
 .page-territory>.buttons-list>button>span,
 .page-territory>.buttons-list>a>span {
     color: var(--PrimaryColorText);
-    font-size: 14px;
+    font-size: var(--FontSize3);
     font-weight: normal;
 }
 
@@ -47,13 +47,87 @@
     margin-right: 10px;
 }
 
+.page-territory>.list-controls {
+    padding: 10px;
+    margin: 0px 0 10px 0;
+    background: var(--ColorThemes1);
+    color: var(--ColorThemes3);
+    border: 1px solid var(--ColorThemes2);
+    box-shadow: var(--shadow-l1);
+    border-radius: var(--border-radius);
+    overflow: auto;
+    display: flex;
+}
+
+.page-territory>.list-controls select {
+    min-width: 140px;
+    height: 30px;
+    background-color: var(--ColorThemes2);
+    border: 1px solid var(--ColorThemes0);
+    box-shadow: var(--shadow-l1);
+    color: var(--ColorThemes3);
+    font-size: var(--FontSize1);
+    cursor: pointer;
+    padding: 0 5px;
+    margin-right: 10px;
+    border-radius: calc(var(--border-radius) - 5px - 2px);
+}
+
+
+#page-territory-sort {
+    display: flex;
+}
+
+#page-territory-sort button {
+    display: none;
+    font-size: 18px;
+    background: 0;
+    cursor: pointer;
+    min-width: 30px;
+    height: 30px;
+    padding: 0;
+    margin-right: 10px;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    color: var(--ColorThemes3);
+    border-radius: calc(var(--border-radius) - 5px - 2px);
+    border: 1px solid var(--ColorThemes0);
+}
+
+#page-territory-sort button[data-state="active"] {
+    background: var(--PrimaryColor);
+}
+
+#page-territory-sort button:hover {
+    background: var(--ColorThemes3);
+}
+
+#page-territory-sort button>svg {
+    width: 22px;
+    fill: var(--PrimaryColorText);
+}
+
+#page-territory-sort button:hover svg {
+    fill: var(--ColorThemes1);
+}
+
+#page-territory-sort button:hover {
+    display: none;
+    opacity: 1;
+}
+
+#page-territory-sort button[data-state="active"] {
+    display: flex;
+}
+
 .page-territory details {
-    border-radius: 15px;
+    border-radius: var(--border-radius);
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
     background: var(--ColorThemes1);
     color: var(--ColorThemes3);
     border: 1px solid var(--ColorThemes2);
@@ -78,16 +152,53 @@
     cursor: pointer;
     color: var(--ColorThemes3);
     border-radius: var(--border-radius);
-    font-size: 16px;
+    font-size: var(--FontSize5);
     font-weight: 300;
     padding: 20px;
     position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
 .page-territory summary span {
     font-weight: 500;
 }
 
+.page-territory summary>div>button {
+    display: none;
+    font-size: 18px;
+    background: 0;
+    cursor: pointer;
+    min-width: 30px;
+    height: 30px;
+    padding: 0;
+    margin: 0;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    color: var(--ColorThemes3);
+    border-radius: 8px;
+}
+
+.page-territory summary>div>button[data-state="active"] {
+    background: var(--PrimaryColor);
+    display: flex;
+}
+
+.page-territory summary>div>button:hover {
+    background: var(--ColorThemes3);
+}
+
+.page-territory summary>div>button>svg {
+    width: 22px;
+    fill: var(--PrimaryColorText);
+}
+
+.page-territory summary>div>button:hover svg {
+    fill: var(--ColorThemes1);
+}
+
 .page-territory #list-house,
 .page-territory #list-homestead {
     width: 100%;
@@ -110,7 +221,7 @@
     margin: 0px 10px 20px 10px;
     overflow: hidden;
     cursor: pointer;
-    border-radius: 10px;
+    border-radius: calc(var(--border-radius) - 5px);
 }
 
 @media (max-width: 2300px) {
@@ -159,7 +270,7 @@
     /* background-repeat: round; */
     background-size: cover;
     background-position: center;
-    background-image: url(https://tm.rozenrod.com/web/img/bg.webp);
+    background-color: var(--PrimaryColor);
 }
 
 .page-territory .card>a {
@@ -180,45 +291,25 @@
     color: #fff;
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: stretch;
     justify-content: space-between;
 }
 
-.page-territory .group {
-    width: calc(100% - 20px);
-    max-height: 50px;
-    border-radius: 7px;
-    padding: 10px 0;
-    margin-top: 10px;
-    display: flex;
-    background: var(--PrimaryColor);
-    align-items: center;
-    flex-direction: column;
-    justify-content: space-around;
-}
-
-.page-territory .group>span {
-    color: #fff;
-    font-size: 14px;
-    font-weight: 400;
-}
 
 .page-territory .info {
-    width: calc(100% - 20px);
-    margin-bottom: 10px;
+    margin: 10px;
 }
 
 .page-territory .info>div {
     width: 100%;
     height: 35px;
-    margin-top: 5px;
     display: flex;
     background: var(--ColorThemes0);
     align-items: center;
     justify-content: center;
-    font-size: 12px;
+    font-size: var(--FontSize1);
     color: var(--ColorThemes3);
-    border-radius: 7px;
+    border-radius: calc(var(--border-radius) - 5px - 4px);
     position: relative;
     overflow: hidden;
 }
@@ -233,15 +324,42 @@
 
 .page-territory .info>div>span {
     color: var(--ColorThemes3);
-    font-size: 14px;
+    font-size: var(--FontSize3);
     font-weight: 300;
     z-index: 2;
 }
 
 .page-territory .info>div>p {
     color: var(--ColorThemes3);
-    font-size: 14px;
+    font-size: var(--FontSize3);
     font-weight: 400;
     padding: 10px;
     z-index: 2;
+}
+
+.page-territory .sheep {
+    margin: 10px;
+    max-height: 50px;
+    border-radius: calc(var(--border-radius) - 5px - 4px);
+    padding: 10px 0;
+    margin-top: 10px;
+    display: flex;
+    background: var(--PrimaryColor);
+    align-items: center;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.page-territory .sheep>span {
+    color: var(--PrimaryColorText);
+    font-size: var(--FontSize3);
+    font-weight: 400;
+    opacity: 0.8;
+}
+
+.page-territory .sheep>p {
+    color: var(--PrimaryColorText);
+    font-size: var(--FontSize4);
+    font-weight: 400;
+    margin-top: 5px;
 }