96 lines
3.1 KiB
Vue
96 lines
3.1 KiB
Vue
<template>
|
|
<div class="dashboard">
|
|
<div class="card-row">
|
|
<CardTop :icon="mdiCalendar" label="Dni pracujących" :data="attendanceStore.workingDays" />
|
|
<CardTop :icon="mdiTent" label="Dni urlopowych" :data="attendanceStore.holidayCount" />
|
|
<CardTop :icon="mdiNeedle" label="Dni chorobowych" :data="attendanceStore.sickCount" />
|
|
<CardTop
|
|
:icon="mdiTimerAlertOutline"
|
|
label="Dni nieobecnych"
|
|
:data="attendanceStore.leaveDayCount"
|
|
/>
|
|
<CardTop
|
|
:icon="mdiClockOutline"
|
|
label="Godzin w miesiącu"
|
|
:data="attendanceStore.workingHours"
|
|
/>
|
|
</div>
|
|
|
|
<HoursSummary v-bind="summary" />
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Wykres godzin</h3>
|
|
</div>
|
|
<div class="chart-container">
|
|
<BarChart v-if="attendanceStore.days.length > 0" :dataset="attendanceStore.days" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3>Tabela godzin</h3>
|
|
</div>
|
|
<div class="list list-header">
|
|
<span class="list-grid-dayOfMonth">Dzień</span>
|
|
<span class="list-grid-dayOfWeek">Dzień tygodnia</span>
|
|
<span class="list-grid-enter">Wejscie</span>
|
|
<span class="list-grid-exit">Wyjscie</span>
|
|
<span class="list-grid-alert">Alert</span>
|
|
<span class="list-grid-holiday">Urlop</span>
|
|
<span class="list-grid-sickday">Chorobowe</span>
|
|
<span class="list-grid-worked">Czas pracy</span>
|
|
<span class="list-grid-overtime">Bilans dzienny</span>
|
|
<span class="list-grid-hours">Suma godzin</span>
|
|
<span class="list-grid-balance">Bilans ogólny</span>
|
|
</div>
|
|
<div class="list-body">
|
|
<DayRow v-for="(_, index) in attendanceStore.days" :key="index" :index="index" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- </div> -->
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, computed, ref } from 'vue'
|
|
import { useAttendanceStore } from '@/stores/attendanceStore'
|
|
import { mdiCalendar, mdiTent, mdiNeedle, mdiClockOutline, mdiTimerAlertOutline } from '@mdi/js'
|
|
import { getData } from '@/api/dataApi'
|
|
import CardTop from '@/components/CardTop.vue'
|
|
import HoursSummary from '@/components/HoursSummary.vue'
|
|
import BarChart from '@/components/BarChart.vue'
|
|
import DayRow from '@/components/DayRow.vue'
|
|
// import MockApi from '@/api/mock_response.js'
|
|
|
|
const attendanceStore = useAttendanceStore()
|
|
|
|
const loading = ref(false)
|
|
const error = ref('')
|
|
|
|
const summary = computed(() => ({
|
|
sum_of_hours: attendanceStore.sumOfHours,
|
|
overtime_hours: attendanceStore.overtimeHours,
|
|
working_hours: attendanceStore.workedHours,
|
|
holiday_hours: attendanceStore.holidayHours,
|
|
sick_hours: attendanceStore.sickHours,
|
|
to_go_hours: attendanceStore.toGoHours,
|
|
}))
|
|
|
|
const input = ref('')
|
|
onMounted(async () => {
|
|
loading.value = true
|
|
const currentDate = new Date()
|
|
try {
|
|
const response = await getData(currentDate.getFullYear(), currentDate.getMonth() + 1)
|
|
input.value = response
|
|
attendanceStore.loadFromResponse(response)
|
|
} catch (err) {
|
|
error.value = err
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
})
|
|
</script>
|
|
<style scoped></style>
|