Skip to content

Commit

Permalink
frontend: Add dashboard templates, temp-endpoint
Browse files Browse the repository at this point in the history 
This commit adds the basic dashboard templates for
the various dashboards. Also adds a new endpoint
for temperature data.

Signed-off-by: Akarshan Kapoor <data.akarshan@icloud.com>

Fix failing tests

This commit tries to fix the failing tests

Signed-off-by: Akarshan Kapoor <data.akarshan@icloud.com>

Remove unused imports

This commit removes trailing whitespaces and
removes unused imports

Signed-off-by: Akarshan Kapoor <data.akarshan@icloud.com>

Removing Trailing Whitespaces

Signed-off-by: Akarshan Kapoor <data.akarshan@icloud.com>

Minor Fix

Signed-off-by: Akarshan Kapoor <data.akarshan@icloud.com>
  • Loading branch information
@Kappuccino111
Kappuccino111 committed Jul 3, 2024
1 parent f88951b commit baa5d47
Show file tree
Hide file tree
Showing 13 changed files with 429 additions and 14 deletions.
18 changes: 18 additions & 0 deletions server/django/sensordata/templates/admin_dashboard.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{% extends 'base.html' %}
{% block content %}
<h1>Admin Dashboard</h1>
<table class="table">
<thead>
<tr>
<th>Endpoint</th>
</tr>
</thead>
<tbody>
{% for device in devices %}
<tr>
<td>{{ device.endpoint }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
158 changes: 158 additions & 0 deletions server/django/sensordata/templates/base.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
<!DOCTYPE html>
<html lang="en">

<head>
{% load static %}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;400i;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>

<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">

<aside class="main-sidebar sidebar-dark-orange elevation-4">
<a href="#" class="brand-link">
<img src="{% static 'img/Logo.png' %}" alt="Flow Nexus Logo" class="brand-image" style="opacity:1">
<span class="brand-text font-weight-bold">Flow Nexus</span>
</a>

<div class="sidebar">
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu">


<li class="nav-item">
<a href="{% url 'admin_dashboard' %}"
class="nav-link {% if request.path == '/admin_dashboard/' %}active{% endif %}">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Admin Dashboard
</p>
</a>
</li>

<li class="nav-item">
<a href="{% url 'firmware_dashboard' %}"
class="nav-link {% if request.path == '/firmware_dashboard/' %}active{% endif %}">
<i class="nav-icon fas fa-microchip"></i>
<p>
Firmware Update
</p>
</a>
</li>

<li class="nav-item">
<a href="{% url 'event_dashboard' %}"
class="nav-link {% if request.path == '/event_dashboard/' %}active{% endif %}">
<i class="nav-icon fas fa-calendar-alt"></i>
<p>
Event Dashboard
</p>
</a>
</li>

<li class="nav-item">
<a href="{% url 'graph_dashboard' %}"
class="nav-link {% if request.path == '/graph_dashboard/' %}active{% endif %}">
<i class="nav-icon fas fa-chart-pie"></i>
<p>
Graph Dashboard
</p>
</a>
</li>

<li class="nav-item">
<a href="{% url 'pending_communication_dashboard' %}"
class="nav-link {% if request.path == '/pending_communication_dashboard/' %}active{% endif %}">
<i class="nav-icon fas fa-envelope"></i>
<p>
Communications
</p>
</a>
</li>

</ul>
</nav>
</div>
</aside>


<nav class="main-header navbar navbar-expand navbar-dark">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="https://jonas-rem.github.io/lwm2m_server/" class="nav-link">Documentation</a>
</li>
</ul>

<ul class="navbar-nav ml-auto">
{% if user.is_authenticated %}
<li class="nav-item" style="margin-right: 10px;">
<a class="nav-link" href="#" style="padding-right: 0; margin-right: 0;"><i class="fa fa-user-secret"></i>
{{ user.username }}</a>
</li>
<li class="nav-item">
<form id="logout-form" action="{% url 'logout' %}" method="post" style="margin: 0; padding: 0;">
{% csrf_token %}
<button type="submit" class="btn btn-link nav-link"
style="padding: 0; margin: 0; font-size: 1rem; line-height: inherit;">Logout</button>
</form>
</li>
{% else %}
<li class="nav-item" style="margin-right: 10px;">
<a class="nav-link" href="#" style="padding-right: 0; margin-right: 0;"><i class="fa fa-user"></i> Guest</a>
</li>
<li class="nav-item">
<form action="{% url 'login' %}" method="get" style="margin: 0; padding: 0;">
<button type="submit" class="btn btn-link nav-link"
style="padding: 0; margin: 0; font-size: 1rem; line-height: inherit;">Login</button>
</form>
</li>
{% endif %}
</ul>

</nav>


<div class="content-wrapper">
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0">{{ title }}</h1>
</div>
</div>
</div>
</div>

<section class="content">
<div class="container-fluid">
{% block content %}
{% endblock %}
</div>
</section>
</div>

<footer class="main-footer">
<strong>Copyright &copy; 2024 <a href="https://adminlte.io">AdminLTE.io</a>.</strong>
All rights reserved.
<div class="float-right d-none d-sm-inline-block">
<b>Version</b> 3.2.0
</div>
</footer>

</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/js/adminlte.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>

</html>
24 changes: 24 additions & 0 deletions server/django/sensordata/templates/event_dashboard.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{% extends 'base.html' %}
{% block content %}
<h1>Event Dashboard</h1>
<table class="table">
<thead>
<tr>
<th>Device</th>
<th>Event Type</th>
<th>Start Time</th>
<th>End Time</th>
</tr>
</thead>
<tbody>
{% for event in events %}
<tr>
<td>{{ event.device.endpoint }}</td>
<td>{{ event.event_type }}</td>
<td>{{ event.start_time }}</td>
<td>{{ event.end_time }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
24 changes: 24 additions & 0 deletions server/django/sensordata/templates/firmware_dashboard.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{% extends 'base.html' %}
{% block content %}
<h1>Firmware Update Dashboard</h1>
<table class="table">
<thead>
<tr>
<th>Version</th>
<th>File Name</th>
<th>Download URL</th>
<th>Created At</th>
</tr>
</thead>
<tbody>
{% for update in firmware_updates %}
<tr>
<td>{{ update.version }}</td>
<td>{{ update.file_name }}</td>
<td><a href="{{ update.download_url }}">{{ update.download_url }}</a></td>
<td>{{ update.created_at }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
42 changes: 42 additions & 0 deletions server/django/sensordata/templates/graph_dashboard.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
{% extends 'base.html' %}
{% block content %}
<h1>Graph Dashboard</h1>
<canvas id="temperatureChart" width="400" height="200"></canvas>
<script>
document.addEventListener('DOMContentLoaded', function () {
const ctx = document.getElementById('temperatureChart').getContext('2d');
const temperatureChart = new Chart(ctx, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'Temperature',
data: [],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: false
}
}
}
});

fetch('/api/temperature/')
.then(response => response.json())
.then(data => {
console.log(data); // For debugging
const labels = data.map(item => item.timestamp);
const values = data.map(item => item.value);
temperatureChart.data.labels = labels;
temperatureChart.data.datasets[0].data = values;
temperatureChart.update();
})
.catch(error => console.error('Error fetching data:', error));
});
</script>
{% endblock %}
24 changes: 24 additions & 0 deletions server/django/sensordata/templates/pending_communication_dashboard.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{% extends 'base.html' %}
{% block content %}
<h1>Pending Communication</h1>
<table class="table">
<thead>
<tr>
<th>Device</th>
<th>Command</th>
<th>Status</th>
<th>Timestamp</th>
</tr>
</thead>
<tbody>
{% for operation in pending_operations %}
<tr>
<td>{{ operation.resource.device.endpoint }}</td>
<td>{{ operation.operation_type }}</td>
<td>{{ operation.status }}</td>
<td>{{ operation.timestamp_sent }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
21 changes: 21 additions & 0 deletions server/django/sensordata/templates/registration/login.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{% extends 'base.html' %}

{% block content %}
<div class="login-container">
<div class="login-form">
<h1>Login</h1>
<form method="post">
{% csrf_token %}
<div class="form-group">
{{ form.username.label_tag }}
{{ form.username }}
</div>
<div class="form-group">
{{ form.password.label_tag }}
{{ form.password }}
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</div>
{% endblock %}
3 changes: 2 additions & 1 deletion server/django/sensordata/urls.py
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
from django.urls import path
from .views import CreateSensorDataView
from .views import CreateSensorDataView, TemperatureDataView

urlpatterns = [
path('endpointdata/', CreateSensorDataView.as_view(), name='add_sensor_data'),
path('temperature/', TemperatureDataView.as_view(), name='temperature_data'),
]
48 changes: 48 additions & 0 deletions server/django/sensordata/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
from rest_framework.response import Response
from rest_framework import status
from .serializers import LwM2MSerializer
from django.shortcuts import render
from django.contrib.auth.decorators import login_required
from .models import Device, Resource, Event, DeviceOperation, Firmware, ResourceType
import logging

logger = logging.getLogger(__name__)
Expand All @@ -18,3 +21,48 @@ def post(self, request):
print(serializer.errors)
logger.error(f"Errors: {serializer.errors}")
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

class TemperatureDataView(APIView):
def get(self, request):
try:
temperature_resource_type = ResourceType.objects.get(name='temperature')
except ResourceType.DoesNotExist:
return Response({"error": "Temperature resource type not found"}, status=status.HTTP_404_NOT_FOUND)

temperature_resources = Resource.objects.filter(resource_type=temperature_resource_type)
logger.debug(f"Temperature resources: {temperature_resources}")
data = [
{
"timestamp": resource.timestamp.strftime('%Y-%m-%d %H:%M:%S'),
"value": resource.float_value
}
for resource in temperature_resources
]
logger.debug(f"Temperature data: {data}")
return Response(data, status=status.HTTP_200_OK)



@login_required
def admin_dashboard_view(request):
devices = Device.objects.all()
return render(request, 'admin_dashboard.html', {'devices': devices, 'title': 'Admin Dashboard'})

@login_required
def firmware_dashboard_view(request):
firmware_updates = Firmware.objects.all()
return render(request, 'firmware_dashboard.html', {'firmware_updates': firmware_updates, 'title': 'Firmware Update Dashboard'})

@login_required
def event_dashboard_view(request):
events = Event.objects.all()
return render(request, 'event_dashboard.html', {'events': events, 'title': 'Event Dashboard'})

@login_required
def graph_dashboard_view(request):
return render(request, 'graph_dashboard.html', {'title': 'Graph Dashboard'})

@login_required
def pending_communication_dashboard_view(request):
pending_operations = DeviceOperation.objects.filter(status='pending')
return render(request, 'pending_communication_dashboard.html', {'pending_operations': pending_operations, 'title': 'Pending Communication'})
Loading

0 comments on commit baa5d47

Please sign in to comment.