89 lines
3.2 KiB
Svelte
89 lines
3.2 KiB
Svelte
<script lang="ts">
|
||
import { Button } from "$lib/components/ui/button/index.js";
|
||
import { rota, steps } from "../../state.svelte.js";
|
||
|
||
function getResidentName(day: number, slot: number) {
|
||
const assignedResidents = rota.residents.filter((resident) =>
|
||
resident.manualShifts.some(
|
||
(shift) =>
|
||
shift.day === day &&
|
||
shift.month === rota.selectedMonth &&
|
||
shift.year === rota.selectedYear
|
||
)
|
||
);
|
||
|
||
const resident = assignedResidents[slot - 1];
|
||
return resident ? resident.name : "-";
|
||
}
|
||
|
||
// 2 slots in odd days, 1 slot in even days
|
||
function getRequiredSlots(day: number) {
|
||
return day % 2 === 0 ? 1 : 2;
|
||
}
|
||
</script>
|
||
|
||
<div class="mb-6 flex items-center justify-between">
|
||
<h2 class="text-2xl font-bold text-zinc-800">{steps[rota.currentStep - 1].title}</h2>
|
||
<div class="justify-end">
|
||
<Button
|
||
onclick={() => (rota.currentStep -= 1)}
|
||
variant="outline"
|
||
class="border-zinc-200 bg-white text-zinc-600 shadow-sm transition-all hover:bg-zinc-50 hover:text-zinc-900 active:scale-95"
|
||
>
|
||
Προηγούμενο
|
||
</Button>
|
||
|
||
<Button
|
||
onclick={() => (rota.currentStep += 1)}
|
||
variant="outline"
|
||
class="border-zinc-200 bg-white text-zinc-600 shadow-sm transition-all hover:bg-zinc-50 hover:text-zinc-900 active:scale-95"
|
||
>
|
||
Επόμενο
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<header class="mb-2">
|
||
<p class="text-sm text-zinc-500">{steps[rota.currentStep - 1].description}</p>
|
||
</header>
|
||
|
||
<div class="overflow-hidden rounded-xl border border-zinc-200 bg-white">
|
||
<div class="grid grid-cols-7 border-b border-zinc-200 bg-zinc-50/50">
|
||
{#each ["ΔΕΥΤΕΡΑ", "ΤΡΙΤΗ", "ΤΕΤΑΡΤΗ", "ΠΕΜΠΤΗ", "ΠΑΡΑΣΚΕΥΗ", "ΣΑΒΒΑΤΟ", "ΚΥΡΙΑΚΗ"] as dayName}
|
||
<div class="py-2 text-center text-[10px] font-bold tracking-widest text-zinc-500 uppercase">
|
||
{dayName}
|
||
</div>
|
||
{/each}
|
||
</div>
|
||
<div class="grid auto-rows-fr grid-cols-7 gap-px bg-zinc-200">
|
||
{#each rota.emptySlots as _}<div class="bg-zinc-50/30"></div>{/each}
|
||
{#each rota.daysArray as day (day)}
|
||
{@const slotCount = getRequiredSlots(day)}
|
||
<div class="group min-h-25 bg-white p-2 transition-all hover:bg-blue-50/30">
|
||
<div class="mb-2 flex items-center justify-between">
|
||
<span class="text-xs font-black text-zinc-500">{day}</span>
|
||
</div>
|
||
|
||
<div class="space-y-1">
|
||
{#if slotCount > 0}
|
||
<button
|
||
onclick={() => "handleCellClick(day, 1)"}
|
||
class="w-full overflow-hidden rounded border border-pink-200 bg-pink-50 px-1.5 py-1 text-left text-[10px] font-bold text-pink-600 transition-colors hover:bg-pink-100"
|
||
>
|
||
{getResidentName(day, 1)}
|
||
</button>
|
||
{/if}
|
||
{#if slotCount == 2}
|
||
<button
|
||
onclick={() => "handleCellClick(day, 2)"}
|
||
class="w-full overflow-hidden rounded border border-emerald-200 bg-emerald-50 px-1.5 py-1 text-left text-[10px] font-bold text-emerald-600 transition-colors hover:bg-emerald-100"
|
||
>
|
||
{getResidentName(day, 2)}
|
||
</button>
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
{/each}
|
||
</div>
|
||
</div>
|