WebStick/sd_card/www/posts.html

<div class="ts-container is-very-narrow">
    <p>Work in progress</p>
</div>
<script>
     let loggedIn = false;

    //Check the user has logged in
    //Post editing function still require session check
    //this just here to hide the edit buttons
    $.get("/api/auth/chk", function(data){
        if (data == false){
            //User cannot use admin function. Hide the buttons.
            $(".adminOnly").remove();
            loggedIn = false;
        }else{
            loggedIn = true;
        }
        loadValue("blog-posts", function(){
            initPosts();
        });
    });

    //Initialize blog info
    function initBlogInfo(){
        loadValue("blog-title", function(title){
            if (title.error != undefined || title == ""){
                title = "WebStick";
            }
            document.title = decodeURIComponent(title);
            $("#pageTitle").text(decodeURIComponent(title));
        });

        loadValue("blog-subtitle", function(title){
            if (title.error != undefined || title == ""){
                title = "A personal web server hosted on an ESP8266 using a micro SD card";
            }
            $("#pageDesc").text(decodeURIComponent(title));
        });
    }

    $(document).ready(function(){
        initBlogInfo();
    });
   


    //Edit blog title and subtitles
    function editBlogSubtitle(){
        let newtitle = prompt("New Blog Subtitle", "");
        if (newtitle != null) {
            setValue("blog-subtitle", encodeURIComponent(newtitle), function(){
                initBlogInfo();
            })
        } 
    }

    function editBlogTitle(){
        let newtitle = prompt("New Blog Title", "");
        if (newtitle != null) {
            setValue("blog-title", encodeURIComponent(newtitle), function(){
                initBlogInfo();
            })
        } 
    }   

    //Storage and loader utils
    function setValue(key, value, callback){
        $.get("/api/pref/set?key=" + key + "&value=" + value, function(data){
            callback(data);
        });
    }

    function loadValue(key, callback){
        $.get("/api/pref/get?key=" + key, function(data){
            callback(data);
        });
    }

/*
    New Post

    New post is created via creating a markdown file in the server
    side and open it with the markdown editor
*/

$("#createNewPostBtn").on("click", function(){
    $("#newPostModal").toggle("fast");
});

function createNewPost(){
    let filename = $("#newPostTitle").val().trim();
    if (filename == ""){
        alert("Post title cannot be empty.");
        return;
    }

    if (filename.indexOf("/") >= 0){
        //Contains /. Reject
        alert("File name cannot contain path seperator");
        return;
    }

    $("#confirmNewPostBtn").addClass("loading").addClass("disabled");
    //Create the markdown file at the /blog/posts folder
    const blob = new Blob(["# Hello World\n"], { type: 'text/plain' });
    let storeFilename = parseInt(Date.now()/1000) + "_" + filename+'.md';
    const file = new File([blob], storeFilename);
    handleFile(file, "/blog/posts", function(){
        //Update the post index
        updatePostIndex();

        $("#confirmNewPostBtn").removeClass("loading").removeClass("disabled");

        //Open the markdown file in new tab
        let hash = encodeURIComponent(JSON.stringify({
            "filename": storeFilename,
            "filepath": "/blog/posts/" + storeFilename
        }))
        window.open("/admin/mde/index.html#" + hash);

        $("#newPostModal").hide();
    });

    
}

function handleFile(file, dir=currentPath, callback=undefined) {
    // Perform actions with the selected file
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.addEventListener("load", function(event){
        let responseText = event.target.responseText;
        try{
            responseText = JSON.parse(responseText);
            if (responseText.error != undefined){
                alert(responseText.error);
            }
        }catch(ex){

        }
        if (callback != undefined){
            callback();
        }
    }, false); // doesnt appear to ever get called even upon success
    ajax.addEventListener("error", errorHandler, false);
    //ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "/upload?dir=" + dir);
    ajax.send(formdata);
}

function errorHandler(event) {
    aelrt("New Post creation failed");
    $("#pasteButton").removeClass("disabled");
}

/*
    Post Edit functions
*/

function editPost(btn){
    let postFilename = $(btn).attr("filename");
    let hash = encodeURIComponent(JSON.stringify({
        "filename": postFilename,
        "filepath": "/blog/posts/" + postFilename
    }))
    window.open("/admin/mde/index.html#" + hash);
}

function deletePost(btn){
    let postFilename = $(btn).attr("filename");
    let postTitle = $(btn).attr("ptitle");
    if (confirm("Confirm remove post titled: " + postTitle + "?")){
        $.ajax({
            url: "/api/fs/del?target=/blog/posts/" + postFilename,
            method: "POST",
            success: function(data){
                if (data.error != undefined){
                    alert("Post delete failed. See console for more info.");
                    console.log(data.error);
                }else{
                   //Deleted
                   initPosts();
                }
            }
        });
    }
}

/*
    Rendering for Posts
*/
//Load a markdown file from URL and render it to target element
function loadMarkdownToHTML(markdownURL, targetElement){
    fetch(markdownURL).then( r => r.text() ).then( text =>{
        var converter = new showdown.Converter();
        let targetHTML = converter.makeHtml(text);
        console.log(targetHTML);
        $(targetElement).html(targetHTML);
    });
}

function initPosts(){
    $("#posttable").html("<div class='ui basic segment'><p><i class='ui loading spinner icon'></i> Loading Blog Posts</p></div>");
    loadValue("blog-posts", function(data){
        $("#posttable").html("");
        try{
            let postList = JSON.parse(decodeURIComponent(atob(data)));

            //From latest to oldest
            postList.reverse();
            console.log("Post listed loaded: ", postList);
            if (postList.length == 0){
                $("#nopost").show();
            }else{
                $("#nopost").hide();
                postList.forEach(postFilename => {
                    renderPost(postFilename);
                })
            }
        }catch(ex){
            $("#nopost").show();
        }
        
    })
}

function forceUpdatePostIndex(){
    updatePostIndex(function(){
        window.location.reload();
    });
}

function updatePostIndex(callback=undefined){
    let postList = [];
    $.ajax({
        url: "/api/fs/list?dir=/blog/posts",
        success: function(data){
            data.forEach(file => {
                let filename = file.Filename;
                let ext = filename.split(".").pop();
                if (ext == "md" && file.IsDir == false){
                    //Markdown file. Render it
                    postList.push(filename);
                }
            });

            setValue("blog-posts", btoa(encodeURIComponent(JSON.stringify(postList))), function(data){
                console.log(data);
                if (callback != undefined){
                    callback();
                }
            });
        }
    });

   
}

//Render post
function renderPost(filename){
    //Remove the timestamp
    let postTitle = filename.split("_");
    let timeStamp = postTitle.shift();
    postTitle = postTitle.join("_");

    //Pop the file extension
    postTitle = postTitle.split(".");
    postTitle.pop();
    postTitle = postTitle.join(".");

    var postTime = new Date(parseInt(timeStamp) * 1000).toLocaleDateString("en-US")
    let postEditFeature = `<div class="adminOnly" style="position: absolute; top: 3em; right: 0.4em;">
                <a class="ui basic mini icon button" onclick="editPost(this);" filename="${filename}" title="Edit Post"><i class="edit icon"></i></a>
                <button class="ui basic mini icon button" onclick="deletePost(this);" ptitle="${postTitle}" filename="${filename}" title="Remove Post"><i class="red trash icon"></i></button>
            </div>`;

    if (!loggedIn){
        postEditFeature = "";
    }
    //Create a wrapper element
    $("#posttable").append(`
        <div class="ui basic segment postObject" id="${timeStamp}">
            <div class="ui divider"></div>
            <h4 class="ui header">
                <i class="blue paperclip icon"></i>
                <div class="content">
                   ${postTitle}
                </div>
            </h4>
            ${postEditFeature}
            <div class="postContent">

            </div>
            <small><i class="calendar alternate outline icon"></i> ${postTime}</small>
        </div>
    `);
    let targetElement =  $("#" + timeStamp).find(".postContent");
    loadMarkdownToHTML("/blog/posts/" + filename,targetElement);
}
</script>