Настроила индикатор

src/pages/calendar/components/CalendarSchedule.vue

@@ -1,13 +1,26 @@
 <template lang="pug">
   .schedule.ml-2
     calendar-header(
-      :currentDate="currentDate"
+      :current-date="currentDate"
+      :is-current-date="isCurrentDate"
       @previous-date="previousDate"
       @next-date="nextDate"
-      @selected-layout="selectedLayout")
+      @selected-layout="selectedLayout"
+      )
     .schedule-body.flex
-      calendar-clock-column(:hoursArray="hoursArray" :currentTime="currentTime" :currentDate="currentDate")
-      calendar-background(:hoursArray="hoursArray" :currentTime="currentTime" :currentDate="currentDate")
+      calendar-clock-column(
+        :hours-array="hoursArray"
+        :current-time="currentTime"
+        :is-current-date="isCurrentDate"
+        :day-end-time="validateEndTime"
+        )
+      calendar-background(
+        :hours-array="hoursArray"
+        :current-time="currentTime"
+        :current-date="currentDate"
+        :day-start-time="validateStartTime"
+        :day-end-time="validateEndTime"
+        )
 </template>
 
 <script>
@@ -37,15 +50,25 @@ export default {
       currentTime: "",
       hoursArray: [],
       timer: null,
+      isCurrentDate: true,
     };
   },
   computed: {
     hours() {
-      return parseInt(this.currentTime.slice(0, -6), 10);
+      return this.convertTime(this.currentTime, 0, -6);
+    },
+    minutes() {
+      return this.convertTime(this.currentTime, 3, -3);
     },
     hoursMinutes() {
       return this.currentTime.slice(0, -3);
     },
+    validateStartTime() {
+      return this.verifyTime(this.timeInformation.dayStartTime);
+    },
+    validateEndTime() {
+      return this.verifyTime(this.timeInformation.dayEndTime);
+    },
   },
   methods: {
     previousDate() {
@@ -58,11 +81,14 @@ export default {
       this.$emit("selected-layout", option);
     },
     startTimer() {
-      if (this.hours >= 8 && this.hours < 18) {
+      if (
+        this.hours >= this.validateStartTime &&
+        this.hours < this.validateEndTime
+      ) {
         this.timer = setInterval(() => {
           this.changeCurrentTime();
           this.changeHoursArray();
-        }, 30000);
+        }, 5000);
       }
     },
     stopTimer() {
@@ -73,25 +99,56 @@ export default {
       this.currentTime = moment().format("HH:mm:ss");
     },
     hoursArrayInitialization() {
-      for (let i = 8; i <= 18; i++) {
-        if (i === this.hours && this.hours >= 8 && this.hours < 18) {
+      this.hoursArray = [];
+      for (let i = this.validateStartTime; i <= this.validateEndTime; i++) {
+        if (
+          i === this.hours &&
+          this.hours !== this.validateEndTime &&
+          this.isCurrentDate
+        ) {
           this.hoursArray.push(this.hoursMinutes);
         } else this.hoursArray.push(`${i}:00`);
       }
     },
     changeHoursArray() {
       this.hoursArray = this.hoursArray.map((elem) => {
-        if (parseInt(elem.slice(0, -3), 10) === this.hours) {
+        if (this.convertTime(elem, 0, -3) === this.hours) {
           return this.hoursMinutes;
         }
         return elem;
       });
     },
+    verifyTime(dayTime) {
+      let timeArray = dayTime.split(":").map((elem) => parseInt(elem, 10));
+      let newTime = timeArray[1] > 30 ? timeArray[0] + 1 : timeArray[0];
+      return newTime;
+    },
+    convertTime(str, startIndex, endIndex) {
+      return parseInt(str.slice(startIndex, endIndex), 10);
+    },
   },
   watch: {
     currentTime() {
-      if (this.hours >= 18) {
+      if (
+        this.hours === this.validateEndTime &&
+        this.minutes > 0 &&
+        this.timer
+      ) {
         this.stopTimer();
+        this.hoursArrayInitialization();
+      }
+    },
+    currentDate: function () {
+      this.isCurrentDate =
+        this.currentDate.format("DD.MM.YYYY") === moment().format("DD.MM.YYYY");
+      if (this.timer) {
+        this.stopTimer();
+        this.hoursArrayInitialization();
+      }
+      if (this.isCurrentDate) {
+        this.changeCurrentTime();
+        this.hoursArrayInitialization();
+        this.startTimer();
       }
     },
   },