304 lines
12 KiB
JavaScript
304 lines
12 KiB
JavaScript
let socket, username;
|
||
|
||
let listEntrances = []
|
||
let listApartment = []
|
||
|
||
let statusD = document.getElementById("status");
|
||
let hashD = document.getElementById("hash");
|
||
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const share_hash = urlParams.get('share_hash');
|
||
|
||
let house = urlParams.get('id') ?? 81;
|
||
let entrance = 1;
|
||
let group_number = 1;
|
||
|
||
const api = "https://sheep-service.com";
|
||
const wss = "wss://sheep-service.com/ws";
|
||
|
||
// 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 = [
|
||
["#ffffff", "#eaebef"],
|
||
["#fbf1e0", "#ff8300"],
|
||
["#fce3e2", "#ff0000"],
|
||
["#e2e0e0", "#3d3d3d"],
|
||
["#d5e9dd", "#11a568"],
|
||
["#d7ebfa", "#3fb4fc"],
|
||
["#e8dbf5", "#b381eb"]
|
||
];
|
||
|
||
function makeid(length) {
|
||
let result = '';
|
||
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||
const charactersLength = characters.length;
|
||
let counter = 0;
|
||
while (counter < length) {
|
||
result += characters.charAt(Math.floor(Math.random() * charactersLength));
|
||
counter += 1;
|
||
}
|
||
return result;
|
||
}
|
||
|
||
function start(name) {
|
||
if (!hash) return;
|
||
|
||
|
||
hashD.innerText = `HASH: ${name}`
|
||
username = name;
|
||
|
||
socket = new WebSocket(`${wss}?share_hash=${share_hash}`);
|
||
|
||
let user_hash = localStorage.getItem('hash') ?? share_hash;
|
||
|
||
socket.onopen = function (e) {
|
||
console.log("[WebSocket | open] Соединение установлено");
|
||
statusD.innerText = "WebSocket | open";
|
||
|
||
const message = {
|
||
event: 'connection',
|
||
id: getTimeInSeconds(),
|
||
date: getTimeInSeconds(),
|
||
hash: user_hash,
|
||
username: name,
|
||
data: {
|
||
id: 1,
|
||
entrance_id: 1,
|
||
apartment_number: "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) {
|
||
statusD.innerText = "WebSocket | close"
|
||
console.log(`[WebSocket | close] Соединение закрыто чисто, код=${event.code} причина=${event.reason}`);
|
||
} else {
|
||
statusD.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]`);
|
||
statusD.innerText = "WebSocket | error"
|
||
};
|
||
}
|
||
|
||
function mess(entrance_number, id, date_type) {
|
||
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') ?? share_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,
|
||
group_number: apartment.group_number,
|
||
status: apartment.status,
|
||
description: apartment.description,
|
||
updated_at: apartment.updated_at,
|
||
}
|
||
}
|
||
|
||
socket.send(JSON.stringify(message));
|
||
|
||
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(`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) {
|
||
let url = `${api}/api/house/${house_id}/entrances?share_hash=${share_hash}`;
|
||
fetch(url)
|
||
.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 == "Групова") 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 ${element.history.name == "Групова" ? "open" : "disabled"}>
|
||
<summary>
|
||
<p>${element.title}</p>
|
||
${status()}
|
||
</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) {
|
||
let url = `${api}/api/apartment/${entrance_id}?share_hash=${share_hash}`;
|
||
fetch(url)
|
||
.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)
|
||
|
||
document.getElementById(`apartments_${entrance_id}`).innerHTML += `
|
||
<div id="card_${element.id}">
|
||
<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]};" ${element.status == 2 ? "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})" type="text" name="description" id="description_${element.id}" placeholder="Нотатки..." value="${element.description ?? ""}" ${element.status == 2 ? "disabled" : ""}>
|
||
<input onchange="mess(${entrance_number}, ${element.id}, true)" type="datetime-local" name="date" id="date_${element.id}" placeholder="Дата" value="${element.updated_at ? now : ""}" ${element.status == 2 ? "disabled" : ""} style="max-width: 170px;">
|
||
</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;
|
||
}
|
||
|
||
getEntrances();
|
||
start(makeid(6));
|
||
|
||
|