Skip to content

Commit 9a0d259

Browse files
Crane04Crane04
committed
fix templates
1 parent 0816d1c commit 9a0d259

File tree

19 files changed

+859
-117
lines changed

19 files changed

+859
-117
lines changed

‎api_v2/JavaScript/FetchData/.js

Lines changed: 180 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,31 @@
11
let bloggit_data = null
22

3-
const current_url = window.location.href
4-
const url_parameters = window.location.search;
5-
const post_id = new URLSearchParams(url_parameters).get("id");
6-
const bloggit_header = document.getElementById("bloggit-header")
3+
const current_url = window.location.href
4+
5+
const url_parameters = window.location.search;
6+
7+
const post_id = new URLSearchParams(url_parameters).get("id");
8+
9+
const bloggit_header = document.getElementById("bloggit-header")
710
const bloggit_preloader = document.getElementById("bloggit-preloader")
811
const bloggit = document.getElementById("bloggit-container")
12+
13+
/* Added Code */
14+
const comment_container = document.getElementById("bloggit-comment-container")
15+
bloggit_preloader.style.cssText = `
16+
position: fixed;
17+
width: 100vw;
18+
height: 100vh;
19+
z-index: 1000;
20+
display: flex;
21+
align-items: center;
22+
justify-content: center;
23+
background-color: transparent;
24+
`;
25+
/* end*/
926
bloggit_header.innerHTML = `
1027
<nav class="navbar navbar-expand-lg navbar-light bg-light">
11-
<a class="navbar-brand" href="#">Craennie</a>
28+
<a class="navbar-brand" href="#">Crane</a>
1229
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
1330
<span class="navbar-toggler-icon"></span>
1431
</button>
@@ -17,17 +34,23 @@ const bloggit = document.getElementById("bloggit-container")
1734
1835
1936
<li class="nav-item">
20-
<a class="nav-link" href="/home">Home</a>
37+
<a class="nav-link" href="b">a</a>
2138
</li>
2239
2340
</ul>
2441
</div>
2542
</nav>`
2643

27-
28-
preloader = ` <div id="preloader" class="spinner-border text-primary" role="status">
44+
preloader = ` <div class="spinner-grow text-danger" role="status">
45+
<span class="sr-only">Loading...</span>
46+
</div>
47+
<div class="spinner-grow text-warning" role="status">
2948
<span class="sr-only">Loading...</span>
30-
</div>`
49+
</div>
50+
<div class="spinner-grow text-info" role="status">
51+
<span class="sr-only">Loading...</span>
52+
</div>`
53+
3154
bloggit_preloader.innerHTML = preloader
3255

3356
function convert_datetime(param){
@@ -57,6 +80,74 @@ const bloggit = document.getElementById("bloggit-container")
5780
return param
5881
}
5982

83+
}
84+
function render_comment_form(){
85+
const comment_form_container = document.getElementById("bloggit-comment-rf")
86+
87+
if(comment_form_container){
88+
comment_form_container.innerHTML = `
89+
<div class="container mt-5">
90+
<h1>Leave a Comment</h1>
91+
<div class="form-group">
92+
<label for="comment-name">Name:* (required)</label>
93+
<input type="text" class="form-control" id="comment-name" placeholder="Enter your name" >
94+
</div>
95+
<div class="form-group">
96+
<label for="comment-email">Email: (not compulsory, and this won't be published)</label>
97+
<input type="email" class="form-control" id="comment-email" placeholder="Enter your email">
98+
</div>
99+
<div class="form-group">
100+
<label for="comment-comment">Comment:* (required)</label>
101+
<textarea class="form-control" id="comment-comment" rows="4" placeholder="Enter your comment"></textarea>
102+
</div>
103+
<p id="comment-status"></p>
104+
<button class="btn btn-primary" id="submit-comment" onclick = "BloggitSendComment()">Submit</button>
105+
<br /> <br/>
106+
107+
</div>
108+
`
109+
}else{
110+
console.log("Comment Form Container not defined!")
111+
}
112+
}
113+
114+
function render_comments(data){
115+
if (comment_container){
116+
comment_container.classList += "container mt4"
117+
118+
if (comment_container){
119+
comment_container.innerHTML = `<h2>Comments</h2>
120+
<div id="comments" class="mt-4">
121+
122+
</div>
123+
`
124+
const c_cont_inner = document.querySelector("#bloggit-comment-container #comments")
125+
if(data["comments"] != [] || data["comments"]){
126+
data["comments"].forEach(function(parameter){
127+
let name = parameter.name
128+
let comment = parameter.comment
129+
let time = convert_datetime(parameter.time)
130+
131+
c_cont_inner.innerHTML += `
132+
<!-- Comments Display -->
133+
134+
<!-- Comments will be displayed here -->
135+
<div class="card mb-3">
136+
<div class="card-body">
137+
<h3 class="card-title">${name}</h3>
138+
<article class="card-text">${comment}</article>
139+
<time>${time}</time>
140+
</div>
141+
</div>
142+
143+
`
144+
})
145+
}
146+
}
147+
}else{
148+
console.log('Comment Container not defined')
149+
}
150+
60151
}
61152

62153
function strip_tags(param){
@@ -77,7 +168,7 @@ const bloggit = document.getElementById("bloggit-container")
77168
{
78169
"headers": {
79170

80-
"Authorization": "Token a954b21e51c809b72b5e68d5a12717ef4e2c5d3a"
171+
"Authorization": "Token 420a3f9dbc5eaf8dfe3b5c22ea2f630385a9f4cc"
81172

82173
}
83174
}
@@ -157,11 +248,89 @@ const bloggit = document.getElementById("bloggit-container")
157248
<div class="mt-4">
158249
${post.body}
159250
</div>`
251+
252+
render_comments(data)
253+
render_comment_form()
160254
}
255+
try{
256+
bloggit_preloader.style.display = "none"
257+
}catch(error){
258+
259+
}
161260
})
162261

163262
.catch((error) =>{
164263
console.log(error)
165264
})
166265

167-
266+
267+
268+
function BloggitSendComment(){
269+
270+
let comment = document.getElementById("comment-comment")
271+
let comment_name = document.getElementById("comment-name")
272+
let comment_email = document.getElementById("comment-email")
273+
274+
if(!comment.value|| !comment_name.value){
275+
document.getElementById("comment-status").innerText = 'Name or Comment fields can\'t be empty!'
276+
setTimeout(() => {
277+
document.getElementById("comment-status").innerText = ''
278+
}, 4000);
279+
280+
return
281+
}
282+
data = {
283+
"comment": comment.value,
284+
"name": comment_name.value,
285+
"email": comment_email.value
286+
}
287+
fetch("http://127.0.0.1:8000/commentv2/" + new URLSearchParams(url_parameters).get("id"), {
288+
body: JSON.stringify(data),
289+
method: "POST",
290+
headers: {
291+
'Content-Type': "application/json",
292+
"Authorization": `Token 420a3f9dbc5eaf8dfe3b5c22ea2f630385a9f4cc`
293+
}
294+
})
295+
.then(response => {
296+
if(response.status == '201'){
297+
const datetime = new Date()
298+
const date = datetime.toLocaleDateString().replaceAll("/", "-") + " " + datetime.toLocaleTimeString()
299+
document.getElementById("comment-status").innerText = 'Your comment has been added!'
300+
setTimeout(() => {
301+
document.getElementById("comment-status").innerText = ''
302+
}, 4000);
303+
304+
if(document.querySelector("#bloggit-comment-container #comments")){
305+
const c_cont_inner = document.querySelector("#bloggit-comment-container #comments")
306+
c_cont_inner.innerHTML += `
307+
<!-- Comments Display -->
308+
309+
<!-- Comments will be displayed here -->
310+
<div class="card mb-3">
311+
<div class="card-body">
312+
<h3 class="card-title">${comment_name.value}</h3>
313+
<article class="card-text">${comment.value}</article>
314+
<time>${date}</time>
315+
</div>
316+
</div>
317+
318+
`
319+
}
320+
comment.value = comment_email.value = comment_name.value = ""
321+
}
322+
return response.json();
323+
324+
})
325+
.then(data => {
326+
if(data["email"]){
327+
document.getElementById("comment-status").innerText = data["email"][0]
328+
setTimeout(() => {
329+
document.getElementById("comment-status").innerText = ''
330+
}, 4000);
331+
}
332+
})
333+
.catch(error => {
334+
console.error(error);
335+
});
336+
}

‎api_v2/JavaScript/FetchData/classic.py

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,11 @@ def classic(token):
8989
${post.body}
9090
</div>`
9191
}
92+
try{
93+
bloggit_preloader.style.display = "none"
94+
}catch(error){
95+
96+
}
9297
})
9398
9499
.catch((error) =>{

‎api_v2/JavaScript/FetchData/slimyvue.py

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,11 @@ def slimy_vue(token):
8787
${post.body}
8888
</div>`
8989
}
90+
try{
91+
bloggit_preloader.style.display = "none"
92+
}catch(error){
93+
94+
}
9095
})
9196
9297
.catch((error) =>{

‎api_v2/JavaScript/preloader.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ def growdan():
4949

5050
def traffic():
5151
pre_loader = """
52-
`<div class="spinner-grow text-danger" role="status">
52+
preloader = ` <div class="spinner-grow text-danger" role="status">
5353
<span class="sr-only">Loading...</span>
5454
</div>
5555
<div class="spinner-grow text-warning" role="status">

‎api_v2/api_views.py

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
from django.shortcuts import render, get_list_or_404, get_object_or_404, HttpResponse
2+
from django.contrib.auth.models import User
3+
from rest_framework.generics import GenericAPIView
4+
from rest_framework.response import Response
5+
from rest_framework.authentication import TokenAuthentication, SessionAuthentication
6+
from rest_framework.permissions import AllowAny, IsAuthenticated
7+
from django.views import View
8+
from rest_framework import status
9+
from app.models import UserConfig, UserSites, UserScript
10+
from .utils import GetUserPosts_, GetPost_
11+
# Create your views here.
12+
13+
14+
class MainApiView(GenericAPIView):
15+
16+
authentication_classes = [TokenAuthentication]
17+
permission_classes = [IsAuthenticated]
18+
19+
20+
def get(self, request, *args, **kwargs):
21+
user_sites = get_object_or_404(UserSites, user = request.user)
22+
23+
current_url = request.GET.get("location")
24+
if user_sites.blog_page in current_url:
25+
return GetUserPosts_(request)
26+
27+
elif user_sites.individual_blog_post in current_url:
28+
29+
return GetPost_(request)
30+
else:
31+
return Response({"details":"error occured!"}, status = status.HTTP_400_BAD_REQUEST)
32+
33+

‎api_v2/templatetags/v2_extras.py

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
from django import template
2+
from django.template.defaultfilters import stringfilter
3+
4+
import markdown as md
5+
6+
register = template.Library()
7+
8+
9+
@register.filter()
10+
@stringfilter
11+
def markdown(value):
12+
return md.markdown(value, extensions=['markdown.extensions.fenced_code'])

‎api_v2/urls.py

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
from django.urls import path
2-
from .views import MainApiView, GenerateScript
2+
from .api_views import MainApiView
3+
from .views import DocumentationViewV2, ApiPageView
34

45
# api paths
56
urlpatterns = [
67
path("main", MainApiView.as_view()),
7-
path("gn", GenerateScript.as_view())
8+
path("", DocumentationViewV2.as_view()),
9+
path("api-v2", ApiPageView.as_view())
810
]

0 commit comments

Comments
 (0)