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

---
 .../calendar/components/CalendarColumn.vue    | 14 ++++---
 .../calendar/components/CalendarSchedule.vue  | 42 ++++++++++++-------
 2 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
index 120697a..ac8648a 100644
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -6,7 +6,7 @@
         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
-    .flex.flex-col
+    .body.flex.flex-col
       span.block.time-indicator(v-if="isShownIndicator" :style="indicatorLocation")
       .line.flex.items-center(v-for="hour in hoursArray" :key="hour")
         .middle-line
@@ -44,8 +44,8 @@ export default {
       let newTime = this.currentTime
         .split(":")
         .map((elem) => parseInt(elem, 10));
-      let result = (newTime[0] - 7) * 60.5 + newTime[1];
-      if (result > 666) {
+      let result = (newTime[0] - 8) * 62 + newTime[1] * 1.03;
+      if (result > 620) {
         this.isShownIndicator = false;
         return 0;
       }
@@ -58,11 +58,12 @@ export default {
 <style lang="sass" scoped>
 .calendar-column-wrapper
   width: 100%
-  position: relative
 
 .header
   height: 48px
-  border-bottom: 1px solid var(--border-light-grey-color)
+
+.body
+  position: relative
 
 .avatar-wrapper
   width: 32px
@@ -78,6 +79,9 @@ export default {
 .line
   border-bottom: 1px solid var(--border-light-grey-color)
   height: 62px
+  &:nth-child(2)
+    height: 63px
+    border-top: 1px solid var(--border-light-grey-color)
   &:last-child
     display: none
 
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index 05deb49..0adcd1e 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -39,6 +39,12 @@ export default {
     };
   },
   methods: {
+    hours() {
+      return parseInt(this.currentTime.slice(0, -6), 10);
+    },
+    hoursMinutes() {
+      return this.currentTime.slice(0, -3);
+    },
     previousDate() {
       this.$emit("previous-date");
     },
@@ -48,43 +54,51 @@ export default {
     selectedLayout(option) {
       this.$emit("selected-layout", option);
     },
-    updateTime() {
-      let currentHour = parseInt(this.currentTime.slice(0, -6), 10);
-      if (currentHour < 20 && currentHour > 8) {
+    startTimer() {
+      if (this.hours() <= 18 && this.hours() >= 8) {
         this.timer = setInterval(() => {
           this.changeCurrentTime();
           this.changeHoursArray();
         }, 30000);
       }
     },
+    stopTimer() {
+      clearInterval(this.timer);
+      this.timer = null;
+    },
     changeCurrentTime() {
       this.currentTime = moment().format("HH:mm:ss");
     },
     hoursArrayInitialization() {
       for (let i = 8; i <= 18; i++) {
-        let startTime = this.currentTime.slice(0, -3);
-        let currentHour = parseInt(startTime.slice(0, -3), 10);
-        if (i === currentHour) {
-          this.hoursArray.push(startTime);
+        if (i === this.hours()) {
+          this.hoursArray.push(this.hoursMinutes());
         } 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);
+      this.hoursArray = this.hoursArray.map((elem) => {
+        if (parseInt(elem.slice(0, -3), 10) === this.hours()) {
+          return this.hoursMinutes();
         }
         return elem;
       });
-      this.hoursArray = newHoursArray;
+    },
+  },
+  watch: {
+    currentTime() {
+      if (this.hours() >= 18) {
+        this.stopTimer();
+      }
     },
   },
   mounted() {
     this.changeCurrentTime();
     this.hoursArrayInitialization();
-    this.updateTime();
+    this.startTimer();
+  },
+  beforeUnmount() {
+    this.stopTimer();
   },
 };
 </script>