264 lines
11 KiB
HTML
264 lines
11 KiB
HTML
{% extends "base.html" %}
|
||
{% import "/components/header.html" as header %}
|
||
{% import "/components/footer.html" as footer %}
|
||
{% import "components/profile_card.html" as profile_card %}
|
||
{% import "components/profile_nav.html" as profile_nav %}
|
||
{% import "components/checkbox.html" as checkbox %}
|
||
|
||
{% block title %}Мои соц. сети{% endblock %}
|
||
|
||
|
||
|
||
{% block content %}
|
||
{{ header.section(user) }}
|
||
<section class="c_dg3k4">
|
||
<div class="c_gtoe9">
|
||
{{ profile_card.profile_card(user) }}
|
||
<div class="c_ru432">
|
||
{{ profile_nav.profile_nav(user, 'social') }}
|
||
<div class="c_tihtk" id="main">
|
||
<hr>
|
||
<section class="c_fswiv">
|
||
<div class="c_pkxno b_9zn9v">
|
||
<div class="c_xn6qb b_7pvjf">
|
||
<img class="c_5ot6o b_hzn1v" src="/static/icons/vk.svg">
|
||
<span class="c_sk6kn b_cqgn2">ВКонтакте</span>
|
||
</div>
|
||
<a class="c_q9s9u b_fc2ac" href="/api/v1/social/vk/auth">
|
||
<span class="c_fmgwx b_y17do">Авторизоваться</span>
|
||
</a>
|
||
{% set social_vk = socials | selectattr('type', '==', 'vk') | list %}
|
||
{% if social_vk|length==0 or social_vk[0].get('need_auth') %}<span class="c_sk6kn b_cqgn2">Нужна авторизация в ВК</span>{%else%}
|
||
|
||
<div class="c_yzs44 b_grgx8">
|
||
<span class="c_sk6kn b_cqgn2">Личная старница:</span>
|
||
{% for doc in social_vk %}
|
||
{% if not doc.get('group',False) %}
|
||
<div class="c_yzs44 b_e3k9i">
|
||
<div class="c_0pok5 b_q158v">
|
||
<div class="c_j374f b_tto6p">
|
||
<img class="c_96qcm b_wrh58" src="/b/social/{{doc.img}}">
|
||
</div>
|
||
<span class="c_sk6kn b_cqgn2">{{doc.name}}</span>
|
||
</div>
|
||
<div class="c_tpnf9 b_549qf">
|
||
<label class="offer-label">
|
||
<input type="checkbox"class="offer-checkbox" data-id="{{doc._id}}" data-key="active"
|
||
{% if doc.active %}checked{%endif%}>
|
||
<span class="offer-text">Публикация картин</span>
|
||
</label>
|
||
<label class="offer-label">
|
||
<input type="checkbox"class="offer-checkbox" data-id="{{doc._id}}"
|
||
data-key="news"
|
||
{% if doc.news %}checked{%endif%}>
|
||
<span class="offer-text">Публикация новостей</span>
|
||
</label>
|
||
<!-- <label class="offer-label">
|
||
<input type="checkbox" data-id="{{doc._id}}" data-key="sign_avatar"
|
||
class="offer-checkbox" {% if doc.get('sign_avatar', True) %}checked{%endif%}>
|
||
<span class="offer-text">Добавлять подпись-аватар</span>
|
||
</label> -->
|
||
<label class="offer-label">
|
||
<input type="checkbox"class="offer-checkbox" data-id="{{doc._id}}" data-key="competition"
|
||
{% if doc.get('competition', False) %}checked{%endif%}>
|
||
<span class="offer-text">Модерация публикуемых конкурсов</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</div>
|
||
<hr>
|
||
<div class="c_yzs44 b_grgx8">
|
||
<span class="c_sk6kn b_cqgn2">Сообщества:</span>
|
||
{% for doc in (social_vk | selectattr('group') | list) %}
|
||
<div class="c_jkbyo b_e3k9i">
|
||
<div class="c_0pok5 b_q158v">
|
||
<div class="c_j374f b_tto6p">
|
||
<img class="c_96qcm b_wrh58" src="/b/social/{{doc.img}}">
|
||
</div>
|
||
<span class="c_sk6kn b_cqgn2">{{doc.name}}</span>
|
||
</div>
|
||
<div class="c_tpnf9 b_549qf">
|
||
<label class="offer-label">
|
||
<input type="checkbox"class="offer-checkbox" data-id="{{doc._id}}" data-key="active"
|
||
{% if doc.active %}checked{%endif%}>
|
||
<span class="offer-text">Публикация картин</span>
|
||
</label>
|
||
<label class="offer-label">
|
||
<input type="checkbox"class="offer-checkbox" data-id="{{doc._id}}"
|
||
data-key="news"
|
||
{% if doc.news %}checked{%endif%}>
|
||
<span class="offer-text">Публикация новостей</span>
|
||
</label>
|
||
<!-- <label class="offer-label">
|
||
<input type="checkbox" data-id="{{doc._id}}" data-key="sign_avatar"
|
||
class="offer-checkbox" {% if doc.get('sign_avatar', True) %}checked{%endif%}>
|
||
<span class="offer-text">Добавлять подпись-аватар</span>
|
||
</label> -->
|
||
<label class="offer-label">
|
||
<input type="checkbox"class="offer-checkbox" data-id="{{doc._id}}" data-key="competition"
|
||
{% if doc.get('competition', False) %}checked{%endif%}>
|
||
<span class="offer-text">Модерация публикуемых конкурсов</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
{% else %}
|
||
<p>Не найдены.</p>
|
||
{% endfor %}
|
||
</div>
|
||
{%endif%}
|
||
</div>
|
||
</section>
|
||
<hr>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<script>
|
||
async function postSetting(id, key, value) {
|
||
const payload = {
|
||
id: id,
|
||
key: key,
|
||
check: value
|
||
};
|
||
|
||
try {
|
||
const resp = await fetch('/api/social/settings', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify(payload)
|
||
});
|
||
|
||
if (!resp.ok) {
|
||
showToast({message: 'Ошибка сохранения', status : 'error'})
|
||
console.error('Server responded with', resp.status);
|
||
} else {
|
||
showToast({message: 'Сохранено!'})
|
||
console.log('Saved:', payload);
|
||
}
|
||
} catch (err) {
|
||
showToast({message: err, status: 'error'})
|
||
console.error('Network error', err);
|
||
}
|
||
}
|
||
|
||
document.addEventListener('change', function (e) {
|
||
const target = e.target;
|
||
if (target.matches('input[type="checkbox"]')) {
|
||
const id = target.dataset.id;
|
||
const key = target.dataset.key;
|
||
const checked = target.checked;
|
||
|
||
postSetting(id, key, checked);
|
||
}
|
||
});
|
||
</script>
|
||
{{ footer.section(user) }}
|
||
{% endblock %}
|
||
|
||
{% block head %}
|
||
{{ header.style() }}
|
||
{{ profile_nav.style() }}
|
||
{{ checkbox.style() }}
|
||
<style>
|
||
hr{width: 100%;
|
||
color: #5e179888;}
|
||
.b_v6dzl { height: 12px; stroke-width: 3px; stroke: #0ED646; width: 16px; }
|
||
.b_x94nr { height: 16px; width: 20px; }
|
||
.b_mzhbc { flex-shrink: 0; height: 30px; width: 30px; }
|
||
.b_hzn1v { align-items: center; aspect-ratio: 1/1; display: flex; height: 30px; justify-content: center; width: 30px; }
|
||
.b_cqgn2 { color: #000; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.b_7pvjf { align-items: center; display: flex; gap: 10px; justify-content: center; }
|
||
.b_y17do { color: #FFF; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.b_fc2ac { align-items: center; background: #5F1798; border-radius: 5px; display: flex; justify-content: center; padding: 12px 30px; }
|
||
.b_cqyno { flex-shrink: 0; height: 50px; width: 50px; }
|
||
.b_wrh58 { border-radius: 50%; align-items: center; aspect-ratio: 1/1; display: flex; height: 50px; justify-content: center; width: 50px; }
|
||
.b_tto6p { align-items: center; display: flex; gap: 10px; }
|
||
.b_q158v { align-items: center; align-self: stretch; display: flex; gap: 10px; }
|
||
.b_549qf { align-items: flex-start; display: flex; flex-direction: column; gap: 5px; }
|
||
.b_grgx8 { align-items: flex-start; align-self: stretch; display: flex; flex-direction: column; gap: 25px; }
|
||
.b_e3k9i { align-items: flex-start; align-self: stretch; display: flex; flex-direction: column; gap: 10px; }
|
||
.b_9zn9v { width: 90%; margin: auto; align-items: flex-start; display: flex; flex-direction: column; gap: 9px; justify-content: center; }
|
||
|
||
/* Mobile */
|
||
@media (max-width: 699px) {
|
||
.c_fswiv { align-items: flex-start; background: #FFF; display: flex; flex-direction: column; width: 100%; }
|
||
}
|
||
|
||
/* Tablet */
|
||
@media (min-width: 700px) and (max-width: 900px) {
|
||
.c_fswiv { align-items: flex-start; background: #FFF; display: flex; flex-direction: column; width: 100%; }
|
||
}
|
||
|
||
/* Desktop */
|
||
@media (min-width: 901px) {
|
||
.c_jkbyo { align-items: flex-start; align-self: stretch; display: flex; flex-direction: column; gap: 5px; }
|
||
.c_fswiv { align-items: flex-start; background: #FFF; display: flex; flex-direction: column; width: 100%; }
|
||
}</style>
|
||
<style>/* Base (common) styles */
|
||
.b_qgav8 { height: 12px; stroke-width: 3px; stroke: #0ED646; width: 16px; }
|
||
.b_h1rw4 { height: 16px; width: 20px; }
|
||
.b_bpfdu { flex-shrink: 0; height: 30px; width: 30px; }
|
||
.b_bz5d5 { align-items: center; aspect-ratio: 1/1; display: flex; height: 30px; justify-content: center; width: 30px; }
|
||
.b_xg9ou { color: #000; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.b_dua9o { align-items: center; display: flex; gap: 10px; justify-content: center; }
|
||
.b_d9pzu { color: #FFF; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 400; line-height: normal; }
|
||
.b_jphak { align-items: center; background: #5F1798; border-radius: 5px; display: flex; justify-content: center; padding: 12px 30px; }
|
||
.b_2tr5g { align-items: center; display: flex; flex-direction: column; gap: 9px; }
|
||
</style>
|
||
<style>
|
||
/* Mobile */
|
||
@media (max-width: 699px) {
|
||
.c_mrl59 {
|
||
align-items: center;
|
||
background: #5F1798;
|
||
border-radius: 25px;
|
||
bottom: -15px;
|
||
display: flex;
|
||
height: 50px;
|
||
justify-content: center;
|
||
position: absolute;
|
||
right: -15px;
|
||
width: 50px;
|
||
}
|
||
}
|
||
|
||
/* Tablet */
|
||
@media (min-width: 700px) and (max-width: 900px) {
|
||
.c_iiehk {
|
||
align-items: center;
|
||
border-radius: 5px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
width: 335px;
|
||
}
|
||
|
||
.c_nnsh6>a>img {
|
||
display: none;
|
||
}
|
||
|
||
}
|
||
|
||
/* Desktop */
|
||
@media (min-width: 901px) {
|
||
.c_iiehk {
|
||
align-items: flex-end;
|
||
border-radius: 5px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
width: 310px;
|
||
}
|
||
|
||
.c_nnsh6>a>img {
|
||
display: none;
|
||
}
|
||
}
|
||
.c_tihtk{width: 100%;}
|
||
</style>
|
||
{{ footer.style() }}
|
||
{% endblock %} |