From 00ddeff84dd6e6c2cc0f9ec8ed8250635c8264c9 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Fri, 14 Oct 2022 16:10:27 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=D0=B0=20?=
 =?UTF-8?q?=D0=BB=D0=B8=D0=BD=D0=B8=D1=8E=20=D0=B8=D0=BD=D0=B4=D0=B8=D0=BA?=
 =?UTF-8?q?=D0=B0=D1=82=D0=BE=D1=80=D0=B0=20=D0=B2=D1=80=D0=B5=D0=BC=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=20=D0=B2=20=D0=BA=D0=B0=D0=BB=D0=B5=D0=BD=D0=B4?=
 =?UTF-8?q?=D0=B0=D1=80=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/sass/variables.sass                |  1 +
 .../calendar/components/CalendarColumn.vue    | 25 +++++++++++++++-
 .../calendar/components/CalendarSchedule.vue  | 29 +++++++++----------
 3 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index a3177c6..124a255 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -17,3 +17,4 @@
   --bg-hover-row-table: rgba(215, 217, 255, 0.25)
   --default-white: #fff
   --btn-red-color: #ff6f6f
+  --time-indicator-color: #E93131
diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
index 4b49368..e7d8d2f 100644
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -6,7 +6,8 @@
         span.member-name.font-medium.text-base.mr-6 {{ info.name }}
         img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
       base-doc-ok-button
-    .body.flex.flex-col
+    .flex.flex-col
+      span.block.time-indicator(:style="indicatorLocation")
       .line.flex.items-center(v-for="hour in hoursArray" :key="hour")
         .middle-line
 </template>
@@ -24,6 +25,22 @@ export default {
       },
     },
     hoursArray: Array,
+    currentTime: String,
+  },
+  computed: {
+    indicatorLocation() {
+      return {
+        top: `${this.calculateIndicatorLocation()}px`,
+      };
+    },
+  },
+  methods: {
+    calculateIndicatorLocation() {
+      let newTime = this.currentTime
+        .split(":")
+        .map((elem) => parseInt(elem, 10));
+      return (newTime[0] - 7) * 60 + newTime[1];
+    },
   },
 };
 </script>
@@ -31,6 +48,7 @@ export default {
 <style lang="sass" scoped>
 .calendar-column-wrapper
   width: 100%
+  position: relative
 
 .header
   height: 48px
@@ -56,4 +74,9 @@ export default {
 .middle-line
   border-top: 1px dashed var(--border-light-grey-color)
   width: 100%
+
+.time-indicator
+  width: 100%
+  border-top: 1px solid var(--time-indicator-color)
+  position: absolute
 </style>
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index 547437b..a70755f 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/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")
+      calendar-column(:info="columnInfo" :hoursArray="hoursArray" :currentTime="currtentTime")
 </template>
 
 <script>
@@ -34,19 +34,7 @@ export default {
         avatar: teamMemberAvatar,
       },
       currtentTime: "",
-      hoursArray: [
-        "8:00",
-        "9:00",
-        "10:00",
-        "11:00",
-        "12:00",
-        "13:00",
-        "14:00",
-        "15:00",
-        "16:00",
-        "17:00",
-        "18:00",
-      ],
+      hoursArray: [],
     };
   },
   methods: {
@@ -60,12 +48,21 @@ export default {
       this.$emit("selected-layout", option);
     },
     updateTime() {
-      setInterval(this.changeCurrentTime, 30000);
+      setInterval(this.changeCurrentTime, 5000);
     },
     changeCurrentTime() {
-      this.currtentTime = moment().format("h:mm:ss");
+      this.currtentTime = moment().format("HH:mm:ss");
       console.log(this.currtentTime);
     },
+    calculateHoursCount() {
+      for (let i = 8; i <= 18; i++) {
+        this.hoursArray.push(`${i}:00`);
+      }
+    },
+  },
+  mounted() {
+    this.calculateHoursCount();
+    this.updateTime();
   },
 };
 </script>