Исправила индикатор , настроила таймер
This commit is contained in:
@@ -6,7 +6,7 @@
|
||||
span.member-name.font-medium.text-base.mr-6 {{ info.name }}
|
||||
img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
|
||||
base-doc-ok-button
|
||||
.flex.flex-col
|
||||
.body.flex.flex-col
|
||||
span.block.time-indicator(v-if="isShownIndicator" :style="indicatorLocation")
|
||||
.line.flex.items-center(v-for="hour in hoursArray" :key="hour")
|
||||
.middle-line
|
||||
@@ -44,8 +44,8 @@ export default {
|
||||
let newTime = this.currentTime
|
||||
.split(":")
|
||||
.map((elem) => parseInt(elem, 10));
|
||||
let result = (newTime[0] - 7) * 60.5 + newTime[1];
|
||||
if (result > 666) {
|
||||
let result = (newTime[0] - 8) * 62 + newTime[1] * 1.03;
|
||||
if (result > 620) {
|
||||
this.isShownIndicator = false;
|
||||
return 0;
|
||||
}
|
||||
@@ -58,11 +58,12 @@ export default {
|
||||
<style lang="sass" scoped>
|
||||
.calendar-column-wrapper
|
||||
width: 100%
|
||||
position: relative
|
||||
|
||||
.header
|
||||
height: 48px
|
||||
border-bottom: 1px solid var(--border-light-grey-color)
|
||||
|
||||
.body
|
||||
position: relative
|
||||
|
||||
.avatar-wrapper
|
||||
width: 32px
|
||||
@@ -78,6 +79,9 @@ export default {
|
||||
.line
|
||||
border-bottom: 1px solid var(--border-light-grey-color)
|
||||
height: 62px
|
||||
&:nth-child(2)
|
||||
height: 63px
|
||||
border-top: 1px solid var(--border-light-grey-color)
|
||||
&:last-child
|
||||
display: none
|
||||
|
||||
|
||||
@@ -39,6 +39,12 @@ export default {
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
hours() {
|
||||
return parseInt(this.currentTime.slice(0, -6), 10);
|
||||
},
|
||||
hoursMinutes() {
|
||||
return this.currentTime.slice(0, -3);
|
||||
},
|
||||
previousDate() {
|
||||
this.$emit("previous-date");
|
||||
},
|
||||
@@ -48,43 +54,51 @@ export default {
|
||||
selectedLayout(option) {
|
||||
this.$emit("selected-layout", option);
|
||||
},
|
||||
updateTime() {
|
||||
let currentHour = parseInt(this.currentTime.slice(0, -6), 10);
|
||||
if (currentHour < 20 && currentHour > 8) {
|
||||
startTimer() {
|
||||
if (this.hours() <= 18 && this.hours() >= 8) {
|
||||
this.timer = setInterval(() => {
|
||||
this.changeCurrentTime();
|
||||
this.changeHoursArray();
|
||||
}, 30000);
|
||||
}
|
||||
},
|
||||
stopTimer() {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
},
|
||||
changeCurrentTime() {
|
||||
this.currentTime = moment().format("HH:mm:ss");
|
||||
},
|
||||
hoursArrayInitialization() {
|
||||
for (let i = 8; i <= 18; i++) {
|
||||
let startTime = this.currentTime.slice(0, -3);
|
||||
let currentHour = parseInt(startTime.slice(0, -3), 10);
|
||||
if (i === currentHour) {
|
||||
this.hoursArray.push(startTime);
|
||||
if (i === this.hours()) {
|
||||
this.hoursArray.push(this.hoursMinutes());
|
||||
} else this.hoursArray.push(`${i}:00`);
|
||||
}
|
||||
},
|
||||
changeHoursArray() {
|
||||
let newCurrentTime = this.currentTime.slice(0, -3);
|
||||
let currentHour = parseInt(newCurrentTime.slice(0, -3), 10);
|
||||
let newHoursArray = this.hoursArray.map((elem) => {
|
||||
if (parseInt(elem.slice(0, -3), 10) === currentHour) {
|
||||
return this.currentTime.slice(0, -3);
|
||||
this.hoursArray = this.hoursArray.map((elem) => {
|
||||
if (parseInt(elem.slice(0, -3), 10) === this.hours()) {
|
||||
return this.hoursMinutes();
|
||||
}
|
||||
return elem;
|
||||
});
|
||||
this.hoursArray = newHoursArray;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
currentTime() {
|
||||
if (this.hours() >= 18) {
|
||||
this.stopTimer();
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.changeCurrentTime();
|
||||
this.hoursArrayInitialization();
|
||||
this.updateTime();
|
||||
this.startTimer();
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.stopTimer();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user