fix header issues

Author: Crane04

Test templates/Javascript/Comments/rendercomments.js

@@ -1,27 +1,38 @@
 const comment_container = document.getElementById("bloggit-comment-container")
-comment_container.classList += "container mt4"
+
 if (comment_container){
-    comment_container.innerHTML = `<h2>Comments</h2>`
-    if(data["comments"] != [] || data["comments"]){
-        data["comments"].forEach(function(parameter){
-            let name = parameter.name
-            let comment = parameter.comment
-            let time = convert_datetime(parameter.time) 
+    comment_container.classList += "container mt4"
 
-            comment_container.innerHTML += `
-            <!-- Comments Display -->
-            <div id="comments" class="mt-4">
-                <!-- Comments will be displayed here -->
-                <div class="card mb-3">
-                    <div class="card-body">
-                        <h3 class="card-title">${name}</h3>
-                        <time>${time}</time>
-                        <article class="card-text">${comment}</article>
-                    </div>
-                </div>
-            </div>
+    if (comment_container){
+        comment_container.innerHTML = `<h2>Comments</h2>
+        <div id="comments" class="mt-4">
 
-            `
-        })
+        </div>
+        `
+        const c_cont_inner = document.querySelector("#bloggit-comment-container #comments")
+        if(data["comments"] != [] || data["comments"]){
+            data["comments"].forEach(function(parameter){
+                let name = parameter.name
+                let comment = parameter.comment
+                let time = convert_datetime(parameter.time) 
+    
+                c_cont_inner.innerHTML += `
+                <!-- Comments Display -->
+                
+                    <!-- Comments will be displayed here -->
+                    <div class="card mb-3">
+                        <div class="card-body">
+                            <h3 class="card-title">${name}</h3>
+                            <time>${time}</time>
+                            <article class="card-text">${comment}</article>
+                        </div>
+                    </div>
+    
+                `
+            })
+        }
     }
+}else{
+    console.log('Comment Container not defined')
 }
+

Test templates/Javascript/Comments/renderform.js

@@ -1,22 +1,28 @@
-document.getElementById("bloggit-comment-rf").innerHTML = `
-<div class="container mt-5">
-<h1>Leave a Comment</h1>
-<form>
-    <div class="form-group">
-        <label for="comment-name">Name:* (required)</label>
-        <input type="text" class="form-control" id="comment-name" placeholder="Enter your name" required>
-    </div>
-    <div class="form-group">
-        <label for="comment-email">Email: (not compulsory, and this won't be published)</label>
-        <input type="email" class="form-control" id="comment-email" placeholder="Enter your email">
-    </div>
-    <div class="form-group">
-        <label for="comment-comment">Comment:* (required)</label>
-        <textarea class="form-control" id="comment-comment" rows="4" placeholder="Enter your comment" required></textarea>
-    </div>
-    <p id="comment-status"></p>
-    <button type="submit" class="btn btn-primary" id="bloggit-submit-comment">Submit</button>
+const comment_form_container = document.getElementById("bloggit-comment-rf")
 
-</form>
-</div>
-`
+if(comment_form_container){
+    comment_form_container.innerHTML = `
+    <div class="container mt-5">
+    <h1>Leave a Comment</h1>
+    <form>
+        <div class="form-group">
+            <label for="comment-name">Name:* (required)</label>
+            <input type="text" class="form-control" id="comment-name" placeholder="Enter your name" required>
+        </div>
+        <div class="form-group">
+            <label for="comment-email">Email: (not compulsory, and this won't be published)</label>
+            <input type="email" class="form-control" id="comment-email" placeholder="Enter your email">
+        </div>
+        <div class="form-group">
+            <label for="comment-comment">Comment:* (required)</label>
+            <textarea class="form-control" id="comment-comment" rows="4" placeholder="Enter your comment" required></textarea>
+        </div>
+        <p id="comment-status"></p>
+        <button type="submit" class="btn btn-primary" id="bloggit-submit-comment">Submit</button>
+    
+    </form>
+    </div>
+    `    
+}else{
+    console.log("Comment Form Container not defined!")
+}

Test templates/Javascript/Headers/milky-way.js

@@ -8,7 +8,7 @@ bloggit_header.innerHTML = `
 `
 const brand_name = document.getElementById("brand-name")
 const brand_name_a = document.createElement("a")
-brand_name_a.href = "/"
+brand_name_a.href = data["home_page"]
 brand_name_a.className = "navbar-brand"
 if(bloggit_conf["header"]["brand_name"]){
     brand_name_a.innerText = bloggit_conf["header"]["brand_name"]

Test templates/Javascript/home_and_blog.js

@@ -87,7 +87,7 @@ function convert_datetime(param){
     let __time__ = `${hours}:${minutes}:${seconds}`;
 
     // Format the date as "Month Day, Year"
-   return   date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }).toString() + " ; " + __time__;
+   return   date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }).toString() //+ " ; " + __time__;
 }
 
 function strip_tags(param){
@@ -125,15 +125,16 @@ fetch(`http://127.0.0.1:8000/posts/api/${api_key}?url=${current_url}&cont_rend=$
 
         if (data["not_found_details"]){
             if(bloggit_conf["cont_rend"]){
-                document.getElementById("bloggit-container").innerHTML = `    <div class="container">
-                <div class="row justify-content-center">
-                    <div class="col-md-6 text-center mt-5">
-                        <h1 class="display-4">404 - Not Found</h1>
-                        <p class="lead">This Blog Post does not exist!.</p>
-                        <a href="${data["home"]}" class="btn btn-primary">Go to Homepage</a>
+                document.getElementById("bloggit-container").innerHTML = `    
+                <div class="container">
+                    <div class="row justify-content-center">
+                        <div class="col-md-6 text-center mt-5">
+                            <h1 class="display-4">404 - Not Found</h1>
+                            <p class="lead">This Blog Post does not exist!.</p>
+                            <a href="${data["home_page"]}" class="btn btn-primary">Go to Homepage</a>
+                        </div>
                     </div>
-                </div>
-            </div>`
+                </div>`
             }else{
                 console.log("Error 404, This post doesn't exist!");
             }

Test templates/home.html

@@ -8,20 +8,24 @@
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
+    <style>
+
+    </style>
     <script> 
+
         const bloggit_conf = {
             "api_key": "	7070aa3bfb7a4f6f8266fa44180d4aaf",
             "preloader": "veron",
             "cont_rend":"classic",
-            // "header": {
-            //     "type": "milky-way",
-            //     "brand_name": "Craennie's Blog",
-            //     "links":{
-            //         "Home": "/home",
-            //         "Contact": "/contact",
-            //         "About": "/about"
-            //     }
-            // }
+            "header": {
+                "type": "milky-way",
+                "brand_name": "Craennie's Blog",
+                "links":{
+                    "Home": "/home",
+                    "Contact": "/contact",
+                    "About": "/about"
+                }
+            }
         }
     </script> 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

Test templates/post.html

@@ -12,7 +12,7 @@
     <script> 
         const bloggit_conf = {
             "api_key": "7070aa3bfb7a4f6f8266fa44180d4aaf",            
-            "preloader": "veron",
+            // "preloader": "veron",
             "cont_rend":"cappuccin",
             "header": {
                 "type": "milky-way",
@@ -53,7 +53,7 @@
 
     <div id="bloggit-comment-rf">
 
-    </div>
+    </div> 
 
 
     <section id="bloggit-comment-container">

api/models.py

@@ -17,7 +17,7 @@ class Post(models.Model):
     body = HTMLField(
 
     )
-    time = models.DateTimeField(default = datetime.now())
+    time = models.CharField(default = datetime.now(), max_length = 120)
     # featured = models.BooleanField(default=False)
     publish = models.BooleanField(default=False)
     categories = models.CharField(default = "", max_length=100)

api/views.py

@@ -59,7 +59,9 @@ def get(self, request:Request, api_key, *args, **kwargs):
             header_type = get_object_or_404(Scripts, name = header_type)
             if CSS.objects.filter(name = header_type).exists():
                 css_header = CSS.objects.get(name = header_type)
-        except:pass
+            else:
+                css_header = "undefined"
+        except: header_type = "undefined"
 
         user_urls = get_object_or_404(UserSites, user = token.user)
 
@@ -88,7 +90,8 @@ def get(self, request:Request, api_key, *args, **kwargs):
 
             response_data = {
                 "posts": serialized_data.data,
-                "individual_page": user_urls.individual_blog_post
+                "individual_page": user_urls.individual_blog_post,
+                "home_page": user_urls.blog_page
             }
             try:
                 response_data["script"] = script.script
@@ -130,13 +133,16 @@ def get(self, request:Request, api_key, *args, **kwargs):
 
                 response_data = {
                     "post": serialized_data.data,
-                    # "comments": comments_serailizer.data
+                    "home_page": user_urls.blog_page
                 }
                 if cont_rend:
                     response_data["script"] = Scripts.objects.get(name = "cappuccino").script
 
-                if header_type:
+                if header_type != "undefined":
                     response_data["header_type"] = header_type.script
+                elif header_type == "undefined":
+                    pass
+                
 
                 comment_data = request.GET.get("comment")
 
@@ -174,7 +180,8 @@ def get(self, request:Request, api_key, *args, **kwargs):
 
         else:
             response_data = {
-                "unregistered_site_url": "Not Found"
+                "unregistered_site_url": "Not Found",
+                "home_page": user_urls.blog_page
             }
             return Response(response_data, status = status.HTTP_401_UNAUTHORIZED)
 

db.sqlite3

@@ -1,9 +1,12 @@
 const submit_comment_btn = document.getElementById("bloggit-submit-comment")
+const comment_container = document.getElementById("bloggit-comment-container")
 
 if(submit_comment_btn){
 submit_comment_btn.addEventListener("click", function(e){
 
     e.preventDefault()
+    submit_comment_btn.disabled = true
+    submit_comment_btn.style.cursor = "not-allowed"
     let comment = document.getElementById("comment-comment")
     let comment_name = document.getElementById("comment-name")
     let comment_email = document.getElementById("comment-email")
@@ -30,6 +33,22 @@ submit_comment_btn.addEventListener("click", function(e){
     })
     .then(response => {
         if(response.status == '201'){
+            let time = new Date().toDateString();
+            
+            if(comment_container){
+                const c_cont_inner = document.querySelector("#bloggit-comment-container #comments")
+                c_cont_inner.innerHTML =  `
+                <div class="card mb-3">
+                    <div class="card-body">
+                        <h3 class="card-title">${comment_name.value}</h3>
+                        <time>${time}</time>
+                        <article class="card-text">${comment.value}</article>
+                    </div>
+                </div>
+
+            ` + c_cont_inner.innerHTML
+            }
+
             comment.value = comment_email.value = comment_name.value = ""
 
             document.getElementById("comment-status").innerText = 'Your comment has been added!'
@@ -41,6 +60,8 @@ submit_comment_btn.addEventListener("click", function(e){
 
             }
         }
+        submit_comment_btn.disabled = false
+        submit_comment_btn.style.cursor = "pointer"
         return response.json();
 
     })