452 lines
22 KiB
JavaScript
452 lines
22 KiB
JavaScript
|
||
const Card = {
|
||
socket: null,
|
||
reconnectTimeout: null,
|
||
reconnectNumber: 0,
|
||
username: null,
|
||
listEntrances: [],
|
||
listApartment: [],
|
||
color_status: [
|
||
["var(--ColorThemes2)", "var(--ColorThemes3)"],
|
||
["#fbf1e0", "#ff8300"],
|
||
["#fce3e2", "#ff0000"],
|
||
["#d7ddec", "#2919bd"],
|
||
["#d5e9dd", "#11a568"],
|
||
["#d7ebfa", "#3fb4fc"],
|
||
["#e8dbf5", "#b381eb"]
|
||
],
|
||
init: async (type, id) => {
|
||
let html = await fetch('/lib/pages/card/index.html').then((response) => response.text());
|
||
app.innerHTML = html;
|
||
|
||
house = id;
|
||
|
||
if (Card.socket) Card.socket.close(1000, "Перезапуск соединения");
|
||
|
||
Card.sort(localStorage.getItem('sort_mode'), false)
|
||
|
||
if (type == "house") {
|
||
Card.getEntrances({ update: false });
|
||
Card.cloud.start(makeid(6));
|
||
}
|
||
|
||
|
||
// Закриття вікно popup при натисканні за його межі
|
||
const block_card = document.getElementById('card-new-date');
|
||
const mess = block_card.querySelector('.mess');
|
||
if (!block_card.dataset.listenerAdded) {
|
||
block_card.addEventListener('click', function (event) {
|
||
if (!mess.contains(event.target)) {
|
||
Card.dateEditor.close();
|
||
}
|
||
});
|
||
block_card.dataset.listenerAdded = 'true';
|
||
}
|
||
},
|
||
cloud: {
|
||
status: (mode) => {
|
||
|
||
let cloud_1 = document.getElementById('cloud_1');
|
||
let cloud_2 = document.getElementById('cloud_2');
|
||
let cloud_3 = document.getElementById('cloud_3');
|
||
|
||
switch (mode) {
|
||
case 'sync':
|
||
cloud_1.setAttribute('data-state', 'active');
|
||
cloud_2.setAttribute('data-state', '');
|
||
cloud_3.setAttribute('data-state', '');
|
||
break;
|
||
case 'ok':
|
||
cloud_1.setAttribute('data-state', '');
|
||
cloud_2.setAttribute('data-state', 'active');
|
||
cloud_3.setAttribute('data-state', '');
|
||
break;
|
||
case 'err':
|
||
cloud_1.setAttribute('data-state', '');
|
||
cloud_2.setAttribute('data-state', '');
|
||
cloud_3.setAttribute('data-state', 'active');
|
||
break;
|
||
}
|
||
},
|
||
start: (name) => {
|
||
if (!name) return;
|
||
|
||
Card.username = name;
|
||
|
||
let uuid = localStorage.getItem("uuid");
|
||
Card.socket = new WebSocket(`${CONFIG.wss}?uuid=${uuid}`);
|
||
|
||
Card.socket.onopen = function (e) {
|
||
console.log("[WebSocket | open] З'єднання встановлено");
|
||
Card.cloud.status('ok');
|
||
|
||
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
|
||
}
|
||
}
|
||
|
||
Card.socket.send(JSON.stringify(message));
|
||
|
||
Card.reconnectNumber = 0;
|
||
clearTimeout(Card.reconnectTimeout);
|
||
};
|
||
|
||
Card.socket.onmessage = function (event) {
|
||
let data = JSON.parse(event.data)
|
||
|
||
if (data.event == 'connection') {
|
||
if (data.username == Card.username) return
|
||
|
||
console.log(`Доданий новий користувач на ім'я ${data.username}`);
|
||
} else if (data.event == 'message') {
|
||
Card.cloud.update(data);
|
||
|
||
if (data.username == Card.username) return
|
||
|
||
console.log(`${data.username} пише: `, data.data);
|
||
}
|
||
};
|
||
|
||
Card.socket.onclose = function (event) {
|
||
if (event.wasClean) {
|
||
console.log(`[WebSocket | close] З'єднання закрито чисто, код =${event.code} причина=${event.reason}`);
|
||
Card.cloud.status('err');
|
||
} else {
|
||
console.log(`[WebSocket | close] З'єднання перервано`);
|
||
Card.cloud.status('err');
|
||
|
||
Card.reconnectTimeout = setTimeout(function () {
|
||
Card.reconnectNumber++;
|
||
if (Card.reconnectNumber > 5) {
|
||
Card.reconnectNumber = 0;
|
||
clearTimeout(Card.reconnectTimeout);
|
||
|
||
const result = confirm(`З'єднання розірвано! Перепідключитись?`);
|
||
if (result) {
|
||
Card.getEntrances({ update: true });
|
||
Card.cloud.start(Card.username);
|
||
}
|
||
} else {
|
||
Card.getEntrances({ update: true });
|
||
Card.cloud.start(Card.username);
|
||
}
|
||
}, 500);
|
||
}
|
||
};
|
||
|
||
Card.socket.onerror = function (error) {
|
||
console.log(`[WebSocket | error]`);
|
||
Card.cloud.status('err');
|
||
};
|
||
},
|
||
mess: ({ number, id, update, time }) => {
|
||
const pos = Card.listApartment[number].map(e => e.id).indexOf(id);
|
||
let apartment = Card.listApartment[number][pos];
|
||
|
||
|
||
let status = document.getElementById(`status_${id}`);
|
||
let description = document.getElementById(`description_${id}`);
|
||
|
||
let date = () => {
|
||
if (!update && !time) {
|
||
return apartment.updated_at;
|
||
} else if (update && !time) {
|
||
return getTimeInSeconds();
|
||
} else if (update && time) {
|
||
return getTimeInSeconds(time);
|
||
}
|
||
}
|
||
|
||
apartment.description = description.value;
|
||
apartment.status = Number(status.value);
|
||
apartment.updated_at = date();
|
||
|
||
status.style.backgroundColor = Card.color_status[status.value][0];
|
||
status.style.color = Card.color_status[status.value][1];
|
||
status.style.border = `1px solid ${Card.color_status[status.value][1]}`;
|
||
|
||
let message = {
|
||
event: 'message',
|
||
id: getTimeInSeconds(),
|
||
date: getTimeInSeconds(),
|
||
|
||
username: Card.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,
|
||
sheep_id: USER.id
|
||
}
|
||
}
|
||
|
||
if (Card.socket && Card.socket.readyState === WebSocket.OPEN) {
|
||
Card.socket.send(JSON.stringify(message));
|
||
} else {
|
||
console.warn("WebSocket не підключено. Повідомлення не надіслано.");
|
||
const result = confirm(`З'єднання розірвано! Перепідключитись?`);
|
||
if (result) {
|
||
Card.getEntrances({ update: true });
|
||
Card.start(Card.username);
|
||
}
|
||
}
|
||
|
||
if (update) {
|
||
let sort_mode = localStorage.getItem('sort_mode') ?? '1';
|
||
|
||
if (sort_mode == '3') {
|
||
let child = document.getElementById(`card_${apartment.id}`);
|
||
document.getElementById(`apartments_${apartment.entrance_id}`).removeChild(child);
|
||
document.getElementById(`apartments_${apartment.entrance_id}`).append(child);
|
||
child.style.border = "1px solid var(--PrimaryColor)";
|
||
} else if (sort_mode == '4') {
|
||
let child = document.getElementById(`card_${apartment.id}`);
|
||
document.getElementById(`apartments_${apartment.entrance_id}`).removeChild(child);
|
||
document.getElementById(`apartments_${apartment.entrance_id}`).prepend(child);
|
||
child.style.border = "1px solid var(--PrimaryColor)";
|
||
}
|
||
}
|
||
},
|
||
update: (message) => {
|
||
if (!document.getElementById(`status_${message.data.id}`)) return;
|
||
|
||
document.getElementById(`card_${message.data.id}`).style.backgroundColor = Card.color_status[message.data.status][0];
|
||
document.getElementById(`card_${message.data.id}`).style.color = Card.color_status[message.data.status][1];
|
||
document.getElementById(`card_${message.data.id}`).style.border = `1px solid ${Card.color_status[message.data.status][1]}`;
|
||
|
||
document.getElementById(`status_${message.data.id}`).style.backgroundColor = Card.color_status[message.data.status][0];
|
||
document.getElementById(`status_${message.data.id}`).style.color = Card.color_status[message.data.status][1];
|
||
document.getElementById(`status_${message.data.id}`).style.border = `1px solid ${Card.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_text_${message.data.id}`).innerText = formattedDateTime(message.data.updated_at);
|
||
}
|
||
},
|
||
getEntrances: ({ house_id = house, update = false }) => {
|
||
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) {
|
||
Card.listEntrances = data;
|
||
|
||
const element_list = document.getElementById('list');
|
||
|
||
if (update) {
|
||
for (let i = 0; i < Card.listEntrances.length; i++) {
|
||
const element = Card.listEntrances[i];
|
||
Card.getApartment({ id: element.id, number: element.entrance_number, update: update });
|
||
}
|
||
} else {
|
||
element_list.innerHTML = "";
|
||
for (let i = 0; i < Card.listEntrances.length; i++) {
|
||
const element = Card.listEntrances[i];
|
||
|
||
let status = () => {
|
||
if ((element.history.name == "Групова" || element.history.name == USER.name) && element.working) return "open";
|
||
else if (USER.mode == 2 || (USER.mode == 1 && USER.possibilities.can_manager_territory)) return "close";
|
||
else 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>'
|
||
}
|
||
|
||
element_list.innerHTML += `
|
||
<details ${status()}>
|
||
<summary>
|
||
<p>${element.title}</p>
|
||
${statusIcon()}
|
||
</summary>
|
||
<div id="apartments_${element.id}" class="apartments_list">
|
||
|
||
</div>
|
||
</details>
|
||
`;
|
||
Card.getApartment({ id: element.id, number: element.entrance_number, update: false });
|
||
}
|
||
}
|
||
})
|
||
|
||
},
|
||
|
||
getApartment: ({ id, number, update }) => {
|
||
const uuid = localStorage.getItem('uuid');
|
||
const URL = `${CONFIG.api}/apartment/${id}`;
|
||
fetch(URL, {
|
||
method: 'GET',
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
"Authorization": uuid
|
||
}
|
||
})
|
||
.then(function (response) {
|
||
return response.json();
|
||
})
|
||
.then(function (data) {
|
||
Card.listApartment[number] = data;
|
||
|
||
if (update) {
|
||
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)
|
||
|
||
document.getElementById(`card_${element.id}`).setAttribute('style', `border: 1px solid ${Card.color_status[element.status][1]};background: ${Card.color_status[element.status][0]};color: ${Card.color_status[element.status][1]};`);
|
||
document.getElementById(`status_${element.id}`).value = element.status;
|
||
document.getElementById(`status_${element.id}`).setAttribute('style', `background-color: ${Card.color_status[element.status][0]}; color: ${Card.color_status[element.status][1]}; border: 1px solid ${Card.color_status[element.status][1]};`);
|
||
document.getElementById(`date_${element.id}`).setAttribute('onclick', `Card.dateEditor.open({id: ${element.id}, number: ${number}, updated_at: ${element.updated_at}})`);
|
||
document.getElementById(`date_text_${element.id}`).innerText = element.updated_at ? formattedDateTime(element.updated_at) : "0.0.0000 00:00";
|
||
document.getElementById(`description_${element.id}`).innerText = element.description ?? "";
|
||
}
|
||
} else {
|
||
let sort_mode = localStorage.getItem('sort_mode') ?? 1;
|
||
|
||
if (sort_mode == "1")
|
||
data.sort((a, b) => a.apartment_number - b.apartment_number);
|
||
else if (sort_mode == "2")
|
||
data.sort((a, b) => b.apartment_number - a.apartment_number);
|
||
else if (sort_mode == "3")
|
||
data.sort((a, b) => a.updated_at - b.updated_at);
|
||
else if (sort_mode == "4")
|
||
data.sort((a, b) => b.updated_at - a.updated_at);
|
||
else
|
||
data.sort((a, b) => a.apartment_number - b.apartment_number);
|
||
|
||
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.possibilities.can_manager_territory) return '';
|
||
else if (element.status == 2) return "disabled";
|
||
}
|
||
|
||
document.getElementById(`apartments_${id}`).innerHTML += `
|
||
<div id="card_${element.id}" style="border: 1px solid ${Card.color_status[element.status][1]};background: ${Card.color_status[element.status][0]};color: ${Card.color_status[element.status][1]};">
|
||
<div class="info">
|
||
<span>кв.${element.title}</span>
|
||
<select id="status_${element.id}" onchange="Card.cloud.mess({ number: ${number}, id: ${element.id}, update: true})" style="background-color: ${Card.color_status[element.status][0]}; color: ${Card.color_status[element.status][1]}; border: 1px solid ${Card.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>
|
||
<button placeholder="Дата" id="date_${element.id}" onclick="Card.dateEditor.open({id: ${element.id}, number: ${number}, updated_at: ${element.updated_at}})" ${disabled()}>
|
||
<p id="date_text_${element.id}">${element.updated_at ? formattedDateTime(element.updated_at) : "0.0.0000 00:00"}</p>
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
|
||
<path d="M 22.828125 3 C 22.316375 3 21.804562 3.1954375 21.414062 3.5859375 L 19 6 L 24 11 L 26.414062 8.5859375 C 27.195062 7.8049375 27.195062 6.5388125 26.414062 5.7578125 L 24.242188 3.5859375 C 23.851688 3.1954375 23.339875 3 22.828125 3 z M 17 8 L 5.2597656 19.740234 C 5.2597656 19.740234 6.1775313 19.658 6.5195312 20 C 6.8615312 20.342 6.58 22.58 7 23 C 7.42 23.42 9.6438906 23.124359 9.9628906 23.443359 C 10.281891 23.762359 10.259766 24.740234 10.259766 24.740234 L 22 13 L 17 8 z M 4 23 L 3.0566406 25.671875 A 1 1 0 0 0 3 26 A 1 1 0 0 0 4 27 A 1 1 0 0 0 4.328125 26.943359 A 1 1 0 0 0 4.3378906 26.939453 L 4.3632812 26.931641 A 1 1 0 0 0 4.3691406 26.927734 L 7 26 L 5.5 24.5 L 4 23 z"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<textarea onchange="Card.cloud.mess({ number: ${number}, id: ${element.id}})" id="description_${element.id}" placeholder="Нотатки..." ${disabled()}}>${element.description ?? ""}</textarea>
|
||
</div>
|
||
`;
|
||
}
|
||
}
|
||
})
|
||
|
||
},
|
||
sort: (mode, load) => {
|
||
const sortIds = ['sort_1', 'sort_2', 'sort_3', 'sort_4'];
|
||
|
||
sortIds.forEach(id => {
|
||
const el = document.getElementById(id);
|
||
if (el) el.setAttribute('data-state', '');
|
||
});
|
||
|
||
let index = parseInt(mode, 10);
|
||
if (isNaN(index) || index < 1 || index > 4) index = 1;
|
||
|
||
const activeEl = document.getElementById(`sort_${index}`);
|
||
if (activeEl) activeEl.setAttribute('data-state', 'active');
|
||
|
||
localStorage.setItem('sort_mode', index.toString());
|
||
|
||
if (!load) Card.getEntrances({ update: false });
|
||
},
|
||
dateEditor: {
|
||
open: ({ id, number, updated_at }) => {
|
||
const block = document.getElementById('card-new-date');
|
||
const card_new_date_input = document.getElementById('card-new-date-input');
|
||
const card_new_date_button = document.getElementById('card-new-date-button');
|
||
|
||
let now = new Date(updated_at);
|
||
now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
|
||
now = now.toISOString().slice(0, 16)
|
||
|
||
card_new_date_input.value = now;
|
||
card_new_date_input.setAttribute("onchange", `Card.dateEditor.edit({ id: ${id}, number: ${number} })`)
|
||
card_new_date_button.setAttribute("onclick", `Card.dateEditor.edit({ id: ${id}, number: ${number}, type: 'now'})`)
|
||
|
||
block.style.display = "";
|
||
setTimeout(() => {
|
||
block.style.opacity = "1";
|
||
}, 100)
|
||
|
||
},
|
||
close: () => {
|
||
const block = document.getElementById('card-new-date');
|
||
|
||
block.style.opacity = "0";
|
||
setTimeout(() => {
|
||
block.style.display = "none";
|
||
}, 200)
|
||
},
|
||
edit: ({ id, number, type }) => {
|
||
const card_new_date_input = document.getElementById('card-new-date-input');
|
||
|
||
if (type == "now") {
|
||
Card.cloud.mess({ number: number, id: id, update: true });
|
||
} else {
|
||
if (card_new_date_input.value) {
|
||
let date = new Date(card_new_date_input.value);
|
||
const timestamp = date.getTime();
|
||
Card.cloud.mess({ number: number, id: id, update: true, time: timestamp });
|
||
} else {
|
||
Card.cloud.mess({ number: number, id: id });
|
||
}
|
||
}
|
||
|
||
Card.dateEditor.close();
|
||
}
|
||
}
|
||
} |