Dynamický formset na zadávání bodů k řešení (jen template)

seminar/templates/seminar/odevzdavatko/detail.html

@@ -2,6 +2,59 @@
 
 {% block content %}
 
+{# FIXME: Necopypastovat! Tohle je zkopírované ze static/seminar/dynamic_formsets.js #}
+<script type='text/javascript'>
+// Credit https://medium.com/all-about-django/adding-forms-dynamically-to-a-django-formset-375f1090c2b0
+function updateElementIndex(el, prefix, ndx) {
+	var id_regex = new RegExp('(' + prefix + '-\\d+)');
+	var replacement = prefix + '-' + ndx;
+	if ($(el).attr("for")) {
+		$(el).attr("for", $(el).attr("for").replace(id_regex, replacement));
+	}
+	if (el.id) {
+		el.id = el.id.replace(id_regex, replacement);
+	}
+	if (el.name) {
+		el.name = el.name.replace(id_regex, replacement);
+	}
+}
+
+// Credit https://medium.com/all-about-django/adding-forms-dynamically-to-a-django-formset-375f1090c2b0
+function deleteForm(prefix, btn) {
+    var total = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
+    if (total >= 1){
+        btn.closest('tr').remove();
+        var forms = $('.hodnoceni');
+        $('#id_' + prefix + '-TOTAL_FORMS').val(forms.length);
+        for (var i=0, formCount=forms.length; i<formCount; i++) {
+            $(forms.get(i)).find(':input').each(function() {
+                updateElementIndex(this, prefix, i);
+            });
+        }
+    }
+    return false;
+}
+
+// Credit: https://simpleit.rocks/python/django/dynamic-add-form-with-add-button-in-django-modelformset-template/
+$(document).ready(function(){
+	$('#pridat_hodnoceni').click(function() {
+		var form_idx = $('#id_hodnoceni_set-TOTAL_FORMS').val();
+		var new_form = $('#empty_form').html().replace(/__prefix__/g, form_idx);
+		$('#form_set').append(new_form);
+		// Newly created form has not the binding between remove button and remove function
+		// We need to add it manually
+		$('.smazat_hodnoceni').click(function(){
+			deleteForm("hodnoceni_set",this);
+		});
+		$('#id_hodnoceni_set-TOTAL_FORMS').val(parseInt(form_idx) + 1);
+	});
+	$('.smazat_hodnoceni').click(function(){
+		deleteForm("hodnoceni_set",this);
+	});
+});
+</script>
+
+
 <p>Řešené problémy: {{ object.problem.all | join:", " }}</p>
 
 <p>Řešitelé: {{ object.resitele.all | join:", " }}</p>
@@ -45,7 +98,31 @@
 
 <form method=post><table>
 {% csrf_token %}
-{{ form }}
-</table><input type=submit></form>
+{{ form.management_form }}
+<table id="form_set">
+<tr><th>Problém</th><th>Body</th><th>Číslo pro body</th></tr>
+{% for subform in form %}
+	<tr class="hodnoceni">
+		<td>{{ subform.problem }}</td>
+		<td>{{ subform.body }}</td>
+		<td>{{ subform.cislo_body }}</td>
+		<td><input type=button class="smazat_hodnoceni" value="Smazat" id="id_{{subform.prefix}}-jsremove"></td>
+	</tr>
+{% endfor %}
+</table>
+
+
+<table id="empty_form" style="display: none;">
+	<tr class="hodnoceni">
+		<td>{{ form.empty_form.problem }}</td>
+		<td>{{ form.empty_form.body }}</td>
+		<td>{{ form.empty_form.cislo_body }}</td>
+		<td><input type=button class="smazat_hodnoceni" value="Smazat" id="id_{{form.empty_form.prefix}}-jsremove"></td>
+	</tr>
+</table>
+
+<input type=button id="pridat_hodnoceni" value="Přidat hodnocení">
+<input type=submit></form>
+
 
 {% endblock %}