From 373076489cc04812cc73f1825ee722726213d36a Mon Sep 17 00:00:00 2001 From: "Chen, Chien-ting" Date: Mon, 14 Nov 2022 02:15:11 +0800 Subject: [PATCH] add function of previous posts getting --- khaikang/urls.py | 1 + khaikang/views.py | 26 +++++++++++++++++++++-- templates/index.html | 50 ++++++++++++++++++++++++++++++++++++++------ 3 files changed, 69 insertions(+), 8 deletions(-) diff --git a/khaikang/urls.py b/khaikang/urls.py index 816c025..f3df2dc 100644 --- a/khaikang/urls.py +++ b/khaikang/urls.py @@ -26,4 +26,5 @@ urlpatterns = [ path('api/post', views.api_post), path('api/get_recent_posts_counter', views.api_get_recent_posts_counter), path('api/get_latest_posts', views.api_get_latest_posts), + path('api/get_previous_posts', views.api_get_previous_posts), ] diff --git a/khaikang/views.py b/khaikang/views.py index 656adef..cc0c432 100644 --- a/khaikang/views.py +++ b/khaikang/views.py @@ -11,6 +11,28 @@ from django.http import JsonResponse from django.core import serializers from django.db.models import Q +def api_get_previous_posts(request): + if request.method == 'POST': + post_body_orig = request.body.decode('utf-8') + post_body_json = json.loads(post_body_orig) + oldest_time = post_body_json["oldest_time"] + oldest_datetime_object = datetime.strptime(oldest_time, '%Y-%m-%d %H:%M:%S.%f%z') + older_posts = Post.objects.filter(post_time__lt=oldest_datetime_object).order_by('-id')[:20] + older_posts_list = [{"id" : o.pk, + "post_time" : datetime.strftime(o.post_time, "%Y-%m-%d %H:%M:%S.%f%z"), + "poster_username" : o.poster.username, + "poster_shown_name":o.poster.shown_name , + "text": o.text} + for o in older_posts] + if len(list(older_posts)) > 0: + oldest_time = datetime.strftime(list(older_posts)[-1].post_time, "%Y-%m-%d %H:%M:%S.%f%z") + else: + oldest_time = oldest_time + return JsonResponse({'older_posts':older_posts_list, + 'oldest_time': oldest_time}) + + + def api_get_latest_posts(request): if request.method == 'POST': post_body_orig = request.body.decode('utf-8') @@ -91,10 +113,10 @@ def home(request): if request.user == AnonymousUser(): return redirect('/account/login') # redirect to main page - public_timeline_list = Post.objects.filter(privilage = 'public').order_by('-id')[:10] + public_timeline_list = Post.objects.filter(privilage = 'public').order_by('-id')[:20] latest_received_time = timezone.now() - oldest_received_time = public_timeline_list[9].post_time + oldest_received_time = public_timeline_list[19].post_time template = loader.get_template('index.html') diff --git a/templates/index.html b/templates/index.html index 60bc6cb..0324c3a 100644 --- a/templates/index.html +++ b/templates/index.html @@ -33,12 +33,13 @@
{{public_post.poster.shown_name}} at {{public_post.post_time|date:"Y-m-d H:i:s.u"}}+0000
- {{public_post.text}}
+ {{public_post.text|linebreaksbr}}
↩ī¸ - 🔁 - ⭐
{% endfor %} +
{{oldest_received_time|date:"Y-m-d H:i:s.u"}}+0000
@@ -139,6 +140,34 @@ if (newer_posts_num > 1) var intervalID = window.setInterval(getRecentPostsCounter, 20000); +function appendPostToTheEnd(post){ + var public_tl = $("public_timeline"); + var new_div = createPostDiv(post); + + + public_tl.insertBefore(new_div, $('previous_post_loader')); +} + +async function getPreviousPosts(){ + var new_oldest_time; + oldest_time_string = $("oldest_time").innerHTML; + await fetch('/api/get_previous_posts', { + method: 'POST', + headers: { + "X-CSRFToken": "{{ csrf_token }}", + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + "oldest_time" : oldest_time_string, + }) }).then(response => response.json()) + .then(item => {new_oldest_time_raw = item['oldest_time']; + new_oldest_time = new_oldest_time_raw.substring(0,10) + " " + new_oldest_time_raw.substring(11,26) + "+0000"; + return item['older_posts'];}) + .then(posts => {if (posts.length == 0) + {$('previous_post_loader').style.display = 'none';} + else{posts.forEach(post => appendPostToTheEnd(post)); + $('oldest_time').innerHTML = new_oldest_time;}}) +} async function getLatestPosts(){ @@ -153,22 +182,23 @@ async function getLatestPosts(){ "latest_time" : latest_time_string, }) }).then(response => response.json()) .then(item => item['newer_posts']) - .then(posts => {posts.forEach(post => add_post_to_the_beginning(post)); + .then(posts => {posts.forEach(post => addPostToTheBeginning(post)); $('new_post_notifier').style.display = "none"; var nowTime = new Date(); var nowTimeString = nowTime.toISOString(); $("latest_time").innerHTML = nowTimeString.substring(0,10) + " " + nowTimeString.substring(11,23) + "000+0000"; }); } -function add_post_to_the_beginning(post){ - console.log(post); - var public_tl = $("public_timeline"); +function createPostDiv(post){ + var new_div = document.createElement("div"); new_div.id = `post-${post.id}`; new_div.className = "post"; + post_text_replaced = post.text.replace(/(\r\n|\n\r|\r|\n)/g, "
" ); + console.log(post_text_replaced); new_div.innerHTML = `${post.poster_shown_name} at ${post.post_time}
- ${post.text}
+ ${post_text_replaced}
↩ī¸ - 🔁 - ⭐`; @@ -177,12 +207,20 @@ function add_post_to_the_beginning(post){ timezoneChangingOne(new_div_timestamp); + return new_div; +} + +function addPostToTheBeginning(post){ + var public_tl = $("public_timeline"); + var new_div = createPostDiv(post); + public_tl.insertBefore(new_div, $('latest_time').nextSibling); } $("new_post_notifier").addEventListener('click', getLatestPosts); +$("previous_post_loader").addEventListener('click', getPreviousPosts);