js-rest-aktionen #6
@@ -5,7 +5,9 @@
|
|||||||
import wrenchIcon from '@iconify-icons/oi/wrench';
|
import wrenchIcon from '@iconify-icons/oi/wrench';
|
||||||
import checkIcon from '@iconify-icons/oi/check';
|
import checkIcon from '@iconify-icons/oi/check';
|
||||||
import xIcon from '@iconify-icons/oi/x';
|
import xIcon from '@iconify-icons/oi/x';
|
||||||
|
import documentIcon from '@iconify-icons/oi/document';
|
||||||
let activeRecord = null;
|
let activeRecord = null;
|
||||||
|
let newRecord = false;
|
||||||
params = {
|
params = {
|
||||||
title: 'Einträge',
|
title: 'Einträge',
|
||||||
records: [],
|
records: [],
|
||||||
@@ -50,6 +52,34 @@
|
|||||||
console.log(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(() => {
|
||||||
|
newRecord = false;
|
||||||
|
Records.browse();
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.log(err);
|
||||||
|
});
|
||||||
|
},
|
||||||
'update': (date, record) => {
|
'update': (date, record) => {
|
||||||
console.log(record);
|
console.log(record);
|
||||||
// noinspection JSUnresolvedVariable
|
// noinspection JSUnresolvedVariable
|
||||||
@@ -71,7 +101,6 @@
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
activeRecord = null;
|
|
||||||
Records.browse();
|
Records.browse();
|
||||||
})
|
})
|
||||||
.catch(err => {
|
.catch(err => {
|
||||||
@@ -92,28 +121,40 @@
|
|||||||
<h1>{title}</h1>
|
<h1>{title}</h1>
|
||||||
</header>
|
</header>
|
||||||
<article>
|
<article>
|
||||||
<table>
|
{#if params.isLoading === true}
|
||||||
<thead>
|
<p>Loading...</p>
|
||||||
<tr>
|
{:else}
|
||||||
<th>Datum</th>
|
<!--suppress HtmlUnknownTarget -->
|
||||||
<th>Arbeitsstunden</th>
|
<form action="/working-hours">
|
||||||
<th>Aktionen</th>
|
<fieldset>
|
||||||
</tr>
|
<button on:click={() => {activeRecord = {}; newRecord = true}}>Neuer Eintrag
|
||||||
</thead>
|
<IconifyIcon icon={documentIcon}/>
|
||||||
<tbody>
|
</button>
|
||||||
{#each params.records as record}
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<td>{record.workingDay}</td>
|
<th>Datum</th>
|
||||||
<td>{record.workingTime}</td>
|
<th>Arbeitsstunden</th>
|
||||||
<td>
|
<th>Aktionen</th>
|
||||||
<button on:click={() => Records.read(record.workingDay)}>Bearbeiten
|
|
||||||
<IconifyIcon icon={wrenchIcon}/>
|
|
||||||
</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
{/each}
|
</thead>
|
||||||
</tbody>
|
<tbody>
|
||||||
</table>
|
{#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>
|
||||||
|
{/if}
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
{:else}
|
{:else}
|
||||||
@@ -127,17 +168,25 @@
|
|||||||
<fieldset name="record-data">
|
<fieldset name="record-data">
|
||||||
<div>
|
<div>
|
||||||
<label for="workingDay">Arbeitstag</label>
|
<label for="workingDay">Arbeitstag</label>
|
||||||
<input bind:value={activeRecord.workingDay} placeholder="Arbeitstag" type="date" id="workingDay">
|
<input bind:value={activeRecord.workingDay} placeholder="Arbeitstag" type="date"
|
||||||
|
id="workingDay">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<label for="workingTime">Arbeitszeit</label>
|
<label for="workingTime">Arbeitszeit</label>
|
||||||
<input bind:value={activeRecord.workingTime} placeholder="Arbeitszeit" type="time" id="workingTime">
|
<input bind:value={activeRecord.workingTime} placeholder="Arbeitszeit" type="time"
|
||||||
|
TorstenHettstedt marked this conversation as resolved
|
|||||||
|
id="workingTime">
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<fieldset name="buttons">
|
<fieldset name="buttons">
|
||||||
<button on:click={() => Records.update(activeRecord.workingDay, activeRecord)}>Übernehmen
|
{#if newRecord === true}
|
||||||
<IconifyIcon icon={checkIcon} color="green"/>
|
<button on:click={() => Records.add(activeRecord)}>Übernehmen
|
||||||
</button>
|
<IconifyIcon icon={checkIcon} color="green"/>
|
||||||
|
</button>
|
||||||
|
{:else}
|
||||||
|
<button on:click={() => Records.update(activeRecord.workingDay, activeRecord)}>Übernehmen
|
||||||
|
<IconifyIcon icon={checkIcon} color="green"/>
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
<button on:click={() => Records.read(null)}>Abbrechen
|
<button on:click={() => Records.read(null)}>Abbrechen
|
||||||
<IconifyIcon icon={xIcon}/>
|
<IconifyIcon icon={xIcon}/>
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
Reference in New Issue
Block a user
Es sollten auch die Sekunden eintragbar sein und der Defaultwert sollte '00:00:00' sein.