Update chart.html, experimenting with MQTT.

This commit is contained in:
ferdzo
2024-08-29 19:57:23 +02:00
parent 4f3e2591b7
commit f6c0a2bee5
4 changed files with 48 additions and 7 deletions

4
iotDashboard/mqtt.py Normal file
View File

@@ -0,0 +1,4 @@
import paho.mqtt.subscribe as subscribe
msg = subscribe.simple("esptest-01/sensor/tempreature/state", hostname="localhost")
print("%s %s" % (msg.topic, msg.payload))

View File

@@ -23,11 +23,31 @@
width: 100% !important;
height: 100% !important;
}
.current-conditions {
text-align: center;
padding: 20px;
margin-bottom: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}
.current-conditions h2 {
font-size: 36px;
margin: 10px 0;
}
.current-conditions .value {
font-size: 48px;
font-weight: bold;
margin-bottom: 10px;
}
</style>
</head>
<body class="bg-light">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">IoT Dashboard</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -56,9 +76,17 @@
</div>
</div>
</nav>
<div class="container mt-5">
<h1 class="text-center mb-4">Temperature and Humidity Over Time</h1>
<!-- Current Conditions -->
<div class="current-conditions">
<h2>Current Conditions</h2>
<div class="value" id="current-temperature">Loading...</div>
<div class="value" id="current-humidity">Loading...</div>
</div>
<!-- Device Selector Dropdown -->
<div class="row mb-4">
<div class="col-md-4 offset-md-4">
@@ -67,7 +95,6 @@
<option value="{{ device.name }}">{{ device.name }} ({{ device.ip }})</option>
{% endfor %}
</select>
</div>
</div>
@@ -168,6 +195,19 @@
}
}
});
// Check if the last recorded data is within the last 10 minutes
const lastRecordedTime = new Date(data.times[data.times.length - 1]);
const now = new Date();
const tenMinutesAgo = new Date(now.getTime() - 10 * 60000);
if (lastRecordedTime > tenMinutesAgo) {
document.getElementById('current-temperature').textContent = `Temperature: ${data.temperatures[data.temperatures.length - 1]}°C`;
document.getElementById('current-humidity').textContent = `Humidity: ${data.humidities[data.humidities.length - 1]}%`;
} else {
document.getElementById('current-temperature').textContent = `Temperature: -`;
document.getElementById('current-humidity').textContent = `Humidity: -`;
}
});
}

View File

@@ -27,6 +27,5 @@ urlpatterns = [
path('devices/add/', views.add_device, name='add_device'),
path('devices/edit/<int:pk>/', views.edit_device, name='edit_device'),
path('devices/delete/<int:pk>/', views.delete_device, name='delete_device'),
path('login/', views.login_view, name='login'),
path('logout/', views.logout_view, name='logout'),
]

View File

@@ -46,7 +46,7 @@ def chart(request):
def index(request):
if request.user.is_authenticated:
return HttpResponse(chart())
return redirect("/chart/")
return HttpResponse("NOT AUTHENTICATED!!!")
def device_list(request):
devices = Device.objects.all()
@@ -80,7 +80,5 @@ def delete_device(request, pk):
return redirect('device_list')
return render(request, 'device_confirm_delete.html', {'device': device})
def login_view():
pass
def logout_view():
pass
redirect("/admin")