Es ist möglich einen neuen Eintrag zu generieren.

This commit is contained in:
2021-04-10 11:26:34 +02:00
parent 74fd96cf25
commit c711e0ae24
+75 -26
View File
@@ -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"
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>