refactor/js-repositories #20
@@ -1,140 +1,32 @@
|
||||
<script>
|
||||
import {WorkingHoursRepository} from "../components/Repositories.svelte"
|
||||
let 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 List from "./WorkingHours/List.svelte";
|
||||
import Formular from "./WorkingHours/Formular.svelte";
|
||||
|
||||
let TITLE = "Bearbeitung Einträge"
|
||||
let activeRecord = null;
|
||||
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>
|
||||
|
||||
<svelte:head>
|
||||
<title>{title}</title>
|
||||
<title>{TITLE}</title>
|
||||
</svelte:head>
|
||||
|
||||
{#if activeRecord === null}
|
||||
<section id="list-records">
|
||||
<header>
|
||||
<h1>{title}</h1>
|
||||
<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}
|
||||
<List bind:activeRecord={activeRecord} bind:newRecord={newRecord}/>
|
||||
</article>
|
||||
</section>
|
||||
{:else}
|
||||
<section id="edit-record">
|
||||
<header>
|
||||
<h1>{title}</h1>
|
||||
<h1>{TITLE}</h1>
|
||||
</header>
|
||||
<article>
|
||||
<!--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>
|
||||
<Formular bind:activeRecord={activeRecord} bind:newRecord={newRecord}/>
|
||||
</article>
|
||||
</section>
|
||||
{/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