zpc-bulletin-board/ZpcBulletinBoard/wwwroot/js/editor/edit-main.js

$(function () {
});


let divCanvas;
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 tmpId = -1;
    notes.forEach(note => {
        if (note.id <= tmpId){
            tmpId = note.id -1;
        }
    });
    let note = new Note(tmpId, divCanvas, 0, 0, 400, 240, 'Vnesi besedilo');
    notes.push(note);
    note.refresh();
}

function openModalEditNote(id){
    $('#inpModalEditNoteIdNote').val(id);
    note = getNote(id);

    $('#divModalEditNote').modal('show');
    $('#divModalEditNoteSummernote').summernote('destroy');
    $('#divModalEditNoteSummernote').html(note.content);
    $('#divModalEditNoteSummernote').summernote({height: 400,});
}

function saveModalEditNote(){
    let idNote = parseInt($('#inpModalEditNoteIdNote').val());
    note = getNote(idNote);
    note.content = $('#divModalEditNoteSummernote').summernote('code');
    note.refresh();
    $('#divModalEditNote').modal('hide');
}

function getNote(id){
    let note;
    notes.forEach(e => {
        if (e.id === id){
            note = e;
        }
    });
    return note;
}

function svgTest(){
    var node = document.getElementById('divCanvas');

    htmlToImage.toSvg(node)
    .then(function (dataUrl) {
        var link = document.createElement('a');
        link.href = dataUrl;
        link.download = 'Download.jpg';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        return;
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });
}

function openModalSelectBoard() {
    $.blockUI();
    $.ajax({
        type: "GET",
        url: "/Editor/EditMain/?handler=Boards",
        data: {
        },
        success: function (data) {
            if (data.successful){
                let tmp = '';
                data.boards.forEach(element => {
                    tmp += `<tr data-id='${element.idBulletinBoard}' onclick='modalSelectBoardSelect(this);'>`;
                    tmp += '<td>' + element.name + '</td>';
                    tmp += '</tr>';
                });
                $('#tbodyModalSelectBoard').html(tmp);
                $('#divModalSelectBoard').modal('show');
            } else {
                console.log(data);
                alert(data);
            }
            $.unblockUI();
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(xhr);
            alert(xhr.responseText);
            $.unblockUI();
        }
    });
}

function modalSelectBoardSelect(element){
    loadBoard(parseInt($(element).attr('data-id')));
    $('#divModalSelectBoard').modal('hide');
}

function loadBoard(id){
    $.blockUI();
    $.ajax({
        type: "GET",
        url: "/Editor/EditMain/?handler=Board",
        data: {
            id
        },
        success: function (data) {
            if (data.successful){
                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]));
                divCanvas = $(`<div id='divCanvas'></div>`);
                placeholder.append(divCanvas);
                divCanvas.css({
                    'width': '100%',
                    'height': canHeight + 'px',
                    'background-color': 'white',
                    'padding': '5px'
                });
                loadNotes();
            } else {
                console.log(data);
                alert(data);
            }
            $.unblockUI();
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(xhr);
            alert(xhr.responseText);
            $.unblockUI();
        }
    });
}