143 lines
4.7 KiB
JavaScript
143 lines
4.7 KiB
JavaScript
async function publish_comment(id) {
|
|
var csrf
|
|
document.querySelector('.add-comment').querySelectorAll('input,textarea').forEach(input => {
|
|
if (input.name == 'csrfmiddlewaretoken') {
|
|
csrf = input.value.trim()
|
|
}
|
|
})
|
|
var data = {
|
|
"comment": id
|
|
}
|
|
return fetch("/comment/publish/", {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': csrf
|
|
},
|
|
body: JSON.stringify(data)
|
|
}).then(response => {
|
|
return response.json()
|
|
})
|
|
}
|
|
|
|
async function login(username, password) {
|
|
var csrf
|
|
document.querySelector('.add-comment').querySelectorAll('input,textarea').forEach(input => {
|
|
if (input.name == 'csrfmiddlewaretoken') {
|
|
csrf = input.value.trim()
|
|
}
|
|
})
|
|
var data = {
|
|
"username": username,
|
|
"password": password,
|
|
}
|
|
return fetch("/login/", {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': csrf
|
|
},
|
|
body: JSON.stringify(data)
|
|
}).then(response => {
|
|
return response.json()
|
|
})
|
|
}
|
|
|
|
function renderComments(cdiv, data) {
|
|
cdiv.innerHTML = `
|
|
<h3>
|
|
<span class="icon">${icon.down}</span>
|
|
Comments
|
|
</h3>
|
|
<div class="block">
|
|
<div class="comments-content">
|
|
</div>
|
|
</div>
|
|
`
|
|
const content = cdiv.querySelector('.comments-content')
|
|
comments.forEach(comment => {
|
|
var extra = ''
|
|
if (!comment.published) {
|
|
if (user.is_moderator) {
|
|
extra += `<button class="publish-comment">${icon.publishComment}</button>`
|
|
} else {
|
|
extra += '(under review)'
|
|
}
|
|
}
|
|
var c = document.createElement('div')
|
|
c.className = 'comment'
|
|
c.innerHTML = `
|
|
<div class="text">${comment.text}</div>
|
|
<div class="meta">
|
|
by <span class="name">${comment.name}</span>
|
|
on
|
|
<span class="date">${comment.date}</span>
|
|
${extra}
|
|
</div>
|
|
`
|
|
c.querySelectorAll('button.publish-comment').forEach(button => {
|
|
button.title = "click to publish"
|
|
button.addEventListener("click", event => {
|
|
button.disabled = true
|
|
publish_comment(comment.id).then(response => {
|
|
button.remove()
|
|
})
|
|
})
|
|
})
|
|
content.append(c)
|
|
})
|
|
var add = document.querySelector('.add-comment')
|
|
add.style.display = 'block'
|
|
cdiv.querySelector('.block').append(add)
|
|
cdiv.querySelector('h3').addEventListener("click", event => {
|
|
var img = cdiv.querySelector('h3 .icon')
|
|
if (cdiv.classList.contains("collapsed")) {
|
|
cdiv.classList.remove("collapsed")
|
|
img.innerHTML = icon.down
|
|
} else {
|
|
cdiv.classList.add("collapsed")
|
|
img.innerHTML = icon.right
|
|
}
|
|
})
|
|
}
|
|
|
|
document.querySelector('button#add-comment').addEventListener('click', event => {
|
|
var data = {}, csrf;
|
|
document.querySelector('.add-comment').querySelectorAll('input,textarea').forEach(input => {
|
|
if (input.name == 'csrfmiddlewaretoken') {
|
|
csrf = input.value.trim()
|
|
} else {
|
|
data[input.name] = input.value.trim()
|
|
if (!data[input.name]) {
|
|
delete data[input.name]
|
|
}
|
|
}
|
|
})
|
|
data.item = pandora.comment
|
|
fetch("/comment/", {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': csrf
|
|
},
|
|
body: JSON.stringify(data)
|
|
}).then(response => {
|
|
return response.json()
|
|
}).then(response => {
|
|
var comment = document.createElement('div')
|
|
comment.classList.add('comment')
|
|
comment.innerHTML = `
|
|
<div class="text"></div>
|
|
<div class="meta">
|
|
by <span class="name"></span>
|
|
on
|
|
<span class="date"></span>
|
|
</div>
|
|
`
|
|
comment.querySelector('.name').innerText = response.name
|
|
comment.querySelector('.date').innerText = response.date
|
|
comment.querySelector('.text').innerText = response.text
|
|
document.querySelector('.comments .comments-content').append(comment)
|
|
document.querySelector('.add-comment textarea').value = ''
|
|
})
|
|
})
|