Korektury načtené z API (místo v templatu)…

korektury/api/urls.py

@@ -5,4 +5,5 @@ from . import views
 urlpatterns = [
 	path('<int:pdf_id>/stav', org_required(views.korektury_stav_view), name='korektury_api_pdf_stav'),
 	path('oprava/stav', org_required(views.oprava_stav_view), name='korektury_api_oprava_stav'),
+	path('<int:pdf_id>/opravy_a_komentare', org_required(views.opravy_a_komentare_view), name='korektury_api_opravy_a_komentare'),
 ]

korektury/api/views.py

@@ -1,5 +1,6 @@
 from django.http import HttpResponseForbidden, JsonResponse
 from django.shortcuts import get_object_or_404
+from django.utils.html import linebreaks
 from django.views.decorators.csrf import csrf_exempt
 
 from rest_framework import serializers
@@ -32,3 +33,33 @@ def oprava_stav_view(request, **kwargs):
 		op.status = status
 		op.save()
 	return JsonResponse({'status': op.status})
+
+class KomentarSerializer(serializers.ModelSerializer):
+	class Meta:
+		model = Komentar
+		fields = '__all__'
+
+	def to_representation(self, instance):
+		ret = super().to_representation(instance)
+		ret["autor"] = str(instance.autor)
+		ret["text"] = linebreaks(ret["text"], autoescape=True) # Autora není třeba escapovat, ten se vkládá jako text.
+		return ret
+
+class OpravaSerializer(serializers.ModelSerializer):
+	class Meta:
+		model = Oprava
+		fields = '__all__'
+
+	def to_representation(self, instance):
+		ret = super().to_representation(instance)
+		ret["komentare"] = [KomentarSerializer(komentar).data for komentar in instance.komentar_set.all()]
+		return ret
+
+	# komentar_set = serializers.ListField(child=KomentarSerializer())
+
+def opravy_a_komentare_view(request, pdf_id: int, **kwargs):
+	q = request.POST
+
+	opravy = Oprava.objects.filter(pdf=pdf_id).all()
+	# Serializovat list je prý security vulnerability, tedy je přidán slovník pro bezpečnost
+	return JsonResponse({"context": [OpravaSerializer(oprava).data for oprava in opravy]})

korektury/static/korektury/opraf.js

@@ -1,6 +1,6 @@
 function place_comments_one_div(img_id, comments)
 {
-	var img = document.getElementById(img_id);
+	var img = document.getElementById("img-"+img_id);
 	if( img == null ) {
 		return;
 	}
@@ -13,27 +13,14 @@ function place_comments_one_div(img_id, comments)
 
 	var bott_max = 0;
 	var comments_sorted = comments.sort(function (a,b) {
-		return a[2] - b[2];
+		return a.y - b.y;
-		//pokus o hezci kladeni poiteru, ale nic moc
-		if( a[3] < b[3] ) { 
-			return (a[2] + pointer_min_h)- b[2];
-		} else {
-			return (a[2] - pointer_min_h)- b[2];
-		}
 
 	});
-	for (c in comments_sorted) {
+	for (const oprava of comments_sorted) {
-		var id = comments_sorted[c][0];
+		const x = oprava.x;
-		var x  = comments_sorted[c][1];
+		const y = oprava.y;
-		var y  = comments_sorted[c][2];
+        const el = oprava.htmlElement;
-
+		const elp = oprava.pointer;
-        if (!(id in opravy)) {
-            console.log(id)
-            continue;
-        }
-        var op = opravy[id];
-        var el = op.htmlElement;
-		var elp = op.pointer;
 
 		if( el == null  || elp == null ) { 
 			continue;
@@ -67,8 +54,8 @@ function place_comments_one_div(img_id, comments)
 }
 
 function place_comments() {
-    for (var i=0; i < comments.length-1; i++) {
+    for (let [img_id, opravy] of Object.entries(comments)) {
-	    place_comments_one_div(comments[i][0], comments[i][1])
+	    place_comments_one_div(img_id, opravy)
     }
 }
 

korektury/templates/korektury/korekturovatko/__oprava.html

@@ -77,7 +77,7 @@
 
       this.x = oprava_data['x'];
       this.y = oprava_data['y'];
-      this.img_id = oprava_data['img_id'];
+      this.img_id = oprava_data['strana'];
 
       this.update(oprava_data);
 
@@ -91,6 +91,7 @@
       this.htmlElement.addEventListener('mouseout', _ => this.pointer.dataset.highlight = 'false');
 
       opravy[this.id] = this;
+      comments[this.img_id].push(this);
     }
 
     update(oprava_data) {

korektury/templates/korektury/korekturovatko/_main.html

@@ -20,36 +20,17 @@
 {% include "korektury/korekturovatko/__komentar.html" %}
 
 <script>
-  var comments = [
+  const comments = {
     {% for s in opravy_strany %}
-      ["img-{{s.strana}}", [{% for o in s.op_id %}[{{o.id}},{{o.x}},{{o.y}}],{% endfor %}[]]],
+      {{s.strana}}: []{% if not forloop.last %},{% endif %}
     {% endfor %}
-    []]
+  };
 
-  const data = [
+  fetch('{% url "korektury_api_opravy_a_komentare" pdf.id %}')
-    {% for o in opravy %}
+    .then(response => {
-      {
+      if (!response.ok) {alert('Něco se nepovedlo:' + response.statusText);}
-        id: "{{o.id}}",
+      else response.json().then(data => {
-        x: "{{o.x}}",
+        for (const oprava_data of data["context"]) {
-        y: "{{o.y}}",
-        img_id: "{{o.strana}}",
-        status: "{{o.status}}",
-        komentare: [
-          {% for k in o.komentare %}
-            {
-              id: "{{ k.id }}",
-              text: "{{ k.text|slugify }}",
-              autor: "{{k.autor}}"
-            }
-          {% if not forloop.last %},{% endif %}
-          {% endfor %}
-        ]
-      }
-    {% if not forloop.last %},{% endif %}
-    {% endfor %}
-  ];
-
-  for (const oprava_data of data) {
           const oprava = new Oprava(oprava_data);
           for (const komentar_data of oprava_data["komentare"]) {
             new Komentar(komentar_data, oprava);
@@ -57,6 +38,9 @@
         }
 
         place_comments();
+      });
+    })
+    .catch(error => {alert('Něco se nepovedlo:' + error);});
 </script>
 
 <form id='CSRF_form' style='display: none'>{% csrf_token %}</form>