Merge pull request 'js-rest-aktionen' (#6) from js-rest-aktionen into master

Reviewed-on: #6

ui/src/components/App.svelte

@@ -45,22 +45,12 @@
 	addEventListener('pushstate', track);
 	addEventListener('popstate', track);
 
-
-    let r = {
-        "workingDay": "2020-01-15",
-        "workingTime": "09:00:00"
-    };
-    let records = {
-        "title" : "Einträge",
-        "records" : [r, r]
-    };
-
 	const router = Navaid('/')
 		.on('/', () => run(import('../routes/Home.svelte')))
 		.on('/views/weekly', () => run(import('../routes/WeeklyViews.svelte')))
 		.on('/views/monthly', () => run(import('../routes/MonthlyViews.svelte')))
 		.on('/views/yearly', () => run(import('../routes/YearlyViews.svelte')))
-		.on('/working-hours', () => run(import('../routes/WorkingHours.svelte'), records))
+		.on('/working-hours', () => run(import('../routes/WorkingHours.svelte')))
 		.listen();
 
 	onDestroy(router.unlisten);

ui/src/routes/WorkingHours.svelte

@@ -24,7 +24,7 @@
                     return res.json();
                 })
                 .then(data => {
-                    activeRecord = null;
+                    Controller.cancelActiveRecord();
                     params.records = data;
                     params.isLoading = false;
                 })
@@ -45,7 +45,7 @@
                 .then(data => {
                     activeRecord = data;
                     if (date === null) {
-                        Records.browse();
+                        Controller.listRecords();
                     }
                 })
                 .catch(err => {
@@ -73,8 +73,7 @@
                     }
                 })
                 .then(() => {
-                    newRecord = false;
-                    Records.browse();
+                    Controller.listRecords();
                 })
                 .catch(err => {
                     console.log(err);
@@ -101,14 +100,39 @@
                     }
                 })
                 .then(() => {
-                    Records.browse();
+                    Controller.listRecords();
                 })
                 .catch(err => {
                     console.log(err);
                 });
         }
     };
-    Records.browse();
+    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>
@@ -127,7 +151,7 @@
                 <!--suppress HtmlUnknownTarget -->
                 <form action="/working-hours">
                     <fieldset>
-                        <button on:click={() => {activeRecord = {}; newRecord = true}}>Neuer Eintrag
+                        <button on:click={Controller.newRecord}>Neuer Eintrag
                             <IconifyIcon icon={documentIcon}/>
                         </button>
                     </fieldset>
@@ -146,7 +170,7 @@
                             <td>{record.workingDay}</td>
                             <td>{record.workingTime}</td>
                             <td>
-                                <button on:click={() => Records.read(record.workingDay)}>Bearbeiten
+                                <button on:click={() => Controller.selectActiveRecord(record)}>Bearbeiten
                                     <IconifyIcon icon={wrenchIcon}/>
                                 </button>
                             </td>
@@ -168,26 +192,20 @@
                 <fieldset name="record-data">
                     <div>
                         <label for="workingDay">Arbeitstag</label>
-                        <input bind:value={activeRecord.workingDay} placeholder="Arbeitstag" type="date"
-                               id="workingDay">
+                        <input bind:value={activeRecord.workingDay} type="date"
+                               id="workingDay" required pattern="\d{4}-\d{2}-\d{2}">
                     </div>
                     <div>
                         <label for="workingTime">Arbeitszeit</label>
                         <input bind:value={activeRecord.workingTime} placeholder="Arbeitszeit" type="time"
-                               id="workingTime">
+                               id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
                     </div>
                 </fieldset>
                 <fieldset name="buttons">
-                    {#if newRecord === true}
-                        <button on:click={() => Records.add(activeRecord)}>Übernehmen
-                            <IconifyIcon icon={checkIcon} color="green"/>
-                        </button>
-                    {:else}
-                        <button on:click={() => Records.update(activeRecord.workingDay, activeRecord)}>Übernehmen
-                            <IconifyIcon icon={checkIcon} color="green"/>
-                        </button>
-                    {/if}
-                    <button on:click={() => Records.read(null)}>Abbrechen
+                    <button on:click={Controller.saveRecord}>Übernehmen
+                        <IconifyIcon icon={checkIcon} color="green"/>
+                    </button>
+                    <button on:click={Controller.cancelActiveRecord}>Abbrechen
                         <IconifyIcon icon={xIcon}/>
                     </button>
                 </fieldset>