From e114754e950ff6a0dc9d4b15ca632b7e64e94032 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Mon, 17 Oct 2022 18:55:37 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D0=B2=D0=BE=D0=B7=D0=BC=D0=BE=D0=B6=D0=BD=D0=BE?=
 =?UTF-8?q?=D1=81=D1=82=D1=8C=20=D1=81=D0=BA=D1=80=D1=8B=D0=B2=D0=B0=D1=82?=
 =?UTF-8?q?=D1=8C=20=D0=B8=D0=BD=D0=B4=D0=B8=D0=BA=D0=B0=D1=82=D0=BE=D1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/calendar/TheCalendar.vue                |  5 +++++
 .../calendar/components/CalendarBackground.vue    | 15 ++++++++++++---
 .../calendar/components/CalendarClockColumn.vue   | 12 +++++++++++-
 .../calendar/components/CalendarSchedule.vue      | 12 +++++++++---
 4 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index e8b57ec..c21640f 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -2,6 +2,7 @@
   .calendar-container
     calendar-schedule(
       :currentDate="currentDate"
+      :timeInformation="timeInformation"
       @previous-date="switchPreviousDate"
       @next-date="switchNextDate"
       @selected-layout="changeCalendarLayout"
@@ -18,6 +19,10 @@ export default {
     return {
       calendarLayout: "",
       currentDate: moment(),
+      timeInformation: {
+        dayStartTime: "8:00",
+        dayEndTime: "18:00",
+      },
     };
   },
   methods: {
diff --git a/src/pages/calendar/components/CalendarBackground.vue b/src/pages/calendar/components/CalendarBackground.vue
index 429a388..18ec6df 100644
--- a/src/pages/calendar/components/CalendarBackground.vue
+++ b/src/pages/calendar/components/CalendarBackground.vue
@@ -2,18 +2,21 @@
   .calendar-background-wrapper.flex.flex-col
     .header.flex.items-center.justify-between.py-2.px-6
     .body.flex.flex-col
+      .line-wrapper
+        .line.flex.items-center(v-for="hour in hoursArray" :key="hour")
+          .middle-line
       .time-circle-indicator.-left-6px(v-if="isShownIndicator" :style="circleIndicatorLocation")
       span.time-line-indicator.block(v-if="isShownIndicator" :style="lineIndicatorLocation")
-      .line.flex.items-center(v-for="hour in hoursArray" :key="hour")
-        .middle-line
 </template>
 
 <script>
+import * as moment from "moment/moment";
 export default {
   name: "CalendarBackground",
   props: {
     hoursArray: Array,
     currentTime: String,
+    currentDate: Object,
   },
   data() {
     return {
@@ -45,6 +48,12 @@ export default {
       return result;
     },
   },
+  watch: {
+    currentDate: function () {
+      this.isShownIndicator =
+        this.currentDate.format("DD.MM.YYYY") === moment().format("DD.MM.YYYY");
+    },
+  },
 };
 </script>
 
@@ -61,7 +70,7 @@ export default {
 .line
   border-bottom: 1px solid var(--border-light-grey-color)
   height: 62px
-  &:nth-child(3)
+  &:first-child
     height: 63px
     border-top: 1px solid var(--border-light-grey-color)
   &:last-child
diff --git a/src/pages/calendar/components/CalendarClockColumn.vue b/src/pages/calendar/components/CalendarClockColumn.vue
index 203cc72..6158180 100644
--- a/src/pages/calendar/components/CalendarClockColumn.vue
+++ b/src/pages/calendar/components/CalendarClockColumn.vue
@@ -4,20 +4,30 @@
 </template>
 
 <script>
+import * as moment from "moment/moment";
 export default {
   name: "CalendarClockColumn",
   props: {
     hoursArray: Array,
     currentTime: String,
+    currentDate: Object,
   },
   computed: {
     currentHour() {
       return parseInt(this.currentTime.slice(0, -6), 10);
     },
+    isCurrentDay() {
+      return (
+        this.currentDate.format("DD.MM.YYYY") === moment().format("DD.MM.YYYY")
+      );
+    },
   },
   methods: {
     currentHourStyle(elem) {
-      if (parseInt(elem.slice(0, 3), 10) === this.currentHour) {
+      if (
+        parseInt(elem.slice(0, 3), 10) === this.currentHour &&
+        this.isCurrentDay
+      ) {
         return {
           "current-time": true,
           "font-bold": true,
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index 4547964..06951e1 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -6,8 +6,8 @@
       @next-date="nextDate"
       @selected-layout="selectedLayout")
     .schedule-body.flex
-      calendar-clock-column(:hoursArray="hoursArray" :currentTime="currentTime")
-      calendar-background(:hoursArray="hoursArray" :currentTime="currentTime")
+      calendar-clock-column(:hoursArray="hoursArray" :currentTime="currentTime" :currentDate="currentDate")
+      calendar-background(:hoursArray="hoursArray" :currentTime="currentTime" :currentDate="currentDate")
 </template>
 
 <script>
@@ -25,6 +25,12 @@ export default {
         return {};
       },
     },
+    timeInformation: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
   },
   data() {
     return {
@@ -68,7 +74,7 @@ export default {
     },
     hoursArrayInitialization() {
       for (let i = 8; i <= 18; i++) {
-        if (i === this.hours) {
+        if (i === this.hours && this.hours >= 8 && this.hours < 18) {
           this.hoursArray.push(this.hoursMinutes);
         } else this.hoursArray.push(`${i}:00`);
       }