From dc24cb22a6d221fd9eee9dc777e3b4ab86449d68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20=C5=A0taleker?= <david@infosys.si>
Date: Wed, 28 Feb 2024 11:17:12 +0100
Subject: [PATCH] editor

---
 ZpcBulletinBoard/Data/ApplicationDbContext.cs |   1 +
 ZpcBulletinBoard/Pages/Editor/EditMain.cshtml |  52 +++++++-
 .../Pages/Editor/EditMain.cshtml.cs           |  45 ++++++-
 .../wwwroot/css/editor/editor-main.css        |  33 +++++
 .../wwwroot/js/editor/edit-main.js            | 123 +++++++++++++++++-
 5 files changed, 249 insertions(+), 5 deletions(-)

diff --git a/ZpcBulletinBoard/Data/ApplicationDbContext.cs b/ZpcBulletinBoard/Data/ApplicationDbContext.cs
index e70a294..8cf4b43 100644
--- a/ZpcBulletinBoard/Data/ApplicationDbContext.cs
+++ b/ZpcBulletinBoard/Data/ApplicationDbContext.cs
@@ -15,6 +15,7 @@ namespace ZpcBulletinBoard.Data
     {
         public DbSet<Note> Notes { get; set; }
         public DbSet<BulletinBoard> BulletinBoards { get; set; }
+        public DbSet<BulletinBoardPage> BulletinBoardPage { get; set; }
 
         protected override void OnModelCreating(ModelBuilder modelBuilder)
         {
diff --git a/ZpcBulletinBoard/Pages/Editor/EditMain.cshtml b/ZpcBulletinBoard/Pages/Editor/EditMain.cshtml
index fdcc498..932a4de 100644
--- a/ZpcBulletinBoard/Pages/Editor/EditMain.cshtml
+++ b/ZpcBulletinBoard/Pages/Editor/EditMain.cshtml
@@ -10,6 +10,29 @@
     <link rel="stylesheet" href="~/css/editor/editor-main.css" asp-append-version="true"/>
 }
 
+<div class="row">
+    <div class="col-12">
+        <div class="card">
+            <div class="card-body div-main-body">
+                <div class="form-inline div-tools">
+                    <label id="lblBoardName" class="control-label"></label>
+                    <button class="btn btn-sm btn-primary" onclick="openModalSelectBoard();"><i class="fas fa-mouse-pointer"></i>&nbsp;Izberi oglasno desko</button>
+                </div>
+                <div class="div-pages">
+                    <div data-idpage="-100" class="page-active">
+                        <h5>Ime page</h5>
+                        <small>20 sekund</small>
+                    </div>
+                    <div class="add-page" onclick="openModalBoardAddNewPage();">
+                        <i class="fas fa-plus fa-2x"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+
 <div class="row">
     <div class="col-12">
         <div class="card">
@@ -59,7 +82,34 @@
                 </table>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-primary" onclick="saveModalEditNote();">Save changes</button>
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div id="divModalAddEditPage" class="modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 id="titleModalAddEditPage" class="modal-title">List</h5>
+                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <input class="input-hidden" id="inpModalAddEditPageId" />
+                <div class="form-group">
+                    <label class="control-label">Ime</label>
+                    <input id="inpModalAddEditPageName" type="text" class="form-control"/>
+                </div>
+                <div class="form-group">
+                    <label class="control-label">Trajanje</label>
+                    <input id="inpModalAddEditPageDuration" type="number" class="form-control"/>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary" onclick="boardAddNewPage();">Shrani</button>
                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
             </div>
         </div>
diff --git a/ZpcBulletinBoard/Pages/Editor/EditMain.cshtml.cs b/ZpcBulletinBoard/Pages/Editor/EditMain.cshtml.cs
index 92782c5..fb8085c 100644
--- a/ZpcBulletinBoard/Pages/Editor/EditMain.cshtml.cs
+++ b/ZpcBulletinBoard/Pages/Editor/EditMain.cshtml.cs
@@ -1,8 +1,9 @@
-using System.Data.Entity;
+using Microsoft.EntityFrameworkCore;
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Mvc.RazorPages;
 using ZpcBulletinBoard.Data;
+using ZpcBulletinBoard.Models.Editor;
 
 namespace ZpcBulletinBoard.Pages.Editor
 {
@@ -16,6 +17,7 @@ namespace ZpcBulletinBoard.Pages.Editor
 
         }
 
+        //Get
         public IActionResult OnGetBoards()
         {
             var boards= context.BulletinBoards.ToList();
@@ -27,8 +29,47 @@ namespace ZpcBulletinBoard.Pages.Editor
         {
             var board = context.BulletinBoards.Include(x => x.Pages)
                 .FirstOrDefault(x => x.IdBulletinBoard == id);
+            //Ce je ntre board pole json vrze vn
+            foreach (var bulletinBoardPage in board.Pages)
+            {
+                bulletinBoardPage.BulletinBoard = null;
+            }
+            return board == null 
+                ? new JsonResult(new { successful = false, error = $"Board with ID {id} not exists!"}) 
+                : new JsonResult(new { successful = true, error = $"", board });
+        }
 
-            return new JsonResult(new { successful = true, error = $"", board });
+        public IActionResult OnGetPage(int id)
+        {
+            var page = context.BulletinBoardPage.Include(x => x.Notes)
+                .FirstOrDefault(x => x.IdBulletinBoardPage == id);
+
+            return page == null 
+                ? new JsonResult(new { successful = false, error = $"Page with ID {id} not exists!" }) 
+                : new JsonResult(new { successful = true, error = $"", page });
+        }
+
+        //Post
+        public IActionResult OnPostBoardPage(BulletinBoardPage page)
+        {
+            if (page.IdBulletinBoardPage <= 0)
+            {
+                context.BulletinBoardPage.Add(page);
+                context.SaveChanges();
+            }
+            else
+            {
+                var tmpPage = context.BulletinBoardPage.FirstOrDefault(x => x.IdBulletinBoardPage == page.IdBulletinBoardPage);
+                if (tmpPage == null)
+                    return new JsonResult(new { successful = false, error = $"Page with ID {page.IdBulletinBoardPage} not exists!", page });
+
+                tmpPage.Name = page.Name;
+                tmpPage.Duration = page.Duration;
+
+                context.SaveChanges();
+            }
+
+            return new JsonResult(new { successful = true, error = $"", page });
         }
     }
 }
diff --git a/ZpcBulletinBoard/wwwroot/css/editor/editor-main.css b/ZpcBulletinBoard/wwwroot/css/editor/editor-main.css
index 9153b49..852dfe1 100644
--- a/ZpcBulletinBoard/wwwroot/css/editor/editor-main.css
+++ b/ZpcBulletinBoard/wwwroot/css/editor/editor-main.css
@@ -51,3 +51,36 @@
 .input-hidden {
     display: none;
 }
+
+.div-pages {
+    margin: 5px;
+    height: 50px;
+}
+
+.div-pages > div {
+    float: left;
+    text-align: center;
+    width: 100px;
+    height: 50px;
+    border:1px solid rgba(24, 28, 33, 0.06);
+    border-radius: 0.25rem;
+    margin-right: 5px;
+}
+
+.div-pages > div:hover {
+    cursor: pointer;
+    background-color: rgba(24, 28, 33, 0.06);
+}
+
+.page-active {
+    background-color: rgba(128, 171, 226, 0.5);
+}
+
+.div-pages > div > h5 {
+    margin-top: 5px;
+    margin-bottom: 2px;
+}
+
+.div-pages > div > i {
+    margin-top: 10px;
+}
\ No newline at end of file
diff --git a/ZpcBulletinBoard/wwwroot/js/editor/edit-main.js b/ZpcBulletinBoard/wwwroot/js/editor/edit-main.js
index fb5f9e4..89fc4f0 100644
--- a/ZpcBulletinBoard/wwwroot/js/editor/edit-main.js
+++ b/ZpcBulletinBoard/wwwroot/js/editor/edit-main.js
@@ -128,6 +128,8 @@ function loadBoard(id){
         },
         success: function (data) {
             if (data.successful){
+                $('#lblBoardName').text(data.board.name);
+                $('#lblBoardName').attr('data-idboard', data.board.idBulletinBoard);
                 let placeholder = $('#divPlaceholder');
                 placeholder.empty();
                 console.log(data);
@@ -142,10 +144,15 @@ function loadBoard(id){
                     'background-color': 'white',
                     'padding': '5px'
                 });
-                loadNotes();
+                $('[data-idpage]').remove();
+                if (data.board.pages){
+                    data.board.pages.forEach(element => {
+                        boardAddPage(element);
+                    });
+                }
             } else {
                 console.log(data);
-                alert(data);
+                alert(data); //TODO swal
             }
             $.unblockUI();
         },
@@ -157,3 +164,115 @@ function loadBoard(id){
     });
 }
 
+function openModalBoardAddNewPage(){
+    $('#titleModalAddEditPage').html('Dodaj list');
+    $('#inpModalAddEditPageName').val('');
+    $('#inpModalAddEditPageId').val(0);
+    $('#inpModalAddEditPageDuration').val('30');
+    $('#divModalAddEditPage').modal('show');
+}
+
+function openModalBoardEditPage(id){
+    $('#titleModalAddEditPage').html('Uredi list');
+    $.blockUI();
+    $.ajax({
+        type: "GET",
+        url: "/Editor/EditMain/?handler=Page",
+        data: {
+            id
+        },
+        success: function (data) {
+            if (data.successful){
+                $('#inpModalAddEditPageId').val(data.page.idBulletinBoardPage);
+                $('#inpModalAddEditPageName').val(data.page.name);
+                $('#inpModalAddEditPageDuration').val(data.page.duration);
+                $('#divModalAddEditPage').modal('show');
+                
+            } else {
+                console.log(data);
+                alert(data); //TODO swal
+            }
+            $.unblockUI();
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            console.log(xhr);
+            alert(xhr.responseText);
+            $.unblockUI();
+        }
+    });
+}
+
+function boardAddNewPage(){
+    let idBulletinBoardPage = parseInt($('#inpModalAddEditPageId').val());
+    let name = $('#inpModalAddEditPageName').val();
+    let duration = parseInt($('#inpModalAddEditPageDuration').val());
+    let idBulletinBoard = parseInt($('#lblBoardName').attr('data-idboard'));
+    if (name === ''){
+        //TODO Swall
+        return;
+    }
+
+    if (isNaN(duration)){
+        //TODO swall
+        return;
+    }
+
+    if (isNaN(idBulletinBoard)){
+        return;
+    }
+
+    $.blockUI();
+    $.ajax({
+        type: "POST",
+        beforeSend: function(xhr) {
+            xhr.setRequestHeader("XSRF-TOKEN",
+                $('input:hidden[name="__RequestVerificationToken"]').val());
+        },
+        url: "EditMain/?handler=BoardPage",
+        data: { page : {
+            name,
+            duration,
+            idBulletinBoard,
+            idBulletinBoardPage
+        } },
+        success: function(data) {
+            if (data.successful){
+                boardAddPage(data.page);
+                selectPage(data.page.idBulletinBoardPage);
+                $('#divModalAddEditPage').modal('hide');
+            } else {
+                alert(data.error);
+                //TODO swall
+            }
+            $.unblockUI();
+        },
+        error: function (xhr, ajaxOptions, thrownError) {
+            alert(xhr.responseText);
+            $.unblockUI();
+        }
+    });
+}
+
+function boardAddPage(page){
+    let element = $(`<div data-idpage='${page.idBulletinBoardPage}'>
+    <h5>${page.name}</h5>
+    <small>${page.duration} sekund</small>
+</div>`);
+    element.insertBefore(".add-page");
+    element.on('click', function (){
+        let id = parseInt($(this).attr('data-idpage'));
+        selectPage(id);
+    });
+    element.on('dblclick', function (){
+        let id = parseInt($(this).attr('data-idpage'));
+        openModalBoardEditPage(id);
+    });
+}
+
+function selectPage(id){
+    $('[data-idpage]').removeClass('page-active');
+    $('[data-idpage="' + id + '"]').addClass('page-active');
+}
+
+
+