rozenrod/Sheep-Service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Додана сторінка "Стенд"

Browse Source 
Додане повідомлення про оновлення застосунку
Оновлен Service Worker
Перероблен WebSocket APІ
This commit is contained in:
Rozenrod
2025-10-19 00:55:30 +03:00
parent 6ec6523d71
commit 3f08f3f6c9
46 changed files with 2651 additions and 2691 deletions
Download Patch File Download Diff File Expand all files Collapse all files

269
web/lib/pages/stand/card/index.html
View File

@@ -6,277 +6,14 @@
<summary>Інформація про стенд</summary>
<div>
<span>Розташування:</span>
<p id="stand-info-title">Тест</p>
<p id="stand-info-title">--</p>
</div>
<div>
<span>Геолокація:</span>
<p id="stand-info-geo"></p>
<a id="stand-info-geo">--</a>
</div>
<img id="stand-info-image" src="" />
</details>
<div id="stand-schedule">
<!-- <div class="block-day" id="day-0">
<h3>08.08.2025 • Пʼятниця</h3>
<div>
<span id="time">09:00-10:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">10:00-11:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">11:00-12:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">12:00-13:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">14:00-15:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">15:00-16:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">16:00-17:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">17:00-18:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
</div>
<div class="block-day" id="day-1">
<h3>11.08.2025 • Понеділок</h3>
<div>
<span id="time">09:00-10:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">10:00-11:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">11:00-12:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">12:00-13:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">14:00-15:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">15:00-16:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">16:00-17:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">17:00-18:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
</div> -->
</div>
<div id="stand-schedule"></div>
</div>

610
web/lib/pages/stand/card/script.js
View File

@@ -1,123 +1,541 @@
const Stand_card = {
schedule: [],
init: async (id) => {
id: null,
async init(id) {
let html = await fetch('/lib/pages/stand/card/index.html').then((response) => response.text());
app.innerHTML = html;
let listDate = [1, 4];
Stand_card.id = id;
function generateAvailableDates() {
let select = document.getElementById("dateSelect");
select.innerHTML = "";
this.info.setHTML();
},
let today = new Date();
today.setHours(0, 0, 0, 0);
let months = [today.getMonth(), today.getMonth() + 1];
let year = today.getFullYear();
async loadAPI(url) {
const uuid = localStorage.getItem("uuid");
const response = await fetch(url, {
method: 'GET',
headers: {
"Content-Type": "application/json",
"Authorization": uuid
}
});
return await response.json();
},
months.forEach(month => {
let date = new Date(year, month, 1);
while (date.getMonth() === month) {
if (date >= today) {
let day = date.getDay();
if (listDate.includes(day)) {
let option = document.createElement("option");
option.value = date.toISOString().split("T")[0];
option.textContent = date.toLocaleDateString("uk-UA", {
weekday: "long", year: "numeric", month: "long", day: "numeric"
});
select.appendChild(option);
info: {
list: [],
async setHTML() {
const url = `${CONFIG.api}stand/${Stand_card.id}`;
this.list = await Stand_card.loadAPI(url);
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]}`;
document.getElementById('stand-info-image').setAttribute('src', '');
Stand_card.schedule.setHTML();
}
},
// Робота з WebSocket
cloud: {
update(msg) {
const { type, data, user } = msg;
const el = document.getElementById(`name-${data?.id}`);
if (!el) return; // если элемент не найден — выходим
const isSelf = user.id == USER.id;
switch (type) {
case "stand_locking":
if (!isSelf) {
el.disabled = true;
el.style.border = "2px solid var(--PrimaryColor)";
el.style.backgroundColor = "#EAFF0024";
}
break;
case "stand_unlocking":
// Разблокируем только если событие от другого пользователя
if (!isSelf) {
el.style.border = "";
el.style.backgroundColor = "";
}
if ((!isSelf && !el.value) || USER.possibilities.can_manager_stand) {
el.removeAttribute("disabled");
}
break;
case "stand_update": {
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 => {
const opt = document.createElement("option");
opt.value = s.id;
opt.textContent = s.name;
if (s.id == sid) opt.selected = true;
el.appendChild(opt);
});
el.removeAttribute("disabled");
} else {
// Обычное поведение для обычных пользователей
if (sid == USER.id) {
el.innerHTML = `<option value=""></option><option selected value="${USER.id}">${USER.name}</option>`;
el.removeAttribute("disabled");
} else if (!sid) {
el.innerHTML = `<option value=""></option><option value="${USER.id}">${USER.name}</option>`;
el.removeAttribute("disabled");
} else {
el.innerHTML = `<option value="${sid}">${sname}</option>`;
el.disabled = true;
}
}
date.setDate(date.getDate() + 1);
}
});
}
// generateAvailableDates();
Stand_card.generator();
el.style.border = "";
el.style.backgroundColor = "";
break;
}
default:
return;
}
},
// update(msg) {
// console.log(msg.type, msg.data.id);
// if (msg.type == "stand_locking") {
// const id = msg.data.id;
// const el = document.getElementById(`name-${id}`);
// if (msg.user.id != USER.id) {
// el.disabled = true;
// el.style.border = "2px solid var(--PrimaryColor);"
// el.style.backgroundColor = "red"
// }
// } else if (msg.type == "stand_unlocking") {
// const id = msg.data.id;
// const el = document.getElementById(`name-${id}`);
// if (msg.user.id != USER.id || !msg.data.sheep_id) {
// el.style.border = "";
// el.style.backgroundColor = ""
// el.removeAttribute('disabled');
// }
// } else if (msg.type == "stand_update") {
// const id = msg.data.id;
// const el = document.getElementById(`name-${id}`);
// if (msg.data.sheep_id == USER.id) {
// el.innerHTML = `<option value=""></option><option selected value="${USER.id}">${USER.name}</option>`;
// el.removeAttribute('disabled');
// } else if (msg.data.sheep_id == "" || msg.data.sheep_id == null || msg.data.sheep_id == USER.id) {
// el.innerHTML = `<option value=""></option><option value="${USER.id}">${USER.name}</option>`;
// el.removeAttribute('disabled');
// } else {
// el.innerHTML = `<option value="${msg.data.sheep_id}">${msg.data.sheep_name}</option>`;
// el.disabled = true;
// }
// el.style.border = "";
// el.style.backgroundColor = ""
// } else return;
// },
mess: {
locking({ id }) {
const message = {
event: 'message',
user: {
name: USER.name,
id: USER.id
},
type: "stand_locking",
data: {
id: id,
stand_id: Stand_card.id,
sheep_name: null
}
};
if (Cloud.socket?.readyState === WebSocket.OPEN) {
Cloud.socket.send(JSON.stringify(message));
} else {
if (confirm("З'єднання розірвано! Перепідключитись?")) {
Cloud.start();
}
}
},
unlocking({ id }) {
const message = {
event: 'message',
user: {
name: USER.name,
id: USER.id
},
type: "stand_unlocking",
data: {
id: id,
stand_id: Stand_card.id
}
};
if (Cloud.socket?.readyState === WebSocket.OPEN) {
Cloud.socket.send(JSON.stringify(message));
} else {
if (confirm("З'єднання розірвано! Перепідключитись?")) {
Cloud.start();
}
}
},
update({ sheep_id, id }) {
const message = {
event: 'message',
user: {
name: USER.name,
id: USER.id
},
type: "stand_update",
data: {
id: id,
stand_id: Stand_card.id,
sheep_id: sheep_id,
sheep_name: null
}
};
if (USER.possibilities.can_manager_stand) {
const pos = Sheeps.sheeps_list.list.map(e => e.id).indexOf(Number(sheep_id));
if (pos != -1) {
let name = Sheeps.sheeps_list.list[pos].name;
message.data.sheep_name = name;
}
}
if (Cloud.socket?.readyState === WebSocket.OPEN) {
Cloud.socket.send(JSON.stringify(message));
} else {
if (confirm("З'єднання розірвано! Перепідключитись?")) {
Cloud.start();
}
}
}
},
},
generator: () => {
let block_schedule = document.getElementById('stand-schedule');
let html = "";
schedule: {
list: [],
async setHTML() {
const block = document.getElementById('stand-schedule');
block.innerHTML = '';
let stand = {
id: 1,
title: "Універсам",
geo: { lat: 0, lng: 0 },
hour_start: 9,
hour_end: 14,
quantity_sheep: 2,
week_days: [0, 2, 4, 6],
processing_time: 0.5,
updated_at: null
}
const url = `${CONFIG.api}stand/schedule/list/${Stand_card.id}`;
this.list = Stand_card.grouped(await Stand_card.loadAPI(url));
Stand_card.schedule = [];
const fragment = document.createDocumentFragment();
// Кількість годин служіння
let stand_length = (stand.hour_end - stand.hour_start) / stand.processing_time;
const createSelect = (sheep) => {
const select = document.createElement("select");
select.id = `name-${sheep.id}`;
for (let z = 0; z < stand.week_days.length; z++) {
Stand_card.schedule.push([]);
// пустой option
select.appendChild(Object.assign(document.createElement("option"), {
value: "",
textContent: " "
}));
let date = new Date();
date.setDate(date.getDate() + stand.week_days[z]);
let dayName = date.toLocaleDateString('uk-UA', { weekday: 'long' });
html += `
<div class="block-day" id="day-${z}">
<h3>${date.toLocaleDateString()} • ${dayName}</h3>
`;
let stand_date = 1 + stand.week_days[z];
for (let i = 0; i < stand_length; i++) {
let time_now = stand.hour_start + (stand.processing_time * i);
let timeFormat = (a) => a > 9 ? a : `0${a}`;
function formatTime(hours) {
let h = Math.floor(hours);
let m = (hours % 1 === 0.5) ? "30" : "00";
let hh = h.toString().padStart(2, "0");
return `${hh}:${m}`;
}
html += `
<div id="hour-${z}-${i}">
<span class="time">${formatTime(time_now)}-${formatTime(time_now + stand.processing_time)}</span>
`;
for (let q = 0; q < stand.quantity_sheep; q++) {
html += `
<select id="name">
<option value=""></option>
<option value="Test">Test</option>
</select>
`;
Stand_card.schedule[z].push({
id: (i + z) * stand.quantity_sheep + q,
hour: stand.hour_start + (stand.processing_time * i),
number_sheep: q,
date: stand_date,
sheep_id: null,
stand_id: stand.id,
updated_at: Date.now()
// если есть права менеджера — добавляем всех пользователей
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 => {
const option = document.createElement("option");
option.value = s.id;
option.textContent = s.name;
if (s.id === sheep.sheep_id) option.selected = true;
select.appendChild(option);
});
} else {
// если есть владелец — показываем его
const opt = document.createElement("option");
if (sheep.sheep_id) {
opt.value = sheep.sheep_id;
opt.textContent = sheep.sheep_name ?? USER.name;
opt.selected = sheep.sheep_id === USER.id;
} else {
opt.value = USER.id;
opt.textContent = USER.name;
}
select.appendChild(opt);
}
html += `</div>`; // закриваємо hour
// если занят другим пользователем — блокируем
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 }));
return select;
};
this.list.forEach((day, dayIndex) => {
const timestamp = day[0][0].date;
const dayDiv = Object.assign(document.createElement("div"), {
className: "block-day",
id: `day-${dayIndex}`
});
dayDiv.appendChild(Object.assign(document.createElement("h3"), {
textContent: `${formattedDate(timestamp)} • ${formattedDayName(timestamp)}`
}));
day.forEach((hour, hourIndex) => {
const hourDiv = Object.assign(document.createElement("div"), {
id: `hour-${dayIndex}-${hourIndex}`
});
hourDiv.appendChild(Object.assign(document.createElement("span"), {
className: "time",
textContent: `${Stand_card.formatTime(hour[0].hour)}-${Stand_card.formatTime(hour[0].hour + Stand_card.info.list.processing_time)}`
}));
hour.forEach(sheep => hourDiv.appendChild(createSelect(sheep)));
dayDiv.appendChild(hourDiv);
});
fragment.appendChild(dayDiv);
});
// кнопка добавления
if (USER.possibilities.can_add_stand) {
const btn = Object.assign(document.createElement("button"), {
id: "stand-new-button",
textContent: "Додати стенд(и)",
onclick: () => Stand_card.addStand()
});
fragment.appendChild(btn);
}
html += `</div>`; // закриваємо day
block.appendChild(fragment);
}
// async setHTML() {
// const block_schedule = document.getElementById('stand-schedule');
// block_schedule.innerHTML = '';
// const url = `${CONFIG.api}stand/schedule/list/${Stand_card.id}`;
// this.list = Stand_card.grouped(await Stand_card.loadAPI(url));
// let dayIndex = 0;
// for (const day of this.list) {
// const timestamp = day[0][0].date;
// const dayDiv = document.createElement("div");
// dayDiv.className = "block-day";
// dayDiv.id = `day-${dayIndex}`;
// const header = document.createElement("h3");
// header.textContent = `${formattedDate(timestamp)} • ${formattedDayName(timestamp)}`;
// dayDiv.appendChild(header);
// let hourIndex = 0;
// for (const hour of day) {
// const hourDiv = document.createElement("div");
// hourDiv.id = `hour-${dayIndex}-${hourIndex}`;
// const span = document.createElement("span");
// span.className = "time";
// span.textContent = `${Stand_card.formatTime(hour[0].hour)}-${Stand_card.formatTime(hour[0].hour + Stand_card.info.list.processing_time)}`;
// hourDiv.appendChild(span);
// for (const sheep of hour) {
// const select = document.createElement("select");
// select.id = `name-${sheep.id}`;
// const emptyOption = document.createElement("option");
// emptyOption.value = "";
// emptyOption.textContent = " ";
// select.appendChild(emptyOption);
// if (sheep.sheep_id && sheep.sheep_id == USER.id) {
// const opt = document.createElement("option");
// opt.value = USER.id;
// opt.textContent = USER.name;
// opt.selected = true;
// select.appendChild(opt);
// // --- Обработчики событий ---
// select.addEventListener("focus", () => {
// // пользователь начал взаимодействие → блокируем
// Stand_card.cloud.mess.locking({ id: sheep.id });
// });
// select.addEventListener("blur", () => {
// // пользователь ушёл → разблокируем
// Stand_card.cloud.mess.unlocking({ id: sheep.id });
// });
// select.addEventListener("change", () => {
// // пользователь выбрал что-то → обновляем
// Stand_card.cloud.mess.update({ sheep_id: select.value, id: sheep.id });
// });
// } else if (sheep.sheep_id && sheep.sheep_id != USER.id) {
// const opt = document.createElement("option");
// opt.value = sheep.sheep_id;
// opt.textContent = sheep.sheep_name;
// opt.selected = true;
// select.appendChild(opt);
// // --- Обработчики событий ---
// select.addEventListener("focus", () => {
// // пользователь начал взаимодействие → блокируем
// Stand_card.cloud.mess.locking({ id: sheep.id });
// });
// select.addEventListener("blur", () => {
// // пользователь ушёл → разблокируем
// Stand_card.cloud.mess.unlocking({ id: sheep.id });
// });
// select.addEventListener("change", () => {
// // пользователь выбрал что-то → обновляем
// Stand_card.cloud.mess.update({ sheep_id: select.value, id: sheep.id });
// });
// select.disabled = true;
// } else {
// const opt = document.createElement("option");
// opt.value = USER.id;
// opt.textContent = USER.name;
// select.appendChild(opt);
// // --- Обработчики событий ---
// select.addEventListener("focus", () => {
// // пользователь начал взаимодействие → блокируем
// Stand_card.cloud.mess.locking({ id: sheep.id });
// });
// select.addEventListener("blur", () => {
// // пользователь ушёл → разблокируем
// Stand_card.cloud.mess.unlocking({ id: sheep.id });
// });
// select.addEventListener("change", () => {
// // пользователь выбрал что-то → обновляем
// Stand_card.cloud.mess.update({ sheep_id: select.value, id: sheep.id });
// });
// }
// hourDiv.appendChild(select);
// }
// dayDiv.appendChild(hourDiv);
// hourIndex++;
// }
// block_schedule.appendChild(dayDiv);
// dayIndex++;
// }
// if (USER.possibilities.can_add_stand) {
// const btn = document.createElement("button");
// btn.id = "stand-new-button";
// btn.onclick = () => Stand_card.addStand();
// btn.textContent = "Додати стенд(и)";
// block_schedule.appendChild(btn);
// }
// }
},
grouped(list) {
const groupedByDate = {};
for (const item of list) {
if (!groupedByDate[item.date]) groupedByDate[item.date] = [];
groupedByDate[item.date].push(item);
}
document.getElementById('stand-info-title').innerText = Stand_card.title;
document.getElementById('stand-info-geo').innerHTML = '';
document.getElementById('stand-info-image').setAttribute('src', '');
const result = Object.values(groupedByDate).map(dateGroup => {
const groupedByHour = [];
let currentGroup = [];
let lastHour = null;
for (const item of dateGroup) {
if (item.hour !== lastHour) {
if (currentGroup.length > 0) groupedByHour.push(currentGroup);
currentGroup = [];
lastHour = item.hour;
}
currentGroup.push(item);
}
if (currentGroup.length > 0) groupedByHour.push(currentGroup);
return groupedByHour;
});
return result;
},
formatTime(hours) {
let h = Math.floor(hours);
let m = (hours % 1 === 0.5) ? "30" : "00";
let hh = h.toString().padStart(2, "0");
return `${hh}:${m}`;
},
async addStand() {
const button = document.getElementById('stand-new-button');
const uuid = localStorage.getItem('uuid');
const URL = `${CONFIG.api}stand/schedule/${Stand_card.id}`;
await fetch(URL, {
method: 'POST',
headers: {
"Content-Type": "application/json",
"Authorization": uuid
}
})
.then(response => {
if (response.status == 200) {
console.log({ 'setPack': 'ok' });
button.innerText = "Стенд(и) додано";
return response.json()
} else {
console.log('err');
button.innerText = "Помилка запису";
return
}
})
.then(data => {
console.log(data);
Stand_card.schedule.setHTML();
setTimeout(() => {
button.innerText = "Додати стенд(и)";
}, 3000);
})
.catch(err => {
console.log(err);
button.innerText = "Помилка запису";
})
},
edit({ sheep_id, stand_id }) {
block_schedule.innerHTML = html;
}
}

18
web/lib/pages/stand/card/style.css
View File

@@ -73,7 +73,7 @@
#stand-schedule {
width: 100%;
min-height: calc(100vh - 40px - 50px);
/* min-height: calc(100vh - 40px - 50px); */
height: fit-content;
margin: 0 10px 15px;
border-radius: var(--border-radius);
@@ -137,6 +137,9 @@
background-color: var(--ColorThemes0);
color: var(--ColorThemes3);
}
#stand-schedule>.block-day div select:disabled {
opacity: 0.9 !important;
}
#stand-schedule>.block-day div:nth-child(2n) {
background: var(--ColorThemes0);
@@ -145,4 +148,17 @@
#stand-schedule>.block-day div:nth-child(2n) select {
background-color: var(--ColorThemes2);
}
#stand-schedule> #stand-new-button{
border-radius: 6px;
background: var(--PrimaryColor);
color: var(--PrimaryColorText);
width: calc(100% - 20px);
height: 40px;
font-size: var(--FontSize3);
font-weight: 400;
margin: 10px;
text-transform: uppercase;
cursor: pointer;
}

115
web/lib/pages/stand/constructor/index.html Normal file
View File

@@ -0,0 +1,115 @@
<div class="page-stand-constructor">
<form id="stand-constructor-form">
<h1>Створення місця розташування стенду</h1>
<div>
<label for="info-title">Назва стенду</label>
<input type="text" id="info-title" name="title" required />
</div>
<div>
<label for="info-quantity_sheep"
>Кількість вісників, що можуть стояти одночасно</label
>
<select id="info-quantity_sheep" name="quantity_sheep" required>
<option value="2" selected>2 вісника</option>
<option value="3">3 вісника</option>
<option value="4">4 вісника</option>
<option value="5">5 вісників</option>
<option value="6">6 вісників</option>
</select>
</div>
<div>
<label>Години початку та кінця служіння</label>
<div class="geo-inputs">
<input
type="number"
id="info-hour_start"
name="hour_start"
required
placeholder="10"
min="5",
step="1"
/>
<input
type="number"
id="info-hour_end"
name="hour_end"
required
placeholder="16"
max="22",
step="1"
/>
</div>
</div>
<div>
<label>Локація розташування</label>
<div class="geo-inputs">
<input
type="number"
id="info-geo_lat"
name="geo_lat"
required
placeholder="49.5601856455014",
step="0.01"
/>
<input
type="number"
id="info-geo_lng"
name="geo_lng"
required
placeholder="25.625626212730406",
step="0.01"
/>
</div>
</div>
<div>
<label for="info-processing_time">Час тривалості зміни вісників</label>
<select id="info-processing_time" name="processing_time" required>
<option value="0.5">30 хвилин</option>
<option value="1" selected>1 година</option>
<option value="2">2 години</option>
<option value="3">3 години</option>
</select>
</div>
<div>
<label>Дні встановлення стенду</label>
<div class="week-days">
<div class="option checkbox">
<input class="custom-checkbox" id="day-0" name="day-0" type="checkbox" />
<label for="day-0""> Понеділок: </label>
</div>
<div class="option checkbox">
<input class="custom-checkbox" id="day-1" name="day-1" type="checkbox" />
<label for="day-1"> Вівторок: </label>
</div>
<div class="option checkbox">
<input class="custom-checkbox" id="day-2" name="day-2" type="checkbox" />
<label for="day-2"> Середа: </label>
</div>
<div class="option checkbox">
<input class="custom-checkbox" id="day-3" name="day-3" type="checkbox" />
<label for="day-3"> Четвер: </label>
</div>
<div class="option checkbox">
<input class="custom-checkbox" id="day-4" name="day-4" type="checkbox" />
<label for="day-4"> Пʼятниця: </label>
</div>
<div class="option checkbox">
<input class="custom-checkbox" id="day-5" name="day-5" type="checkbox" />
<label for="day-5"> Субота: </label>
</div>
<div class="option checkbox">
<input class="custom-checkbox" id="day-6" name="day-6" type="checkbox" />
<label for="day-6"> Неділя: </label>
</div>
</div>
</div>
<button type="submit" id="stand-constructor-button">Зберегти</button>
</form>
</div>

75
web/lib/pages/stand/constructor/script.js Normal file
View File

@@ -0,0 +1,75 @@
const Stand_constructor = {
init: async () => {
let html = await fetch('/lib/pages/stand/constructor/index.html').then((response) => response.text());
app.innerHTML = html;
const form = document.getElementById('stand-constructor-form');
form.addEventListener('submit', (event) => {
event.preventDefault();
let values = {
"title": document.getElementById('info-title').value,
"quantity_sheep": Number(document.getElementById('info-quantity_sheep').value),
"hour_start": Number(document.getElementById('info-hour_start').value),
"hour_end": Number(document.getElementById('info-hour_end').value),
"geo": [Number(document.getElementById('info-geo_lat').value), Number(document.getElementById('info-geo_lng').value)],
"processing_time": Number(document.getElementById('info-processing_time').value)
};
const checkboxes = form.querySelectorAll('input[type="checkbox"][name^="day-"]');
let week_days = () => {
let a = [];
for (const key in checkboxes) {
const element = checkboxes[key];
if(element.checked) a.push(Number((element.name).replace("day-", "")))
}
return a
}
values.week_days = week_days();
console.log(values);
Stand_constructor.save(values);
});
},
async save(values) {
const button = document.getElementById('stand-constructor-button');
const uuid = localStorage.getItem('uuid');
const URL = `${CONFIG.api}stand/list`;
await fetch(URL, {
method: 'POST',
headers: {
"Content-Type": "application/json",
"Authorization": uuid
},
body: JSON.stringify(values)
})
.then(response => {
if (response.status == 200) {
console.log({ 'setPack': 'ok' });
button.innerText = "Стенд додано";
return response.json()
} else {
console.log('err');
button.innerText = "Помилка запису";
return
}
})
.then(data => {
console.log(data);
Router.navigate(`/stand/card/${data.id}`);
setTimeout(() => {
button.innerText = "Зберегти";
}, 3000);
})
.catch(err => {
console.log(err);
button.innerText = "Помилка запису";
})
}
}

120
web/lib/pages/stand/constructor/style.css Normal file
View File

@@ -0,0 +1,120 @@
.page-stand-constructor {
width: calc(100% - 40px);
display: flex;
flex-direction: column;
align-items: stretch;
margin: 20px 20px 0 20px;
}
.page-stand-constructor>form {
border-radius: 10px;
width: calc(100% - 40px);
display: flex;
flex-direction: column;
align-items: stretch;
margin-bottom: 20px;
background: var(--ColorThemes1);
color: var(--ColorThemes3);
border: 1px solid var(--ColorThemes2);
box-shadow: var(--shadow-l1);
padding: 0 20px;
position: relative;
}
.page-stand-constructor>form>h1 {
width: calc(100% - 40px);
color: var(--ColorThemes3);
border-radius: var(--border-radius);
font-size: var(--FontSize5);
font-weight: 300;
padding: 20px 0;
position: relative;
}
.page-stand-constructor>form>div {
width: 100%;
display: flex;
margin: 20px 0;
align-items: flex-start;
flex-direction: column;
}
.page-stand-constructor>form>div>label {
display: flex;
justify-content: center;
flex-direction: column;
font-size: var(--FontSize1);
font-weight: 500;
margin-bottom: 5px;
}
.page-stand-constructor>form>div>select {
width: 100%;
min-width: 140px;
padding: 0 5px;
border-radius: calc(var(--border-radius) - 5px - 4px);
height: 30px;
background-color: var(--ColorThemes0);
color: var(--ColorThemes3);
}
.page-stand-constructor>form>div>input,
.page-stand-constructor>form>div>div>input {
width: calc(100% - 10px);
min-width: 140px;
padding: 0 5px;
border-radius: 6px;
height: 30px;
background: var(--ColorThemes0);
color: var(--ColorThemes3);
font-size: var(--FontSize2);
}
.page-stand-constructor>form>div>.geo-inputs {
width: 100%;
display: flex;
justify-content: space-between;
}
.page-stand-constructor>form>div>.geo-inputs>input {
width: calc(50% - 15px);
}
.page-stand-constructor>form>div>.week-days {
background: var(--ColorThemes0);
border-radius: calc(var(--border-radius) - 5px - 4px);
width: calc(100% - 15px);
padding: 0 5px 0 10px;
}
.page-stand-constructor>form>div>.week-days>div {
margin: 10px 0;
width: 100%;
font-size: var(--FontSize3);
}
.page-stand-constructor>form>div>.week-days>div>.custom-checkbox+label {
font-size: var(--FontSize4);
font-weight: 400;
width: 100%;
display: flex;
align-items: center;
user-select: none;
flex-direction: row-reverse;
justify-content: space-between;
cursor: pointer;
margin: 5px 0;
}
.page-stand-constructor>form>button {
border-radius: 6px;
background: var(--PrimaryColor);
color: var(--PrimaryColorText);
width: 100%;
height: 40px;
font-size: var(--FontSize3);
font-weight: 400;
margin: 20px 0;
text-transform: uppercase;
}

282
web/lib/pages/stand/index.html Normal file
View File

@@ -0,0 +1,282 @@
<div class="page-stand">
<!-- <label for="dateSelect">Виберіть дату:</label>
<select id="dateSelect"></select> -->
<details id="stand-info">
<summary>Інформація про стенд</summary>
<div>
<span>Розташування:</span>
<p id="stand-info-title">Тест</p>
</div>
<div>
<span>Геолокація:</span>
<p id="stand-info-geo"></p>
</div>
<img id="stand-info-image" src="" />
</details>
<div id="stand-schedule">
<!-- <div class="block-day" id="day-0">
<h3>08.08.2025 • Пʼятниця</h3>
<div>
<span id="time">09:00-10:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">10:00-11:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">11:00-12:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">12:00-13:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">14:00-15:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">15:00-16:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">16:00-17:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">17:00-18:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
</div>
<div class="block-day" id="day-1">
<h3>11.08.2025 • Понеділок</h3>
<div>
<span id="time">09:00-10:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">10:00-11:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">11:00-12:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">12:00-13:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">14:00-15:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">15:00-16:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">16:00-17:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
<div>
<span id="time">17:00-18:00</span>
<select id="name_1">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_2">
<option value=""></option>
<option value="Test">Test</option>
</select>
<select id="name_3">
<option value=""></option>
<option value="Test">Test</option>
</select>
</div>
</div> -->
</div>
</div>

22
web/lib/pages/stand/list/index.html
View File

@@ -1,3 +1,25 @@
<div class="page-stand-list">
<div class="buttons-list" id="buttons-list">
<a
href="/stand/constructor"
data-route
id="constructorButton"
style="display: none"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path
d="M 14.5 4 C 12.015 4 10 6.015 10 8.5 L 10 39.5 C 10 41.985 12.015 44 14.5 44 L 22.042969 44 C 22.079969 43.749 22.138516 43.502672 22.228516 43.263672 L 22.283203 43.285156 C 22.353203 42.961156 23.236422 40.161109 23.982422 37.787109 C 24.272422 36.865109 24.779891 36.029703 25.462891 35.345703 L 33.904297 27 L 27.5 27 C 26.672 27 26 26.328 26 25.5 L 26 16 L 38 16 L 38 23.054688 C 38.72 22.587688 39.4975 22.254422 40.3125 22.107422 C 40.5365 22.067422 40.769 22.062922 41 22.044922 L 41 14.5 C 41 13.672 40.328 13 39.5 13 L 34 13 L 34 8.5 C 34 6.015 31.985 4 29.5 4 L 14.5 4 z M 30.5 18 A 1.50015 1.50015 0 1 0 30.5 21 L 33.5 21 A 1.50015 1.50015 0 1 0 33.5 18 L 30.5 18 z M 41.498047 24 C 41.224047 24.001 40.946969 24.025172 40.667969 24.076172 C 39.783969 24.235172 38.939563 24.696156 38.226562 25.410156 L 26.427734 37.208984 C 26.070734 37.565984 25.807969 38.011141 25.667969 38.494141 L 24.097656 43.974609 C 24.025656 44.164609 23.993 44.365406 24 44.566406 C 24.013 44.929406 24.155594 45.288406 24.433594 45.566406 C 24.710594 45.843406 25.067688 45.986 25.429688 46 C 25.630688 46.007 25.834391 45.975344 26.025391 45.902344 L 31.505859 44.332031 C 31.988859 44.192031 32.431062 43.930266 32.789062 43.572266 L 44.589844 31.773438 C 45.303844 31.060437 45.764828 30.216031 45.923828 29.332031 C 45.973828 29.053031 45.997047 28.775953 45.998047 28.501953 C 46.001047 27.307953 45.540687 26.179312 44.679688 25.320312 C 43.820687 24.460313 42.692047 23.998 41.498047 24 z M 22 35 C 22.828 35 23.5 35.672 23.5 36.5 C 23.5 37.328 22.828 38 22 38 C 21.172 38 20.5 37.328 20.5 36.5 C 20.5 35.672 21.172 35 22 35 z"
/>
</svg>
<span>Конструктор</span>
</a>
</div>
<details open>
<summary>
<span>Доступні стенди</span>
</summary>
<div id="list"></div>
</details>
</div>

47
web/lib/pages/stand/list/script.js
View File

@@ -1,6 +1,53 @@
const Stand_list = {
list: [],
init: async () => {
let html = await fetch('/lib/pages/stand/list/index.html').then((response) => response.text());
app.innerHTML = html;
Stand_list.setHTML();
if (USER.possibilities.can_add_stand) {
document.getElementById("buttons-list").style.display = "flex";
document.getElementById("constructorButton").style.display = "";
}
},
loadAPI: async function (url) {
const uuid = localStorage.getItem("uuid");
const response = await fetch(url, {
method: 'GET',
headers: {
"Content-Type": "application/json",
"Authorization": uuid
}
});
Stand_list.list = await response.json();
return Stand_list.list;
},
setHTML: async function () {
const block_list = document.getElementById('list');
const url = `${CONFIG.api}stand/list`;
let list = this.list.length > 0 ? this.list : await this.loadAPI(url);
let html = "";
for (const element of list) {
html += this.renderCard({ element });
}
block_list.innerHTML = html;
},
renderCard: ({ element }) => {
return `
<div class="card">
<div class="contents">
<div class="info">
<div>
<p>${element.title}</p>
</div>
</div>
</div>
<a href="/stand/card/${element.id}" data-route></a>
</div>
`;
},
}

239
web/lib/pages/stand/list/style.css
View File

@@ -2,6 +2,243 @@
width: calc(100% - 40px);
display: flex;
flex-direction: column;
align-items: center;
align-items: stretch;
margin: 20px 20px 0 20px;
}
.page-stand-list>.buttons-list {
padding: 10px;
margin-bottom: 40px;
background: var(--ColorThemes1);
color: var(--ColorThemes3);
border: 1px solid var(--ColorThemes2);
box-shadow: var(--shadow-l1);
border-radius: var(--border-radius);
overflow: auto;
display: none;
}
.page-stand-list>.buttons-list>button,
.page-stand-list>.buttons-list>a {
cursor: pointer;
border-radius: calc(var(--border-radius) - 5px);
padding: 0 10px;
margin-right: 20px;
min-width: fit-content;
min-height: 40px;
background: var(--PrimaryColor);
display: flex;
align-items: center;
justify-content: center;
}
.page-stand-list>.buttons-list>button>span,
.page-stand-list>.buttons-list>a>span {
color: var(--PrimaryColorText);
font-size: var(--FontSize3);
font-weight: normal;
}
.page-stand-list>.buttons-list>button>svg,
.page-stand-list>.buttons-list>a>svg {
width: 20px;
height: 20px;
fill: var(--PrimaryColorText);
margin-right: 10px;
}
.page-stand-list>.list-controls {
padding: 10px;
margin: 0px 0 10px 0;
background: var(--ColorThemes1);
color: var(--ColorThemes3);
border: 1px solid var(--ColorThemes2);
box-shadow: var(--shadow-l1);
border-radius: var(--border-radius);
overflow: auto;
display: flex;
}
.page-stand-list>.list-controls select {
min-width: 140px;
height: 30px;
background-color: var(--ColorThemes2);
border: 1px solid var(--ColorThemes0);
box-shadow: var(--shadow-l1);
color: var(--ColorThemes3);
font-size: var(--FontSize1);
cursor: pointer;
padding: 0 5px;
margin-right: 10px;
border-radius: calc(var(--border-radius) - 5px - 2px);
}
.page-stand-list details {
border-radius: var(--border-radius);
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
margin-bottom: 10px;
background: var(--ColorThemes1);
color: var(--ColorThemes3);
border: 1px solid var(--ColorThemes2);
box-shadow: var(--shadow-l1);
}
.page-stand-list>details[disabled] summary,
.page-stand-list>details.disabled summary {
pointer-events: none;
user-select: none;
}
.page-stand-list>details summary::-webkit-details-marker,
.page-stand-list>details summary::marker {
display: none;
content: "";
}
.page-stand-list summary {
width: calc(100% - 40px);
cursor: pointer;
color: var(--ColorThemes3);
border-radius: var(--border-radius);
font-size: var(--FontSize5);
font-weight: 300;
padding: 20px;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
.page-stand-list #list {
width: 100%;
margin: 0;
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-content: flex-start;
justify-content: center;
overflow-y: auto;
align-items: flex-start;
transition: .3s ease;
}
.page-stand-list .card {
position: relative;
width: 300px;
height: 200px;
background-color: var(--ColorThemes2);
margin: 0px 10px 20px 10px;
overflow: hidden;
cursor: pointer;
border-radius: calc(var(--border-radius) - 5px);
}
@media (max-width: 2300px) {
.page-stand-list .card {
width: calc((100% / 5) - 40px);
}
}
@media (max-width: 1960px) {
.page-stand-list .card {
width: calc((100% / 4) - 40px);
}
}
@media (max-width: 1640px) {
.page-stand-list .card {
width: calc((100% / 3) - 40px);
}
}
@media (max-width: 1280px) {
.page-stand-list .card {
width: calc((100% / 2) - 40px);
}
}
@media (max-width: 650px) {
.page-stand-list .card {
width: 100%;
}
}
@media(hover: hover) {
.page-stand-list .card:hover {
opacity: 0.8;
}
}
.page-stand-list .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);
}
.page-stand-list .card>a {
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
}
.page-stand-list .card>.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;
}
.page-stand-list .card>.contents>.info {
margin: 10px;
}
.page-stand-list .card>.contents>.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-stand-list .card>.contents>.info>div>span {
color: var(--ColorThemes3);
font-size: var(--FontSize3);
font-weight: 300;
z-index: 2;
}
.page-stand-list .card>.contents>.info>div>p {
color: var(--ColorThemes3);
font-size: var(--FontSize3);
font-weight: 400;
padding: 10px;
z-index: 2;
}

123
web/lib/pages/stand/script.js Normal file
View File

@@ -0,0 +1,123 @@
const Stand = {
schedule: [],
init: async () => {
let html = await fetch('/lib/pages/stand/index.html').then((response) => response.text());
app.innerHTML = html;
let listDate = [1, 4];
function generateAvailableDates() {
let select = document.getElementById("dateSelect");
select.innerHTML = "";
let today = new Date();
today.setHours(0, 0, 0, 0);
let months = [today.getMonth(), today.getMonth() + 1];
let year = today.getFullYear();
months.forEach(month => {
let date = new Date(year, month, 1);
while (date.getMonth() === month) {
if (date >= today) {
let day = date.getDay();
if (listDate.includes(day)) {
let option = document.createElement("option");
option.value = date.toISOString().split("T")[0];
option.textContent = date.toLocaleDateString("uk-UA", {
weekday: "long", year: "numeric", month: "long", day: "numeric"
});
select.appendChild(option);
}
}
date.setDate(date.getDate() + 1);
}
});
}
// generateAvailableDates();
Stand.generator();
},
generator: () => {
let block_schedule = document.getElementById('stand-schedule');
let html = "";
let stand = {
id: 1,
title: "Універсам",
geo: { lat: 0, lng: 0 },
hour_start: 9,
hour_end: 14,
quantity_sheep: 2,
week_days: [0, 2, 4, 6],
processing_time: 0.5,
updated_at: null
}
Stand.schedule = [];
// Кількість годин служіння
let stand_length = (stand.hour_end - stand.hour_start) / stand.processing_time;
for (let z = 0; z < stand.week_days.length; z++) {
Stand.schedule.push([]);
let date = new Date();
date.setDate(date.getDate() + stand.week_days[z]);
let dayName = date.toLocaleDateString('uk-UA', { weekday: 'long' });
html += `
<div class="block-day" id="day-${z}">
<h3>${date.toLocaleDateString()} • ${dayName}</h3>
`;
let stand_date = 1 + stand.week_days[z];
for (let i = 0; i < stand_length; i++) {
let time_now = stand.hour_start + (stand.processing_time * i);
let timeFormat = (a) => a > 9 ? a : `0${a}`;
function formatTime(hours) {
let h = Math.floor(hours);
let m = (hours % 1 === 0.5) ? "30" : "00";
let hh = h.toString().padStart(2, "0");
return `${hh}:${m}`;
}
html += `
<div id="hour-${z}-${i}">
<span class="time">${formatTime(time_now)}-${formatTime(time_now + stand.processing_time)}</span>
`;
for (let q = 0; q < stand.quantity_sheep; q++) {
html += `
<select id="name">
<option value=""></option>
<option value="Test">Test</option>
</select>
`;
Stand.schedule[z].push({
id: (i + z) * stand.quantity_sheep + q,
hour: stand.hour_start + (stand.processing_time * i),
number_sheep: q,
date: stand_date,
sheep_id: null,
stand_id: stand.id,
updated_at: Date.now()
});
}
html += `</div>`; // закриваємо hour
}
html += `</div>`; // закриваємо day
}
document.getElementById('stand-info-title').innerText = stand.title;
document.getElementById('stand-info-geo').innerHTML = '';
document.getElementById('stand-info-image').setAttribute('src', '');
block_schedule.innerHTML = html;
}
}

148
web/lib/pages/stand/style.css Normal file
View File

@@ -0,0 +1,148 @@
.page-stand {
width: calc(100% - 40px);
display: flex;
flex-direction: column;
align-items: center;
margin: 20px 20px 0 20px;
}
.page-stand details {
border-radius: var(--border-radius);
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
margin-bottom: 20px;
background: var(--ColorThemes1);
color: var(--ColorThemes3);
border: 1px solid var(--ColorThemes2);
box-shadow: var(--shadow-l1);
}
.page-stand summary {
width: calc(100% - 40px);
cursor: pointer;
color: var(--ColorThemes3);
border-radius: var(--border-radius);
font-size: var(--FontSize5);
font-weight: 300;
padding: 20px;
position: relative;
}
#stand-info div {
display: flex;
flex-direction: row;
display: flex;
flex-direction: row;
padding: 10px;
color: var(--ColorThemes3);
align-items: center;
}
#stand-info div span {
opacity: 0.8;
font-weight: 400;
font-size: var(--FontSize2);
margin-right: 5px;
}
#stand-info div p {
font-weight: 300;
font-size: var(--FontSize4);
}
#stand-info img {
position: relative;
display: inline-block;
width: calc(100% - 20px);
border-radius: calc(var(--border-radius) - 8px);
margin: 10px;
height: auto;
aspect-ratio: 16 / 9;
background-color: #f2e5c9;
}
#stand-info img::before {
content: "Приклад розташування";
display: block;
color: #555;
text-align: center;
padding: 10px;
}
#stand-schedule {
width: 100%;
min-height: calc(100vh - 40px - 50px);
height: fit-content;
margin: 0 10px 15px;
border-radius: var(--border-radius);
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--ColorThemes1);
color: var(--ColorThemes3);
border: 1px solid var(--ColorThemes2);
box-shadow: var(--shadow-l1);
transition: all .2sease 0s;
}
#stand-schedule>.block-day {
display: flex;
flex-direction: column;
width: calc(100% - 20px);
margin: 10px;
padding: 10px 0;
border: 1px solid var(--PrimaryColor);
background-color: var(--ColorThemes2);
border: 1px solid var(--ColorThemes0);
min-height: 100px;
justify-content: center;
position: relative;
border-radius: calc(var(--border-radius) - 5px);
overflow-x: auto;
}
#stand-schedule>.block-day h3 {
font-size: 17px;
font-weight: 500;
padding: 10px;
text-transform: capitalize;
width: calc(100% - 20px);
text-align: center;
}
#stand-schedule>.block-day div {
display: flex;
flex-direction: row;
padding: 5px 0;
margin: 0 10px;
align-items: center;
min-width: calc(100% - 20px);
width: fit-content;
}
#stand-schedule>.block-day div span {
min-width: 85px;
padding: 0 5px;
}
#stand-schedule>.block-day div select {
width: 100%;
min-width: 140px;
padding: 0 5px;
margin: 0 5px;
border-radius: calc(var(--border-radius) - 5px - 4px);
height: 30px;
background-color: var(--ColorThemes0);
color: var(--ColorThemes3);
}
#stand-schedule>.block-day div:nth-child(2n) {
background: var(--ColorThemes0);
border-radius: 8px;
}
#stand-schedule>.block-day div:nth-child(2n) select {
background-color: var(--ColorThemes2);
}