106 lines
3 KiB
HTML
106 lines
3 KiB
HTML
{% load static %}
|
|
|
|
<div class='comment' id='prekomentar' {# id='k{{k.id}}' #}>
|
|
<div class='corr-header'>
|
|
<div class='author'>{# {{k.autor}} #}</div>
|
|
|
|
<div class='float-right'>
|
|
<button type='button' style='display: none' class='del-comment' title='Smaž komentář'>
|
|
<img src='{% static "korektury/imgs/delete.png" %}' alt='del'/>
|
|
</button>
|
|
|
|
<button type='button' class='update-comment' title='Uprav komentář'>
|
|
<img src='{% static "korektury/imgs/edit.png"%}' alt='edit'/>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class='komtext'>{# {{k.text|linebreaks}} #}</div>
|
|
|
|
<hr>
|
|
</div>
|
|
|
|
|
|
|
|
<script>
|
|
const prekomentar = document.getElementById('prekomentar');
|
|
const komentare = {};
|
|
|
|
class Komentar {
|
|
static update_or_create(komentar_data, oprava) {
|
|
const id = komentar_data['id'];
|
|
if (id in komentare) komentare[id].update(komentar_data);
|
|
else new Komentar(komentar_data, oprava);
|
|
}
|
|
|
|
#autor; #text;
|
|
htmlElement;
|
|
id; oprava; {# komentar_data; #}
|
|
autor;
|
|
|
|
/**
|
|
*
|
|
* @param komentar_data
|
|
* @param {Oprava} oprava
|
|
*/
|
|
constructor(komentar_data, oprava) {
|
|
this.htmlElement = prekomentar.cloneNode(true);
|
|
this.#autor = this.htmlElement.getElementsByClassName('author')[0];
|
|
this.#text = this.htmlElement.getElementsByClassName('komtext')[0];
|
|
|
|
this.id = komentar_data['id'];
|
|
this.htmlElement.id = 'k' + this.id;
|
|
|
|
this.oprava = oprava;
|
|
this.oprava.add_komentar_htmlElement(this.htmlElement);
|
|
|
|
this.update(komentar_data);
|
|
|
|
this.htmlElement.getElementsByClassName('update-comment')[0].addEventListener('click', _ => this.#update_comment());
|
|
this.htmlElement.getElementsByClassName('del-comment')[0].addEventListener('click', _ => this.#delete_comment());
|
|
|
|
komentare[this.id] = this;
|
|
}
|
|
|
|
update(komentar_data) {
|
|
{# this.komentar_data = komentar_data; #}
|
|
this.set_autor(komentar_data['autor']);
|
|
this.set_text(komentar_data['text']);
|
|
};
|
|
|
|
set_autor(autor) {
|
|
this.#autor.textContent=autor;
|
|
this.autor = autor;
|
|
};
|
|
|
|
set_text(text) {
|
|
this.#text.innerHTML=text;
|
|
};
|
|
|
|
|
|
// show comment form when 'update-comment' button pressed
|
|
#update_comment() {
|
|
return commform.show(this.oprava.img_id, this.oprava.x, this.oprava.y, this.#text.textContent, this.oprava.id, this.id);
|
|
}
|
|
|
|
#delete_comment() {
|
|
if (confirm('Opravdu smazat komentář?')) {
|
|
const data = new FormData(CSRF_FORM);
|
|
data.append('komentar_id', this.id);
|
|
fetch('{% url "korektury_api_komentar_smaz" %}', {method: 'POST', body: data})
|
|
.then(response => {
|
|
if (!response.ok) {alert('Něco se nepovedlo:' + response.statusText);}
|
|
this.smaz_pouze_na_strance();
|
|
place_comments();
|
|
})
|
|
.catch(error => {alert('Něco se nepovedlo:' + error);});
|
|
}
|
|
}
|
|
|
|
smaz_pouze_na_strance() {
|
|
delete komentare[this.id];
|
|
this.htmlElement.remove();
|
|
}
|
|
}
|
|
</script>
|