david/zpc-bulletin-board
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dev

Browse Source
This commit is contained in:
David Štaleker
2024-03-10 18:58:24 +01:00
parent 52f4900103
commit c4883e4296
39 changed files with 2068 additions and 1227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

307
ZpcBulletinBoard/wwwroot/js/pages/edit-main.js Normal file
View File

@@ -0,0 +1,307 @@
$(function () {
$('.div-note-edit-color>div').on('click', function(){
$('.div-note-edit-color>div').removeClass('active');
$(this).addClass('active');
});
$(document).on('keyup', function(e){
if (e.originalEvent.key === 'Delete' || e.originalEvent.key === 'Backspace'){
let id = parseInt($('.div-note.active').attr('data-id'));
if (isNaN(id)){
return;
}
deleteNote(id);
}
});
loadPage();
});
let divCanvas;
let canWidth;
let canHeight;
let notes = [];
function addNewNote(){
let idPage = parseInt($('#inpIdPage').val());
if (isNaN(idPage) || idPage <= 0){
Swal.fire('Stran ni izbrana', '', 'warning');
return;
}
let tmpId = -1;
let tmpZindex = 50;
notes.forEach(note => {
if (note.id <= tmpId){
tmpId = note.id -1;
}
if (note.zindex >= tmpZindex){
tmpZindex = note.zindex + 1;
}
});
let note = new Note(tmpId, divCanvas, 0, 0, 400, 240, 'Vnesi besedilo', 'note-color-white', tmpZindex);
notes.push(note);
note.refresh();
}
function noteChangeZindex(id, front){
let note = getNote(id);
let maxIndex = 0;
let minIndex = 999999999999;
notes.forEach(tmpNote => {
if (tmpNote.zindex > maxIndex){
maxIndex = tmpNote.zindex;
}
if (tmpNote.zindex < minIndex){
minIndex = tmpNote.zindex;
}
});
if (front){
//ce je isti ga potem ne premikam
if (note.zindex != maxIndex){
note.zindex = maxIndex + 1;
}
} else {
if (note.zindex != minIndex){
note.zindex = minIndex - 1;
}
}
note.refresh();
}
function deleteNote(id){
let note = getNote(id);
note.element.remove();
let newArray = [];
notes.forEach(tmpNote => {
if (tmpNote.id != note.id){
newArray.push(tmpNote);
}
});
notes = newArray;
}
function openModalEditNote(id){
$('#inpModalEditNoteIdNote').val(id);
note = getNote(id);
$('#divModalEditNote').modal('show');
$('#divModalEditNoteSummernote').summernote('destroy');
$('#divModalEditNoteSummernote').html(note.content);
$('#divModalEditNoteSummernote').summernote({height: 400,});
$('.div-note-edit-color>div').removeClass('active');
$('.div-note-edit-color>.' + note.colorClass).addClass('active');
}
function saveModalEditNote(){
let idNote = parseInt($('#inpModalEditNoteIdNote').val());
note = getNote(idNote);
note.content = $('#divModalEditNoteSummernote').summernote('code');
note.colorClass = $('.div-note-edit-color>.active').attr('class').replace(' active', '');
note.refresh();
$('#divModalEditNote').modal('hide');
}
function getNote(id){
let note;
notes.forEach(e => {
if (e.id === id){
note = e;
}
});
return note;
}
function loadBoard(id){
$.blockUI();
$.ajax({
type: "GET",
url: "/Pages/EditMain/?handler=Board",
data: {
id
},
success: function (data) {
if (data.successful){
$('.div-board>h5').text(data.board.name);
$('.div-board').attr('data-idboard', data.board.idBulletinBoard);
$('[data-idpage]').remove();
if (data.board.pages){
data.board.pages.forEach(element => {
boardAddPage(element);
});
}
} else {
Swal.fire('Napaka', data.error, 'error');
console.log(data);
}
$.unblockUI();
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(xhr);
alert(xhr.responseText);
$.unblockUI();
}
});
}
function loadPage(){
let id = parseInt($('#inpIdPage').val());
$.blockUI();
$.ajax({
type: "GET",
url: "/Pages/EditMain/?handler=Page",
data: {
id
},
success: function (data) {
if (data.successful){
let placeholder = $('#divPlaceholder');
placeholder.empty();
let tmpSplit = data.page.ratioString.split(':');
canWidth = placeholder.width();
canHeight = canWidth / (parseFloat(tmpSplit[0]) / parseFloat(tmpSplit[1]));
divCanvas = $(`<div id='divCanvas'></div>`);
placeholder.append(divCanvas);
divCanvas.css({
'width': '100%',
'height': canHeight + 'px',
'background-color': 'white',
'padding': '5px'
});
notes = [];
$('.div-note').remove();
if (data.page.notes){
data.page.notes.forEach(el => {
let note = new Note(el.idNote, divCanvas, el.x, el.y, el.width, el.height, el.content, el.colorClass, el.zindex);
notes.push(note);
note.refresh();
});
}
} else {
Swal.fire('Napaka', data.error, 'error');
console.log(data);
}
$.unblockUI();
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(xhr);
alert(xhr.responseText);
$.unblockUI();
}
});
}
function saveNotes(){
let idBulletinBoardPage = parseInt($('#inpIdPage').val());
if (isNaN(idBulletinBoardPage) || idBulletinBoardPage <= 0){
Swal.fire('Stran ni izbrana', '', 'warning');
return;
}
//skrijemo okvirje
$('.div-note.active').removeClass('active');
let array = [];
notes.forEach(note => {
array.push({
idNote: note.id,
idBulletinBoardPage,
x: note.x,
y: note.y,
width: note.width,
height: note.height,
content: note.content,
colorClass: note.colorClass,
zindex: note.zindex
})
});
$.blockUI();
$.ajax({
type: "POST",
beforeSend: function(xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
url: "EditMain/?handler=Notes",
data: {
idBulletinBoardPage,
notes: array
},
success: function(data) {
if (data.successful){
savePageImage();
} else {
Swal.fire('Napaka', data.error, 'error');
console.log(data);
}
$.unblockUI();
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.responseText);
$.unblockUI();
}
});
}
function savePageImage(){
let idPage = parseInt($('#inpIdPage').val());
if (isNaN(idPage) || idPage <= 0){
Swal.fire('Stran ni izbrana', '', 'warning');
return;
}
$.blockUI();
var node = document.getElementById('divCanvas');
htmlToImage.toSvg(node)
.then(function (base64String) {
fetch(base64String)
.then(res => res.blob())
.then(blob => {
let formData = new FormData();
formData.append("file", blob);
formData.append("idPage", idPage);
$.ajax({
type: "POST",
beforeSend: function(xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
url: "/Pages/EditMain/?handler=BoardPageImage",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(data) {
if (data.successful){
loadPage(idPage);
} else {
Swal.fire('Napaka', data.error, 'error');
console.log(data);
}
$.unblockUI();
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.responseText);
$.unblockUI();
}
});
});
})
.catch(function (error) {
$.unblockUI();
console.error('oops, something went wrong!', error);
});
}
function selectNote(id){
$('.div-note.active').removeClass('active');
$('.div-note[data-id="' + id + '"]').addClass('active');
}

216
ZpcBulletinBoard/wwwroot/js/pages/index.js Normal file
View File

@@ -0,0 +1,216 @@
$(function(){
let openEditorForPage = parseInt($('#inpOpenEditorForPage').val());
if (!isNaN(openEditorForPage) && openEditorForPage > 0){
$('#inpOpenEditorForPage').val(0);
openEditor(openEditorForPage);
}
$('[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)){
Swal.fire('Napaka ni id strani!', '', 'error');
return;
}
$.blockUI();
$.ajax({
type: "GET",
url: "/Pages/Index/?handler=Page",
data: {
id: idBulletinBoardPage
},
success: function (data) {
if (data.successful){
$('#inpModalAddEditPageIdPage').val(data.page.idBulletinBoardPage);
$('#inpModalAddEditPageName').val(data.page.name);
$('#selModalAddEditPageRatio').val(data.page.ratio).trigger('change');
$('#selModalAddEditPageType').val(data.page.type).trigger('change');
$('#divModalAddEditPage').modal('show');
} else {
Swal.fire('Napaka', data.error, 'error');
console.log(data);
}
$.unblockUI();
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(xhr);
alert(xhr.responseText);
$.unblockUI();
}
});
}
function saveModalAddEditPage(){
let name = $('#inpModalAddEditPageName').val();
let ratio = parseInt($('#selModalAddEditPageRatio').val());
let type = parseInt($('#selModalAddEditPageType').val());
let idBulletinBoardPage = parseInt($('#inpModalAddEditPageIdPage').val());
if (name === ''){
Swal.fire('Ime ni vneseno', '', 'warning');
return;
}
if (isNaN(ratio)){
Swal.fire('Razmerje ni vneseno', '', 'warning');
return;
}
if (isNaN(type)){
Swal.fire('Tip ni vnesen', '', 'warning');
return;
}
$.blockUI();
$.ajax({
type: "POST",
beforeSend: function(xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
url: "/Pages/Index/?handler=BoardPage",
data: { page : {
idBulletinBoardPage,
name,
ratio,
type
}},
success: function(data) {
if (data.successful){
$('#divModalAddEditPage').modal('hide');
if (idBulletinBoardPage > 0){
//Ce je edit ne odprem editorja
$('#inpOpenEditorForPage').val(0);
} else {
$('#inpOpenEditorForPage').val(data.page.idBulletinBoardPage);
}
$('#btnRefresh').trigger('click');
} else {
Swal.fire('Napaka', data.error, 'error');
console.log(data);
}
$.unblockUI();
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.responseText);
$.unblockUI();
}
});
}
function rowOpenEditor(el){
openEditor(parseInt($(el).parent().parent().attr('data-id')));
}
function openEditor(id){
$.blockUI();
$.ajax({
type: "GET",
url: "/Pages/Index/?handler=Page",
data: {
id
},
success: function (data) {
if (data.successful){
switch (data.page.type){
case 1: //Editor notes
window.location.href = "/Pages/EditMain?idPage=" + data.page.idBulletinBoardPage;
break;
case 2: //Picture
$('#inpModalPageEditorPictureIdPage').val(data.page.idBulletinBoardPage);
$('#imgModalPageEditorPicture').attr("src","/bulletin-board-images/pages/" + data.page.image);
$('#divModalPageEditorPicture').modal('show');
break;
case 3: //Link
$('#inpModalPageEditorLinkIdPage').val(data.page.idBulletinBoardPage);
$('#inpModalPageEditorLinkLink').val(data.page.externalLink);
$('#divModalPageEditorLink').modal('show');
break;
}
} else {
Swal.fire('Napaka', data.error, 'error');
console.log(data);
}
$.unblockUI();
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(xhr);
alert(xhr.responseText);
$.unblockUI();
}
});
}
function saveModalPageEditorLink(){
let link = $('#inpModalPageEditorLinkLink').val();
let idPage = parseInt($('#inpModalPageEditorLinkIdPage').val());
$.blockUI();
$.ajax({
type: "POST",
beforeSend: function(xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
url: "/Pages/Index/?handler=BoardPageLink",
data: { idPage, link},
success: function(data) {
if (data.successful){
$('#divModalAddEditPage').modal('hide');
$('#btnRefresh').trigger('click');
} else {
Swal.fire('Napaka', data.error, 'error');
console.log(data);
}
$.unblockUI();
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.responseText);
$.unblockUI();
}
});
}
function saveModalPageEditorPicture(){
let idPage = parseInt($('#inpModalPageEditorPictureIdPage').val());
let files = $('#inpModalPageEditorPicturePicture').prop("files");
let formData = new FormData();
formData.append("file", files[0]);
formData.append("idPage", idPage);
$.blockUI();
$.ajax({
type: "POST",
beforeSend: function(xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
url: "/Pages/Index/?handler=BoardPagePicture",
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(data) {
if (data.successful){
$('#divModalPageEditorPicture').modal('hide');
$('#btnRefresh').trigger('click');
} else {
Swal.fire('Napaka', data.error, 'error');
console.log(data);
}
$.unblockUI();
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.responseText);
$.unblockUI();
}
});
}

127
ZpcBulletinBoard/wwwroot/js/pages/note.js Normal file
View File

@@ -0,0 +1,127 @@
class Note{
constructor(id, divCanvas, x, y, width, height, content, colorClass, zindex) {
this.id = id;
this.divCanvas = divCanvas;
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.element = null;
this.content = content;
this.colorClass = colorClass;
this.zindex = zindex;
}
refresh(){
if (this.element !== null){
this.element.remove();
}
this.element = $(`
<div class="card div-note ${this.colorClass}" data-id="${this.id}">
<div class="card-body note-body">
<div class='note-content'>
${this.content}
</div>
</div>
</div>`);
this.element.draggable({
containment: "parent",
stop: function( event, ui ) {
let id = parseInt($(this).attr('data-id'));
let note = getNote(id);
note.x = ui.position.left;
note.y = ui.position.top;
}
});
this.element.resizable({
handles: 'se',
autoHide: true,
minHeight: 240,
minWidth: 300,
stop: function( event, ui ) {
let id = parseInt($(this).attr('data-id'));
let note = getNote(id);
note.width = ui.size.width;
note.height = ui.size.height;
}
});
this.element.css({
'width': this.width + 'px',
'height': this.height + 'px',
'position': 'relative',
'z-index': this.zindex
});
this.element.on("dblclick", function() {
openModalEditNote(parseInt($(this).attr('data-id')));
});
this.element.on('mousedown', function(){
selectNote(parseInt($(this).attr('data-id')));
})
$.contextMenu({
selector: '.card[data-id="' + this.id + '"]',
callback: function(key, options) {
let id = parseInt($(this).attr('data-id'));
switch (key){
case 'toFront':
noteChangeZindex(id, true)
break;
case 'toBack':
noteChangeZindex(id, false)
break;
case 'edit':
openModalEditNote(id);
break;
case 'delete':
deleteNote(id);
break;
}
},
items: {
"toFront": {
icon: function(opt, $itemElement, itemKey, item){
$itemElement.html('<i class="fas fa-reply"></i>&nbsp;V odspredje');
return 'context-menu-icon-updated';
}
},
"toBack": {
icon: function(opt, $itemElement, itemKey, item){
$itemElement.html('<i class="fas fa-share"></i>&nbsp;V ozadje');
return 'context-menu-icon-updated';
}
},
"edit": {
icon: function(opt, $itemElement, itemKey, item){
$itemElement.html('<i class="fas fa-edit"></i>&nbsp;Uredi');
return 'context-menu-icon-updated';
}
},
"delete": {
icon: function(opt, $itemElement, itemKey, item){
$itemElement.html('<i class="fas fa-trash-alt"></i>&nbsp;Izbriši');
return 'context-menu-icon-updated';
}
},
}
});
this.divCanvas.append(this.element);
this.setPosition();
}
setPosition(){
this.element.css({
'left': this.x + 'px',
'top': this.y + 'px'
});
}
}