v0.0.1

web/lib/pages/territory/index.html

@@ -0,0 +1,39 @@
+<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;">
+      <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"
+        />
+      </svg>
+      <span>Конструктор</span>
+    </a>
+  </div>
+
+  <div class="list-controls"></div>
+
+  <details open>
+    <summary>
+      <span>Багатоквартирні будинки</span>
+    </summary>
+
+    <div id="list-house"></div>
+  </details>
+
+  <details open>
+    <summary>
+      <span>Житлові райони</span>
+    </summary>
+
+    <div id="list-homestead"></div>
+  </details>
+</div>

web/lib/pages/territory/script.js

@@ -0,0 +1,130 @@
+const Territory = {
+    init: async () => {
+        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 = "";
+
+        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, {
+                method: 'GET',
+                headers: {
+                    "Content-Type": "application/json",
+                    "Authorization": uuid
+                }
+            }).then((response) => response.json());
+        },
+        setHTML: async function () {
+            let list = await Territory.house.loadAPI();
+
+            list.sort((a, b) => b.id - a.id);
+
+            console.log(list);
+            let block_house = document.getElementById('list-house')
+            block_house.innerHTML = "";
+
+            for (let i = 0; i < list.length; i++) {
+                const element = list[i];
+
+                let progress = ((element.entrance.working / element.entrance.quantity) * 100);
+
+                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}`
+                }
+
+                block_house.innerHTML += `
+                    <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>
+                            <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>
+                                </div>
+                            </div>
+                        </div>
+                        <a href="${pageURL()}" data-route></a>
+                    </div>
+                `;
+            }
+        }
+    },
+    homestead: {
+        loadAPI: async function () {
+            let uuid = localStorage.getItem("uuid");
+
+            const URL = `${CONFIG.api}homestead/list`;
+            return await fetch(URL, {
+                method: 'GET',
+                headers: {
+                    "Content-Type": "application/json",
+                    "Authorization": uuid
+                }
+            }).then((response) => response.json());
+        },
+        setHTML: async function () {
+            let list = await Territory.homestead.loadAPI();
+
+            list.sort((a, b) => b.id - a.id);
+
+            console.log(list);
+            let block_homestead = document.getElementById('list-homestead')
+            block_homestead.innerHTML = "";
+
+            for (let i = 0; i < list.length; i++) {
+                const element = list[i];
+
+                let block_history = () => {
+                    if (element.working) {
+                        return `
+                            <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>
+                            </div>
+                        </div>
+                        <a href="${pageURL()}" data-route></a>
+                    </div>
+                `;
+            }
+        }
+    }
+}

web/lib/pages/territory/style.css

@@ -0,0 +1,247 @@
+.page-territory {
+    width: calc(100% - 40px);
+    display: flex;
+    flex-direction: column;
+    margin: 20px 20px 0 20px;
+}
+
+
+.page-territory>.buttons-list {
+    padding: 10px;
+    margin-bottom: 20px;
+    background: var(--ColorThemes1);
+    color: var(--ColorThemes3);
+    border: 1px solid var(--ColorThemes2);
+    box-shadow: var(--shadow-l1);
+    border-radius: 15px;
+    overflow: auto;
+    display: flex;
+}
+
+.page-territory>.buttons-list>button,
+.page-territory>.buttons-list>a {
+    cursor: pointer;
+    border-radius: 10px;
+    padding: 0 10px;
+    margin-right: 20px;
+    min-width: fit-content;
+    min-height: 40px;
+    background: var(--PrimaryColor);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.page-territory>.buttons-list>button>span,
+.page-territory>.buttons-list>a>span {
+    color: var(--PrimaryColorText);
+    font-size: 14px;
+    font-weight: normal;
+}
+
+.page-territory>.buttons-list>button>svg,
+.page-territory>.buttons-list>a>svg {
+    width: 20px;
+    height: 20px;
+    fill: var(--PrimaryColorText);
+    margin-right: 10px;
+}
+
+.page-territory details {
+    border-radius: 15px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    margin-bottom: 20px;
+    background: var(--ColorThemes1);
+    color: var(--ColorThemes3);
+    border: 1px solid var(--ColorThemes2);
+    box-shadow: var(--shadow-l1);
+}
+
+.page-territory>details[disabled] summary,
+.page-territory>details.disabled summary {
+    pointer-events: none;
+    user-select: none;
+}
+
+.page-territory>details summary::-webkit-details-marker,
+.page-territory>details summary::marker {
+    display: none;
+    content: "";
+}
+
+
+.page-territory summary {
+    width: calc(100% - 40px);
+    cursor: pointer;
+    color: var(--ColorThemes3);
+    border-radius: var(--border-radius);
+    font-size: 16px;
+    font-weight: 300;
+    padding: 20px;
+    position: relative;
+}
+
+.page-territory summary span {
+    font-weight: 500;
+}
+
+.page-territory #list-house,
+.page-territory #list-homestead {
+    width: 100%;
+    margin: 0;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    align-content: flex-start;
+    justify-content: center;
+    overflow-y: auto;
+    align-items: flex-start;
+    transition: .3s ease;
+}
+
+.page-territory .card {
+    position: relative;
+    width: 300px;
+    height: 200px;
+    background-color: var(--ColorThemes2);
+    margin: 0px 10px 20px 10px;
+    overflow: hidden;
+    cursor: pointer;
+    border-radius: 10px;
+}
+
+@media (max-width: 2300px) {
+    .page-territory .card {
+        width: calc((100% / 5) - 40px);
+    }
+}
+
+@media (max-width: 1960px) {
+    .page-territory .card {
+        width: calc((100% / 4) - 40px);
+    }
+}
+
+@media (max-width: 1640px) {
+    .page-territory .card {
+        width: calc((100% / 3) - 40px);
+    }
+}
+
+@media (max-width: 1280px) {
+    .page-territory .card {
+        width: calc((100% / 2) - 40px);
+    }
+}
+
+@media (max-width: 650px) {
+    .page-territory .card {
+        width: 100%;
+    }
+}
+
+@media(hover: hover) {
+    .page-territory .card:hover {
+        opacity: 0.8;
+    }
+}
+
+.page-territory .card>i {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: 1;
+    filter: blur(2px);
+    /* background-repeat: round; */
+    background-size: cover;
+    background-position: center;
+    background-image: url(https://tm.rozenrod.com/web/img/bg.webp);
+}
+
+.page-territory .card>a {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+}
+
+.page-territory .contents {
+    position: absolute;
+    z-index: 2;
+    background: rgb(64 64 64 / 0.7);
+    width: 100%;
+    height: 100%;
+    font-size: 40px;
+    font-weight: 500;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    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;
+}
+
+.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;
+    color: var(--ColorThemes3);
+    border-radius: 7px;
+    position: relative;
+    overflow: hidden;
+}
+
+.page-territory .progress {
+    background: var(--PrimaryColor);
+    height: 100%;
+    position: absolute;
+    z-index: 1;
+    left: 0;
+}
+
+.page-territory .info>div>span {
+    color: var(--ColorThemes3);
+    font-size: 14px;
+    font-weight: 300;
+    z-index: 2;
+}
+
+.page-territory .info>div>p {
+    color: var(--ColorThemes3);
+    font-size: 14px;
+    font-weight: 400;
+    padding: 10px;
+    z-index: 2;
+}