108 lines
3.8 KiB
Svelte
108 lines
3.8 KiB
Svelte
<script>
|
|
import IconifyIcon from '@iconify/svelte'
|
|
import checkIcon from "@iconify-icons/oi/check";
|
|
import xIcon from "@iconify-icons/oi/x";
|
|
import {goto} from "$app/navigation";
|
|
const TITLE = "Erstellung neuer Einträge für eine Woche"
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>{TITLE}</title>
|
|
</svelte:head>
|
|
|
|
<style>
|
|
tbody.weekend td input, tbody.weekend td {
|
|
color: red;
|
|
}
|
|
tbody.weekend label {
|
|
color: initial;
|
|
}
|
|
|
|
section form fieldset div input {
|
|
display: inline-block;
|
|
padding: 0.25rem;
|
|
border-style: solid;
|
|
border-width: thin;
|
|
}
|
|
|
|
section form fieldset div input[type=checkbox] {
|
|
display: inline-block;
|
|
width: auto;
|
|
margin: 0 1rem 1.0rem;
|
|
}
|
|
</style>
|
|
|
|
|
|
<section id="edit-record">
|
|
<header>
|
|
<h1>{TITLE}</h1>
|
|
</header>
|
|
<article>
|
|
<form action="/working-hours?/create-by-week" name="newRecord" method="POST">
|
|
<fieldset name="how-week-is-use">
|
|
<div>
|
|
<label for="monday">Woche vom</label>
|
|
<input name="week" type="date" id="week" required value="">
|
|
</div>
|
|
</fieldset>
|
|
<fieldset name="record-data-by-week">
|
|
<div>
|
|
<table>
|
|
<tbody>
|
|
{#each ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag'] as day}
|
|
<tr>
|
|
<td>
|
|
{day}
|
|
</td>
|
|
<td>
|
|
<input name="{day}[time]" value="08:00:00" type="time" step="1"
|
|
required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
</td>
|
|
<td>
|
|
<label>wurde zu Hause gearbeitet?
|
|
<input name="{day}[isHomeOffice]" type="checkbox">
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
<tbody class="weekend">
|
|
{#each ['Samstag', 'Sontag'] as day}
|
|
<tr>
|
|
<td>
|
|
{day}
|
|
</td>
|
|
<td>
|
|
<input name="{day}[time]" value="00:00:00" type="time" step="1"
|
|
required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
</td>
|
|
<td>
|
|
<label>wurde zu Hause gearbeitet?
|
|
<input name="{day}[isHomeOffice]" type="checkbox">
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset name="buttons">
|
|
<button type="submit">Übernehmen und Weiter
|
|
<IconifyIcon icon={checkIcon} color="green"/>
|
|
</button>
|
|
<button type="button" class="sub-button" onclick={() => goto('/working-hours')}>Abbrechen
|
|
<IconifyIcon icon={xIcon}/>
|
|
</button>
|
|
</fieldset>
|
|
</form>
|
|
</article>
|
|
</section> |