92 lines
2.3 KiB
Vue
92 lines
2.3 KiB
Vue
<template lang="pug">
|
|
.flex.flex-col.gap-y-6.pt-6
|
|
.table-time.flex.p-4
|
|
.flex.flex-col.gap-1(v-for="time in timeCoil")
|
|
.flex {{ time }}
|
|
.side.flex.p-1.h-9(:style="{columnGap: '2px'}")
|
|
q-btn.left-side(size="9px", padding="0 8px", color="primary")
|
|
q-icon(name="app:icon-ok")
|
|
q-btn.right-side(size="4px", padding="0 4px")
|
|
img(:src="lockIcon")
|
|
.flex.justify-between.items-center
|
|
.flex.gap-2
|
|
q-btn(
|
|
color="primary",
|
|
outline,
|
|
size="16px",
|
|
no-caps,
|
|
label="Отмена",
|
|
:style="{width: '108px', height: '40px'}",
|
|
padding="0",
|
|
@click="closeModalTime"
|
|
)
|
|
q-btn(
|
|
color="primary",
|
|
size="16px",
|
|
no-caps,
|
|
label="Сохранить"
|
|
:style="{width: '132px', height: '40px'}",
|
|
padding="0",
|
|
@click="closeModalTime"
|
|
)
|
|
.text.font-bold.text-6xl {{`${times.from} - ${times.to}`}}
|
|
</template>
|
|
|
|
<script>
|
|
import lockIcon from "@/assets/icons/locked.svg";
|
|
|
|
export default {
|
|
name: "BaseTimeModal",
|
|
props: { times: Object, closeModalTime: Function },
|
|
data() {
|
|
return { lockIcon, select: false };
|
|
},
|
|
computed: {
|
|
validateStartTime() {
|
|
return this.verifyTime("8:00");
|
|
},
|
|
validateEndTime() {
|
|
return this.verifyTime("19:00");
|
|
},
|
|
timeCoil() {
|
|
let time = [];
|
|
for (let i = this.validateStartTime; i <= this.validateEndTime; i++) {
|
|
time.push(`${i}:00`);
|
|
}
|
|
return time;
|
|
},
|
|
},
|
|
methods: {
|
|
verifyTime(dayTime) {
|
|
let timeArray = dayTime.split(":").map((elem) => parseInt(elem, 10));
|
|
let newTime = timeArray[1] > 30 ? timeArray[0] + 1 : timeArray[0];
|
|
return newTime;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.table-time
|
|
width: 463px
|
|
height: 174px
|
|
border: 1px solid var(--border-light-grey-color)
|
|
border-radius: 6px
|
|
flex-wrap: wrap !important
|
|
|
|
.text
|
|
color: var(--font-dark-blue-color)
|
|
|
|
.side
|
|
border-left: 1px solid var(--border-light-grey-color)
|
|
border-right: 1px solid var(--border-light-grey-color)
|
|
|
|
.left-side
|
|
border-radius: 6px 1px 1px 6px
|
|
background: #4772F2
|
|
|
|
.right-side
|
|
border-radius: 1px 6px 6px 1px
|
|
background: #FF6565
|
|
</style>
|