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();
            })
        } 
    }   






/*
    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);
}


/*
    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();
    });
}



//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>