From 60bd8073ee20b7343a8457a04cc7e40d2e5005bb Mon Sep 17 00:00:00 2001
From: Ross <ross@xkjq.uk>
Date: Wed, 17 Dec 2025 14:29:22 +0000
Subject: [PATCH] Refactor global leave legend to include back navigation and
 improve loading messages

---
 .../templates/rota/leaves_global.html         | 53 ++++++++++++-------
 1 file changed, 35 insertions(+), 18 deletions(-)

diff --git a/djangorota/djangorota/templates/rota/leaves_global.html b/djangorota/djangorota/templates/rota/leaves_global.html
index 798dbe6..d9b5736 100644
--- a/djangorota/djangorota/templates/rota/leaves_global.html
+++ b/djangorota/djangorota/templates/rota/leaves_global.html
@@ -15,10 +15,19 @@
       <p class="help">View all leave requests across workers. Choose a rota to scope the calendar, or select "All rotas" to see everything. Click and drag to select dates to open the leave form (you'll need to choose workers in the modal).</p>
     </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 id="global-legend" class="box" style="margin-top:0.5rem;">
+      <div style="display:flex;align-items:center;gap:0.5rem;justify-content:space-between;">
+        <div><strong>Legend:</strong></div>
+        <div>
+          {% if selected_rota_id %}
+            <a class="button is-small is-light" href="{% url 'rota:rota_detail' selected_rota_id %}">Back to rota</a>
+          {% endif %}
+        </div>
+      </div>
+      <div id="global-legend-content" style="margin-top:0.5rem;">
+        <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>
   </div>
 
@@ -48,26 +57,34 @@
       }catch(e){ initialRota = null; }
   window.initCalendar('calendar', { leaves: leaves, leavesUrl: leavesUrlBase, rotaId: initialRota, requestUrl: '{% url "rota:request_leave" %}', mode: container.dataset.mode || 'inline' });
       function refreshLegendFor(id){
-        const legend = document.getElementById('rota-worker-legend');
-        if(!legend) return;
-        if(!id){ legend.innerText = 'Showing leave for all rotas.'; return; }
-        legend.innerText = 'Loading legend…';
+        const globalLegendContent = document.getElementById('global-legend-content');
+        if(!globalLegendContent) return;
+        if(!id){
+          globalLegendContent.innerHTML = '<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';
+          return;
+        }
+        globalLegendContent.innerText = 'Loading legend…';
         fetch(leavesUrlBase + '?rota_id=' + encodeURIComponent(id), {credentials:'same-origin'}).then(r=>r.json()).then(data=>{
           const byWorker = {};
           (data.leaves||[]).forEach(l=>{ if(l.worker_id){ byWorker[l.worker_id] = {name:l.reason, color:l.color}; } });
-          if(Object.keys(byWorker).length===0){ legend.innerText = 'No workers with leaves in this rota.'; return; }
-          legend.innerHTML = Object.entries(byWorker).map(([id,info])=> `<div style="display:inline-flex;align-items:center;gap:0.5rem;margin-right:0.5rem"><span style="width:14px;height:14px;background:${info.color};border:1px solid rgba(0,0,0,0.1);display:inline-block"></span><span>${info.name}</span></div>`).join('');
-        }).catch(e=>{ legend.innerText = 'Unable to load legend'; console.debug(e); });
+          if(Object.keys(byWorker).length===0){
+            globalLegendContent.innerText = 'No workers with leaves in this rota.';
+            return;
+          }
+          const workerHtml = Object.entries(byWorker).map(([id,info])=> `<div style="display:inline-flex;align-items:center;gap:0.5rem;margin-right:0.5rem"><span style="width:14px;height:14px;background:${info.color};border:1px solid rgba(0,0,0,0.1);display:inline-block"></span><span>${info.name}</span></div>`).join('');
+          globalLegendContent.innerHTML = workerHtml + '<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';
+        }).catch(e=>{ globalLegendContent.innerText = 'Unable to load legend'; console.debug(e); });
       }
       // Refresh legend for the initially selected rota (or show all rotas)
-      refreshLegendFor(initialRota);
+      // Ensure the legend element exists (script is before the legend markup)
+      if(document.readyState === 'loading'){
+        document.addEventListener('DOMContentLoaded', function(){ refreshLegendFor(initialRota); });
+      } else {
+        refreshLegendFor(initialRota);
+      }
     })();
   </script>
 
-  <div class="box" style="margin-top:0.75rem;">
-    <h4 class="subtitle is-6">Workers on this rota</h4>
-    <div style="display:flex;flex-wrap:wrap;gap:0.5rem;">
-      <div id="rota-worker-legend">Select a rota to show its workers.</div>
-    </div>
-  </div>
+  {# Consolidated legend above replaces the separate 'Workers on this rota' box #}
 {% endblock %}