Merge pull request #34 from dderbentsov/UC-11

WIP Сделала индикатор, таймер

src/assets/sass/variables.sass

@@ -17,4 +17,5 @@
   --bg-hover-row-table: rgba(215, 217, 255, 0.25)
   --default-white: #fff
   --btn-red-color: #ff6f6f
+  --time-indicator-color: #E93131
   --br-grey-color: #D3D4DC

src/pages/calendar/TheCalendar.vue

@@ -1,29 +1,23 @@
 <template lang="pug">
-  .calendar-container.ml-2
+  .calendar-container
-    calendar-header(
+    calendar-schedule(
-      :currentDay="currentDate"
+      :currentDate="currentDate"
       @previous-date="switchPreviousDate"
       @next-date="switchNextDate"
-      @selectedLayout="changeCalendarLayout")
+      @selected-layout="changeCalendarLayout"
-    calendar-column(:info="columnInfo") 
+      )
 </template>
 
 <script>
 import * as moment from "moment/moment";
-import CalendarHeader from "./components/CalendarHeader.vue";
+import CalendarSchedule from "./components/CalendarSchedule.vue";
-import CalendarColumn from "./components/CalendarColumn.vue";
-import teamMemberAvatar from "@/assets/images/team-member.svg";
 export default {
   name: "TheCalendar",
-  components: { CalendarHeader, CalendarColumn },
+  components: { CalendarSchedule },
   data() {
     return {
-      currentDate: moment(),
       calendarLayout: "",
-      columnInfo: {
+      currentDate: moment(),
-        name: "Захарова А.О.",
-        avatar: teamMemberAvatar,
-      },
     };
   },
   methods: {

src/pages/calendar/components/CalendarClockColumn.vue

@@ -0,0 +1,20 @@
+<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 }}
+</template>
+
+<script>
+export default {
+  name: "CalendarClockColumn",
+  props: {
+    hoursArray: Array,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.calendar-clock-column
+  width: 80px
+  height: 100%
+  color: var(--font-dark-blue-color)
+</style>

src/pages/calendar/components/CalendarColumn.vue

@@ -6,8 +6,9 @@
         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
-      .line.flex.items-center(v-for="hour in 10" :key="hour")
+      span.block.time-indicator(v-if="isShownIndicator" :style="indicatorLocation")
+      .line.flex.items-center(v-for="hour in hoursArray" :key="hour")
         .middle-line
 </template>
 
@@ -23,6 +24,33 @@ export default {
         return {};
       },
     },
+    hoursArray: Array,
+    currentTime: String,
+  },
+  data() {
+    return {
+      isShownIndicator: true,
+    };
+  },
+  computed: {
+    indicatorLocation() {
+      return {
+        top: `${this.calculateIndicatorLocation()}px`,
+      };
+    },
+  },
+  methods: {
+    calculateIndicatorLocation() {
+      let newTime = this.currentTime
+        .split(":")
+        .map((elem) => parseInt(elem, 10));
+      let result = (newTime[0] - 7) * 60.5 + newTime[1];
+      if (result > 666) {
+        this.isShownIndicator = false;
+        return 0;
+      }
+      return result;
+    },
   },
 };
 </script>
@@ -30,7 +58,7 @@ export default {
 <style lang="sass" scoped>
 .calendar-column-wrapper
   width: 100%
-  background-color: var(--default-white)
+  position: relative
 
 .header
   height: 48px
@@ -50,8 +78,15 @@ export default {
 .line
   border-bottom: 1px solid var(--border-light-grey-color)
   height: 62px
+  &:last-child
+    display: none
 
 .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>

src/pages/calendar/components/CalendarHeader.vue

@@ -17,7 +17,7 @@ export default {
   name: "CalendarHeader",
   components: { BaseArrowButton, CalendarLayoutSwitch },
   props: {
-    currentDay: Object,
+    currentDate: Object,
   },
   data() {
     return {
@@ -26,7 +26,7 @@ export default {
   },
   computed: {
     dateString() {
-      let newStr = this.currentDay.format("D MMMM YYYY");
+      let newStr = this.currentDate.format("D MMMM YYYY");
       return newStr
         .split(" ")
         .map((elem, index) => {
@@ -38,7 +38,7 @@ export default {
   },
   methods: {
     changeSelectedLayout(option) {
-      this.$emit("selectedLayout", option);
+      this.$emit("selected-layout", option);
     },
     previousHandler() {
       this.$emit("previous-date");
@@ -48,9 +48,9 @@ export default {
     },
   },
   watch: {
-    currentDay: function () {
+    currentDate: function () {
       this.isToday =
-        this.currentDay.format("DD.MM.YYYY") === moment().format("DD.MM.YYYY");
+        this.currentDate.format("DD.MM.YYYY") === moment().format("DD.MM.YYYY");
     },
   },
 };

src/pages/calendar/components/CalendarSchedule.vue

@@ -0,0 +1,96 @@
+<template lang="pug">
+  .schedule.ml-2
+    calendar-header(
+      :currentDate="currentDate"
+      @previous-date="previousDate"
+      @next-date="nextDate"
+      @selected-layout="selectedLayout")
+    .schedule-body.flex
+      calendar-clock-column(:hoursArray="hoursArray")
+      calendar-column(:info="columnInfo" :hoursArray="hoursArray" :currentTime="currentTime")
+</template>
+
+<script>
+import * as moment from "moment/moment";
+import CalendarHeader from "./CalendarHeader.vue";
+import CalendarColumn from "./CalendarColumn.vue";
+import CalendarClockColumn from "./CalendarClockColumn.vue";
+import teamMemberAvatar from "@/assets/images/team-member.svg";
+export default {
+  name: "CalendarSchedule",
+  components: { CalendarHeader, CalendarColumn, CalendarClockColumn },
+  props: {
+    currentDate: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      columnInfo: {
+        name: "Захарова А.О.",
+        avatar: teamMemberAvatar,
+      },
+      currentTime: moment().format("HH:mm:ss"),
+      hoursArray: [],
+      timer: null,
+    };
+  },
+  methods: {
+    previousDate() {
+      this.$emit("previous-date");
+    },
+    nextDate() {
+      this.$emit("next-date");
+    },
+    selectedLayout(option) {
+      this.$emit("selected-layout", option);
+    },
+    updateTime() {
+      let currentHour = parseInt(this.currentTime.slice(0, -6), 10);
+      if (currentHour < 20 && currentHour > 8) {
+        this.timer = setInterval(() => {
+          this.changeCurrentTime();
+          this.changeHoursArray();
+        }, 5000);
+      }
+    },
+    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);
+        } 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);
+        }
+        return elem;
+      });
+      this.hoursArray = newHoursArray;
+    },
+  },
+  mounted() {
+    this.changeCurrentTime();
+    this.hoursArrayInitialization();
+    this.updateTime();
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.schedule
+  width: 100%
+  background-color: var(--default-white)
+</style>

tailwind.config.js

@@ -20,6 +20,9 @@ module.exports = {
         "3xl": ["60px", { lineHeight: "70px" }],
         "4xl": ["44px", { lineHeight: "48px" }],
       },
+      gap: {
+        43: "43px",
+      },
     },
   },
   plugins: [],