From 1a767244a4c2925daf4a81f8ce61742ad51c1ade Mon Sep 17 00:00:00 2001
From: Florent Morselli <florent.morselli@spomky-labs.com>
Date: Fri, 5 Apr 2024 13:15:10 +0200
Subject: [PATCH] Implement PWA Collector and additional viewing templates

Implemented a new Progressive Web App (PWA) Collector to fetch and manage service worker and manifest details. Additionally, created multiple HTML templates for manifest, service worker, and other PWA tabs to properly display the collected data in UI.
---
 .../Collector/serviceworker-tab.html.twig     |  2 +-
 templates/Collector/template.html.twig        | 44 ++++++++++++++-----
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/templates/Collector/serviceworker-tab.html.twig b/templates/Collector/serviceworker-tab.html.twig
index ab7fc87..af145d1 100644
--- a/templates/Collector/serviceworker-tab.html.twig
+++ b/templates/Collector/serviceworker-tab.html.twig
@@ -32,7 +32,7 @@
 </table>
 <h3>Workbox</h3>
 <p>Status: {% if collector.workbox.enabled %}
-        <span class="status-badge status-success">enabled!</span>
+        <span class="status-badge status-success">enabled</span>
     {% else %}
         <span class="status-badge status-warning">disabled</span>
     {% endif %}
diff --git a/templates/Collector/template.html.twig b/templates/Collector/template.html.twig
index 354c3db..5ab231d 100644
--- a/templates/Collector/template.html.twig
+++ b/templates/Collector/template.html.twig
@@ -8,6 +8,28 @@
 
     {% set text %}
         <div class="sf-toolbar-info-piece">
+            <b>Manifest</b>
+            {% if collector.data.manifest.enabled %}
+                <span class="sf-toolbar-status sf-toolbar-status-green">Enabled</span>
+            {% else %}
+                <span class="sf-toolbar-status sf-toolbar-status-yellow">Disabled</span>
+            {% endif %}
+        </div>
+        <div class="sf-toolbar-info-piece">
+            <b>Service worker</b>
+            {% if collector.data.serviceWorker.enabled %}
+                <span class="sf-toolbar-status sf-toolbar-status-green">Enabled</span>
+            {% else %}
+                <span class="sf-toolbar-status sf-toolbar-status-yellow">Disabled</span>
+            {% endif %}
+        </div>
+        <div class="sf-toolbar-info-piece">
+            <b>└&nbsp;Workbox</b>
+            {% if collector.workbox.enabled %}
+                <span class="sf-toolbar-status sf-toolbar-status-green">Enabled</span>
+            {% else %}
+                <span class="sf-toolbar-status sf-toolbar-status-yellow">Disabled</span>
+            {% endif %}
         </div>
     {% endset %}
 
@@ -15,19 +37,7 @@
 {% endblock %}
 
 {% block head %}
-    {# Optional. Here you can link to or define your own CSS and JS contents. #}
-    {# Use {{ parent() }} to extend the default styles instead of overriding them. #}
     {{ parent() }}
-{% endblock %}
-
-{% block menu %}
-    <span class="label">
-        <span class="icon">{{ source('@SpomkyLabsPwa/Collector/pwa.svg') }}</span>
-        <strong>PWA</strong>
-    </span>
-{% endblock %}
-
-{% block panel %}
     <style>
         .status-badge {
             background-color: var(--badge-background);
@@ -63,6 +73,16 @@
             line-height: 0.7rem;
         }
     </style>
+{% endblock %}
+
+{% block menu %}
+    <span class="label">
+        <span class="icon">{{ source('@SpomkyLabsPwa/Collector/pwa.svg') }}</span>
+        <strong>PWA</strong>
+    </span>
+{% endblock %}
+
+{% block panel %}
     <h2>Progressive Web App</h2>
     <div class="sf-tabs">
         <div class="tab">