From 18d71c331a8ba4f1fdf1d44da512dc424b68cc1c Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Wed, 14 Jun 2023 22:24:13 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=9D=D0=B0=D0=B1=D1=80=D0=BE=D1=81?=
 =?UTF-8?q?=D0=B0=D0=BB=D0=B0=20=D0=B8=D0=BD=D0=B4=D0=B8=D0=BA=D0=B0=D1=82?=
 =?UTF-8?q?=D0=BE=D1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CalendarWrapper.vue            | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/src/pages/newCalendar/components/CalendarWrapper.vue b/src/pages/newCalendar/components/CalendarWrapper.vue
index c045171..bfeacda 100644
--- a/src/pages/newCalendar/components/CalendarWrapper.vue
+++ b/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>