refactor/js-repositories #20
@@ -0,0 +1,83 @@
|
||||
<script context="module">
|
||||
const MyFetch = {
|
||||
'post': async (rest_url, request_body) => {
|
||||
return MyFetch._fetch(rest_url, {
|
||||
method: 'POST',
|
||||
mode: 'cors',
|
||||
cache: 'no-cache',
|
||||
credentials: 'omit',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: request_body,
|
||||
}, {})
|
||||
},
|
||||
'put': async (rest_url, http_body) => {
|
||||
return MyFetch._fetch(rest_url, {
|
||||
method: 'PUT',
|
||||
mode: 'cors',
|
||||
cache: 'no-cache',
|
||||
credentials: 'omit',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: http_body,
|
||||
}, {})
|
||||
},
|
||||
'get': async (rest_url, query_parameters) => {
|
||||
if (query_parameters !== null) {
|
||||
let filter = []
|
||||
for (let parameter in query_parameters) {
|
||||
filter.push(parameter + '=' + query_parameters[parameter])
|
||||
}
|
||||
if (filter.length > 0) {
|
||||
rest_url += '?' + filter.join('&')
|
||||
}
|
||||
}
|
||||
return MyFetch._fetch(rest_url, {})
|
||||
},
|
||||
'_fetch': async (rest_url, request_options) => {
|
||||
// noinspection JSUnresolvedVariable
|
||||
let response = await fetch(env.API_URL + rest_url, request_options).catch(err => {
|
||||
console.error(err)
|
||||
return null
|
||||
})
|
||||
if (!response.ok) {
|
||||
throw new Error('Fail!')
|
||||
}
|
||||
return response.json()
|
||||
}
|
||||
}
|
||||
|
||||
export const WorkingHoursRepository = {
|
||||
'browse': () => {
|
||||
return MyFetch.get('/working-hours')
|
||||
},
|
||||
|
||||
'read': date => {
|
||||
return MyFetch.get('/working-hours/' + date)
|
||||
},
|
||||
|
||||
'add': async (record) => {
|
||||
console.debug(record);
|
||||
return MyFetch.post('/working-hours', JSON.stringify(record))
|
||||
},
|
||||
|
||||
'update': async (date, record) => {
|
||||
console.debug(record);
|
||||
return MyFetch.put('/working-hours/' + date, JSON.stringify(record))
|
||||
}
|
||||
}
|
||||
|
||||
export const WorkingHoursViewsRepository = {
|
||||
'weekly': async () => {
|
||||
return MyFetch.get('/views/working-hours/weekly')
|
||||
},
|
||||
'monthly': async () => {
|
||||
return MyFetch.get('/views/working-hours/monthly')
|
||||
},
|
||||
'yearly': async () => {
|
||||
return MyFetch.get('/views/working-hours/yearly')
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -1,31 +1,11 @@
|
||||
<script>
|
||||
import Views from "./Views.svelte";
|
||||
export let params;
|
||||
import {WorkingHoursViewsRepository} from "../components/Repositories.svelte";
|
||||
export let params
|
||||
params = {
|
||||
title: 'Monatsansicht',
|
||||
records: [],
|
||||
isLoading: true
|
||||
promise: WorkingHoursViewsRepository.monthly()
|
||||
}
|
||||
const View = {
|
||||
'browse': () => {
|
||||
fetch(env.API_URL + '/views/working-hours/monthly')
|
||||
.then(res => {
|
||||
if (!res.ok) {
|
||||
throw new Error('Fail!');
|
||||
}
|
||||
return res.json();
|
||||
})
|
||||
.then(data => {
|
||||
params.records = data;
|
||||
params.isLoading = false;
|
||||
})
|
||||
.catch(err => {
|
||||
params.isLoading = false;
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
};
|
||||
View.browse();
|
||||
</script>
|
||||
|
||||
<Views {params} />
|
||||
@@ -1,5 +1,7 @@
|
||||
<script>
|
||||
export let params;
|
||||
export let params = {};
|
||||
let records = []
|
||||
let isLoading = true
|
||||
console.log(params)
|
||||
if (!String.prototype.startsWith) {
|
||||
String.prototype.startsWith = function(searchString, position) {
|
||||
@@ -9,6 +11,12 @@
|
||||
}
|
||||
$: isNegative = time => time.startsWith('-') ? 'absence-time' : '';
|
||||
$: cutMinusChar = time => time.startsWith('-') ? time.substr(1) : time;
|
||||
|
||||
const init = async () => await params.promise.then(data => {
|
||||
records = data
|
||||
isLoading = false
|
||||
})
|
||||
init()
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -20,7 +28,7 @@
|
||||
<h1>{params.title}</h1>
|
||||
</header>
|
||||
<article>
|
||||
{#if params.isLoading === true}
|
||||
{#if isLoading === true}
|
||||
<p>Loading...</p>
|
||||
{:else}
|
||||
<table>
|
||||
@@ -39,7 +47,7 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each params.records as record}
|
||||
{#each records as record}
|
||||
<tr>
|
||||
<td>{record.period}</td>
|
||||
<td>{record.workingDays}</td>
|
||||
|
||||
@@ -1,31 +1,11 @@
|
||||
<script>
|
||||
import Views from "./Views.svelte";
|
||||
export let params;
|
||||
import {WorkingHoursViewsRepository} from "../components/Repositories.svelte";
|
||||
export let params
|
||||
params = {
|
||||
title: 'Wochenansicht',
|
||||
records: [],
|
||||
isLoading: true
|
||||
promise: WorkingHoursViewsRepository.weekly()
|
||||
}
|
||||
const View = {
|
||||
'browse': () => {
|
||||
fetch(env.API_URL + '/views/working-hours/weekly')
|
||||
.then(res => {
|
||||
if (!res.ok) {
|
||||
throw new Error('Fail!');
|
||||
}
|
||||
return res.json();
|
||||
})
|
||||
.then(data => {
|
||||
params.records = data;
|
||||
params.isLoading = false;
|
||||
})
|
||||
.catch(err => {
|
||||
params.isLoading = false;
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
};
|
||||
View.browse();
|
||||
</script>
|
||||
|
||||
<Views {params} />
|
||||
@@ -1,216 +1,32 @@
|
||||
<script>
|
||||
export let params;
|
||||
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 Records = {
|
||||
'browse': () => {
|
||||
// noinspection JSUnresolvedVariable
|
||||
fetch(env.API_URL + '/working-hours')
|
||||
.then(res => {
|
||||
if (!res.ok) {
|
||||
throw new Error('Fail!');
|
||||
}
|
||||
return res.json();
|
||||
})
|
||||
.then(data => {
|
||||
Controller.cancelActiveRecord();
|
||||
params.records = data;
|
||||
params.isLoading = false;
|
||||
})
|
||||
.catch(err => {
|
||||
params.isLoading = false;
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
'read': date => {
|
||||
// noinspection JSUnresolvedVariable
|
||||
fetch(env.API_URL + '/working-hours/' + date)
|
||||
.then(res => {
|
||||
if (!res.ok) {
|
||||
throw new Error('Fail!');
|
||||
}
|
||||
return res.json();
|
||||
})
|
||||
.then(data => {
|
||||
activeRecord = data;
|
||||
if (date === null) {
|
||||
Controller.listRecords();
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
'add': async record => {
|
||||
console.log(record);
|
||||
// noinspection JSUnresolvedVariable
|
||||
await fetch(env.API_URL + '/working-hours', {
|
||||
method: 'POST',
|
||||
mode: 'cors',
|
||||
cache: 'no-cache',
|
||||
credentials: 'omit',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(record)
|
||||
})
|
||||
.then(res => {
|
||||
if (!res.ok) {
|
||||
throw new Error('Fail!');
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
Controller.listRecords();
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
'update': async (date, record) => {
|
||||
console.log(record);
|
||||
// noinspection JSUnresolvedVariable
|
||||
await fetch(env.API_URL + '/working-hours/' + date, {
|
||||
method: 'PUT',
|
||||
mode: 'cors',
|
||||
cache: 'no-cache',
|
||||
credentials: 'omit',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(record)
|
||||
})
|
||||
.then(res => {
|
||||
if (!res.ok) {
|
||||
throw new Error('Fail!');
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
Controller.listRecords();
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
};
|
||||
const Controller = {
|
||||
'listRecords': () => {
|
||||
Controller.cancelActiveRecord();
|
||||
Records.browse();
|
||||
},
|
||||
'newRecord': () => {
|
||||
activeRecord = {workingTime: '00:00:00'};
|
||||
newRecord = true;
|
||||
},
|
||||
'saveRecord': () => {
|
||||
if (newRecord === true) {
|
||||
Records.add(activeRecord);
|
||||
} else {
|
||||
Records.update(activeRecord.workingDay, activeRecord);
|
||||
}
|
||||
},
|
||||
'selectActiveRecord': record => Records.read(record.workingDay),
|
||||
'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}
|
||||
@@ -1,31 +1,11 @@
|
||||
<script>
|
||||
import Views from "./Views.svelte";
|
||||
export let params;
|
||||
import {WorkingHoursViewsRepository} from "../components/Repositories.svelte";
|
||||
export let params
|
||||
params = {
|
||||
title: 'Jahresansicht',
|
||||
records: [],
|
||||
isLoading: true
|
||||
promise: WorkingHoursViewsRepository.yearly()
|
||||
}
|
||||
const View = {
|
||||
'browse': () => {
|
||||
fetch(env.API_URL + '/views/working-hours/yearly')
|
||||
.then(res => {
|
||||
if (!res.ok) {
|
||||
throw new Error('Fail!');
|
||||
}
|
||||
return res.json();
|
||||
})
|
||||
.then(data => {
|
||||
params.records = data;
|
||||
params.isLoading = false;
|
||||
})
|
||||
.catch(err => {
|
||||
params.isLoading = false;
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
};
|
||||
View.browse();
|
||||
</script>
|
||||
|
||||
<Views {params} />
|
||||
Reference in New Issue
Block a user