Merge branch 'master' into feature-ui/eintrag-per-woche

# Conflicts: # ui/src/components/Repositories.svelte # ui/src/routes/WorkingHours.svelte
2022-01-10 15:56:56 +01:00
parent d13fce569b ea93400135
commit 77cfcc72b4
11 changed files with 712 additions and 244 deletions
@@ -1,28 +1,10 @@
 <script context="module">
    const MyFetch = {
        'post': async (rest_url, request_body) => {
-            return MyFetch._fetch(rest_url, {
-                method: 'POST',
-                mode: 'cors',
-                cache: 'no-cache',
-                credentials: 'omit',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: request_body,
-            }, {})
+            return MyFetch._fetch(rest_url, MyFetch._buildRequestOptions(request_body), {})
        },
        'put': async (rest_url, http_body) => {
-            return MyFetch._fetch(rest_url, {
-                method: 'PUT',
-                mode: 'cors',
-                cache: 'no-cache',
-                credentials: 'omit',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: http_body,
-            }, {})
+            return MyFetch._fetch(rest_url, MyFetch._buildRequestOptions(http_body, true), {})
        },
        'get': async (rest_url, query_parameters) => {
            if (query_parameters !== null) {
@@ -38,34 +20,84 @@
        },
        '_fetch': async (rest_url, request_options) => {
            // noinspection JSUnresolvedVariable
-            let response = await fetch(env.API_URL + rest_url, request_options).catch(err => {
+            let response = await MyFetch._pureFetch(rest_url, request_options)
+            if (!response.ok) {
+                throw new Error('Fail!')
+            }
+            return response.json()
+        },
+        '_buildRequestOptions': (request_body, needPut) => {
+            return {
+                method: (needPut === true) ? 'PUT' : 'POST',
+                mode: 'cors',
+                cache: 'no-cache',
+                credentials: 'omit',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: request_body,
+            }
+        },
+        '_pureFetch': async (rest_url, request_options) => {
+            // noinspection JSUnresolvedVariable
+            return await fetch(env.API_URL + rest_url, request_options).catch(err => {
                console.error(err)
                return null
            })
-            if (!response.ok) {
+        }
+    }
+
+    export const WorkingHoursRepository = {
+        'browse': () => {
+            return MyFetch.get('/working-hours')
+        },
+
+        'read': date => {
+            return MyFetch.get('/working-hours/' + date)
+        },
+
+        'readOrNew': async date => {
+            let response = await MyFetch._pureFetch('/working-hours/' + date)
+            if (response.status === 404) {
+                return {workingTime: '00:00:00', workingDay: date}
+            } else if (!response.ok) {
+                throw new Error('Fail!')
+            }
+            return response.json()
+        },
+
+        'add': async (record) => {
+            console.debug(record);
+            return MyFetch.post('/working-hours', JSON.stringify(record))
+        },
+
+        'update': async (date, record) => {
+            console.debug(record);
+            return MyFetch.put('/working-hours/' + date, JSON.stringify(record))
+        },
+
+        'addOrUpdate': async (date, record) => {
+            console.debug(record);
+            let request_options = MyFetch._buildRequestOptions(JSON.stringify(record))
+            let response = await MyFetch._pureFetch('/working-hours', request_options)
+            if (response.status === 409) {
+                return WorkingHoursRepository.update(date, record)
+            } else if (!response.ok) {
                throw new Error('Fail!')
            }
            return response.json()
        }
    }

-    export class WorkingHoursRepository {
-        static 'browse'() {
-            return MyFetch.get('/working-hours')
-        }
-
-        static 'read'(date) {
-            return MyFetch.get('/working-hours/' + date)
-        }
-
-        static async 'add'(record) {
-            console.debug(record);
-            return MyFetch.post('/working-hours', JSON.stringify(record))
-        }
-
-        static async 'update'(date, record) {
-            console.debug(record);
-            return MyFetch.put('/working-hours/' + date, JSON.stringify(record))
-        }
+    export const WorkingHoursViewsRepository = {
+        'weekly': async () => {
+            return MyFetch.get('/views/working-hours/weekly')
+        },
+        'monthly': async () => {
+            return MyFetch.get('/views/working-hours/monthly')
+        },
+        'yearly': async () => {
+            return MyFetch.get('/views/working-hours/yearly')
+        },
    }
 </script>
@@ -0,0 +1,15 @@
+<script context="module">
+    export class TimekeepingDate extends Date {
+        getDateString() {
+            return this.getFullYear() + "-"
+            + (this.getMonth() + 1).toString().padStart(2, '0') + "-"
+            + this.getDate().toString().padStart(2, '0')
+        }
+
+        getNextDay() {
+            let nextDay = new TimekeepingDate(this);
+            nextDay.setDate(this.getDate() + 1)
+            return nextDay
+        }
+    }
+</script>
@@ -1,31 +1,11 @@
 <script>
    import Views from "./Views.svelte";
-    export let params;
+    import {WorkingHoursViewsRepository} from "../components/Repositories.svelte";
+    export let params
    params = {
        title: 'Monatsansicht',
-        records: [],
-        isLoading: true
+        promise: WorkingHoursViewsRepository.monthly()
    }
-    const View = {
-        'browse': () => {
-            fetch(env.API_URL + '/views/working-hours/monthly')
-                .then(res => {
-                    if (!res.ok) {
-                        throw new Error('Fail!');
-                    }
-                    return res.json();
-                })
-                .then(data => {
-                    params.records = data;
-                    params.isLoading = false;
-                })
-                .catch(err => {
-                    params.isLoading = false;
-                    console.log(err);
-                });
-        }
-    };
-    View.browse();
 </script>

 <Views {params} />
@@ -1,5 +1,7 @@
 <script>
-    export let params;
+    export let params = {};
+    let records = []
+    let isLoading = true
    console.log(params)
    if (!String.prototype.startsWith) {
        String.prototype.startsWith = function(searchString, position) {
@@ -9,6 +11,12 @@
    }
    $: isNegative = time => time.startsWith('-') ? 'absence-time' : '';
    $: cutMinusChar = time => time.startsWith('-') ? time.substr(1) : time;
+
+    const init = async () => await params.promise.then(data => {
+        records = data
+        isLoading = false
+    })
+    init()
 </script>

 <svelte:head>
@@ -20,7 +28,7 @@
        <h1>{params.title}</h1>
    </header>
    <article>
-        {#if params.isLoading === true}
+        {#if isLoading === true}
            <p>Loading...</p>
        {:else}
            <table>
@@ -39,7 +47,7 @@
                </tr>
                </thead>
                <tbody>
-                {#each params.records as record}
+                {#each records as record}
                    <tr>
                        <td>{record.period}</td>
                        <td>{record.workingDays}</td>
@@ -1,31 +1,11 @@
 <script>
    import Views from "./Views.svelte";
-    export let params;
+    import {WorkingHoursViewsRepository} from "../components/Repositories.svelte";
+    export let params
    params = {
        title: 'Wochenansicht',
-        records: [],
-        isLoading: true
+        promise: WorkingHoursViewsRepository.weekly()
    }
-    const View = {
-        'browse': () => {
-            fetch(env.API_URL + '/views/working-hours/weekly')
-                .then(res => {
-                    if (!res.ok) {
-                        throw new Error('Fail!');
-                    }
-                    return res.json();
-                })
-                .then(data => {
-                    params.records = data;
-                    params.isLoading = false;
-                })
-                .catch(err => {
-                    params.isLoading = false;
-                    console.log(err);
-                });
-        }
-    };
-    View.browse();
 </script>

 <Views {params} />
@@ -1,121 +1,32 @@
 <script>
-    export let params;
-    const 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';
-    import {WorkingHoursRepository} from '../components/Repositories.svelte'
-    import NewByDay from "./working-hours/NewByDay.svelte";
+    import List from "./WorkingHours/List.svelte";
+    import Formular from "./WorkingHours/Formular.svelte";
+    export let params = {};
+
+    let TITLE = "Bearbeitung Einträge"
    let activeRecord = null;
-    params = {
-        title: 'Einträge',
-        records: [],
-        isLoading: true
-    }
-    const Controller = {
-        'listRecords': () => {
-            WorkingHoursRepository.browse().then(data => {
-                activeRecord = null;
-                params.records = data;
-                params.isLoading = false;
-            })
-        },
-        'newRecord': () => {
-            activeRecord = {workingTime: '00:00:00', workingDay: null};
-        },
-        'saveRecord': () => {
-            if (activeRecord.workingDay === null) {
-                WorkingHoursRepository.add(activeRecord).then(() => {
-                    Controller.listRecords()
-                });
-            } else {
-                WorkingHoursRepository.update(activeRecord.workingDay, activeRecord).then(() => {
-                    Controller.listRecords()
-                })
-            }
-        },
-        'selectActiveRecord': record => WorkingHoursRepository.read(record.workingDay).then(data => {
-            activeRecord = data;
-            if (activeRecord === null) {
-                Controller.listRecords()
-            }
-        }),
-        'cancelActiveRecord': () => {
-            activeRecord = null;
-        }
-    };
-    const initSite = () => {
-        Controller.listRecords()
-    };
-    initSite()
 </script>

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

-<section id="list-records">
-    <header>
-        <h1>{TITLE}</h1>
-    </header>
-    {#if activeRecord === null}
-    <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>
-    {:else}
-    <article>
-        <!--suppress HtmlUnknownTarget -->
-        <form action="/working-hours" name="editRecord">
-            <NewByDay activeRecord="{activeRecord}"/>
-            <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>
-    {/if}
-</section>
+{#if activeRecord === null}
+    <section id="list-records">
+        <header>
+            <h1>{TITLE}</h1>
+        </header>
+        <article>
+            <List bind:activeRecord={activeRecord}/>
+        </article>
+    </section>
+{:else}
+    <section id="edit-record">
+        <header>
+            <h1>{TITLE}</h1>
+        </header>
+        <article>
+            <Formular bind:activeRecord={activeRecord}/>
+        </article>
+    </section>
+{/if}
@@ -0,0 +1,47 @@
+<script>
+    import {WorkingHoursRepository} from "../../components/Repositories.svelte"
+    import IconifyIcon from '@iconify/svelte'
+    import checkIcon from '@iconify-icons/oi/check'
+    import xIcon from '@iconify-icons/oi/x'
+    import {TimekeepingDate} from "../../components/TimekeepingDate.svelte"
+
+    export let activeRecord = null
+    const Controller = {
+        'saveRecord': () => {
+            WorkingHoursRepository.addOrUpdate(activeRecord.workingDay, activeRecord).then(() => {
+                Controller.nextDay()
+            });
+        },
+        'nextDay': async () => {
+            let actDate = new TimekeepingDate(activeRecord.workingDay)
+            let nextDay = actDate.getNextDay()
+            activeRecord = await WorkingHoursRepository.readOrNew(nextDay.getDateString())
+        },
+        'cancelActiveRecord': () => {
+            activeRecord = null;
+        }
+    }
+</script>
+<!--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 und Weiter
+            <IconifyIcon icon={checkIcon} color="green"/>
+        </button>
+        <button on:click={Controller.cancelActiveRecord} type="button" class="sub-button">Abbrechen
+            <IconifyIcon icon={xIcon}/>
+        </button>
+    </fieldset>
+</form>
@@ -0,0 +1,77 @@
+<script>
+    import {WorkingHoursRepository} from "../../components/Repositories.svelte"
+    import {TimekeepingDate} from "../../components/TimekeepingDate.svelte"
+
+    export let activeRecord = null
+    let isLoading = true
+    let records = []
+    import IconifyIcon from '@iconify/svelte'
+    import wrenchIcon from '@iconify-icons/oi/wrench'
+    import documentIcon from '@iconify-icons/oi/document'
+
+    const Controller = {
+        'listRecords': () => {
+            Controller.cancelActiveRecord();
+            WorkingHoursRepository.browse().then(data => {
+                Controller.cancelActiveRecord()
+                records = data
+                isLoading = false
+            });
+        },
+        'newRecord': async () => {
+            const actDate = new TimekeepingDate()
+            activeRecord = await WorkingHoursRepository.readOrNew(actDate.getDateString())
+        },
+        'selectActiveRecord': record => WorkingHoursRepository.read(record.workingDay).then(data => {
+            if (data === null) {
+                Controller.listRecords()
+                return
+            }
+            activeRecord = data;
+        }),
+        'cancelActiveRecord': () => {
+            activeRecord = null;
+        }
+    }
+    Controller.listRecords()
+</script>
+
+<!--suppress HtmlUnknownTarget -->
+<form action="/working-hours">
+    <fieldset>
+        <button on:click={Controller.newRecord} type="button">Neuer Eintrag
+            <IconifyIcon icon={documentIcon}/>
+        </button>
+    </fieldset>
+</form>
+{#if isLoading === true}
+    <p>Loading...</p>
+{:else}
+    <table>
+        <colgroup>
+            <col/>
+            <col/>
+            <col/>
+        </colgroup>
+        <thead>
+        <tr>
+            <th>Datum</th>
+            <th>Arbeitsstunden</th>
+            <th>Aktionen</th>
+        </tr>
+        </thead>
+        <tbody>
+        {#each 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}
@@ -1,31 +1,11 @@
 <script>
    import Views from "./Views.svelte";
-    export let params;
+    import {WorkingHoursViewsRepository} from "../components/Repositories.svelte";
+    export let params
    params = {
        title: 'Jahresansicht',
-        records: [],
-        isLoading: true
+        promise: WorkingHoursViewsRepository.yearly()
    }
-    const View = {
-        'browse': () => {
-            fetch(env.API_URL + '/views/working-hours/yearly')
-                .then(res => {
-                    if (!res.ok) {
-                        throw new Error('Fail!');
-                    }
-                    return res.json();
-                })
-                .then(data => {
-                    params.records = data;
-                    params.isLoading = false;
-                })
-                .catch(err => {
-                    params.isLoading = false;
-                    console.log(err);
-                });
-        }
-    };
-    View.browse();
 </script>

 <Views {params} />