Files
zpc-bulletin-board/ZpcBulletinBoard/wwwroot/js/boards-links/index.js
David Štaleker 4ea291622a debug
2024-03-10 19:10:37 +01:00

112 lines
3.8 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');
console.log({tmp: ev.dataTransfer});
console.log({tmp2: ev.dataTransfer.getData("test")});
if (ev.dataTransfer.getData("idPage")){
ev.preventDefault();
}
}
function dragPage(ev, el) {
console.log('drag');
ev.dataTransfer.setData("idPage", $(el).attr('data-id'));
ev.dataTransfer.setData("test",1);
}
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>`);
}