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> <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>
<div style="margin-top:0.5rem;"> <div id="global-legend" class="box" style="margin-top:0.5rem;">
<strong>Legend:</strong> <div style="display:flex;align-items:center;gap:0.5rem;justify-content:space-between;">
<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 <div><strong>Legend:</strong></div>
<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>
{% 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>
</div> </div>
@@ -48,26 +57,34 @@
}catch(e){ initialRota = null; } }catch(e){ initialRota = null; }
window.initCalendar('calendar', { leaves: leaves, leavesUrl: leavesUrlBase, rotaId: initialRota, requestUrl: '{% url "rota:request_leave" %}', mode: container.dataset.mode || 'inline' }); window.initCalendar('calendar', { leaves: leaves, leavesUrl: leavesUrlBase, rotaId: initialRota, requestUrl: '{% url "rota:request_leave" %}', mode: container.dataset.mode || 'inline' });
function refreshLegendFor(id){ function refreshLegendFor(id){
const legend = document.getElementById('rota-worker-legend'); const globalLegendContent = document.getElementById('global-legend-content');
if(!legend) return; if(!globalLegendContent) return;
if(!id){ legend.innerText = 'Showing leave for all rotas.'; return; } if(!id){
legend.innerText = 'Loading legend…'; 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=>{ fetch(leavesUrlBase + '?rota_id=' + encodeURIComponent(id), {credentials:'same-origin'}).then(r=>r.json()).then(data=>{
const byWorker = {}; const byWorker = {};
(data.leaves||[]).forEach(l=>{ if(l.worker_id){ byWorker[l.worker_id] = {name:l.reason, color:l.color}; } }); (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; } if(Object.keys(byWorker).length===0){
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(''); globalLegendContent.innerText = 'No workers with leaves in this rota.';
}).catch(e=>{ legend.innerText = 'Unable to load legend'; console.debug(e); }); 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) // 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> </script>
<div class="box" style="margin-top:0.75rem;"> {# Consolidated legend above replaces the separate 'Workers on this rota' box #}
<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>
{% endblock %} {% endblock %}