refactor/js-repositories #20
@@ -1,140 +1,32 @@
|
|||||||
<script>
|
<script>
|
||||||
import {WorkingHoursRepository} from "../components/Repositories.svelte"
|
import List from "./WorkingHours/List.svelte";
|
||||||
let title = "Bearbeitung Einträge"
|
import Formular from "./WorkingHours/Formular.svelte";
|
||||||
import IconifyIcon from '@iconify/svelte';
|
|
||||||
import wrenchIcon from '@iconify-icons/oi/wrench';
|
let TITLE = "Bearbeitung Einträge"
|
||||||
import checkIcon from '@iconify-icons/oi/check';
|
|
||||||
import xIcon from '@iconify-icons/oi/x';
|
|
||||||
import documentIcon from '@iconify-icons/oi/document';
|
|
||||||
let activeRecord = null;
|
let activeRecord = null;
|
||||||
let newRecord = false;
|
let newRecord = false;
|
||||||
params = {
|
|
||||||
title: 'Einträge',
|
|
||||||
records: [],
|
|
||||||
isLoading: true
|
|
||||||
}
|
|
||||||
const Controller = {
|
|
||||||
'listRecords': () => {
|
|
||||||
Controller.cancelActiveRecord();
|
|
||||||
WorkingHoursRepository.browse().then(data => {
|
|
||||||
Controller.cancelActiveRecord()
|
|
||||||
params.records = data
|
|
||||||
params.isLoading = false
|
|
||||||
});
|
|
||||||
},
|
|
||||||
'newRecord': () => {
|
|
||||||
activeRecord = {workingTime: '00:00:00'};
|
|
||||||
newRecord = true;
|
|
||||||
},
|
|
||||||
'saveRecord': () => {
|
|
||||||
if (newRecord === true) {
|
|
||||||
WorkingHoursRepository.add(activeRecord).then(() => {
|
|
||||||
Controller.listRecords()
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
WorkingHoursRepository.update(activeRecord.workingDay, activeRecord).then(() => {
|
|
||||||
Controller.listRecords()
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'selectActiveRecord': record => WorkingHoursRepository.read(record.workingDay).then(data => {
|
|
||||||
if (data === null) {
|
|
||||||
Controller.listRecords()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
activeRecord = data;
|
|
||||||
}),
|
|
||||||
'cancelActiveRecord': () => {
|
|
||||||
activeRecord = null;
|
|
||||||
newRecord = false;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const initSite = () => {
|
|
||||||
Controller.listRecords()
|
|
||||||
};
|
|
||||||
initSite()
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<title>{title}</title>
|
<title>{TITLE}</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
{#if activeRecord === null}
|
{#if activeRecord === null}
|
||||||
<section id="list-records">
|
<section id="list-records">
|
||||||
<header>
|
<header>
|
||||||
<h1>{title}</h1>
|
<h1>{TITLE}</h1>
|
||||||
</header>
|
</header>
|
||||||
<article>
|
<article>
|
||||||
{#if params.isLoading === true}
|
<List bind:activeRecord={activeRecord} bind:newRecord={newRecord}/>
|
||||||
<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>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
{:else}
|
{:else}
|
||||||
<section id="edit-record">
|
<section id="edit-record">
|
||||||
<header>
|
<header>
|
||||||
<h1>{title}</h1>
|
<h1>{TITLE}</h1>
|
||||||
</header>
|
</header>
|
||||||
<article>
|
<article>
|
||||||
<!--suppress HtmlUnknownTarget -->
|
<Formular bind:activeRecord={activeRecord} bind:newRecord={newRecord}/>
|
||||||
<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}/>
|
|
||||||
</button>
|
|
||||||
</fieldset>
|
|
||||||
</form>
|
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@@ -0,0 +1,49 @@
|
|||||||
|
<script>
|
||||||
|
import {WorkingHoursRepository} from "../../components/Repositories.svelte"
|
||||||
|
import IconifyIcon from '@iconify/svelte'
|
||||||
|
import checkIcon from '@iconify-icons/oi/check'
|
||||||
|
import xIcon from '@iconify-icons/oi/x'
|
||||||
|
|
||||||
|
export let activeRecord = null
|
||||||
|
export let newRecord = false
|
||||||
|
const Controller = {
|
||||||
|
'saveRecord': () => {
|
||||||
|
if (newRecord === true) {
|
||||||
|
WorkingHoursRepository.add(activeRecord).then(() => {
|
||||||
|
Controller.cancelActiveRecord()
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
WorkingHoursRepository.update(activeRecord.workingDay, activeRecord).then(() => {
|
||||||
|
Controller.cancelActiveRecord()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'cancelActiveRecord': () => {
|
||||||
|
activeRecord = null;
|
||||||
|
newRecord = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<!--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}/>
|
||||||
|
</button>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
@@ -0,0 +1,78 @@
|
|||||||
|
<script>
|
||||||
|
import {WorkingHoursRepository} from "../../components/Repositories.svelte"
|
||||||
|
|
||||||
|
export let activeRecord = null
|
||||||
|
export let newRecord = false
|
||||||
|
let isLoading = true
|
||||||
|
let records = []
|
||||||
|
import IconifyIcon from '@iconify/svelte'
|
||||||
|
import wrenchIcon from '@iconify-icons/oi/wrench'
|
||||||
|
import documentIcon from '@iconify-icons/oi/document'
|
||||||
|
|
||||||
|
const Controller = {
|
||||||
|
'listRecords': () => {
|
||||||
|
Controller.cancelActiveRecord();
|
||||||
|
WorkingHoursRepository.browse().then(data => {
|
||||||
|
Controller.cancelActiveRecord()
|
||||||
|
records = data
|
||||||
|
isLoading = false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
'newRecord': () => {
|
||||||
|
activeRecord = {workingTime: '00:00:00'};
|
||||||
|
newRecord = true;
|
||||||
|
},
|
||||||
|
'selectActiveRecord': record => WorkingHoursRepository.read(record.workingDay).then(data => {
|
||||||
|
if (data === null) {
|
||||||
|
Controller.listRecords()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
activeRecord = data;
|
||||||
|
}),
|
||||||
|
'cancelActiveRecord': () => {
|
||||||
|
activeRecord = null;
|
||||||
|
newRecord = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Controller.listRecords()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!--suppress HtmlUnknownTarget -->
|
||||||
|
<form action="/working-hours">
|
||||||
|
<fieldset>
|
||||||
|
<button on:click={Controller.newRecord} type="button">Neuer Eintrag
|
||||||
|
<IconifyIcon icon={documentIcon}/>
|
||||||
|
</button>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
{#if isLoading === true}
|
||||||
|
<p>Loading...</p>
|
||||||
|
{:else}
|
||||||
|
<table>
|
||||||
|
<colgroup>
|
||||||
|
<col/>
|
||||||
|
<col/>
|
||||||
|
<col/>
|
||||||
|
</colgroup>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Datum</th>
|
||||||
|
<th>Arbeitsstunden</th>
|
||||||
|
<th>Aktionen</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{#each 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}
|
||||||
Reference in New Issue
Block a user