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

---
 src/assets/sass/variables.sass                | 15 ++++---
 .../base/buttons/BaseArrowButton.vue          | 24 ++++++++++
 src/pages/calendar/TheCalendar.vue            |  4 +-
 .../calendar/components/CalendarHeader.vue    | 44 +++++++++++++++++++
 4 files changed, 79 insertions(+), 8 deletions(-)
 create mode 100644 src/components/base/buttons/BaseArrowButton.vue
 create mode 100644 src/pages/calendar/components/CalendarHeader.vue

diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass
index a2f56a6..8af2d15 100644
--- a/src/assets/sass/variables.sass
+++ b/src/assets/sass/variables.sass
@@ -1,10 +1,11 @@
 \:root
-  --bg-lavender-color: #E9E9F6
-  --bg-white-color: #F8F8FF
-  --bg-ligth-blue-color: #E6EAFC
+  --bg-lavender-color: #e9e9f6
+  --bg-white-color: #f8f8ff
+  --bg-ligth-blue-color: #e6eafc
   --font-dark-blue-color: #252850
-  --font-black-color: #090A15
-  --btn-blue-color: #4772F2
-  --font-grey-color: #9294A7
-  --border-light-grey-color: #9294A7
+  --font-black-color: #090a15
+  --btn-blue-color: #4772f2
+  --btn-light-blue-color: #c6d2f6
+  --font-grey-color: #9294a7
+  --border-light-grey-color: #d3d4dc
   --default-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
diff --git a/src/components/base/buttons/BaseArrowButton.vue b/src/components/base/buttons/BaseArrowButton.vue
new file mode 100644
index 0000000..20da299
--- /dev/null
+++ b/src/components/base/buttons/BaseArrowButton.vue
@@ -0,0 +1,24 @@
+<template lang="pug">
+  button.arrow-button.flex.items-center.icon-down-arrow.px-2.pt-px
+</template>
+
+<script>
+export default {
+  name: "ArrowButton",
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="sass">
+.arrow-button
+  width: 32px
+  height: 32px
+  background: var(--btn-light-blue-color)
+  color: var(--btn-blue-color)
+  border-radius: 50%
+  font-size: 16px
+  &:hover
+    background: #a0b4f0
+</style>
diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 99ae760..cb02df7 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -1,8 +1,10 @@
 <template lang="pug">
+  calendar-header
 </template>
-
 <script>
+import CalendarHeader from "./components/CalendarHeader.vue";
 export default {
   name: "TheCalendar",
+  components: { CalendarHeader },
 };
 </script>
diff --git a/src/pages/calendar/components/CalendarHeader.vue b/src/pages/calendar/components/CalendarHeader.vue
new file mode 100644
index 0000000..01a07a8
--- /dev/null
+++ b/src/pages/calendar/components/CalendarHeader.vue
@@ -0,0 +1,44 @@
+<template lang="pug">
+  .calendar-header-wrapper.flex.items-center.justify-between.ml-2.py-3.pl-5.pr-6
+    .right-side.flex
+      base-arrow-button.left-arrow.mr-4
+      base-arrow-button.right-arrow.mr-6
+      .text.flex.items-center
+        span.font-medium.text-base 24 Мая 2022 
+          span.today.font-bold.text-xxs(v-if="isToday") Сегодня
+</template>
+
+<script>
+import BaseArrowButton from "@/components/base/buttons/BaseArrowButton.vue";
+export default {
+  name: "CalendarHeader",
+  components: { BaseArrowButton },
+  data() {
+    return {
+      isToday: true,
+    };
+  },
+  computed: {},
+};
+</script>
+
+<style lang="sass">
+.calendar-header-wrapper
+  width: 100%
+  background-color: var(--bg-white-color)
+  height: 56px
+  border-radius: 4px
+
+.right-side
+
+.left-arrow
+  transform: rotate(90deg)
+.right-arrow
+  transform: rotate(270deg)
+
+.text
+  color: var(--font-dark-blue-color)
+
+.today
+  opacity: 0.5
+</style>

From cc50b4c6ffa18806568509b5ff9e50bf038ecd74 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Wed, 12 Oct 2022 16:10:10 +0300
Subject: [PATCH 2/3] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=D0=B0?=
 =?UTF-8?q?=20=D0=BF=D0=B5=D1=80=D0=B5=D0=BA=D0=BB=D1=8E=D1=87=D0=B0=D1=82?=
 =?UTF-8?q?=D0=B5=D0=BB=D1=8C=20=D0=94=D0=B5=D0=BD=D1=8C/=D0=9D=D0=B5?=
 =?UTF-8?q?=D0=B4=D0=B5=D0=BB=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../calendar/components/CalendarHeader.vue    | 18 ++++---
 .../components/CalendarLayoutSwitch.vue       | 47 +++++++++++++++++++
 2 files changed, 59 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/calendar/components/CalendarLayoutSwitch.vue

diff --git a/src/pages/calendar/components/CalendarHeader.vue b/src/pages/calendar/components/CalendarHeader.vue
index 01a07a8..d25cda0 100644
--- a/src/pages/calendar/components/CalendarHeader.vue
+++ b/src/pages/calendar/components/CalendarHeader.vue
@@ -1,38 +1,44 @@
 <template lang="pug">
   .calendar-header-wrapper.flex.items-center.justify-between.ml-2.py-3.pl-5.pr-6
-    .right-side.flex
+    .flex
       base-arrow-button.left-arrow.mr-4
       base-arrow-button.right-arrow.mr-6
       .text.flex.items-center
         span.font-medium.text-base 24 Мая 2022 
           span.today.font-bold.text-xxs(v-if="isToday") Сегодня
+    calendar-layout-switch(@selected="changeSelectedLayout")
 </template>
 
 <script>
 import BaseArrowButton from "@/components/base/buttons/BaseArrowButton.vue";
+import CalendarLayoutSwitch from "./CalendarLayoutSwitch.vue";
 export default {
   name: "CalendarHeader",
-  components: { BaseArrowButton },
+  components: { BaseArrowButton, CalendarLayoutSwitch },
   data() {
     return {
       isToday: true,
+      selectedLayout: "",
     };
   },
-  computed: {},
+  methods: {
+    changeSelectedLayout(option) {
+      this.selectedLayout = option;
+    },
+  },
 };
 </script>
 
-<style lang="sass">
+<style lang="sass" scoped>
 .calendar-header-wrapper
   width: 100%
   background-color: var(--bg-white-color)
   height: 56px
   border-radius: 4px
 
-.right-side
-
 .left-arrow
   transform: rotate(90deg)
+
 .right-arrow
   transform: rotate(270deg)
 
diff --git a/src/pages/calendar/components/CalendarLayoutSwitch.vue b/src/pages/calendar/components/CalendarLayoutSwitch.vue
new file mode 100644
index 0000000..196a6f5
--- /dev/null
+++ b/src/pages/calendar/components/CalendarLayoutSwitch.vue
@@ -0,0 +1,47 @@
+<template lang="pug">
+  .layout-switch-wrapper.inline-block
+    button#day.py-2.px-3(:class="dayLayoutState" @click="changeSelectedLayout") День
+    button#week.py-2.px-3(:class="weekLayoutState" @click="changeSelectedLayout") Неделя
+</template>
+
+<script>
+export default {
+  name: "CalendarLayoutSwitch",
+  props: {},
+  data() {
+    return {
+      selectedLayout: "day",
+    };
+  },
+  computed: {
+    dayLayoutState() {
+      return {
+        active: this.selectedLayout === "day",
+      };
+    },
+    weekLayoutState() {
+      return {
+        active: this.selectedLayout === "week",
+      };
+    },
+  },
+  methods: {
+    changeSelectedLayout(event) {
+      this.selectedLayout = event.target.id;
+      this.$emit("selected", event.target.id);
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.active
+  background-color: #6787e7
+  color: var(--bg-white-color)
+  border-radius: 4px
+
+.layout-switch-wrapper
+  background-color: var(--bg-lavender-color)
+  color: var(--font-dark-blue-color)
+  border-radius: 4px
+</style>

From 6b3aa8d93c766718f252d501b5d87f7342381a5e Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Wed, 12 Oct 2022 18:44:50 +0300
Subject: [PATCH 3/3] =?UTF-8?q?WIP=20=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB?=
 =?UTF-8?q?=D0=B0=20CalendarHeader,=20=D0=BF=D0=BE=D0=B4=D0=BA=D0=BB=D1=8E?=
 =?UTF-8?q?=D1=87=D0=B8=D0=BB=D0=B0=20moment=20js?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             | 14 ++++++++
 package.json                                  |  1 +
 src/assets/css/iconfonts.css                  |  1 -
 src/main.js                                   |  3 +-
 src/pages/calendar/TheCalendar.vue            | 21 ++++++++++-
 .../calendar/components/CalendarHeader.vue    | 36 ++++++++++++++++---
 6 files changed, 69 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a04d998..9260654 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "urban-couscous",
       "version": "0.1.0",
       "dependencies": {
+        "moment": "^2.29.4",
         "vue": "^3.2.13",
         "vue-router": "^4.1.5",
         "vuex": "^4.0.2"
@@ -9154,6 +9155,14 @@
       "integrity": "sha512-A/78XjoX2EmNvppVWEhM2oGk3x4lLxnkEA4jTbaK97QKSDjkIoOsKQlfylt/d3kKKi596Qy3NP5XrXJ6fZIC9Q==",
       "dev": true
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/mrmime": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
@@ -20965,6 +20974,11 @@
       "integrity": "sha512-A/78XjoX2EmNvppVWEhM2oGk3x4lLxnkEA4jTbaK97QKSDjkIoOsKQlfylt/d3kKKi596Qy3NP5XrXJ6fZIC9Q==",
       "dev": true
     },
+    "moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
+    },
     "mrmime": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
diff --git a/package.json b/package.json
index c9c4291..14c9cb5 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "moment": "^2.29.4",
     "vue": "^3.2.13",
     "vue-router": "^4.1.5",
     "vuex": "^4.0.2"
diff --git a/src/assets/css/iconfonts.css b/src/assets/css/iconfonts.css
index 7645504..08d3431 100644
--- a/src/assets/css/iconfonts.css
+++ b/src/assets/css/iconfonts.css
@@ -13,7 +13,6 @@
 [class^="icon-"]::before, [class*=" icon-"]::before {
   /* use !important to prevent issues with browser extensions that change fonts */
   font-family: 'icomoon' !important;
-  speak: never;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
diff --git a/src/main.js b/src/main.js
index 2e8202b..63b247d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,10 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
+import moment from "moment";
 import "./assets/sass/fonts.sass";
 import "./assets/sass/tailwind.sass";
 import "./assets/sass/variables.sass";
 import "./assets/css/iconfonts.css";
 
-createApp(App).use(router).mount("#app");
+createApp(App).use(router, moment).mount("#app");
diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index cb02df7..de38912 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -1,10 +1,29 @@
 <template lang="pug">
-  calendar-header
+  calendar-header(
+    :currentDay="currentDate"
+    @previous-date="switchPreviousDate"
+    @next-date="switchNextDate")
 </template>
+
 <script>
+import * as moment from "moment/moment";
 import CalendarHeader from "./components/CalendarHeader.vue";
+moment.locale("ru");
 export default {
   name: "TheCalendar",
   components: { CalendarHeader },
+  data() {
+    return {
+      currentDate: moment(),
+    };
+  },
+  methods: {
+    switchPreviousDate() {
+      this.currentDate = this.currentDate.clone().subtract(1, "day");
+    },
+    switchNextDate() {
+      this.currentDate = this.currentDate.clone().add(1, "day");
+    },
+  },
 };
 </script>
diff --git a/src/pages/calendar/components/CalendarHeader.vue b/src/pages/calendar/components/CalendarHeader.vue
index d25cda0..96f7d25 100644
--- a/src/pages/calendar/components/CalendarHeader.vue
+++ b/src/pages/calendar/components/CalendarHeader.vue
@@ -1,30 +1,58 @@
 <template lang="pug">
   .calendar-header-wrapper.flex.items-center.justify-between.ml-2.py-3.pl-5.pr-6
     .flex
-      base-arrow-button.left-arrow.mr-4
-      base-arrow-button.right-arrow.mr-6
+      base-arrow-button.left-arrow.mr-4(@click="previousHandler")
+      base-arrow-button.right-arrow.mr-6(@click="nextHandler")
       .text.flex.items-center
-        span.font-medium.text-base 24 Мая 2022 
-          span.today.font-bold.text-xxs(v-if="isToday") Сегодня
+        span.font-medium.text-base {{ dateString }}
+          span.today.font-bold.text-xxs(v-if="isToday")  Сегодня
     calendar-layout-switch(@selected="changeSelectedLayout")
 </template>
 
 <script>
+import * as moment from "moment/moment";
 import BaseArrowButton from "@/components/base/buttons/BaseArrowButton.vue";
 import CalendarLayoutSwitch from "./CalendarLayoutSwitch.vue";
 export default {
   name: "CalendarHeader",
   components: { BaseArrowButton, CalendarLayoutSwitch },
+  props: {
+    currentDay: Object,
+  },
   data() {
     return {
       isToday: true,
       selectedLayout: "",
     };
   },
+  computed: {
+    dateString() {
+      let newStr = this.currentDay.format("D MMMM YYYY");
+      return newStr
+        .split(" ")
+        .map((elem, index) => {
+          if (index === 1) return elem[0].toUpperCase() + elem.slice(1);
+          return elem;
+        })
+        .join(" ");
+    },
+  },
   methods: {
     changeSelectedLayout(option) {
       this.selectedLayout = option;
     },
+    previousHandler() {
+      this.$emit("previous-date");
+    },
+    nextHandler() {
+      this.$emit("next-date");
+    },
+  },
+  watch: {
+    currentDay: function () {
+      this.isToday =
+        this.currentDay.format("DD.MM.YYYY") === moment().format("DD.MM.YYYY");
+    },
   },
 };
 </script>