76 lines
3.6 KiB
HTML
76 lines
3.6 KiB
HTML
<section class="grid gap-6">
|
||
<div class="flex items-center justify-between flex-wrap gap-3">
|
||
<h1 class="text-2xl font-bold">Edit User Availability</h1>
|
||
<a class="text-sm underline text-slate-300" href="{{ url_for('admin_availability') }}">Back to Team Grid</a>
|
||
</div>
|
||
|
||
<!-- User picker -->
|
||
<form method="get" class="flex items-center gap-2 max-w-xl">
|
||
<label class="text-sm text-slate-300">User</label>
|
||
<select name="user_id" class="px-3 py-2 rounded-lg bg-slate-950 border border-slate-700 w-full">
|
||
<option value="">— Select a user —</option>
|
||
{% for u in users %}
|
||
<option value="{{ u.id }}" {{ 'selected' if (user and user.id==u.id) else '' }}>
|
||
{{ u.username }}
|
||
</option>
|
||
{% endfor %}
|
||
</select>
|
||
<button class="px-3 py-2 rounded-lg border border-slate-700 hover:border-slate-500">Load</button>
|
||
</form>
|
||
|
||
{% if user %}
|
||
<div class="rounded-2xl border border-slate-800 bg-slate-900/60 p-4">
|
||
<h2 class="text-lg font-semibold mb-3">Weekly Pattern for: <span class="font-mono">{{ user.username }}</span></h2>
|
||
<form method="post" class="overflow-x-auto">
|
||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||
<input type="hidden" name="user_id" value="{{ user.id }}">
|
||
<table class="min-w-full text-sm">
|
||
<thead class="text-slate-300">
|
||
<tr>
|
||
<th class="py-2 pr-4 text-left font-medium">Day</th>
|
||
<th class="py-2 px-2 text-left font-medium">Available</th>
|
||
<th class="py-2 px-2 text-left font-medium">Start</th>
|
||
<th class="py-2 px-2 text-left font-medium">End</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y divide-slate-800">
|
||
{% for key,label in day_names %}
|
||
<tr>
|
||
<td class="py-2 pr-4"><strong>{{ label }}</strong></td>
|
||
<td class="py-2 px-2"><input type="checkbox" name="{{ key }}_avail" {{ 'checked' if week[key].avail else '' }}></td>
|
||
<td class="py-2 px-2"><input type="time" name="{{ key }}_start" value="{{ week[key].start }}" class="px-2 py-1 rounded bg-slate-950 border border-slate-700"></td>
|
||
<td class="py-2 px-2"><input type="time" name="{{ key }}_end" value="{{ week[key].end }}" class="px-2 py-1 rounded bg-slate-950 border border-slate-700"></td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="mt-4 flex flex-wrap gap-2">
|
||
<button class="px-4 py-2 rounded-lg bg-brand-600 hover:bg-brand-700 font-semibold" type="submit">Save for {{ user.username }}</button>
|
||
<button type="button" onclick="fillAll('06:00','19:00')" class="px-4 py-2 rounded-lg border border-slate-700 hover:border-slate-500">Quick-fill 06:00–19:00</button>
|
||
<button type="button" onclick="setAllOff()" class="px-4 py-2 rounded-lg border border-slate-700 hover:border-slate-500">Set All Off</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<script>
|
||
function fillAll(s,e){
|
||
const days = ['mon','tue','wed','thu','fri','sat','sun'];
|
||
days.forEach(d=>{
|
||
document.querySelector(`input[name="${d}_avail"]`).checked = true;
|
||
document.querySelector(`input[name="${d}_start"]`).value = s;
|
||
document.querySelector(`input[name="${d}_end"]`).value = e;
|
||
});
|
||
}
|
||
function setAllOff(){
|
||
const days = ['mon','tue','wed','thu','fri','sat','sun'];
|
||
days.forEach(d=>{
|
||
document.querySelector(`input[name="${d}_avail"]`).checked = false;
|
||
document.querySelector(`input[name="${d}_start"]`).value = '08:00';
|
||
document.querySelector(`input[name="${d}_end"]`).value = '17:00';
|
||
});
|
||
}
|
||
</script>
|
||
{% endif %}
|
||
</section>
|