old/assets/js/blog.js

$(document).ready(function () {
    $.ajax({
        url: "/blog/getComments",
        data: {
            url: window.location.pathname
        },
        beforeSend: function () {
            $("#comment-list").html("<h2><i class='fa fa-cog fa-spin'></i> Loading Comments</h2>");
        },
        success: function (data) {
            console.log(data);
            $("#comment-list").html(data);
        },
        error: function () {
            $("#comment-list").html("<div class='alert alert-danger' role='alert'><b>Error!</b> Couldn't load the comments for this posts caused by an unkown error! Please try again later or contact the admin for help.</div>");
        }
    });

    $('.blog .info-box').each((el) => {
        console.log(el);
    });
});

$('#commentForm').submit(function (event) {
    event.preventDefault();
    addComment();
});

var addComment = function () {
    if ($('#commentField').val() !== '') {
        var comment = $('#commentField').val();
        comment.replace("\n", "<br>");

        var item;
        $.ajax({
            url: "/blog/comment",
            method: 'POST',
            data: {
                url: window.location.pathname,
                comment: comment
            },
            beforeSend: function () {
                var date = new Date();
                date = date.getDate() + '.' + date.getMonth() + '.' + date.getYear() + ' ' + date.getHours() + ':' + date.getMinutes() + ' Uhr';
                item = $(`
                <li>
                    <div class="well comment-well">
                        <div class="d-inline-block mr-2">
                            <div class="image-placeholder">
                            </div>
                        </div>
                        <div class="d-inline-block mr-2">
                            <h3>
                                <small>
                                    von Dir / ${date}
                                </small>
                            </h3>
                            <p class="comment">${comment}</p>
                        </div>
                        <div class="loading-container d-inline-block">
                            <i class="fa fa-cog fa-spin"></i>
                        </div>
                    </div>
                </li>
                `);

                $('#comment-list').prepend(item);
                $('#commentField').attr('disabled', '');
                $('#addComment').attr('disabled', '');
            },
            success: function (data) {
                console.log(data);

                if (data.type === 'success') {
                    $('#commentField').val('');
                    $('#notice-container').html('<div class="alert alert-success" role="alert">Dein Kommentar wurde <b>erfolgreich</b> gesendet!</div>');
                    $('.loading-container', item).css('background-color', '#28b62c');
                    $('.loading-container i', item)
                        .removeClass('fa-cog').removeClass('fa-spin')
                        .addClass('fa-check').css('color', '#fff');
                    $('.content h3 small', item).hide()
                        .html(`von <a href="/user/${data.content.username}" target="_blank">${data.content.displayname}</a> / ${data.content.date}`).fadeIn();
                    $('.loading-container', item).delay(2000).fadeOut(2000);
                    $('.comment-well', item).prepend(`<img src="${data.content.profilePic}" style="display:none">`);
                    $('.comment-well img', item).fadeIn(2000);
                    $('.image-placeholder', item).remove();
                    wait(8000);
                    $('.content', item).removeClass('small');
                    $('.comment-count').text(parseInt($('.comment-count').text()) + 1);
                } else {

                }
            },
            error: function (data) {
                console.log(data);
                $('#notice-container').html('<div class="alert alert-danger" role="alert"><b>Error:</b> Comment couldn\'t be sent caused by an unkown error! Please try again later or contact the admin to get help!</div>')
                $('div.loading-container', item).css('background-color', '#ff4136');
                $('div.loading-container i', item).removeClass('fa-cog').removeClass('fa-spin').addClass('fa-exclamation').css("color", '#fff');
                $(item).delay(3000).fadeOut(2000);
            },
            complete: function () {
                $('#commentField').removeAttr('disabled');
                $('#addComment').html('Kommentar senden').removeAttr('disabled');
            }
        });
    }
};

function wait(ms) {
    var start = new Date().getTime();
    var end = start;
    while (end < start + ms) {
        end = new Date().getTime();
    }
}

function likeDislike(postID) {
    $.ajax({
        type: "POST",
        url: "/blog/like",
        data: {
            postID: postID
        },
        success: function (data) {
            if (data == "no-user") {
                $('#loginModal').modal('show');
            } else {
                data = data.split(":");

                $('.like-toggle-icon').toggleClass('-checked');
                $('.like-count').text(data[1]);
            }
        }
    });
};