Sheep-Service/web/lib/pages/home/script.js

const Home = {
    init: async () => {
        let html = await fetch('/lib/pages/home/index.html').then((response) => response.text());
        app.innerHTML = html;

        if (USER.possibilities.can_view_territory) {
            Home.personal.house.setHTML();
            Home.personal.homestead.setHTML();

            Home.group.house.setHTML();
            Home.group.homestead.setHTML();
        }
    },
    personal: {
        house: {
            list: [],
            loadAPI: async () => {
                const uuid = localStorage.getItem("uuid");
                const URL = `${CONFIG.api}houses/list?mode=sheep`;
                const res = await fetch(URL, {
                    headers: {
                        "Content-Type": "application/json",
                        "Authorization": uuid
                    }
                });
                Home.personal.house.list = await res.json();
                return Home.personal.house.list;
            },
            setHTML: async () => {
                const list = Home.personal.house.list.length > 0 
                    ? Home.personal.house.list 
                    : await Home.personal.house.loadAPI();

                if (USER.possibilities.can_view_territory && list.length)
                    document.getElementById('details-personal-territory').style.display = "";

                list.sort((a, b) => b.id - a.id);
                Home.renderCards(list, "house", "personal");
            }
        },
        homestead: {
            list: [],
            loadAPI: async () => {
                const uuid = localStorage.getItem("uuid");
                const URL = `${CONFIG.api}homestead/list?mode=sheep`;
                const res = await fetch(URL, {
                    headers: {
                        "Content-Type": "application/json",
                        "Authorization": uuid
                    }
                });
                Home.personal.homestead.list = await res.json();
                return Home.personal.homestead.list;
            },
            setHTML: async () => {
                const list = Home.personal.homestead.list.length > 0 
                    ? Home.personal.homestead.list 
                    : await Home.personal.homestead.loadAPI();

                if (USER.possibilities.can_view_territory && list.length)
                    document.getElementById('details-personal-territory').style.display = "";

                list.sort((a, b) => b.id - a.id);
                Home.renderCards(list, "homestead", "personal");
            }
        }
    },
    group: {
        house: {
            list: [],
            loadAPI: async () => {
                const uuid = localStorage.getItem("uuid");
                const URL = `${CONFIG.api}house/list?mode=group`;
                const res = await fetch(URL, {
                    headers: {
                        "Content-Type": "application/json",
                        "Authorization": uuid
                    }
                });
                Home.group.house.list = await res.json();
                return Home.group.house.list;
            },
            setHTML: async () => {
                const list = Home.group.house.list.length > 0 
                    ? Home.group.house.list 
                    : await Home.group.house.loadAPI();

                if (USER.possibilities.can_view_territory && list.length)
                    document.getElementById('details-group-territory').style.display = "";

                list.sort((a, b) => b.id - a.id);
                Home.renderCards(list, "house", "group");
            }
        },
        homestead: {
            list: [],
            loadAPI: async () => {
                const uuid = localStorage.getItem("uuid");
                const URL = `${CONFIG.api}homestead/list?mode=group`;
                const res = await fetch(URL, {
                    headers: {
                        "Content-Type": "application/json",
                        "Authorization": uuid
                    }
                });
                Home.group.homestead.list = await res.json();
                return Home.group.homestead.list;
            },
            setHTML: async () => {
                const list = Home.group.homestead.list.length > 0 
                    ? Home.group.homestead.list 
                    : await Home.group.homestead.loadAPI();

                if (USER.possibilities.can_view_territory && list.length)
                    document.getElementById('details-group-territory').style.display = "";

                list.sort((a, b) => b.id - a.id);
                Home.renderCards(list, "homestead", "group");
            }
        }
    },
    renderCards: (list, type, block) => {
        const container = document.getElementById(`home-${block}-territory-list`);
        const fragment = document.createDocumentFragment();

        for (const el of list) {
            const card = document.createElement("div");
            card.className = "card";

            card.innerHTML = `
                <i style="background-image: url(https://sheep-service.com/cards/${type}/${type === "house" ? "T" : "H"}${el.id}.webp);"></i>
                <div class="contents">
                    <div class="info">
                        <div><p>${el.title} ${el.number}</p></div>
                    </div>
                </div>
                <a href="/territory/card/${type}/${el.id}" data-route></a>
            `;
            fragment.appendChild(card);
        }

        container.appendChild(fragment);
    }
}