From d5833c7364060076ed4af460a6f020344ce74f21 Mon Sep 17 00:00:00 2001
From: Matthew Lemon <y@yulqen.org>
Date: Thu, 5 Sep 2024 15:01:16 +0100
Subject: Improved engagement detail page layout, using htmx

---
 .../templates/engagements/engagement_detail.html   | 219 ++++++++++++++-------
 .../engagements/snippets/effort_detail.html        |  27 +++
 2 files changed, 170 insertions(+), 76 deletions(-)
 create mode 100644 engagements/templates/engagements/snippets/effort_detail.html

(limited to 'engagements/templates')

diff --git a/engagements/templates/engagements/engagement_detail.html b/engagements/templates/engagements/engagement_detail.html
index c75523b..848b9f6 100644
--- a/engagements/templates/engagements/engagement_detail.html
+++ b/engagements/templates/engagements/engagement_detail.html
@@ -1,84 +1,96 @@
 {% extends "core/base.html" %}
 {% load table_extras %}
+{% load static %}
 
 {% block title %}{{ engagement }}{% endblock title %}
 
 {% block content %}
     <div class="container mx-auto px-4 py-8">
-        <div class="bg-white shadow-md rounded-lg overflow-hidden">
-            <header class="bg-blue-100 p-4">
-                <h2 class="text-3xl font-bold text-center">{{ engagement.friendly_type }}
-                    at {{ engagement.external_party }}</h2>
-            </header>
-            <div class="p-4">
-                <div class="mb-4">
-                    <a href="{% url 'engagements:edit' engagement.pk %}" class="text-blue-600 hover:underline">Edit
-                        Engagement</a>
-                </div>
+        <div class="p-4">
 
-                <h3 class="text-2xl font-semibold mb-4">Details</h3>
-                <div class="bg-white shadow-sm rounded-lg overflow-hidden">
-                    <table class="min-w-full divide-y divide-gray-200 text-sm">
-                        <tbody>
-                            <tr class="bg-gray-50">
-                                <td class="px-4 py-2 font-semibold text-gray-700">Date</td>
-                                <td class="px-4 py-2 text-gray-900">
-                                    {{ engagement.proposed_start_date|date:'l' }} -
-                                    {{ engagement.proposed_start_date|date:'j M Y' }}
-                                </td>
-                            </tr>
-                            <tr>
-                                <td class="px-4 py-2 font-semibold text-gray-700">Site/Operation</td>
-                                <td class="px-4 py-2 text-gray-900">{{ engagement.external_party }}</td>
-                            </tr>
-                            <tr class="bg-gray-50">
-                                <td class="px-4 py-2 font-semibold text-gray-700">Subject of Activity</td>
-                                <td class="px-4 py-2 text-gray-900">
-                                    <p class="mb-2">Summary text</p>
-                                    <table class="min-w-full divide-y divide-gray-200">
-                                        <thead class="bg-gray-50">
-                                        <tr>
-                                            <th scope="col"
-                                                class="px-3 py-2 text-left text-sm font-medium text-gray-700 uppercase tracking-wider">
-                                                DSC
-                                            </th>
-                                        </tr>
-                                        </thead>
-                                        <tbody class="bg-white divide-y divide-gray-200">
-                                        {% for t in dscs %}
-                                            <tr>
-                                                <td class="px-3 py-2 whitespace-nowrap text-base">
-                                                    <a href='#' class="text-blue-600 hover:underline">{{ t }}</a>
-                                                </td>
-                                            </tr>
-                                        {% endfor %}
-                                        </tbody>
-                                    </table>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td class="px-4 py-2 font-semibold text-gray-700">Inspectors</td>
-                                <td class="px-4 py-2 text-gray-900">{{ engagement.officers.all|commalist }}</td>
-                            </tr>
-                            <tr class="bg-gray-50">
-                                <td class="px-4 py-2 font-semibold text-gray-700">Planned Effort</td>
-                                <td class="px-4 py-2 text-gray-900">{{ effort_planned|floatformat }} hrs</td>
-                            </tr>
-                            <tr>
-                                <td class="px-4 py-2 font-semibold text-gray-700">Actual Effort</td>
-                                <td class="px-4 py-2 text-gray-900">{{ effort_actual|floatformat }} hrs</td>
-                            </tr>
-                            <tr class="bg-gray-50">
-                                <td class="px-4 py-2 font-semibold text-gray-700">Total Effort</td>
-                                <td class="px-4 py-2 text-gray-900">{{ effort_total|floatformat }} hrs</td>
-                            </tr>
-                        </tbody>
-                    </table>
+            <div class="flex flex-col md:flex-row gap-8">
+                <div class="bg-white shadow overflow-hidden sm:rounded-lg mt-8 md:w-1/3 border border-gray-400">
+                    <div class="px-4 py-2 sm:px-6 text-white bg-blue-500">
+                        <h3 class="font-semibold">{{ engagement.friendly_type }}
+                            at {{ engagement.external_party }}</h3>
+                    </div>
+                    <div class="border-t border-gray-200">
+                        <div class="px-4 py-5 sm:p-2">
+                            <div class="w-full p-4 space-y-4">
+                                <!-- Date -->
+                                <div class="flex items-center space-x-2">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                         stroke-width="1.5"
+                                         stroke="currentColor" class="size-6 mr-2">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                              d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"/>
+                                    </svg>
+                                    <span class="text-black">Tuesday - 10 May 2022</span>
+                                </div>
+
+                                <!-- Site/Operation -->
+                                <div class="flex items-center space-x-2">
+                                    <svg id="map-pin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                         stroke-width="1.5"
+                                         stroke="currentColor"
+                                         class="size-6 mr-2">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                              d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                              d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z"/>
+                                    </svg>
+
+                                    <span class="text-black">Smith, Short and Brookes</span>
+                                </div>
+
+                                <!-- Subject of Activity -->
+                                <div class="flex items-center space-x-2">
+
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                         stroke-width="1.5" stroke="currentColor" class="size-6">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                              d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75"/>
+                                    </svg>
+
+                                    <span class="text-black">DSC 1 - Title 1</span>
+                                </div>
+
+                                <!-- Inspectors -->
+                                <div class="flex items-center space-x-2">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                         stroke-width="1.5" stroke="currentColor" class="size-6">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                              d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z"/>
+                                    </svg>
+
+                                    <span class="text-black">Hilary James, Carly Robinson, Alison Smart</span>
+                                </div>
+
+                                <!-- Actual Effort -->
+                                <div class="flex items-center space-x-2">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                         stroke-width="1.5" stroke="currentColor" class="size-6">
+                                        <path stroke-linecap="round" stroke-linejoin="round"
+                                              d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
+                                    </svg>
+
+                                    <span class="text-black">Actual Effort: 5.3 hrs</span>
+                                </div>
+
+
+                                <div>
+                                    <a href="{% url 'engagements:edit' engagement.pk %}"
+                                       class="text-blue-600 hover:underline">Edit
+                                        Engagement</a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
 
-                <div class="bg-white shadow overflow-hidden sm:rounded-lg mt-8">
-                    <div class="px-4 py-5 sm:px-6 bg-blue-100">
-                        <h3 class="text-2xl font-semibold text-black">Effort for this engagement</h3>
+                <div class="bg-white shadow overflow-hidden sm:rounded-lg mt-8 md:w-2/3 border border-gray-400">
+                    <div class="px-4 py-2 sm:px-6 text-white bg-blue-500">
+                        <h3 class="font-semibold">Effort</h3>
                     </div>
                     <div class="border-t border-gray-200">
                         <div class="px-4 py-5 sm:p-6">
@@ -86,7 +98,8 @@
                                 <span class="font-medium">Add:</span>
                                 <a href="{% url 'engagements:effort_create' engagement.pk 'TRAVEL' %}"
                                    class="text-blue-600 hover:underline ml-2">Travel</a>
-                                <a href="{% url 'engagements:effort_create' engagement.pk 'PLANNING' %}" class="text-blue-600 hover:underline ml-2">Planning</a>
+                                <a href="{% url 'engagements:effort_create' engagement.pk 'PLANNING' %}"
+                                   class="text-blue-600 hover:underline ml-2">Planning</a>
                                 <a href="{% url 'engagements:effort_create' engagement.pk "REGULATION" %}"
                                    class="text-blue-600 hover:underline ml-2">Regulation</a>
                                 <a href="{% url 'engagements:effort_create' engagement.pk "REPORTING" %}"
@@ -94,13 +107,55 @@
                             </div>
 
                             {% if effort %}
-                                <div class="space-y-4">
+                                <table class="border-collapse border border-slate-400 min-w-full divide-y divide-gray-200">
+                                    <thead class="bg-gray-50">
+                                    <tr>
+                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                            Type
+                                        </th>
+                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                            Date
+                                        </th>
+                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                            Hours
+                                        </th>
+                                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                                            Actions
+                                        </th>
+                                    </tr>
+                                    </thead>
+                                    <tbody class="bg-white divide-y divide-gray-200">
                                     {% for e in effort.all %}
-                                        <div id="planned_swap_{{ e.id }}" class="bg-gray-50 p-4 rounded-lg">
-                                            {% include "engagements/snippets/effort_summary_panel.html" with e=e %}
-                                        </div>
+                                        <tr>
+                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ e.effort_type|lower }}</td>
+                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                                {{ e.proposed_start_date|date:"d M Y" }}</td>
+                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ e.hours }}</td>
+                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                                <button class="text-indigo-600 hover:text-indigo-900"
+                                                        hx-get="{% url 'engagements:effort_detail' e.id %}"
+                                                        hx-target="#effort-detail-{{ e.id }}"
+                                                        hx-swap="outerHTML"
+                                                        hx-trigger="click">
+                                                    View Details
+                                                </button>
+
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td colspan="4">
+                                                <div id="effort-detail-{{ e.id }}"
+                                                     class="hidden bg-gray-100 p-4"></div>
+                                            </td>
+                                        </tr>
                                     {% endfor %}
+                                    </tbody>
+                                </table>
+                                <!-- Total Effort -->
+                                <div class="flex items-center space-x-2 my-2">
+                                    <span class="text-black text-sm font-semibold underline decoration-pink-500">Total Effort: 5.3 hrs</span>
                                 </div>
+
                             {% else %}
                                 <p class="text-gray-500">No effort records found for this engagement.</p>
                             {% endif %}
@@ -110,4 +165,16 @@
             </div>
         </div>
     </div>
+    <script>
+        function toggleEffortDetail(button, effortId) {
+            const detailDiv = document.getElementById(`effort-detail-${effortId}`);
+            if (detailDiv.classList.contains('hidden')) {
+                button.textContent = 'Hide Details';
+            } else {
+                button.textContent = 'Show Details';
+                detailDiv.classList.add('hidden');
+            }
+        }
+
+    </script>
 {% endblock content %}
diff --git a/engagements/templates/engagements/snippets/effort_detail.html b/engagements/templates/engagements/snippets/effort_detail.html
new file mode 100644
index 0000000..16c64b4
--- /dev/null
+++ b/engagements/templates/engagements/snippets/effort_detail.html
@@ -0,0 +1,27 @@
+<div id="effort-detail-{{ effort.id }}" class="bg-gray-100 p-4">
+    <div class="flex justify-between items-center mb-2">
+        <h4 class="text-lg font-semibold">Effort Details</h4>
+        <button onclick="closeEffortDetail({{ effort.id }})" class="text-gray-500 hover:text-gray-700">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                 xmlns="http://www.w3.org/2000/svg">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+        </button>
+    </div>
+    <div class="p-4">
+        <h4 class="text-lg font-semibold mb-2">Effort Details</h4>
+        <p><strong>Type:</strong> {{ effort.effort_type }}</p>
+        <p><strong>Date:</strong> {{ effort.proposed_start_date|date:"d M Y" }}</p>
+        <p><strong>Hours:</strong> {{ effort.hours }}</p>
+        <p><strong>Notes:</strong> {{ effort.notes|default:"No notes available" }}</p>
+        <!-- Add more fields as needed -->
+    </div>
+</div>
+
+<script>
+    function closeEffortDetail(effortId) {
+        const detailDiv = document.getElementById(`effort-detail-${effortId}`);
+        detailDiv.classList.add('hidden');
+    }
+
+</script>
-- 
cgit v1.2.3