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

barve, shranjevanje

Browse Source
This commit is contained in:
David Štaleker
2024-02-28 20:04:20 +01:00
parent dc24cb22a6
commit 26a78d5188
11 changed files with 1239 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
ZpcBulletinBoard/wwwroot/js/editor/edit-main.js
View File

@@ -1,4 +1,8 @@
$(function () {
$('.div-note-edit-color>div').on('click', function(){
$('.div-note-edit-color>div').removeClass('active');
$(this).addClass('active');
});
});
@@ -7,28 +11,24 @@ let canWidth;
let canHeight;
let notes = [];
function loadNotes(){
let note = new Note(1, divCanvas, 200, 0, 400, 240, '<h3>Naslov</h3><hr/><p>Test</p>' );
notes.push(note);
let note2 = new Note(2, divCanvas, 0, 0, 400, 240);
notes.push(note2);
notes.forEach(note => {
note.refresh();
});
}
function addNewNote(){
let idPage = parseInt($('#inpSelectedBoardPageId').val());
if (isNaN(idPage) || idPage <= 0){
Swal.fire('Stran ni izbrana', '', 'warning');
return;
}
let tmpId = -1;
let tmpZindex = 1;
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');
let note = new Note(tmpId, divCanvas, 0, 0, 400, 240, 'Vnesi besedilo', 'note-color-white', tmpZindex);
notes.push(note);
note.refresh();
}
@@ -41,12 +41,15 @@ function openModalEditNote(id){
$('#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');
}
@@ -66,6 +69,7 @@ function svgTest(){
htmlToImage.toSvg(node)
.then(function (dataUrl) {
console.log(dataUrl);
var link = document.createElement('a');
link.href = dataUrl;
link.download = 'Download.jpg';
@@ -128,11 +132,10 @@ function loadBoard(id){
},
success: function (data) {
if (data.successful){
$('#lblBoardName').text(data.board.name);
$('#lblBoardName').attr('data-idboard', data.board.idBulletinBoard);
$('.div-board>h5').text(data.board.name);
$('.div-board').attr('data-idboard', data.board.idBulletinBoard);
let placeholder = $('#divPlaceholder');
placeholder.empty();
console.log(data);
let tmpSplit = data.board.ratioString.split(':');
canWidth = placeholder.width();
canHeight = canWidth / (parseFloat(tmpSplit[0]) / parseFloat(tmpSplit[1]));
@@ -151,8 +154,8 @@ function loadBoard(id){
});
}
} else {
Swal.fire('Napaka', data.error, 'error');
console.log(data);
alert(data); //TODO swal
}
$.unblockUI();
},
@@ -165,6 +168,12 @@ function loadBoard(id){
}
function openModalBoardAddNewPage(){
let idBulletinBoard = parseInt($('.div-board').attr('data-idboard'));
if (isNaN(idBulletinBoard) || idBulletinBoard <= 0){
Swal.fire('Oglasna deska ni izbrana', '', 'warning');
return;
}
$('#titleModalAddEditPage').html('Dodaj list');
$('#inpModalAddEditPageName').val('');
$('#inpModalAddEditPageId').val(0);
@@ -189,8 +198,8 @@ function openModalBoardEditPage(id){
$('#divModalAddEditPage').modal('show');
} else {
Swal.fire('Napaka', data.error, 'error');
console.log(data);
alert(data); //TODO swal
}
$.unblockUI();
},
@@ -202,22 +211,28 @@ function openModalBoardEditPage(id){
});
}
function boardAddNewPage(){
function boardAddNewPageSave(){
let idBulletinBoardPage = parseInt($('#inpModalAddEditPageId').val());
let name = $('#inpModalAddEditPageName').val();
let duration = parseInt($('#inpModalAddEditPageDuration').val());
let idBulletinBoard = parseInt($('#lblBoardName').attr('data-idboard'));
let idBulletinBoard = parseInt($('.div-board').attr('data-idboard'));
if (name === ''){
//TODO Swall
Swal.fire('Ime ni vneseno', '', 'warning');
return;
}
if (isNaN(duration)){
//TODO swall
Swal.fire('Trajanje ni vneseno', '', 'warning');
return;
}
if (isNaN(idBulletinBoard)){
if (duration < 1 || duration > 2147483640){
Swal.fire('Trajanje mora biti med 1 in 2147483640', '', 'warning');
return;
}
if (isNaN(idBulletinBoard) || idBulletinBoard <= 0){
Swal.fire('Oglasna deska ni izbrana', '', 'warning');
return;
}
@@ -237,12 +252,19 @@ function boardAddNewPage(){
} },
success: function(data) {
if (data.successful){
boardAddPage(data.page);
if (idBulletinBoardPage <= 0){
boardAddPage(data.page);
} else {
let currentPage = $('[data-idpage="' + idBulletinBoardPage + '"]');
let elAfter = currentPage.next();
currentPage.remove();
boardAddPage(data.page, elAfter);
}
selectPage(data.page.idBulletinBoardPage);
$('#divModalAddEditPage').modal('hide');
} else {
alert(data.error);
//TODO swall
Swal.fire('Napaka', data.error, 'error');
console.log(data);
}
$.unblockUI();
},
@@ -253,12 +275,16 @@ function boardAddNewPage(){
});
}
function boardAddPage(page){
let element = $(`<div data-idpage='${page.idBulletinBoardPage}'>
function boardAddPage(page, elAfter){
let element = $(`<div class='div-page' data-idpage='${page.idBulletinBoardPage}'>
<h5>${page.name}</h5>
<small>${page.duration} sekund</small>
</div>`);
element.insertBefore(".add-page");
if (elAfter){
element.insertBefore(elAfter);
} else {
element.insertBefore(".add-page");
}
element.on('click', function (){
let id = parseInt($(this).attr('data-idpage'));
selectPage(id);
@@ -270,8 +296,89 @@ function boardAddPage(page){
}
function selectPage(id){
$('[data-idpage]').removeClass('page-active');
$('[data-idpage="' + id + '"]').addClass('page-active');
$.blockUI();
$.ajax({
type: "GET",
url: "/Editor/EditMain/?handler=Page",
data: {
id
},
success: function (data) {
if (data.successful){
$('[data-idpage]').removeClass('page-active');
$('[data-idpage="' + id + '"]').addClass('page-active');
$('#inpSelectedBoardPageId').val(id);
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($('#inpSelectedBoardPageId').val());
if (isNaN(idBulletinBoardPage) || idBulletinBoardPage <= 0){
Swal.fire('Stran ni izbrana', '', 'warning');
return;
}
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){
selectPage(idBulletinBoardPage);
} else {
Swal.fire('Napaka', data.error, 'error');
console.log(data);
}
$.unblockUI();
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.responseText);
$.unblockUI();
}
});
}

9
ZpcBulletinBoard/wwwroot/js/editor/note.js
View File

@@ -1,5 +1,5 @@
class Note{
constructor(id, divCanvas, x, y, width, height, content) {
constructor(id, divCanvas, x, y, width, height, content, colorClass, zindex) {
this.id = id;
this.divCanvas = divCanvas;
this.x = x;
@@ -8,6 +8,8 @@ class Note{
this.height = height;
this.element = null;
this.content = content;
this.colorClass = colorClass;
this.zindex = zindex;
}
refresh(){
@@ -16,7 +18,7 @@ class Note{
}
this.element = $(`
<div class="card div-note" data-id="${this.id}">
<div class="card div-note ${this.colorClass}" data-id="${this.id}">
<div class="card-body">
${this.content}
</div>
@@ -40,7 +42,8 @@ class Note{
this.element.css({
'width': this.width + 'px',
'height': this.height + 'px',
'position': 'relative'
'position': 'relative',
'z-index': this.zindex
});
this.element.on( "dblclick", function() {
openModalEditNote(parseInt($(this).attr('data-id')));