khaikang/templates/index.html

191 lines
No EOL
6.2 KiB
HTML

{% extends "base_generic.html" %}
{% load tz %}
{% get_current_timezone as TIME_ZONE %}
{% block content %}
<form method="POST" id="posting-form">
{% csrf_token %}
<div class="posting-form-group">
<label>Post</label>
<textarea id="post_text" name="post_text" placeholder="What do you want to post?"
maxlength="500" style="resize: none;" oninput="auto_expand(this)"></textarea>
</div>
{% csrf_token %}
<label for="privilege">Privileges:</label>
<select name="privilege" id="privil_choosing">
<option value="public" selected>Public Timeline</option>
<option value="unpublic">Not in Public Timeline</option>
<option value="private">Private</option>
</select>
<button id="submit_post" type="button" class="btn">Post!</button>
</form>
<div id="public_timeline">
<div id="new_post_notifier" value=""></div>
<div id="latest_time" style="display: block;">{{latest_received_time|date:"Y-m-d H:i:s.u"}}+0000</div>
{% for public_post in public_timeline_list %}
<div id="post-{{public_post.id}}" class="post"><a href="user/{{public_post.poster}}">{{public_post.poster.shown_name}}</a>
at <a href="post/{{public_post.id}}" class="post-time">{{public_post.post_time|date:"Y-m-d H:i:s.u"}}+0000</a><br/>
{{public_post.text}}<br/>
<span id="reply-{{public_post.id}}" value="{{public_post.id}}" class="reply">↩️</span>
- <span id="repost-{{public_post.id}}" value="{{public_post.id}}" class="repost">🔁</span>
- <span id="fav-{{public_post.id}}" value="{{public_post.id}}" class="fav"></span>
</div>
{% endfor %}
<div id="oldest_time" style="display: block;">{{oldest_received_time|date:"Y-m-d H:i:s.u"}}+0000</div>
</div>
<script>
timezoneChangingOne = (x)=>{var date= new Date(x.innerHTML);
var year = date.getFullYear().toString();
var month = (date.getMonth()+1).toString().padStart(2, '0');
var day = date.getDate().toString().padStart(2, '0');
var hour = date.getHours().toString().padStart(2, '0');
var min = date.getMinutes().toString().padStart(2, '0');
var sec = date.getSeconds().toString().padStart(2, '0');
local_date_string = `${year}-${month}-${day} ${hour}:${min}:${sec}`;
x.innerHTML=local_date_string;}
function timezoneChanging(){
document.querySelectorAll(".post-time").forEach(
x => timezoneChangingOne(x)
);
}
$name = (x) => document.getElementsByName(x);
$ = (x) => document.getElementById(x);
var httpRequest;
$("submit_post").addEventListener('click', make_req);
async function make_req() {
post_text = $('post_text').value;
post_privilage = $('privil_choosing').value;
if (post_text != ""){
await fetch('/api/post', {
method: 'POST',
headers: {
"X-CSRFToken": "{{ csrf_token }}",
'Content-Type': 'application/json',
},
body: JSON.stringify({
"privilage" : post_privilage,
"text": post_text,
})
}).then(response => {if (response.ok == true)
{$('post_text').value = "";
getLatestPosts(); // wait for a moment then get latest posts
}}
);
}
}
function auto_expand(element) {
element.style.height = 6+"em";
element.style.height = (element.scrollHeight)+"px";
}
timezoneChanging();
function adjust_post_text(){
var post_text = $("post_text");
post_text.style.height = 6+"em";
post_text.style.height = (post_text.scrollHeight)+"px";
}
async function getRecentPostsCounter(){
latest_time_string = $("latest_time").innerHTML;
await fetch('/api/get_recent_posts_counter', {
method: 'POST',
headers: {
"X-CSRFToken": "{{ csrf_token }}",
'Content-Type': 'application/json',
},
body: JSON.stringify({
"latest_time" : latest_time_string,
})
}).then(response => response.json())
.then(the_json => {console.log(the_json);let newer_posts_num = the_json['newer_posts_num'];
if (newer_posts_num == 1)
{ $("new_post_notifier").style.display = "block";
$("new_post_notifier").innerHTML = `1 new post`}
if (newer_posts_num > 1)
{ $("new_post_notifier").style.display = "block";
$("new_post_notifier").innerHTML = `${newer_posts_num} new posts`} });
}
var intervalID = window.setInterval(getRecentPostsCounter, 20000);
async function getLatestPosts(){
latest_time_string = $("latest_time").innerHTML;
await fetch('/api/get_latest_posts', {
method: 'POST',
headers: {
"X-CSRFToken": "{{ csrf_token }}",
'Content-Type': 'application/json',
},
body: JSON.stringify({
"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));
$('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");
var new_div = document.createElement("div");
new_div.id = `post-${post.id}`;
new_div.className = "post";
new_div.innerHTML = `<a href="user/${post.poster_username}">${post.poster_shown_name}</a>
at <a href="post/${post.id}" class="post-time">${post.post_time}</a><br>
${post.text}<br>
<span id="reply-${post.id}" value="${post.id}" class="reply">↩️</span>
- <span id="repost-${post.id}" value="${post.id}" class="repost">🔁</span>
- <span id="fav-${post.id}" value="${post.id}" class="fav">⭐</span>`;
new_div_timestamp = new_div.getElementsByClassName('post-time')[0];
timezoneChangingOne(new_div_timestamp);
public_tl.insertBefore(new_div, $('latest_time').nextSibling);
}
$("new_post_notifier").addEventListener('click', getLatestPosts);
adjust_post_text();
</script>
{% endblock %}