Merge pull request 'feature/90-implement-public-website-for-device' (#17) from feature/90-implement-public-website-for-device into main

Reviewed-on: https://gitea.pangea.org/ereuse/devicehub-django/pulls/17

device/templates/details.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends 'base.html' %}
 {% load i18n %}
 
 {% block content %}
@@ -11,34 +11,34 @@
   <div class="row">
     <div class="col">
       <ul class="nav nav-tabs nav-tabs-bordered">
-      <li class="nav-items">
-        <a href="#details" class="nav-link active" data-bs-toggle="tab" data-bs-target="#details">{% trans "General details" %}</a>
+        <li class="nav-item">
+          <a href="#details" class="nav-link active" data-bs-toggle="tab" data-bs-target="#details">{% trans 'General details' %}</a>
         </li>
-      <li class="nav-items">
-        <a href="#annotations" class="nav-link" data-bs-toggle="tab" data-bs-target="#annotations">{% trans "User annotations" %}</a>
+        <li class="nav-item">
+          <a href="#annotations" class="nav-link" data-bs-toggle="tab" data-bs-target="#annotations">{% trans 'User annotations' %}</a>
         </li>
-      <li class="nav-items">
-        <a href="#documents" class="nav-link" data-bs-toggle="tab" data-bs-target="#documents">{% trans "Documents" %}</a>
+        <li class="nav-item">
+          <a href="#documents" class="nav-link" data-bs-toggle="tab" data-bs-target="#documents">{% trans 'Documents' %}</a>
         </li>
-      <li class="nav-items">
-        <a href="#lots" class="nav-link" data-bs-toggle="tab" data-bs-target="#lots">{% trans "Lots" %}</a>
+        <li class="nav-item">
+          <a href="#lots" class="nav-link" data-bs-toggle="tab" data-bs-target="#lots">{% trans 'Lots' %}</a>
         </li>
-      <li class="nav-items">
-        <a href="#components" class="nav-link" data-bs-toggle="tab" data-bs-target="#components">{% trans "Components" %}</a>
+        <li class="nav-item">
+          <a href="#components" class="nav-link" data-bs-toggle="tab" data-bs-target="#components">{% trans 'Components' %}</a>
         </li>
-      <li class="nav-items">
-        <a href="#evidences" class="nav-link" data-bs-toggle="tab" data-bs-target="#evidences">{% trans "Evidences" %}</a>
+        <li class="nav-item">
+          <a href="#evidences" class="nav-link" data-bs-toggle="tab" data-bs-target="#evidences">{% trans 'Evidences' %}</a>
         </li>
-      <li class="nav-items">
-        <a href="#web" class="nav-link" href="">Web</a>
+        <li class="nav-item">
+          <a class="nav-link" href="{% url 'device:device_web' object.id %}" target="_blank">Web</a>
         </li>
       </ul>
     </div>
   </div>
-<div class="tab-content pt-2">
 
+  <div class="tab-content pt-2">
     <div class="tab-pane fade show active" id="details">
-    <h5 class="card-title">{% trans "Details" %}</h5>
+      <h5 class="card-title">{% trans 'Details' %}</h5>
       <div class="row mb-3">
         <div class="col-lg-3 col-md-4 label">Phid</div>
         <div class="col-lg-9 col-md-8">{{ object.id }}</div>
@@ -46,65 +46,81 @@
 
       {% if object.is_eraseserver %}
         <div class="row mb-3">
-      <div class="col-lg-3 col-md-4 label">{% trans "Is a erase server" %}</div>
+          <div class="col-lg-3 col-md-4 label">
+            {% trans 'Is a erase server' %}
+          </div>
           <div class="col-lg-9 col-md-8"></div>
         </div>
       {% endif %}
 
-    <div class="row">
-      <div class="col-lg-3 col-md-4 label ">{% trans "Type" %}</div>
+      <div class="row mb-3">
+        <div class="col-lg-3 col-md-4 label">Type</div>
         <div class="col-lg-9 col-md-8">{{ object.type }}</div>
       </div>
 
       {% if object.is_websnapshot %}
         {% for k, v in object.last_user_evidence %}
-    <div class="row">
+          <div class="row mb-3">
             <div class="col-lg-3 col-md-4 label">{{ k }}</div>
-      <div class="col-lg-9 col-md-8">{{ v|default:"" }}</div>
+            <div class="col-lg-9 col-md-8">{{ v|default:'' }}</div>
           </div>
         {% endfor %}
       {% else %}
-    <div class="row">
-      <div class="col-lg-3 col-md-4 label">Manufacturer</div>
-      <div class="col-lg-9 col-md-8">{{ object.manufacturer|default:"" }}</div>
+        <div class="row mb-3">
+          <div class="col-lg-3 col-md-4 label">
+            {% trans 'Manufacturer' %}
+          </div>
+          <div class="col-lg-9 col-md-8">{{ object.manufacturer|default:'' }}</div>
         </div>
 
-    <div class="row">
-      <div class="col-lg-3 col-md-4 label">Model</div>
-      <div class="col-lg-9 col-md-8">{{ object.model|default:"" }}</div>
+        <div class="row mb-3">
+          <div class="col-lg-3 col-md-4 label">
+            {% trans 'Model' %}
+          </div>
+          <div class="col-lg-9 col-md-8">{{ object.model|default:'' }}</div>
         </div>
 
-    <div class="row">
-      <div class="col-lg-3 col-md-4 label">Serial Number</div>
-      <div class="col-lg-9 col-md-8">{{ object.last_evidence.doc.device.serialNumber|default:"" }}</div>
+        <div class="row mb-3">
+          <div class="col-lg-3 col-md-4 label">
+            {% trans 'Serial Number' %}
+          </div>
+          <div class="col-lg-9 col-md-8">{{ object.last_evidence.doc.device.serialNumber|default:'' }}</div>
         </div>
       {% endif %}
-    <div class="row">
-      <div class="col-lg-3 col-md-4 label">Identifiers</div>
+
+      <div class="row mb-3">
+        <div class="col-lg-3 col-md-4 label">
+          {% trans 'Identifiers' %}
+        </div>
       </div>
       {% for chid in object.hids %}
-    <div class="row">
-      <div class="col">{{ chid |default:"" }}</div>
+        <div class="row mb-3">
+          <div class="col">{{ chid|default:'' }}</div>
         </div>
       {% endfor %}
     </div>
 
-  <div class="tab-pane fade profile-overview" id="annotations">
-    <div class="btn-group dropdown ml-1 mt-1" uib-dropdown="">
+    <div class="tab-pane fade" id="annotations">
+      <div class="btn-group mt-1 mb-3">
         <a href="{% url 'device:add_annotation' object.pk %}" class="btn btn-primary">
           <i class="bi bi-plus"></i>
-        {% trans "Add new annotation" %}
-        <span class="caret"></span>
+          {% trans 'Add new annotation' %}
         </a>
       </div>
 
-    <h5 class="card-title mt-2">{% trans "Annotations" %}</h5>
+      <h5 class="card-title">{% trans 'Annotations' %}</h5>
       <table class="table table-striped">
         <thead>
           <tr>
-          <th scope="col">Key</th>
-          <th scope="col">Value</th>
-          <th scope="col" data-type="date" data-format="YYYY-MM-DD hh:mm">Created on</th>
+            <th scope="col">
+              {% trans 'Key' %}
+            </th>
+            <th scope="col">
+              {% trans 'Value' %}
+            </th>
+            <th scope="col" data-type="date" data-format="YYYY-MM-DD HH:mm">
+              {% trans 'Created on' %}
+            </th>
             <th></th>
             <th></th>
           </tr>
@@ -119,45 +135,31 @@
               <td></td>
             </tr>
           {% endfor %}
-        
         </tbody>
       </table>
     </div>
 
-
-  <div class="tab-pane fade profile-overview" id="lots">
-    {% for tag in lot_tags %}
-    <h5 class="card-title">{{ tag }}</h5>
-
-    {% for lot in object.lots %}
-    {% if lot.type == tag %}
-    <div class="row">
-      <div class="col">
-      <a href="{% url 'dashboard:lot' lot.id %}">{{ lot.name }}</a>
-      </div>
-    </div>
-    {% endif %}
-    {% endfor %}
-    {% endfor %}
-  </div>
-
-  <div class="tab-pane fade profile-overview" id="documents">
-    <div class="btn-group dropdown ml-1 mt-1" uib-dropdown="">
+    <div class="tab-pane fade" id="documents">
+      <div class="btn-group mt-1 mb-3">
         <a href="{% url 'device:add_document' object.pk %}" class="btn btn-primary">
-
           <i class="bi bi-plus"></i>
-        Add new document
-        <span class="caret"></span>
+          {% trans 'Add new document' %}
         </a>
       </div>
 
-    <h5 class="card-title mt-2">Documents</h5>
+      <h5 class="card-title">{% trans 'Documents' %}</h5>
       <table class="table table-striped">
         <thead>
           <tr>
-          <th scope="col">Key</th>
-          <th scope="col">Value</th>
-          <th scope="col" data-type="date" data-format="YYYY-MM-DD hh:mm">Created on</th>
+            <th scope="col">
+              {% trans 'Key' %}
+            </th>
+            <th scope="col">
+              {% trans 'Value' %}
+            </th>
+            <th scope="col" data-type="date" data-format="YYYY-MM-DD HH:mm">
+              {% trans 'Created on' %}
+            </th>
             <th></th>
             <th></th>
           </tr>
@@ -172,13 +174,27 @@
               <td></td>
             </tr>
           {% endfor %}
-        
         </tbody>
       </table>
     </div>
 
-  <div class="tab-pane fade profile-overview" id="components">
-    <h5 class="card-title">Components last evidence</h5>
+    <div class="tab-pane fade" id="lots">
+      {% for tag in lot_tags %}
+        <h5 class="card-title">{{ tag }}</h5>
+        {% for lot in object.lots %}
+          {% if lot.type == tag %}
+            <div class="row mb-3">
+              <div class="col">
+                <a href="{% url 'dashboard:lot' lot.id %}">{{ lot.name }}</a>
+              </div>
+            </div>
+          {% endif %}
+        {% endfor %}
+      {% endfor %}
+    </div>
+
+    <div class="tab-pane fade" id="components">
+      <h5 class="card-title">{% trans 'Components last evidence' %}</h5>
       <div class="list-group col-6">
         {% for c in object.components %}
           <div class="list-group-item">
@@ -188,33 +204,27 @@
             </div>
             <p class="mb-1">
               {% for k, v in c.items %}
-	  {% if k not in "actions,type" %}
+                {% if k not in 'actions,type' %}
                   {{ k }}: {{ v }}<br />
                 {% endif %}
               {% endfor %}
-	  <br />
             </p>
-        <small class="text-muted">
-        </small>
           </div>
         {% endfor %}
       </div>
     </div>
 
-  <div class="tab-pane fade profile-overview" id="evidences">
-    <h5 class="card-title">List of evidences</h5>
+    <div class="tab-pane fade" id="evidences">
+      <h5 class="card-title">{% trans 'List of evidences' %}</h5>
       <div class="list-group col-6">
         {% for snap in object.evidences %}
           <div class="list-group-item">
             <div class="d-flex w-100 justify-content-between">
-          <h5 class="mb-1"></h5>
               <small class="text-muted">{{ snap.created }}</small>
             </div>
             <p class="mb-1">
               <a href="{% url 'evidence:details' snap.uuid %}">{{ snap.uuid }}</a>
             </p>
-        <small class="text-muted">
-        </small>
           </div>
         {% endfor %}
       </div>
@@ -224,22 +234,21 @@
 
 {% block extrascript %}
   <script>
-  document.addEventListener("DOMContentLoaded", function() {
+    document.addEventListener('DOMContentLoaded', function () {
       // Obtener el hash de la URL (ejemplo: #components)
-    const hash = window.location.hash;
+      const hash = window.location.hash
     
       // Verificar si hay un hash en la URL
       if (hash) {
         // Buscar el botón o enlace que corresponde al hash y activarlo
-      const tabTrigger = document.querySelector(`[data-bs-target="${hash}"]`);
+        const tabTrigger = document.querySelector(`[data-bs-target="${hash}"]`)
     
         if (tabTrigger) {
           // Crear una instancia de tab de Bootstrap para activar el tab
-        const tab = new bootstrap.Tab(tabTrigger);
-        tab.show();
+          const tab = new bootstrap.Tab(tabTrigger)
+          tab.show()
         }
       }
-  });
+    })
   </script>
 {% endblock %}
-

device/templates/device_web.html

@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{ object.type }}</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" />
+    <style>
+      body {
+        font-size: 0.875rem;
+        background-color: #f8f9fa;
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+      }
+      .custom-container {
+        background-color: #ffffff;
+        border-radius: 10px;
+        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+        padding: 30px;
+        margin-top: 30px;
+        flex-grow: 1;
+      }
+      .section-title {
+        color: #7a9f4f;
+        border-bottom: 2px solid #9cc666;
+        padding-bottom: 10px;
+        margin-bottom: 20px;
+        font-size: 1.5em;
+      }
+      .info-row {
+        margin-bottom: 10px;
+      }
+      .info-label {
+        font-weight: bold;
+        color: #545f71;
+      }
+      .info-value {
+        color: #333;
+      }
+      .component-card {
+        background-color: #f8f9fa;
+        border-left: 4px solid #9cc666;
+        margin-bottom: 15px;
+        transition: all 0.3s ease;
+      }
+      .component-card:hover {
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+        transform: translateY(-2px);
+      }
+      .hash-value {
+        word-break: break-all;
+        background-color: #f3f3f3;
+        padding: 5px;
+        border-radius: 4px;
+        font-family: monospace;
+        font-size: 0.9em;
+        border: 1px solid #e0e0e0;
+      }
+      .card-title {
+        color: #9cc666;
+      }
+      .btn-primary {
+        background-color: #9cc666;
+        border-color: #9cc666;
+        padding: 0.1em 2em;
+        font-weight: 700;
+      }
+      .btn-primary:hover {
+        background-color: #8ab555;
+        border-color: #8ab555;
+      }
+      .btn-green-user {
+        background-color: #c7e3a3;
+      }
+      .btn-grey {
+        background-color: #f3f3f3;
+      }
+      footer {
+        background-color: #545f71;
+        color: #ffffff;
+        text-align: center;
+        padding: 10px 0;
+        margin-top: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container custom-container">
+      <h1 class="text-center mb-4" style="color: #545f71;">{{ object.manufacturer }} {{ object.type }} {{ object.model }}</h1>
+
+      <div class="row">
+        <div class="col-lg-6">
+          <h2 class="section-title">Details</h2>
+          <div class="info-row row">
+            <div class="col-md-4 info-label">Phid</div>
+            <div class="col-md-8 info-value">
+              <div class="hash-value">{{ object.id }}</div>
+            </div>
+          </div>
+          <div class="info-row row">
+            <div class="col-md-4 info-label">Type</div>
+            <div class="col-md-8 info-value">{{ object.type }}</div>
+          </div>
+
+          {% if object.is_websnapshot %}
+            {% for snapshot_key, snapshot_value in object.last_user_evidence %}
+              <div class="info-row row">
+                <div class="col-md-4 info-label">{{ snapshot_key }}</div>
+                <div class="col-md-8 info-value">{{ snapshot_value|default:'' }}</div>
+              </div>
+            {% endfor %}
+          {% else %}
+            <div class="info-row row">
+              <div class="col-md-4 info-label">Manufacturer</div>
+              <div class="col-md-8 info-value">{{ object.manufacturer|default:'' }}</div>
+            </div>
+            <div class="info-row row">
+              <div class="col-md-4 info-label">Model</div>
+              <div class="col-md-8 info-value">{{ object.model|default:'' }}</div>
+            </div>
+            <div class="info-row row">
+              <div class="col-md-4 info-label">Serial Number</div>
+              <div class="col-md-8 info-value">{{ object.last_evidence.doc.device.serialNumber|default:'' }}</div>
+            </div>
+          {% endif %}
+        </div>
+
+        <div class="col-lg-6">
+          <h2 class="section-title">Identifiers</h2>
+          {% for chid in object.hids %}
+            <div class="info-row">
+              <div class="hash-value">{{ chid|default:'' }}</div>
+            </div>
+          {% endfor %}
+        </div>
+      </div>
+
+      <h2 class="section-title mt-5">Components</h2>
+      <div class="row">
+        {% for component in object.components %}
+          <div class="col-md-6 mb-3">
+            <div class="card component-card">
+              <div class="card-body">
+                <h5 class="card-title">{{ component.type }}</h5>
+                <p class="card-text">
+                  {% for component_key, component_value in component.items %}
+                    {% if component_key not in 'actions,type' %}
+                      <strong>{{ component_key }}:</strong> {{ component_value }}<br />
+                    {% endif %}
+                  {% endfor %}
+                </p>
+              </div>
+            </div>
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+
+    <footer>
+      <p>
+        &copy;{% now 'Y' %} eReuse. All rights reserved.
+      </p>
+    </footer>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
+  </body>
+</html>

device/tests.py

@@ -1,3 +0,0 @@
-from django.test import TestCase
-
-# Create your tests here.

device/tests/test_mock_device.py

@@ -0,0 +1,76 @@
+from device.models import Device
+from unittest.mock import MagicMock
+
+
+class TestDevice(Device):
+    """A test subclass of Device that overrides the database-dependent methods"""
+    # TODO Leaving commented bc not used, but might be useful at some  point
+    # def get_annotations(self):
+    #     """Return empty list instead of querying database"""
+    #     return []
+
+    # def get_uuids(self):
+    #     """Set uuids directly instead of querying"""
+    #     self.uuids = ['uuid1', 'uuid2']
+
+    # def get_hids(self):
+    #     """Set hids directly instead of querying"""
+    #     self.hids = ['hid1', 'hid2']
+
+    # def get_evidences(self):
+    #     """Set evidences directly instead of querying"""
+    #     self.evidences = []
+
+    # def get_lots(self):
+    #     """Set lots directly instead of querying"""
+    #     self.lots = []
+
+    def get_last_evidence(self):
+        if not hasattr(self, '_evidence'):
+            self._evidence = MagicMock()
+            self._evidence.doc = {
+                'type': 'Computer',
+                'manufacturer': 'Test Manufacturer',
+                'model': 'Test Model',
+                'device': {
+                    'serialNumber': 'SN123456',
+                    'type': 'Computer'
+                }
+            }
+            self._evidence.get_manufacturer = lambda: 'Test Manufacturer'
+            self._evidence.get_model = lambda: 'Test Model'
+            self._evidence.get_chassis = lambda: 'Computer'
+            self._evidence.get_components = lambda: [
+                {
+                    'type': 'CPU',
+                    'model': 'Intel i7',
+                    'manufacturer': 'Intel'
+                },
+                {
+                    'type': 'RAM',
+                    'size': '8GB',
+                    'manufacturer': 'Kingston'
+                }
+            ]
+        self.last_evidence = self._evidence
+
+
+class TestWebSnapshotDevice(TestDevice):
+    """A test subclass of Device that simulates a WebSnapshot device"""
+
+    def get_last_evidence(self):
+        if not hasattr(self, '_evidence'):
+            self._evidence = MagicMock()
+            self._evidence.doc = {
+                'type': 'WebSnapshot',
+                'kv': {
+                    'URL': 'http://example.com',
+                    'Title': 'Test Page',
+                    'Timestamp': '2024-01-01'
+                },
+                'device': {
+                    'type': 'Laptop'
+                }
+            }
+        self.last_evidence = self._evidence
+        return self._evidence

device/tests/test_public_device_web.py

@@ -0,0 +1,67 @@
+from django.test import TestCase, Client
+from django.urls import reverse
+from unittest.mock import patch
+from device.views import PublicDeviceWebView
+from device.tests.test_mock_device import TestDevice, TestWebSnapshotDevice
+
+
+class PublicDeviceWebViewTests(TestCase):
+    def setUp(self):
+        self.client = Client()
+        self.test_id = "test123"
+        self.test_url = reverse('device:device_web',
+                                kwargs={'pk': self.test_id})
+
+    def test_url_resolves_correctly(self):
+        """Test that the URL is constructed correctly"""
+        url = reverse('device:device_web', kwargs={'pk': self.test_id})
+        self.assertEqual(url, f'/device/{self.test_id}/public/')
+
+    @patch('device.views.Device')
+    def test_html_response(self, MockDevice):
+        test_device = TestDevice(id=self.test_id)
+        MockDevice.return_value = test_device
+        response = self.client.get(self.test_url)
+
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, 'device_web.html')
+
+        self.assertContains(response, 'Test Manufacturer')
+        self.assertContains(response, 'Test Model')
+        self.assertContains(response, 'Computer')
+        self.assertContains(response, self.test_id)
+
+        self.assertContains(response, 'CPU')
+        self.assertContains(response, 'Intel')
+        self.assertContains(response, 'RAM')
+        self.assertContains(response, 'Kingston')
+
+    @patch('device.views.Device')
+    def test_json_response(self, MockDevice):
+        test_device = TestDevice(id=self.test_id)
+        MockDevice.return_value = test_device
+
+        response = self.client.get(
+            self.test_url,
+            HTTP_ACCEPT='application/json'
+        )
+
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(response['Content-Type'], 'application/json')
+
+        json_data = response.json()
+        self.assertEqual(json_data['id'], self.test_id)
+        self.assertEqual(json_data['shortid'], self.test_id[:6].upper())
+        self.assertEqual(json_data['components'], test_device.components)
+
+    @patch('device.views.Device')
+    def test_websnapshot_device(self, MockDevice):
+        test_device = TestWebSnapshotDevice(id=self.test_id)
+        MockDevice.return_value = test_device
+        response = self.client.get(self.test_url)
+
+        self.assertEqual(response.status_code, 200)
+        self.assertTemplateUsed(response, 'device_web.html')
+
+        self.assertContains(response, 'http://example.com')
+        self.assertContains(response, 'Test Page')

device/urls.py

@@ -9,4 +9,6 @@ urlpatterns = [
     path("<str:pk>/", views.DetailsView.as_view(), name="details"),
     path("<str:pk>/annotation/add", views.AddAnnotationView.as_view(), name="add_annotation"),
     path("<str:pk>/document/add", views.AddDocumentView.as_view(), name="add_document"),
+    path("<str:pk>/public/", views.PublicDeviceWebView.as_view(), name="device_web"),
+
 ]

device/views.py

@@ -1,4 +1,5 @@
 import json
+from django.http import JsonResponse
 
 from django.http import Http404
 from django.urls import reverse_lazy
@@ -110,6 +111,39 @@ class DetailsView(DashboardView, TemplateView):
         return context
 
 
+class PublicDeviceWebView(TemplateView):
+    template_name = "device_web.html"
+
+    def get(self, request, *args, **kwargs):
+        self.pk = kwargs['pk']
+        self.object = Device(id=self.pk)
+        
+        if not self.object.last_evidence:
+            raise Http404
+        
+        if self.request.headers.get('Accept') == 'application/json':
+            return self.get_json_response()
+        return super().get(request, *args, **kwargs)
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        self.object.initial()
+        context.update({
+            'object': self.object
+        })
+        return context
+
+    def get_json_response(self):
+        data = {
+            'id': self.object.id,
+            'shortid': self.object.shortid,
+            'uuids': self.object.uuids,
+            'hids': self.object.hids,
+            'components': self.object.components
+        }
+        return JsonResponse(data)
+
+
 class AddAnnotationView(DashboardView, CreateView):
     template_name = "new_annotation.html"
     title = _("New annotation")