dev

ZpcBulletinBoard/wwwroot/js/boards-links/index.js

@@ -0,0 +1,109 @@
+$(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>`);
+  }