fix(frontend): fix slot deprecation and a11y label warnings

This commit is contained in:
2026-04-28 19:22:30 +02:00
parent 74255f23ac
commit 19f2b5ae7f
3 changed files with 20 additions and 17 deletions

View File

@@ -1,4 +1,5 @@
<script lang="ts">
import type { Snippet } from 'svelte';
import { token, logout } from '$lib/auth';
import { goto } from '$app/navigation';
import { page } from '$app/stores';
@@ -7,6 +8,8 @@
import TutorShell from '$lib/components/TutorShell.svelte';
import type { Course } from '$lib/types';
const { children }: { children: Snippet } = $props();
let course = $state<Course | null>(null);
onMount(async () => {
@@ -39,7 +42,7 @@
semester={course?.semester ?? ''}
>
{#snippet children()}
<slot />
{@render children()}
{/snippet}
</TutorShell>
{/if}

View File

@@ -44,12 +44,12 @@
</div>
<form onsubmit={createCourse} style="padding:16px 18px;display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end">
<div style="display:flex;flex-direction:column;gap:4px">
<label class="tiny" style="color:var(--ink-3)">Kursname</label>
<input class="input" bind:value={newCourseName} placeholder="z.B. Funktionale Programmierung" style="width:260px" required />
<label for="course-name" class="tiny" style="color:var(--ink-3)">Kursname</label>
<input id="course-name" class="input" bind:value={newCourseName} placeholder="z.B. Funktionale Programmierung" style="width:260px" required />
</div>
<div style="display:flex;flex-direction:column;gap:4px">
<label class="tiny" style="color:var(--ink-3)">Semester</label>
<input class="input" bind:value={newCourseSemester} placeholder="z.B. SS2026" style="width:120px" required />
<label for="course-semester" class="tiny" style="color:var(--ink-3)">Semester</label>
<input id="course-semester" class="input" bind:value={newCourseSemester} placeholder="z.B. SS2026" style="width:120px" required />
</div>
<button class="btn" type="submit"><Icon name="plus" size={12} /> Kurs anlegen</button>
</form>

View File

@@ -96,12 +96,12 @@
</div>
<form onsubmit={createSession} style="padding:16px 18px;display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end">
<div style="display:flex;flex-direction:column;gap:4px">
<label class="tiny" style="color:var(--ink-3)">Woche #</label>
<input class="input" type="number" bind:value={weekNr} min="1" style="width:80px" />
<label for="session-week" class="tiny" style="color:var(--ink-3)">Woche #</label>
<input id="session-week" class="input" type="number" bind:value={weekNr} min="1" style="width:80px" />
</div>
<div style="display:flex;flex-direction:column;gap:4px">
<label class="tiny" style="color:var(--ink-3)">Datum</label>
<input class="input" type="date" bind:value={date} />
<label for="session-date" class="tiny" style="color:var(--ink-3)">Datum</label>
<input id="session-date" class="input" type="date" bind:value={date} />
</div>
<button class="btn" type="submit"><Icon name="plus" size={12} /> Sitzung anlegen</button>
</form>
@@ -182,12 +182,12 @@
<form onsubmit={createSlot} style="margin-top:18px;display:flex;flex-direction:column;gap:12px">
<div style="display:flex;flex-direction:column;gap:4px">
<label class="tiny" style="color:var(--ink-3)">Tutor-ID</label>
<input class="input" type="number" bind:value={slotTutorId} placeholder="1" required />
<label for="slot-tutor" class="tiny" style="color:var(--ink-3)">Tutor-ID</label>
<input id="slot-tutor" class="input" type="number" bind:value={slotTutorId} placeholder="1" required />
</div>
<div style="display:flex;flex-direction:column;gap:4px">
<label class="tiny" style="color:var(--ink-3)">Raum (optional)</label>
<select class="input" bind:value={slotRoomId}>
<label for="slot-room" class="tiny" style="color:var(--ink-3)">Raum (optional)</label>
<select id="slot-room" class="input" bind:value={slotRoomId}>
<option value={null}>Kein Raum</option>
{#each rooms as room}
<option value={room.id}>{room.name}</option>
@@ -196,12 +196,12 @@
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
<div style="display:flex;flex-direction:column;gap:4px">
<label class="tiny" style="color:var(--ink-3)">Beginn</label>
<input class="input" type="time" bind:value={startTime} />
<label for="slot-start" class="tiny" style="color:var(--ink-3)">Beginn</label>
<input id="slot-start" class="input" type="time" bind:value={startTime} />
</div>
<div style="display:flex;flex-direction:column;gap:4px">
<label class="tiny" style="color:var(--ink-3)">Ende</label>
<input class="input" type="time" bind:value={endTime} />
<label for="slot-end" class="tiny" style="color:var(--ink-3)">Ende</label>
<input id="slot-end" class="input" type="time" bind:value={endTime} />
</div>
</div>
<div style="display:flex;gap:8px;justify-content:flex-end;margin-top:4px">