136 lines
3.3 KiB
JavaScript
136 lines
3.3 KiB
JavaScript
import { mapState } from "vuex";
|
|
import * as moment from "moment/moment";
|
|
import CalendarBackground from "@/pages/newCalendar/components/CalendarBackground.vue";
|
|
import CalendarClockColumn from "@/pages/newCalendar/components/CalendarClockColumn.vue";
|
|
import {
|
|
convertTime,
|
|
verifyTime,
|
|
} from "@/pages/newCalendar/utils/calendarFunctions.js";
|
|
|
|
export const wrapperMixin = {
|
|
props: {
|
|
openSidebar: Boolean,
|
|
},
|
|
emits: [],
|
|
components: {
|
|
CalendarBackground,
|
|
CalendarClockColumn,
|
|
},
|
|
data() {
|
|
return {
|
|
currentTime: "",
|
|
isShownIndicator: true,
|
|
timeCoil: [],
|
|
timer: null,
|
|
pixelsPerHour: 76,
|
|
isCurrent: true,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
workingHours: (state) => state.calendar.workingHours,
|
|
}),
|
|
hours() {
|
|
return convertTime(this.currentTime, 0, -6);
|
|
},
|
|
minutes() {
|
|
return convertTime(this.currentTime, 3, -3);
|
|
},
|
|
hoursMinutes() {
|
|
return this.currentTime.slice(0, -3);
|
|
},
|
|
pixelsPerMinute() {
|
|
return this.pixelsPerHour / 60;
|
|
},
|
|
validateStartTime() {
|
|
return verifyTime(this.workingHours.start);
|
|
},
|
|
validateEndTime() {
|
|
return verifyTime(this.workingHours.end);
|
|
},
|
|
backgroundHeight() {
|
|
return (
|
|
(this.validateEndTime - this.validateStartTime) * this.pixelsPerHour
|
|
);
|
|
},
|
|
lineIndicatorLocation() {
|
|
return {
|
|
top: `${this.calculateIndicatorLocation()}px`,
|
|
};
|
|
},
|
|
circleIndicatorLocation() {
|
|
return {
|
|
top: `${this.calculateIndicatorLocation() + 58}px`,
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
changeCurrentTime() {
|
|
this.currentTime = moment().format("HH:mm:ss");
|
|
},
|
|
changeTimeCoil() {
|
|
this.timeCoil = this.timeCoil.map((elem) => {
|
|
if (convertTime(elem, 0, -3) === this.hours) {
|
|
return this.hoursMinutes;
|
|
}
|
|
return elem.slice(0, -3) + ":00";
|
|
});
|
|
},
|
|
startTimer() {
|
|
if (
|
|
this.hours >= this.validateStartTime &&
|
|
this.hours < this.validateEndTime
|
|
) {
|
|
this.timer = setInterval(() => {
|
|
this.changeCurrentTime();
|
|
this.changeTimeCoil();
|
|
}, 5000);
|
|
}
|
|
},
|
|
stopTimer() {
|
|
clearInterval(this.timer);
|
|
this.timer = null;
|
|
},
|
|
calculateIndicatorLocation() {
|
|
let newTime = this.currentTime
|
|
.split(":")
|
|
.map((elem) => parseInt(elem, 10));
|
|
let result =
|
|
(newTime[0] - this.validateStartTime) * this.pixelsPerHour +
|
|
newTime[1] * this.pixelsPerMinute;
|
|
if (result > this.backgroundHeight || result < 0) {
|
|
this.isShownIndicator = false;
|
|
return 0;
|
|
}
|
|
return result;
|
|
},
|
|
timeCoilInitialization() {
|
|
this.timeCoil = [];
|
|
for (let i = this.validateStartTime; i < this.validateEndTime; i++) {
|
|
if (
|
|
i === this.hours &&
|
|
this.hours !== this.validateEndTime &&
|
|
this.isCurrent
|
|
) {
|
|
this.timeCoil.push(this.hoursMinutes);
|
|
} else this.timeCoil.push(`${i}:00`);
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
currentTime() {
|
|
if (
|
|
this.hours === this.validateEndTime &&
|
|
this.minutes > 0 &&
|
|
this.timer
|
|
) {
|
|
this.stopTimer();
|
|
this.timeCoilInitialization();
|
|
}
|
|
},
|
|
},
|
|
beforeUnmount() {
|
|
this.stopTimer();
|
|
},
|
|
};
|