diff options
-rw-r--r-- | core/static/css/output.css | 51 | ||||
-rw-r--r-- | engagements/templates/engagements/engagement_detail.html | 219 | ||||
-rw-r--r-- | engagements/templates/engagements/snippets/effort_detail.html | 27 | ||||
-rw-r--r-- | engagements/urls.py | 1 | ||||
-rw-r--r-- | engagements/views.py | 12 |
5 files changed, 227 insertions, 83 deletions
diff --git a/core/static/css/output.css b/core/static/css/output.css index cb296e2..e70dbcf 100644 --- a/core/static/css/output.css +++ b/core/static/css/output.css @@ -1362,6 +1362,10 @@ html { display: grid; } +.hidden { + display: none; +} + .size-4 { width: 1rem; height: 1rem; @@ -1400,6 +1404,10 @@ html { max-width: 42rem; } +.border-collapse { + border-collapse: collapse; +} + .list-inside { list-style-position: inside; } @@ -1444,6 +1452,12 @@ html { gap: 2rem; } +.space-x-2 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(0.5rem * var(--tw-space-x-reverse)); + margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} + .space-x-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(1rem * var(--tw-space-x-reverse)); @@ -1541,11 +1555,21 @@ html { border-color: rgb(209 213 219 / var(--tw-border-opacity)); } +.border-gray-400 { + --tw-border-opacity: 1; + border-color: rgb(156 163 175 / var(--tw-border-opacity)); +} + .border-green-500 { --tw-border-opacity: 1; border-color: rgb(34 197 94 / var(--tw-border-opacity)); } +.border-slate-400 { + --tw-border-opacity: 1; + border-color: rgb(148 163 184 / var(--tw-border-opacity)); +} + .border-transparent { border-color: transparent; } @@ -1729,11 +1753,6 @@ html { line-height: 2.5rem; } -.text-base { - font-size: 1rem; - line-height: 1.5rem; -} - .text-lg { font-size: 1.125rem; line-height: 1.75rem; @@ -1949,6 +1968,11 @@ html { color: rgb(30 58 138 / var(--tw-text-opacity)); } +.hover\:text-gray-700:hover { + --tw-text-opacity: 1; + color: rgb(55 65 81 / var(--tw-text-opacity)); +} + .hover\:text-gray-800:hover { --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity)); @@ -1959,6 +1983,11 @@ html { color: rgb(99 102 241 / var(--tw-text-opacity)); } +.hover\:text-indigo-900:hover { + --tw-text-opacity: 1; + color: rgb(49 46 129 / var(--tw-text-opacity)); +} + .hover\:underline:hover { text-decoration-line: underline; } @@ -2055,9 +2084,21 @@ html { } @media (min-width: 768px) { + .md\:w-1\/3 { + width: 33.333333%; + } + + .md\:w-2\/3 { + width: 66.666667%; + } + .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } + + .md\:flex-row { + flex-direction: row; + } } @media (min-width: 1024px) { 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> diff --git a/engagements/urls.py b/engagements/urls.py index 7b6ddd3..ef61f84 100644 --- a/engagements/urls.py +++ b/engagements/urls.py @@ -13,6 +13,7 @@ urlpatterns = [ name="regulatedentities", ), path("edit/<int:eid>", views.engagement_edit, name="edit"), + path('effort/<int:effort_id>/detail/', views.effort_detail, name='effort_detail'), path("create/<slug:slug>/", views.engagement_create, name="create"), path("create/<slug:slug>/<str:reg>", views.engagement_create, name="create"), path( diff --git a/engagements/views.py b/engagements/views.py index ae1abfd..a76a37d 100644 --- a/engagements/views.py +++ b/engagements/views.py @@ -1,11 +1,13 @@ from django.contrib.auth.decorators import login_required from django.contrib.auth.mixins import LoginRequiredMixin from django.db.models import Q -from django.shortcuts import get_object_or_404, redirect, render +from django.http import HttpResponse +from django.shortcuts import get_object_or_404 +from django.shortcuts import redirect, render +from django.template.loader import render_to_string from django.views.generic import ListView from instruments.models import SubInstrument - from .forms import ( EngagementCreateForm, EngagementEffortPlanningCreateForm, @@ -16,6 +18,12 @@ from .forms import ( from .models import Engagement, EngagementEffort, EngagementType, Organisation +def effort_detail(request, effort_id): + effort = get_object_or_404(EngagementEffort, id=effort_id) + html = render_to_string('engagements/snippets/effort_detail.html', {'effort': effort}) + return HttpResponse(html) + + class RegulatedEntitiesView(LoginRequiredMixin, ListView): context_object_name = "entities" queryset = Organisation.objects.filter(is_regulated_entity=True).order_by("name") |