109 lines
3.7 KiB
JavaScript
109 lines
3.7 KiB
JavaScript
$(function(){
|
|
loadBoards();
|
|
});
|
|
|
|
function loadBoards(){
|
|
$.blockUI();
|
|
$.ajax({
|
|
type: "GET",
|
|
url: "/BoardsLinks/Index/?handler=Boards",
|
|
data: {
|
|
},
|
|
success: function (data) {
|
|
if (data.successful){
|
|
let boardContent = $('.boards-content');
|
|
boardContent.empty();
|
|
|
|
if (data.boards){
|
|
data.boards.forEach((board) => {
|
|
console.log(board);
|
|
boardContent.append(`<div class="div-board">
|
|
<h5>${board.name}</h5>
|
|
</div>
|
|
<div class="div-pages" ondrop="dropPage(event, this)" ondragover="allowDropPage(event, this)" data-idboard="${board.idBulletinBoard}">
|
|
|
|
</div>
|
|
<hr/>`);
|
|
if (board.links){
|
|
board.links.forEach((link) => {
|
|
addPageToBoard(board.idBulletinBoard, link);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
} else {
|
|
Swal.fire('Napaka', data.error, 'error');
|
|
console.log(data);
|
|
}
|
|
$.unblockUI();
|
|
},
|
|
error: function (xhr, ajaxOptions, thrownError) {
|
|
console.log(xhr);
|
|
alert(xhr.responseText);
|
|
$.unblockUI();
|
|
}
|
|
});
|
|
}
|
|
|
|
function allowDropPage(ev) {
|
|
console.log('allowDrop');
|
|
if (ev.dataTransfer.getData("idPage")){
|
|
ev.preventDefault();
|
|
}
|
|
}
|
|
|
|
function dragPage(ev, el) {
|
|
console.log('drag');
|
|
ev.dataTransfer.setData("idPage", $(el).attr('data-id'));
|
|
|
|
}
|
|
|
|
function dropPage(ev, el) {
|
|
console.log('drop');
|
|
ev.preventDefault();
|
|
let idPage = parseInt(ev.dataTransfer.getData("idPage"));
|
|
let idBoard = parseInt($(el).attr('data-idboard'));
|
|
$.blockUI();
|
|
$.ajax({
|
|
type: "POST",
|
|
beforeSend: function(xhr) {
|
|
xhr.setRequestHeader("XSRF-TOKEN",
|
|
$('input:hidden[name="__RequestVerificationToken"]').val());
|
|
},
|
|
url: "/BoardsLinks/Index/?handler=AddLink",
|
|
data: {
|
|
idBoard,
|
|
idPage
|
|
},
|
|
success: function(data) {
|
|
if (data.successful){
|
|
addPageToBoard(idBoard, data.link);
|
|
} else {
|
|
Swal.fire('Napaka', data.error, 'error');
|
|
console.log(data);
|
|
}
|
|
$.unblockUI();
|
|
},
|
|
error: function (xhr, ajaxOptions, thrownError) {
|
|
console.log({xhr, ajaxOptions, thrownError});
|
|
alert(xhr.responseText);
|
|
$.unblockUI();
|
|
}
|
|
});
|
|
}
|
|
|
|
function addPageToBoard(idBoard, link){
|
|
let div = $('.div-pages[data-idboard="' + idBoard + '"]');
|
|
|
|
div.append(`<div class="div-page" data-id="${link.idLink}" data-idPage='${link.bulletinBoardPage.idBulletinBoardPage}'>
|
|
<img class="img-thumbnail rounded" src="/bulletin-board-images/pages/${link.bulletinBoardPage.image}" alt="page image" />
|
|
<small>${link.bulletinBoardPage.name}</small>
|
|
<div class="tools">
|
|
<a href="javascript:;" class="btn btn-xs icon-btn btn-outline-primary borderless"><i class="fas fa-chevron-left"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs icon-btn btn-outline-secondary borderless"><i class="far fa-clock"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs icon-btn btn-outline-danger borderless"><i class="fas fa-trash-alt"></i></a>
|
|
<a href="javascript:;" class="btn btn-xs icon-btn btn-outline-primary borderless"><i class="fas fa-chevron-right"></i></a>
|
|
</div>
|
|
</div>`);
|
|
} |