<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 ---------->
<div class="appreciation-container">
<h2 class="widget-title">Благодарности</h2>
<div class="appreciation-item">
<div id="appreciation-main-content"></div>
</div>
<a href="#" class="arrow-button center-block" onclick="appreciation.initModal()">Сказать спасибо</a>
<div id="appreciationModal" style="display: none;">
<div class="modal-content js-modal">
<div class="appreciation-editor">
<h3>Сказать спасибо!</h3>
<input class="employee-lookup form-control js-lookup" type="text" id="recipientThanks" placeholder="Выберите сотрудника" />
<div class="autocomplete-suggestions-placeholder"></div>
<textarea class="appreciation-text form-control" id="textThanks"
placeholder="Пожалуйста, не ограничивайтесь сухими формулировками “За все”, “Просто так” или отвлеченными “За красивые глаза” :) Благодарности перед появлением на главной странице проходят модерацию. Кроме главной страницы ваша благодарность будет отправлена коллеге по email и добавлена в его персональный профиль в интранете."></textarea>
<button class="btn js-btn js-send" type="button">Отправить</button>
</div>
<div class="appreciation-result modal-successfull-message" style="display:none;">
<i class="accept-yellow-bg-icon modal-successfull-icon"></i>
<h3>Спасибо, ваша благодарность отправлена!</h3>
<p>После согласования администратором интранета она будет размещена на главной странице, а уже сейчас получатель благодарности увидит ее в своем персональном профиле.</p>
<button class="btn js-btn js-close" type="button">Хорошо</button>
</div>
</div>
</div>
</div>
<script id="appreciation-main" type="text/x-handlebars-template">
<div class="appreciation-user-to-info">
{{#each this}}
<div>
<div class="appreciation-user-back">
<a href="{{url "profile" Recipient.ID }}" class="appreciation-user-to-img-wrapper">
<img src="{{ Recipient.Photo }}" alt="" class="appreciation-user-to-img">
</a>
<a href="{{url "profile" Recipient.ID }}" class="appreciation-user-to-title">{{ Recipient.Name }} {{ Recipient.Surname }}</a>
<p class="appreciation-user-from-position">{{ Recipient.Position }}</p>
<div class="appreciation-hover-area appreciation-hover-area-top"></div>
<div class="appreciation-hover-area appreciation-hover-area-bottom"></div>
<div class="appreciation-user-front">
<p>Вы также можете поблагодарить сотрудника</p>
<a href="{{url "profile" Recipient.ID }}" class="appreciation-user-front-title">{{ Recipient.Name }} {{ Recipient.Surname }}</a>
<p class="appreciation-user-front-position">{{ Recipient.Position }}</p>
<a href="{{url "profile" Recipient.ID "#appreciation" }}" class="arrow-button">Все благодарности</a>
</div>
</div>
<div class="appreciation-text">
<p>{{ Text }}</p>
<a href="{{url "profile" Author.ID }}" class="appreciation-user-from-name">{{ Author.Name }} {{ Author.Surname }}</a>
</div>
</div>
{{/each}}
</div>
</script>
<script>
appreciation.initInformer();
</script>
<div class="content-right-column">
<ul class="appreciation-list js-list"></ul>
</div>
@section rightColumn {
<fieldset class="appreciation-status js-status">
<input id="allAppreciation" type="radio" name="status" value="0" checked />
<label for="allAppreciation">Все благодарности</label>
<input id="waitingAppreciation" type="radio" name="status" value="1" />
<label for="waitingAppreciation">Ждут согласования (@ViewData["AwaitingApprovalCount"])</label>
<input id="approvedAppreciation" type="radio" name="status" value="2" />
<label for="approvedAppreciation">Размещены на главной</label>
<input id="rejectedAppreciation" type="radio" name="status" value="3" />
<label for="rejectedAppreciation">Отказано в размещении</label>
</fieldset>
}
<script id="thanksManagement" type="text/x-handlebars-template">
<li class="appreciation-item" data-id="{{ ID }}">
<div class="appreciation-author">
<a class="author-photo" href="{{url " profile" author.id }}">
<img src="{{ Author.Photo }}" />
</a>
<a class="author-title" href="{{url " profile" author.id }}">
{{ Author.Name }} {{ Author.Surname }}
</a>
</div>
<div class="appreciation-info">
<span class="appreciation-recipient">Адресат: <a href="#">{{ Recipient.Name }} {{ Recipient.Surname }}</a></span>
<span class="appreciation-date">{{ Created }}</span>
<p>{{ Text }}</p>
</div>
<div class="appreciation-statuse">
<p>
Статус:
{{#appreciationState Approved "waiting"}}
<span class="statuse-wait">ждет согласования</span>
{{/appreciationState}}
{{#appreciationState Approved "approved"}}
<span class="statuse-approved">размещена на главной</span>
{{/appreciationState}}
{{#appreciationState Approved "rejected"}}
<span class="statuse-rejected">отказано в размещении</span>
{{/appreciationState}}
</p>
{{#appreciationState Approved "waiting"}}
<button class="action-approve js-btn js-approve" type="button">Разместить на главной</button>
<button class="action-reject js-btn js-reject" type="button">Отказать в размещение</button>
{{/appreciationState}}
{{#appreciationState Approved "approved"}}
<button class="action-reject js-btn js-reject" type="button">Отменить размещение</button>
{{/appreciationState}}
{{#appreciationState Approved "rejected"}}
<button class="action-approve js-btn js-approve" type="button">Разместить на главной</button>
{{/appreciationState}}
</div>
</li>
</script>
@Styles.Render("~/Content/thanksAdminCss")
@Scripts.Render("~/bundles/thanks")
<script>
$(document).ready(appreciation.initManagement)
</script>
@import 'props';
@borderColor: #d0d0d0;
@borderColorError: red;
@baseMargin: 20px;
.appreciation-modal {
.fancybox-skin {
padding: 0 30px !important;
}
.modal-content {
width: 510px;
height: 405px;
.appreciation-editor {
position: relative;
h3 {
margin: 30px 0 20px 0;
}
.form-control {
display: block;
width: 100%;
margin-bottom: @baseMargin;
padding: 10px 15px;
border: 1px solid @borderColor;
outline: none;
.box-sizing;
&.validation-error {
border-color: @borderColorError;
}
}
.employee-lookup {
height: 40px;
background: url('icons/person-yellow-icon.png') no-repeat 95% center;
}
.appreciation-text {
height: 200px;
resize: none;
}
}
.appreciation-result {
}
}
.btn {
display: block;
min-width: 0;
margin: 0 auto;
padding: 15px 30px;
background: transparent;
border: 2px solid @yellowMain;
outline: none;
cursor: pointer;
}
}
var appreciation = (function () {
var thanksMainTemplate = null,
thanksManagement = {
template: null,
loading: false,
hasNext: true,
last: null,
display: 0
};
function getThanks(display, last) {
return $.get('/thanks/allThanks', {
display: display,
last: last
});
}
function getAppreciationsInformer() {
if (!thanksMainTemplate) {
thanksMainTemplate = Handlebars.compile($('#appreciation-main').html());
}
getThanks(2, 0, 10).then(function (response) {
$("#appreciation-main-content").html(thanksMainTemplate(response));
sideblocksOverlayToggle('appreciation');
if (response.length > 1) {
$('.appreciation-user-to-info').owlCarousel({
loop: true,
margin: 0,
nav: true,
dots: false,
autoplay: true,
autoplayTimeout: 8000,
autoplayHoverPause: true,
items: 1
});
}
});
}
function getAppreciationsManagement() {
if (thanksManagement.loading || !thanksManagement.hasNext) {
return;
}
thanksManagement.loading = true;
getThanks(thanksManagement.display, thanksManagement.last).then(function (response) {
thanksManagement.loading = false;
thanksManagement.hasNext == response.length >= 10;
if (response.length) {
thanksManagement.last = response[response.length - 1].ID;
}
renderAppreciationsManagement(response);
});
}
function renderAppreciationManagement(thank) {
var d = thanksManagement.display,
a = thank.Approved;
if (d === 0 || (d === 2 && a === true) || (d === 3 && a === false)) {
$('.appreciation-item[data-id="' + thank.ID + '"]').html(thanksManagement.template(thank));
}
}
function renderAppreciationsManagement(thanks) {
var html = thanks.map(function (item) {
return thanksManagement.template(item);
})
$('.js-list').append(html.join(''));
}
function changeAppreciationStage(id, state) {
$.post('/thanks/changeState', {
id: id,
state: state
}).then(function (response) {
renderAppreciationManagement(response);
});
}
function initModal() {
$.fancybox.open($('#appreciationModal .js-modal'), {
wrapCSS: 'appreciation-modal',
beforeClose: function () {
$('#recipientThanks').autocomplete('dispose');
$('.appreciation-editor').show();
$('.appreciation-result').hide();
}
});
$('#recipientThanks').autocomplete({
serviceUrl: '/Person/GetEmployeesByQuery',
dataType: 'json',
transformResult: function (response) {
return {
suggestions: (response || []).map(function (e) {
return {
id: e.ID,
value: e.Surname + ' ' + e.Name,
position: e.Position,
photo: e.Photo,
city: e.City
}
})
}
},
appendTo: '.autocomplete-suggestions-placeholder',
formatResult: function (suggestion, currentValue) {
if (!currentValue) {
return suggestion.value;
}
return Handlebars.compile($('#employeeSuggestion').html())(suggestion);
},
onSelect: function (item) {
if (!item)
return;
$(this).data('selected', item.id)
.trigger('change');
}
}).on('change', function (e) {
if (!$(this).val()) {
$(this).data('selected', '');
}
});
$('.appreciation-editor').on('change', 'input, textarea', function (e) {
var $src = $(this),
hasError = false;
if ($src.hasClass('js-lookup')) {
hasError = !$src.data('selected');
} else {
hasError = !$src.val();
}
if (hasError) {
$src.addClass('validation-error');
} else {
$src.removeClass('validation-error')
}
});
$('.js-btn').on('click', function () {
if ($(this).hasClass('js-send')) {
sendAppreciation();
}
if ($(this).hasClass('js-close')) {
closeModal();
}
});
}
function closeModal() {
$.fancybox.close();
}
function sendAppreciation() {
var userId = $('#recipientThanks').data('selected'),
text = $('#textThanks').val(),
errors = [];
if (!userId) {
errors.push('Необходимо выбрать сотрудника.');
$('#recipientThanks').addClass('validation-error');
}
if (!text) {
errors.push('Необходимо ввести текст благодарности');
$('#textThanks').addClass('validation-error');
}
if (errors.length) {
alert(errors.join('<br/>'));
return;
}
$.post('/thanks/thankUser', {
recipient: userId,
text: text
}).then(function (response) {
$('.appreciation-editor').hide();
$('.appreciation-result').show();
});
}
function initManagement() {
if (!thanksManagement.template) {
thanksManagement.template = Handlebars.compile($('#thanksManagement').html());
Handlebars.registerHelper('appreciationState', function (currentState, expectedState, options) {
var result = false;
switch (expectedState) {
case 'waiting':
result = (currentState === null || currentState === undefined);
break;
case 'approved':
result = currentState === true;
break;
case 'rejected':
result = currentState === false;
}
if (result) {
return options.fn(this)
} else {
return options.inverse(this);
}
});
$('.js-status').on('change', 'input[name="status"]', function () {
thanksManagement.hasNext = true;
thanksManagement.last = null;
thanksManagement.display = $('input[name="status"]:checked').val();
$('.js-list').empty();
getAppreciationsManagement();
});
$('.js-list').on('click', '.js-btn', function (e) {
var $src = $(this),
id = $src.parents('.appreciation-item').data('id');
changeAppreciationStage(id, $src.hasClass('js-approve'));
});
getAppreciationsManagement();
}
}
return {
initModal: initModal,
initManagement: initManagement,
initInformer: getAppreciationsInformer
}
})();
