Merge pull request #39 from dderbentsov/UC-11

WIP Добавила возможность скрывать индикатор

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: {

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
-      .time-circle-indicator.-left-6px(v-if="isShownIndicator" :style="circleIndicatorLocation")
+      .line-wrapper
-      span.time-line-indicator.block(v-if="isShownIndicator" :style="lineIndicatorLocation")
         .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")
 </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

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,

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-clock-column(:hoursArray="hoursArray" :currentTime="currentTime" :currentDate="currentDate")
-      calendar-background(:hoursArray="hoursArray" :currentTime="currentTime")
+      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`);
       }