v0.0.1

web/lib/pages/card/index.html

@@ -0,0 +1,175 @@
+<style>
+  *[disabled] {
+    opacity: 0.5;
+  }
+
+  select {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    /* Arrow */
+    appearance: none;
+    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%237a899d%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.3rem top 50%;
+    background-size: 0.55rem auto;
+  }
+
+  #header {
+    display: flex;
+    justify-content: space-around;
+  }
+  #header p {
+    font-size: 20px;
+  }
+
+  #list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  details {
+    color: var(--ColorThemes3);
+    width: 100%;
+    min-width: 320px;
+    background: var(--ColorThemes1);
+    margin: 20px 0px;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.04),
+      0px 0px 1px rgba(0, 0, 0, 0.04);
+  }
+  @media (min-width: 900px) {
+    #list {
+      align-items: flex-start;
+      justify-content: space-between;
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+    details {
+      width: calc(50% - 10px);
+    }
+  }
+  details[disabled] summary,
+  details.disabled summary {
+    pointer-events: none;
+    user-select: none;
+  }
+  details summary::-webkit-details-marker,
+  details summary::marker {
+    display: none;
+    content: "";
+  }
+
+  summary {
+    cursor: pointer;
+    background: #7a8a9d;
+    background: var(--PrimaryColor);
+    color: var(--PrimaryColorText);
+    height: 45px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  summary p {
+    padding: 0 10px;
+    color: var(--PrimaryColorText);
+    font-size: 14px;
+    font-weight: 500;
+  }
+  summary svg {
+    width: 25px;
+    height: 25px;
+    padding: 0 10px;
+    fill: var(--PrimaryColorText);
+  }
+
+  .apartments_list {
+    padding: 10px;
+    border-bottom: 2px solid var(--PrimaryColor);
+    border-left: 2px solid var(--PrimaryColor);
+    border-right: 2px solid var(--PrimaryColor);
+    border-radius: 0 0 10px 10px;
+  }
+  @media (max-width: 500px) {
+    .apartments_list {
+      padding: 1px;
+    }
+  }
+  .apartments_list > div {
+    display: flex;
+    font-size: 14px;
+    border-radius: 8px;
+    margin: 10px 10px 15px 10px;
+    flex-direction: column;
+    align-items: stretch;
+    border: 1px solid var(--ColorThemes3);
+    background: var(--ColorThemes2);
+  }
+  .apartments_list > div > .info {
+    display: flex;
+    font-size: 14px;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 8px;
+  }
+  .apartments_list > div > .info > span {
+    min-width: 40px;
+    font-size: 12px;
+    position: relative;
+    margin: 5px;
+  }
+  .apartments_list > div > .info > select {
+    color: #3d3d3d;
+    border-radius: 6px;
+    border: 1px solid #eaebef;
+    margin: 5px;
+    background-color: var(--ColorThemes3);
+    min-width: 110px;
+    width: 100%;
+    padding: 4px 20px 4px 4px;
+    height: 30px;
+  }
+  .apartments_list > div > .info > input {
+    color: #3d3d3d;
+    border-radius: 6px;
+    border: 1px solid #eaebef;
+    margin: 5px;
+    background-color: var(--ColorThemes3);
+    background-color: var(--ColorThemes0);
+    border: 1px solid var(--ColorThemes1);
+    color: var(--ColorThemes3);
+    width: 100%;
+    min-width: 70px;
+    padding: 0 4px;
+    height: calc(30px - 2px);
+    appearance: none;
+    -webkit-appearance: none;
+  }
+  .apartments_list > div > textarea {
+    border-radius: 6px;
+    font-size: 14px;
+    margin: 5px;
+    background-color: var(--ColorThemes0);
+    border: 1px solid var(--ColorThemes1);
+    color: var(--ColorThemes3);
+    width: calc(100% - 22px);
+    min-width: 70px;
+    padding: 5px;
+    min-height: 40px;
+    appearance: none;
+    resize: vertical;
+    -webkit-appearance: none;
+  }
+</style>
+
+<div class="page-card">
+  <div id="header">
+    <p id="status"></p>
+    <p id="hash"></p>
+  </div>
+
+  <div id="list"></div>
+</div>

web/lib/pages/card/script.js

@@ -0,0 +1,358 @@
+let socket, username;
+
+let listEntrances = []
+let listApartment = []
+
+let holdTimer;
+let startTime;
+
+const Card = {
+    init: async (type, id) => {
+        let html = await fetch('/lib/pages/card/index.html').then((response) => response.text());
+        app.innerHTML = html;
+
+        house = id;
+
+        if (socket) socket.close(1000, "Перезапуск соединения");
+
+        if (type == "house") {
+            getEntrances();
+            start(makeid(6));
+        }
+
+        document.addEventListener("mousedown", handleStart);
+        document.addEventListener("touchstart", handleStart);
+        document.addEventListener("mouseup", handleCancel);
+        document.addEventListener("mouseleave", handleCancel);
+        document.addEventListener("touchend", handleCancel);
+        document.addEventListener("touchcancel", handleCancel);
+
+        function handleStart(event) {
+            const button = event.target.closest(".hold-button");
+            if (!button) return;
+
+            // event.preventDefault();
+            startTime = Date.now();
+
+            holdTimer = setTimeout(() => {
+                console.log("Долгое нажатие на", button.name);
+                let number_id = button.name.split("-");
+                mess(Number(number_id[0]), Number(number_id[1]));
+            }, 1000);
+        }
+
+        function handleCancel() {
+            const holdDuration = Date.now() - startTime; // Считаем, сколько длилось нажатие
+
+            if (holdDuration < 1000) {
+                clearTimeout(holdTimer); // Если нажали менее 1 секунды, сбрасываем таймер
+            }
+        }
+    }
+}
+
+// let color_status = [
+//     "#000000",
+//     "#C16917",
+//     "#b10202",
+//     "#3d3d3d",
+//     "#11734b",
+//     "#6cc5fc",
+//     "#5a3286"
+// ];
+
+// let color_status = [
+//     ["#ffffff", "#000000"],
+//     ["#e7af32", "#ffffff"],
+//     ["#fc2a2a", "#ffffff"],
+//     ["#3d3d3d", "#ffffff"],
+//     ["#11a568", "#ffffff"],
+//     ["#6cc5fc", "#ffffff"],
+//     ["#b381eb", "#ffffff"]
+// ];
+
+let color_status = [
+    ["var(--ColorThemes2)", "var(--ColorThemes3)"],
+    ["#fbf1e0", "#ff8300"],
+    ["#fce3e2", "#ff0000"],
+    ["#d7ddec", "#2919bd"],
+    ["#d5e9dd", "#11a568"],
+    ["#d7ebfa", "#3fb4fc"],
+    ["#e8dbf5", "#b381eb"]
+];
+
+function start(name) {
+    if (!name) return;
+
+
+    document.getElementById("hash").innerText = `HASH: ${name}`
+    username = name;
+
+    let uuid = localStorage.getItem("uuid");
+    socket = new WebSocket(`${CONFIG.wss}?uuid=${uuid}`);
+
+    socket.onopen = function (e) {
+        console.log("[WebSocket | open] Соединение установлено");
+        document.getElementById("status").innerText = "WebSocket | open";
+
+        const message = {
+            event: 'connection',
+            id: getTimeInSeconds(),
+            date: getTimeInSeconds(),
+            uuid: uuid,
+            username: name,
+            data: {
+                id: 1,
+                entrance_id: 1,
+                apartment_number: 1,
+                title: "1",
+                group_number: 1,
+                status: 1,
+                description: "",
+                created_at: 1727541827,
+                updated_at: 1727541827
+            }
+        }
+
+        socket.send(JSON.stringify(message))
+    };
+
+    socket.onmessage = function (event) {
+        let data = JSON.parse(event.data)
+
+        if (data.event == 'connection') {
+            if (data.username == username) return
+
+            console.log(`Добавлен новый пользователь по имени ${data.username}`);
+        } else if (data.event == 'message') {
+            update(data);
+
+            if (data.username == username) return
+
+            console.log(`${data.username} пишет: `, data.data);
+        }
+    };
+
+    socket.onclose = function (event) {
+        if (event.wasClean) {
+            document.getElementById("status").innerText = "WebSocket | close"
+            console.log(`[WebSocket | close] Соединение закрыто чисто, код=${event.code} причина=${event.reason}`);
+        } else {
+            document.getElementById("status").innerText = "WebSocket | close"
+            console.log('[WebSocket | close] Соединение прервано');
+
+            // setTimeout(function() {
+            //     start(username);
+            //   }, 1000);
+
+            const result = confirm(`З'єднання розірвано! Перепідключитись?`);
+            if (result) {
+                getEntrances();
+                start(username);
+            }
+        }
+    };
+
+    socket.onerror = function (error) {
+        console.log(`[WebSocket | error]`);
+        document.getElementById("status").innerText = "WebSocket | error"
+    };
+}
+
+function mess(entrance_number, id, date_type) {
+    let sort_mode = localStorage.getItem('sort_mode') ?? true;
+    console.log(id, listApartment[entrance_number]);
+
+    const pos = listApartment[entrance_number].map(e => e.id).indexOf(id);
+    let apartment = listApartment[entrance_number][pos];
+
+    console.log(pos, apartment);
+
+
+    let status = document.getElementById(`status_${id}`);
+    let description = document.getElementById(`description_${id}`);
+    let date = new Date(document.getElementById(`date_${id}`).value);
+    const timestamp = date.getTime();
+
+    apartment.description = description.value;
+    apartment.status = Number(status.value);
+    apartment.updated_at = date_type ? getTimeInSeconds(timestamp) : getTimeInSeconds(),
+
+
+    status.style.backgroundColor = color_status[status.value][0];
+    status.style.color = color_status[status.value][1];
+    status.style.border = `1px solid ${color_status[status.value][1]}`;
+
+    let user_hash = localStorage.getItem('hash');
+
+    let message = {
+        event: 'message',
+        id: getTimeInSeconds(),
+        date: getTimeInSeconds(),
+        hash: user_hash,
+        username: username,
+        data: {
+            id: apartment.id,
+            entrance_id: apartment.entrance_id,
+            apartment_number: apartment.apartment_number,
+            title: apartment.title,
+            group_number: apartment.group_number,
+            status: apartment.status,
+            description: apartment.description,
+            updated_at: apartment.updated_at,
+        }
+    }
+
+    socket.send(JSON.stringify(message));
+
+    if (!date_type && sort_mode != 'false') sort(apartment.id, apartment.entrance_id);
+}
+
+function update(message) {
+    if (!document.getElementById(`status_${message.data.id}`)) return;
+
+    let now = new Date(message.data.updated_at);
+    now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
+
+    document.getElementById(`card_${message.data.id}`).style.backgroundColor = color_status[message.data.status][0];
+    document.getElementById(`card_${message.data.id}`).style.color = color_status[message.data.status][1];
+    document.getElementById(`card_${message.data.id}`).style.border = `1px solid ${color_status[message.data.status][1]}`;
+
+    document.getElementById(`status_${message.data.id}`).style.backgroundColor = color_status[message.data.status][0];
+    document.getElementById(`status_${message.data.id}`).style.color = color_status[message.data.status][1];
+    document.getElementById(`status_${message.data.id}`).style.border = `1px solid ${color_status[message.data.status][1]}`;
+
+
+
+    document.getElementById(`status_${message.data.id}`).value = message.data.status;
+    document.getElementById(`description_${message.data.id}`).value = message.data.description;
+    document.getElementById(`date_${message.data.id}`).value = now.toISOString().slice(0, 16);
+}
+
+function getEntrances(house_id = house) {
+    const uuid = localStorage.getItem('uuid');
+    const URL = `${CONFIG.api}/house/${house_id}/entrances`;
+    fetch(URL, {
+        method: 'GET',
+        headers: {
+            "Content-Type": "application/json",
+            "Authorization": uuid
+        }
+    })
+        .then(function (response) {
+            return response.json();
+        })
+        .then(function (data) {
+            listEntrances = data;
+
+            document.getElementById('list').innerHTML = "";
+
+            for (let i = 0; i < listEntrances.length; i++) {
+                const element = listEntrances[i];
+
+                let status = () => {
+                    if ((element.history.name == "Групова" || element.history.name == USER.name) && element.working) return "open";
+                    else if (USER.administrator.uuid || (USER.moderator.uuid && USER.moderator.can_manager_territory)) return "close";
+
+                    return "style='display: none;'"
+                }
+
+                let statusIcon = () => {
+                    if ((element.history.name == "Групова" || element.history.name == USER.name) && element.working) return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M 12 1 C 9.1277778 1 6.7189086 3.0461453 6.1230469 5.7871094 L 8.078125 6.2128906 C 8.4822632 4.3538547 10.072222 3 12 3 C 14.27619 3 16 4.7238095 16 7 L 16 8 L 6 8 C 4.9069372 8 4 8.9069372 4 10 L 4 20 C 4 21.093063 4.9069372 22 6 22 L 18 22 C 19.093063 22 20 21.093063 20 20 L 20 10 C 20 8.9069372 19.093063 8 18 8 L 18 7 C 18 3.6761905 15.32381 1 12 1 z M 6 10 L 18 10 L 18 20 L 6 20 L 6 10 z M 12 13 C 10.9 13 10 13.9 10 15 C 10 16.1 10.9 17 12 17 C 13.1 17 14 16.1 14 15 C 14 13.9 13.1 13 12 13 z"/></svg>'
+                    else return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">    <path d="M 12 1 C 8.6761905 1 6 3.6761905 6 7 L 6 8 C 4.9069372 8 4 8.9069372 4 10 L 4 20 C 4 21.093063 4.9069372 22 6 22 L 18 22 C 19.093063 22 20 21.093063 20 20 L 20 10 C 20 8.9069372 19.093063 8 18 8 L 18 7 C 18 3.6761905 15.32381 1 12 1 z M 12 3 C 14.27619 3 16 4.7238095 16 7 L 16 8 L 8 8 L 8 7 C 8 4.7238095 9.7238095 3 12 3 z M 6 10 L 18 10 L 18 20 L 6 20 L 6 10 z M 12 13 C 10.9 13 10 13.9 10 15 C 10 16.1 10.9 17 12 17 C 13.1 17 14 16.1 14 15 C 14 13.9 13.1 13 12 13 z"/></svg>'
+                }
+
+                document.getElementById('list').innerHTML += `
+                    <details ${status()}>
+                        <summary>
+                            <p>${element.title}</p>
+                            ${statusIcon()}
+                        </summary>
+                        <div id="apartments_${element.id}" class="apartments_list">
+
+                        </div>
+                    </details>
+                `;
+                getApartment(element.id, element.entrance_number);
+
+                console.log(element);
+
+            }
+        })
+
+}
+
+function getApartment(entrance_id, entrance_number) {
+    const uuid = localStorage.getItem('uuid');
+    const URL = `${CONFIG.api}/apartment/${entrance_id}`;
+    fetch(URL, {
+        method: 'GET',
+        headers: {
+            "Content-Type": "application/json",
+            "Authorization": uuid
+        }
+    })
+        .then(function (response) {
+            return response.json();
+        })
+        .then(function (data) {
+            listApartment[entrance_number] = data;
+
+            data.sort((a, b) => a.apartment_number - b.apartment_number);
+
+            data.sort((a, b) => a.updated_at - b.updated_at);
+
+            for (let i = 0; i < data.length; i++) {
+                const element = data[i];
+
+                let now = new Date(element.updated_at);
+                now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
+                now = now.toISOString().slice(0, 16)
+
+                let disabled = () => {
+                    if (USER.administrator.uuid || (USER.moderator.uuid && USER.moderator.can_manager_territory)) return '';
+                    else if (element.status == 2) return "disabled";
+                }
+
+                document.getElementById(`apartments_${entrance_id}`).innerHTML += `
+                    <div id="card_${element.id}" style="border: 1px solid ${color_status[element.status][1]};background: ${color_status[element.status][0]};color: ${color_status[element.status][1]};">
+                        <div class="info">
+                            <span>кв.${element.title}</span>
+                            <select id="status_${element.id}" onchange="mess(${entrance_number}, ${element.id})" style="background-color: ${color_status[element.status][0]}; color: ${color_status[element.status][1]}; border: 1px solid ${color_status[element.status][1]};" ${disabled()}>
+                                <option value="0" ${element.status == 0 ? "selected" : ""}></option>
+                                <option value="1" ${element.status == 1 ? "selected" : ""}>Відмова</option>
+                                <option value="2" ${element.status == 2 ? "selected" : ""}>Не заходити (Груба відмова)</option>
+                                <option value="3" ${element.status == 3 ? "selected" : ""}>Нема домофона</option>
+                                <option value="4" ${element.status == 4 ? "selected" : ""}>Повторна відвідина</option>
+                                <option value="5" ${element.status == 5 ? "selected" : ""}>Немає вдома</option>
+                                <option value="6" ${element.status == 6 ? "selected" : ""}>Свідки Єгови</option> 
+                            </select>
+                            <input onchange="mess(${entrance_number}, ${element.id}, true)" name="${entrance_number}-${element.id}" class="hold-button" type="datetime-local" id="date_${element.id}" placeholder="Дата" value="${element.updated_at ? now : ""}" ${disabled()} style="max-width: 170px;">
+                        </div>
+                        <textarea onchange="mess(${entrance_number}, ${element.id}, true)" id="description_${element.id}"  placeholder="Нотатки..." ${disabled()}}>${element.description ?? ""}</textarea>
+                    </div>
+                `;
+            }
+        })
+
+}
+
+function sort(id, entrance_id) {
+    let child = document.getElementById(`card_${id}`);
+
+    document.getElementById(`apartments_${entrance_id}`).removeChild(child);
+
+    document.getElementById(`apartments_${entrance_id}`).append(child);
+
+    child.style.border = "1px solid var(--PrimaryColor)";
+}
+
+function getTimeInSeconds(time = Date.now()) {
+    // Если время больше 10 знаков (это значит, что время в миллисекундах)
+    if (time.toString().length < 10) {
+        // Округляем до секунд, убирая последние 3 цифры (миллисекунды)
+        time = Math.floor(time * 1000);
+    }
+
+    return time;
+}

web/lib/pages/card/style.css

@@ -0,0 +1,6 @@
+.page-card {
+    width: calc(100% - 40px);
+    display: flex;
+    flex-direction: column;
+    margin: 20px 20px 0 20px;
+}