feat: add dashboard templates, version 0.1.0

This PR successfully replicates the original PR to allow for a linear merge history. Signed-off-by: Akarshan Kapoor <[email protected]>
flownexus-lwm2m · Aug 6, 2024 · 79bbd5c · 79bbd5c
1 parent 19dd07c
commit 79bbd5c
Show file tree

Hide file tree

Showing 19 changed files with 1,309 additions and 18 deletions.
diff --git a/server/django/sensordata/serializers/generic_resource_serializer.py b/server/django/sensordata/serializers/generic_resource_serializer.py
@@ -0,0 +1,15 @@
+from rest_framework import serializers
+from ..models import Resource
+from drf_spectacular.utils import extend_schema_field
+
+class GenericResourceSerializer(serializers.ModelSerializer):
+    resource_type = serializers.CharField(source='resource_type.name', read_only=True)
+    value = serializers.SerializerMethodField()
+
+    class Meta:
+        model = Resource
+        fields = ['timestamp_created', 'value', 'resource_type']
+
+    @extend_schema_field(serializers.FloatField)
+    def get_value(self, obj) -> float:
+        return obj.get_value()
diff --git a/server/django/sensordata/templates/admin_dashboard.html b/server/django/sensordata/templates/admin_dashboard.html
@@ -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 %}
diff --git a/server/django/sensordata/templates/base.html b/server/django/sensordata/templates/base.html
@@ -0,0 +1,163 @@
+<!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/[email protected]/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/flownexus_logo_light.svg' %}" alt="flownexus logo" class="brand-image-xl"
+                    style="opacity:1">
+            </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/flownexus/" class="nav-link">Documentation</a>
+                </li>
+
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button"
+                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        About
+                    </a>
+                    <div class="dropdown-menu" aria-labelledby="navbarDropdown2">
+                        <a class="dropdown-item" href="{% url 'license_dashboard' %}">Overview</a>
+                        <a class="dropdown-item" href="https://github.com/jonas-rem/flownexus">Contact</a>
+                    </div>
+                </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>
+
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/adminlte.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</body>
+
+</html>
diff --git a/server/django/sensordata/templates/base_license.html b/server/django/sensordata/templates/base_license.html
@@ -0,0 +1,170 @@
+<!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/[email protected]/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/flownexus_logo_light.svg' %}" alt="flownexus logo" class="brand-image-xl"
+                    style="opacity:1">
+            </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/flownexus/" class="nav-link">Documentation</a>
+                </li>
+
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button"
+                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        About
+                    </a>
+                    <div class="dropdown-menu" aria-labelledby="navbarDropdown2">
+                        <a class="dropdown-item" href="{% url 'license_dashboard' %}">Licenses</a>
+                        <a class="dropdown-item" href="https://github.com/jonas-rem/flownexus">Contact</a>
+                    </div>
+                </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>Made with ❤️ by <a href="https://github.com/jonas-rem/flownexus">Vol-JoKar</a></strong>
+            Copyright &copy; 2024, Individual flownexus contributors.
+            <div class="float-right d-none d-sm-inline-block">
+                <b>Version</b> 1.0.0-alpha
+            </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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/adminlte.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</body>
+
+</html>
diff --git a/server/django/sensordata/templates/base_login.html b/server/django/sensordata/templates/base_login.html
@@ -0,0 +1,27 @@
+<!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/[email protected]/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 login-page">
+    <div class="login-box">
+        {% block content %}
+        {% endblock %}
+    </div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/adminlte.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</body>
+
+</html>