TorstenHettstedt/PHP-App-Timekeeping
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Die gewünschte HTML-Struktur wurde übernommen.

Browse Source
This commit is contained in:
Torstem_JetBrain
2021-04-08 19:09:44 +02:00
parent 881e7362f8
commit 89ad394773
3 changed files with 86 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/App.svelte
+5 -2
View File
@@ -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';
ui/src/routes/Views.svelte
+27 -22
View File
@@ -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>
ui/src/routes/WorkingHours.svelte
+54 -42
View File
@@ -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}