Merge pull request #81 from jrtechs/postsTimeline

Posts Timeline Pag (closes #50)

includes/html/footer.html

@@ -59,7 +59,9 @@
 <script>hljs.initHighlightingOnLoad();</script>
 
 <script>
-    ( function() {
+
+    function lazyLoad()
+    {
 
         var youtube = document.querySelectorAll( ".youtube" );
 
@@ -85,7 +87,11 @@
                 this.appendChild( iframe );
             } );
         };
+    }
+
+    ( function() {
 
+        lazyLoad();
     } )();
 </script>
 

includes/html/header.html

@@ -65,6 +65,9 @@
                 <li class="nav-item">
                     <a class="nav-link" href="/contact">Contact</a>
                 </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/posts">Posts</a>
+                </li>
                 <li class="nav-item">
                     <a class="nav-link" href="/photos">Photography</a>
                 </li>

routes/about.js

@@ -1,17 +0,0 @@
-const routes = require('express').Router();
-
-const pageBuilder = require('../utils/pageBuilder');
-
-routes.get('/', (request, result) =>
-{
-    pageBuilder.buildPageWithTemplate(request, result,
-        (p1,p2,p3)=>{}, "blog/about.html");
-});
-
-
-routes.get('*', (request, result) =>
-{
-    pageBuilder.print404(result);
-});
-
-module.exports = routes;

routes/api/index.js

@@ -0,0 +1,38 @@
+const routes = require('express').Router();
+const sql = require('../../utils/sql');
+
+const renderPost = require('../../blog/renderBlogPost');
+
+routes.get('/posts', (request, result) =>
+{
+    sql.getAllPosts().then((data)=>
+    {
+        result.json(data).end();
+    }).catch((err)=>
+    {
+        result.status(500).json([]).end();
+    });
+});
+
+
+routes.get('/render/:postID', (request, result) =>
+{
+    sql.getPostById(request.params.postID).then((sqlData)=>
+    {
+        renderPost.generateBlogPost(sqlData, -1).then((rendered)=>
+        { 
+            result.json(rendered).end();
+        });
+    }).catch((err)=>
+    {
+        result.status(404).json({error: 404}).end();
+    })
+
+});
+
+routes.get('*', (request, result) =>
+{
+    result.json([]).end();
+});
+
+module.exports = routes;

routes/index.js

@@ -1,8 +1,8 @@
 const routes = require('express').Router();
 
-/** about page */
-const about = require('./about');
-routes.use('/about', about);
+// /** about page */
+// const about = require('./about');
+// routes.use('/about', about);
 
 /** admin page and all of its sub pages */
 const admin = require('./admin');
@@ -33,10 +33,25 @@ routes.use('/category', category);
 
 const pageBuilder = require('../utils/pageBuilder');
 
+routes.get('/about', (request, result) =>
+{
+    pageBuilder.buildPageWithTemplate(request, result,
+        (p1,p2,p3)=>{}, "blog/about.html");
+});
+
+
+routes.get('/posts', (request, result) =>
+{
+    pageBuilder.buildPageWithTemplate(request, result,
+        (p1,p2,p3)=>{}, "blog/posts.html");
+});
+
+
 const project = require('./projects');
 routes.use('/steam', project);
 
-
+const api = require('./api');
+routes.use('/api', api);
 
 //blog home page
 routes.get('/', (request, result) =>

templates/blog/posts.html

@@ -0,0 +1,257 @@
+{header}
+
+<script src="https://code.jquery.com/jquery-3.3.1.min.js"
+    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
+    crossorigin="anonymous">
+</script>
+
+<style>
+
+    :root {
+        --primary:rgba(16,116,231,1);
+        --secondary:rgba(46,188,79,1);
+        --dark:rgba(36,41,46,1);
+        --dark-2:rgba(43,49,55,1);
+        --white:rgba(255,255,255,1);
+    }
+
+    .vis-timeline {
+        border: none;
+        font-size: 16px;
+        color: var(--white);
+        background-color: var(--dark);
+    }
+    .vis-item {
+        font-size: 16px;
+        color: var(--dark);
+        background-color: var(--white);
+        box-sizing: border-box;
+        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06), 0px 4px 6px rgba(0, 0, 0, 0.06);
+        border-color: transparent;
+    }
+    .vis-item.vis-box {
+        border-radius: 2px;
+        padding: 0;
+        border: none;
+    }
+    .vis-item .vis-item-content {
+        padding: 8px 10px;
+    }
+    .vis-item.vis-box.vis-selected {
+        border: 2px solid var(--primary);
+    }
+    .vis-item.vis-line {
+        border-width: 2px;
+        border-color: var(--primary)
+    }
+    .vis-item.vis-dot {
+        border-color: var(--primary);
+    }
+    .vis-item.vis-selected {
+        border-color: var(--primary);
+        background-color: var(--white);
+        box-shadow: 0px 20px 25px rgba(0, 0, 0, 0.2), 0px 10px 10px rgba(0, 0, 0, 0.14);
+    }
+    .vis-time-axis .vis-text {
+        color: var(--white)!important;
+        padding-top: 8px;
+        padding-left: 16px;
+    }
+    .vis-time-axis .vis-grid.vis-minor {
+        border-width: 2px;
+        border-color: rgba(255, 255, 255, .29);
+    }
+    .vis-labelset .vis-label {
+        color: var(--white);
+    }
+    .vis-time-axis .vis-grid.vis-major {
+        border-width: 1px;
+        border-color: rgba(255, 255, 255, .5);
+    }
+</style>
+
+
+<br><br><br><br><br>
+<div id="timeline"></div>
+<br><br>
+<div class="container">
+
+    <div class="row">
+        <div class="col-md-8 col-12">
+            <div class="blogPost">
+                <div id=POST_PICTURE>
+                </div>
+
+                <div class="p-4">
+                    <b><h3 id="POST_TITLE"></h3></b>
+                    <h5>
+                        <span class="w3-opacity"><div id="POST_PUBLISHED"></div></span>
+                    </h5>
+                    <div id="POST_BODY"></div>
+                </div>
+            </div>
+            <br>
+            <br><br>
+        </div>
+        <div class="col-md-4 col-12">
+            {>sideBar}
+        </div>
+    </div>
+</div>
+
+<script src="/includes/js/vis/dist/vis-timeline-graph2d.min.js"></script>
+<link href="/includes/js/vis/dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+
+
+<script type="text/javascript">
+
+    /**
+     * Runs a get request using ajax
+     */
+    function runAjax(url, successCallBack, errorCallBack)
+    {
+        console.log(url);
+        $.ajax({
+            type:'GET',
+            url: url,
+            crossDomain: true,
+            dataType: "json",
+            success: successCallBack,
+            error:errorCallBack,
+            timeout: 3000
+        });
+    }
+
+    /** Lazy loads youtube videos on the page
+     */
+    function lazyLoad()
+    {
+        var youtube = document.querySelectorAll( ".youtube" );
+
+        for (var i = 0; i < youtube.length; i++) {
+
+            var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
+
+            var image = new Image();
+            image.src = source;
+            image.addEventListener( "load", function() {
+                youtube[ i ].appendChild( image );
+            }( i ) );
+
+            youtube[i].addEventListener( "click", function() {
+
+                var iframe = document.createElement( "iframe" );
+
+                iframe.setAttribute( "frameborder", "0" );
+                iframe.setAttribute( "allowfullscreen", "" );
+                iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" );
+
+                this.innerHTML = "";
+                this.appendChild( iframe );
+            } );
+        };
+    }
+
+
+    function renderPostOnPage(postID)
+    {
+        runAjax("api/render/" + postID,
+        (html)=>
+        {
+            //uses ajax to update blog page
+            $('#POST_TITLE').text(html.name);
+            $('#POST_PUBLISHED').text(html.published);
+            $('#POST_BODY').html(html.blogBody);
+            $('#POST_PICTURE').html(html.hasPicture ?
+                '<img src="/blogContent/headerImages/' + html.picture_url + '" style="width:100%;">' :
+                 '');
+
+            //lazy loads youtube videos
+            lazyLoad();
+
+            //highlights code
+            document.querySelectorAll('pre code').forEach((block) => {
+                hljs.highlightBlock(block);
+            });
+            //renders latex math
+            MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
+        },
+        (err)=>
+        {
+            console.log(err);
+        });
+    }
+
+
+    /**
+     * After a timeline event gets clicked this will
+     * query the api for the blog post content and
+     * display it on the page.
+     */
+    function timeLineClick(properties)
+    {
+        if(properties.item !== null)
+        {
+            renderPostOnPage(properties.item);
+        }
+    }
+
+    /**
+     * Fetches all the 
+     */
+    function fetchPosts()
+    {
+        return new Promise((resolve, reject)=>
+        {
+            runAjax("api/posts", (data)=>
+            {
+                var datasetContents = [];
+
+                for(var i=0; i < data.length; i++)
+                {
+                    datasetContents.push(
+                        {
+                            start: new Date(data[i].published),
+                            content: data[i].name,
+                            id: data[i].post_id
+                        }
+                    );
+                }
+                resolve(datasetContents);
+                renderPostOnPage(data[0].post_id);
+            },
+            (error)=>
+            {
+                resolve([]);
+            });
+        });
+    }
+
+
+    var container = document.getElementById('timeline');
+
+    $(document).ready(function()
+    {
+        fetchPosts().then((data)=>
+        {
+            var options = 
+            {
+                editable: false,
+                margin: {
+                    item: 20,
+                    axis: 40
+                },
+                start:data[12].start,
+                end:data[0].start
+            };
+
+            var items = new vis.DataSet(data);
+            var timeline = new vis.Timeline(container, items, options);
+            timeline.on('click', timeLineClick);
+        });
+    });
+
+</script>
+
+
+{footer}

utils/sql.js

@@ -22,6 +22,7 @@ const config = require('../utils/configLoader').getConfig();
 /** SQL connection */
 const con = mysql.createConnection({
     host: config.SQL_HOST,
+    port: config.SQL_PORT,
     user: config.SQL_USER,
     password: config.SQL_PASSWORD,
     database: config.SQL_DATABASE
@@ -156,15 +157,20 @@ module.exports=
      */
     getPostById: function(id)
     {
-        console.log("select * from posts where post_id='" + id + "' limit 1");
-
-        return new Promise(function(resolve, reject)
+        return new Promise((resolve, reject)=>
         {
             fetch("select * from posts where post_id='" + id + "' limit 1")
                 .then(function(post)
             {
-                resolve(post[0]);
-            }).catch(function(error)
+                if(post.length === 1)
+                {
+                    resolve(post[0]);
+                }
+                else
+                {
+                    reject();
+                }
+            }).catch((error)=>
             {
                 reject(error);
             });