2022-02-28 16:04:31 +01:00
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}
@@ -1,17 +0,0 @@
 <script>
    export let activeRecord
 </script>
 <fieldset name="record-data">
    <div>
        <label for="workingDay">Arbeitstag</label>
        <input bind:value={activeRecord.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={activeRecord.workingTime} placeholder="Arbeitszeit" type="time"
               id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
    </div>
 </fieldset>