From 7f8a50799f31f1b92eb0921540deca7e302c3d97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torsten=20L=C3=BCcke?= Date: Fri, 9 Apr 2021 18:19:42 +0200 Subject: [PATCH 1/9] Die Web-App kann per *dotEnv* konfiguriert werden. --- ui/.env.example | 2 ++ ui/.gitignore | 1 + ui/package.json | 1 + ui/rollup.config.js | 4 +++- 4 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 ui/.env.example diff --git a/ui/.env.example b/ui/.env.example new file mode 100644 index 0000000..5b737f7 --- /dev/null +++ b/ui/.env.example @@ -0,0 +1,2 @@ +# Url ohne abschlißenden Slash +API_URL= http://localhost:8080 \ No newline at end of file diff --git a/ui/.gitignore b/ui/.gitignore index b21668d..76035c9 100644 --- a/ui/.gitignore +++ b/ui/.gitignore @@ -3,3 +3,4 @@ node_modules package-lock.json yarn.lock public +/.env diff --git a/ui/package.json b/ui/package.json index f794272..bdbbd6e 100644 --- a/ui/package.json +++ b/ui/package.json @@ -19,6 +19,7 @@ "@rollup/plugin-commonjs": "^15.0.0", "@rollup/plugin-node-resolve": "^9.0.0", "@rollup/plugin-replace": "^2.3.0", + "dotenv": "^8.2.0", "npm-run-all": "^4.1.3", "rollup": "^2.30.0", "rollup-plugin-svelte": "^6.0.0", diff --git a/ui/rollup.config.js b/ui/rollup.config.js index c05a512..7b165f5 100644 --- a/ui/rollup.config.js +++ b/ui/rollup.config.js @@ -3,6 +3,7 @@ import replace from '@rollup/plugin-replace'; import resolve from '@rollup/plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs'; import { terser } from 'rollup-plugin-terser'; +import {config} from 'dotenv'; const production = !process.env.ROLLUP_WATCH; @@ -35,7 +36,8 @@ export default { commonjs(), replace({ - 'process.env.NODE_ENV': JSON.stringify(production ? 'production' : 'development') + 'process.env.NODE_ENV': JSON.stringify(production ? 'production' : 'development'), + 'env': JSON.stringify({...config().parsed /* attached the .env config*/}) }), // If we're building for production (npm run build From 9d5af9a0fbc478dbb1887d01547cad1368d26358 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torsten=20L=C3=BCcke?= Date: Fri, 9 Apr 2021 18:20:47 +0200 Subject: [PATCH 2/9] =?UTF-8?q?Die=20Daten=20f=C3=BCr=20die=20Ansichten=20?= =?UTF-8?q?werden=20von=20einer=20API=20abgefragt.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/src/components/App.svelte | 38 +++------------------------- ui/src/routes/Home.svelte | 5 ++-- ui/src/routes/MonthlyViews.svelte | 31 +++++++++++++++++++++++ ui/src/routes/Views.svelte | 41 +++++++++++++++++-------------- ui/src/routes/WeeklyViews.svelte | 31 +++++++++++++++++++++++ ui/src/routes/YearlyViews.svelte | 31 +++++++++++++++++++++++ 6 files changed, 122 insertions(+), 55 deletions(-) create mode 100644 ui/src/routes/MonthlyViews.svelte create mode 100644 ui/src/routes/WeeklyViews.svelte create mode 100644 ui/src/routes/YearlyViews.svelte diff --git a/ui/src/components/App.svelte b/ui/src/components/App.svelte index 0852d11..9071f90 100644 --- a/ui/src/components/App.svelte +++ b/ui/src/components/App.svelte @@ -46,36 +46,6 @@ addEventListener('popstate', track); - let w = { - "period": "2020#01", - "workingDays": 20, - "totalHours": "99:00:00", - "overtime": "10:22:00" - }; - let weekly = { - "title" : "Wochenansicht", - "records" : [w, w] - }; - let m = { - "period": "2020-01", - "workingDays": 20, - "totalHours": "99:00:00", - "overtime": "10:22:00" - }; - let monthly = { - "title" : "Monatsansicht", - "records" : [m, m] - }; - let y = { - "period": "2020", - "workingDays": 20, - "totalHours": "99:00:00", - "overtime": "10:22:00" - }; - let yearly = { - "title" : "Jahresansicht", - "records" : [y, y] - }; let r = { "workingDay": "2020-01-15", "workingTime": "09:00:00" @@ -86,10 +56,10 @@ }; const router = Navaid('/') - .on('/', () => run(import('../routes/Home.svelte'), weekly)) - .on('/views/weekly', () => run(import('../routes/Views.svelte'), weekly)) - .on('/views/monthly', () => run(import('../routes/Views.svelte'), monthly)) - .on('/views/yearly', () => run(import('../routes/Views.svelte'), yearly)) + .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)) .listen(); diff --git a/ui/src/routes/Home.svelte b/ui/src/routes/Home.svelte index 8041d2c..4a0fa9d 100644 --- a/ui/src/routes/Home.svelte +++ b/ui/src/routes/Home.svelte @@ -1,6 +1,5 @@ - + \ No newline at end of file diff --git a/ui/src/routes/MonthlyViews.svelte b/ui/src/routes/MonthlyViews.svelte new file mode 100644 index 0000000..fd4166e --- /dev/null +++ b/ui/src/routes/MonthlyViews.svelte @@ -0,0 +1,31 @@ + + + \ No newline at end of file diff --git a/ui/src/routes/Views.svelte b/ui/src/routes/Views.svelte index e61e5e4..8c7ee11 100644 --- a/ui/src/routes/Views.svelte +++ b/ui/src/routes/Views.svelte @@ -1,5 +1,6 @@ @@ -11,25 +12,29 @@

{params.title}

- - - - - - - - - - - {#each params.records as record} + {#if params.isLoading === true} +

Loading...

+ {:else} +
ZeitraumArbeitstageArbeitsstundenÜber- / Unterstunden
+ - - - - + + + + - {/each} - -
{record.period}{record.workingDays}{record.totalHours}{record.overtime}ZeitraumArbeitstageArbeitsstundenÜber- / Unterstunden
+ + + {#each params.records as record} + + {record.period} + {record.workingDays} + {record.totalHours} + {record.overtime} + + {/each} + + + {/if}
\ No newline at end of file diff --git a/ui/src/routes/WeeklyViews.svelte b/ui/src/routes/WeeklyViews.svelte new file mode 100644 index 0000000..34eb07b --- /dev/null +++ b/ui/src/routes/WeeklyViews.svelte @@ -0,0 +1,31 @@ + + + \ No newline at end of file diff --git a/ui/src/routes/YearlyViews.svelte b/ui/src/routes/YearlyViews.svelte new file mode 100644 index 0000000..974b2b1 --- /dev/null +++ b/ui/src/routes/YearlyViews.svelte @@ -0,0 +1,31 @@ + + + \ No newline at end of file From bc83fc8dd100c1fa472334d1b0ed38c51d3d1a5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torsten=20L=C3=BCcke?= Date: Fri, 9 Apr 2021 21:19:19 +0200 Subject: [PATCH 3/9] =?UTF-8?q?Die=20Eintr=C3=A4ge=20werden=20aufgelistet?= =?UTF-8?q?=20und=20angezeigt.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/src/routes/WorkingHours.svelte | 48 ++++++++++++++++++++++++++++--- 1 file changed, 44 insertions(+), 4 deletions(-) diff --git a/ui/src/routes/WorkingHours.svelte b/ui/src/routes/WorkingHours.svelte index e2da199..67936ab 100644 --- a/ui/src/routes/WorkingHours.svelte +++ b/ui/src/routes/WorkingHours.svelte @@ -7,6 +7,48 @@ import checkIcon from '@iconify-icons/oi/check'; import xIcon from '@iconify-icons/oi/x'; let activeRecord = null; + 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 => { + 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; + }) + .catch(err => { + console.log(err); + }); + } + }; + Records.browse(); @@ -33,7 +75,7 @@ {record.workingDay} {record.workingTime} - + @@ -53,18 +95,16 @@
-
-
- +
From 9686a8505ed8c9a68b289901a869803bdbca431b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torsten=20L=C3=BCcke?= Date: Fri, 9 Apr 2021 21:53:52 +0200 Subject: [PATCH 4/9] =?UTF-8?q?Das=20l=C3=B6schen=20eines=20Eintrages=20wi?= =?UTF-8?q?rd=20nicht=20unterst=C3=BCtzt.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/src/routes/WorkingHours.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/src/routes/WorkingHours.svelte b/ui/src/routes/WorkingHours.svelte index 67936ab..441c32a 100644 --- a/ui/src/routes/WorkingHours.svelte +++ b/ui/src/routes/WorkingHours.svelte @@ -3,7 +3,6 @@ let title = "Bearbeitung Einträge" import IconifyIcon from '@iconify/svelte'; import wrenchIcon from '@iconify-icons/oi/wrench'; - import trashIcon from '@iconify-icons/oi/trash'; import checkIcon from '@iconify-icons/oi/check'; import xIcon from '@iconify-icons/oi/x'; let activeRecord = null; @@ -75,8 +74,9 @@ {record.workingDay} {record.workingTime} - - + {/each} From 74fd96cf25fa0380b408b2d27a5248dfea384fb2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torsten=20L=C3=BCcke?= Date: Fri, 9 Apr 2021 21:56:08 +0200 Subject: [PATCH 5/9] =?UTF-8?q?Ein=20Eintrag=20kann=20ver=C3=A4ndert=20wer?= =?UTF-8?q?den.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/src/routes/WorkingHours.svelte | 40 +++++++++++++++++++++++++++++-- 1 file changed, 38 insertions(+), 2 deletions(-) diff --git a/ui/src/routes/WorkingHours.svelte b/ui/src/routes/WorkingHours.svelte index 441c32a..fae987b 100644 --- a/ui/src/routes/WorkingHours.svelte +++ b/ui/src/routes/WorkingHours.svelte @@ -22,6 +22,7 @@ return res.json(); }) .then(data => { + activeRecord = null; params.records = data; params.isLoading = false; }) @@ -41,6 +42,37 @@ }) .then(data => { activeRecord = data; + if (date === null) { + Records.browse(); + } + }) + .catch(err => { + console.log(err); + }); + }, + 'update': (date, record) => { + console.log(record); + // noinspection JSUnresolvedVariable + fetch(env.API_URL + '/working-hours/' + date, { + method: 'PUT', + mode: 'no-cors', + cache: 'no-cache', + credentials: 'same-origin', + headers: { + 'Content-Type': 'application/json' + }, + redirect: 'follow', + referrerPolicy: 'no-referrer', + body: JSON.stringify(record) + }) + .then(res => { + if (!res.ok) { + throw new Error('Fail!'); + } + }) + .then(() => { + activeRecord = null; + Records.browse(); }) .catch(err => { console.log(err); @@ -103,8 +135,12 @@
- - + +
From c711e0ae24a14456bf3f76a272a771cc9b4d4b13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torsten=20L=C3=BCcke?= Date: Sat, 10 Apr 2021 11:26:34 +0200 Subject: [PATCH 6/9] =?UTF-8?q?Es=20ist=20m=C3=B6glich=20einen=20neuen=20E?= =?UTF-8?q?intrag=20zu=20generieren.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/src/routes/WorkingHours.svelte | 101 ++++++++++++++++++++++-------- 1 file changed, 75 insertions(+), 26 deletions(-) diff --git a/ui/src/routes/WorkingHours.svelte b/ui/src/routes/WorkingHours.svelte index fae987b..137cb2f 100644 --- a/ui/src/routes/WorkingHours.svelte +++ b/ui/src/routes/WorkingHours.svelte @@ -5,7 +5,9 @@ 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: [], @@ -50,6 +52,34 @@ console.log(err); }); }, + 'add': record => { + console.log(record); + // noinspection JSUnresolvedVariable + fetch(env.API_URL + '/working-hours', { + method: 'POST', + mode: 'no-cors', + cache: 'no-cache', + credentials: 'same-origin', + headers: { + 'Content-Type': 'application/json' + }, + redirect: 'follow', + referrerPolicy: 'no-referrer', + body: JSON.stringify(record) + }) + .then(res => { + if (!res.ok) { + throw new Error('Fail!'); + } + }) + .then(() => { + newRecord = false; + Records.browse(); + }) + .catch(err => { + console.log(err); + }); + }, 'update': (date, record) => { console.log(record); // noinspection JSUnresolvedVariable @@ -71,7 +101,6 @@ } }) .then(() => { - activeRecord = null; Records.browse(); }) .catch(err => { @@ -92,28 +121,40 @@

{title}

- - - - - - - - - - {#each params.records as record} + {#if params.isLoading === true} +

Loading...

+ {:else} + + +
+ +
+ +
DatumArbeitsstundenAktionen
+ - - - + + + - {/each} - -
{record.workingDay}{record.workingTime} - - DatumArbeitsstundenAktionen
+ + + {#each params.records as record} + + {record.workingDay} + {record.workingTime} + + + + + {/each} + + + {/if}
{:else} @@ -127,17 +168,25 @@
- +
- +
- + {#if newRecord === true} + + {:else} + + {/if} From 8296a2a281f6052f5c66aa139b493043210b8262 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torsten=20L=C3=BCcke?= Date: Sat, 10 Apr 2021 15:42:21 +0200 Subject: [PATCH 7/9] Die Test-Objekte sind nicht mehr notwendig. --- ui/src/components/App.svelte | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/ui/src/components/App.svelte b/ui/src/components/App.svelte index 9071f90..0577043 100644 --- a/ui/src/components/App.svelte +++ b/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); From ae7491f002e6f20100c038829594e95bad41e32a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torsten=20L=C3=BCcke?= Date: Mon, 12 Apr 2021 12:29:00 +0200 Subject: [PATCH 8/9] =?UTF-8?q?Die=20Eintragungen=20wurden=20wo=20m=C3=B6g?= =?UTF-8?q?lich=20mit=20den=20Defaultwerten=20gesetzt.=20Ging=20aber=20nur?= =?UTF-8?q?=20bei=20der=20Angabe=20der=20Zeit.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/src/routes/WorkingHours.svelte | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ui/src/routes/WorkingHours.svelte b/ui/src/routes/WorkingHours.svelte index 137cb2f..442da7f 100644 --- a/ui/src/routes/WorkingHours.svelte +++ b/ui/src/routes/WorkingHours.svelte @@ -127,7 +127,7 @@
-
@@ -168,13 +168,13 @@
- +
+ id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
From 0a5e40d7cb08a6cbcae273489b92f66d8f1688d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torsten=20L=C3=BCcke?= Date: Mon, 12 Apr 2021 14:11:00 +0200 Subject: [PATCH 9/9] =?UTF-8?q?Es=20gibt=20ein=20Objekt=20'Controller',=20?= =?UTF-8?q?dass=20die=20Funktionen=20f=C3=BCr=20die=20Tasten-Aktionen=20sa?= =?UTF-8?q?mmelt.=20Es=20gibt=20nun=20eine=20Initialisierung-Funktion.=20W?= =?UTF-8?q?enn=20eine=20Bearbeitung=20abgebrochen=20wird,=20wird=20nicht?= =?UTF-8?q?=20jedes=20mal=20die=20Liste=20neu=20geladen.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ui/src/routes/WorkingHours.svelte | 54 ++++++++++++++++++++----------- 1 file changed, 36 insertions(+), 18 deletions(-) diff --git a/ui/src/routes/WorkingHours.svelte b/ui/src/routes/WorkingHours.svelte index 442da7f..aae1de7 100644 --- a/ui/src/routes/WorkingHours.svelte +++ b/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() @@ -127,7 +151,7 @@
-
@@ -146,7 +170,7 @@ {record.workingDay} {record.workingTime} - @@ -178,16 +202,10 @@
- {#if newRecord === true} - - {:else} - - {/if} - +