From e7a93361e39e495ea89b2d58b48dac7d722c5ad4 Mon Sep 17 00:00:00 2001
From: Thomas Rusiecki <rusieckithomas@gmail.com>
Date: Sat, 14 Dec 2024 16:41:18 -0300
Subject: [PATCH] help icon added and new icon on add button

---
 admin/templates/states_panel.html |  6 +++---
 admin/views.py                    |  5 +++--
 dashboard/templates/base.html     | 21 ++++++++++++++++++---
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/admin/templates/states_panel.html b/admin/templates/states_panel.html
index c7a4d36..c3ca7c8 100644
--- a/admin/templates/states_panel.html
+++ b/admin/templates/states_panel.html
@@ -8,14 +8,14 @@
   </div>
   <div class="col text-end">
     <button type="button" class="btn btn-green-admin" data-bs-toggle="modal" data-bs-target="#addStateModal">
-      {% trans "Add State Definition" %}
+      <i class="fas fa-plus text-secondary align-center p-1"></i>
+      {% trans "Add" %}
     </button>
   </div>
 </div>
 
-<div class="row mt-4">
+<div class="row mt-5">
   <div class="col">
-    <h4>{% trans "State Definitions" %}</h4>
     {% if state_definitions %}
       <table class="table table-hover table-border">
         <caption>{% trans 'Move and drag state definitions to reorder' %}</caption>
diff --git a/admin/views.py b/admin/views.py
index f24a90f..df36e9e 100644
--- a/admin/views.py
+++ b/admin/views.py
@@ -139,14 +139,15 @@ class StateDefinitionContextMixin(ContextMixin):
         context = super().get_context_data(**kwargs)
         context.update({
             "state_definitions": StateDefinition.objects.filter(institution=self.request.user.institution).order_by('order'),
+            "help_text": _('State definitions are the custom finite states that a device can be in.'),
         })
         return context
 
 
 class StatesPanelView(AdminView, StateDefinitionContextMixin, TemplateView):
     template_name = "states_panel.html"
-    title = _("States")
-    breadcrumb = _("admin / States") + " /"
+    title = _("States Panel")
+    breadcrumb = _("admin / States Panel") + " /"
 
 
 class AddStateDefinitionView(AdminView, StateDefinitionContextMixin, CreateView):
diff --git a/dashboard/templates/base.html b/dashboard/templates/base.html
index 49a9550..027a07d 100644
--- a/dashboard/templates/base.html
+++ b/dashboard/templates/base.html
@@ -184,9 +184,15 @@
             {% endfor %}
           {% endblock messages %}
           <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2">
-            <h1 class="h2">{{ title }}</h1>
-
-	    <form method="post" action="{% url 'dashboard:search' %}">
+            <h1 class="h2">{{ title }}
+              {% if help_text %}
+              <span class="ms-1" data-bs-toggle="tooltip" data-bs-placement="right" title="{{ help_text }}">
+                <i class="fas fa-question-circle text-secondary h6 align-top"></i>
+              </span> 
+            {% endif %}
+            </h1>
+             
+	          <form method="post" action="{% url 'dashboard:search' %}">
               {% csrf_token %}
               <div class="input-group rounded">
                 <input type="search" name="search" class="form-control rounded" placeholder="Search your device..." aria-label="Search" aria-describedby="search-addon" />
@@ -227,4 +233,13 @@
     {% block extrascript %}{% endblock %}
     {% endblock %}
   </body>
+
+  <script>
+     //If help_text is passed to the view as context, a hover-able help icon is displayed 
+      var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+      var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl);
+      });
+  </script>
+
 </html>