[LM] Added new views Post function & test chart

dataHandler/urls.py

@@ -5,4 +5,5 @@ urlpatterns = [
     path("", views.dataPage01, name="dataPage01"),
     path("1/", views.data_temp, name="data_temp"),
     path("2/", views.data_moist, name="data_moist"),
+    path("3/", views.data_moist_temp, name="data_moist_temp"),
 ]

dataHandler/views.py

@@ -32,3 +32,15 @@ def data_moist(request):
         return HttpResponse("data received")
     else:
         return redirect("/data/")
+
+
+# Post Only, handles moisture & temp data send to data/3/, if accessed with GET, gets redirected to test data page
+@csrf_exempt
+def data_moist_temp(request):
+    if request.method == "POST":
+        p = BasicPlant.objects.get(id=request.POST["plant_id"])
+        Temperature.objects.create(temp=request.POST["temp"], plant_id=p)
+        Moisture.objects.create(moisture=request.POST["moist"], plant_id=p)
+        return HttpResponse("data received")
+    else:
+        return redirect("/data/")

templates/dataPage.html

@@ -1,21 +1,80 @@
 {% extends "base.html" %}
 
+
 {% block content %}
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <p>{{ plant.name }}</p>
     <p>{{ plant.bought }}</p>
     <br>
 
-    <h5>Temperature</h5>
-    {%  for temp in temps %}
-        <li>
-        {{ temp.temp }}
-        </li>
-    {% endfor %}
-<br>
-    <h5>Moisture</h5>
-     {%  for moist in moists %}
-        <li>
-        {{ moist.moisture }}
-        </li>
-    {% endfor %}
+    <h5>Temperature and Moisture Graph</h5>
+    <canvas id="temperatureMoistureChart" width="400" height="200"></canvas>
+
+
+
+    <!-- JavaScript code to render the temperature graph -->
+
+    <script>
+        let ctx = document.getElementById('temperatureMoistureChart').getContext('2d');
+
+        let temperatureData = [
+            {% for temp in temps %}
+                {{ temp.temp }},
+            {% endfor %}
+        ];
+
+        let moistureData = [
+            {% for moist in moists %}
+                {{ moist.moisture }},
+            {% endfor %}
+        ];
+
+        let dateTimes = [
+            {% for temp in temps %}
+                "{{ temp.dateTime|date:"d.m.y h:i" }}",
+            {% endfor %}
+        ];
+
+        new Chart(ctx, {
+            type: 'line',
+            data: {
+                labels: dateTimes,
+                datasets: [
+                    {
+                        label: 'Temperature',
+                        data: temperatureData,
+                        borderColor: 'rgb(34, 36, 36)',
+                        tension: 0.1,
+                        yAxisID: 'temperature-y-axis'
+                    },
+                    {
+                        label: 'Moisture',
+                        data: moistureData,
+                        borderColor: 'rgb(75, 192, 192)',
+                        tension: 0.1,
+                        yAxisID: 'moisture-y-axis'
+                    }
+                ]
+            },
+            options: {
+                scales: {
+                    y: [
+                        {
+                            id: 'temperature-y-axis',
+                            type: 'linear',
+                            position: 'left',
+                            beginAtZero: true
+                        },
+                        {
+                            id: 'moisture-y-axis',
+                            type: 'linear',
+                            position: 'right',
+                            beginAtZero: true
+                        }
+                    ]
+                }
+            }
+        });
+    </script>
+
 {% endblock %}