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

Die Daten für die Ansichten werden von einer API abgefragt.

Browse Source
This commit is contained in:
Torstem_JetBrain
2021-04-09 18:20:47 +02:00
parent 7f8a50799f
commit 9d5af9a0fb
6 changed files with 122 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/App.svelte
+4 -34
View File
@@ -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();
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
+23 -18
View File
@@ -1,5 +1,6 @@
<script>
export let params;
console.log(params)
</script>
<svelte:head>
@@ -11,25 +12,29 @@
<h1>{params.title}</h1>
</header>
<article>
<table>
<thead>
<tr>
<th>Zeitraum</th>
<th>Arbeitstage</th>
<th>Arbeitsstunden</th>
<th>Über- / Unterstunden</th>
</tr>
</thead>
<tbody>
{#each params.records as record}
{#if params.isLoading === true}
<p>Loading...</p>
{:else}
<table>
<thead>
<tr>
<td>{record.period}</td>
<td>{record.workingDays}</td>
<td>{record.totalHours}</td>
<td>{record.overtime}</td>
<th>Zeitraum</th>
<th>Arbeitstage</th>
<th>Arbeitsstunden</th>
<th>Über- / Unterstunden</th>
</tr>
{/each}
</tbody>
</table>
</thead>
<tbody>
{#each params.records as record}
<tr>
<td>{record.period}</td>
<td>{record.workingDays}</td>
<td>{record.totalHours}</td>
<td>{record.overtime}</td>
</tr>
{/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/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} />