diff --git a/web/lib/app.js b/web/lib/app.js
index 2257650..cb7e3eb 100644
--- a/web/lib/app.js
+++ b/web/lib/app.js
@@ -1,6 +1,10 @@
let USER = {};
+let page = "Home";
let swRegistration = null;
+// Реєструємо CustomElements
+const Notifier = document.getElementById('notif-manager');
+
// Определение ID главного блока
let app = document.getElementById('app');
@@ -59,7 +63,7 @@ window.addEventListener('load', async function () {
return response.json();
});
- console.log("USER Info: ", USER);
+ console.log("[APP] USER Info: ", USER);
if (USER.possibilities.can_view_sheeps) document.getElementById("li-sheeps").style.display = "";
@@ -72,13 +76,39 @@ window.addEventListener('load', async function () {
if (Cloud.socket) Cloud.socket.close(1000, "Перезапуск з'єднання");
Cloud.start();
-
+
editFontStyle();
Router.check().listen().delegateLinks();
+
+ setupFrontendMetrics();
}
});
+let offlineNode = null;
+window.addEventListener("offline", () => {
+ console.log("[APP] Інтернет зник");
+ offlineNode = Notifier.error({
+ title: 'Оффлайн',
+ text: 'Втрачено з\'єднання з інтернетом'
+ }, { timeout: 0, lock: true });
+});
+
+window.addEventListener("online", () => {
+ console.log("[APP] Інтернет з'явився");
+ if (offlineNode) {
+ Notifier._removeNode(offlineNode);
+ offlineNode = null;
+ }
+ Notifier.success({
+ title: 'Онлайн',
+ text: 'Інтернет знову працює'
+ }, { timeout: 3000 });
+
+ if (Cloud.socket) Cloud.socket.close(1000, "Перезапуск з'єднання");
+ Cloud.start();
+});
+
function editFontStyle() {
let fontSize = localStorage.getItem("fontSize")
? localStorage.getItem("fontSize")
@@ -153,7 +183,7 @@ document.getElementById("pwa-install-button").addEventListener("click", async ()
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
- console.log(`Результат встановлення PWA: ${outcome}`);
+ console.log(`[APP] Результат встановлення PWA: ${outcome}`);
closePopup();
});
@@ -172,28 +202,26 @@ function closePopup() {
if ('serviceWorker' in navigator) {
let refreshing = false;
+ let updateNode = null;
- const showUpdateBanner = sw => {
- const banner = document.getElementById('update_banner');
- if (!banner) return;
+ const updateCache = sw => {
+ if (updateNode) {
+ Notifier._removeNode(updateNode);
+ updateNode = null;
+ }
- banner.dataset.state = 'updateavailable';
- banner.querySelector('.headline').textContent = 'Доступне оновлення';
- banner.querySelector('.subhead').textContent = 'Натисніть, щоб оновити додаток до останньої версії!';
+ Notifier.warn({ title: `Завантаження оновлення`, text: `Додаток буде перезавантажено!` }, { timeout: 3000 });
- banner.addEventListener('click', () => {
- banner.querySelector('.headline').textContent = '';
- banner.querySelector('.subhead').textContent = '';
- banner.querySelector('#update_banner_icon').style.display = 'block';
-
- sw.postMessage('skipWaiting'); // активує новий SW
- sw.postMessage('updateCache'); // оновлює кеш
- });
+ sw.postMessage('skipWaiting'); // активує новий SW
+ sw.postMessage('updateCache'); // оновлює кеш
};
+
navigator.serviceWorker.register('/sw.js').then(reg => {
// якщо є waiting SW, показуємо банер
- if (reg.waiting) showUpdateBanner(reg.waiting);
+ if (reg.waiting) {
+ updateNode = Notifier.click({ title: `Доступне оновлення`, text: `Натисніть, щоб оновити додаток до останньої версії!` }, { type: 'info', f: () => updateCache(reg.waiting), timeout: 0 });
+ }
// слідкуємо за новим воркером
reg.addEventListener('updatefound', () => {
@@ -202,7 +230,7 @@ if ('serviceWorker' in navigator) {
newWorker.addEventListener('statechange', () => {
if (newWorker.state === 'installed' && reg.waiting) {
- showUpdateBanner(reg.waiting); // лише показ банера
+ updateNode = Notifier.click({ title: `Доступне оновлення`, text: `Натисніть, щоб оновити додаток до останньої версії!` }, { type: 'info', f: () => updateCache(reg.waiting), timeout: 0 });
}
});
});
@@ -213,5 +241,5 @@ if ('serviceWorker' in navigator) {
window.location.reload(); // відбувається ТІЛЬКИ після skipWaiting
});
- }).catch(err => console.error('Помилка реєстрації SW:', err));
+ }).catch(err => console.error('[ServiceWorker] Помилка реєстрації SW:', err));
}
\ No newline at end of file
diff --git a/web/lib/components/cloud.js b/web/lib/components/cloud.js
index f159636..8164139 100644
--- a/web/lib/components/cloud.js
+++ b/web/lib/components/cloud.js
@@ -9,11 +9,13 @@ const Cloud = {
Cloud.status = 'sync';
const uuid = localStorage.getItem("uuid");
+ if(!navigator.onLine) alert("[APP] Інтернет з'єднання відсутнє!")
+
if (Cloud.socket && Cloud.socket.readyState <= 1) return;
const ws = new WebSocket(CONFIG.wss, uuid);
Cloud.socket = ws;
-
+
ws.onopen = () => {
console.log("[WebSocket] З'єднання встановлено");
Cloud.status = 'ok';
@@ -25,10 +27,10 @@ const Cloud = {
}
}));
- if(Cloud.reconnecting == true) {
- Router.navigate(location.pathname);
+ if (Cloud.reconnecting == true) {
+ Cloud.reconnect();
}
-
+
Cloud.reconnecting = true;
Cloud.reconnectAttempts = 0;
clearTimeout(Cloud.reconnectTimeout);
@@ -37,7 +39,7 @@ const Cloud = {
ws.onmessage = (e) => {
const data = JSON.parse(e.data);
if (data.event === 'user_connected' && data.user.id !== USER.id) {
- console.log(`Новий користувач: ${data.user.name}`);
+ console.log(`[WebSocket] Новий користувач: ${data.user.name}`);
}
if (data.event === 'message') {
switch (data.type) {
@@ -54,7 +56,7 @@ const Cloud = {
case "stand_update":
Stand_card.cloud.update(data);
break;
-
+
default:
break;
}
@@ -65,7 +67,7 @@ const Cloud = {
console.warn("[WebSocket] З'єднання розірвано");
Cloud.status = 'err';
- if (!Cloud.reconnecting) return; // защита от дублирования
+ if (!Cloud.reconnecting) return; // захист від дублювання
if (Cloud.reconnectAttempts < 5) {
Cloud.reconnectAttempts++;
@@ -73,7 +75,7 @@ const Cloud = {
Cloud.reconnectTimeout = setTimeout(() => {
Cloud.start();
- }, 1000);
+ }, 500);
} else {
Cloud.reconnecting = false;
@@ -90,6 +92,19 @@ const Cloud = {
ws.onerror = (err) => {
console.error("[WebSocket] Помилка", err);
Cloud.status = 'err';
+ ws.close();
};
},
+
+ async reconnect(){
+ switch (page) {
+ case "Territory_card":
+ Territory_card.reload();
+ break;
+
+ default:
+ Router.navigate(location.pathname);
+ break;
+ }
+ }
}
\ No newline at end of file
diff --git a/web/lib/components/metrics.js b/web/lib/components/metrics.js
new file mode 100644
index 0000000..0a9d93e
--- /dev/null
+++ b/web/lib/components/metrics.js
@@ -0,0 +1,56 @@
+let mws;
+const RECONNECT_INTERVAL = 3000;
+let isConnectedMetrics = false;
+
+function setupFrontendMetrics() {
+ console.log("[Metrics] Спроба підключення до метрик...");
+ mws = new WebSocket(CONFIG.metrics);
+
+ mws.onopen = () => {
+ console.log("[Metrics] З'єднання встановлено");
+ isConnectedMetrics = true;
+
+ // Відправляємо один раз навігацію та ресурси
+ sendMetrics();
+ };
+
+ mws.onclose = () => {
+ console.warn("[Metrics] З'єднання розірвано");
+ console.log(`[Metrics] Спроба перепідключення`);
+ isConnectedMetrics = false;
+ // Спроба перепідключення через заданий інтервал
+ setTimeout(setupFrontendMetrics, RECONNECT_INTERVAL);
+ };
+
+ mws.onerror = (err) => {
+ console.error("[Metrics] Помилка", err);
+ mws.close(); // Примусово закриваємо для запуску логіки перепідключення
+ };
+}
+
+async function sendMetrics() {
+ if (isConnectedMetrics) {
+ const perf = performance;
+
+ const payload = {
+ type: "frontend_metrics",
+ memory: perf.memory || null,
+ resources: perf.getEntriesByType("resource").slice(0, 500),
+ id: USER.id
+ };
+ mws.send(JSON.stringify(payload));
+ }
+}
+
+window.addEventListener('popstate', () => {
+ console.log("[Metrics] Запуск sendMetrics після popstate");
+ sendMetrics();
+});
+
+window.addEventListener('click', (e) => {
+ const target = e.target.closest('[data-route]');
+ if (!target || !target.href) return;
+
+ console.log("[Metrics] Запуск sendMetrics після click");
+ sendMetrics();
+});
\ No newline at end of file
diff --git a/web/lib/components/webPush.js b/web/lib/components/webPush.js
index 14b329b..1b4f9fb 100644
--- a/web/lib/components/webPush.js
+++ b/web/lib/components/webPush.js
@@ -2,7 +2,7 @@
const webPush = {
async init() {
if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
- console.error('Push повідомлення не підтримуються');
+ console.error('[WebPush] Push повідомлення не підтримуються');
return;
}
@@ -37,7 +37,7 @@ const webPush = {
// Запитуємо дозвіл
const permission = await Notification.requestPermission();
if (permission !== 'granted') {
- console.warn('Push повідомлення заборонено користувачем');
+ console.warn('[WebPush] Push повідомлення заборонено користувачем');
return;
}
@@ -63,15 +63,15 @@ const webPush = {
body: JSON.stringify({ subscription, device: deviceInfo })
});
- console.log('Push підписка готова:', subscription);
+ console.log('[WebPush] Push підписка готова:', subscription);
- console.log('Створено нову підписку');
+ console.log('[WebPush] Створено нову підписку');
} else {
- console.log('Підписка вже існує');
+ console.log('[WebPush] Підписка вже існує');
}
} catch (err) {
- console.error('Помилка ініціалізації push:', err);
+ console.error('[WebPush] Помилка ініціалізації push:', err);
}
},
@@ -85,7 +85,7 @@ const webPush = {
const success = await subscription.unsubscribe();
if (success) {
- console.log("Локальна підписка скасована");
+ console.log("[WebPush] Локальна підписка скасована");
// повідомляємо сервер
await fetch(`${CONFIG.api}push//unsubscribe`, {
@@ -98,7 +98,7 @@ const webPush = {
});
}
} else {
- console.log("Підписки немає");
+ console.log("[WebPush] Підписки немає");
}
}
}
\ No newline at end of file
diff --git a/web/lib/customElements/notification.js b/web/lib/customElements/notification.js
new file mode 100644
index 0000000..8e1103f
--- /dev/null
+++ b/web/lib/customElements/notification.js
@@ -0,0 +1,326 @@
+class AppNotificationContainer extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({ mode: 'open' });
+
+ // Настройки по умолчанию
+ this._timeout = 4000;
+ this._maxVisible = 5;
+ this._position = 'top-right';
+ this._mobileBottomEnabled = false;
+
+ this._container = document.createElement('div');
+ this._container.className = 'app-notification-container';
+ this.shadowRoot.appendChild(this._container);
+
+ this._insertStyles();
+
+ this._icons = {
+ info: `
`,
+ success: `
`,
+ warn: `
`,
+ error: `
`
+ };
+ }
+
+ static get observedAttributes() {
+ return ['timeout', 'max-visible', 'position', 'mobile-position'];
+ }
+
+ connectedCallback() {
+ this._updateSettings();
+ }
+
+ attributeChangedCallback(name, oldValue, newValue) {
+ if (oldValue !== newValue) {
+ this._updateSettings();
+ }
+ }
+
+ _updateSettings() {
+ this._position = this.getAttribute('position') || 'top-right';
+ this._maxVisible = parseInt(this.getAttribute('max-visible')) || 5;
+ this._timeout = parseInt(this.getAttribute('timeout')) || 4000;
+
+ const mobilePosAttr = this.getAttribute('mobile-position');
+ // Если атрибут установлен в 'bottom' или присутствует (как пустая строка, если это булевый атрибут)
+ this._mobileBottomEnabled = mobilePosAttr === 'bottom' || mobilePosAttr === '';
+
+ this._container.setAttribute('data-position', this._position);
+
+ this._applyMobileStyles();
+ }
+
+ /**
+ * Динамически применяет класс, который активирует мобильные стили "только снизу".
+ */
+ _applyMobileStyles() {
+ if (this._mobileBottomEnabled) {
+ this._container.classList.add('mobile-bottom');
+ } else {
+ this._container.classList.remove('mobile-bottom');
+ }
+ }
+
+ /**
+ * Публичный метод для изменения настройки мобильной позиции во время выполнения.
+ * @param {boolean} enable - true, чтобы принудительно устанавливать позицию снизу на мобильных, false, чтобы использовать обычные @media стили.
+ */
+ setMobileBottom(enable) {
+ this._mobileBottomEnabled = !!enable;
+ this._applyMobileStyles();
+ }
+
+ show(message, options = {}) {
+ const {
+ type = 'info',
+ timeout = this._timeout,
+ title,
+ onClick,
+ lock
+ } = options;
+
+ const content = typeof message === 'string'
+ ? { title: title || '', text: message }
+ : message;
+
+ while (this._container.children.length >= this._maxVisible) {
+ const first = this._container.firstElementChild;
+ if (first) first.remove();
+ else break;
+ }
+
+ const node = document.createElement('div');
+ node.className = `app-notification ${type}`;
+ if (onClick) node.style.cursor = "pointer"
+
+ const icon = document.createElement('div');
+ icon.className = 'icon';
+ icon.innerHTML = this._icons[type] || this._icons.info;
+
+ const body = document.createElement('div');
+ body.className = 'body';
+ if (content.title) {
+ const t = document.createElement('div');
+ t.className = 'title';
+ t.textContent = content.title;
+ body.appendChild(t);
+ }
+ const txt = document.createElement('div');
+ txt.className = 'text';
+ txt.textContent = content.text || '';
+ body.appendChild(txt);
+
+ node.appendChild(icon);
+ node.appendChild(body);
+
+ if (!onClick && !lock) {
+ const closeDiv = document.createElement('div');
+ closeDiv.className = 'blockClose';
+ node.appendChild(closeDiv);
+
+ const closeBtn = document.createElement('button');
+ closeBtn.className = 'close';
+ closeBtn.setAttribute('aria-label', 'Закрыть уведомление');
+ closeBtn.innerHTML = '
';
+ closeDiv.appendChild(closeBtn);
+ closeBtn.addEventListener('click', () => this._removeNode(node));
+ }
+
+ this._container.appendChild(node);
+ requestAnimationFrame(() => node.classList.add('show'));
+
+ let timer = null;
+ const startTimer = () => {
+ if (timeout === 0) return;
+ timer = setTimeout(() => this._removeNode(node), timeout);
+ };
+ const clearTimer = () => { if (timer) { clearTimeout(timer); timer = null; } };
+
+ node.addEventListener('mouseenter', clearTimer);
+ node.addEventListener('mouseleave', startTimer);
+
+ if (typeof onClick === 'function') {
+ node.addEventListener('click', () => {
+ try { onClick(); } catch (e) { }
+ this._removeNode(node);
+ });
+ }
+
+ startTimer();
+
+ return node;
+ }
+
+ _removeNode(node) {
+ if (!node || !node.parentElement) return;
+ node.classList.remove('show');
+ setTimeout(() => {
+ if (node && node.parentElement) node.parentElement.removeChild(node);
+ }, 200);
+ }
+
+ clearAll() {
+ if (!this._container) return;
+ Array.from(this._container.children).forEach(n => this._removeNode(n));
+ }
+
+ info(message, opts = {}) { return this.show(message, { ...opts, type: 'info' }); }
+ success(message, opts = {}) { return this.show(message, { ...opts, type: 'success' }); }
+ warn(message, opts = {}) { return this.show(message, { ...opts, type: 'warn' }); }
+ error(message, opts = {}) { return this.show(message, { ...opts, type: 'error' }); }
+ click(message, opts = {}) { return this.show(message, { ...opts, onClick: opts.f }); }
+
+
+ _insertStyles() {
+ const style = document.createElement('style');
+ style.textContent = `
+ .app-notification-container {
+ position: fixed;
+ z-index: 9999;
+ pointer-events: none;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ padding: 12px;
+ }
+ .app-notification-container[data-position="top-right"] { top: 8px; right: 8px; align-items: flex-end; }
+ .app-notification-container[data-position="top-left"] { top: 8px; left: 8px; align-items: flex-start; }
+ .app-notification-container[data-position="bottom-right"] { bottom: 8px; right: 8px; align-items: flex-end; }
+ .app-notification-container[data-position="bottom-left"] { bottom: 8px; left: 8px; align-items: flex-start; }
+
+ .app-notification {
+ pointer-events: auto;
+ min-width: 220px;
+ max-width: 360px;
+ background: #111;
+ color: #fff;
+ padding: 10px 12px 10px 12px;
+ border-radius: var(--border-radius, 8px);
+ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
+ font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
+ font-size: var(--FontSize2, 14px);
+ line-height: 1.2;
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ opacity: 0;
+ transform: translateY(-6px) scale(0.995);
+ transition: opacity .18s ease, transform .18s ease;
+ position: relative;
+ }
+ .app-notification.show {
+ opacity: 0.95;
+ transform: translateY(0) scale(1);
+ }
+ .app-notification .icon {
+ font-size: 18px;
+ width: 22px;
+ height: 22px;
+ display:flex;
+ align-items:center;
+ justify-content:center;
+ border-radius: calc(var(--border-radius, 8px) - 5px);
+ padding: 8px;
+ }
+ .app-notification .icon svg{
+ width: 20px;
+ height: 20px;
+ fill: #fff;
+ }
+ .app-notification .body { flex:1; }
+ .app-notification .title { font-weight: 600; margin-bottom: 4px; font-size: 13px; }
+ .app-notification .blockClose {
+ width: 20px;
+ height: 20px;
+ }
+ .app-notification .blockClose .close {
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ margin-left: 8px;
+ background: transparent;
+ border: none;
+ color: inherit;
+ cursor: pointer;
+ padding: 0;
+ }
+ .app-notification .blockClose .close svg {
+ width: 15px;
+ height: 15px;
+ fill: #fff;
+ opacity: 0.8;
+ display: block;
+ }
+
+ .app-notification.info {
+ background: var(--ColorThemes3, #2196F3);
+ color: var(--ColorThemes0, #ffffff);
+ }
+ .app-notification.info .icon { background: var(--ColorThemes0, #ffffff); }
+ .app-notification.info .icon svg{fill: var(--ColorThemes3, #2196F3);}
+ .app-notification.info .close svg{fill: var(--ColorThemes0, #ffffff);}
+
+ .app-notification.success { background: #52ac56; }
+ .app-notification.success .icon { background: #6dc450; }
+ .app-notification.success .close svg{fill: #fff;}
+
+ .app-notification.warn { background: #d18515; }
+ .app-notification.warn .icon { background: #eaad57; }
+ .app-notification.warn .close svg{fill: #fff;}
+
+ .app-notification.error { background: #9c2424; }
+ .app-notification.error .icon { background: #c45050; }
+ .app-notification.error .close svg{fill: #fff;}
+
+ @media (max-width: 700px) {
+ .app-notification-container {
+ left: 0;
+ right: 0;
+ width: calc(100% - 24px);
+ align-items: center !important;
+ }
+ .app-notification-container .app-notification {
+ max-width: 95%;
+ min-width: 95%;
+ }
+
+ .app-notification-container.mobile-bottom {
+ top: auto;
+ bottom: 0;
+ }
+ }
+ `;
+ this.shadowRoot.appendChild(style);
+ }
+}
+
+customElements.define('app-notification-container', AppNotificationContainer);
+
+/*
+ */
+// const Notifier = document.getElementById('notif-manager');
+
+// 💡 Включить принудительную позицию снизу для мобильных
+// Notifier.setMobileBottom(true);
+
+// 💡 Отключить принудительную позицию снизу (вернется к поведению @media или position)
+// Notifier.setMobileBottom(false);
+
+
+// Пример использования
+
+// Notifier.info('Настройки мобильной позиции изменены.');
+// Notifier.info('Привет! Это ваше первое уведомление через Web Component.', {
+// title: 'Успешная инициализация',
+// onClick: () => alert('Вы кликнули!'),
+// lock: false
+// });
+// Notifier.success('Успешная операция.');
+// Notifier.error('Критическая ошибка!', { timeout: 0, lock: true });
+// Notifier.warn({ title: `Metrics`, text: `З'єднання встановлено` }, { timeout: 0 });
\ No newline at end of file
diff --git a/web/lib/customElements/territoryCard.js b/web/lib/customElements/territoryCard.js
new file mode 100644
index 0000000..199237c
--- /dev/null
+++ b/web/lib/customElements/territoryCard.js
@@ -0,0 +1,323 @@
+const appTerritoryCardStyles = new CSSStyleSheet();
+appTerritoryCardStyles.replaceSync(`
+ :host {
+ display: inline-block;
+ box-sizing: border-box;
+ width: 300px;
+ height: 200px;
+ }
+ @media (max-width: 2300px) {
+ :host {
+ width: calc((100% / 5) - 40px);
+ }
+ }
+
+ @media (max-width: 1960px) {
+ :host {
+ width: calc((100% / 4) - 40px);
+ }
+ }
+
+ @media (max-width: 1640px) {
+ :host {
+ width: calc((100% / 3) - 40px);
+ }
+ }
+
+ @media (max-width: 1280px) {
+ :host {
+ width: calc((100% / 2) - 40px);
+ }
+ }
+
+ @media (max-width: 650px) {
+ :host {
+ width: 100%;
+ }
+ }
+ .card {
+ position: relative;
+ width: 100%;
+ height: 200px;
+ background-color: var(--ColorThemes2, #525151);
+ overflow: hidden;
+ cursor: pointer;
+ border-radius: calc(var(--border-radius, 15px) - 5px);
+ }
+ @media(hover: hover) {
+ .card:hover {
+ opacity: 0.8;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+ }
+ }
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ filter: blur(3px);
+ }
+ .contents {
+ position: relative;
+ z-index: 2;
+ background: rgb(64 64 64 / 0.7);
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ justify-content: space-between;
+ border-radius: calc(var(--border-radius, 15px) - 5px);
+ }
+ .address {
+ margin: 10px;
+ height: 35px;
+ display: flex;
+ background: var(--ColorThemes0, #1c1c19);
+ align-items: center;
+ justify-content: center;
+ font-size: var(--FontSize3, 14px);
+ color: var(--ColorThemes3, #f3f3f3);
+ border-radius: calc(var(--border-radius, 15px) - 5px - 4px);
+ position: relative;
+ overflow: hidden;
+ font-weight: 400;
+ }
+
+
+
+ /* Стили для режима 'sheep' */
+ .sheep {
+ margin: 10px;
+ max-height: 50px;
+ border-radius: calc(var(--border-radius, 15px) - 5px - 4px);
+ padding: 10px 0;
+ margin-top: 10px;
+ display: flex;
+ background: var(--PrimaryColor, #cb9e44);
+ align-items: center;
+ flex-direction: column;
+ justify-content: space-around;
+ }
+ .sheep span {
+ color: var(--PrimaryColorText, #2e2e2e);
+ font-size: var(--FontSize3, 14px);
+ font-weight: 400;
+ opacity: 0.8;
+ }
+ .sheep p {
+ color: var(--PrimaryColorText, #2e2e2e);
+ font-size: var(--FontSize4, 15px);
+ font-weight: 400;
+ margin: 5px 0 0 0;
+ }
+
+
+ /* Стили для режима 'info' (прогресс) */
+ .info {
+ margin: 10px;
+ }
+ .info > div {
+ position: relative;
+ background-color: var(--ColorThemes0, #1c1c19);;
+ border-radius: calc(var(--border-radius, 15px) - 5px - 4px);
+ overflow: hidden;
+ padding: 5px 10px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ min-height: 25px;
+ }
+ .info span {
+ z-index: 2;
+ font-size: var(--FontSize1, 12px);
+ color: var(--ColorThemes3, #f3f3f3);
+ }
+ .info p {
+ z-index: 2;
+ margin: 0;
+ font-weight: 500;
+ font-size: var(--FontSize3, 14px);
+ color: var(--ColorThemes3, #f3f3f3);
+ }
+ .progress {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ background-color: var(--PrimaryColor, #cb9e44);
+ transition: width 0.3s ease;
+ }
+ a {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 10;
+ }
+`);
+
+class AppTerritoryCard extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({ mode: 'open' });
+
+ if (this.shadowRoot.adoptedStyleSheets) {
+ this.shadowRoot.adoptedStyleSheets = [appTerritoryCardStyles];
+ }
+ }
+
+ // Определяем, какие атрибуты будем отслеживать
+ static get observedAttributes() {
+ return ['image', 'address', 'sheep', 'link', 'atWork', 'quantity'];
+ }
+
+ get image() {
+ return this.getAttribute('image');
+ }
+ set image(newValue) {
+ if (newValue === null) {
+ this.removeAttribute('image');
+ } else {
+ this.setAttribute('image', newValue);
+ }
+ }
+
+ get address() {
+ return this.getAttribute('address');
+ }
+ set address(newValue) {
+ if (newValue === null) {
+ this.removeAttribute('address');
+ } else {
+ this.setAttribute('address', newValue);
+ }
+ }
+
+ get sheep() {
+ return this.getAttribute('sheep');
+ }
+ set sheep(newValue) {
+ if (newValue === null) {
+ this.removeAttribute('sheep');
+ } else {
+ this.setAttribute('sheep', newValue);
+ }
+ }
+
+ get link() {
+ return this.getAttribute('link');
+ }
+ set link(newValue) {
+ if (newValue === null) {
+ this.removeAttribute('link');
+ } else {
+ this.setAttribute('link', newValue);
+ }
+ }
+
+
+ get atWork() {
+ return this.getAttribute('atWork');
+ }
+ set atWork(newValue) {
+ if (newValue === null) {
+ this.removeAttribute('atWork');
+ } else {
+ this.setAttribute('atWork', String(newValue));
+ }
+ }
+
+ get quantity() {
+ return this.getAttribute('quantity');
+ }
+ set quantity(newValue) {
+ if (newValue === null) {
+ this.removeAttribute('quantity');
+ } else {
+ this.setAttribute('quantity', String(newValue));
+ }
+ }
+
+ // Вызывается при добавлении элемента в DOM
+ connectedCallback() {
+ this.render();
+ }
+
+ // Вызывается при изменении одного из отслеживаемых атрибутов
+ attributeChangedCallback(name, oldValue, newValue) {
+ if (oldValue !== newValue) {
+ this.render();
+ }
+ }
+
+ render() {
+ const image = this.getAttribute('image') || '';
+ const address = this.getAttribute('address') || '';
+ const sheep = this.getAttribute('sheep'); // Может быть null или ""
+ const link = this.getAttribute('link') || '#';
+ const atWork = this.getAttribute('atWork'); // Может быть null
+ const quantity = this.getAttribute('quantity'); // Может быть null
+
+ // --- Логика определения контента ---
+ let contentHTML = '';
+ const isProgressMode = atWork !== null && quantity !== null && !isNaN(parseInt(atWork)) && !isNaN(parseInt(quantity));
+ const hasSheep = sheep !== null && sheep !== '';
+
+ if (isProgressMode) {
+ // Режим прогресса (свободные подъезды)
+ const atWorkNum = parseInt(atWork);
+ const quantityNum = parseInt(quantity);
+
+ const free = quantityNum - atWorkNum;
+ const progressPercent = quantityNum > 0 ? (atWorkNum / quantityNum) * 100 : 100;
+
+ contentHTML = `
+
+
+
+
Вільні під'їзди:
+
${free} / ${quantityNum}
+
+
+ `;
+ } else if (sheep !== null && sheep !== '') {
+ // Режим ответственного
+ contentHTML = `
+
+
Територію опрацьовує:
+
${sheep}
+
+ `;
+ } else if (sheep !== null) {
+ // Режим "не опрацьовується"
+ contentHTML = `
+
+ Територія не опрацьовується
+
+ `;
+ }
+
+ // --- Сборка всего шаблона ---
+ this.shadowRoot.innerHTML = `
+
+
+
+
${address}
+ ${contentHTML}
+
+
+
+ `;
+ }
+}
+
+// Регистрируем веб-компонент
+customElements.define('app-territory-card', AppTerritoryCard);
+
+// document.getElementById('app-territory-card-1').setAttribute('sheep', 'test')
+
diff --git a/web/lib/pages/home/script.js b/web/lib/pages/home/script.js
index 38cc5eb..a3aae0a 100644
--- a/web/lib/pages/home/script.js
+++ b/web/lib/pages/home/script.js
@@ -27,8 +27,8 @@ const Home = {
return Home.personal.house.list;
},
setHTML: async () => {
- const list = Home.personal.house.list.length > 0
- ? Home.personal.house.list
+ 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)
@@ -53,8 +53,8 @@ const Home = {
return Home.personal.homestead.list;
},
setHTML: async () => {
- const list = Home.personal.homestead.list.length > 0
- ? Home.personal.homestead.list
+ 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)
@@ -81,8 +81,8 @@ const Home = {
return Home.group.house.list;
},
setHTML: async () => {
- const list = Home.group.house.list.length > 0
- ? Home.group.house.list
+ 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)
@@ -107,8 +107,8 @@ const Home = {
return Home.group.homestead.list;
},
setHTML: async () => {
- const list = Home.group.homestead.list.length > 0
- ? Home.group.homestead.list
+ 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)
@@ -124,18 +124,10 @@ const Home = {
const fragment = document.createDocumentFragment();
for (const el of list) {
- const card = document.createElement("div");
- card.className = "card";
-
- card.innerHTML = `
-
-
-
- `;
+ const card = document.createElement('app-territory-card');
+ card.image = `${CONFIG.web}cards/${type}/${type === "house" ? "T" : "H"}${el.id}.webp`;
+ card.address = `${el.title} ${el.number})`;
+ card.link = `/territory/card/${type}/${el.id}`;
fragment.appendChild(card);
}
diff --git a/web/lib/pages/home/style.css b/web/lib/pages/home/style.css
index 5224294..77c68d1 100644
--- a/web/lib/pages/home/style.css
+++ b/web/lib/pages/home/style.css
@@ -102,123 +102,6 @@
overflow-y: auto;
align-items: flex-start;
transition: .3s ease;
-}
-
-.page-home .card {
- position: relative;
- width: 300px;
- height: 200px;
- background-color: var(--ColorThemes2);
- margin: 10px;
- overflow: hidden;
- cursor: pointer;
- border-radius: calc(var(--border-radius) - 5px);
-}
-
-@media (max-width: 2300px) {
- .page-home .card {
- width: calc((100% / 5) - 30px);
- }
-}
-
-@media (max-width: 1960px) {
- .page-home .card {
- width: calc((100% / 4) - 30px);
- }
-}
-
-@media (max-width: 1640px) {
- .page-home .card {
- width: calc((100% / 3) - 30px);
- }
-}
-
-@media (max-width: 1280px) {
- .page-home .card {
- width: calc((100% / 2) - 30px);
- }
-}
-
-@media (max-width: 650px) {
- .page-home .card {
- width: 100%;
- }
-}
-
-@media(hover: hover) {
- .page-home .card:hover {
- opacity: 0.8;
- }
-}
-
-.page-home .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-color: var(--PrimaryColor);
- border-radius: calc(var(--border-radius) - 5px);
-}
-
-.page-home .card>a {
- position: absolute;
- width: 100%;
- height: 100%;
- z-index: 10;
-}
-
-.page-home .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: stretch;
- justify-content: space-between;
- border-radius: calc(var(--border-radius) - 5px);
-}
-
-.page-home .info {
- margin: 10px;
-}
-
-.page-home .info>div {
- width: 100%;
- height: 35px;
- display: flex;
- background: var(--ColorThemes0);
- align-items: center;
- justify-content: center;
- font-size: var(--FontSize1);
- color: var(--ColorThemes3);
- border-radius: calc(var(--border-radius) - 5px - 4px);
- position: relative;
- overflow: hidden;
-}
-
-.page-home .info>div>span {
- color: var(--ColorThemes3);
- font-size: var(--FontSize3);
- font-weight: 300;
- z-index: 2;
-}
-
-.page-home .info>div>p {
- color: var(--ColorThemes3);
- font-size: var(--FontSize3);
- font-weight: 400;
+ gap: 20px;
padding: 10px;
- z-index: 2;
- width: 100%;
- text-align: center;
}
\ No newline at end of file
diff --git a/web/lib/pages/schedule/constructor/index.html b/web/lib/pages/schedule/constructor/index.html
new file mode 100644
index 0000000..615ba76
--- /dev/null
+++ b/web/lib/pages/schedule/constructor/index.html
@@ -0,0 +1,3 @@
+
+
+
diff --git a/web/lib/pages/schedule/constructor/script.js b/web/lib/pages/schedule/constructor/script.js
new file mode 100644
index 0000000..de36022
--- /dev/null
+++ b/web/lib/pages/schedule/constructor/script.js
@@ -0,0 +1,8 @@
+const Schedule_constructor = {
+ init: async () => {
+ let html = await fetch('/lib/pages/schedule/constructor/index.html').then((response) => response.text());
+ app.innerHTML = html;
+
+
+ }
+}
\ No newline at end of file
diff --git a/web/lib/pages/schedule/constructor/style.css b/web/lib/pages/schedule/constructor/style.css
new file mode 100644
index 0000000..ec58c8c
--- /dev/null
+++ b/web/lib/pages/schedule/constructor/style.css
@@ -0,0 +1,6 @@
+.page-schedule-constructor {
+ width: calc(100% - 40px);
+ display: flex;
+ flex-direction: column;
+ margin: 20px 20px 0 20px;
+}
\ No newline at end of file
diff --git a/web/lib/pages/sheeps/index.html b/web/lib/pages/sheeps/index.html
index 34bd3de..080891e 100644
--- a/web/lib/pages/sheeps/index.html
+++ b/web/lib/pages/sheeps/index.html
@@ -86,6 +86,7 @@
+
+
diff --git a/web/lib/pages/stand/card/script.js b/web/lib/pages/stand/card/script.js
index cd19856..23a494a 100644
--- a/web/lib/pages/stand/card/script.js
+++ b/web/lib/pages/stand/card/script.js
@@ -23,14 +23,23 @@ const Stand_card = {
info: {
list: [],
+ sheeps: [],
async setHTML() {
- const url = `${CONFIG.api}stand/${Stand_card.id}`;
- this.list = await Stand_card.loadAPI(url);
+ this.list = await Stand_card.loadAPI(`${CONFIG.api}stand/${Stand_card.id}`);
+ this.sheeps = await Stand_card.loadAPI(`${CONFIG.api}sheeps/list/stand`);
+
document.getElementById('stand-info-title').innerText = this.list.title;
- document.getElementById('stand-info-geo').innerHTML = 'Відкрити Google Maps';
- document.getElementById('stand-info-geo').href = `https://www.google.com/maps?q=${this.list.geo[0]},${this.list.geo[1]}`;
+
+ if(this.list.geo[0]>0){
+ document.getElementById('stand-info-geo').innerHTML = 'Відкрити Google Maps';
+ document.getElementById('stand-info-geo').href = `https://www.google.com/maps?q=${this.list.geo[0]},${this.list.geo[1]}`;
+ document.getElementById('stand-info-block-geo').style.display = "";
+ } else {
+ document.getElementById('stand-info-block-geo').style.display = "none";
+ }
+
document.getElementById('stand-info-image').setAttribute('src', '');
Stand_card.schedule.setHTML();
@@ -42,7 +51,7 @@ const Stand_card = {
update(msg) {
const { type, data, user } = msg;
const el = document.getElementById(`name-${data?.id}`);
- if (!el) return; // если элемент не найден — выходим
+ if (!el) return; // якщо елемент не знайдено - виходимо
const isSelf = user.id == USER.id;
@@ -56,7 +65,7 @@ const Stand_card = {
break;
case "stand_unlocking":
- // Разблокируем только если событие от другого пользователя
+ // Розблокуємо лише якщо подія від іншого користувача
if (!isSelf) {
el.style.border = "";
el.style.backgroundColor = "";
@@ -70,18 +79,18 @@ const Stand_card = {
const sid = data.sheep_id;
const sname = data.sheep_name ?? "";
- // Менеджеру показываем весь список
+ // Менеджеру показуємо весь перелік
if (USER.possibilities.can_manager_stand && Array.isArray(Sheeps?.sheeps_list?.list)) {
el.innerHTML = "";
- // пустой вариант
+ // порожній варіант
el.appendChild(Object.assign(document.createElement("option"), {
value: "",
textContent: " "
}));
- // заполняем всех овечек
- Sheeps.sheeps_list.list.forEach(s => {
+ // заповнюємо всіх овечок
+ Stand_card.info.sheeps.forEach(s => {
const opt = document.createElement("option");
opt.value = s.id;
opt.textContent = s.name;
@@ -91,7 +100,7 @@ const Stand_card = {
el.removeAttribute("disabled");
} else {
- // Обычное поведение для обычных пользователей
+ // Звичайна поведінка для звичайних користувачів
if (sid == USER.id) {
el.innerHTML = `
`;
el.removeAttribute("disabled");
@@ -130,7 +139,7 @@ const Stand_card = {
}
};
- if (Cloud.socket?.readyState === WebSocket.OPEN) {
+ if (navigator.onLine && Cloud.socket?.readyState === WebSocket.OPEN) {
Cloud.socket.send(JSON.stringify(message));
} else {
if (confirm("З'єднання розірвано! Перепідключитись?")) {
@@ -152,7 +161,7 @@ const Stand_card = {
}
};
- if (Cloud.socket?.readyState === WebSocket.OPEN) {
+ if (navigator.onLine && Cloud.socket?.readyState === WebSocket.OPEN) {
Cloud.socket.send(JSON.stringify(message));
} else {
if (confirm("З'єднання розірвано! Перепідключитись?")) {
@@ -177,14 +186,14 @@ const Stand_card = {
};
if (USER.possibilities.can_manager_stand) {
- const pos = Sheeps.sheeps_list.list.map(e => e.id).indexOf(Number(sheep_id));
+ const pos = Stand_card.info.sheeps.map(e => e.id).indexOf(Number(sheep_id));
if (pos != -1) {
- let name = Sheeps.sheeps_list.list[pos].name;
+ let name = Stand_card.info.sheeps[pos].name;
message.data.sheep_name = name;
}
}
- if (Cloud.socket?.readyState === WebSocket.OPEN) {
+ if (navigator.onLine && Cloud.socket?.readyState === WebSocket.OPEN) {
Cloud.socket.send(JSON.stringify(message));
} else {
if (confirm("З'єднання розірвано! Перепідключитись?")) {
@@ -272,10 +281,10 @@ const Stand_card = {
textContent: " "
}));
- // если есть права менеджера — добавляем всех пользователей
- if (USER.possibilities.can_manager_stand && Array.isArray(Sheeps?.sheeps_list?.list)) {
- Sheeps.sheeps_list.list.sort((a, b) => a.name.localeCompare(b.name, 'uk'));
- Sheeps.sheeps_list.list.forEach(s => {
+ // якщо є права менеджера - додаємо всіх користувачів
+ if (USER.possibilities.can_manager_stand && Array.isArray(Stand_card.info.sheeps)) {
+ Stand_card.info.sheeps.sort((a, b) => a.name.localeCompare(b.name, 'uk'));
+ Stand_card.info.sheeps.forEach(s => {
const option = document.createElement("option");
option.value = s.id;
option.textContent = s.name;
@@ -283,7 +292,7 @@ const Stand_card = {
select.appendChild(option);
});
} else {
- // если есть владелец — показываем его
+ // якщо є власник - показуємо його
const opt = document.createElement("option");
if (sheep.sheep_id) {
opt.value = sheep.sheep_id;
@@ -296,13 +305,13 @@ const Stand_card = {
select.appendChild(opt);
}
- // если занят другим пользователем — блокируем
+ // якщо зайнятий іншим користувачем - блокуємо
if (sheep.sheep_id && sheep.sheep_id !== USER.id && !USER.possibilities.can_manager_stand) {
select.disabled = true;
select.value = sheep.sheep_id;
}
- // --- обработчики ---
+ // --- обробники ---
select.addEventListener("mousedown", () => Stand_card.cloud.mess.locking({ id: sheep.id }));
select.addEventListener("change", () => Stand_card.cloud.mess.update({ sheep_id: select.value, id: sheep.id }));
select.addEventListener("blur", () => Stand_card.cloud.mess.unlocking({ id: sheep.id }));
@@ -347,7 +356,7 @@ const Stand_card = {
if (USER.possibilities.can_add_stand) {
const btn = Object.assign(document.createElement("button"), {
id: "stand-new-button",
- textContent: "Додати стенд(и)",
+ textContent: "Додати день",
onclick: () => Stand_card.addStand()
});
fragment.appendChild(btn);
@@ -407,12 +416,14 @@ const Stand_card = {
.then(response => {
if (response.status == 200) {
console.log({ 'setPack': 'ok' });
- button.innerText = "Стенд(и) додано";
+ button.innerText = "День додано";
+ Notifier.success('День додано');
return response.json()
} else {
console.log('err');
button.innerText = "Помилка запису";
+ Notifier.error('Помилка додавання');
return
}
@@ -423,16 +434,12 @@ const Stand_card = {
Stand_card.schedule.setHTML();
setTimeout(() => {
- button.innerText = "Додати стенд(и)";
+ button.innerText = "Додати день";
}, 3000);
})
.catch(err => {
console.log(err);
button.innerText = "Помилка запису";
})
- },
-
- edit({ sheep_id, stand_id }) {
-
}
}
\ No newline at end of file
diff --git a/web/lib/pages/stand/constructor/index.html b/web/lib/pages/stand/constructor/index.html
index 2bb6d07..1df9146 100644
--- a/web/lib/pages/stand/constructor/index.html
+++ b/web/lib/pages/stand/constructor/index.html
@@ -51,14 +51,12 @@
type="text"
id="info-geo_lat"
name="geo_lat"
- required
placeholder="49.5601856455014"
/>
${element.history.name === 'Групова' ? 'Група ' + element.history.group_id : element.history.name}
`
- : `${element.history.name === 'Групова' ? 'Група ' + element.history.group_id : element.history.name}
`
- : `