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

v1.0.0

Browse Source
This commit is contained in:
Rozenrod
2025-09-09 00:10:53 +03:00
parent 38f2a05107
commit 204fc092d7
239 changed files with 22447 additions and 9536 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,282 @@
<div class="page-stand">
<label for="dateSelect">Виберіть дату:</label>
<select id="dateSelect"></select>
<!-- <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>

87
web/lib/pages/stand/script.js
View File

@@ -1,4 +1,5 @@
const Stand = {
schedule: [],
init: async () => {
let html = await fetch('/lib/pages/stand/index.html').then((response) => response.text());
app.innerHTML = html;
@@ -33,6 +34,90 @@ const Stand = {
});
}
generateAvailableDates();
// 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: 4,
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;
}
}

142
web/lib/pages/stand/style.css
View File

@@ -2,19 +2,147 @@
width: calc(100% - 40px);
display: flex;
flex-direction: column;
align-items: center;
margin: 20px 20px 0 20px;
}
.page-stand select {
.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;
border-radius: 6px;
margin: 0 5px;
border-radius: calc(var(--border-radius) - 5px - 4px);
height: 30px;
background-color: var(--ColorThemes1);
background-color: var(--ColorThemes0);
color: var(--ColorThemes3);
border: 1px solid var(--ColorThemes2);
margin: 10px 0;
box-shadow: var(--shadow-l1);
font-size: 14px;
}
#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);
}