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
+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/WorkingHours.svelte
+169 -26
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;
}
};
const initSite = () => {
Controller.listRecords()
};
initSite()
</script>
<svelte:head>
@@ -19,27 +145,40 @@
<h1>{title}</h1>
</header>
<article>
<table>
<thead>
<tr>
<th>Datum</th>
<th>Arbeitsstunden</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody>
{#each params.records as record}
{#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>
<td>{record.workingDay}</td>
<td>{record.workingTime}</td>
<td>
<button>Bearbeiten <IconifyIcon icon={wrenchIcon} /></button>
<button>Löschen <IconifyIcon icon={trashIcon} color="red" /></button>
</td>
<th>Datum</th>
<th>Arbeitsstunden</th>
<th>Aktionen</th>
</tr>
{/each}
</tbody>
</table>
</thead>
<tbody>
{#each params.records as record}
<tr>
<td>{record.workingDay}</td>
<td>{record.workingTime}</td>
<td>
<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}
@@ -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} />