Feature: Die Einträge werden als Liste bereitgestellt

Dadurch kann auch eine ganze Woche eingetragen werden.
This commit is contained in:
2022-02-24 16:26:00 +01:00
parent 47ed408185
commit 0a21c6ed35
3 changed files with 85 additions and 17 deletions
@@ -0,0 +1,23 @@
<script>
export let activeRecordList = []
export let makeTimekeepingList = () => {}
makeTimekeepingList()
</script>
{#if activeRecordList.length < 1}
<p>Loading...</p>
{:else}
<fieldset name="record-data-by-day">
<div>
<label for="workingDay">Arbeitstag</label>
<input bind:value={activeRecordList[0].workingDay} type="date"
id="workingDay" required pattern="\d\{4}-[0-1]\d-[0-3]\d\">
</div>
<div>
<label for="workingTime">Arbeitszeit</label>
<input bind:value={activeRecordList[0].workingTime} placeholder="Arbeitszeit" type="time"
id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
</div>
</fieldset>
{/if}
@@ -0,0 +1,62 @@
<script>
export let activeDate = null
export let activeRecordList = []
export let makeTimekeepingList = () => {}
makeTimekeepingList()
</script>
<style>
tbody.weekend td input, tbody.weekend td {
color: red;
}
input#monday {
display: inline;
width: auto;
}
</style>
{#if activeRecordList.length < 1}
<p>Loading...</p>
{:else}
<fieldset name="how-week-is-use">
<div>
<label for="monday">Woche vom</label>
<input bind:value={activeDate} type="date" on:change={makeTimekeepingList}
id="monday" required pattern="\d\{4}-[0-1]\d-[0-3]\d\">
</div>
</fieldset>
<fieldset name="record-data-by-week">
<div>
<table>
<tbody>
{#each ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag'] as day, index}
<tr>
<td>
{day}
</td>
<td>
<input bind:value={activeRecordList[index].workingTime} placeholder="Arbeitszeit" type="time"
required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
</td>
</tr>
{/each}
</tbody>
<tbody class="weekend">
{#each ['Samstag', 'Sontag'] as day, index}
<tr>
<td>
{day}
</td>
<td>
<input bind:value={activeRecordList[index+5].workingTime} placeholder="Arbeitszeit" type="time"
required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
</td>
</tr>
{/each}
</tbody>
</table>
</div>
</fieldset>
{/if}