summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--core/static/css/output.css51
-rw-r--r--engagements/templates/engagements/engagement_detail.html219
-rw-r--r--engagements/templates/engagements/snippets/effort_detail.html27
-rw-r--r--engagements/urls.py1
-rw-r--r--engagements/views.py12
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")