diff options
Diffstat (limited to 'engagements')
| -rw-r--r-- | engagements/forms.py | 12 | ||||
| -rw-r--r-- | engagements/templates/engagements/engagement_effort_create.html | 104 | ||||
| -rw-r--r-- | engagements/templates/engagements/engagement_form.html | 114 |
3 files changed, 162 insertions, 68 deletions
diff --git a/engagements/forms.py b/engagements/forms.py index a1c3c44..2532892 100644 --- a/engagements/forms.py +++ b/engagements/forms.py @@ -16,6 +16,10 @@ class EngagementEffortReportingCreateForm(forms.ModelForm): class Meta: model = EngagementEffort + help_texts = { + "is_planned": ("To distinguish planned events from retrospective recording."), + "officers": ("Include yourself here but you can also add effort for your colleagues.") + } fields = [ 'is_planned', 'proposed_start_date', @@ -63,7 +67,7 @@ class EngagementEffortRegulationCreateForm(forms.ModelForm): "notes", ] help_texts = { - "is_planned": ("<br><small><em>To distinguish planned events from retrospective recording</em></small>") + "is_planned": ("To distinguish planned events from retrospective recording.") } widgets = { "proposed_start_date": forms.DateTimeInput( @@ -93,7 +97,7 @@ class EngagementEffortPlanningCreateForm(forms.ModelForm): "notes", ] help_texts = { - "is_planned": ("<br><small><em>To distinguish planned events from retrospective recording</em></small>") + "is_planned": ("To distinguish planned events from retrospective recording.") } widgets = { "proposed_start_date": forms.DateTimeInput( @@ -126,6 +130,9 @@ class EngagementEffortTravelCreateForm(forms.ModelForm): "proposed_start_date": forms.DateTimeInput(attrs={"type": "datetime-local"}), "proposed_end_date": forms.DateTimeInput(attrs={"type": "datetime-local"}), } + help_texts = { + "is_planned": ("To distinguish planned events from retrospective recording.") + } class EngagementEffortCreateForm(forms.ModelForm): @@ -186,6 +193,7 @@ class EngagementCreateForm(forms.ModelForm): "proposed_start_date", "proposed_end_date", "engagement_type", + "external_party", "officers", ] labels = { diff --git a/engagements/templates/engagements/engagement_effort_create.html b/engagements/templates/engagements/engagement_effort_create.html index b776fd8..09a357a 100644 --- a/engagements/templates/engagements/engagement_effort_create.html +++ b/engagements/templates/engagements/engagement_effort_create.html @@ -1,34 +1,94 @@ {% extends "core/base.html" %} +{% load widget_tweaks %} {% block title %}Add {{ etype }} effort to Engagement{% endblock title %} {% block content %} - <div class="container mx-auto max-w-2xl mt-8"> - <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"> - <h2 class="text-2xl font-bold mb-6">Register your {{ etype|lower }} effort for the {{ engagement.engagement_type.name|title }} event</h2> - <p class="mb-6">{{ engagement.external_party }} on {{ engagement.proposed_start_date }}</p> + <div class="container mx-auto max-w-2xl mt-8"> + <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 relative"> + <a href="{{ request.META.HTTP_REFERER }}" class="absolute top-2 right-2"> + <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> + <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> + </svg> + </a> + <h2 class="text-2xl font-bold mb-6">Register <span class="underline decoration-blue-500 decoration-2">{{ etype|lower }}</span> time</h2> + <div class="flex items-end mb-6"> + <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> + <div class="flex items-end flex-wrap"> + <p class="underline decoration-2 font-semibold decoration-pink-500 mr-2">{{ engagement.external_party }} </p> + <p class="font-normal"> + ({{ engagement.engagement_type.name|title }}) + </p> + </div> + </div> - <form method="post" class="space-y-6"> - {% csrf_token %} - {% for field in form %} - <div class="mb-4"> - <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2"> - {{ field.label }} - </label> - {{ field }} - {% if field.help_text %} - <p class="mt-2 text-sm text-gray-500">{{ field.help_text }}</p> + <div class="flex items-end mb-6"> + <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> + <p class="text text-gray-500 font-medium"> + {% if engagement.proposed_start_date == engagement.proposed_end_date %} + {{ engagement.proposed_start_date|date:"j M Y" }} + {% else %} + {{ engagement.proposed_start_date|date:"j M Y" }} - + {{ engagement.proposed_end_date|date:"j M Y" }} {% endif %} - </div> - {% endfor %} - <div class="mt-6"> - <button type="submit" class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> - Submit - </button> + </p> </div> - </form> + + <div class="bg-blue-50 border border-blue-200 rounded-md p-4 mb-6"> + <p class="text-sm text-blue-800"> + Please fill out the form below to log your <strong>{{ etype|lower }}</strong> effort for this engagement. + Make sure to provide accurate information for proper tracking and reporting. + </p> + <hr class="my-2"> + <p><a class="text-sm font-bold underline text-blue-800" href="#">Help</a></p> + </div> + + <form method="post" class="space-y-6"> + {% csrf_token %} + {% for field in form %} + <div class="my-2"> + <div> + <label for="{{ field.id_for_label }}" class="block text-sm font-bold text-gray-700 mb-2"> + {{ field.label }} + </label> + </div> + <div> + {% render_field field class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %} + {% for error in field.errors %} + {{ field }} + {% endfor %} + </div> + {% if field.help_text %} + <div class="flex items-end mb-2"> + <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" + stroke-width="1.0" stroke="currentColor" class="size-4 text-gray-500 mr-2"> + <path stroke-linecap="round" stroke-linejoin="round" + d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"/> + </svg> + <p class="mt-2 text-xs text-gray-500">{{ field.help_text }}</p> + </div> + {% endif %} + </div> + {% endfor %} + <div class="mt-6"> + <button type="submit" + class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> + Submit + </button> + </div> + </form> + </div> </div> -</div> {% endblock content %} diff --git a/engagements/templates/engagements/engagement_form.html b/engagements/templates/engagements/engagement_form.html index 3dfe249..a0cdea2 100644 --- a/engagements/templates/engagements/engagement_form.html +++ b/engagements/templates/engagements/engagement_form.html @@ -1,60 +1,87 @@ {% extends "core/base.html" %} {% load static %} +{% load widget_tweaks %} {% block title %}Create new 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">{{ title }}</h2> - </header> - <div class="p-6"> - <div class="mb-8"> - <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg"> - <h4 class="text-lg font-semibold mb-2">Step 1</h4> - <p class="mb-4">To roughly plan out future events, you provide the minimal details here: <strong>start date</strong>, <strong>end date</strong> (optional), the <strong>type of Engagement</strong> (Assessment, Inspection or Sampling), the <strong>external site</strong> or operation and finally the <strong>inspectors</strong> who are carrying out the work.</p> - <h4 class="text-lg font-semibold mb-2">Step 2</h4> - <p>So that we can track the finer details involved with an Assessment or Inspection, each Engagement comprises additional <em>components</em>, such as <strong>Planning</strong>, <strong>On-site</strong> and <strong>Reporting</strong>. Inspector time can be allocated to these components. In addition, each component can be associated with <strong>Instruments</strong>, such as <strong>DSCs</strong>, etc. After you create the overarching Engagement using this form, you will have the opportunity to add components.</p> + <div class="container mx-auto w-2/3 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">{{ title }}</h2> + </header> + <div class="p-6"> + <div class="mb-8"> + <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg"> + <h4 class="text-lg font-semibold mb-2">Step 1</h4> + <p class="mb-4">To roughly plan out future events, you provide the minimal details here: + <strong>start date</strong>, <strong>end date</strong> (optional), the <strong>type of + Engagement</strong> (Assessment, Inspection or Sampling), the <strong>external + site</strong> or operation and finally the <strong>inspectors</strong> who are carrying + out the work.</p> + <h4 class="text-lg font-semibold mb-2">Step 2</h4> + <p>So that we can track the finer details involved with an Assessment or Inspection, each + Engagement comprises additional <em>components</em>, such as <strong>Planning</strong>, + <strong>On-site</strong> and <strong>Reporting</strong>. Inspector time can be allocated to + these components. In addition, each component can be associated with + <strong>Instruments</strong>, such as <strong>DSCs</strong>, etc. After you create the + overarching Engagement using this form, you will have the opportunity to add components.</p> + </div> </div> - </div> - <div class="mt-8"> - <h4 class="text-xl font-semibold mb-4">Enter main details:</h4> - <div class="bg-white shadow overflow-hidden sm:rounded-lg"> - <div class="px-4 py-5 sm:p-6"> + <div class="mt-8 mx-auto border p-6 bg-white shadow-md rounded-lg"> + <h4 class="text-xl font-semibold mb-1">Enter main details:</h4> + <div class="px-2 pt-1 sm:p-2"> <form method="post" class="space-y-6"> {% csrf_token %} - {% for field in form %} - <div class="mb-4"> - <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-1"> - {{ field.label }} - </label> - {% if field.field.widget.input_type == 'checkbox' %} - <div class="flex items-center"> - <input type="checkbox" name="{{ field.name }}" id="{{ field.id_for_label }}" {% if field.value %}checked{% endif %} class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> - <span class="ml-2 text-gray-700">{{ field.help_text|safe }}</span> - </div> - {% elif field.field.widget.input_type == 'select' %} - <select name="{{ field.name }}" id="{{ field.id_for_label }}" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"> - {% for choice in field.field.choices %} - <option value="{{ choice.0 }}" {% if choice.0 == field.value %}selected{% endif %}>{{ choice.1 }}</option> - {% endfor %} - </select> - {% else %} - <input type="{{ field.field.widget.input_type }}" name="{{ field.name }}" id="{{ field.id_for_label }}" value="{{ field.value|default:'' }}" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md"> - {% endif %} - {% if field.help_text and field.field.widget.input_type != 'checkbox' %} - <p class="mt-2 text-sm text-gray-500">{{ field.help_text|safe }}</p> - {% endif %} - {% for error in field.errors %} - <p class="mt-2 text-sm text-red-600">{{ error }}</p> + <div> + {{ form.external_party.label_tag }} + <div class="my-2"> + {% render_field form.external_party class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %} + {% for error in form.external_party.errors %} + <p class="text-red-500 text-sm">{{ error }}</p> + {% endfor %} + </div> + </div> + + <div> + {{ form.proposed_start_date.label_tag }} + <div class="my-2"> + {% render_field form.proposed_start_date class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %} + </div> + </div> + + <div> + {{ form.proposed_end_date.label_tag }} + <div class="my-2"> + {% render_field form.proposed_end_date class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %} + </div> + </div> + + <div> + {{ form.engagement_type.label_tag }} + <div class="my-2"> + {% render_field form.engagement_type class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %} + {% for error in form.engagement_type.errors %} + <p class="text-red-500 text-sm">{{ error }}</p> {% endfor %} </div> - {% endfor %} + </div> + + <div> + {{ form.officers.label_tag }} + <div class="my-2"> + {% render_field form.officers class+="block w-full rounded-md border-0 p-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %} + {% for error in form.officers.errors %} + <p class="text-red-500 text-sm">{{ error }}</p> + {% endfor %} + </div> + </div> + <div> - <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> + <button type="submit" + class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> Save </button> </div> @@ -64,5 +91,4 @@ </div> </div> </div> -</div> {% endblock content %} |