<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<h3 class="module-title">Фотографии профиля</h3>
<div class="module-breadcrumbs">
<a href="@adminMainUrl" class="breadcrumb-item">Страница администратора</a>
<i class="arrow-yellow-right-icon"></i>
<span class="breadcrumb-item">Фотографии профиля</span>
</div>
<ul class="admin-tabs js-admin-tabs">
<li class="admin-tab js-admin-tab admin-tab__active" data-tab="standard">Стандартные</li>
<li class="admin-tab js-admin-tab" data-tab="custom">Пользовательские</li>
<a href="#violation-message-admin" class="admin-action-btn button-general js-send-reminder">Отправить напоминание</a>
</ul>
<div class="admin-tabs-content">
<div class="tab-content js-tab-content js-tab-content-standard">
<div id="standard-photos-content"></div>
</div>
<div class="tab-content tab-content-custom js-tab-content js-tab-content-custom" style="display: none;">
<input type="text" placeholder="Поиск" class="custom-search module-input js-custom-search" />
<div id="custom-photos-content"></div>
</div>
</div>
<div class="remodal violation-remodal js-violation-remodal" data-remodal-id="violation-message-admin">
<button data-remodal-action="close" class="remodal-close"></button>
<h3 class="remodal-header">Напоминание!</h3>
<div class="remodal-body">
<textarea class="module-input" id="violation-text"></textarea>
</div>
<div class="remodal-buttons-right">
<button type="button" class="button-general arrow-button js-violation-send">Отправить</button>
</div>
</div>
<div class="remodal success-remodal" data-remodal-id="modal-success">
<button data-remodal-action="close" class="remodal-close"></button>
<h3 class="remodal-header">Напоминание отправлено!</h3>
<div class="remodal-buttons-right">
<button type="button" class="button-general arrow-button" data-remodal-action="close">Хорошо</button>
</div>
</div>
<script id="admin-photos-template" type="text/x-handlebars-template">
{{#if this}}
{{#each this}}
<div class="tab-item">
<a href="{{url "profile" EmployeeID }}" class="tab-image-wrapper"><img src="{{Url}}" alt="" /></a>
<a href="{{url "profile" EmployeeID }}" class="tab-item-name">{{EmployeeName}}</a>
<div class="tab-hovered"><a href="#violation-message-admin" class="action-button js-violation" data-id="{{EmployeeID}}">Нарушение!</a></div>
</div>
{{/each}}
{{/if}}
</script>
<script>
$(function () {
adminPhotos.initPhotos();
});
</script>
@import 'props';
.admin-tabs {
width: 100%;
list-style-type: none;
padding: 0;
margin: 25px 0 20px;
border-bottom: 2px solid @yellowMain;
position: relative;
font-size: 0;
.admin-tab {
display: inline-block;
font-size: 14px;
color: @black;
width: 190px;
height: 42px;
line-height: 42px;
border: 2px solid @yellowMain;
border-bottom: 0;
margin-right: 3px;
text-align: center;
cursor: pointer;
.box-sizing;
&.admin-tab__active {
background: @linesYellowBg;
}
}
.admin-action-btn {
font-family: @fontBase;
position: absolute;
top: 0;
right: 0;
color: @black;
width: 210px;
height: 42px;
font-size: 14px;
text-align: center;
text-decoration: none;
line-height: 42px;
border: 2px solid @yellowMain;
border-bottom: 0;
.box-sizing;
}
}
.tab-content {
margin-bottom: 100px;
}
.tab-item {
width: 120px;
margin-bottom: 30px;
margin-right: 35px;
font-size: 0;
display: inline-block;
position: relative;
vertical-align: top;
.tab-image-wrapper {
.image-mask(120px, 0);
}
.tab-item-name {
font-family: @tahoma;
font-size: 14px;
color: @darkGrey;
text-align: center;
text-decoration: none;
display: block;
margin-top: 10px;
}
.tab-hovered {
display: none;
position: absolute;
top: 0;
left: 0;
width: 120px;
height: 120px;
background: rgba(0, 0, 0, 0.7);
}
.action-button {
.rounded-btn(101px, 43px);
background: transparent;
color: rgba(255,255,255,0.9);
margin: 35px auto 0;
display: block;
text-decoration: none;
text-align: center;
padding-top: 3px;
}
}
.tab-content-custom {
.tab-item:hover {
.tab-hovered {
display: block;
}
}
.custom-search {
background: @searchIcon;
width: 384px;
background-position: 95% 50%;
margin-bottom: 20px;
}
}
.violation-remodal,
.success-remodal {
width: 570px;
.module-input {
height: 220px;
width: 100%;
resize: none;
padding: 20px;
}
.arrow-button {
.arrow-btn(145px, 46px, inline-block, 0);
background-position: 120px 50%;
margin-top: 30px;
text-transform: none;
}
}
var adminPhotos = (function () {
var photosAdminTemplate = null,
standardPhotos = null,
currentTab = 'standard',
customPhotos = null,
isCustomRendered = false;
function initPhotos() {
if (!photosAdminTemplate) {
photosAdminTemplate = Handlebars.compile($('#admin-photos-template').html());
}
$('.js-admin-tabs').on('click', '.js-admin-tab', function () {
var $tabId = $(this).data('tab');
switch ($tabId) {
case 'standard':
switchTab($tabId);
break;
case 'custom':
if (!isCustomRendered) {
renderCustomPhotos($tabId);
isCustomRendered = true;
} else {
switchTab($tabId);
}
break;
}
});
$('.js-tab-content').on('click', '.js-violation', function () {
var userID = $(this).data('id');
clearViolationForm();
sendViolationReminder(userID);
})
$('.js-admin-tabs').on('click', '.js-send-reminder', function () {
sendViolationReminder(0);
})
getPhotos('standard', '').then(function (response) {
$('#standard-photos-content').html(photosAdminTemplate(response));
standardPhotos = response;
})
searchAction();
}
function switchTab(tab) {
$('.js-admin-tab').removeClass("admin-tab__active");
$('[data-tab="' + tab + '"]').addClass("admin-tab__active");
$('.js-tab-content').hide();
$('.js-tab-content-' + tab).show();
$('.js-send-reminder').toggleClass("item-hidden");
currentTab = tab;
}
function getPhotos(type, search) {
return $.get('/admin/getphotos', {
type: type,
search: search
});
}
function renderCustomPhotos() {
getPhotos('custom', '').then(function (response) {
$('#custom-photos-content').html(photosAdminTemplate(response));
customPhotos = response;
});
switchTab('custom');
}
function searchAction() {
$('.js-tab-content-custom').on('keyup', '.js-custom-search', function (e) {
console.log($(this).val());
var query = $(this).val();
var k = e.keyCode;
if ((k < 48 && k > 90) && (k != 46 || k != 8))
return;
getPhotos('custom', query).then(function (response) {
if (response != null) {
$('#custom-photos-content').html(photosAdminTemplate(response));
}
});
})
}
function getStandardUsers() {
var standardUsers = [];
if (standardPhotos == null) return;
for (var item in standardPhotos) {
if (item != null) {
standardUsers.push(standardPhotos[item].EmployeeID);
}
}
return standardUsers;
}
function sendViolationReminder(id) {
clearViolationForm();
$('.js-violation-remodal').off().on('click', '.js-violation-send', function () {
if ($('#violation-text').val().replace(/^\s+/g, '').length > 0) {
if (currentTab === 'custom') {
sendUserReminder(id, $('#violation-text').val());
}
if (currentTab === 'standard') {
sendGroupReminder(getStandardUsers(), $('#violation-text').val());
}
} else {
$('#violation-text').addClass('not-valid');
}
});
}
function sendUserReminder(id, text) {
$.post('/admin/sendReminder', {
userID: id,
text: text
}).then(function (response) {
window.location.replace(location.pathname);
});
}
function sendGroupReminder(users, text) {
$.post('/admin/sendGroupReminder', {
users: users,
text: text
}).then(function (response) {
var modal = $('[data-remodal-id=modal-success]').remodal();
modal.open();
});
}
function clearViolationForm() {
$('#violation-text').val('');
}
return {
initPhotos: initPhotos
}
})();
