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

refactor: Eintrag-Feldset ist in eigenen Modul besser aufgehoben

Browse Source 
Eine Erweiterung auf weitere Möglichkeiten lassen sich so besser umsetzen.
This commit is contained in:
Torstem_JetBrain
2021-12-14 12:32:22 +01:00
parent f3ff303b93
commit fafc2a0ad5
2 changed files with 80 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/routes/WorkingHours.svelte
+63 -77
View File
@@ -1,11 +1,13 @@
<script>
export let params;
let title = "Bearbeitung Einträge"
const 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';
import documentIcon from '@iconify-icons/oi/document';
import {WorkingHoursRepository} from '../components/Repositories.svelte'
import NewByDay from "./working-hours/NewByDay.svelte";
let activeRecord = null;
params = {
title: 'Einträge',
@@ -51,85 +53,69 @@
</script>
<svelte:head>
<title>{title}</title>
<title>{TITLE}</title>
</svelte:head>
{#if activeRecord === null}
<section id="list-records">
<header>
<h1>{title}</h1>
</header>
<article>
{#if params.isLoading === true}
<p>Loading...</p>
{:else}
<!--suppress HtmlUnknownTarget -->
<form action="/working-hours">
<fieldset>
<button on:click={Controller.newRecord} type="button">Neuer Eintrag
<IconifyIcon icon={documentIcon}/>
</button>
</fieldset>
</form>
<table>
<colgroup>
<col />
<col />
<col />
</colgroup>
<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={() => Controller.selectActiveRecord(record)} type="button">Bearbeiten
<IconifyIcon icon={wrenchIcon}/>
</button>
</td>
</tr>
{/each}
</tbody>
</table>
{/if}
</article>
</section>
{:else}
<section id="edit-record">
<header>
<h1>{title}</h1>
</header>
<article>
<section id="list-records">
<header>
<h1>{TITLE}</h1>
</header>
{#if activeRecord === null}
<article>
{#if params.isLoading === true}
<p>Loading...</p>
{:else}
<!--suppress HtmlUnknownTarget -->
<form action="/working-hours" name="editRecord">
<fieldset name="record-data">
<div>
<label for="workingDay">Arbeitstag</label>
<input bind:value={activeRecord.workingDay} type="date"
id="workingDay" required pattern="\d\{4}-[0-1]\d-[0-3]\d\">
</div>
<div>
<label for="workingTime">Arbeitszeit</label>
<input bind:value={activeRecord.workingTime} placeholder="Arbeitszeit" type="time"
id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
</div>
</fieldset>
<fieldset name="buttons">
<button on:click={Controller.saveRecord} type="button">Übernehmen
<IconifyIcon icon={checkIcon} color="green"/>
</button>
<button on:click={Controller.cancelActiveRecord} type="button" class="sub-button">Abbrechen
<IconifyIcon icon={xIcon}/>
<form action="/working-hours">
<fieldset>
<button on:click={Controller.newRecord} type="button">Neuer Eintrag
<IconifyIcon icon={documentIcon}/>
</button>
</fieldset>
</form>
</article>
</section>
{/if}
<table>
<colgroup>
<col />
<col />
<col />
</colgroup>
<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={() => Controller.selectActiveRecord(record)} type="button">Bearbeiten
<IconifyIcon icon={wrenchIcon}/>
</button>
</td>
</tr>
{/each}
</tbody>
</table>
{/if}
</article>
{:else}
<article>
<!--suppress HtmlUnknownTarget -->
<form action="/working-hours" name="editRecord">
<NewByDay activeRecord="{activeRecord}"/>
<fieldset name="buttons">
<button on:click={Controller.saveRecord} type="button">Übernehmen
<IconifyIcon icon={checkIcon} color="green"/>
</button>
<button on:click={Controller.cancelActiveRecord} type="button" class="sub-button">Abbrechen
<IconifyIcon icon={xIcon}/>
</button>
</fieldset>
</form>
</article>
{/if}
</section>
ui/src/routes/working-hours/NewByDay.svelte
+17
View File
@@ -0,0 +1,17 @@
<script>
export let activeRecord
</script>
<fieldset name="record-data">
<div>
<label for="workingDay">Arbeitstag</label>
<input bind:value={activeRecord.workingDay} type="date"
id="workingDay" required pattern="\d\{4}-[0-1]\d-[0-3]\d\">
</div>
<div>
<label for="workingTime">Arbeitszeit</label>
<input bind:value={activeRecord.workingTime} placeholder="Arbeitszeit" type="time"
id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
</div>
</fieldset>