ross/proc-rota
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
Ross
2025-12-15 21:48:06 +00:00
parent bc7036859e
commit a7e898f0a7
1 changed files with 59 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
djangorota/djangorota/templates/rota/worker_detail.html
+21 -27
View File
@@ -1,46 +1,35 @@
{% extends 'base.html' %}
{% load crispy_forms_tags static %} {% load crispy_forms_tags static %}
<html> {% block content %}
<head> <div class="container">
<title>{{ worker.name }}</title> <h2 class="title">Request leave for {{ worker.name }}</h2>
<link href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" rel="stylesheet">
<script src="https://unpkg.com/htmx.org@1.9.2"></script> <div class="box">
<h3 class="subtitle">Request leave on calendar</h3>
{% include 'rota/partials/flatpickr_includes.html' %} {% include 'rota/partials/flatpickr_includes.html' %}
<link rel="stylesheet" href="{% static 'css/calendar.css' %}"> <link rel="stylesheet" href="{% static 'css/calendar.css' %}">
</head> <div id="calendar" class="calendar" data-worker-id="{{ worker.id }}" data-mode="inline"></div>
<body> <p class="help">Click a start date then a second date to select a range and prefill the leave form.</p>
<section class="section">
<div class="container">
<div class="box">
<h2 class="subtitle">Request leave on calendar</h2>
<div id="calendar" data-worker-id="{{ worker.id }}"></div>
<p class="help">Select a date or drag to select a range to request leave.</p>
</div> </div>
<h1 class="title">{{ worker.name }}</h1>
<p class="subtitle">{{ worker.email }} - {{ worker.site }}</p>
{# Navigation: back to an assigned rota (show first assigned rota if any) #}
{% with back_rota=worker.rotas.all.0 %} {% with back_rota=worker.rotas.all.0 %}
{% if back_rota %} {% if back_rota %}
<p style="margin-top:0.5rem"><a class="button is-light" href="{% url 'rota:rota_detail' back_rota.id %}">&larr; Back to rota: {{ back_rota.name }}</a></p> <p style="margin-top:0.5rem"><a class="button" href="{% url 'rota:rota_detail' back_rota.id %}">&larr; Back to rota: {{ back_rota.name }}</a></p>
{% endif %} {% endif %}
{% endwith %} {% endwith %}
<div class="box">
<h2 class="subtitle">Request leave</h2>
<form method="post"> <form method="post">
{% csrf_token %} {% csrf_token %}
{{ form|crispy }} {{ form|crispy }}
<div class="field"> <div class="field">
<div class="control"> <div class="control">
<button class="button is-primary" type="submit">Add leave</button> <button class="button is-primary" type="submit">Request</button>
</div> </div>
</div> </div>
</form> </form>
</div>
<h2 class="subtitle">Existing leave</h2> <h2 class="subtitle">Existing leave for {{ worker.name }}</h2>
<div class="content"> <div class="content">
{# Delete-all control: only show to staff or the worker themselves #}
{% if request.user.is_staff or request.user.is_authenticated and request.user.email and request.user.email == worker.email %} {% if request.user.is_staff or request.user.is_authenticated and request.user.email and request.user.email == worker.email %}
<form method="post" action="{% url 'rota:leave_delete_all' worker.id %}" hx-post="{% url 'rota:leave_delete_all' worker.id %}" hx-swap="none" style="display:inline;margin-bottom:0.5rem"> <form method="post" action="{% url 'rota:leave_delete_all' worker.id %}" hx-post="{% url 'rota:leave_delete_all' worker.id %}" hx-swap="none" style="display:inline;margin-bottom:0.5rem">
{% csrf_token %} {% csrf_token %}
@@ -49,8 +38,14 @@
{% endif %} {% endif %}
{% include 'rota/partials/leave_list.html' with leaves=worker.leaves.all %} {% include 'rota/partials/leave_list.html' with leaves=worker.leaves.all %}
</div> </div>
<div style="margin-top:0.5rem;">
<strong>Legend:</strong>
<span style="display:inline-block;width:12px;height:12px;background:#ffecec;border:1px solid #ddd;margin-left:0.5rem;vertical-align:middle"></span> Existing leave
<span style="display:inline-block;width:12px;height:12px;background:#cdeffd;border:1px solid #2b8fd6;margin-left:0.75rem;vertical-align:middle"></span> Selected range
</div> </div>
</section> </div>
<script src="{% static 'js/calendar.js' %}"></script> <script src="{% static 'js/calendar.js' %}"></script>
<script> <script>
(function(){ (function(){
@@ -61,8 +56,7 @@
{start:'{{ l.start_date|date:"Y-m-d" }}', end:'{{ l.end_date|date:"Y-m-d" }}'}, {start:'{{ l.start_date|date:"Y-m-d" }}', end:'{{ l.end_date|date:"Y-m-d" }}'},
{% endfor %} {% endfor %}
]; ];
window.initCalendar('calendar', { workerId: container.dataset.workerId, leaves: leaves, requestUrl: '{% url "rota:request_leave" %}', leavesUrl: '{% url "rota:worker_leaves_json" worker.id %}' }); window.initCalendar('calendar', { workerId: container.dataset.workerId, leaves: leaves, requestUrl: '{% url "rota:request_leave" %}', leavesUrl: '{% url "rota:worker_leaves_json" worker.id %}', mode: container.dataset.mode || 'inline' });
})(); })();
</script> </script>
</body> {% endblock %}
</html>