Add recursive form for categories

The form is created in javascript.
Currently only the frontend is usable.

diff --git a/georeport/static/georeport/create_Report.js b/georeport/static/georeport/create_Report.js
index dd672d1b920fd0f2a11b3863c1641ad70fbeb307..05d9277675a6d1fd5ccfdb257b7f8246dbf97eb3 100644 (file)
--- 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 (file)
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 83f6213f8282230baec3e7c8918dd4ce5d908720..0e08afdabfa46fc572674c5702d3802deb2c5cd4 100644 (file)
--- 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 }}
     <input type="submit"/>
 </form>
+<script src="{% static 'georeport/recurse_selection.js' %}"></script>
+<form method="post" id="form">
+    {% csrf_token %}
+    <label for="title">Title:</label>
+    <input type="text" id="title" name="title" required> </br>
+    <label for="description">Description:</label>
+    <input type="text" id="description" name="description"> </br>
+    <label for="latitude">Latitude:</label>
+    <input type="number" id="latitude" name="latitude" step=0.000001 required > </br>
+    <label for="longitude">Longitude:</label>
+    <input type="number" id="longitude" name="longitude" step=0.000001 required > </br>
+    <label for="email">Email:</label>
+    <input type="email" id="email" name="email"i required > </br>
+    <label for="category">Category</label>
+    <select id="category" name="category" onchange="getsubcats(this)" required>
+        <option value="" disabled selected>Choose a category.</option>
+        {% for cat in categories %}
+            {% if cat.parent is none %}
+                <option value="{{cat.id}}">{{cat.name}}</option>
+            {% endif %}
+        {% endfor %}
+    </select></br>
+    <input type="submit" id="submit">
+</form>
 <script src="{% static 'georeport/create_Report.js' %}"></script>
 
 <!-- TODO better URLS -->

diff --git a/georeport/urls.py b/georeport/urls.py
index 7bf6769496219a326f8425755b74b87d926bed64..06b40fffa1b749f1632b342f3e965f272d6cd811 100644 (file)
--- a/georeport/urls.py
+++ b/georeport/urls.py
@@ -11,4 +11,6 @@ urlpatterns = [
     path("<int:id>", views.details, name="detail"),
     path("create", views.create, name="create"),
     path("category/<int:id>", views.category_details, name="category"),
+    # TODO
+    path("category/<int:id>/children", views.get_subcategories, name="subcategories"),
 ]

diff --git a/georeport/views.py b/georeport/views.py
index 07d6eb0c56806d0e60cff68b11a7bcabf5f05b68..7f277ced7a998aee4595f7339b11fdc537eda9b6 100644 (file)
--- 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)