From c80e4b7c1715cbe92c0b8a4f87f559a749c050a0 Mon Sep 17 00:00:00 2001 From: =?utf8?q?J=C3=B6rn=20Menne?= Date: Fri, 10 Jan 2025 21:27:40 +0100 Subject: [PATCH] Add recursive form for categories The form is created in javascript. Currently only the frontend is usable. --- georeport/static/georeport/create_Report.js | 13 +++- .../static/georeport/recurse_selection.js | 75 +++++++++++++++++++ georeport/templates/georeport/create.html | 24 ++++++ georeport/urls.py | 2 + georeport/views.py | 29 ++++++- 5 files changed, 138 insertions(+), 5 deletions(-) create mode 100644 georeport/static/georeport/recurse_selection.js diff --git a/georeport/static/georeport/create_Report.js b/georeport/static/georeport/create_Report.js index dd672d1..05d9277 100644 --- a/georeport/static/georeport/create_Report.js +++ b/georeport/static/georeport/create_Report.js @@ -6,6 +6,12 @@ var lat_input = document.getElementById("id_latitude"); var lng_input = document.getElementById("id_longitude"); let marker = L.marker(); +/* + * set to 6 decimals points to get a precision of around 10cm + * according to https://en.wikipedia.org/wiki/Decimal_degrees +*/ +const precision = 6 + lat_input.addEventListener("change", () => { marker.setLatLng([lat_input.value, lng_input.value]) @@ -22,8 +28,11 @@ function onMapClick(e) { marker.setLatLng(e.latlng) .addTo(map); - lat_input.value = e.latlng.lat.toFixed(6); - lng_input.value = e.latlng.lng.toFixed(6); + lat_input.value = e.latlng.lat.toFixed(precision); + lng_input.value = e.latlng.lng.toFixed(precision); + + document.getElementById("latitude").value = lat_input.value; + document.getElementById("longitude").value = lng_input.value; } diff --git a/georeport/static/georeport/recurse_selection.js b/georeport/static/georeport/recurse_selection.js new file mode 100644 index 0000000..40b3cd3 --- /dev/null +++ b/georeport/static/georeport/recurse_selection.js @@ -0,0 +1,75 @@ +function getsubcats(element) { + const id = element.id;; + var level = 0; + + if (id != "category") + level = id; + console.log(level); + const rootselect = document.getElementById(id); + + let = url = `category/${rootselect.value}/children`; + + const form = document.getElementById("form"); + const submit = document.getElementById("submit"); + console.log(url); + fetch(url) + .then(response => { + if (!response.ok) { + throw new Error(`HTTP Error: Status: ${response.status}`); + } + return response.json(); + }) + .then(data => { + console.log(data); + level++; + + let subcats = data["subcategories"]; + if (subcats.length == 0) { + let oldselect = document.getElementById(level); + if (oldselect) { + form.removeChild(oldselect); + oldselect.remove(); + form.removeChild(submit); + form.appendChild(submit); + } + return + } + let select = document.createElement("select"); + select.id = level; + select.name = select.id; + select.value = ""; + select.innerHTML = "Choose a subcategory"; + select.onchange = function () { + getsubcats(this); + } + + var option = document.createElement("option"); + option.value = ""; + option.innerHTML = "Subcategory"; + option.disabled = true; + option.selected = true; + select.appendChild(option); + + + console.log(subcats); + for (var cat of subcats) { + option = document.createElement("option"); + option.value = cat.id; + option.innerText = cat.name; + select.appendChild(option); + } + + form.removeChild(submit); + form.appendChild(select); + form.appendChild(submit); + + console.log(level); + }); + +} + +/*TODO Better ids for selection */ +/*TODO Labels for selection*/ +/*TODO tidy up*/ + + diff --git a/georeport/templates/georeport/create.html b/georeport/templates/georeport/create.html index 83f6213..0e08afd 100644 --- a/georeport/templates/georeport/create.html +++ b/georeport/templates/georeport/create.html @@ -11,6 +11,30 @@ GNU General Public License v3.0 (see LICSENE or https://www.gnu.org/license/gpl- {{ reportForm }} + +
+ {% csrf_token %} + +
+ +
+ +
+ +
+ +
+ +
+ +
diff --git a/georeport/urls.py b/georeport/urls.py index 7bf6769..06b40ff 100644 --- a/georeport/urls.py +++ b/georeport/urls.py @@ -11,4 +11,6 @@ urlpatterns = [ path("", views.details, name="detail"), path("create", views.create, name="create"), path("category/", views.category_details, name="category"), + # TODO + path("category//children", views.get_subcategories, name="subcategories"), ] diff --git a/georeport/views.py b/georeport/views.py index 07d6eb0..7f277ce 100644 --- a/georeport/views.py +++ b/georeport/views.py @@ -6,9 +6,11 @@ from django.http import HttpResponseForbidden, JsonResponse from django.shortcuts import get_object_or_404, redirect, render from .forms import ReportForm +import json # Create your views here. from .models import Category, Report +import pdb def index(request): @@ -36,11 +38,32 @@ def category_details(request, id): def create(request): if request.method == "POST": - reportForm = ReportForm(request.POST) - # TOOD Inputvalidations + post = request.POST + report = {} + report["title"] = post["title"] + report["longitude"] = post["longitude"] + report["latitude"] = post["latitude"] + report["category"] = post["category"] + report["email"] = post["email"] + + reportForm = ReportForm(report) + # reportForm = ReportForm(request.POST) + + # TODO Inputvalidation reportForm.save() return redirect("index") else: reportForm = ReportForm() - return render(request, "georeport/create.html", context={"reportForm": reportForm}) + return render( + request, + "georeport/create.html", + context={"reportForm": reportForm, "categories": Category.objects.all()}, + ) + + +def get_subcategories(request, id): + subcats = Category.objects.filter(parent__id=id) + data = [{"id": cat.id, "name": cat.name} for cat in subcats] + data = {"subcategories": data} + return JsonResponse(data) -- 2.39.5