function to get posts

2 files changed, 57 insertions, 3 deletions

diff --git a/public/views/createPost.html b/public/views/createPost.html
index e01ad55..30c9cad 100644
--- a/public/views/createPost.html
+++ b/public/views/createPost.html
@@ -72,7 +72,7 @@
                         <h1>Create New Post</h1>
                     </header>
                     <div class="span9" style="padding: 0; margin: 0;">
-                        <div id="createPost">
+                        <div id="createPost" class="form">
                             <div class="form-group">
                                 <label for="title">Title</label>
                                 <input type="text" class="form-control" id="title" name="title" placeholder="Title"
@@ -102,7 +102,11 @@
                             <div id="error" class="alert alert-error hidden">
                                 <strong>Error!</strong> Please fill out all fields.
                             </div>
-                            <button class="btn btn-primary" id="publishPost">Create New Post</button>
+                            <div class="control-group">
+                                <div class="controls">
+                                    <button type="submit" class="btn btn-primary" id="publishPost">Create New Post</button>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/public/views/dashboard.html b/public/views/dashboard.html
index 3791678..6556fd9 100644
--- a/public/views/dashboard.html
+++ b/public/views/dashboard.html
@@ -45,8 +45,8 @@
                 <div class="span9">
                     <header class="page-header">
                         <h1>All Posts</h1>
-                        <div id="posts"></div>
                     </header>
+                    <div id="posts"></div>
                 </div>
             </div>
         </div>
@@ -58,6 +58,56 @@
     <script src="/static/assets/js/bootstrap-collapse.js"></script>
     <script src="/static/assets/js/pages/config.js"></script>
     <script src="/static/assets/js/pages/authCheck.js"></script>
+    <script>
+        $(document).ready(() => {
+            // hit api/blog/posts to get all the posts
+            $.ajax({
+                url: '/api/blog/posts',
+                type: 'GET',
+                success: (data) => {
+                    const posts = document.getElementById('posts');
+                    data.forEach(post => {
+                        const leadParagraphCotainer = document.createElement('div');
+                        leadParagraphCotainer.className = 'lead';
+                        const title = document.createElement('h3');
+                        title.innerHTML = post.title;
+                        const content = document.createElement('p');
+                        content.innerHTML = post.content.substring(0, 100) + '...';
+                        const date = document.createElement('p');
+                        date.innerHTML = post.publishDate;
+                        const tags = document.createElement('p');
+                        post.tags.forEach(tag => {
+                            const tagSpan = document.createElement('span');
+                            tagSpan.className = 'label label-info';
+                            tagSpan.innerHTML = tag;
+                            tagSpan.style.marginRight = '5px';
+                            tags.appendChild(tagSpan);
+                        });
+                        const editButton = document.createElement('a');
+                        editButton.className = 'btn btn-primary';
+                        editButton.innerHTML = 'Edit Post';
+                        editButton.style.marginRight = '15px';
+                        const deleteButton = document.createElement('a');
+                        deleteButton.className = 'btn btn-danger';
+                        deleteButton.innerHTML = 'Delete Post';
+                        const editButtonContainer = document.createElement('div');
+                        editButtonContainer.className = 'btn-group';
+                        editButtonContainer.appendChild(editButton);
+                        editButtonContainer.appendChild(deleteButton);
+                        leadParagraphCotainer.appendChild(title);
+                        leadParagraphCotainer.appendChild(content);
+                        leadParagraphCotainer.appendChild(date);
+                        leadParagraphCotainer.appendChild(tags);
+                        leadParagraphCotainer.appendChild(editButtonContainer);
+                        posts.appendChild(leadParagraphCotainer);
+                    })
+                }, 
+                error: (err) => {
+                    console.log(err);
+                }
+            });
+        })
+    </script>
 </body>
 
 </html>
\ No newline at end of file