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

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;
}