TorstenHettstedt/PHP-App-Timekeeping
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

js-rest-aktionen #6

Merged
TorstenHettstedt merged 9 commits from js-rest-aktionen into master 2021-04-12 14:11:32 +02:00
Conversation 2 Commits 9 Files Changed 11
+299 -93
11 changed files with 299 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/.env.example
+2
View File
@@ -0,0 +1,2 @@
# Url ohne abschlißenden Slash
API_URL= http://localhost:8080
ui/.gitignore
+1
View File
@@ -3,3 +3,4 @@ node_modules
package-lock.json
yarn.lock
public
/.env
ui/package.json
+1
View File
@@ -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",
ui/rollup.config.js
+3 -1
View File
@@ -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
ui/src/components/App.svelte
+5 -45
View File
@@ -45,52 +45,12 @@
addEventListener('pushstate', track);
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"
};
let records = {
"title" : "Einträge",
"records" : [r, r]
};
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('/working-hours', () => run(import('../routes/WorkingHours.svelte'), records))
.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')))
.listen();
onDestroy(router.unlisten);
ui/src/routes/Home.svelte
+2 -3
View File
@@ -1,6 +1,5 @@
<Views {params} />
<Views />
<script>
import Views from "./Views.svelte";
export let params;
import Views from "./WeeklyViews.svelte";
</script>
ui/src/routes/MonthlyViews.svelte
+31
View File
@@ -0,0 +1,31 @@
<script>
import Views from "./Views.svelte";
export let params;
params = {
title: 'Monatsansicht',
records: [],
isLoading: true
}
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} />
ui/src/routes/Views.svelte
+5
View File
@@ -1,5 +1,6 @@
<script>
export let params;
console.log(params)
</script>
<svelte:head>
@@ -11,6 +12,9 @@
<h1>{params.title}</h1>
</header>
<article>
{#if params.isLoading === true}
<p>Loading...</p>
{:else}
<table>
<thead>
<tr>
@@ -31,5 +35,6 @@
{/each}
</tbody>
</table>
{/if}
</article>
</section>
ui/src/routes/WeeklyViews.svelte
+31
View File
@@ -0,0 +1,31 @@
<script>
import Views from "./Views.svelte";
export let params;
params = {
title: 'Wochenansicht',
records: [],
isLoading: true
}
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} />
ui/src/routes/WorkingHours.svelte
+152 -9
View File
@@ -3,10 +3,136 @@
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';
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': 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(() => {
Controller.listRecords();
})
.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(() => {
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;
}
TorstenHettstedt marked this conversation as resolved Outdated
TorstenHettstedt commented 2021-04-12 13:22:49 +02:00
Outdated
Review
Copy Link
Copy Source

Es ist eine Überlegung wert, die einzelnen anonymen Funktionen zu einem Objekt zusammenzufassen.

Es ist eine Überlegung wert, die einzelnen anonymen Funktionen zu einem Objekt zusammenzufassen.
};
const initSite = () => {
Controller.listRecords()
};
initSite()
</script>
<svelte:head>
@@ -19,6 +145,17 @@
<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}>Neuer Eintrag
<IconifyIcon icon={documentIcon}/>
</button>
</fieldset>
</form>
<table>
<thead>
<tr>
@@ -33,13 +170,15 @@
<td>{record.workingDay}</td>
<td>{record.workingTime}</td>
TorstenHettstedt marked this conversation as resolved Outdated
TorstenHettstedt commented 2021-04-12 11:33:13 +02:00
Outdated
Review
Copy Link
Copy Source

Es sollte das aktuelle Datum als Defaultwert genommen werden.

Es sollte das aktuelle Datum als Defaultwert genommen werden.
TorstenHettstedt commented 2021-04-12 12:16:09 +02:00
Outdated
Review
Copy Link
Copy Source

Wird leider nicht unterstützt.

Wird leider nicht unterstützt.
<td>
<button>Bearbeiten <IconifyIcon icon={wrenchIcon} /></button>
<button>Löschen <IconifyIcon icon={trashIcon} color="red" /></button>
<button on:click={() => Controller.selectActiveRecord(record)}>Bearbeiten
<IconifyIcon icon={wrenchIcon}/>
</button>
</td>
TorstenHettstedt marked this conversation as resolved
TorstenHettstedt commented 2021-04-12 11:34:09 +02:00
Review
Copy Link
Copy Source

Es sollten auch die Sekunden eintragbar sein und der Defaultwert sollte '00:00:00' sein.

Es sollten auch die Sekunden eintragbar sein und der Defaultwert sollte '00:00:00' sein.
</tr>
{/each}
</tbody>
</table>
{/if}
</article>
</section>
{:else}
1
 @@ -53,18 +192,22 @@
<fieldset name="record-data">
<div>
<label for="workingDay">Arbeitstag</label>
<!--suppress JSUnresolvedVariable -->
<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>
<!--suppress JSUnresolvedVariable -->
<input bind:value={activeRecord.workingTime} placeholder="Arbeitszeit" type="time" id="workingTime">
<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>Übernehmen <IconifyIcon icon={checkIcon} color="green" /></button>
<button>Abbrechen <IconifyIcon icon={xIcon} /></button>
<button on:click={Controller.saveRecord}>Übernehmen
<IconifyIcon icon={checkIcon} color="green"/>
</button>
<button on:click={Controller.cancelActiveRecord}>Abbrechen
<IconifyIcon icon={xIcon}/>
</button>
</fieldset>
</form>
</article>
ui/src/routes/YearlyViews.svelte
+31
View File
@@ -0,0 +1,31 @@
<script>
import Views from "./Views.svelte";
export let params;
params = {
title: 'Jahresansicht',
records: [],
isLoading: true
}
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} />