Додана сторінка "Стенд"
Додане повідомлення про оновлення застосунку Оновлен Service Worker Перероблен WebSocket APІ
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
`;
|
||||
},
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user