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

Переработаны роутеры приложения

Browse Source 
Переписано APi WebSocket для работы с новыми роутерами
This commit is contained in:
Rozenrod
2025-10-03 17:11:31 +03:00
parent d75fb7ec3d
commit 6ec6523d71
54 changed files with 2593 additions and 3749 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,282 @@
<div class="page-stand-card">
<!-- <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>

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

@@ -0,0 +1,123 @@
const Stand_card = {
schedule: [],
init: async (id) => {
let html = await fetch('/lib/pages/stand/card/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_card.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_card.schedule = [];
// Кількість годин служіння
let stand_length = (stand.hour_end - stand.hour_start) / stand.processing_time;
for (let z = 0; z < stand.week_days.length; z++) {
Stand_card.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_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()
});
}
html += `</div>`; // закриваємо hour
}
html += `</div>`; // закриваємо day
}
document.getElementById('stand-info-title').innerText = Stand_card.title;
document.getElementById('stand-info-geo').innerHTML = '';
document.getElementById('stand-info-image').setAttribute('src', '');
block_schedule.innerHTML = html;
}
}

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

@@ -0,0 +1,148 @@
.page-stand-card {
width: calc(100% - 40px);
display: flex;
flex-direction: column;
align-items: center;
margin: 20px 20px 0 20px;
}
.page-stand-card 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-card 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);
}