138 lines
3.4 KiB
Vue
138 lines
3.4 KiB
Vue
<template lang="pug">
|
|
.wrapper-bar.flex.flex-col.gap-y-4
|
|
.flex.px-5.py-5.w-full.justify-around.gap-x-4
|
|
.time-wrapper.flex.justify-between
|
|
base-input-time.py-14px.px-4(v-model="times.start_time", label="Начало")
|
|
base-input-time.py-14px.px-4(v-model="times.end_time", label="Конец")
|
|
.status-wrapper.flex.flex-col
|
|
.flex.justify-center.items-center.h-10
|
|
span.font-semibold Статусы
|
|
.flex.justify-around(class="py-2.5")
|
|
base-button.font-semibold(
|
|
v-for="item in buttons",
|
|
:class="item.class",
|
|
:key="item",
|
|
:style="{minWidth: '190px', minHeight: '43px', border: item.active ? '1.5px solid #5E5E5E' : 'none'}",
|
|
@click="choiceSchedule(item.class)"
|
|
) {{item.name}}
|
|
.graph-template.flex
|
|
base-custom-select(
|
|
:items="scheduleList",
|
|
center,
|
|
v-model="schedule",
|
|
placeholder="Шаблоны графиков"
|
|
)
|
|
.flex.justify-center
|
|
base-button.font-semibold(:size="40", @click="createSchedules") Сохранить
|
|
</template>
|
|
|
|
<script>
|
|
import BaseButton from "@/components/base/BaseButton.vue";
|
|
import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
|
|
import BaseInputTime from "@/components/base/BaseInputTime.vue";
|
|
import BaseInputDate from "@/components/base/BaseInputDate.vue";
|
|
export default {
|
|
name: "ScheduleBar",
|
|
components: { BaseButton, BaseCustomSelect, BaseInputTime, BaseInputDate },
|
|
props: {
|
|
buttons: Array,
|
|
times: Object,
|
|
createSchedules: Function,
|
|
},
|
|
data() {
|
|
return {
|
|
scheduleList: [
|
|
{ label: "Индивидуальный", id: 1 },
|
|
{ label: "2/2", id: 2 },
|
|
{ label: "3/2", id: 3 },
|
|
{ label: "5/2", id: 4 },
|
|
],
|
|
schedule: {},
|
|
};
|
|
},
|
|
methods: {
|
|
choiceSchedule(item) {
|
|
this.buttons.forEach((e) => (e.active = false));
|
|
this.buttons.find((e) => e.class === item).active = true;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.wrapper-bar
|
|
height: 224px
|
|
border: 1.5px solid var(--border-light-grey-color-1)
|
|
border-radius: 4px
|
|
width: calc(100vw - 136px)
|
|
|
|
.time-wrapper
|
|
height: 102px
|
|
border: 1.5px solid var(--border-light-grey-color-1)
|
|
border-radius: 4px
|
|
|
|
.select
|
|
height: 40px
|
|
border: 1.5px solid var(--border-light-grey-color)
|
|
border-radius: 4px
|
|
|
|
.item-input
|
|
appearance: none
|
|
outline: none
|
|
height: 40px
|
|
&::-webkit-calendar-picker-indicator
|
|
display: none
|
|
-webkit-appearance: none
|
|
&::placeholder
|
|
color: var(--font-black-color-1)
|
|
|
|
.text
|
|
color: var(--font-grey-color)
|
|
|
|
.status-wrapper
|
|
min-width: 690px
|
|
height: 102px
|
|
border: 1.5px solid var(--border-light-grey-color-1)
|
|
border-radius: 4px
|
|
|
|
.button-work
|
|
background: #55CD76
|
|
border: none
|
|
&:active
|
|
background-color: #55CD76
|
|
opacity: 1
|
|
border: none
|
|
&:hover
|
|
background-color: #55CD76
|
|
opacity: 0.8
|
|
border: none
|
|
|
|
.button-vacation
|
|
background: #D7D9FF
|
|
border: none
|
|
&:active
|
|
background-color: #D7D9FF
|
|
opacity: 1
|
|
border: none
|
|
&:hover
|
|
background-color: #D7D9FF
|
|
opacity: 0.8
|
|
border: none
|
|
|
|
.button-free
|
|
background: #9294A7
|
|
border: none
|
|
&:active
|
|
background-color: #9294A7
|
|
opacity: 1
|
|
border: none
|
|
&:hover
|
|
background-color: #9294A7
|
|
opacity: 0.8
|
|
border: none
|
|
|
|
.graph-template
|
|
width: 218px
|
|
height: 40px
|
|
</style>
|