Merge pull request #38 from dderbentsov/UC-11

Добавила подсветку текущего времени

src/pages/calendar/components/CalendarBackground.vue

@@ -1,29 +1,17 @@
 <template lang="pug">
-  .calendar-column-wrapper.flex.flex-col
+  .calendar-background-wrapper.flex.flex-col
     .header.flex.items-center.justify-between.py-2.px-6
-      .flex.items-center
+    .body.flex.flex-col
-        img.avatar-wrapper.mr-2(:src="info.avatar" alt="Team member")
+      .time-circle-indicator.-left-6px(v-if="isShownIndicator" :style="circleIndicatorLocation")
-        span.member-name.font-medium.text-base.mr-6 {{ info.name }}
+      span.time-line-indicator.block(v-if="isShownIndicator" :style="lineIndicatorLocation")
-        img.icon-wrapper.cursor-pointer(src="@/assets/icons/lock.svg")
-      base-doc-ok-button
-    .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
 </template>
 
 <script>
-import BaseDocOkButton from "@/components/base/buttons/BaseDocOkButton.vue";
 export default {
-  name: "CalendarColumn",
+  name: "CalendarBackground",
-  components: { BaseDocOkButton },
   props: {
-    info: {
-      type: Object,
-      default() {
-        return {};
-      },
-    },
     hoursArray: Array,
     currentTime: String,
   },
@@ -33,19 +21,24 @@ export default {
     };
   },
   computed: {
-    indicatorLocation() {
+    lineIndicatorLocation() {
       return {
         top: `${this.calculateIndicatorLocation()}px`,
       };
     },
+    circleIndicatorLocation() {
+      return {
+        top: `${this.calculateIndicatorLocation() - 6}px`,
+      };
+    },
   },
   methods: {
     calculateIndicatorLocation() {
       let newTime = this.currentTime
         .split(":")
         .map((elem) => parseInt(elem, 10));
-      let result = (newTime[0] - 7) * 60.5 + newTime[1];
+      let result = (newTime[0] - 8) * 62 + newTime[1] * 1.03;
-      if (result > 666) {
+      if (result > 620) {
         this.isShownIndicator = false;
         return 0;
       }
@@ -56,28 +49,21 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.calendar-column-wrapper
+.calendar-background-wrapper
   width: 100%
-  position: relative
 
 .header
   height: 48px
-  border-bottom: 1px solid var(--border-light-grey-color)
 
-.avatar-wrapper
+.body
-  width: 32px
+  position: relative
-  height: 32px
-
-.icon-wrapper
-  width: 24px
-  height: 24px
-
-.member-name
-  color: var(--font-dark-blue-color)
 
 .line
   border-bottom: 1px solid var(--border-light-grey-color)
   height: 62px
+  &:nth-child(3)
+    height: 63px
+    border-top: 1px solid var(--border-light-grey-color)
   &:last-child
     display: none
 
@@ -85,8 +71,15 @@ export default {
   border-top: 1px dashed var(--border-light-grey-color)
   width: 100%
 
-.time-indicator
+.time-line-indicator
   width: 100%
   border-top: 1px solid var(--time-indicator-color)
   position: absolute
+
+.time-circle-indicator
+  width: 12px
+  height: 12px
+  background-color: var(--time-indicator-color)
+  border-radius: 50%
+  position: absolute
 </style>

src/pages/calendar/components/CalendarClockColumn.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .calendar-clock-column.flex.flex-col.items-end.gap-y-43.pt-9.pb-12.px-3
-    span.font-medium.text-base(v-for="hour in hoursArray") {{ hour }}
+    span.font-medium.text-base(v-for="hour in hoursArray" :key="hour" :class="currentHourStyle(hour)") {{ hour }}
 </template>
 
 <script>
@@ -8,11 +8,33 @@ export default {
   name: "CalendarClockColumn",
   props: {
     hoursArray: Array,
+    currentTime: String,
+  },
+  computed: {
+    currentHour() {
+      return parseInt(this.currentTime.slice(0, -6), 10);
+    },
+  },
+  methods: {
+    currentHourStyle(elem) {
+      if (parseInt(elem.slice(0, 3), 10) === this.currentHour) {
+        return {
+          "current-time": true,
+          "font-bold": true,
+        };
+      }
+      return {
+        "current-time": false,
+      };
+    },
   },
 };
 </script>
 
 <style lang="sass" scoped>
+.current-time
+  color: var(--time-indicator-color)
+
 .calendar-clock-column
   width: 80px
   height: 100%

src/pages/calendar/components/CalendarSchedule.vue

@@ -6,19 +6,18 @@
       @next-date="nextDate"
       @selected-layout="selectedLayout")
     .schedule-body.flex
-      calendar-clock-column(:hoursArray="hoursArray")
+      calendar-clock-column(:hoursArray="hoursArray" :currentTime="currentTime")
-      calendar-column(:info="columnInfo" :hoursArray="hoursArray" :currentTime="currentTime")
+      calendar-background(:hoursArray="hoursArray" :currentTime="currentTime")
 </template>
 
 <script>
 import * as moment from "moment/moment";
 import CalendarHeader from "./CalendarHeader.vue";
-import CalendarColumn from "./CalendarColumn.vue";
+import CalendarBackground from "./CalendarBackground.vue";
 import CalendarClockColumn from "./CalendarClockColumn.vue";
-import teamMemberAvatar from "@/assets/images/team-member.svg";
 export default {
   name: "CalendarSchedule",
-  components: { CalendarHeader, CalendarColumn, CalendarClockColumn },
+  components: { CalendarHeader, CalendarBackground, CalendarClockColumn },
   props: {
     currentDate: {
       type: Object,
@@ -29,15 +28,19 @@ export default {
   },
   data() {
     return {
-      columnInfo: {
-        name: "Захарова А.О.",
-        avatar: teamMemberAvatar,
-      },
       currentTime: "",
       hoursArray: [],
       timer: null,
     };
   },
+  computed: {
+    hours() {
+      return parseInt(this.currentTime.slice(0, -6), 10);
+    },
+    hoursMinutes() {
+      return this.currentTime.slice(0, -3);
+    },
+  },
   methods: {
     previousDate() {
       this.$emit("previous-date");
@@ -48,49 +51,56 @@ export default {
     selectedLayout(option) {
       this.$emit("selected-layout", option);
     },
-    updateTime() {
+    startTimer() {
-      let currentHour = parseInt(this.currentTime.slice(0, -6), 10);
+      if (this.hours >= 8 && this.hours < 18) {
-      if (currentHour < 20 && currentHour > 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);
+        if (i === this.hours) {
-        let currentHour = parseInt(startTime.slice(0, -3), 10);
+          this.hoursArray.push(this.hoursMinutes);
-        if (i === currentHour) {
-          this.hoursArray.push(startTime);
         } else this.hoursArray.push(`${i}:00`);
       }
     },
     changeHoursArray() {
-      let newCurrentTime = this.currentTime.slice(0, -3);
+      this.hoursArray = this.hoursArray.map((elem) => {
-      let currentHour = parseInt(newCurrentTime.slice(0, -3), 10);
+        if (parseInt(elem.slice(0, -3), 10) === this.hours) {
-      let newHoursArray = this.hoursArray.map((elem) => {
+          return this.hoursMinutes;
-        if (parseInt(elem.slice(0, -3), 10) === currentHour) {
-          return this.currentTime.slice(0, -3);
         }
         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>
 
 <style lang="sass" scoped>
 .schedule
-  width: 100%
   background-color: var(--default-white)
 </style>

tailwind.config.js

@@ -23,6 +23,9 @@ module.exports = {
       gap: {
         43: "43px",
       },
+      spacing: {
+        "6px": "6px",
+      },
     },
   },
   plugins: [],