html-sites #3
@@ -1,8 +1,11 @@
|
|||||||
|
<header>
|
||||||
|
Arbeitszeiten
|
||||||
|
</header>
|
||||||
<Nav {active} />
|
<Nav {active} />
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<svelte:component this={Route} {params} />
|
<svelte:component this={Route} {params} />
|
||||||
</main>
|
</main>
|
||||||
|
<footer><p>© Torsten Lücke 2021</p></footer>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Navaid from 'navaid';
|
import Navaid from 'navaid';
|
||||||
|
|||||||
+27
-22
@@ -6,25 +6,30 @@
|
|||||||
<title>{params.title}</title>
|
<title>{params.title}</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<h1>{params.title}</h1>
|
<section id="list-records">
|
||||||
|
<header>
|
||||||
<table>
|
<h1>{params.title}</h1>
|
||||||
<thead>
|
</header>
|
||||||
<tr>
|
<article>
|
||||||
<th>Zeitraum</th>
|
<table>
|
||||||
<th>Arbeitstage</th>
|
<thead>
|
||||||
<th>Arbeitsstunden</th>
|
<tr>
|
||||||
<th>Über- / Unterstunden</th>
|
<th>Zeitraum</th>
|
||||||
</tr>
|
<th>Arbeitstage</th>
|
||||||
</thead>
|
<th>Arbeitsstunden</th>
|
||||||
<tbody>
|
<th>Über- / Unterstunden</th>
|
||||||
{#each params.records as record}
|
</tr>
|
||||||
<tr>
|
</thead>
|
||||||
<td>{record.period}</td>
|
<tbody>
|
||||||
<td>{record.workingDays}</td>
|
{#each params.records as record}
|
||||||
<td>{record.totalHours}</td>
|
<tr>
|
||||||
<td>{record.overtime}</td>
|
<td>{record.period}</td>
|
||||||
</tr>
|
<td>{record.workingDays}</td>
|
||||||
{/each}
|
<td>{record.totalHours}</td>
|
||||||
</tbody>
|
<td>{record.overtime}</td>
|
||||||
</table>
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
@@ -13,48 +13,60 @@
|
|||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<h1>{title}</h1>
|
|
||||||
|
|
||||||
{#if activeRecord === null}
|
{#if activeRecord === null}
|
||||||
<table>
|
<section id="list-records">
|
||||||
<thead>
|
<header>
|
||||||
<tr>
|
<h1>{title}</h1>
|
||||||
<th>Datum</th>
|
</header>
|
||||||
<th>Arbeitsstunden</th>
|
<article>
|
||||||
<th>Aktionen</th>
|
<table>
|
||||||
</tr>
|
<thead>
|
||||||
</thead>
|
<tr>
|
||||||
<tbody>
|
<th>Datum</th>
|
||||||
{#each params.records as record}
|
<th>Arbeitsstunden</th>
|
||||||
<tr>
|
<th>Aktionen</th>
|
||||||
<td>{record.workingDay}</td>
|
</tr>
|
||||||
<td>{record.workingTime}</td>
|
</thead>
|
||||||
<td>
|
<tbody>
|
||||||
<button>Bearbeiten <IconifyIcon icon={wrenchIcon} /></button>
|
{#each params.records as record}
|
||||||
<button>Löschen <IconifyIcon icon={trashIcon} color="red" /></button>
|
<tr>
|
||||||
</td>
|
<td>{record.workingDay}</td>
|
||||||
</tr>
|
<td>{record.workingTime}</td>
|
||||||
{/each}
|
<td>
|
||||||
</tbody>
|
<button>Bearbeiten <IconifyIcon icon={wrenchIcon} /></button>
|
||||||
</table>
|
<button>Löschen <IconifyIcon icon={trashIcon} color="red" /></button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
{:else}
|
{:else}
|
||||||
<!--suppress HtmlUnknownTarget -->
|
<section id="edit-record">
|
||||||
<form action="/working-hours" name="editRecord">
|
<header>
|
||||||
<fieldset name="record-data">
|
<h1>{title}</h1>
|
||||||
<div>
|
</header>
|
||||||
<label for="workingDay">Arbeitstag</label>
|
<article>
|
||||||
<!--suppress JSUnresolvedVariable -->
|
<!--suppress HtmlUnknownTarget -->
|
||||||
<input bind:value={activeRecord.workingDay} placeholder="Arbeitstag" type="date" id="workingDay">
|
<form action="/working-hours" name="editRecord">
|
||||||
</div>
|
<fieldset name="record-data">
|
||||||
<div>
|
<div>
|
||||||
<label for="workingTime">Arbeitszeit</label>
|
<label for="workingDay">Arbeitstag</label>
|
||||||
<!--suppress JSUnresolvedVariable -->
|
<!--suppress JSUnresolvedVariable -->
|
||||||
<input bind:value={activeRecord.workingTime} placeholder="Arbeitszeit" type="time" id="workingTime">
|
<input bind:value={activeRecord.workingDay} placeholder="Arbeitstag" type="date" id="workingDay">
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
<div>
|
||||||
<fieldset name="buttons">
|
<label for="workingTime">Arbeitszeit</label>
|
||||||
<button>Übernehmen <IconifyIcon icon={checkIcon} color="green" /></button>
|
<!--suppress JSUnresolvedVariable -->
|
||||||
<button>Abbrechen <IconifyIcon icon={xIcon} /></button>
|
<input bind:value={activeRecord.workingTime} placeholder="Arbeitszeit" type="time" id="workingTime">
|
||||||
</fieldset>
|
</div>
|
||||||
</form>
|
</fieldset>
|
||||||
|
<fieldset name="buttons">
|
||||||
|
<button>Übernehmen <IconifyIcon icon={checkIcon} color="green" /></button>
|
||||||
|
<button>Abbrechen <IconifyIcon icon={xIcon} /></button>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
Reference in New Issue
Block a user