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

143
ZpcBulletinBoard/wwwroot/css/editor/editor-main.css
View File

@@ -8,10 +8,6 @@
padding:0;
}
.div-main-body > hr {
margin-bottom: 0;
}
.div-tools {
margin: 5px;
width: 100%;
@@ -43,6 +39,26 @@
cursor: nwse-resize;
}
.div-board{
float: left;
text-align: center;
width: 200px;
height: 50px;
border: 1px solid rgba(24, 28, 33, 0.06);
border-radius: 0.25rem;
margin-right: 15px;
}
.div-board > h5 {
margin-top: 5px;
margin-bottom: 2px;
}
.div-board:hover {
cursor: pointer;
background-color: rgba(24, 28, 33, 0.06);
}
.div-note {
position: absolute !important;
float: left;
@@ -55,19 +71,21 @@
.div-pages {
margin: 5px;
height: 50px;
margin-left: 10px;
margin-bottom: 10px;
}
.div-pages > div {
.div-page {
float: left;
text-align: center;
width: 100px;
height: 50px;
border:1px solid rgba(24, 28, 33, 0.06);
border: 1px solid rgba(24, 28, 33, 0.06);
border-radius: 0.25rem;
margin-right: 5px;
}
.div-pages > div:hover {
.div-page:hover {
cursor: pointer;
background-color: rgba(24, 28, 33, 0.06);
}
@@ -76,11 +94,116 @@
background-color: rgba(128, 171, 226, 0.5);
}
.div-pages > div > h5 {
.div-page > h5 {
margin-top: 5px;
margin-bottom: 2px;
}
.div-pages > div > i {
.div-page > i {
margin-top: 10px;
}
}
#lblBoardPageName {
margin-right: 5px;;
}
.div-note-edit-color {
margin: 5px;
height: 50px;
}
.div-note-edit-color > div {
float: left;
text-align: center;
width: 40px;
height: 40px;
border:1px solid rgba(24, 28, 33, 0.06);
border-radius: 0.25rem;
margin-right: 5px;
}
.div-note-edit-color > div:hover {
cursor: pointer;
border: 2px solid rgba(1, 103, 228, 0.418);
}
.div-note-edit-color > div.active {
cursor: pointer;
border: 2px solid rgba(1, 103, 228, 0.719);
}
/* Barve listkov */
.note-color-white {
background-color: #fff;
border-color: #e0e0e0;
}
.note-color-yellow {
background-color: #fff8b8;
border-color: #fff8b8;
}
.note-color-orange {
background-color: #f39f76;
border-color: #f39f76;
}
.note-color-light-green {
background-color: #e2f6d3;
border-color: #e2f6d3;
}
.note-color-blue {
background-color: #d4e4ed;
border-color: #d4e4ed;
}
.note-color-purple {
background-color: #d3bfdb;
border-color: #d3bfdb;
}
.note-color-grey {
background-color: #efeff1;
border-color: #efeff1;
}
/* button */
.fab-container-add {
position: fixed;
bottom: 80px;
right: 115px;
cursor: pointer;
z-index: 1000;
}
.fab-container-save {
position: fixed;
bottom: 80px;
right: 50px;
cursor: pointer;
z-index: 1000;
}
.iconbutton {
width: 50px;
height: 50px;
border-radius: 100%;
box-shadow: 10px 10px 5px #aaaaaa;
}
.button {
width: 60px;
height: 60px;
}
.iconbutton i {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: white;
}

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')));