95 lines
3.4 KiB
HTML
95 lines
3.4 KiB
HTML
<app-school-transfer (imported)="load()" />
|
||
<div class="page-heading">
|
||
<div>
|
||
<p class="eyebrow">JOUW ORGANISATIE</p>
|
||
<h1>Alle ruimte om te dansen.</h1>
|
||
<p class="lede">Van de eerste les tot het grote podium. Beheer je dansschool op één plek.</p>
|
||
</div>
|
||
<button type="button" class="button primary" (click)="editor.set(true)">
|
||
<span aria-hidden="true">＋</span> Dansschool toevoegen
|
||
</button>
|
||
</div>
|
||
@if (notice()) {
|
||
<div class="alert success" role="status">
|
||
{{ notice()
|
||
}}<button type="button" aria-label="Melding sluiten" (click)="notice.set('')">×</button>
|
||
</div>
|
||
}
|
||
@if (loading()) {
|
||
<div class="loading-state" role="status"><span class="spinner"></span> Dansscholen laden…</div>
|
||
} @else if (error()) {
|
||
<div class="alert error" role="alert">
|
||
<p>{{ error() }}</p>
|
||
<button class="button secondary" type="button" (click)="load()">Opnieuw proberen</button>
|
||
</div>
|
||
} @else {
|
||
<div class="stats-grid">
|
||
<div class="stat">
|
||
<span class="stat-label">Dansscholen</span><strong>{{ schools().length }}</strong
|
||
><span class="stat-caption">Een plek voor iedere danser</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-label">Dansers</span><strong>{{ totalDancers() }}</strong
|
||
><span class="stat-caption">Samen in beweging</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-label">Dansgroepen</span><strong>{{ totalGroups() }}</strong
|
||
><span class="stat-caption">Ieder met een eigen ritme</span>
|
||
</div>
|
||
</div>
|
||
<div class="section-heading">
|
||
<h2>
|
||
Mijn dansscholen <span class="count-badge">{{ schools().length }}</span>
|
||
</h2>
|
||
<span class="muted">Selecteer een school om aan de slag te gaan</span>
|
||
</div>
|
||
<div class="school-grid">
|
||
@for (school of schools(); track school.id) {
|
||
<a class="school-card" [routerLink]="['/schools', school.id, 'overview']">
|
||
<div class="card-top">
|
||
<span aria-hidden="true" class="avatar">{{ school.name.charAt(0).toUpperCase() }}</span
|
||
><span class="round-arrow" aria-hidden="true">↗</span>
|
||
</div>
|
||
<h3>{{ school.name }}</h3>
|
||
<p>Dansschool</p>
|
||
<div class="card-meta">
|
||
<span
|
||
><strong>{{ school.dancerIds.length }}</strong> dansers</span
|
||
><span
|
||
><strong>{{ school.danceGroupIds.length }}</strong> groepen</span
|
||
><span
|
||
><strong>{{ school.showIds.length }}</strong> shows</span
|
||
>
|
||
</div>
|
||
<div class="card-link">Dansschool beheren <span aria-hidden="true">→</span></div>
|
||
</a>
|
||
} @empty {
|
||
<div class="empty-state full-width">
|
||
<span class="empty-symbol" aria-hidden="true">✳</span>
|
||
<h2>Hier begint jouw dansschool</h2>
|
||
<p>Maak een school aan en geef je dansers, groepen en shows een thuis.</p>
|
||
<button class="button primary" type="button" (click)="editor.set(true)">
|
||
Eerste dansschool aanmaken
|
||
</button>
|
||
</div>
|
||
}
|
||
</div>
|
||
<aside class="tip-panel">
|
||
<span class="tip-icon" aria-hidden="true">✦</span>
|
||
<div>
|
||
<h3>Van studio naar spotlight</h3>
|
||
<p>
|
||
Voeg je dansers toe, stel groepen samen en maak alvast een show aan. Zo bouw je stap voor
|
||
stap aan je volgende optreden.
|
||
</p>
|
||
</div>
|
||
</aside>
|
||
}
|
||
@if (editor()) {
|
||
<app-entity-editor
|
||
[target]="{ kind: 'school' }"
|
||
(closed)="editor.set(false)"
|
||
(saved)="created()"
|
||
/>
|
||
}
|