FabrikaHradekTour/res/forum/home/home.html

<button onclick="show_upload_popup()" class="btn" id="upload_btn">Nahrát</button>

<div id="upload_popup">
    <div>Název: <input type="text" name="name" minlength="4" maxlength="16"></div>
    <div>Popis: <input type="text" name="desc" maxlength="192"></div>

    <div><label for="file_upload" class="btn">Zvolte Soubor</label></div>
    <div><input type="file" name="file_upload" id="file_upload" style="display:none;"></div>
    <div><button onclick="upload()" type="submit" class="btn" id="upload_popup_sub">Zveřejnit</button></div>
</div>
<div id="image_popup">
    <img id="image_popup_img" src="//:0">
    <img id="close_btn" onclick="close_image()" src="./res/forum/images/close.png" alt="Tlačítko pro zavření obrázku">
</div>
<div id="moderation_popup">
    <div id="moderation_post_title">A</div>
    <button class="btn" id="archive_btn">Archivovat příspěvek</button>
</div>
<div id="posts"></div>

<script>
    $.ajax
    ({
        url: "./res/forum/api/get_posts.php",
        success: async function(result)
        {
            let am_i_admin = await is_admin();

            for (let i in result)
            {
                $("#posts").append
                (
                    "<div class=\"post\">" +
                        "<div class=\"post_image\">" +
                            "<img src=\"" + "http://109.123.243.163/user_content/" + result[i].author + "/" + result[i].photo_id + "\"></img>" +
                        "</div>" +

                        "<div class=\"post_info\">" +
                            "<div>Název: <span class=\"post_name\">" + result[i].title + "</span></div>" +
                            "<div>Autor: <span class=\"post_author\">" + result[i].username + "</span></div>" +
                            ((result[i].description != null) ? "<div class=\"post_desc\">Popis: <div class=\"post_desc_text\">" + result[i].description + "</div></div>" : "") +
                        "</div>" +
                        ((am_i_admin) ? "<img class=\"post_options\" alt=\"Zobrazení možností příspěvku\" src=\"./res/forum/images/post_options.png\">" : "") +
                    "</div>"
                );
            }
        }
    });

    function show_upload_popup()
    {
        if ($("#upload_popup").css("display") == "flex")
        {
            $("#upload_popup").css("display", "none");
        } else
        {
            $("#upload_popup").css("display", "flex");
        }
    }

    function upload()
    {
        let formData = new FormData();

        formData.append('file_upload', $('#file_upload')[0].files[0]);
        if ($('input[name="name"]').val().trim() != "") formData.append('name', $('input[name="name"]').val());
        if ($('input[name="desc"]').val().trim() != "") formData.append('desc', $('input[name="desc"]').val());

        $.ajax
        ({
            url : './res/forum/api/upload_picture.php',
            type : 'POST',
            data : formData,
            processData: false,
            contentType: false,
            success : function(result)
            {
                switch (result.status)
                {
                    case 0:
                        show("home");
                        break;

                    case 1:
                        alert("Nebyl nahrán soubor!\nToto může znamenat že se snažíte nahrát soubor větší než 50MB!");
                        break;

                    case 2:
                        alert("Nebyl vyplněn název příspěvku!");
                        break;

                    case 3:
                        alert("Neplatný formát!");
                        break;

                    case 4:
                        alert("Příliš velký obrázek!\nMaximální velikost je 5MB!");
                        break;

                    case 5:
                        alert("Název musí být dlouhý alespoň 4 znaky!");
                        break;
                }
            }
        });
    }

    $(document).on("click", ".post_image", function(event)
    {
        $("#image_popup").css("display", "flex");
        $("#image_popup").children("#image_popup_img").attr("src", $(this).children("img").attr("src"));
        $("#image_popup").children("#image_popup_img").attr("alt", $(this).parent(".post").children(".post_info").children("div").children(".post_name").html());
    });

    $(document).on("click", ".post_options", function(event)
    {
        let post_author = $(this).parent(".post").children(".post_info").children("div").children(".post_author").html();
        let post_title = post_author + " - " + $(this).parent(".post").children(".post_info").children("div").children(".post_name").html();

        if ($("#moderation_post_title").html() !== post_title)
        {
            $("#moderation_popup").css("display", "flex");
            $("#moderation_post_title").html(post_title);

            let post_id_buffer = $(this).parent(".post").children(".post_image").children("img").attr("src").split("/");
            let post_id = post_id_buffer[post_id_buffer.length - 1];

            $("#archive_btn").attr("onclick", "archive_post(\"" + post_id + "\", \"" + post_author + "\")");
        } else
        {
            $("#moderation_popup").css("display", "none");
            $("#moderation_post_title").html("");
        }
    });

    function close_image()
    {
        $("#image_popup").css("display", "none");
    }

    function archive_post(post_id, author)
    {
        $.ajax
        ({
            url: "./res/forum/api/archive_post.php?username=" + author + "&post_id=" + post_id,
            success: function()
            {
                show("home");
            }
        });
    }
</script>