dev

ZpcBulletinBoard/Pages/BoardsLinks/Index.cshtml

@@ -51,8 +51,8 @@
                         <img class="img-thumbnail rounded" src="/bulletin-board-images/pages/@tmpPage.Image" alt="page image" />
                         <small>@tmpPage.Name</small>
                         <div class="tools">
-                            <a href="javascript:;" class="btn btn-xs icon-btn btn-outline-primary borderless"><i class="fas fa-reply"></i></a>
-                            <a href="javascript:;" class="btn btn-xs icon-btn btn-outline-secondary borderless"><i class="fas fa-reply-all"></i></a>
+                            @* <a href="javascript:;" class="btn btn-xs icon-btn btn-outline-primary borderless"><i class="fas fa-reply"></i></a> *@
+                            <a href="javascript:;" class="btn btn-xs icon-btn btn-outline-secondary borderless" onclick="addPageToAllBoards(this)"><i class="fas fa-reply-all"></i></a>
                         </div>
                     </div>
                 }

ZpcBulletinBoard/Pages/BoardsLinks/Index.cshtml.cs

@@ -48,7 +48,7 @@ namespace ZpcBulletinBoard.Pages.BoardsLinks
             var order = 1;
             var links = context.BulletinBoardPageLinks.Where(x => x.IdBulletinBoardFk == idBoard).ToList();
             if (links.Any())
-                order = links.Max(x => x.IdLink) + 1;
+                order = links.Max(x => x.Order) + 1;
 
             var link = new BulletinBoardPageLink
             {
@@ -68,5 +68,58 @@ namespace ZpcBulletinBoard.Pages.BoardsLinks
 
             return new JsonResult(new { successful = true, error = $"", link });
         }
+
+        public IActionResult OnPostSwapLinkOrder(int idLinkStart, int idLinkEnd)
+        {
+            var linkStart = context.BulletinBoardPageLinks.FirstOrDefault(x => x.IdLink == idLinkStart);
+            var linkEnd = context.BulletinBoardPageLinks.FirstOrDefault(x => x.IdLink == idLinkEnd);
+
+            if (linkStart == null)
+                return new JsonResult(new { successful = false, error = $"Link with ID {idLinkStart} not exists!" });
+
+            if (linkEnd == null)
+                return new JsonResult(new { successful = false, error = $"Link with ID {idLinkEnd} not exists!" });
+
+            (linkStart.Order, linkEnd.Order) = (linkEnd.Order, linkStart.Order);
+
+            context.SaveChanges();
+
+            return new JsonResult(new { successful = true, error = $"", linkStart, linkEnd });
+        }
+
+        public IActionResult OnPostLinkDuration(int idLink, int duration)
+        {
+            var link = context.BulletinBoardPageLinks.FirstOrDefault(x => x.IdLink == idLink);
+
+            if (link == null)
+                return new JsonResult(new { successful = false, error = $"Link with ID {idLink} not exists!" });
+
+            link.Duration = duration;
+
+            context.SaveChanges();
+
+            return new JsonResult(new { successful = true, error = $"", link });
+        }
+
+        //Delete
+        public IActionResult OnDeleteLink(int idLink)
+        {
+            var link = context.BulletinBoardPageLinks.FirstOrDefault(x => x.IdLink == idLink);
+            if (link == null)
+                return new JsonResult(new { successful = false, error = $"Link with ID {idLink} not exists!", link });
+
+            var links = context.BulletinBoardPageLinks
+                .Where(x => x.IdBulletinBoardFk == link.IdBulletinBoardFk && x.Order > link.Order).ToList();
+            foreach (var tmpLink in links)
+            {
+                tmpLink.Order -= 1;
+            }
+
+            context.BulletinBoardPageLinks.Remove(link);
+
+            context.SaveChanges();
+
+            return new JsonResult(new { successful = true, error = $"", link });
+        }
     }
 }

ZpcBulletinBoard/Pages/Layouts/Partials/_LayoutSidenav.cshtml

@@ -16,13 +16,13 @@
 
     <ul class="sidenav-inner">
         <li class="sidenav-item@(currentPage.StartsWith("/Pages/")? " active" : "")">
-            <a asp-page="/Pages/Index" class="sidenav-link"><i class="sidenav-icon fas fa-home"></i><div>Strani</div></a>
+            <a asp-page="/Pages/Index" class="sidenav-link"><i class="sidenav-icon far fa-file"></i><div>Strani</div></a>
         </li>
         <li class="sidenav-item@(currentPage.StartsWith("/Boards/") ? " active" : "")">
-            <a asp-page="/Boards/Index" class="sidenav-link"><i class="sidenav-icon fas fa-home"></i><div>Oglasne deske</div></a>
+            <a asp-page="/Boards/Index" class="sidenav-link"><i class="sidenav-icon fab fa-flipboard"></i><div>Oglasne deske</div></a>
         </li>
         <li class="sidenav-item@(currentPage.StartsWith("/BoardsLinks/") ? " active" : "")">
-            <a asp-page="/BoardsLinks/Index" class="sidenav-link"><i class="sidenav-icon fas fa-home"></i><div>Povezave</div></a>
+            <a asp-page="/BoardsLinks/Index" class="sidenav-link"><i class="sidenav-icon fas fa-link"></i><div>Povezave</div></a>
         </li>
     </ul>
 </div>

ZpcBulletinBoard/Pages/Pages/Index.cshtml

@@ -7,19 +7,8 @@
 }
 
 @section Styles {
+    <link rel="stylesheet" href="~/css/pages/index.css" asp-append-version="true" />
 
-    <style type="text/css">
-        .table > tbody > tr > td:nth-child(2),
-        .table > thead > tr > th:nth-child(2){
-            width: 200px
-        }
-        .table > tbody > tr > td:nth-child(3),
-        .table > thead > tr > th:nth-child(3),
-        .table > tbody > tr > td:nth-child(4),
-        .table > thead > tr > th:nth-child(4) {
-            width: 100px
-        }
-    </style>
 }
 
 <h4 class="d-flex justify-content-between align-items-center w-100 font-weight-bold py-1 mb-4">
@@ -29,79 +18,14 @@
             /</span> Pregled
     </span>
 </h4>
-<div class="row">
-    <div class="col-12 mb-2 text-right">
-        <form method="get">
-            <div class="btn-group">
-                <input class="form-control" type="text" value="" placeholder="Iskanje..." autocomplete="off">
-                <input id="inpOpenEditorForPage" type="hidden" name="openEditorForPage" asp-for="OpenEditorForPage" />
-                <div class="btn-group" title="Columns">
-                    <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-label="Nastavitve" title="Nastavitve">
-                        <i class="opacity-75 ion ion-md-apps"></i>
-                        <span class="caret"></span>
-                    </button>
-                    <div class="dropdown-menu dropdown-menu-right">
-@*                         <label class="dropdown-item">
-                            <input type="checkbox" name="openProjects" @ViewData["OpenProjects"]> <span>Odprti</span>
-                        </label>
-                        <label class="dropdown-item">
-                            <input type="checkbox" name="inProductionProjects" @ViewData["InProductionProjects"]> <span>V izdelavi</span>
-                        </label>
-                        <label class="dropdown-item">
-                            <input type="checkbox" name="finishedProjects" @ViewData["FinishedProjects"]> <span>Zaključeni projekti</span>
-                        </label>
-                        <label class="dropdown-item">
-                            <input type="checkbox" name="offerProjects" @ViewData["OffersProjects"]> <span>Ponudbe</span>
-                        </label> *@
-                    </div>
-                </div>
-                <button id="btnRefresh" type="submit" class="btn btn-secondary" aria-label="Osveži" title="Osveži">
-                    <i class="opacity-75 ion ion-md-refresh"></i>
-                </button>
-            </div>
-        </form>
-    </div>
-</div>
+
 <div class="card">
     <h6 class="card-header">
-        Seznam strani
+        Strani
     </h6>
-    <table class="table card-table table-hover">
-        <thead>
-        <tr>
-            <th>
-                @Html.DisplayNameFor(model => model.Pages[0].Name)
-            </th>
-            <th>
-                @Html.DisplayNameFor(model => model.Pages[0].Type)
-            </th>
-            <th>
-                @Html.DisplayNameFor(model => model.Pages[0].Ratio)
-            </th>
-            <th></th>
-        </tr>
-        </thead>
-        <tbody>
-        @foreach (var item in Model.Pages)
-        {
-            <tr data-id="@item.IdBulletinBoardPage">
-                <td>
-                    @Html.DisplayFor(modelItem => item.Name)
-                </td>
-                    <td>
-                        @Html.DisplayFor(modelItem => item.Type)
-                    </td>
-                <td>
-                    @Html.DisplayFor(modelItem => item.Ratio)
-                </td>
-                <td style="text-align:right;">
-                    <a class="btn btn-xs icon-btn btn-outline-primary borderless" href="javascript:;" onclick="rowOpenEditor(this);" data-toggle="tooltip" data-placement="top" title="Urejevalnik" data-state="secondary"><i class="far fa-edit"></i></a>
-                    <a class="btn btn-xs icon-btn btn-outline-secondary borderless" href="javascript:;" onclick="openModalEditPage(this);" data-toggle="tooltip" data-placement="top" title="Urejanje" data-state="secondary"><i class="fas fa-pencil-alt"></i></a>
-                </td>
-            </tr>
-        }
-        </tbody>
-    </table>
+    <div class="div-pages">
+
+    </div>
     <div class="card-footer py-3 text-right">
         <a href="javascript:;" onclick="openModalAddPage();" class="btn btn-primary">Dodaj novo</a>
     </div>

ZpcBulletinBoard/Pages/Pages/Index.cshtml.cs

@@ -16,17 +16,19 @@ namespace ZpcBulletinBoard.Pages.Pages
     [Authorize]
     public class IndexModel(ApplicationDbContext context, IWebHostEnvironment webHostEnvironment) : PageModel
     {
-        public IList<BulletinBoardPage> Pages { get;set; }
 
-        public int OpenEditorForPage = 0;
 
-        public async Task OnGetAsync(int? openEditorForPage = null)
+        public void OnGet()
         {
-            OpenEditorForPage = openEditorForPage ?? 0;
-            Pages = await context.BulletinBoardPage.ToListAsync();
         }
 
         //Get
+        public IActionResult OnGetPages()
+        {
+            var pages = context.BulletinBoardPage.ToList();
+            return new JsonResult(new { successful = true, error = $"", pages });
+        }
+
         public IActionResult OnGetPage(int id)
         {
             var page = context.BulletinBoardPage.Include(x => x.Links)

ZpcBulletinBoard/wwwroot/css/pages/index.css

@@ -0,0 +1,38 @@
+.div-page {
+    float: left;
+    text-align: center;
+    width: 200px;
+    height: 230px;
+    border: 1px solid rgba(24, 28, 33, 0.06);
+    border-radius: 0.25rem;
+    margin-right: 5px;
+    margin-top: 5px;
+    margin-left: 10px;
+}
+
+.div-page:hover {
+    cursor: grab;
+    /* background-color: rgba(24, 28, 33, 0.06); */
+    border-color: blue;
+}
+
+.page-active {
+    background-color: rgba(128, 171, 226, 0.5);
+}
+
+.div-page > h5 {
+    margin-top: 5px;
+    margin-bottom: 2px;
+}
+
+.div-page > i {
+    margin-top: 10px;
+}
+
+
+.img-thumbnail{
+    height: 170px;
+    width: 170px;
+    margin-left: 15px;
+    margin-top: 5px;
+}

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

@@ -47,26 +47,30 @@ function loadBoards(){
 }
 
 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"));
+
+    // if (ev.dataTransfer.getData("idPage")){
+    //     ev.preventDefault();
+    // }
+}
+  
+function dragPage(ev, el) {
+    $('.available-page[data-dragg="1"]').removeAttr('data-dragg');
+    $(el).attr('data-dragg', '1');
+}
+  
+function dropPage(ev, el) {
+    ev.preventDefault();
+    let idPage = parseInt($('.available-page[data-dragg="1"]').attr('data-id'));
+    if (isNaN(idPage)){
+        return;
+    }
+    $('.available-page[data-dragg="1"]').removeAttr('data-dragg');
     let idBoard = parseInt($(el).attr('data-idboard'));
+    insertPageToBoard(idBoard, idPage);
+}
+
+function insertPageToBoard(idBoard, idPage){
     $.blockUI();
     $.ajax({
         type: "POST",
@@ -94,19 +98,196 @@ function allowDropPage(ev) {
             $.unblockUI();
         }
     });  
-  }
+}
 
-  function addPageToBoard(idBoard, link){
+function addPageToAllBoards(el){
+    let idPage = parseInt($(el).parent().parent().attr('data-id'));
+
+    $('.div-pages').each(function (i, e){
+        let idBoard = parseInt($(e).attr('data-idboard'));
+        insertPageToBoard(idBoard, idPage);
+    });
+}
+
+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}'>
+    div.append(`<div class="div-page" data-id="${link.idLink}" data-idPage='${link.bulletinBoardPage.idBulletinBoardPage}' data-duration='${link.duration}'>
     <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>
+        <a href="javascript:;" class="btn btn-xs icon-btn btn-outline-primary borderless" onclick="moveLink(this, -1)"><i class="fas fa-chevron-left"></i></a>
+        <a href="javascript:;" class="btn btn-xs icon-btn btn-outline-secondary borderless" onclick="setDuration(this)"><i class="far fa-clock"></i></a>
+        <a href="javascript:;" class="btn btn-xs icon-btn btn-outline-danger borderless" onclick="deleteLink(this)"><i class="fas fa-trash-alt"></i></a>
+        <a href="javascript:;" class="btn btn-xs icon-btn btn-outline-primary borderless" onclick="moveLink(this, 1)"><i class="fas fa-chevron-right"></i></a>
     </div>
 </div>`);
-  }
+}
+
+function deleteLink(el){
+    let idLink = parseInt($(el).parent().parent().attr('data-id'));
+    if (isNaN(idLink)){
+        return;
+    }
+
+    $.blockUI();
+    $.ajax({
+        type: "DELETE",
+        beforeSend: function(xhr) {
+            xhr.setRequestHeader("XSRF-TOKEN",
+                $('input:hidden[name="__RequestVerificationToken"]').val());
+        },
+        url: "/BoardsLinks/Index/?handler=Link",
+        data: { 
+            idLink
+        },
+        success: function(data) {
+            if (data.successful){
+                $(el).parent().parent().remove();
+            } 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 moveLink(el, direction){
+    let divStart = $(el).parent().parent();
+    let idLinkStart = parseInt(divStart.attr('data-id'));
+    if (isNaN(idLinkStart)){
+        return;
+    }
+
+    let divEnd;
+    let idLinkEnd;
+    if (direction == -1){
+        divEnd = divStart.prev();
+    } else {
+        divEnd = divStart.next();
+    }
+
+    idLinkEnd = parseInt(divEnd.attr('data-id'));
+
+    if (isNaN(idLinkEnd)){
+        return;
+    }
+
+    $.blockUI();
+    $.ajax({
+        type: "POST",
+        beforeSend: function(xhr) {
+            xhr.setRequestHeader("XSRF-TOKEN",
+                $('input:hidden[name="__RequestVerificationToken"]').val());
+        },
+        url: "/BoardsLinks/Index/?handler=SwapLinkOrder",
+        data: { 
+            idLinkStart,
+            idLinkEnd
+        },
+        success: function(data) {
+            if (data.successful){
+                if (direction == -1){
+                    divStart.insertBefore(divEnd);
+                } else {
+                    divStart.insertAfter(divEnd);
+                }
+            } 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 setDuration(el){
+    let div = $(el).parent().parent();
+    let idLink = parseInt(div.attr('data-id'));
+    if (isNaN(idLink)){
+        return;
+    }
+    let step = 5;
+    let duration = div.attr('data-duration');
+    Swal.fire({
+        title: 'Trajanje [s]',
+        html: `
+          <input
+            type="number"
+            value="${duration}"
+            step="${step}"
+            class="swal2-input"
+            id="range-value">`,
+        input: 'range',
+        inputValue: duration,
+        inputAttributes: {
+          min: '5',
+          max: '3600',
+          step: step.toString(),
+        },
+        confirmButtonText: 'Potrdi',
+        cancelButtonText: 'Prekliči',
+        showCancelButton: true,
+        didOpen: () => {
+          const inputRange = Swal.getInput();
+          const inputNumber = Swal.getPopup().querySelector('#range-value');
+      
+          // remove default output
+          Swal.getPopup().querySelector('output').style.display = 'none'
+          inputRange.style.width = '100%'
+      
+          // sync input[type=number] with input[type=range]
+          inputRange.addEventListener('input', () => {
+            inputNumber.value = inputRange.value
+          })
+      
+          // sync input[type=range] with input[type=number]
+          inputNumber.addEventListener('change', () => {
+            inputRange.value = inputNumber.value
+          })
+        },
+      }).then((result) => {
+        console.log(result);
+        if (result.isConfirmed) {
+            let newDuration = parseInt(result.value);
+            $.blockUI();
+            $.ajax({
+                type: "POST",
+                beforeSend: function(xhr) {
+                    xhr.setRequestHeader("XSRF-TOKEN",
+                        $('input:hidden[name="__RequestVerificationToken"]').val());
+                },
+                url: "/BoardsLinks/Index/?handler=LinkDuration",
+                data: { 
+                    idLink,
+                    duration: newDuration
+                },
+                success: function(data) {
+                    if (data.successful){
+                        div.attr('data-duration', data.link.duration);
+                    } 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();
+                }
+            });  
+        }
+      });
+}

ZpcBulletinBoard/wwwroot/js/pages/index.js

@@ -4,16 +4,61 @@ $(function(){
         $('#inpOpenEditorForPage').val(0);
         openEditor(openEditorForPage);
     }
-    $('[data-toggle="tooltip"]').tooltip();
+    loadPages();
 });
 
+function loadPages(){
+    $.blockUI();
+    $.ajax({
+        type: "GET",
+        url: "/Pages/Index/?handler=Pages",
+        data: {
+        },
+        success: function (data) {
+            if (data.successful){
+                let pageContent = $('.div-pages');
+                pageContent.empty();
+
+                if (data.pages){
+                    data.pages.forEach((page) => {
+                        addPageToDiv(page);
+                    });
+                }
+            } else {
+                Swal.fire('Napaka', data.error, 'error');
+                console.log(data);
+            }
+            $.unblockUI();
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            console.log(xhr);
+            alert(xhr.responseText);
+            $.unblockUI();
+        }
+    });
+}
+
+function addPageToDiv(page){
+    let element = $(`<div class="div-page" data-id="${page.idBulletinBoardPage}">
+    <img class="img-thumbnail rounded" src="/bulletin-board-images/pages/${page.image}" alt="page image" />
+    <small>${page.name}</small>
+    <div class="tools">
+        <a href="javascript:;" class="btn btn-xs icon-btn btn-outline-primary borderless" onclick="pageOpenEditor(this);" data-toggle="tooltip" data-placement="top" title="Urejevalnik" data-state="secondary"><i class="far fa-edit"></i></a>
+        <a href="javascript:;" class="btn btn-xs icon-btn btn-outline-secondary borderless" onclick="openModalEditPage(this);" data-toggle="tooltip" data-placement="top" title="Urejanje" data-state="secondary"><i class="fas fa-pencil-alt"></i></a>
+        <a href="javascript:;" class="btn btn-xs icon-btn btn-outline-danger borderless" onclick="deletePage(this)"><i class="fas fa-trash-alt"></i></a>
+    </div>
+</div>`);
+    $('.div-pages').append(element);
+
+    element.find('[data-toggle="tooltip"]').tooltip();
+}
+
 function openModalAddPage(){
     $('#inpModalAddEditPageIdPage').val(0);
     $('#inpModalAddEditPageName').val('');
     $('#divModalAddEditPage').modal('show');
 }
 
-
 function openModalEditPage(el){
     let idBulletinBoardPage = parseInt($(el).parent().parent().attr('data-id'));
     if (isNaN(idBulletinBoardPage)){
@@ -105,7 +150,7 @@ function saveModalAddEditPage(){
     });
 }
 
-function rowOpenEditor(el){
+function pageOpenEditor(el){
     openEditor(parseInt($(el).parent().parent().attr('data-id')));
 }