WIP Сделала отсчет времени

src/pages/newCalendar/components/CalendarClockColumn.vue

@@ -3,25 +3,26 @@
     span.text-base(
       v-for="hour in timeCoil",
       :key="hour",
+      :class="currentHourStyle(hour)"
     ) {{ hour }}
 </template>
 
 <script>
+import { convertTime } from "@/pages/newCalendar/utils/calendarFunctions.js";
 export default {
   name: "CalendarClockColumn",
   props: {
     timeCoil: Array,
     currentTime: String,
-    currentDate: Object,
     dayEndTime: Number,
-    isCurrentDate: Boolean,
+    isCurrentWeek: Boolean,
   },
   computed: {
     currentHour() {
-      return this.convertTime(this.currentTime, 0, -6);
+      return convertTime(this.currentTime, 0, -6);
     },
     currentMinute() {
-      return this.convertTime(this.currentTime, 3, -3);
+      return convertTime(this.currentTime, 3, -3);
     },
     isEndDay() {
       return this.dayEndTime === this.currentHour && this.currentMinute > 0;
@@ -30,9 +31,9 @@ export default {
   methods: {
     currentHourStyle(elem) {
       if (
-        this.convertTime(elem, 0, 3) === this.currentHour &&
+        convertTime(elem, 0, 3) === this.currentHour &&
         !this.isEndDay &&
-        this.isCurrentDate
+        this.isCurrentWeek
       ) {
         return {
           "current-time": true,
@@ -44,9 +45,6 @@ export default {
         "font-medium": true,
       };
     },
-    convertTime(str, startIndex, endIndex) {
-      return parseInt(str?.slice(startIndex, endIndex), 10);
-    },
   },
 };
 </script>

src/pages/newCalendar/components/CalendarWrapper.vue

@@ -9,7 +9,7 @@
           v-for="date in dateRange",
           :key="date",
           :date="date",
-          :style="columnSize",
+          :style="columnHeight",
           :expanded-display-type="expandedDisplayType"
         )
       .flex.relative(
@@ -17,12 +17,19 @@
         :class="{'border-bottom': expandedDisplayType}"
       )
         .time-coil-wrapper.left-0.-mt-12
-          calendar-clock-column(:time-coil="timeCoil")
+          calendar-clock-column(
-          .time-circle-indicator.left-74px.h-3.w-3.rounded-full.absolute.top-20(
+            :time-coil="timeCoil",
-            v-if="isShownIndicator"
+            :current-time="currentTime",
+            :is-current-week="isCurrentWeek",
+            :day-end-time="validateEndTime"
           )
-        span.time-line-indicator.block.left-20.absolute.w-full(
+          .time-circle-indicator.left-74px.h-3.w-3.rounded-full.absolute(
-          v-if="isShownIndicator"
+            v-if="isShownIndicator",
+            :style="circleIndicatorLocation"
+          )
+        span.time-line-indicator.block.left-20.absolute(
+          v-if="isShownIndicator",
+          :style="lineIndicatorLocation"
         )
         calendar-background.flex-1
     .w-full.h-3.bg-white.footer(v-if="expandedDisplayType")
@@ -33,6 +40,7 @@ import CalendarHeader from "@/pages/newCalendar/components/CalendarHeader";
 import CalendarBackground from "@/pages/newCalendar/components/CalendarBackground.vue";
 import CalendarClockColumn from "@/pages/newCalendar/components/CalendarClockColumn.vue";
 import CalendarColumn from "@/pages/newCalendar/components/CalendarColumn.vue";
+import { convertTime } from "@/pages/newCalendar/utils/calendarFunctions.js";
 import { mapState } from "vuex";
 import * as moment from "moment/moment";
 export default {
@@ -52,6 +60,9 @@ export default {
       currentTime: "",
       isCurrentWeek: true,
       isShownIndicator: true,
+      timeCoil: [],
+      timer: null,
+      pixelsPerHour: 76,
     };
   },
   computed: {
@@ -60,14 +71,22 @@ export default {
       selectedDates: (state) => state.calendar.selectedDates,
     }),
     hours() {
-      return this.convertTime(this.currentTime, 0, -6);
+      return convertTime(this.currentTime, 0, -6);
     },
     minutes() {
-      return this.convertTime(this.currentTime, 3, -3);
+      return convertTime(this.currentTime, 3, -3);
     },
     hoursMinutes() {
       return this.currentTime.slice(0, -3);
     },
+    pixelsPerMinute() {
+      return this.pixelsPerHour / 60;
+    },
+    backgroundHeight() {
+      return (
+        (this.validateEndTime - this.validateStartTime) * this.pixelsPerHour
+      );
+    },
     expandedDisplayType() {
       return this.displayType === "expanded";
     },
@@ -85,20 +104,13 @@ export default {
     validateEndTime() {
       return this.verifyTime(this.workingHours.end);
     },
-    timeCoil() {
+    columnHeight() {
-      let time = [];
-      for (let i = this.validateStartTime; i <= this.validateEndTime; i++) {
-        time.push(`${i}:00`);
-      }
-      return time;
-    },
-    columnSize() {
       return this.expandedDisplayType
         ? {
-            height: `${this.timeCoil.length * 76 + 60}px`,
+            height: `${this.timeCoil.length * this.pixelsPerHour + 60}px`,
           }
         : {
-            height: `${this.timeCoil.length * 76 + 96}px`,
+            height: `${this.timeCoil.length * this.pixelsPerHour + 96}px`,
           };
     },
     columnWrapperWidth() {
@@ -111,6 +123,16 @@ export default {
         width: `${380 * this.dateRange.length + 80}px`,
       };
     },
+    lineIndicatorLocation() {
+      return {
+        top: `${this.calculateIndicatorLocation()}px`,
+      };
+    },
+    circleIndicatorLocation() {
+      return {
+        top: `${this.calculateIndicatorLocation() + 42}px`,
+      };
+    },
   },
   methods: {
     verifyTime(dayTime) {
@@ -121,12 +143,92 @@ export default {
     changeCurrentTime() {
       this.currentTime = moment().format("HH:mm:ss");
     },
-    convertTime(str, startIndex, endIndex) {
+    timeCoilInitialization() {
-      return parseInt(str.slice(startIndex, endIndex), 10);
+      this.timeCoil = [];
+      for (let i = this.validateStartTime; i <= this.validateEndTime; i++) {
+        if (
+          i === this.hours &&
+          this.hours !== this.validateEndTime &&
+          this.isCurrentWeek
+        ) {
+          this.timeCoil.push(this.hoursMinutes);
+        } else this.timeCoil.push(`${i}:00`);
+      }
+    },
+    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;
+    },
+  },
+  watch: {
+    currentTime() {
+      if (
+        this.hours === this.validateEndTime &&
+        this.minutes > 0 &&
+        this.timer
+      ) {
+        this.stopTimer();
+        this.timeCoilInitialization();
+      }
+    },
+    selectedDates: {
+      deep: true,
+      handler(newValue) {
+        this.isCurrentWeek =
+          newValue?.from.isSame(moment().clone().startOf("week")) &&
+          newValue?.to.isSame(moment().clone().endOf("week"));
+        this.isShownIndicator = this.isCurrentWeek;
+        if (this.timer) {
+          this.stopTimer();
+          this.timeCoilInitialization();
+        }
+        if (this.isCurrentWeek) {
+          this.changeCurrentTime();
+          this.timeCoilInitialization();
+          this.startTimer();
+        }
+      },
     },
   },
   mounted() {
     this.changeCurrentTime();
+    this.timeCoilInitialization();
+    this.startTimer();
+  },
+  beforeUnmount() {
+    this.stopTimer();
   },
 };
 </script>
@@ -176,5 +278,4 @@ export default {
   border-top: 1px solid var(--bg-event-red-color)
   z-index: 4
   width: calc(100% - 80px)
-  top: 38px
 </style>

src/pages/newCalendar/utils/calendarFunctions.js

@@ -0,0 +1,3 @@
+export function convertTime(str, startIndex, endIndex) {
+  return parseInt(str?.slice(startIndex, endIndex), 10);
+}