216 lines
8.4 KiB
Svelte
216 lines
8.4 KiB
Svelte
<script lang="ts">
|
||
import Basic from "./components/configurations/basic.svelte";
|
||
import Residents from "./components/configurations/residents.svelte";
|
||
import Advanced from "./components/configurations/advanced.svelte";
|
||
import { EngineStatus, rota, steps } from "./state.svelte.js";
|
||
import Generate from "./components/schedule/generate.svelte";
|
||
</script>
|
||
|
||
<main
|
||
class="bg-zinc-200/ grid h-screen w-full grid-cols-5 overflow-hidden font-sans tracking-tight antialiased"
|
||
>
|
||
<aside
|
||
class="col-span-1 flex flex-col border-r border-zinc-200 bg-zinc-50/50 font-sans antialiased"
|
||
>
|
||
<div class="flex justify-center p-2 font-sans">
|
||
<h1 class="text-xl font-black tracking-tighter text-slate-900 uppercase">
|
||
Rota <span class="text-emerald-600">Scheduler</span>
|
||
</h1>
|
||
</div>
|
||
<div class="h-px w-full bg-zinc-200"></div>
|
||
|
||
<nav class="relative flex flex-col p-4">
|
||
<div class="flex flex-col gap-2">
|
||
{#each steps as step}
|
||
<button
|
||
onclick={() => (rota.currentStep = step.id)}
|
||
class="group relative z-10 flex items-center gap-4 rounded-xl p-4 transition-all
|
||
{rota.currentStep === step.id ? 'bg-zinc-200/80 shadow-inner' : 'hover:bg-zinc-100/50'}"
|
||
>
|
||
<div
|
||
class="flex size-8 items-center justify-center rounded-lg transition-all duration-300
|
||
{rota.currentStep === step.id
|
||
? 'bg-slate-800 text-white shadow-md'
|
||
: rota.currentStep > step.id
|
||
? 'bg-emerald-600 text-white'
|
||
: 'border border-zinc-200 bg-white text-zinc-400'}"
|
||
>
|
||
{#if rota.currentStep > step.id}
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
class="size-4"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke="currentColor"
|
||
stroke-width="3"
|
||
>
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
{:else}
|
||
<span class="text-xs font-bold">{step.id}</span>
|
||
{/if}
|
||
</div>
|
||
|
||
<div class="flex flex-col items-start">
|
||
<span
|
||
class="text-[10px] font-bold tracking-widest uppercase
|
||
{rota.currentStep === step.id ? 'text-zinc-600' : 'text-zinc-400'}"
|
||
>
|
||
ΒΗΜΑ {step.id}
|
||
</span>
|
||
<span
|
||
class="text-sm font-bold tracking-tight
|
||
{rota.currentStep === step.id ? 'text-zinc-900' : 'text-zinc-500'}"
|
||
>
|
||
{step.title}
|
||
</span>
|
||
</div>
|
||
</button>
|
||
{/each}
|
||
</div>
|
||
</nav>
|
||
|
||
{#if rota.metrics.length > 0}
|
||
<div class="h-px w-full bg-zinc-200"></div>
|
||
<div class="flex flex-col py-4">
|
||
<p class="px-6 pb-2 text-[10px] font-black tracking-widest text-zinc-400 uppercase">
|
||
Δικαιωσυνη
|
||
</p>
|
||
<div class="w-full overflow-hidden px-2 text-[10px]">
|
||
<table class="w-full">
|
||
<thead>
|
||
<tr class="border-b border-zinc-300 bg-zinc-50">
|
||
<th
|
||
class="border-r border-zinc-300 px-2 py-1 text-left font-bold text-zinc-500 uppercase last:border-r-0"
|
||
>Ειδικευομενος</th
|
||
>
|
||
<th
|
||
class="border-r border-zinc-300 px-1 py-1 text-center font-bold text-zinc-500 last:border-r-0"
|
||
>ΣΥΝ</th
|
||
>
|
||
<th
|
||
class="border-r border-zinc-300 px-1 py-1 text-center font-bold text-zinc-500 last:border-r-0"
|
||
>Α1</th
|
||
>
|
||
<th
|
||
class="border-r border-zinc-300 px-1 py-1 text-center font-bold text-zinc-500 last:border-r-0"
|
||
>Α2</th
|
||
>
|
||
<th
|
||
class="border-r border-zinc-300 px-1 py-1 text-center font-bold text-zinc-500 last:border-r-0"
|
||
>Κ</th
|
||
>
|
||
<th
|
||
class="border-r border-zinc-300 px-1 py-1 text-center font-bold text-zinc-500 last:border-r-0"
|
||
>ΣΚ/Α</th
|
||
>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{#each rota.metrics as m}
|
||
<tr class="border-b border-zinc-200 last:border-0 hover:bg-zinc-50">
|
||
<td
|
||
class="border-r border-zinc-200 px-2 py-1 font-medium text-zinc-700 last:border-r-0"
|
||
>{m.name}</td
|
||
>
|
||
<td
|
||
class="border-r border-zinc-200 px-1 py-1 text-center font-bold text-zinc-800 last:border-r-0"
|
||
>{m.total}</td
|
||
>
|
||
<td
|
||
class="border-r border-zinc-200 px-1 py-1 text-center text-zinc-500 last:border-r-0"
|
||
>{m.open_first}</td
|
||
>
|
||
<td
|
||
class="border-r border-zinc-200 px-1 py-1 text-center text-zinc-500 last:border-r-0"
|
||
>{m.open_second}</td
|
||
>
|
||
<td
|
||
class="border-r border-zinc-200 px-1 py-1 text-center text-zinc-500 last:border-r-0"
|
||
>{m.closed}</td
|
||
>
|
||
<td
|
||
class="border-r border-zinc-200 px-1 py-1 text-center text-zinc-500 last:border-r-0"
|
||
>{m.holiday}</td
|
||
>
|
||
</tr>
|
||
{/each}
|
||
</tbody>
|
||
<tfoot>
|
||
<tr class="border-t border-zinc-300 bg-zinc-50">
|
||
<th
|
||
class="border-r border-zinc-300 px-2 py-1 text-left font-bold text-zinc-500 uppercase last:border-r-0"
|
||
>Συνολο</th
|
||
>
|
||
<th
|
||
class="border-r border-zinc-300 px-1 py-1 text-center font-bold text-zinc-500 last:border-r-0"
|
||
>{rota.metrics.reduce((s, m) => s + m.total, 0)}</th
|
||
>
|
||
<th
|
||
class="border-r border-zinc-300 px-1 py-1 text-center font-bold text-zinc-500 last:border-r-0"
|
||
>{rota.metrics.reduce((s, m) => s + m.open_first, 0)}</th
|
||
>
|
||
<th
|
||
class="border-r border-zinc-300 px-1 py-1 text-center font-bold text-zinc-500 last:border-r-0"
|
||
>{rota.metrics.reduce((s, m) => s + m.open_second, 0)}</th
|
||
>
|
||
<th
|
||
class="border-r border-zinc-300 px-1 py-1 text-center font-bold text-zinc-500 last:border-r-0"
|
||
>{rota.metrics.reduce((s, m) => s + m.closed, 0)}</th
|
||
>
|
||
<th
|
||
class="border-r border-zinc-300 px-1 py-1 text-center font-bold text-zinc-500 last:border-r-0"
|
||
>{rota.metrics.reduce((s, m) => s + m.holiday, 0)}</th
|
||
>
|
||
</tr>
|
||
</tfoot>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
{/if}
|
||
|
||
<div class="mt-auto h-px w-full bg-zinc-200"></div>
|
||
<div class="space-y-4 p-4">
|
||
<div
|
||
class="border-l-2 py-2 pl-3 transition-colors
|
||
{rota.engineStatus === EngineStatus.Running
|
||
? 'border-amber-400'
|
||
: rota.engineStatus === EngineStatus.Success
|
||
? 'border-emerald-500'
|
||
: rota.engineStatus === EngineStatus.Error
|
||
? 'border-red-500'
|
||
: 'border-zinc-300'}"
|
||
>
|
||
<div class="mb-2 flex items-center gap-2">
|
||
<span class="text-[10px] font-black tracking-widest text-zinc-400 uppercase"
|
||
>ΚΑΤΑΣΤΑΣΗ ΜΗΧΑΝΗΣ</span
|
||
>
|
||
</div>
|
||
|
||
<div class="flex flex-col gap-1">
|
||
<span class="text-[11px] font-bold text-zinc-800 uppercase">
|
||
{rota.engineStatus}
|
||
</span>
|
||
<p class="text-[10px] leading-tight font-medium text-zinc-500">
|
||
{rota.lastMessage}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<section class="col-span-4 flex flex-col overflow-y-auto p-12">
|
||
<div class="mx-auto w-full max-w-2xl">
|
||
{#if rota.currentStep === 1}
|
||
<Basic />
|
||
{:else if rota.currentStep === 2}
|
||
<Residents />
|
||
{:else if rota.currentStep === 3}
|
||
<Advanced />
|
||
{:else if rota.currentStep === 4}
|
||
<Generate />
|
||
{/if}
|
||
</div>
|
||
</section>
|
||
</main>
|