WIP Сделала индикатор, таймер

src/pages/calendar/components/CalendarColumn.vue

@@ -7,7 +7,7 @@
         img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
       base-doc-ok-button
     .flex.flex-col
-      span.block.time-indicator(:style="indicatorLocation")
+      span.block.time-indicator(v-if="isShownIndicator" :style="indicatorLocation")
       .line.flex.items-center(v-for="hour in hoursArray" :key="hour")
         .middle-line
 </template>
@@ -27,6 +27,11 @@ export default {
     hoursArray: Array,
     currentTime: String,
   },
+  data() {
+    return {
+      isShownIndicator: true,
+    };
+  },
   computed: {
     indicatorLocation() {
       return {
@@ -39,7 +44,12 @@ export default {
       let newTime = this.currentTime
         .split(":")
         .map((elem) => parseInt(elem, 10));
-      return (newTime[0] - 7) * 60 + newTime[1];
+      let result = (newTime[0] - 7) * 60.5 + newTime[1];
+      if (result > 666) {
+        this.isShownIndicator = false;
+        return 0;
+      }
+      return result;
     },
   },
 };

src/pages/calendar/components/CalendarSchedule.vue

@@ -7,7 +7,7 @@
       @selected-layout="selectedLayout")
     .schedule-body.flex
       calendar-clock-column(:hoursArray="hoursArray")
-      calendar-column(:info="columnInfo" :hoursArray="hoursArray" :currentTime="currtentTime")
+      calendar-column(:info="columnInfo" :hoursArray="hoursArray" :currentTime="currentTime")
 </template>
 
 <script>
@@ -33,8 +33,9 @@ export default {
         name: "Захарова А.О.",
         avatar: teamMemberAvatar,
       },
-      currtentTime: "",
+      currentTime: moment().format("HH:mm:ss"),
       hoursArray: [],
+      timer: null,
     };
   },
   methods: {
@@ -48,20 +49,41 @@ export default {
       this.$emit("selected-layout", option);
     },
     updateTime() {
-      setInterval(this.changeCurrentTime, 5000);
+      let currentHour = parseInt(this.currentTime.slice(0, -6), 10);
+      if (currentHour < 20 && currentHour > 8) {
+        this.timer = setInterval(() => {
+          this.changeCurrentTime();
+          this.changeHoursArray();
+        }, 5000);
+      }
     },
     changeCurrentTime() {
-      this.currtentTime = moment().format("HH:mm:ss");
+      this.currentTime = moment().format("HH:mm:ss");
-      console.log(this.currtentTime);
     },
-    calculateHoursCount() {
+    hoursArrayInitialization() {
       for (let i = 8; i <= 18; i++) {
-        this.hoursArray.push(`${i}:00`);
+        let startTime = this.currentTime.slice(0, -3);
+        let currentHour = parseInt(startTime.slice(0, -3), 10);
+        if (i === currentHour) {
+          this.hoursArray.push(startTime);
+        } 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);
+        }
+        return elem;
+      });
+      this.hoursArray = newHoursArray;
+    },
   },
   mounted() {
-    this.calculateHoursCount();
+    this.changeCurrentTime();
+    this.hoursArrayInitialization();
     this.updateTime();
   },
 };