From 95e4ffc75360d03c96a14fc0257fa5a11336ecfb Mon Sep 17 00:00:00 2001
From: Maksim Zakharov <m.zakharov@IBS.RU>
Date: Mon, 25 Jul 2022 14:07:51 +0300
Subject: add datePicker, divider for motherboard

---
 src/components/_sila/Global/TableDatePicker.vue | 123 ++++++++++++++++++++++++
 1 file changed, 123 insertions(+)
 create mode 100644 src/components/_sila/Global/TableDatePicker.vue

(limited to 'src/components/_sila/Global/TableDatePicker.vue')

diff --git a/src/components/_sila/Global/TableDatePicker.vue b/src/components/_sila/Global/TableDatePicker.vue
new file mode 100644
index 00000000..c2b693ab
--- /dev/null
+++ b/src/components/_sila/Global/TableDatePicker.vue
@@ -0,0 +1,123 @@
+<template>
+  <div class="fans-date-switch">
+    <span
+      class="medium-12px scale-item"
+      :class="{ 'switch-active': timeScale === 'hour' }"
+      @click="switchTimeScale('hour')"
+      >{{ $t('global.datePicker.lastHour') }}</span
+    >
+    <span
+      class="medium-12px scale-item"
+      :class="{ 'switch-active': timeScale === 'day' }"
+      @click="switchTimeScale('day')"
+      >{{ $t('global.datePicker.lastDay') }}</span
+    >
+    <!--<span
+      class="medium-12px scale-item"
+      :class="{ 'switch-active': timeScale === 'week' }"
+      @click="switchTimeScale('week')"
+      >{{ $t('global.date.lastWeek') }}</span
+    >
+    <span
+      class="medium-12px scale-item"
+      :class="{ 'switch-active': timeScale === 'mounth' }"
+      @click="switchTimeScale('mounth')"
+      >{{ $t('global.date.lastMounth') }}</span
+    >
+    <span
+      class="medium-12px scale-item"
+      :class="{ 'switch-active': timeScale === 'year' }"
+      @click="switchTimeScale('year')"
+      >{{ $t('global.date.lastYear') }}</span
+    >
+    <div class="slider" />
+    <div class="date-picker">
+      <img src="@/assets/images/calendar-icon.svg" />
+      <span class="medium-12px scale-item">{{
+        $t('global.date.selectDate')
+      }}</span>
+    </div>-->
+    <!-- <img class="date-clear" src="@/assets/images/icon-clear-red.svg" /> -->
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    timeScale: {
+      type: String,
+      default: 'hour',
+    },
+    switchTimeScale: {
+      type: Function,
+      required: true,
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.fans-date-switch {
+  position: relative;
+
+  height: 48px;
+  padding: 0 16px 0 32px;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 24px;
+  border-bottom: 1px solid $gray-10;
+}
+
+.switch-active {
+  color: $primary;
+  transition: ease-in 0.15s;
+}
+
+.slider {
+  position: absolute;
+  height: 0px;
+  border-bottom: 4px solid $primary;
+  transition: ease-in 0.2s;
+  bottom: 0px;
+}
+
+.scale-item {
+  cursor: pointer;
+}
+
+.scale-item:nth-child(1).switch-active ~ .slider {
+  width: 92px;
+  left: 31px;
+}
+
+.scale-item:nth-child(2).switch-active ~ .slider {
+  left: 135px;
+  width: 105px;
+}
+
+.scale-item:nth-child(3).switch-active ~ .slider {
+  left: 255px;
+  width: 112px;
+}
+
+.scale-item:nth-child(4).switch-active ~ .slider {
+  left: 383px;
+  width: 107px;
+}
+
+.scale-item:nth-child(5).switch-active ~ .slider {
+  left: 508px;
+  width: 90px;
+}
+
+.date-picker {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+}
+
+.date-clear {
+  margin-left: auto;
+  cursor: pointer;
+}
+</style>
-- 
cgit v1.2.3