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

src/pages/newCalendar/components/CalendarWrapper.vue

@@ -18,6 +18,12 @@
       )
         .time-coil-wrapper.left-0.-mt-12
           calendar-clock-column(:time-coil="timeCoil")
+          .time-circle-indicator.left-74px.h-3.w-3.rounded-full.absolute.top-20(
+            v-if="isShownIndicator"
+          )
+        span.time-line-indicator.block.left-20.absolute.w-full(
+          v-if="isShownIndicator"
+        )
         calendar-background.flex-1
     .w-full.h-3.bg-white.footer(v-if="expandedDisplayType")
 </template>
@@ -28,6 +34,7 @@ import CalendarBackground from "@/pages/newCalendar/components/CalendarBackgroun
 import CalendarClockColumn from "@/pages/newCalendar/components/CalendarClockColumn.vue";
 import CalendarColumn from "@/pages/newCalendar/components/CalendarColumn.vue";
 import { mapState } from "vuex";
+import * as moment from "moment/moment";
 export default {
   name: "CalendarWrapper",
   components: {
@@ -42,6 +49,9 @@ export default {
   data() {
     return {
       displayType: "expanded",
+      currentTime: "",
+      isCurrentWeek: true,
+      isShownIndicator: true,
     };
   },
   computed: {
@@ -49,6 +59,15 @@ export default {
       workingHours: (state) => state.calendar.workingHours,
       selectedDates: (state) => state.calendar.selectedDates,
     }),
+    hours() {
+      return this.convertTime(this.currentTime, 0, -6);
+    },
+    minutes() {
+      return this.convertTime(this.currentTime, 3, -3);
+    },
+    hoursMinutes() {
+      return this.currentTime.slice(0, -3);
+    },
     expandedDisplayType() {
       return this.displayType === "expanded";
     },
@@ -99,6 +118,15 @@ export default {
       let newTime = timeArray[1] > 30 ? timeArray[0] + 1 : timeArray[0];
       return newTime;
     },
+    changeCurrentTime() {
+      this.currentTime = moment().format("HH:mm:ss");
+    },
+    convertTime(str, startIndex, endIndex) {
+      return parseInt(str.slice(startIndex, endIndex), 10);
+    },
+  },
+  mounted() {
+    this.changeCurrentTime();
   },
 };
 </script>
@@ -139,4 +167,14 @@ export default {
 
 .border-top
   border-top: 1px solid var(--border-light-grey-color)
+
+.time-circle-indicator
+  background-color: var(--bg-event-red-color)
+  z-index: 5
+
+.time-line-indicator
+  border-top: 1px solid var(--bg-event-red-color)
+  z-index: 4
+  width: calc(100% - 80px)
+  top: 38px
 </style>