59 lines
2.2 KiB
Vue
59 lines
2.2 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
// import { date } from 'quasar';
|
|
import { useSchedulePresetsStore } from 'src/stores/schedule-presets.store';
|
|
|
|
const schedule_preset_store = useSchedulePresetsStore();
|
|
|
|
defineProps<{
|
|
currentPresetId: number;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="row flex-center fit">
|
|
<div
|
|
v-if="currentPresetId > 0"
|
|
class="col column fit flex-center q-pa-md"
|
|
>
|
|
<div
|
|
v-for="weekday in schedule_preset_store.current_schedule_preset.weekdays"
|
|
:key="weekday.day"
|
|
class="col row justify-center q-py-xs full-width"
|
|
>
|
|
<div class="col-10 row items-center bg-dark q-px-md shadow-10 rounded-10">
|
|
<span class="col-2 text-weight-bolder text-accent text-uppercase text-overline" style="font-size: 1.3em;">{{
|
|
$t(`shared.weekday.${weekday.day.toLowerCase()}`) }}</span>
|
|
<div
|
|
v-for="shift, index in weekday.shifts"
|
|
:key="index"
|
|
class="col q-px-md q-py-xs"
|
|
>
|
|
<div class="row flex-center rounded-5" style="border: 1px solid var(--q-accent);">
|
|
<div class="col bg-accent text-white text-uppercase text-weight-bolder text-center">
|
|
{{ $t(`shared.shift_type.${shift.type.toLowerCase()}`) }}
|
|
</div>
|
|
<div class="col text-center text-bold">{{ shift.start_time }}</div>
|
|
<q-icon name="las la-chevron-right" color="accent" class="col-auto"></q-icon>
|
|
<div class="col text-center text-bold">{{ shift.end_time }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-else
|
|
class="col row justify-center"
|
|
>
|
|
<q-icon
|
|
name="las la-calendar-week"
|
|
size="20em"
|
|
color="accent"
|
|
style="opacity: 0.3;"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template> |