PHP-App-Timekeeping/ui/src/routes/WorkingHours.svelte

<script>
    export let params;
    let title = "Bearbeitung Einträge"
    import IconifyIcon from '@iconify/svelte';
    import wrenchIcon from '@iconify-icons/oi/wrench';
    import checkIcon from '@iconify-icons/oi/check';
    import xIcon from '@iconify-icons/oi/x';
    import documentIcon from '@iconify-icons/oi/document';
    let activeRecord = null;
    let newRecord = false;
    params = {
        title: 'Einträge',
        records: [],
        isLoading: true
    }
    const Records = {
        'browse': () => {
            // noinspection JSUnresolvedVariable
            fetch(env.API_URL + '/working-hours')
                .then(res => {
                    if (!res.ok) {
                        throw new Error('Fail!');
                    }
                    return res.json();
                })
                .then(data => {
                    Controller.cancelActiveRecord();
                    params.records = data;
                    params.isLoading = false;
                })
                .catch(err => {
                    params.isLoading = false;
                    console.log(err);
                });
        },
        'read': date => {
            // noinspection JSUnresolvedVariable
            fetch(env.API_URL + '/working-hours/' + date)
                .then(res => {
                    if (!res.ok) {
                        throw new Error('Fail!');
                    }
                    return res.json();
                })
                .then(data => {
                    activeRecord = data;
                    if (date === null) {
                        Controller.listRecords();
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        'add': async record => {
            console.log(record);
            // noinspection JSUnresolvedVariable
            await fetch(env.API_URL + '/working-hours', {
                method: 'POST',
                mode: 'cors',
                cache: 'no-cache',
                credentials: 'omit',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(record)
            })
                .then(res => {
                    if (!res.ok) {
                        throw new Error('Fail!');
                    }
                })
                .then(() => {
                    Controller.listRecords();
                })
                .catch(err => {
                    console.log(err);
                });
        },
        'update': async (date, record) => {
            console.log(record);
            // noinspection JSUnresolvedVariable
            await fetch(env.API_URL + '/working-hours/' + date, {
                method: 'PUT',
                mode: 'cors',
                cache: 'no-cache',
                credentials: 'omit',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(record)
            })
                .then(res => {
                    if (!res.ok) {
                        throw new Error('Fail!');
                    }
                })
                .then(() => {
                    Controller.listRecords();
                })
                .catch(err => {
                    console.log(err);
                });
        }
    };
    const Controller = {
        'listRecords': () => {
            Controller.cancelActiveRecord();
            Records.browse();
        },
        'newRecord': () => {
            activeRecord = {workingTime: '00:00:00'};
            newRecord = true;
        },
        'saveRecord': () => {
            if (newRecord === true) {
                Records.add(activeRecord);
            } else {
                Records.update(activeRecord.workingDay, activeRecord);
            }
        },
        'selectActiveRecord': record => Records.read(record.workingDay),
        'cancelActiveRecord': () => {
            activeRecord = null;
            newRecord = false;
        }
    };
    const initSite = () => {
        Controller.listRecords()
    };
    initSite()
</script>

<svelte:head>
    <title>{title}</title>
</svelte:head>

{#if activeRecord === null}
    <section id="list-records">
        <header>
            <h1>{title}</h1>
        </header>
        <article>
            {#if params.isLoading === true}
                <p>Loading...</p>
            {:else}
                <!--suppress HtmlUnknownTarget -->
                <form action="/working-hours">
                    <fieldset>
                        <button on:click={Controller.newRecord} type="button">Neuer Eintrag
                            <IconifyIcon icon={documentIcon}/>
                        </button>
                    </fieldset>
                </form>
                <table>
                    <colgroup>
                        <col />
                        <col />
                        <col />
                    </colgroup>
                    <thead>
                    <tr>
                        <th>Datum</th>
                        <th>Arbeitsstunden</th>
                        <th>Aktionen</th>
                    </tr>
                    </thead>
                    <tbody>
                    {#each params.records as record}
                        <tr>
                            <td>{record.workingDay}</td>
                            <td>{record.workingTime}</td>
                            <td>
                                <button on:click={() => Controller.selectActiveRecord(record)} type="button">Bearbeiten
                                    <IconifyIcon icon={wrenchIcon}/>
                                </button>
                            </td>
                        </tr>
                    {/each}
                    </tbody>
                </table>
            {/if}
        </article>
    </section>
{:else}
    <section id="edit-record">
        <header>
            <h1>{title}</h1>
        </header>
        <article>
            <!--suppress HtmlUnknownTarget -->
            <form action="/working-hours" name="editRecord">
                <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>
                <fieldset name="buttons">
                    <button on:click={Controller.saveRecord} type="button">Übernehmen
                        <IconifyIcon icon={checkIcon} color="green"/>
                    </button>
                    <button on:click={Controller.cancelActiveRecord} type="button" class="sub-button">Abbrechen
                        <IconifyIcon icon={xIcon}/>
                    </button>
                </fieldset>
            </form>
        </article>
    </section>
{/if}