149 lines
4.9 KiB
Svelte
149 lines
4.9 KiB
Svelte
<script>
|
|
export let params;
|
|
let title = "Bearbeitung Einträge"
|
|
import IconifyIcon from '@iconify/svelte';
|
|
import wrenchIcon from '@iconify-icons/oi/wrench';
|
|
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 => {
|
|
activeRecord = null;
|
|
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) {
|
|
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);
|
|
});
|
|
}
|
|
};
|
|
Records.browse();
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>{title}</title>
|
|
</svelte:head>
|
|
|
|
{#if activeRecord === null}
|
|
<section id="list-records">
|
|
<header>
|
|
<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}
|
|
<tr>
|
|
<td>{record.workingDay}</td>
|
|
<td>{record.workingTime}</td>
|
|
<td>
|
|
<button on:click={() => Records.read(record.workingDay)}>Bearbeiten
|
|
<IconifyIcon icon={wrenchIcon}/>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</article>
|
|
</section>
|
|
{:else}
|
|
<section id="edit-record">
|
|
<header>
|
|
<h1>{title}</h1>
|
|
</header>
|
|
<article>
|
|
<!--suppress HtmlUnknownTarget -->
|
|
<form action="/working-hours" name="editRecord">
|
|
<fieldset name="record-data">
|
|
<div>
|
|
<label for="workingDay">Arbeitstag</label>
|
|
<input bind:value={activeRecord.workingDay} placeholder="Arbeitstag" type="date" id="workingDay">
|
|
</div>
|
|
<div>
|
|
<label for="workingTime">Arbeitszeit</label>
|
|
<input bind:value={activeRecord.workingTime} placeholder="Arbeitszeit" type="time" id="workingTime">
|
|
</div>
|
|
</fieldset>
|
|
<fieldset name="buttons">
|
|
<button on:click={() => Records.update(activeRecord.workingDay, activeRecord)}>Übernehmen
|
|
<IconifyIcon icon={checkIcon} color="green"/>
|
|
</button>
|
|
<button on:click={() => Records.read(null)}>Abbrechen
|
|
<IconifyIcon icon={xIcon}/>
|
|
</button>
|
|
</fieldset>
|
|
</form>
|
|
</article>
|
|
</section>
|
|
{/if}
|