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

Refactor global leave legend to include back navigation and improve loading messages

Browse Source
This commit is contained in:
Ross
2025-12-17 14:29:22 +00:00
parent 9d187dfa75
commit 60bd8073ee
1 changed files with 35 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
djangorota/djangorota/templates/rota/leaves_global.html
+35 -18
View File
@@ -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 %}