refactor/update #30
@@ -1,15 +0,0 @@
|
|||||||
<script context="module">
|
|
||||||
export class TimekeepingDate extends Date {
|
|
||||||
getDateString() {
|
|
||||||
return this.getFullYear() + "-"
|
|
||||||
+ (this.getMonth() + 1).toString().padStart(2, '0') + "-"
|
|
||||||
+ this.getDate().toString().padStart(2, '0')
|
|
||||||
}
|
|
||||||
|
|
||||||
getNextDay() {
|
|
||||||
let nextDay = new TimekeepingDate(this);
|
|
||||||
nextDay.setDate(this.getDate() + 1)
|
|
||||||
return nextDay
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -121,7 +121,6 @@
|
|||||||
* @param {Object} record
|
* @param {Object} record
|
||||||
*/
|
*/
|
||||||
'update': async (api_url, date, record) => {
|
'update': async (api_url, date, record) => {
|
||||||
console.debug(record);
|
|
||||||
return MyFetch.put(api_url + '/working-hours/' + date, JSON.stringify(record))
|
return MyFetch.put(api_url + '/working-hours/' + date, JSON.stringify(record))
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
@@ -130,7 +129,6 @@
|
|||||||
* @param {Object} record
|
* @param {Object} record
|
||||||
*/
|
*/
|
||||||
'addOrUpdate': async (api_url, date, record) => {
|
'addOrUpdate': async (api_url, date, record) => {
|
||||||
console.debug(record);
|
|
||||||
let request_options = MyFetch._buildRequestOptions(JSON.stringify(record), false)
|
let request_options = MyFetch._buildRequestOptions(JSON.stringify(record), false)
|
||||||
let response = await MyFetch._pureFetch(api_url + '/working-hours', request_options)
|
let response = await MyFetch._pureFetch(api_url + '/working-hours', request_options)
|
||||||
if (response.status === 409) {
|
if (response.status === 409) {
|
||||||
|
|||||||
@@ -1,14 +1,19 @@
|
|||||||
<script>
|
<script>
|
||||||
|
import { page } from '$app/state';
|
||||||
let { children } = $props();
|
let { children } = $props();
|
||||||
|
/** @param {String} str **/
|
||||||
|
const isActive = str => page.url.pathname === str;
|
||||||
|
/** @param {String} str **/
|
||||||
|
const isSelected = str => isActive(str) ? 'selected' : '';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="/">Home</a></li>
|
<li class="{isSelected('/')}"><a href="/" aria-current={isActive('/')}>Home</a></li>
|
||||||
<li><a href="/views/weekly">Wochenansicht</a></li>
|
<li class="{isSelected('/views/weekly')}"><a href="/views/weekly" aria-current={isActive('/views/weekly')}>Wochenansicht</a></li>
|
||||||
<li><a href="/views/monthly">Monatsansicht</a></li>
|
<li class="{isSelected('/views/monthly')}"><a href="/views/monthly" aria-current={isActive('/views/monthly')}>Monatsansicht</a></li>
|
||||||
<li><a href="/views/yearly">Jahresansicht</a></li>
|
<li class="{isSelected('/views/yearly')}"><a href="/views/yearly" aria-current={isActive('/views/yearly')}>Jahresansicht</a></li>
|
||||||
<!-- <li><a href="/working-hours">Einträge</a></li>-->
|
<li class="{isSelected('/working-hours')}"><a href="/working-hours" aria-current={isActive('/working-hours')}>Einträge</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|||||||
@@ -1,126 +0,0 @@
|
|||||||
<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'
|
|
||||||
import EditByDay from "./Formular/EditByDay.svelte";
|
|
||||||
import EditByWeek from "./Formular/EditByWeek.svelte";
|
|
||||||
import ImportCsv from "./Formular/ImportCsv.svelte";
|
|
||||||
import {TimekeepingDate} from "../../components/TimekeepingDate.svelte";
|
|
||||||
|
|
||||||
const DAILY_EDIT = 0
|
|
||||||
const WEEKLY_EDIT = 1
|
|
||||||
const CSV_IMPORT = 2
|
|
||||||
|
|
||||||
const Controller = {
|
|
||||||
'saveRecord': () => {
|
|
||||||
activeRecordList.forEach((actualRecord) => {
|
|
||||||
if (actualRecord.workingTime === '00:00:00') {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
WorkingHoursRepository.addOrUpdate(actualRecord.workingDay, actualRecord);
|
|
||||||
})
|
|
||||||
activeDate = nextDate
|
|
||||||
makeTimekeepingList()
|
|
||||||
},
|
|
||||||
'cancelActiveRecord': () => {
|
|
||||||
activeRecordList = []
|
|
||||||
activeRecord = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const WeekController = {
|
|
||||||
'makeTimekeepingList': () => {
|
|
||||||
let actualDay = WeekController.getMondayFromWeek(
|
|
||||||
activeDate === null ? new TimekeepingDate() : new TimekeepingDate(activeDate)
|
|
||||||
)
|
|
||||||
activeRecordList = []
|
|
||||||
activeDate = actualDay.getDateString()
|
|
||||||
for (const daysDiff in [0, 1, 2, 3, 4, 5, 6]) {
|
|
||||||
activeRecordList.push({workingTime: '00:00:00', workingDay: actualDay.getDateString()})
|
|
||||||
actualDay = actualDay.getNextDay()
|
|
||||||
}
|
|
||||||
nextDate = actualDay.getDateString()
|
|
||||||
WorkingHoursRepository.browse(activeRecordList[0].workingDay, activeRecordList[6].workingDay).then(data => {
|
|
||||||
data.forEach(item => {
|
|
||||||
let actualDay = new TimekeepingDate(item.workingDay)
|
|
||||||
activeRecordList[actualDay.getDay()-1].workingTime = item.workingTime
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
'getMondayFromWeek': actualDayObject => {
|
|
||||||
if (actualDayObject.getDate() === 0) {
|
|
||||||
actualDayObject.setDate(actualDayObject.getDate() - 7)
|
|
||||||
}
|
|
||||||
if (actualDayObject.getDate() !== 1) {
|
|
||||||
actualDayObject.setDate(actualDayObject.getDate() - (actualDayObject.getDay() - 1))
|
|
||||||
}
|
|
||||||
return actualDayObject
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const DayController = {
|
|
||||||
'makeTimekeepingList': () => {
|
|
||||||
let actualDay = activeDate === null ? new TimekeepingDate() : new TimekeepingDate(activeDate)
|
|
||||||
WorkingHoursRepository.readOrNew(actualDay.getDateString()).then(data => {
|
|
||||||
activeRecordList = [ data ]
|
|
||||||
activeDate = actualDay.getDateString()
|
|
||||||
nextDate = actualDay.getNextDay().getDateString()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const CsvController = {
|
|
||||||
'makeTimekeepingList': () => {
|
|
||||||
MenuController.dailyEdit()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const MenuController = {
|
|
||||||
'dailyEdit': () => {
|
|
||||||
period_of_edit = DAILY_EDIT
|
|
||||||
makeTimekeepingList = DayController.makeTimekeepingList
|
|
||||||
makeTimekeepingList()
|
|
||||||
},
|
|
||||||
'weeklyEdit': () => {
|
|
||||||
period_of_edit = WEEKLY_EDIT
|
|
||||||
makeTimekeepingList = WeekController.makeTimekeepingList
|
|
||||||
makeTimekeepingList()
|
|
||||||
},
|
|
||||||
'csvImport': () => {
|
|
||||||
period_of_edit = CSV_IMPORT
|
|
||||||
activeRecordList = []
|
|
||||||
makeTimekeepingList = CsvController.makeTimekeepingList
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let activeDate = null
|
|
||||||
let nextDate = null
|
|
||||||
let activeRecordList = []
|
|
||||||
export let activeRecord = null
|
|
||||||
let period_of_edit
|
|
||||||
let makeTimekeepingList
|
|
||||||
|
|
||||||
MenuController.dailyEdit()
|
|
||||||
</script>
|
|
||||||
<!--suppress HtmlUnknownTarget -->
|
|
||||||
<form action="/working-hours" name="editRecord">
|
|
||||||
<nav class="menu">
|
|
||||||
<span on:click={MenuController.dailyEdit} on:keypress={() => {}} class:active={period_of_edit === DAILY_EDIT}>Täglich</span>
|
|
||||||
<span on:click={MenuController.weeklyEdit} on:keypress={() => {}} class:active={period_of_edit === WEEKLY_EDIT}>Wöchentlich</span>
|
|
||||||
<span on:click={MenuController.csvImport} on:keypress={() => {}} class:active={period_of_edit === CSV_IMPORT}>Import per CSV</span>
|
|
||||||
</nav>
|
|
||||||
{#if period_of_edit === DAILY_EDIT}
|
|
||||||
<EditByDay bind:activeRecordList bind:activeDate bind:makeTimekeepingList/>
|
|
||||||
{/if}
|
|
||||||
{#if period_of_edit === WEEKLY_EDIT}
|
|
||||||
<EditByWeek bind:activeRecordList bind:activeDate bind:makeTimekeepingList/>
|
|
||||||
{/if}
|
|
||||||
{#if period_of_edit === CSV_IMPORT}
|
|
||||||
<ImportCsv bind:activeRecordList bind:makeTimekeepingList/>
|
|
||||||
{/if}
|
|
||||||
<fieldset name="buttons">
|
|
||||||
<button on:click={Controller.saveRecord} type="button">Übernehmen und Weiter
|
|
||||||
<IconifyIcon icon={checkIcon} color="green"/>
|
|
||||||
</button>
|
|
||||||
<button on:click={Controller.cancelActiveRecord} type="button" class="sub-button">Abbrechen
|
|
||||||
<IconifyIcon icon={xIcon}/>
|
|
||||||
</button>
|
|
||||||
</fieldset>
|
|
||||||
</form>
|
|
||||||
@@ -1,24 +0,0 @@
|
|||||||
<script>
|
|
||||||
export let activeDate = null
|
|
||||||
export let activeRecordList = []
|
|
||||||
export let makeTimekeepingList = () => {}
|
|
||||||
|
|
||||||
makeTimekeepingList()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{#if activeRecordList.length < 1}
|
|
||||||
<p>Loading...</p>
|
|
||||||
{:else}
|
|
||||||
<fieldset name="record-data-by-day">
|
|
||||||
<div>
|
|
||||||
<label for="workingDay">Arbeitstag</label>
|
|
||||||
<input bind:value={activeDate} type="date" on:change={makeTimekeepingList}
|
|
||||||
id="workingDay" required pattern="\d\{4}-[0-1]\d-[0-3]\d\">
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label for="workingTime">Arbeitszeit</label>
|
|
||||||
<input bind:value={activeRecordList[0].workingTime} placeholder="Arbeitszeit" type="time"
|
|
||||||
id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
{/if}
|
|
||||||
@@ -1,62 +0,0 @@
|
|||||||
<script>
|
|
||||||
export let activeDate = null
|
|
||||||
export let activeRecordList = []
|
|
||||||
export let makeTimekeepingList = () => {}
|
|
||||||
|
|
||||||
makeTimekeepingList()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
tbody.weekend td input, tbody.weekend td {
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
input#monday {
|
|
||||||
display: inline;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
||||||
{#if activeRecordList.length < 1}
|
|
||||||
<p>Loading...</p>
|
|
||||||
{:else}
|
|
||||||
<fieldset name="how-week-is-use">
|
|
||||||
<div>
|
|
||||||
<label for="monday">Woche vom</label>
|
|
||||||
<input bind:value={activeDate} type="date" on:change={makeTimekeepingList}
|
|
||||||
id="monday" required pattern="\d\{4}-[0-1]\d-[0-3]\d\">
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
<fieldset name="record-data-by-week">
|
|
||||||
<div>
|
|
||||||
<table>
|
|
||||||
<tbody>
|
|
||||||
{#each ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag'] as day, index}
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
{day}
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<input bind:value={activeRecordList[index].workingTime} placeholder="Arbeitszeit" type="time"
|
|
||||||
required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{/each}
|
|
||||||
</tbody>
|
|
||||||
<tbody class="weekend">
|
|
||||||
{#each ['Samstag', 'Sontag'] as day, index}
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
{day}
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<input bind:value={activeRecordList[index+5].workingTime} placeholder="Arbeitszeit" type="time"
|
|
||||||
required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{/each}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
{/if}
|
|
||||||
@@ -1,95 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { WorkingHoursRepository } from '../../components/Repositories.svelte'
|
|
||||||
import { TimekeepingDate } from '../../components/TimekeepingDate.svelte'
|
|
||||||
import { paginate, PaginationNav } from 'svelte-paginate'
|
|
||||||
import IconifyIcon from '@iconify/svelte'
|
|
||||||
import wrenchIcon from '@iconify-icons/oi/wrench'
|
|
||||||
import documentIcon from '@iconify-icons/oi/document'
|
|
||||||
|
|
||||||
export let activeRecord = null
|
|
||||||
let isLoading = true
|
|
||||||
let records = []
|
|
||||||
export let currentPage = 1
|
|
||||||
let pageSize = 15
|
|
||||||
$: paginatedItems = paginate({ items: records, pageSize, currentPage })
|
|
||||||
|
|
||||||
const Controller = {
|
|
||||||
'listRecords': () => {
|
|
||||||
Controller.cancelActiveRecord()
|
|
||||||
WorkingHoursRepository.browse().then(data => {
|
|
||||||
Controller.cancelActiveRecord()
|
|
||||||
records = data
|
|
||||||
isLoading = false
|
|
||||||
})
|
|
||||||
},
|
|
||||||
'newRecord': async () => {
|
|
||||||
const actDate = new TimekeepingDate()
|
|
||||||
activeRecord = await WorkingHoursRepository.readOrNew(actDate.getDateString())
|
|
||||||
},
|
|
||||||
'selectActiveRecord': record => WorkingHoursRepository.read(record.workingDay).then(data => {
|
|
||||||
if (data === null) {
|
|
||||||
Controller.listRecords()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
activeRecord = data
|
|
||||||
}),
|
|
||||||
'cancelActiveRecord': () => {
|
|
||||||
activeRecord = null
|
|
||||||
},
|
|
||||||
}
|
|
||||||
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 paginatedItems 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>
|
|
||||||
<tfoot>
|
|
||||||
<tr>
|
|
||||||
<td colspan="4">
|
|
||||||
<PaginationNav
|
|
||||||
totalItems="{records.length}"
|
|
||||||
pageSize="{pageSize}"
|
|
||||||
currentPage="{currentPage}"
|
|
||||||
limit="{1}"
|
|
||||||
showStepOptions="{true}"
|
|
||||||
on:setPage="{(e) => currentPage = e.detail.page}"
|
|
||||||
/>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tfoot>
|
|
||||||
</table>
|
|
||||||
{/if}
|
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
import {env} from '$env/dynamic/private';
|
||||||
|
import {WorkingHoursRepository} from "$lib/Repositories.svelte";
|
||||||
|
|
||||||
|
export function load() {
|
||||||
|
return {
|
||||||
|
promise: WorkingHoursRepository.browse(env.API_URL)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @param {Date} actualDayObject **/
|
||||||
|
const getMonday = actualDayObject => {
|
||||||
|
if (actualDayObject.getDate() === 0) {
|
||||||
|
actualDayObject.setDate(actualDayObject.getDate() - 7)
|
||||||
|
}
|
||||||
|
if (actualDayObject.getDate() !== 1) {
|
||||||
|
actualDayObject.setDate(actualDayObject.getDate() - (actualDayObject.getDay() - 1))
|
||||||
|
}
|
||||||
|
return actualDayObject
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @type {String[]} **/
|
||||||
|
const day_list = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sontag']
|
||||||
|
|
||||||
|
/** @param {Date} actualDayObject **/
|
||||||
|
const getDateString = actualDayObject => {
|
||||||
|
return actualDayObject.getFullYear() + "-"
|
||||||
|
+ (actualDayObject.getMonth() + 1).toString().padStart(2, '0') + "-"
|
||||||
|
+ actualDayObject.getDate().toString().padStart(2, '0')
|
||||||
|
}
|
||||||
|
|
||||||
|
export const actions = {
|
||||||
|
update: async ({ request }) => {
|
||||||
|
const data = await request.formData();
|
||||||
|
const body_data = {
|
||||||
|
workingDay: data.get('workingDay'),
|
||||||
|
workingTime: data.get('workingTime'),
|
||||||
|
}
|
||||||
|
await WorkingHoursRepository.update(env.API_URL, data.get('workingDay'), body_data);
|
||||||
|
},
|
||||||
|
create: async ({ request }) => {
|
||||||
|
const form_data = await request.formData();
|
||||||
|
const body_data = {
|
||||||
|
workingDay: form_data.get('workingDay'),
|
||||||
|
workingTime: form_data.get('workingTime'),
|
||||||
|
}
|
||||||
|
await WorkingHoursRepository.add(env.API_URL, body_data);
|
||||||
|
},
|
||||||
|
"create-by-week": async ({ request }) => {
|
||||||
|
TorstenHettstedt marked this conversation as resolved
|
|||||||
|
const form_data = await request.formData();
|
||||||
|
// @ts-ignore
|
||||||
|
let actualDayObject = getMonday(new Date(form_data.get('week')))
|
||||||
|
day_list.forEach(day => {
|
||||||
|
if (form_data.get(day) !== '00:00:00' && form_data.get(day) !== '00:00') {
|
||||||
|
const working_day = getDateString(actualDayObject)
|
||||||
|
const body_data = {
|
||||||
|
workingDay: working_day,
|
||||||
|
workingTime: form_data.get(day),
|
||||||
|
}
|
||||||
|
WorkingHoursRepository.addOrUpdate(env.API_URL, working_day, body_data);
|
||||||
|
}
|
||||||
|
actualDayObject.setDate(actualDayObject.getDate() + 1)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
};
|
||||||
@@ -0,0 +1,73 @@
|
|||||||
|
<script>
|
||||||
|
import documentIcon from "@iconify-icons/oi/document.js";
|
||||||
|
import wrenchIcon from "@iconify-icons/oi/wrench.js";
|
||||||
|
import IconifyIcon from "@iconify/svelte";
|
||||||
|
let { data } = $props();
|
||||||
|
const TITLE = "Bearbeitung Einträge"
|
||||||
|
/** @type {{workingDay: String, workingTime: String, }[]|null} **/
|
||||||
|
let records = $state([])
|
||||||
|
const init = async () => await data.promise.then(
|
||||||
|
/**
|
||||||
|
* @param {{workingDay: String, workingTime: String, }[]} data
|
||||||
|
*/
|
||||||
|
data => {
|
||||||
|
records = data
|
||||||
|
}
|
||||||
|
)
|
||||||
|
init()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>{TITLE}</title>
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<section id="list-records">
|
||||||
|
<header>
|
||||||
|
<h1>{TITLE}</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<!--suppress HtmlUnknownTarget -->
|
||||||
|
<form action="/working-hours">
|
||||||
|
<fieldset>
|
||||||
|
<legend>Neuer Eintrag</legend>
|
||||||
|
<button formaction="/working-hours/create-by-day" type="submit">per Tag
|
||||||
|
<IconifyIcon icon={documentIcon}/>
|
||||||
|
</button>
|
||||||
|
<button formaction="/working-hours/create-by-week" type="submit">per Woche
|
||||||
|
<IconifyIcon icon={documentIcon}/>
|
||||||
|
</button>
|
||||||
|
</fieldset>
|
||||||
|
{#if records === null}
|
||||||
|
<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 formaction={'/working-hours/' + record.workingDay} type="submit">Bearbeiten
|
||||||
|
<IconifyIcon icon={wrenchIcon}/>
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
{/if}
|
||||||
|
</form>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
import {env} from '$env/dynamic/private';
|
||||||
|
import {WorkingHoursRepository} from "$lib/Repositories.svelte";
|
||||||
|
|
||||||
|
export function load({ params }) {
|
||||||
|
return {
|
||||||
|
working_day: params.working_day,
|
||||||
|
promise: WorkingHoursRepository.read(env.API_URL, params.working_day)
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,57 @@
|
|||||||
|
<script>
|
||||||
|
import IconifyIcon from '@iconify/svelte'
|
||||||
|
import checkIcon from "@iconify-icons/oi/check";
|
||||||
|
import xIcon from "@iconify-icons/oi/x";
|
||||||
|
let { data } = $props();
|
||||||
|
const TITLE = "Bearbeitung eines Eintrags"
|
||||||
|
/** @type {{workingDay: String, workingTime: String, }|null} **/
|
||||||
|
let activeDate = $state(null)
|
||||||
|
const init = async () => await data.promise.then(
|
||||||
|
/**
|
||||||
|
* @param {{workingDay: String, workingTime: String, }} data
|
||||||
|
*/
|
||||||
|
data => {
|
||||||
|
activeDate = data
|
||||||
|
}
|
||||||
|
)
|
||||||
|
init()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>{TITLE}</title>
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
|
||||||
|
<section id="edit-record">
|
||||||
|
<header>
|
||||||
|
<h1>{TITLE}</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<form action="/working-hours?/update" name="editRecord" method="POST">
|
||||||
|
{#if activeDate === null}
|
||||||
|
<p>Loading...</p>
|
||||||
|
{:else}
|
||||||
|
<fieldset name="record-data-by-day">
|
||||||
|
<div>
|
||||||
|
<label for="workingDay">Arbeitstag</label>
|
||||||
|
<input name="workingDay" type="date" id="workingDay" value="{activeDate.workingDay}" required pattern="\d\{4}-[0-1]\d-[0-3]\d">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="workingTime">Arbeitszeit</label>
|
||||||
|
<input name="workingTime" placeholder="Arbeitszeit" type="time" step="1"
|
||||||
|
value="{activeDate.workingTime}"
|
||||||
|
id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
{/if}
|
||||||
|
<fieldset name="buttons">
|
||||||
|
<button type="submit">Übernehmen und Weiter
|
||||||
|
<IconifyIcon icon={checkIcon} color="green"/>
|
||||||
|
</button>
|
||||||
|
<button formmethod="GET" type="submit" class="sub-button">Abbrechen
|
||||||
|
<IconifyIcon icon={xIcon}/>
|
||||||
|
</button>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
<script>
|
||||||
|
import IconifyIcon from '@iconify/svelte'
|
||||||
|
import checkIcon from "@iconify-icons/oi/check";
|
||||||
|
import xIcon from "@iconify-icons/oi/x";
|
||||||
|
import {goto} from "$app/navigation";
|
||||||
|
|
||||||
|
const TITLE = "Erstellung eines neuen Eintrags"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>{TITLE}</title>
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
|
||||||
|
<section id="edit-record">
|
||||||
|
<header>
|
||||||
|
<h1>{TITLE}</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<form action="/working-hours?/create" name="newRecord" method="POST">
|
||||||
|
<fieldset name="record-data-by-day">
|
||||||
|
<div>
|
||||||
|
<label for="workingDay">Arbeitstag</label>
|
||||||
|
<input name="workingDay" type="date" id="workingDay" value="" required
|
||||||
|
pattern="\d\{4}-[0-1]\d-[0-3]\d">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="workingTime">Arbeitszeit</label>
|
||||||
|
<input name="workingTime" placeholder="Arbeitszeit" type="time" step="1" value=""
|
||||||
|
id="workingTime" required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset name="buttons">
|
||||||
|
<button type="submit">Übernehmen und Weiter
|
||||||
|
<IconifyIcon icon={checkIcon} color="green"/>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="sub-button" onclick={() => goto('/working-hours')}>Abbrechen
|
||||||
|
<IconifyIcon icon={xIcon}/>
|
||||||
|
</button>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
@@ -0,0 +1,74 @@
|
|||||||
|
<script>
|
||||||
|
import IconifyIcon from '@iconify/svelte'
|
||||||
|
import checkIcon from "@iconify-icons/oi/check";
|
||||||
|
import xIcon from "@iconify-icons/oi/x";
|
||||||
|
import {goto} from "$app/navigation";
|
||||||
|
const TITLE = "Erstellung neuer Einträge für eine Woche"
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>{TITLE}</title>
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
tbody.weekend td input, tbody.weekend td {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
<section id="edit-record">
|
||||||
|
<header>
|
||||||
|
<h1>{TITLE}</h1>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<form action="/working-hours?/create-by-week" name="newRecord" method="POST">
|
||||||
|
<fieldset name="how-week-is-use">
|
||||||
|
<div>
|
||||||
|
<label for="monday">Woche vom</label>
|
||||||
|
<input name="week" type="date" id="week" required value="">
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset name="record-data-by-week">
|
||||||
|
<div>
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
{#each ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag'] as day}
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
{day}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<input name="{day}" value="08:00:00" type="time" step="1"
|
||||||
|
required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
<tbody class="weekend">
|
||||||
|
{#each ['Samstag', 'Sontag'] as day}
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
{day}
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<input name="{day}" value="00:00:00" type="time" step="1"
|
||||||
|
required pattern="[0-5]\d:[0-5]\d:[0-5]\d">
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<fieldset name="buttons">
|
||||||
|
<button type="submit">Übernehmen und Weiter
|
||||||
|
<IconifyIcon icon={checkIcon} color="green"/>
|
||||||
|
</button>
|
||||||
|
<button type="button" class="sub-button" onclick={() => goto('/working-hours')}>Abbrechen
|
||||||
|
<IconifyIcon icon={xIcon}/>
|
||||||
|
</button>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
Reference in New Issue
Block a user
Nutzung als Prämisse ist glaube ich besser.