Files
PHP-App-Timekeeping/ui/src/routes/WorkingHours/Formular.svelte
T

126 lines
5.0 KiB
Svelte

<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>