Переработаны роутеры приложения

Переписано APi WebSocket для работы с новыми роутерами

web/lib/pages/territory/history/index.html

@@ -0,0 +1,3 @@
+<div class="page-territory_history">
+    <div id="list"></div>
+</div>

web/lib/pages/territory/history/script.js

@@ -0,0 +1,80 @@
+const Territory_History = {
+    list: [],
+
+    async init() {
+        let html = await fetch('/lib/pages/territory/history/index.html').then((response) => response.text());
+        app.innerHTML = html;
+
+        this.setHTML()
+    },
+
+    async loadAPI(url) {
+        const uuid = localStorage.getItem("uuid");
+
+        const response = await fetch(url, {
+            method: 'GET',
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": uuid
+            }
+        });
+        return await response.json();
+    },
+
+    async setHTML() {
+        const block_list = document.getElementById('list');
+        const url = `${CONFIG.api}history/apartments/list?limit=300`;
+        let list = this.list.length > 0 ? this.list : await this.loadAPI(url);
+
+        list.sort((a, b) => b.id - a.id);
+
+        let html = "";
+        for (const element of list) {
+            html += this.renderCard({ element });
+        }
+
+        block_list.innerHTML = html;
+    },
+
+    renderCard: ({ element }) => {
+        const labels = ["", "Відмова (Не цікавить)", "Не заходити (Груба відмова)", "Нема домофона", "Повторна відвідина", "Немає вдома", "Свідки Єгови"];
+        const color_status = [
+            ["var(--ColorThemes2)", "var(--ColorThemes3)"],
+            ["#fbf1e0", "#ff8300"],
+            ["#fce3e2", "#ff0000"],
+            ["#d7ddec", "#2919bd"],
+            ["#d5e9dd", "#11a568"],
+            ["#d7ebfa", "#3fb4fc"],
+            ["#e8dbf5", "#b381eb"]
+        ];
+
+        const [bg, color] = color_status[element.status];
+                
+        let description = element.description 
+            ? `<div class="description"><p>${element.description}</p></div>`
+            : ``;
+
+        return `
+            <div class="card" style="background:${bg};color:${color};border:1px solid ${color}">
+                <div class="info" title="${element.id}">
+                    <a href="/territory/card/house/${element.house_id}" class="address">
+                        <p title="${element.address.entrance}">${element.address.house.title} ${element.address.house.number}</p>
+                    </a>
+                    <div class="apartment">
+                        <p>кв. ${element.address.apartment}</p>
+                    </div>
+                    <div class="status">
+                        <p>${labels[element.status]}</p>
+                    </div>
+                    <a href="/sheeps/${element.sheep.id}" class="name">
+                        <p>${element.sheep.name ?? "--"}</p>
+                    </a>
+                    <div class="date">
+                        <p>${formattedDateTime(element.created_at)}</p>
+                    </div>
+                </div>
+                ${description}
+            </div>
+        `;
+    },
+}

web/lib/pages/territory/history/style.css

@@ -0,0 +1,75 @@
+.page-territory_history {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    position: relative;
+}
+
+.page-territory_history>#list {
+    width: 100%;
+    overflow: auto;
+    padding: 20px;
+}
+
+.page-territory_history>#list>.card {
+    display: flex;
+    min-width: calc(100% - 2px);
+    width: 700px;
+    background: var(--ColorThemes1);
+    border: 1px solid var(--ColorThemes2);
+    border-radius: var(--border-radius);
+    margin-bottom: 10px;
+    flex-direction: column;
+    position: relative;
+}
+
+.page-territory_history>#list>.card>.info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 10px;
+}
+
+.page-territory_history>#list>.card>.info>div {
+    text-align: center;
+}
+
+.page-territory_history>#list>.card>.info>div>a,
+.page-territory_history>#list>.card>.info>div>p {
+    font-size: var(--FontSize3);
+}
+
+.page-territory_history>#list>.card>.info>.address {
+    width: 20%;
+    text-align: left;
+}
+
+.page-territory_history>#list>.card>.info>.apartment {
+    width: 60px;
+}
+
+.page-territory_history>#list>.card>.info>.status {
+    width: 180px;
+}
+
+.page-territory_history>#list>.card>.info>.name {
+    width: 150px;
+    text-align: center;
+}
+
+.page-territory_history>#list>.card>.info>.date {
+    width: 125px;
+}
+
+.page-territory_history>#list>.card>.description {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0 10px 10px 10px;
+    background: var(--ColorThemes0);
+    color: var(--ColorThemes3);
+    font-size: var(--FontSize2);
+    padding: 10px;
+    border-radius: 8px;
+}